Flash: Fantasia Assignment Sample

We'll learn how to:
• Import and manipulate bitmap images.
• Use and define layers.
• Place blank keyframes in the timeline to create empty frames.
• Mark points in the timeline.
• Create and animate a layer mask.
• Animate an object along a path.
• And finally, to place a simple ActionScript command to stop the movie from looping.

I. Gather Materials

1. Download the Bitmap Image. Download the final bitmap image we will use, by right-clicking/control-clicking the image below. (OTHER IMAGES at bottom of page) Save images to a project folder.

2. Import the final bitmap. Create an FLA file with your name on it. Select the only current frame in the movie, a blank keyframe: why? when importing images, you must have a place to import them to. If your blank keyframe is black with a little empty circle in it (selected), go to the main menu and go "File > Import > Import to Stage" (command+R) and browse to the bitmap image called "derby.png" (it's a derby or bowler hat). When you press "open", the image will appear on your stage area. It has a gray area around it, meaning it is currently selected. (Do the same for the other images, with other titles, of course, and on their own layers.)

3. Convert Your Bitmap to a Graphic Symbol. If it isn't already selected, select the bitmap on your stage; it will take on a grayed edge. Go to main menu, select "Modify > Convert to Symbol" (F8). A dialogue box will appear. We're making our bitmap into a graphic symbol, so click on that choice. Write in the title for your new symbol: "derby_gr". (If you want, you can choose where the registration point is in the graphic; I find the center useful to start.) Remember that I won't accept FLAs that don't have properly named objects. Click "OK". The gray border has diappeared, and now it has a thin, blue border, which means it is now a graphic symbol, and it is selected. Look at the Properties Inspector to verify. Look in the Library: your new symbol is there with the original bitmap you imported. Now delete it from the stage -- it's all right, they'll both still be in the Library.

4. Duplicate the Derby Graphic Symbol in the Library. Click to select your "derby_gr" shape in the library. Find the little "menu" graphic in the UR corner of the library panel, and click to roll down. Select "Dupicate..." from the list. Name the duplicate symbol "derby_shape_gr" (we'll go into why a little later).

5. Convert ALL Your Bitmaps to Graphic Symbols. In the Library, open the folder labelled "bitmaps". One at a time, grab them and drag them to the stage. One at a time, convert them to graphic symbols and delete. Your Library will begin to fill with new graphic symbols. If you do them two at a time, you'll make graphic symbols containing both bitmaps; that's not good.

6. Organize Your Library. I won't accept finished FLAs in which there are any objects outside labelled folders -- this seems harsh, but we're preparing you for a job using Flash, and organization is key. Select and drag all your new graphic symbols into the folder labelled ".vector assets" (the dot puts it first in the library list).

II. Arrange Your Workspace

1. Set Movie Properties. There is nothing on your stage; click it, and the movie properties will appear in the Properties Inspector below. The important ones are: Size--500x400 pixels; Frame Rate--12fps.

2. Add Needed Layers. Create 7 more layers by clicking the little "plus-page" icon at the bottom of the layers panel. The top layer will now read "Layer 8". Here's the third big rule, things I won't accept: all layers must be named. Name the top layer "MARKERS" and the layer under it "ACTIONS" by double clicking on their current names and typing; I will explain later. The other frames we'll name them as we add content.

3. Add Needed Frames. This movie will need 120 frames or more. Using the scroll bar under the timeline panel, scroll till you can see frame 120 at the top. Click on frame 120 in the top layer (labelled "MARKERS"), and drag till frame 120 is selected (black) on all 8 layers. On the main menu, select "Insert > Timeline > Frame" (F5); active frames are placed not only in frame 120 of all ten layers, but in every frame up to 120! You know that the frame is active because the frame grid is gone. The active frames are, however, blank (white), because no objects have been put in them yet.

4. Add Frames Markers. Find the MARKERS layer at the top; we're going to mark the three parts of this story as a reference. Later we'll use markers to create interactivity, and markers are a great way to keep your place as you work. The story is in three parts: the "dream hat" flying across the Stage, the guy with the flowers arriving, and the real hat showing up and flying onto the guys head. Click to select the blank keyframe in the MARKERS layer. Now go down to the Properties Inspector and see that you have selected a frame; note the box with the grayed-out "Frame Label" inside. Type "Part 1" in this box. Now go back up to the layer, and click several frames over: you'll see a little red flag appear with the words "Part 1" next to it. The section of the story with the guy in it starts at frame 58. Find frame 58 in the MARKERS layer, click to select and add a blank keyframe by going to the main menu and selecting "Instert > Timeline > Keyframe. Now add a frame label as before with the words "Part 2". Add a label for Part 3 at frame 88.

III. Add Top & Bottom Content Layers

1. Add the Top Content Layer. Run the movie again; notice that everything happens behind the row of yellow poppies. That's because the poppies are on top. Find the top content layer (currently layer 6) and name it "poppies". Select the first frame of the poppies layer by clicking on the blank keyframe. Now go the Library, and drag the graphic symbol named "poppies_gr" to the stage, and position it at the bottom, as in the finished SWF (you're really dragging a copy or instance of the graphic symbol to the Stage). Note that all the frames in the poppies layer have turned gray, and the open circle in the selected keyframe has filled with white. The keyframe now contains the poppies image, and every frame after it carries the image, too, till the end of the movie at frame 120. This layer doesn't change, so let's lock it by clicking the dot that's under the lock icon at the top of the layers panel, otherwise, it's easy to change it inadvertantly.

2. Add the Background Layer. In the finished SWF, not that everything happens in front of the sky, which makes it the background. Go to the bottom layer, now called "Layer 1", and rename it "sky_bkgd". As before, select the blank keyframe of this layer, and drag "sky_gr " from the library to the stage. Note that, as you'd think, it appears behind the poppies. The background remains the same throughout the movie, so lock it, too.

IV. Create Mask Layer & a Hidden Layer

1. What is a Mask? This next bit gets a little tricky … We're going to make a layer that is invisible except when a mask passes over it, and makes a hole in the masked layer underneath.Whew! It's a bit much to get your head around. Remember the hat shape that showed the huge daisy as it went across the stage? That's what that is. In normal reality, we usually mask what we don't want to see; in the "Looking Glass" world of Flash, we mask what we do want to see. Instead of blocking something, the mask is a window to a hidden layer. Until the mask shows us what is in the hidden layer, we see the layer beneath. Weird. Don't blame me, I didn't invent it. But it is cool once you get the hang.

2. Make the Hidden Layer. Our sky background is the layer that will be masked, so we'll make the hidden layer we will see when the mask passes over it the layer just above the background. Select the keyframe of "Layer 2" and drag "daisy_cu_gr" from the Library to the Stage. Move the image till it totally covers the sky. At this point, the layer isn't hidden at all; it won't be till we make the masking layer. It will remain the same throughout the movie, so go ahead and lock it, too, and rename the layer "hidden_daisy"

3. Make the Mask Layer. You need a hat shape to fly across the big "hidden_daisy". Find the layer just above the hidden layer and name it "mask_derby". Select the keyframe of the mask layer, then drag "derby_shape_gr" from the Library to the Stage. The derby graphic should appear behind the row of poppies, but in front of the huge daisy. Click once on the layer in the layer panel (not in the timeline); it should turn from gray to blue. Now right-click or option-click on the layer: from the rolldown, select "Mask". A couple of things happen; first of all, and most spectacular, the hat graphic has disappeared and been replaced with that section of the now (mostly) hidden daisy layer — but it's a rectangle, not a hat shape! (We'll fix that in a moment). But look back at the layer panel: the "folded-paper" normal layer icon has been replaced with a blue-checked "mask" icon and been locked. Meanwhile, the "hidden daisy" layer has been slaved to the mask layer and give a new icon, too.

