Final Image Preview

Below are two final SWF animations we will be working creating. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Intermediate
• Estimated Completion Time: 45 minutes

Video Tutorial

I’ve created this video tutorial to compliment this text + image tutorial.

Method I: Blend and Morph

For this type of animation, in which one shape transforms into another (and another and another, if you wish), we’ll use the Blend Tool to make the in-between shapes, then release each shape to its own layer, then export these as a sequence for the Flash file.

Step 1

Since this animation will be used on the Web, start with a new RGB document. Here I have four simple icons, representing the four seasons. Select all the shapes, then center-align them horizontally and vertically, using the Align panel (or the Control panel). Make sure that each shape is on the same layer.

Step 2

Double-click the Blend Tool in the tool palette to bring up its options. Choose Specified Steps in the Spacing pull-down menu, and type 8. That will give us a smooth transition between the shapes, but won’t make too many layers.

Step 3

With all the shapes selected, go to Object > Blend > Make.

Step 4

With the blended shapes still selected, go to Object > Expand. This will separate the blend into individual shapes. For this effect to work, the individual shapes must be disassociated from one another, so go to Object > Ungroup.

Step 5

The ungrouped shapes should still be all on one layer. In the Layers panel, make sure the layer is highlighted, click the flyout menu, and choose Release to Layers (Sequence). You’ll notice that each shape is now on its own layer, and each layer has a different color. If you don’t see this, go back and make sure you have ungrouped the expanded blend.

Step 6

Go to File > Export and choose Flash (SWF) as the file format (NOTE: Depending on the version of Illustrator and/or the version of Flash you have installed on your computer, the file format might be called Macromedia Flash). Choose AI Layers to SWF Frames as the Export method.

Now click the Advanced button to bring up more options. Choose Lossless as the Image Format. Click Looping, so that your animation will play over and over again. The default settings are fine for the rest of the SWF Options dialog box, but you may want to experiment with them in future projects.

Step 7

To see your animation in action, do one of two things: Click the Web Preview button in the SWF Options dialog box, which will launch your default Web browser and play the animation. Or, save the SWF file, then drag it onto a blank browser window to play it.

Options

1. When working with a Blend to create an animation, you may have noticed the Animate Blends checkbox in the Advanced SWF Options dialog. This does what it says: it uses the blend for the animation and separates each expanded shape in the process. So you really don’t have to do Steps 4 and 5, but it helps to understand how Illustrator creates the animation.

2. If you prefer, the Illustrator file can be exported to Photoshop, then opened in ImageReady to create animations there. Follow Steps 1 through 5 above, then export as a Photoshop (PSD) file. The key here is to check both Write Layers and Maximum Editability in the Export Options dialog box. When you open the file in Photoshop, you’ll see each layer (in this case, all 29 of them) is preserved. You can then jump to ImageReady and edit the animation frame by frame.

Now that you understand the basic concept, you can experiment will all sorts of blends and morphs. For some really trippy animations, try using 3D objects or gradient-filled shapes.

Method II: The Appearance Panel

Step 1

Again, start with an RGB file. I’m using this simple zombie silhouette, with a fill of black and a stroke of none. I’m going to add a series of strokes to the outside of the shape, so that when animated, the strokes will radiate out from the shape.

Select the shape, go to the Appearance panel and choose Add New Stroke from the flyout menu. In CS4, all the modifications to this new stroke can be made directly in the Appearance panel. Going from left to right, first click the word Stroke to bring up the Stroke options. Click the third icon next to Align Stroke to align it to the outside of the shape. Next, click the color swatch to apply the color (I started with black), and then finally choose the stroke weight in the third field.

Step 2

To add the remaining strokes, you could repeat step one over and over, changing the options, color and weight each time. But to save a bit of time, simply click the Duplicate Select Item icon at the bottom of the stroke panel to make a copy of the stroke. Now choose the copy (it should be the one UNDER the original), and change its color to a very dark blue (or whatever you want), and the weight to 2 points.

