Scribd Logo
Upload

Welcome to Scribd!

  • 36 views

    Tutorial 1

    Uploaded by

    Darkn Bacteriofag
    This document summarizes a two-part tutorial on animating a bouncing ball between Adobe Illustrator and Flash. In part two, the author creates a 3D ball in Illustrator using the Revolve tool. Eighteen frames of the ball rotating are then imported into Flash to create a smooth animation. Some key steps include adding a pattern in Illustrator, mapping it to the 3D ball, splitting the blended frames into layers, and importing the Illustrator layers into Flash as an animation.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd

    Tutorial 1

    Uploaded by

    Darkn Bacteriofag
    36 views18 pages
    This document summarizes a two-part tutorial on animating a bouncing ball between Adobe Illustrator and Flash. In part two, the author creates a 3D ball in Illustrator using the Revolve tool. Eighteen frames of the ball rotating are then imported into Flash to create a smooth animation. Some key steps include adding a pattern in Illustrator, mapping it to the 3D ball, splitting the blended frames into layers, and importing the Illustrator layers into Flash as an animation.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document summarizes a two-part tutorial on animating a bouncing ball between Adobe Illustrator and Flash. In part two, the author creates a 3D ball in Illustrator using the Revolve tool. Eighteen frames of the ball rotating are then imported into Flash to create a smooth animation. Some key steps include adding a pattern in Illustrator, mapping it to the 3D ball, splitting the blended frames into layers, and importing the Illustrator layers into Flash as an animation.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    36 views18 pages

    Tutorial 1

    Uploaded by

    Darkn Bacteriofag
    This document summarizes a two-part tutorial on animating a bouncing ball between Adobe Illustrator and Flash. In part two, the author creates a 3D ball in Illustrator using the Revolve tool. Eighteen frames of the ball rotating are then imported into Flash to create a smooth animation. Some key steps include adding a pattern in Illustrator, mapping it to the 3D ball, splitting the blended frames into layers, and importing the Illustrator layers into Flash as an animation.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 18

    Tutorials\ Animation

    \Rating:

    1 2 3 4 5

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


    Ian Yates on Jan 26th 2009 with 29 Comments
    Download Source Files

    Source files for this tutorial are available to Premium members. Get a Premium Membership

    View post on Tuts+ BetaTuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network. This tutorial expands on techniques covered in Part 1 of the Illustrate and Animate a Bouncing Ball series. Well be using Illustrators 3D tools to improve Flashs 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 lets 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 didnt, dont worry. This second part can also be followed as an individual tut, giving an equally satisfying end result. To start off, were going to create a 3D ball in Illustrator. Secondly, well animate it within Illustrator and then lastly well take it over to Flash for the finishing touches. Lets 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, lets add a pattern to the Symbols palette which well 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 were making any other symbols from which you need to differentiate it..

    Step 3: The Ball


    Were 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 well 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 its 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, youll get a great effect on the balls surface (see image below). However, the resultant vectors become so complex that Flash finds it very difficult to render them in animation. This doesnt mean that shading your ball isnt an option should you choose to do so, its 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.

    Ill 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 well animate it revolving around its 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 youll 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; theres 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 youll specify the animation steps between the balls 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 theyre sitting in. We need them to be entirely independent. Next, delete the original Layer 1; its now empty after all. Youll 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, thats that. Ive just explained what to do in the title of this step; Save and Close your document. Its finished!

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


    Ever since Adobe took on Macromedias 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 weve been able to import AI files directly and deal with the process entirely from within Flash itself.

    Lets 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 youre 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 selfexplanatory; 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 doesnt really affect us).

    Step 12: Target

    OK, lets 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 its 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. Youll be presented with the Import *file* to Library dialogue, heres 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, youll notice that each of the Illustrator layers has a Path object within it. Each Path has a warning symbol denoting that theres 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 isnt a problem in our case. We dont want to edit them, but we may want to scale them. Ignore the option of importing them as bitmaps; theyll 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, youll 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, Ive also opted to slow down the original spinning effect by lengthening the motion tween in the mc_ball movie. Youll 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! Youll 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). Its a pretty good result dont you think? Again though, the problem with bitmaps is that they dont 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 dont 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.

    Enjoyed this Post?

    Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

    By Ian Yates

    Rollover to read this author's bio or click through to see a full list of posts by this author.

    Plus Premium

    Premium Members
    Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now

    Twitter 43,631 Twitter Followers Facebook 76,639 Facebook Fans Google+ 6,380 Google+ Followers

    Get Email Updates Subscribe via RSS

    Full-time, Part-time and Contract Jobs


    PHP Developer (Codeigniter/MVC) at Kimoby Sr. UNIX Sys. Administrator at Booking.com 3D Blipp Designer (Blender 3D) at Blippar PHP Developer (MVC/EE/Laravel/etc...) at Vector Media Group Tuts+ CMS & WordPress Editor at Envato

    More on Tuts+ Jobs...


    Facebook Twitter Google+

    You might also like