HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

  

 

 

Tutorial - Timeline to Interface in Flash

(download source file interface.zip)

 

NOTE - currently, (09/09) we are creating these interfaces within a movie clip, rather than on the main stage ('Scene 1'), so scroll down to '2009 UPDATE'.  

 

Flash is a LINEAR environment. It was originally created for making animations. Your job is to somehow make a NON-LINEAR structure (i.e., an INTERFACE) in this environment. 

 

What follows is the BEST WAY to do this. Mess with this structure at your own peril! This is a pretty important tutorial - follow it to the letter!

 

1. Open Flash. On the main timeline (_root, or "Scene 1") create 6 layers and make them each about 35 frames long. Label the layers:

 

• labels and stops
• content images
• content labels
• content text
• buttons
• background

 

2. Flash will simply play a movie and LOOP it unless you tell it to STOP. So, we need to separate the timeline into KEYFRAMES that have LABELS for the frames and STOP actions attached to the frames. Every 5 frames in the "labels and stops" layer, select a frame and insert a KEYFRAME (F6).

  

 

 

 

 

3. Select the keyframe in frame 1, and then in the PROPERTIES window, LABEL the keyframes "Home". Repeat with each of the keyframes, using names that correspond to each of your Main Pages in your Website (the keyframes correspond to the WEB PAGES in the HTML world; the entire interface corresponds to an entire SITE!):

 

 

When you do this, you'll see LITTLE RED FLAGS indicating you've got labels!

 

 

 

(This is probably a good time to SAVE your .fla file right now as "interface.fla".

 

 4. Under Windows menu select Actions to open the Actionscript window. Select each of the keyframes and type the following into the actionscript window:

 

stop();

 

 

5. OK, you've now got a timeline that has labels and stops corresponding to each of the "pages" of your website. These keyframes don't need to be a specific length, either. They could be one frame each, they could be 50 frames each. I made them 5 frames each just for ease of explaining the process. Anyway, now you need to make keyframes on the other layers of the parts of the interface that CHANGE with each different page (the content - -images, labels, text). The elements of the interface that DON'T CHANGE - - the buttons (navigation) and the background - - don't require any keyframes.

 

In case you're wondering, you can select multiple layers of the interface by holding down the command (or apple) key and clicking. That's how I was able to select all the content layers, so I can add keyframes to them:

 

 

And here's the final interface, according to layers with changing material (labels & stops, content) and elements that don't change (buttons and background):

 

 

6. Now, let's make a simple background and some buttons (or drag these elements from the LIBRARY of previous projects). Select the background layer, select the rectangle tool, and draw a background. We'll make one with a gradient:

 

 

 

A couple of things: Notice how I've changed the Size of the project in the Properties window to 800 X 400 pixels - a nice 2:1 aspect ratio.  I selected the background and converted it to a symbol ("background"). Also, look at the background layer, how I've selected the "lock" icon, so now that layer is locked and I won't accidently insert anything into it.

 

7. Make a simple button. Need to review that? Hit F8 (menu: Insert: New Symbol), select "button", and draw a dot on each of the states. Change the color of the dot on the over and press states:

 

 

 

8. Drop instances of the Simple Button onto the "buttons" layer of the interface. Arrange them in a way that allows us to view your content effectively:

 

 

 

Each button will correspond to each big content area on your interface. Here, those buttons will take us to Home, About Me, Art, Text, Music, Resume, and contact.

 

9. Select the first button, and open the actions window. Type in the actionscript below:

 

 

 

 

Repeat this step for each of the buttons - the only thing that changes for each button is the LABEL in the actionscript: "Home", "AboutMe", "Art", "Text", "Music", "resume", "contact". The labels must be in quotation marks.

 

LOCK the buttons layer.

 

10. OK, you're almost done! Now, just select the various CONTENT layers corresponding to each Page (i.e., keyframe) in your site - drop or create images, text, and the page label ("Hello, welcome to my Art page" or whatever.

 

 

 

 

2009 UPDATE

now, everything's in a movie clip. 

 

 

So, the reason behind this change is the ultimate shift from Actionscript 2.0 to 3.0 (which we should have done a while ago anyway). While this is still done in Actionscript 2.0, it will, perhaps, get you more acclimated to the idea of ALL your scripts residing in ONE PLACE. In Actionscript 3.0, the _root location (main stage, scene 1) is replaced by stage, and all scripts are rolled into the object-oriented programming world of classes. But more on that later . . .

 

Here's what will be different for now:

 

1. There's only ONE FRAME on the main stage (scene 1, _root). 

 

2. We'll make THREE LAYERS: actionscript, buttons, and movie clips. Actionscript will 'live' only in the frame on the 'actionscript' layer, and it will tell the buttons what to do to control the movie clip (which will be set up like the main stage of this tutorial).

 

3. The scripts that attach actionscript to buttons will look like this:

 

_root.button01_btn.onRelease = function(){

_root.interface_mc.gotoAndStop("home");

}

 

. . . where button01_btn is an instance name of a button, interface_mc is the instance name of the interface movie clip, and "home" is a frame label on the labels + stops layer in that movie clip.