Repeat this procedure several times, adding a lighter and thicker stroke each time. The end result should look something like the image below. You’ll see each additional stroke in the Appearance panel.

Step 3

Go to Object > Expand Appearance. This will expand and separate the strokes.

Step 4

Ungroup the expanded strokes, and just like you did in Part I, select the layer in the Layers panel and choose Release to Layers (Sequence) from the flyout menu (for this method, you really have to do this step).

Step 5

Export the file to Flash, as in Step 6 above. For this image, I am going to change the background color to black, but the other settings remain the same.

Step 6

To see your animation in action, do one of two things: Click the Web Preview button in the SWF Options dialog box, which will launch your default Web browser and play the animation. Or, save the SWF file, then drag it onto a blank browser window to play it.

Conclusion

As before, preview the file in your Web browser. Try dragging the browser window bigger and smaller. Since this is a vector-based file, the quality is great at any size. Happy animating!

Final Image Preview

Below is the final animation we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just 9/month.

..and let’s just remind ourselves of the subtly simpler animation we created during Part 1 of this tut..

Step 1: Plan of Action

Hands up, who followed the first part of this tut Illustrate and Animate a Bouncing Ball: Part 1 – Adobe Flash? Well those of you who did will have a Flash file to add to – those who didn’t, don’t worry. This second part can also be followed as an individual tut, giving an equally satisfying end result.

To start off, we’re going to create a 3D ball in Illustrator. Secondly, we’ll animate it within Illustrator and then lastly we’ll take it over to Flash for the finishing touches. Let’s begin by opening up a new document in Illustrator. The ball we used for the first part of this tut measured 90px x 90px so define your Artboard as having the same dimensions.

Step 2: Pattern

Before we create our 3D object, let’s add a pattern to the Symbols palette which we’ll use to map to the finished ball. If you recall from the first part of the tut, our ball had six alternately colored stripes – decorating our 3D version in the same way will be straightforward.

Create six vertical, equally sized and spaced rectangles. Color them alternately with red #DF3F22 and yellow #E3CB0E. Group them together if you wish and drag the whole lot into the Symbols palette (Window > Symbols). Assign this new symbol a name such as “ball_pattern,” not that we’re making any other symbols from which you need to differentiate it..

Step 3: The Ball

We’re going to use the 3D Revolve tool to make a ball. Begin with the Ellipse tool and make a circle the same size as (and Aligned with) the Artboard. Use the Direct Selection tool to remove the left anchor point. Finish by making sure it has a fill (though the color is irrelevant as we’ll be mapping the “ball_pattern” to it) but no stroke.

With this object selected go to Effects > 3D > Revolve… Check Preview and the default options should give you the following result.

Step 4: Mapping

Now give the ball it’s pattern by clicking Map Art from within the 3D Options dialogue. A sphere will just have one surface to map; nice and simple. Select your “ball_pattern” from the Symbol drop-down and check Scale to Fit.

The Shade Artwork option is of particular relevance here. If you check it, you’ll get a great effect on the ball’s surface (see image below). However, the resultant vectors become so complex that Flash finds it very difficult to render them in animation. This doesn’t mean that shading your ball isn’t an option – should you choose to do so, it’s possible to use the images in Flash by first rasterizing them. Flash has no problem handling the bitmaps this creates, but you of course lose the flexibility of working with paths.

I’ll demonstrate this later on, but for now just take my word for it and leave Shade Artwork unchecked! Click OK to return to the 3D Options dialogue and make sure the Surface option here is also set to No Shading.

Step 5: Position

To complete the 3D process (for now) position your ball to a suitable angle and click OK. Bear in mind that we’ll animate it revolving around it’s central axis as demonstrated below.

Step 6: Copy & Paste

Copy and Paste your 3D ball in place (Command + C, Command + F). The two objects will be visible as separate paths if you expand the layer.

