Using Flash for In Betweens

Using Flash for In Betweens
Before the computer arrived on the scene and made life much easier for the animator, one of the major tasks for creating animation was to draw all the individual "in between" frames for an animation. This was usually done with a technique called onion skinning. Animators would start with a "working drawing" and place a thin sheet of paper, called an onion skin, over the top. They would draw the same image onto this onion skin paper using the working example underneath as a guide. By making subtle changes to the second and subsequent drawings, an animation was created.

These days, we don't find this technique used as much because animation software creates these in between images for us. But, one of my readers recently needed to create the in betweens for one of her projects. Her first thought was to travel back in time several decades and draw each in between manually. Then a bright light bulb went off over her head and she realized she could still let FlashR do the work for her.

She needed 10 in betweens. So she opened Flash, installed the beginning and ending object on the Flash Timeline and told Flash to create a 10-framed Tween. Now the task was to grab each frame of the tween as an image. Because these images were going to be used over a background image, she decided on a png format.

Let's walk through the process in Flash CS5. Open a new ActionScript 3 project in Flash.

  1. Setup the PolyStar tool with the color of your choice. In the Tools Settings area of the Properties panel, click the Options button. Set the Style to Star.

  2. Draw a star on Frame 1. Convert this shape to a Movie Clip.

  3. Right-click on the star and choose Create Motion Tween.

  4. Drag the Tween Span from Frame 25 to end on Frame 10.

  5. Move to Frame 5 and add a Keyframe. In the Properties panel, reduce the opacity of the star to 10%. (Color Effect - Style - Alpha)

  6. Move to Frame 10 and add a Keyframe. Set the Alpha back to 100%.

  7. Click Control - Test Movie - In Flash Professional.

    You should see your star blink repeatedly.

    Now we need to grab the in betweens.

  8. Go to Frame 1 and click File - Export - Export Image. Choose the png format and name the file "Frame 1". Accept the default png export options.

  9. Repeat this for each of the 10 frames.

Note: Frames 1 - 5 are identical to Frames 6 - 10 (except in reverse). To save time, we could have exported the first 5 frames of the Tween and duplicated them in Photoshop, naming them Frame 6 - 10 in reverse order. I worked with all 10 frames in the example for teaching purposes.

IMPORTANT: These app development tutorials are written with the Flash novice in mind. You will need to optimize your app beyond what is covered in these tutorials before finalizing your app for the app store.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.