4. Make the Hat-Shaped Mask "Hat Shaped". Unlock the mask (hat) layer: the hat graphic will reappear. Double click to go inside "derby_shape_gr". click on the bitmap image inside and go "Modify > Bitmap > Trace Bitmap ..." and just use the default settings. For reasons known only to Macromedia, this sloughs off the transparent area around the bitmap. Now the hat should be hat-shaped as a mask. Re-lock the mask (hat) layer.

5. Position the Hat-Shaped Mask. We're going to animate the mask object, but first we have to find the right start position on the timeline and in relation to the stage. First, unlock the mask layer so you can move the object, and the hat-graphic appears red again. Click and drag the object off the Stage to the left and up a little. This is where the hat-mask will enter from, and it gets the object out of sight. Remember the hat-mask doesn't enter at first. In fact, the hat-mask starts across the Stage at frame 10. Now click on the keyframe to select, then either use the main menu "Insert > Timeline > Keyframe" or F6. The hat-mask is fully off the stage at frame 57, so we'll place a key frame at the object's end position. Best way is to move the play head (the red rectangle that shows what frame is playing) to frame 57 of the timeline, so the thin red line points out the correct frame, then select the right frame and press F6 to place the new keyframe.

6. Animate the Hat-Shaped Mask. We have two keyframes for the hat-mask, right? A "start" keyframe at 10 and an "end" keyframe at 57. Now go to frame 57, and click on the end keyframe. Click and drag the object off the Stage to the right and down a little; this is where the hat-mask will stop. Choose any frame between these two keyframes and click it to select. Go to the main menu, select "Insert > Timeline > Create Motion Tween" or right-click/option-click and choose "Create Motion Tween". The frames between the two keyframes turns a light blue, and there's an arrow; you've just made these frames "tween" frames. Scrub the play head back and forth between frames 10 and 57, and you'll see the hat-mask move across the Stage. Now lock the mask layer: the red hat disappears. Locking the layer turns on it's masking function. Scrub between 10 and 57 now, and you'll see the portion of the huge daisy the hat-shape reveals as it travels.

