The Adobe Illustrator CS Wow- P14 ppsx

Off in a FlashMaking Artwork for a Flash Animation Overview: Sketch character artwork; create brushes and blend objects for moving parts in the anima-tion; export the artwork as a stati

Illustrator now supports the

Adobe Color Picker Double-click

on the color proxy in the Toolbox

or on the Color palette to open

the Color Picker Enable the Only

Web Colors checkbox to limit the

Color Picker to Web safe colors.

Pixel units

Control-click (Mac)/Right

mouse-click (Win) on the rulers after

View>Show Rulers and select

Pix-els to display the units as pixPix-els.

Auto-opening select libraries

Set any swatch library

(Win-dow> Swatch Libraries) to open

automatically when you launch

Illustrator by selecting Persistent

from the palette's pop-up menu.

Choose it again to reset the

pal-ette to close by default.

SVG or SVGZ (Compressed)?

SVG compressed is gzipped or

"gnu-zipped," and is the

W3C-sanctioned version of "raw" SVG.

The Adobe SVG Viewer

automati-cally decompresses the file on the

client browser and displays it as

normal So there is little difference

between the formats, except that

one is much smaller An exception

occurs when you use a database

to serve information to a client In

this case, you will need a script to

decompress and then re-compress

the file.—Andrew T Watanabe

gradients or gradient mesh objects, recognize that you'll

be creating bitmapped images that will result in larger

file sizes

• If you import or create rasterized art for the Internet, rasterize at 72 ppi, not the default, to keep file sizes small.

• To export a file's layers or paths selectively, hide the

ones you don't want before exporting

• If the object you want to export to Flash contains

a dashed stroke, expand it using the Tip "Outlining

Dashed Strokes" in the Drawing & Coloring chapter Or

you can use your operating system's clipboard to copy thestroke from Illustrator and paste it into Flash To preservethe dash and gap pattern of the Illustrator object, choosePreferences > File Handling & Clipboard and then selectPDF for the Copy As option If you don't do this, the dashand gap pattern will be converted to the default pattern

in Flash

• Choosing Export Al Layers to SWF Files turns each Illustrator layer into a separate Flash file This is the preferred method of exporting Illustrator elements for animation.

SVG

Illustrator supports the export of Scalable Vector

Graphics (SVG) SVG is an emerging standard for aWeb graphic format that contains a combination of ele-ments such as vectors, gradients, type, raster effects, andJavaScript events, all based on the popular XML stan-dard SVG is also a text-based format, which means it can

be easily edited even after the file has been uploaded to

a Web server We'll talk more about this later when we

discuss data-driven graphics SVG is potentially a veryexciting file format, because it combines very small filesizes with crisp artwork that, like Illustrator vector art,Adobe Color picker

can be zoomed into and scaled up or down with no loss

of quality As with Flash, in order for exported SVG files

to be viewed in a browser, a special viewer (plug-in) is

required The SVG plug-in is automatically installed in

your browser when you install Illustrator

The SVG format supports JavaScript interactivity as

well as static image display To add a JavaScript event to

your artwork you must know JavaScript! Open the SVG

Interactivity palette (Window >SVG Interactivity); then,

with an object selected, choose an event from the pop-up

menu, and type a JavaScript command in the JavaScript

text field

DATA-DRIVEN GRAPHICS

With Illustrator's Variables palette, you can create

art-work in Illustrator that can automatically be updated or

replaced using a script you write For example, you can

create a template for a news headline where the actual

word headline is defined as a text variable With the use of

a script you can retrieve a news headline from a database

and automatically update the text of your headline with

the current news item The real time saver here is that

your template can be used over and over again for each

new headline—simply by running the script

There are four different kinds of variables you can

define in Illustrator: text, linked images, graph data,

and visibility When text is defined as a variable, you

can apply any attributes to the text and they will stick

with the text object (for example: font, color, style

infor-mation), and the text string will be replaced (as in the

headline example we mentioned above) A linked image

variable means that one linked image is replaced by

another If scaling or effects have been applied to a linked

image, then any image that replaces it will also have the

