Trace Bitmap
Raster to Vector in Flash
The first tutorial deals with animating a simple example of Trace Bitmap using the default settings in Flash
Remember back to animating your Photoshop projects? This works along the same general idea but with an improved, more streamline workflow. Rather than animating on the Main Timeline, we will build the animation within a MovieClip. Set your Stage to the size of the image(s) -- in this case 800 x 355 -- and set the Stage color to black. Download the photo of Petco Park if you want to play along with the step-by-steps...
1 – Create a physical background layer (the same size as the Stage), select it, and Convert to Symbol (F8). Make sure it's a MovieClip and name it the same name as your file (without the .fla). This will come into play later, so trust me. Logical naming conventions will be critical to your workflow later in the year. Double-Click on the MovieClip to enter its Timeline, lock and rename the layer, then add Frames. The 60th Frame was an arbitrary choice. This animation will probably end up in the 10 to 15 second range (200 to 300 Frames). Add and rename 2 additional layers for our simple animation. Import and position the Petco jpg then Modify>Bitmap>Trace Bitmap and use the default settings (for now -- we'll get to customizing them later).
2 – If we want the image to fade in (from black) over the first second of the movie, we need to a Motion Tween, right? Select the traced bitmap by clicking on the Keyframe and Convert to Symbol (F8) and set the type to MovieClip. Add a second Keyframe on Frame 20, Create Motion Tween on Frame 1, select the Instance on the Stage and set the Color to Brightness -100, Reselect the first Keyframe and set the Easing to -100 so the fade-in has a less mechanical feel. Insert a Keyframe on Frame 60 of the photo layer, drag an instance of the petco.jpg onto the Stage, and position it with the Info Panel. Convert it to a MovieClip (F8) in anticipation of the Motion Tween we'll set up in the next step.
3 – Right now our animation has a 1 second fade-in of the traced bitmap which then sits on the Stage for 2 seconds (so that the viewer has time to begin to examine the detail then the jpg suddenly appears for a split second before the animation loops. What we're trying to create is an animation that slowly evolves from the traced bitmap to the completed image -- detail slowly emerges tricking the viewer into thinking, "What did I just see?" So, Insert Keyframe on Frame 150, Create Motion Tween on Frame 60, set the Color of the MovieClip Instance to Alpha at 0 (so the image is transparent), and set the Easing on the Keyframe on Frame 60 to -100 (so the image begins to reveal itself more slowly at first). Next we want the viewer to have time to look at the fully detailed image before it fades to black so Insert Keyframe on Frames 180 and 200 then add the steps shown in the movie to direct the image to fade to black over 1 second (with Easing!). Lastly (for this step at least), add 10 additional Frames to the animation for 2 reasons: 1 - it provides an half-second of black before looping -- an aesthetic touch, and it enables the content on the lower 2 layers to remain part of the animation -- kinda important if you want the animation to work. If you don't believe me, Edit>Undo (Command-Z) a couple of times so the extra Frames disappear and Modify>Test Movie (Shift-Return) to see for yourself.
4 – Let's say you watch the animation and you want to add (or subtract) time between Keyframes so that certain parts of the animation look more refined. There's several ways to do this but this is probably the easiest. Select a range of Frames between Keyframes as shown (yes, you want to extend the Timeline on all layers!) and Insert Frame. This adds x number of Frames to the animation, in this case another 1+ seconds to the still image of the traced bitmap. Test Movie and add (or subtract) Frames until the animation is optimized. This is a critical step that many students skip and their final animations suffer for the oversight. When finished, all layers should remain the same length. In some cases this is simply demonstrating your ability to tidy-up your Timeline but in others it is essential to the project working as intended. In this case, the Frames on the trace layer could have ended below the Keyframe at the end of the first Motion Tween on the photo layer. The bg (background) layer, however, must extend to the end of the longest layer or the animation may not work as intended when dynamically loaded into another project.
5 – The final piece of housekeeping is necessary so that we may use this MovieClip in other projects without encountering duplicate Symbol problems. Open the Library, add a folder by clicking the New Folder Icon, name it as shown, and drag the nested MovieClips into the folder. When finished you should have a project named: trace_bitmap_01.fla with a MovieClip and Folder in the Library named trace_bitmap_01 and trace_bitmap_01_files respectively. The Symbols within the folder need not have unique names. If you continue to give your projects and Master MovieClips unique, descriptive names you will find many benefits in future projects. If you don't follow this advise you will encounter unnecessary problems and I will have little empathy for your self-inflicted plight.
Mac Lab | Digital Art | 3D Design & Animation | Multimedia Production | Tutorials | Students | FAQ | Blog
Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open. Just some text to prop the page open.