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

 

Note: 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 tutorial 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 . . .

 

Tutorial 14—Timeline to Interface (Movie Clip Version)

Part 1: Setting up the Interface Movie Clip, adding a rectangle primitive as a background

 

What we're going to do now is to create a basic interface, where buttons on the Main stage tell a movie clip (also on the Main Stage) what to do. Flash was originally created as a LINEAR environment. It was created for making animations. Your job is to somehow make a NON-LINEAR structure (i.e., an INTERFACE) in this environment. 

 

We'va already created two of the three symbol types: the graphic symbol and the button symbol. Now, we're going to explore the most flexible, modular, and useful symbol in the world of Flash, the Movie Clip.

 

 

In the main menu,  select Insert > New Symbol. Click on Movie clip, and name this interface clip.

 

 

On the thin bar above the navigation bar (right below the interface clip timeline), find this icon [  ] on the far left edge. Click it four times to make more layers of the interface clip timeline:

 

 

 

Rename the layers (from top to bottom):

•  actionscript

• page labels

•  text content

•  image content

•  background

 

Click on the playback head (the red rectangle) at the top of the timeline. This deselects any individual frames in the layers below. Now, add about 35 frames. You can do this by pressing the F5 key on older keyboards, or select Insert > Timeline > Frame.

 

 

The timeline should look like this:

 

These are just plain frames. You can also think of each layer as a single keyframe that's 35 frames long. Plain frames hold material that doesn't change.

 

Think of this movie clip timeline as an entire little website. The layers designate separate  functions which we would see on a website (except for the actionscript; more on that later), and we are going to turn the timeline into a number of 'pages', each with different content, but sharing a common layout or design. Pages hold content that changes, so we need to start making keyframes.

 

It's a little tricky and takes some practice. But soon, you'll be making keyframes like a champ! First, just click on frame 5 of the page labels layer and release the mouse:

 

 

Move the cursor over frame 5 of the image content layer, hold down the SHIFT key, and click. The 5th frame of all three central layers will be selected:

 

 

Now, press the F6 key, or go to Insert > Timeline > Keyframe:

 

 

Repeat this procedure on frame 10 . . .

 

 

 

. . . and repeat every 5 frames until you reach the end:

 

 

 

 

Select the page labels layer, click on the first 5 frames of that layer (it doesn't matter if its all 5 frames, or any individual frame of the 5, by the way) . . . 

 

 

On the Properties Bar, find the space below Frame that says <Frame Label>. Click on that area and type 'page 1':

 

You'll see a little red flag (little cyan flag if your frame and layer is selected) that says 'page 1'. This is a frame label, and it will tell actionscript where to find 'page 1':

 

 

 

Repeat this procedure to give a frame label to each of your keyframes (page 2 through page 7): 

 

 

 

Now, it really doesn't matter how long each of these keyframe-based 'pages' are. They could each be one frame or fifty frames. The important thing is that we've created labels for the frames that matter.

 

So, with that in mind, let's add 2 more frames to each of the 'pages'. I'm doing this simply to make the page labels easier to read. Click the playback head in the timeline (above all the layers), and press the F5 key twice:  

 

 

We almost have our interface structure completed . . . Now, it's time to LOCK all the layers by clicking on the padlock icon above the top layer. Click on the individual padlock icon on the background layer, unlocking it. It's a good habit to lock all the layers you're not working on.

 

 

 

On the main menu, select Insert > New Symbol. Select Graphic, name it background box, and click OK: 

On the toolbar, click and hold the Rectangle Tool icon until the additional options open up, and select Rectangle Primitive Tool:

 

 

The Properties Bar will now show the options for your Rectangle primitive. Make the fill black (paint bucket) and the stroke transparent (pencil, red diagonal line). Click and drag on the editing area to draw your primitive rectangle: 

 

 

As long as the primitive is selected (purple outline with handles, and Rectangle Primitive in the Properties Bar), you can edit aspects of the primitive. First, type in the width (W) and height (H) boxes so the rectangle is 653 pixels wide and 345 pixels high: 

 

 

Not only can the size of a primitive be altered in the Properties bar, but so can the quality of the corners. Change the corner input right below the paint bucket selection swatch to 38, for a nicely rounded rectangle.

 

 

Click on the cursor tool, select To Stage in the Align window, and align the rectangle to top and left: 

 

Now select the background layer of the interface clip . . .

 

 

. . . select background box in the Library, and drag it to the editing area of the interface clip, near the crosshair:

 

 

 

Since the background will not be changing throughout the interface, we only need to drop it into the interface movie clip once. Your interface clip should now look like this: 

 

 

Align this instance of background box to the crosshair by again selecting To stage in the Align window, and click on align top and align left. Also, on the Properties bar, select Alpha in the Color drop down and change the Alpha value to 47%: 

 

 

Now, go to Part 2 to continue this tutorial . . .