Step 7: Talkin’ ’bout a Revolution

With the duplicate ball selected, refer to the Appearance palette (Window > Appearance). Double-click the 3D effect in order to edit it.

Once back in the 3D Options dialogue you’ll need to perform just one task and then click OK. We need to revolve the ball around 120°. This will turn the ball to the first point where it looks exactly the same as the starting point; there’s little point in revolving it a full 360° when it looks identical on three occasions during one revolution..

This will require a bit of eye-work. Click and drag one of the green edges on the position cube to revolve the ball around the central axis. Keep your eye on the preview of your ball and stop dragging when you see the ball has revolved enough. The wireframe of the ball matches neatly to our pattern; each colored segment of our ball consists of two longitudinal segments of the wireframe. This should make it easy enough to judge exactly where to stop dragging.

Step 8: The Perfect Blend

Having completed your two 3D objects go to Object > Blend > Blend Options. Here you’ll specify the animation steps between the ball’s two states. Choose Specified Steps and enter 18 (this is arbitrary, the more steps you choose, the more gradual the animation will be).

Step 9: Animate

Select your two objects and go to Object > Blend > Make. The result will be totally unnoticeable: all your blended steps are one top of one another..

In order to animate them in Flash, we need to split the steps and place them on separate layers. Expand the layer holding your blend and make sure you have the blend selected (as demonstrated below). Now open the palette menu within the Layers palette and choose Release to Layers (Sequence).

With that done, select all the resultant layers and drag them out of the first layer they’re sitting in. We need them to be entirely independent. Next, delete the original “Layer 1;” it’s now empty after all. You’ll be left with a series of layers, each one containing a 3D ball at gradual degrees of rotation. The last and the first ones are exactly the same of course (they were the two original states which became blended) so you can remove one of these two layers as well.

Step 10: Save and Close

Well, that’s that. I’ve just explained what to do in the title of this step; Save and Close your document. It’s finished!

Step 11: Flash! Aa-aaaaaaah! Saviour of the Universe!

Ever since Adobe took on Macromedia’s empire working between their applications has become easier and easier. Importing and exporting between Illustrator and Flash has been possible for some time, though the results could sometimes be a little unpredictable. Exporting Illustrator layers as SWF movie sequences, or as individual SWF files gave pretty good compatibility between programs. Then came CS3. Since that moment we’ve been able to import AI files directly and deal with the process entirely from within Flash itself.

Let’s take a look at the options we have and apply them to this tut. If you have a Flash file from Part 1 of this tut, or if you’re working with the source files, open up “source_1.fla;” our original animated ball. Otherwise just open up a new document in Flash.

Go to Flash > Preferences.. and choose AI File Importer. The options are all reasonably self-explanatory; we need to ensure that the contents of our AI file are imported as paths (not bitmaps, though as I mentioned earlier this is an option if the paths are too complex). Set up as below, our imported paths will be editable, the contents of each layer will be converted into individual movie clips and anything lying outside of the Artboard will be ignored (we only have objects within the Artboard so this doesn’t really affect us).

Step 12: Target

OK, let’s import our AI source file. Again, should you be working on a new flash file, just ignore my references to Part 1 of this tut.

In “source_1.fla” (or your own completed FLA file from Part 1) open the Library (Command + L) and double-click on “mc_ball_base.” This was our ball in it’s most basic state; this movie clip was what we span and then, in turn, bounced. Anything we do to this movie will therefore be spun and bounced too. Lock “Layer 1″ and make a new one called “imported ball.”

Step 13: Import

With the first keyframe of the “imported ball” layer selected go to File > Import > Import to Stage..

Select the AI file from your system and click OK. You’ll be presented with the Import *file* to Library dialogue, here’s where you finalize the import options regarding your AI file and this can be done on a layer-by-layer, object-by-object level.