7. Test the Movie. See how it looks finished by creating an SWF of your FLA original; this is a procedure you'll want to employ often as you work. Go to the main menu, select "Control > Test Movie" (command+enter); this will bring up a window and play the SWF in it. If you let the movie play all the way through, you'll note that it will start again; it's looping. We'll stop that later.

V. Add the Guy Holding the Flowers

1. Place a Keyframe, Bring the Object Onto the Stage. The guy with the flowers comes into the movie next, at frame 58. Re-name Layer 4 as "guy w/ flowers", and follow the layer's portion of the timeline out to frame 58. Use F6 to place a keyframe in that frame, then drag "guy_gr" onto the stage. (Notice that all the frames before 58 are empty, keyed off a blank keyframe in frame 1.) The graphic image is at 100%: if you look at the movie, you'll see that the guy starts out smaller. With the graphic symbol selected, go to main menu, select "Window > Design Panels > Transform". In the dialogue box, click the "Constrain" box (to maintain proportions), then type 75% in the second box. Hit "Return" and the guy shrinks.

2. Animate the Guy with a Motion Tween. Frame 58 is the tween starting point, so hide the now smaller guy behind the flowers and partially off the Stage. Here's another way to add the end point of a tween. The guy will grow and move till he hits frame 78, when he'll stay put for the rest of the movie. Select frame 78, and go to main menu "Insert > Timeline > Blank Keyframe" This empties the frame and all the frames after. Now select the blank keyframe, and drag "gr_guy" from the Library a second time, positioning the graphic symbol in the final position at 100%. Now right-click/option-click and select "Add Motion Tween", and you're done with him. Lock the layer.

VI. Make the Derby Fly Along a Path

1. Animating Along a Path. I'll admit it, this next bit is tricky. Basically what you're going to do is draw a line (stroke), then use a motion tween to move an object, in this case a derby hat, along it.

2. Create a Normal Motion Tween. Change the title of Layer 5 to "derby anim" and place a keyframe at frame 88. Drag the graphic "derby_gr" to the Stage, and re-size it till it will just cover the guy's head. Obviously this is the end point, so we'll work in reverse this time. Lock this final position for the hat by creating a keyframe at the very last frame, 120. Now let's set the start point, by selecting frame 88 again. Drag the hat off Stage at the lower right corner. Create a motion tween; the hat moves in a straight line between the two keyframes.

3. Create a Guide Layer. Select the "derby anim" layer by clicking on it in the layers panel. Go to main menu "Insert > Timeline > Motion Guide"; this will create a new layer with the motion guide icon (you could also click the "+guide" next to the "Add Layer" button. Note that the animation layer is now indented, as it is slaved to the new guide layer.

4. Draw the Guide. Place a blank keyframe in the guide layer at frame 88. Select the pencil tool, and choose the "Smooth" option for it at the bottom of the tool panel. Draw a looping line like an "S" starting at the start point, and ending at the end point. The line won't show in the output SWF file.

5. Snap the Hat to the Guide. Your hat may jump onto this line as you draw it: great. If it doesn't, grab the hat by its registration point (very important) by clicking on it. (The registration point is the white dot that appears on an image when it's selected; you want it in the middle of the image normally.) and drag it till it clicks on the line. See if the hat has attached to the guide by scrubbing the play head. If it moves along the stroke, you're done! If not … Go to the end keyframe; grab the hat by it's registration point, drag it away from the end of the line, then move it back on. Retest by scrubbing. If you're having trouble, try locking and unlocking the guide layer; this sometimes helps stubborn guides to grab. Test the movie; notice that it keeps playing over and over. It's looping.

VII. Stop the Movie from Looping

1. Place an Action on a Frame. Here's your first little whiff of ActionScripting. Remember that layer you created named "ACTIONS"? Go to the last frame on it, 120, and use F6 to create a blank keyframe. Go to the main menu and select "Window > Development Panels > Actions". (Or you could press F9 or right-click on the frame and pull down to "Actions".) The "Action - Frame" panel will appear. In the upper left-hand corner, you'll see a sub-panel that has icons that look like little books with arrows on them. One of them is called "Global Functions". Click on this; it opens and there are more icons inside. Now click on "Timeline Control". Scroll down to "Stop" on the list, and double-click on it. Close the Action-Frame panel. Look up at the keyframe you created on the ACTIONS layer: the circle now has a little script "a" above it, which means you've got an action on that frame. When the play head reaches the Stop action, it will stop moving. Test the movie, and you'll see that it no longer loops.

Success: You're Done!

Here are the other images for the in-class follow-along: