Advertisement

Illustrate and Animate a Bouncing Ball: Part 2 - Adobe Illustrator + Flash

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

This tutorial expands on techniques covered in Part 1 of the Illustrate and Animate a Bouncing Ball series. We'll be using Illustrator's 3D tools to improve Flash's spinning movement of the bouncing ball and taking a look at working between the two applications. The steps involved can also be followed independently of Part 1.

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.