First, you’ll notice that each of the Illustrator layers has a Path object within it. Each Path has a warning symbol denoting that there’s a problem. Indeed, clicking on Incompatibility Report will confirm that these objects are not compatible with Flash due to the 3D revolve Effect.

These are our rendered 3D balls and Flash cannot edit these in their current state; we would have had to have expanded the 3D effects for them to be editable. This isn’t a problem in our case. We don’t want to edit them, but we may want to scale them. Ignore the option of importing them as bitmaps; they’ll import fine as scalable paths.

All other default settings here are fine for our needs; just make sure that layers will be converted to Keyframes. Click OK.

Step 14: Stroke

Having imported your AI file, you’ll see a sequence of Keyframes on your “imported ball” layer. Moving the slider up and down the timeline will show how these frames give you your revolving ball. Perfect!

Now complete the effect by placing “Layer 1″ above “imported ball” and deleting everything from this layer except the stroke. Click then on the frame above the last keyframe in your sequence (in my case frame 19) and click F5 to spread the frames along the length of the animation. This will have placed the original stroke over your ball.

Step 15: Check it!

Command + Enter will preview your animation. In my case, I’ve also opted to slow down the original spinning effect by lengthening the motion tween in the “mc_ball movie.” You’ll see the ball spinning 360° clockwise and also 360° around the central axis; an effect impossible (without massive concentration and a couple of months drawing) through using only Flash.

Step 16: Importing Bitmaps

Are you curious to know how it would have looked had we have gone for the shaded ball? Repeat the previous steps having elected to shade your 3D ball in Illustrator:

1. Copy and Paste in place
2. Define a blend with however many steps you wish
3. Blend the two objects
4. Extract only the layers you need
5. Save
6. Open Flash, go to Flash > Preferences.. and choose AI File Importer
7. Opt to import layers as bitmaps
8. Select a keyframe on which to begin your sequence
9. Go to File > Import > Import to Stage..
10. Check it!

You’ll notice that I opted not to import the keyframes into the spinning movement; the ball no longer spins clockwise. If I had have done this, the lighting would also be spinning (and that would ruin the effect). It’s a pretty good result don’t you think? Again though, the problem with bitmaps is that they don’t scale or rotate well in Flash. As you may have seen, the point at which the ball flattens when it hits the ground is rendered somewhat pixelated – a problem vectors don’t experience.

Conclusion

Here ends the second part of this 2 part tut! These final steps have hopefully given you an insight into: separating Illustrator blends into layers, importing AI files into Flash, and capabilities and limits regarding vectors and bitmaps. As ever, I hope you enjoyed this one!

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final animation we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join VECTORTUTS PLUS for just 9/month.

Step 1: New Document

Let’s begin by opening a new document (File > New…). Just a Flash File (ActionScript 2.0) document is fine; the Actionscript version isn’t relevant as we won’t be using any.

Step 2: Document Settings

Use the Properties Inspector at the bottom of your screen to enter the Document Properties, click the dimensions button. First, give your document a title, then give the Stage (the area of your document which will be visible when published) dimensions of 600px by 400px. The background color we’ll leave white, but change the Frame Rate to 21 fps (Frames Per Second). 21 fps gives a quick, smooth rate of animation.

Step 3: Layer

Organization is key when working with Flash, so before we start drawing our ball, let’s name the layer it’s going to sit on. Double click Layer 1 and call it "Ball."

Step 4: Ball

Select the Oval Tool, define a stroke and a fill color, such as those shown. Next draw a uniform circle (by holding Shift and dragging the mouse). Also, use the Properties Inspector to give the Stroke a 3px weight.

Step 5: Symbol Creation

By creating symbols in Flash you can use multiple instances of the same objects within one file. Symbols are all accessible from the Library palette (Window > Library). By changing a symbol, all instances of that symbol within the file will be changed.