scaling or effects applied to it (This can be affected by the

Placement Options command in the Links palette menu

This command lets you set options for linked objects,

such as whether the incoming art remembers

transfor-mations such as scaling, or whether it's placed according

Pixel preview

Choose View >Pixel Preview and zoom in to 200% or more to display a rasterized preview of your vector artwork.

No more SVG export?

Illustrator now lets you save as SVG directly from the Save and Save As dialog box If you check the Preserve Illustrator Editing Capabilities option, a native ver- sion of the Al file will be included

in the SVG file, allowing for complete editability in Illustrator.

Go, Go Dynamic!

You can take dynamic graphics a step further if you're using Adobe GoLive 6.0 or higher, which under- stands Illustrator's variable con- tent Simply save your file in SVG format and import it into GoLive

as an Illustrator Smart Object The variables you defined in Illustrator can then be changed in GoLive.

CSS Layers

Illustrator allows you to export CSS (Cascading Style Sheets) lay- ers Newer browsers take advan- tage of DHTML, which allows you to overlap artwork layers.

Top level layers can be converted

to CSS layers on export from the Save for Web dialog box, and you can specify what layers to export from the Layers tab there.

What is Graphics Server?

Adobe Graphics Server is an image

server product that allows you to

automatically generate graphic

content for the Web in real time.

It uses complex scripts to take

Illustrator templates and update

them with a database as a user

browses a Web site.

Exploiting data sets

Illustrator's variables are all based

on the XML standard You can

im-port and exim-port variable libraries

with ease via the Variables palette

menu For a detailed description

of how Illustrator's XML variables

are defined, see the XML

Gram-mar guide PDF on the Adobe

Illus-trator CS application CD.

Variables and objects

The following variables can be

ap-plied to the following objects:

• Visibility: any layer, group, or

object

• Text String: any text object

• Graph Data: any graph object

• Linked File: any linked file

object

to other characteristics, such as proportions, file

dimen-sions, or how it fills the bounding box See the User Guide

for more about Placement Options.)Graph variables allow you to design a graph usingIllustrator's graph tools and link the graph to a database;when data changes, the graph is automatically updated.The final variable type is visibility, which allows you toshow or hide artwork You define whether artwork is vis-ible or not simply by showing or hiding the layer or sub-layer for that artwork in the Layers palette

To define a variable, open the Variables palette(Window > Variables) Type some text on the Artboardand click on the Make Text Dynamic button on theVariables palette (The same button changes to MakeGraph Dynamic or Make Linked File Dynamic depend-ing on your selection.) Use the same technique to defineother kinds of variables For visibility variables, use theMake Visibility Dynamic button

You can also store multiple data sets in tor—which almost makes Illustrator itself into a database.Once you've defined your variables, click on the CaptureData Set button (or choose Capture Data Set from theVariables palette menu) You can then change the data ofyour variables, capture another data set, and repeat Atthat point, you can use the Previous Data Set and NextData Set icons to step between data sets and see the dataupdate on your screen This is a great technique for seeinghow multiple versions of data will look when you designyour template Or, on the other hand, if you have multipleversions of a design or layout to present to a client, youcould assign the same variable to equivalent attributes ineach version of the layout design

Illustra-Ivan Torres

Symbols can dramatically reduce file size,

especially in art destined for the Web Artist

Ivan Torres began this beetle by first creating

individual body parts, many of which were

complex gradient meshes (To learn more

about creating and editing gradient meshes,

see the Blends, Gradients & Mesh chapter.)

Then he converted the parts into symbols by

dragging and dropping each onto the Symbols

palette To assemble the beetle from body

part symbols, Torres dragged the parts from

the Symbols palette and dropped them on the

artboard, creating instances of the symbols

To create the body parts with mirrored twins

on opposite sides of the beetle body, he usedthe Reflect tool, chose Vertical and clickedCopy When he had completed the illustra-tion, Torres chose File > Export and selectedMacromedia SWF format In the pop-up dialogbox, he picked Export As: Al File to SWF File

After opening Macromedia Flash (SWF), Torresimported the Illustrator Flash file (File >Import)and then used Flash's tools to manipulate thebody part symbols to create an interactiveanimation

Off in a Flash

Making Artwork for a Flash Animation

Overview: Sketch character artwork;

create brushes and blend objects

for moving parts in the

anima-tion; export the artwork as a static

Macromedia SWF file and a SWF

animation; preview animations in

Illustrator.

Character parts sketched with a custom

calli-graphic brush (see the Brushes chapter for help

with brushes)

Symbols palette displayed in Large List View

Seattle artist and animator Kevan Atteberry knows how

to get the most from Illustrator when preparing artworkfor animation in Macromedia Flash Besides makinghis Illustrator file a sketchpad filled with the eyes, ears,arms, and legs of the character he will animate later inFlash, Atteberry uses the Layers palette to preview parts

of the animation He also exports a Flash animation fromIllustrator to view as a draft version as he works on thefinal animation in Flash

1 Sketching characters, drawing body parts Atteberry

began with a custom calligraphic brush, sketching aseries of facial expressions and figure poses, honing thevisual character of a lemur until he was satisfied with thecharacterization and ready to construct the lemur's bodyparts Once you're done drawing your character's parts,you can keep your artwork as Illustrator objects or turnthe artwork into symbol instances It takes fewer steps toconvert your artwork to symbol instances in Illustratorthan to bring your artwork into Flash and make symbolsthere Also, if you plan to export a Flash movie from Illus-trator, turning your character parts into symbol instances

results in a smaller and faster-loading Flash file.

To make symbol instances, select the artwork for each

part body you drew and Shift-drag it into the Symbols

palette After you release the mouse button, Illustrator

adds the artwork as a symbol in the Symbols palette and

replaces the selected artwork with an instance of the

sym-bol that was just made (See the Brushes, & Symbols

chap-ter for more on symbols and instances)

2 Making brushes, creating blends for objects,

expanding blends, and creating symbols. For any part

you animate, you will need to create a sequence of parts—

for example, a leg that moves from straight to bent

Atte-berry created art brushes for the lemur's moving parts, so

he could paint each part in the motion sequence with the

brush (This saved the effort of creating separate art for

each part in the sequence.) First, draw a straight version

of the part When you have the look you want,

drag-and-drop it on the open Brushes palette In the New Brush

dialog box, choose New Art Brush

Next, you'll create artwork for the two extremes in the

motion sequence Draw the straight part, and a few inches

away draw the bent part Select both paths and apply

the art brush to both Now, to make other parts in the

movement sequence, make sure both paths are selected

and choose Object > Blend >Make; then choose Object >

Blend > Blend Options and key in the number of steps in

the Spacing: Specified Steps field Consider using a small

number of blend steps—Atteberry uses three or four—so

that if used as frames in a Flash animation, your SWF file

will have a smaller number of frames and a smaller file

size Finally, expand the blend (Object >Blend > Expand)

and Ungroup it so you have separate objects to use in

con-structing poses for the motion sequence

3 Exporting an SWF animation. Once your artwork is

complete, you can export the file as a draft or final

anima-tion that you can view in a browser or in the Flash player

To prepare your file for animation, first add as many

Two of the brushes Atteberry created for the moving parts

The straight and bent lemur legs representing the extremes of a motion sequence that Atte- berry used to create a Blend

A blend using three steps created between the straight and bent lemur legs

Al instances to Flash symbols

If you make symbols in tor and want to import them intoFlash, be sure to make instances

Illustra-of your symbols first When youexport an SWF file from Illustrator,the Symbols palette is not export-

ed with the SWF file Flash will ognize Illustrator's instances in theSWF file, however, and add them

rec-as symbols to its own Library

Exporting an SWF file

Illustrator's three Export As tions for exporting an SWF fileproduce files you can import intothe Macromedia Flash application

op-Previewing a motion sequence using Illustrator's

Layers palette as a crude film projector

Pasting into Flash

You can copy Illustrator artwork

and paste in Flash Be careful,

though—some Illustrator artwork

with complex styles and bitmap

effects will not look correct when

pasted in Flash

layers as frames needed to show the motion sequence.Treating each layer as an animation frame, assemblethe artwork for a particular pose or step in the motionsequence on each layer Move from layer to layer, creatingrenditions of the character on each layer until the char-acter has performed all of the poses or movements youwant to preview When you have completed all the layers,select File >Export From the Format pop-up, select Mac-romedia Flash (SWF) and in the Format Options dialogbox, choose Export As: AI Layers to SWF Frames If youranimation will use a lot of frames, or will include complexmotion sequences that require many intermediate poses

or steps, create the final animation in Flash instead of inIllustrator Flash's tweening commands automatically cre-ate many of the intermediate poses you would otherwiseassemble manually in Illustrator

There is another animation technique you can use topreview motion—from within Illustrator itself Atteberryconstructed a draft version of part of the animation topreview the look of objects and of the motion sequence

To do this, you can construct a preview by first followingthe steps described above for positioning poses on succes-sive layers After you've filled all your layers with artwork,select Palette Options from the Layers palette menu Click

on the Show Layers Only checkbox to enable this optionand key in 100 pixels in the Other field To preview theanimation, position the cursor over a Layers palette scroll-ing arrow and press the mouse button to cause the layerthumbnails to scroll like frames in a projector

