Flash 8 Workflow

Resistance is Futile

Yes, there's a lot of different ways to work in Flash but we're going to stick with one strategy for our initial projects. Before beginning this tutorial make sure you have customized your workspace and set a new default stage size and frame rate (your document size will continually change depending on your project but we'll be working at 20 frames per second to start -- do not work at 12 fps!).

Note: Using the r1, r2, r3... for rollovers seemed like a good idea at the time but you'd be better served by relying on the rollover techniques taught in the Workflow II Tutorial. The rest of this, however, is essential to learn.

1 – Create a physical background layer for every project. In this example, a simple solid color is used. The physical background is essential if you want your dynamic content to load without unpleasant surprises. You'll understand more about this later in the semester. For now, always create a physical background for every project. Name and lock the layer then add extra frames so that we'll have some room to work. (Locking the layer is important. If the layer is unlocked, you will continually select it when working on other elements in your project.)

2 – Watch this movie and notice that the only difference between the two FLAs is that the second (workflow_01b.fla) has a black stage. The first, workflow_01.fla has a white stage. Compare these two swfs: wrong | right and notice that the first (workflow_01.swf) has a white line down the right side. To eliminate this problem, set your Stage background color to match the color of your content on the stage. If your content is image-based, black usually works well.

3 – Change the color of your Stage to match the solid color background and add 4 additional layers. The actions layer is always the topmost. Name the others: labels, movieclips, and buttons. Add a stop action to the Keyframe on frame 1 of the actions layer so that the playhead won't move when the project is launched.

4 – Add Keyframes to Frame 10 of both the labels and movieclips layers. To save time, Option-Drag copies of these two Keyframes to Frames 20, 30, 40, and 50. These Keyframes will hold our labels and content respectively. Add Frame Labels to the Keyframes on the labels layer. When naming the Frame Labels use names that make sense to you but never begin a label name with a number or the ActionScript we'll add in a few steps will not behave as you intend. (ActionScript aimed at a label named 2_clip will move the Playhead to Frame 2 rather than the label because Flash reads leading numbers as a specific Frame and ignores any letters that follow.)

5 – Add a second set of Keyframes to Frames 5, 15, 25, 35, and 45 on the labels and movieclips layer. These Keyframes will hold our labels and rollover content respectively. Our buttons will trigger the Playhead to move on the rollover state. This will enable you to create richer, more visually-enticing projects. Add Frame Labels to the new Keyframes on the labels layer.

6 – Add a single button to the Keyframe on Frame 1 of the buttons layer (set the stroke to 5 pixels in the Properties Panel). We will be using the Goto and Stop Behavior for all of our navigation buttons. Select the button to add ActionScript via the Behaviors Panel. NOTE: If you have the Frame selected rather than the button you will see only 4 choices in the Movieclip flyout menu. Set the first Behavior to move the Playhead to the label above the first rollover. (In my example the label is named r1 for rollover 1 -- get it?) By default the Event is set to: On Release. To change this click on the Event (On Release) and choose On Roll Over from the pull-down menu. Add a second Behavior to the button to move the Playhead to the label above the first MovieClip that will hold content for the first button. (In my example the label is named m1 for the content in the first MovieClip.) Although there is no content on either the Keyframes on the movieclips layer, our button is scripted and ready for action (pun intended).

7 – Select the button (if it's not still selected) and open the Actions Panel (Option F9). Examine the ActionScript but don't worry that the ActionScript for the On Roll Over Behavior is listed after the ActionScript for the On Release Behavior. Your project will work as intended if your ActionScript matches mine. If Flash (for some unknown reason) put an extra curly brace: } on line 16 (as it did on some of your previous projects) you need to delete it but do not delete the ending curly brace on line 15!

8 – Option-Drag 4 copies of your button, select all 5 buttons, and, after making sure you do not have To Stage selected in the Align Panel, align and distribute them so they are evenly spaced. Select the second button, open the Actions Panel (Option-F9), and change the Parameters so that this button takes the user to the rollover and content labeled r2 and m2 respectively. It is important that you begin to understand that the labels are the key to controlling the Playhead. Repeat for the remaining three buttons.

9 – Open the Actions Panel (if it's not already open) and examine the ActionScript on each button to confirm that each is scripted correctly.

10 – Select the Keyframe for the first rollover (on the movieclip layer beneath the r1 label) and add a rollover to provide feedback for the user. In this example I add information which seems to appear on the button itself. If necessary, nudge your artwork into position by using the arrow keys. Feel free to experiment with your own ideas but your rollover must animate on its own Timeline (within the MovieClip). You should understand how to make MovieClips that animate on their own timelines by now. If you are still getting broken tweens you need to review this tutorial. Remember to add a stop action within the MovieClip's Timeline unless there's a good reason for your rollover animation to loop.

11 – Add an animation to each of the other Keyframes associated with the remaining 4 buttons. Here are the results of my example.

12 – The next is to add content to the remaining Keyframes and I leave that to you. Remember though, nothing animates on the Main Timeline -- all animations occur in their own Timelines (within MovieClips).

13 – Lastly, the buttons themselves need to animate onto the Stage to add a more professional feel to the project. Begin by adding a second Keyframe on Frame 2 on both the buttons and labels layer. Name the label b1 (or something that makes sense to you). Select the second Keyframe on the buttons layer, click on one of the buttons on the Stage, and notice that the Properties Panel indicates that these are buttons. Select the first Keyframe on the buttons layer, repeat the last steps, then Modify>Break Apart so that the buttons revert back to shapes. In this way, we are not trying to animate buttons that contain ActionScript and may contain nested MovieClips where animation occurs. Doing so may cause long delays when testing your movie (and will also cause your grade to go down!). Convert the shapes on Frame 1 of the buttons layer to Symbol (MovieClip), Double-Click on the symbol to enter its Timeline, Modify>Timeline>Distribute to Layers, and rename and reorder the layers so that the arrangement make sense to you.

14 – Select the first shape by clicking on the Keyframe (this ensures that you select both the stroke and fill), Modify>Convert to Symbol (F8), choose MovieClip, and name the symbol (I used b1a to represent: button 1 animation). Repeat for the remaining shapes. Select the 5 Keyframes for layers 1 through 5, Option-Drag copies to frames 10 and 15, select a range of Frames that straddle the Keyframes on Frame 10, Right-Click and Create Motion Tween. Select the Keyframes on Frame 1 of layers 1 through 5 and Shift-Drag to move the Instances vertically off the Stage (holding Shift constrains the position of the Instances so that they do not move horizontally). Select the Keyframes on Frame 10 of layers 1 through 5 and Shift-Drag to move the Instances a bit past their final positions (already set on Frame 15). Add Easing as shown to make the animation more fluid. Select the range of Frames on layer 2 by clicking on the layer's name, move the selected Frames down 2 Frames on the Timeline so that the contents of layer 2 will animate in slightly after the content on layer 1, and repeat for remaining layers (moving each 2 Frames further than the last). Select the Frames directly above the Keyframe on layer 5 (but do not select the Keyframe itself), Right-Click, and Insert Frame so that all the content remains on the Stage. When you Insert Frames you are telling the content on that layer to remain visible until the Playhead reaches that point. Insert a Keyframe on the last Frame of the actions layer and add ActionScript via the Behaviors Panel to direct the playhead back to the label on the Main Timeline directly above the buttons' Keyframe (b1). The Goto and Stop Behavior must be directed to _root (the Main Timeline). When clicking on _root, the text box directly above _root in the Behaviors Panel should change from "this" to "this._parent" -- if, for some reason, the "this" does not change automatically, you will have to type "._parent" yourself (without the quotation marks). Some students have encountered this problem but I'm at a loss to explain why it's happening. Just make sure the text changes so the ActionScript points to the Main Timeline. Finally, add the name of the label on Frame 2 of the labels layer (b1) so that the Playhead returns to the point where your buttons are ready for users to click.

15 – Return to the Main Timeline (if you're not already there), Double-Click on any one of the Button Instances (they're all the same inside -- only the ActionScript differs), and add a simple animation to the over state of one button by running through the Convert to Symbol, Double-Click, animation routine you should know by heart. Command-Return to Test Movie (Command is the Apple Key).

16 – And now for the question that dozens of you are going to ask: How do I get inside of that first MovieClip on the buttons layer? (This will come into play hundreds of times this semester and I will expect you to know the answer) Double-Click on the registration point if you can't see the content. Watch how the cursor changes when moving over the Double-Click bulls eye.

17 – Add any animation (within a MovieClip) to each of the content Keyframes (m1, m2, m3, etc.) and show me the results. One thing I don't want to see is extra Keyframes at the end of your Timeline! This happens when you Drag out extra Frames rather than selecting Insert Frame. The movie shows you how to fix the dreaded problem (and how it's caused).

18 – Call me over to be checked off. But not until:

• Your buttons have animated over states (Step 13)
• Your buttons trigger animated feedback on rollover (Step 6)
• Your buttons lead to animated content on release (Step 12)
• Your buttons animate onto the Stage (Steps 13, 14)
• Your Timeline has correctly names layers and is free of superfluous Keyframes (Step 17)
• Your Library contains nothing called Tween 1 or Symbol 1 or anything else which indicates you haven't listened to what I've been saying for the first two months in this class

NOTE: If you call me over and waste my time because you haven't read this you'll owe 60 minutes!

Here's an example of the bare minimum I'm looking for
30 bonus minutes if you can make the button number stick around after it's clicked (it takes about two minutes to accomplish)*

*30 minute bonus only available to those who don't get the one hour penalty

19 – Create your own project(s) for the Progress Report. All work must be uploaded to your Website no later than Nov. 16.


Flash 8 Player Required – 1024 x 768 Minimum Resolution
Get Flash PlayerGet QuickTimeGet Adobe Reader

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.