We’re going to turn our circle into a symbol which will become our ball. Select the whole circle and press F8. Name it "mc_ball," choose to turn it into a Movie Clip symbol and click OK.

Step 6: Shadow

Add a second layer underneath the "Ball" layer and call it "Shadow." Within the first frame of this layer draw an ellipse to form a shadow under the ball. Remove the stroke and color it #E2E0E5. Turn it into a symbol just as you did before with the ball, then name it "mc_shadow."

Step 7: Position

Position the two symbols at roughly the correct height to suggest that the ball is sitting on the ground. In the Align palette (Window > Align) check To Stage and center the two symbols horizontally.

Step 8: Add Keyframes

We’ve created our symbols in their most basic form, now let’s begin to animate them. Hold Shift and click on frame 20 of both layers on the Timeline. Go to Modify > Timeline > Convert to Keyframes or press F6 to turn these frames into Keyframes. Keyframes represent points along the timeline where something happens. This point on the Timeline will be the end of the animation; in other words the ball will have bounced up from the ground, reached it’s apex and returned to this starting position. The same applies to our shadow: it will have faded as the ball rose and returned to this starting state at frame 20.

Step 9: High Point

Now let’s add the point at which the ball is at it’s highest. Select frame 10 on both layers and press F6 to turn them into Keyframes.

Step 10: Move it!

With the Slider still at frame 10, move the ball symbol vertically upwards to some point on the Stage. Select the Free Transform Tool and make the instance of the "shadow_main" symbol wider.

Finally, with the shadow selected, go to Color on the Properties Inspector and change it to an Alpha value of 30%.

Step 11: Tweening

Tweening is the process by which Flash automatically generates all the stages between an objects or shapes two states.

We’re going to tween the frames between our first frame and halfway along the animation at frame 10. Select any frame between 1 and 10 on both layers and refer once again to the Properties Inspector. Choose Motion from the Tween select and you’ll see the resultant frames turn purple.

Step 12: Easy Tiger

Move the Slider back and forth along the timeline with your mouse and you’ll see the ball and shadow nicely animated. The speed of this movement is however completely uniform. We need the ball to decelerate as it reaches it’s apex and we can do this with ease (ha ha).

Again, with one frame of each layer selected (within the tweened area) refer to the Properties Inspector. Change the Tweening to Ease out with a value of 100. This will slow down our climbing ball.

Step 13: Back Down to Earth

Having successfully animated the rising of the ball, repeat the tweening steps for frames 11 – 20. This time ease the motion tween in -100, causing the ball to accelerate as it approaches the ground.

Step 14: Check it!

Press Command + Enter to view your animated ball so far. It should look like the animation shown below.

Step 15: Extra Touch of Realism

Assuming our ball is made of something a little more flexible than diamond it’s going to change form slightly upon impact with the ground. Let’s add one last Keyframe where the ball flattens momentarily.

Select frame 21 on both layers and press F6 to turn them into Keyframes. Then use the Free Transform Tool to squash the "ball" symbol from the top edge (hold Alt as you do so to keep the bottom edge where it is).

Step 16: Attention to Detail

Our bouncing movement is complete. Now we need to add further detail and movement to our ball. Double-click the "ball" symbol on any of the keyframes to enter the timeline of that symbol. You’ll see your current location underneath the timeline – you should be within "Scene 1, mc_ball."

Step 17: Layer 2

Click the Insert Layer icon to create a second Layer above the current one. Copy and Paste the circle in place from Layer 1 to Layer 2 (Command + C, Command + Shift + V). Now name the bottom layer "Ball Spinning" and the top one "Shade." Finally, lock the "Ball Spinning" layer.

Step 18: Chop Shop

Draw a large circle somewhere on the stage, making sure it has a different color to the existing circle.

Position the larger circle so that what can still be seen of the yellow circle is about the right shape for shading on the ball. Release all objects.

Now select the larger circle once again and press Delete. By laying un-grouped or non-symbolized forms over one another you combine them in the same way that you do with pixels in paint applications. By now removing the larger circle you’re left with just the small crescent which will become the shading on the ball. Select and remove the remaining stroke and color the crescent #E2E0E5.

Step 19: Shadow Opacity

As this crescent acts as shading on our ball it would be nice to give it a Multiply Opacity. In order to do this we have to convert it into a Movie Clip Symbol (you should be used to this action now). Press F8 and name it "mc_ball_shading" (these names are getting dodgy). Refer to the Property Inspector and change it’s Blend to Multiply. Perfect!

Step 20: Check it!

Press Command + Enter again to view your animated ball so far. It should look like the animation below.

Step 21: Further Vector Manipulation

Having dealt with the shading you can now lock the layer "Shade" (perhaps even make it invisible to make working easier) and unlock "Ball Spinning." We’re going to add a pattern to give our circle to give it that beach ball look. Use the Oval Tool to draw a large oval on the stage. It needs a stroke of 1px and #FFFFFF, but no fill color.

Step 22: Remove Excess

Place the stroke as shown in the image below and release. Now select the portion of the stroke which is outside the ball by simply clicking on it. As with making the shading crescent earlier, all the vectors on this layer have merged together, forming separate regions. Delete the outer portion of the stroke.

Step 23: Rinse and Repeat

Draw a couple of other ovals and place them on top of the circle so that they conjoin at the top somewhere. Then remove the excess from outside the circle. The ovals don’t all have to be of equal size or proportions, just try to recreate something a little like the image below. What you will have created is a series of segments which can now be individually colored.

Step 24: Check it!

Color alternate segments with #EA512D and delete all the pieces of white stroke from the ball. Press Command + Enter to view what you’ve made so far. It should look like the animation below.

Step 25: As the Ball Turns

Let’s add a final dimension of movement to the animation, we’ll get the ball to slowly spin as it bounces. To do this we first need the ball on layer "Ball Spinning" to be converted into a symbol. Click on the first keyframe of the layer to ensure that everything on it is selected. Now press F8 and name this Movie Clip symbol "mc_ball_base." You’ll see it’s been added amongst the other symbols in the Library palette (Window > Library).

Step 26: Add Frames

Select frame 32 of the timeline on the layer "Spinning Ball" and press F6 to create a new Keyframe. Select frame 32 of the timeline on the layer above and press F5. This will create a new frame, but as the "Shade" symbol doesn’t change state at all we don’t need to make this a Keyframe. We just need to ensure that when the Slider reaches this point along the timeline, the "Shade" symbol is present.

Why have we chosen frame 32? Well, in doing so we are going to make our ball rotate once every 32 frames. Our ball bounces once every 20 frames and so this irregular timing will mean that the ball finds itself at continually different spin stages during the bounce. If this isn’t yet clear, it soon will be..

Step 27: Rotational Tweening

Select a frame somewhere along the timeline on layer "Ball Spinning" and refer to the Properties Inspector. Select Motion tween as you did with the bouncing movement. This time, we don’t want any Ease value, we need the ball to steadily rotate at the same speed. Select CW (Clockwise) from the Rotate drop-down and leave 1 as the amount of times the ball will rotate during the tween. Of course, the "Shade" layer is unaffected and the shading will therefore remain in the same position on the face of the ball.

Conclusion

So there you have it! Press Command + Enter again and check that the movement is as you wanted. Should it need changing, you can increase the amount of frames in the tweens, change the height of the ball, the amount of times it rotates etc. This tutorial has given you an insight into: the Flash timeline and layers, the behavior of Flash vector drawing tools, the hierarchy of Flash symbols and objects, and motion tweening.

I hope you enjoyed it! Part 2 is due for publication next month and will expand on these techniques, enhancing the process with a touch of Illustrator..

Subscribe to the VECTORTUTS RSS Feed to stay up to date with the latest vector tutorials and articles.