4 Exporting an SWF file to import into Macromedia Flash Another use of your artwork is to export it as an

SWF file and then import the SWF into Flash to developthe finished animation To export, choose File > Exportand from the Format pop-up, choose Macromedia Flash(SWF) Then, in the Format Options dialog box, choosethe Export As option that saves the SWF in the format(single frame file, animation file, or multiple files) thatyou need

Kevan Atteberry

To assist in constructing his animation "Millard

and the Pear," which is described in the

previ-ous lesson, artist Kevan Atteberry developed a

file of recyclable parts—a cartoon "morgue"—

from which he copied parts and pasted them

in the file in which he created the animation

To trim the file size of the animation, Atteberry

converted the artwork for parts into symbol

instances by Shift-dragging them to the

Sym-bols palette When he needed to edit a symbol,

Atteberry selected the instance and choseObject > Expand After editing the artwork,Atteberry selected the artwork and Shift-dragged it to the Symbols palette to automati-cally convert it back into a symbol instance

Layering Frames

Turning Layered Artwork into Keyframes

Overview: Draw artwork for print;

design animation sequences using

artwork; create layers and lay out

art and text in positions for

anima-tion keyframes; export layers as

Shockwave Flash frames.

Artwork originally created for The Red Grape's

printed restaurant menu

Planning an animation sequence by positioning

objects and text at beginning and end of the

sequence

After designing the brand identity, menu artwork, and awall mural in Illustrator for The Red Grape, a Sonoma,California restaurant, Hugh Whyte of Lehner andWhyte faced one more task He needed to turn his art-work into Flash animations for the restaurant's Web site(www.theredgrape.com) The key to recycling the artworkwas to develop a productive workflow between Illustra-tor and Macromedia Flash that would allow Whyte andMark Murphy of DigitalKick to work within the softwarethat each designer knew best

1 Drawing artwork and planning objects and type for keyframes While his drawings of people and food

were originally designed for the printed menus, Whytereturned to the artwork and prepared it for the Web as aFlash animation

If you are more comfortable designing in tor than in Flash, stay in Illustrator and use the artworkyou've already created Think about how your artworkwill move in the animation sequences you plan Identifythe starting and ending locations of each object in ananimation sequence Also note where objects will changedirection as they move during the sequence

Illustra-2 Arranging artwork on layers To facilitate their

collab-oration, Whyte and Murphy devised a workflow in whichWhyte created in Illustrator what Murphy would use as

keyframes in Flash You can do the same (even if you will

be producing the final animation yourself in Flash) and

enjoy the ease of using Illustrator to build the foundation

of your animation

Begin by creating a new file (File >New) In the default

layer of the new file, arrange objects and text in the

posi-tions you plan for the first frame of the animation Next,

duplicate the default layer by dragging the layer name and

dropping it on the Create New Layer icon at the bottom

of the Layers palette (see the Layers chapter for more on

managing layers and the artwork on them) In the new

layer, arrange the objects and text for their next positions

in the animation sequence These positions might be the

final ones in the animation, or points in the middle of the

sequence where something occurs (for example, a text

object stops moving) Continue creating new layers,

copy-ing and pastcopy-ing artwork, and positioncopy-ing the artwork,

until you've created as many layers as you'll need to cover

the beginning, end, and any important intermediate

frames of the animation

Keep in mind that you don't need to make every

frame that will appear in the final animation That would

be unnecessary! Instead, create layers and arrange the

text and graphic objects on them for the critical frames

(which will be used as "key frames" in Flash) Once

exported, the Flash software will generate the in-between

frames (or "tweens") to fill in the frames you haven't

cre-ated, saving time and producing a smaller Flash file size

3 Exporting the Illustrator layers as Shockwave Flash

frames. When Whyte finished building the file, he

deleted any artwork or layers that weren't required as

Flash frames

To save the file, choose File>Export and from the

Export dialog box, choose Macromedia Flash (SWF) from

the Format pop-up Click Export, and in the Macromedia

Flash (SWF) Format Options dialog box choose AI Layers

to SWF Frames Set the other dialog options as you prefer

and then click OK

Artwork for the final animation sequence ranged on three layers; the Layers palette show- ing the layers in the sequential frame order of the animation

ar-Macromedia Flash (SWF) Format Options dialog

Webward Ho!

Designing a Web Page in Illustrator

Overview: Set up a document for

Web page design; use layers to

struc-ture artwork for pages and frames;

save layouts as template images; slice

text and artwork and save an HTML

file and sliced image files.

Gordon constructed the Cartagram Web site

around a two-frame design; the black rectangle

represented the top frame's Web page, used for

the logo and main navigation controls; the other

colored rectangles served as a design grid for

dividing areas of the Web pages that would load

in the bottom frame

216 colors, or millions?

The palette of 216 non-dithered

Web safe colors was designed for

text and graphics displaying on

8-bit monitors But how many

people are restricted to 8-bit

color anymore? Not many Most

computers are now equipped with

24-or 32-bit video boards,

render-ing Web safe colors unnecessary

So you can choose from millions

of colors, not just 216

If you are comfortable designing and drawing inIllustrator, why go elsewhere to design your Web pages?Steven Gordon uses Illustrator to design and previewWeb pages, create comps for client approval, export a lay-out as a template for use in Adobe GoLive, and slice andoptimize artwork before saving it for use on Web pages

1 Choosing document settings With Illustrator, you can

draw and organize artwork to design a simple Web page

or a more complex page with multiple frames To startyour page, create a new document (File >New) In theNew Document dialog box, set Units to pixels, specify

an Artboard size in pixels equal to that of your intendedWeb page size, and choose RGB Color for Color Mode.You may want to create a grid (Preferences > Guides &Grid) that will help you align and constrain artwork.Also, if your artwork will be exported in a bitmapformat like GIF or JPEG, consider turning on pixelpreview (View > Pixel Preview) —this lets you see the anti-aliasing of your artwork (See Tip, "Anti-antialiasing," for

a technique that helps you reduce the amount of blurringthat affects artwork when it is antialiased.)

2 Structuring pages with layers and adding artwork Let

the Layers palette help you organize the layout and

con-tent of your Web page (See "Nested Layers" in the Layers

chapter for more on making and manipulating layers.)

Gordon created separate layers for the top and bottom

frames of his page, and sublayers for multiple pages he

designed for the bottom frame He toggled layer visibility

on to preview the layout and content of different pages in

the bottom frame of his page design

Once you've set up the layer structure of your

docu-ment, you're ready to add content to your page design

As you create text and graphics, and import images,

use familiar Illustrator tools and palettes to help make

and arrange objects Gordon relied on the Align palette

to easily align and distribute navigation buttons in the

top frame and to center or justify colored background

rectangles for both frames (using the Align to Artboard

option in the Align palette)

3 Saving a Web page design and importing it into

GoLive Once your page design is complete, export it as

a GIF or JPEG and import the file into Adobe GoLive as

a "tracing image" to help you construct a finished HTML

page If you set up the Artboard to match the

dimen-sions of the Web pages you'll construct in GoLive, you

can crop your Illustrator artwork so that it matches those

dimensions when exported as a bitmapped image To do

this, either create cropmarks from the Artboard (see the

Type chapter for instructions on making cropmarks) and

then use File > Export, or skip the cropmarks and choose

File > Save for Web (which automatically crops artwork to

the Artboard)

When you begin working in GoLive, import the image

you just exported from Illustrator and use it as a template

to guide you in building the page First, choose Window >

Tracing Image; then, in the Tracing Image palette, click

the Source checkbox and the Browse icon to select your

Illustrator-exported image Next, adjust the HTML page's

frame widths, and create text boxes and other objects in

GoLive that match the Illustrator image Repeat these

steps with other exported images when building other

pages in GoLive

The layer structure for the Web page design, showing the top and bottom frames, and two sublayers representing separate pages designed

to load in the bottom frame

The Tracing Image palette in Adobe GoLive5;

Gordon clicked the Browse icon to locate the layout image file he had exported previously using Illustrator's Save for Web command

Anti-antialiasing

When artwork is saved as abitmapped image, straight linesand other objects may be anti-aliased (blurred) To minimizethis, first set Keyboard Increment

to 0.5 pixels in the Preferences >

General dialog box Then makesure both View >Pixel Preview andView >Snap to Pixel are turned

on Next, draw and position yourobjects Finally, turn off View >

Snap to Pixel, and nudge aliasedobjects in 0.5 pixel increments asneeded, using the Arrow keys

—Mordy Golding

Object or clipping path?

When making a slice using the

Object>Slices>Create from

Selection command, you'll need

to decide whether the clipping

path or the artwork it masks will

become the slice Clicking on a

masked object will make a slice

out of the object instead of the

clipping path Click carefully!

The numbered slices created after using the

Ob-ject >Slices >Create from Selection command

In the Save for Web dialog box, a preview of

the slices is displayed; Gordon clicked in a slice

with the Slice Selection tool to select it and

then specified settings related to file format and

other image characteristics in the Settings

por-tion of the dialog box

4 Slicing artwork Instead of using your Illustrator artwork

as a template in GoLive, consider using Illustrator's slices

to turn text, artwork, and placed images into elementsyou can use when building your HTML pages Slices alsolet you divide a large image or layout into smaller areasthat you can save as separate, optimized images Theseimages will load simultaneously, and usually faster than asingle large image in a Web browser

You can use artwork selections, guides, or the Slicetool to divide your Illustrator design into slices Gordon'sdesign was divided by colored backgrounds and a maskedimage (You can use non-contiguous objects for slic-ing; Illustrator will add slices to fill in any gaps betweenobjects.) To make the slices, first choose Object >Slice >Clip to Artboard, then select an object and chooseObject > Slice > Create from Selection Repeat these stepsuntil you've created all of the slices you need If you need

to remove a slice, select and delete it; or in the Layers ette drag its name (<Slice>) to the palette's trash icon

pal-5 Saving slices, and using and previewing the HTML page When you've finished slicing your artwork, you

can save the slices as text and images Choose File > Savefor Web; in the dialog box, click on the Slice Select tooland click one of the slices Pick the settings that you want

to use in saving the selected slice Gordon set GIF as thefile format for the two blocks with solid color fills andtext For the globe image, he chose JPEG as the file for-mat and enabled Optimized to make the file size smaller.After clicking on Save, Gordon entered a file name for theHTML file (which automatically became the root name ofeach of the sliced image files), and made sure that HTMLand Images were selected in the Format pop-up menu.After Illustrator saved the HTML file and the sliced imagefiles, Gordon opened the HTML file in GoLive to addhead tags (like meta tags) and then previewed the file in aWeb browser

Steven Gordon / Cartagram

To build image-mapped buttons at the top

of a travel Web page, Steven Gordon first

placed a TIFF image in Illustrator to serve as

a background image Next, he drew a

but-ton shape with rounded corners and gave

it a white Fill and a 25% Opacity using the

Transparency palette He copied the button

six times and arranged the buttons in a row

above the background image To space the

but-tons evenly, Gordon positioned the left and

right buttons, selected all buttons, and then

clicked the Horizontal Distribute Space icon

in the Align palette To map the buttons to

URLs, he selected each button shape and in the

Attributes palette (Window >Attributes) choseRectangle from the Image Map pop-up menu

He then keyed in the button's URL link in theURL field In the Save for Web dialog box, Gor-don selected JPEG as the output file format,clicked Save, and then chose HTML and Imagesfrom the Format pop-up menu He entered afile name in the Name field and clicked Save

Making Waves

Transforming and Blending for Animation

Advanced Technique

Illustrator with Photoshop

Overview: Create "key"frames with

transformation tools; blend to create

steps; transform your steps; bring the

steps into Photoshop.

The first key frame; next, Rotating a copy; then

using the Add Anchor Point and Direct Selection

tools to transform the copy into the next frame

Making certain that the first and last frame have

the same number of anchor points in similar

alignment for smooth blending (see "Unlocking

Realism" in the Blends chapter for more on

pre-paring objects for smooth blending)

Illustrator's transformation tools, used in combinationwith the Blend tool, are wonderful animation timesavers.Commissioned by Adobe Systems for a special promo-tion, Bert Monroy used these techniques to prepare many

of the objects within a room for animation

1 Establishing the "key" frames To create an animation,

you must first establish the "key" character positions.How many key frames you'll need will depend on thecharacter, and how it will be animated Create a character

in a neutral position, and if you'll need help ing registration, draw an unstroked, unfilled boundingrectangle, amply surrounding the character Select theobjects making up the character and the bounding rect-angle and Option-drag/Alt-drag a copy to the side of the

maintain-original On the copy of the character (not the bounding

box), use the transformation tools and Direct Selectionediting to create the next extreme position (for more on

transformations, see the Basics and Zen chapters) In

Monroy's animation, the characters were: fan, clock ond hand, clock pendulum, plant, and the "wave." He firstdrew the wave in horizontal position using a gray rect-angle and a second object for the blue liquid To create theleft-tilted position, he rotated a copy of these two objects,then used the Add Anchor Point and Direct Selectiontools to adjust the liquid anchor points manually