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

 

 

Tutorial 14—Timeline to Interface (Movie Clip Version)

Part 2: Adding Text, Scripting the Buttons

 

Before we begin, repeat this little mantra to yourself. This is what we're doing:

 

We're making a MOVIE CLIP ('interface clip') with KEYFRAMES that separate changing content (our 'Pages').

 

We will put DIFFERENT CONTENT on each of these pages, and separate it according to LAYERS (Text on one layer, later, images on another layer).

 

Then, we're going to put an INSTANCE of this MOVIE CLIP on the MAIN STAGE,

where BUTTONS (also on the Main Stage)

will TELL THE MOVIE CLIP WHAT TO DO

by using ACTIONSCRIPT

(in this case, to tell the playback head in the movie clip timeline to 'go to And Stop on certain pages,

marked by our frame labels).

 

Last time, we stopped about right here. Download that, and open it. In the Library, double click the Interface Clip. You'll notice I've added a bit of text on the first page of text content in the interface clip.

 

* * * * * * * *

 

OK, now, we will add some text content to the movie clip we've been working on (open this <LINK TO FILE HERE> if it's not already open). Lock all layers but text content, and unlock the text content layer. Click on the 'T' icon (text) on the toolbar.

 

 

 

In the Properties Bar, select Static Text, Optima Font, size of 25 pixels, grey color swatch, bold, Left align.

 

  

Click above the background graphic on the interface clip, and type 'Welcome To My Interface', or some other harmless greeting.

 

Click on the cursor tool on the toolbar. This will select the text block as an object, something you can move rather than a bit of text you can edit (double-click on the text to edit it again). Move this text block so it's also aligned left to the crosshair. 

 

 

COPY this text block (command + C, or Edit >Copy). Click on the next 'page' in the text content layer . . . .

 

 

. . . and PASTE IN PLACE (command + Shift + V, or Edit > Paste In Place).  REPEAT this procedure for all seven pages.

 

Notice you will have the pages 'filled' with a black dot, and the keyframe area will be grey instead of white.

 

 

On each of the pages, double-click on the frame in the text content layer of the timeline, to select the text on that page. Change the 'Welcome' greeting to the appropriate page name for each of the pages.

 

 

 

OK, that's done. Now, click on the cursor tool, click on the first frame ('Welcome . . .') on the text content layer, and click on the editing area (to deselect everything). 

 

Click again on the 'T' text tool, and in the properties bar, change the color from medium grey to white, by clicking and holding down on the selection swatch near the font size. Select  #FFFFFF, or white.

 

 

 

 

Change the text size to 11, and de-select the B (Bold) icon. This will be the text block for our body text. 

 

 

Click and drag to create a text block from about the middle of the background graphic to a little bit before the edge of the rounded grey background graphic.

 

Text blocks will be as wide as you initially drag them (you can adjust that dimension by dragging on the little white box in the upper right corner of the text block) and they will be as tall as the amount of text and returns you type in it.

 

Type in a greeting followed by a few lines of the traditional 'Lorem Ipsum' placeholder text. Click on the cursor tool once again (to treat the text block as an object. Copy (command + C).

Click on the second page in the text content layer. Paste in place (command + shift + V).

 

 

Repeat for pages 3 through 7.

 

OK, now we've got some text content on each page, and a changing page label. Ultimately, you'll want to change the text on each page, and you may even want to put a different visual image on each page (in the image content layer), but for now we have enough material to see if our scripts will be working.

 

We must now add a crucial bit of ActionScript to the actionscript layer for this interface to work. Lock all layers, then unlock the actionscript layer and click anywhere on the actionscript layer, within the single keyframe that tells us the script we write will be applied to all the frames in the interface:

 

 

 

Open the Actions window, and type:

 

stop();

 

This tells the playback head, where ever it is on the interface movie clip timeline, to always stop. The stop command is the ONLY actionscript we will put on a frame other than the main button script on the Main Stage, first frame, first layer. And you MUST write stop in lower case, and follow it by open and closed parentheses and a semicolon (not a colon). If you don't do that EXACTLY, the word will not turn blue (designating a reserved word in ActionScript), and the script will not work:

 

 

Once you've added ActionScript to a frame, a little 'a' will appear in the first frame of that layer:

 

 

 

The interface in a movie clip is now complete (except for the text content and images you'll add later to personalize the project a little more).

 

* * * * * * 

 

Get oriented to WHERE YOU ARE. After we've been editing the interface movie clip symbol for a long time, we're now going to work on the MAIN STAGE (main timeline, main scene, Scene 1, or _root—they all mean the same thing). So, let's go back to the MAIN STAGE, by clicking on the 'Scene 1' icon just below the timeline:

 

 

 

 

On the Main Stage timeline, click on the Add Layers button and add two layers above the Buttons layer, and call them Movie Clip and ActionScript. The main timeline should look like this (if it doesn't, fix it!):

 

 

 

And while we're now working on the main stage, let's make it a little more attractive. Click on the cursor tool, then click on the Main Stage to deselect everything. If it isn't 800 X 450 pixels, click on the size box in the Properties bar to change it accordingly. Also, change the Background color to dark grey (but not black):

 

 

 

The Main Stage with the buttons should look like this:

  

 

 

So, we have buttons on the Main Stage. We need to have them tell an INSTANCE of the symbol Interface (movie) clip what to do. Lock both the ActionScript and the Buttons layers, and select the Movie Clip layer:

 

 

Click on the cursor tool. In the Library, select the movie clip symbol 'interface clip' . . .  

 

 

. . .  and DRAG an instance of that symbol to the Main Stage. For best results, click and drag from the movie clip icon or from the preview window. DROP the movie clip a little below and to the right of the set of buttons:

 

 

 

The instance of the movie clip on the Main Stage is already selected (because of the light blue outline). Give this instance of 'interface clip' an instance name, by clicking on <instance name> in the name window below the symbol drop-down (currently set to Movie Clip). Give the instance the name interface_mc . 

 

 

Lock the ActionScript and Movie Clip layers, and unlock and select the Buttons layer:

 

 

Click on the cursor tool in the toolbar, and select the first button at the top of the row. Give that button instance the instance name button01_bt :

 

 

Repeat this naming for all seven buttons, incrementing the number each time:

 

 

NAMING of the INSTANCES on the MAIN STAGE (or any instances of movie clips or buttons you want to control) is CRUCIAL. Be consistent. And, I like to use suffixes like _mc for movie clips and _bt for buttons, because I might be referring to instance names in my ActionScript, and I might want to be reminded to what that instance name refers. 

 

Lock the Movie Clip and Buttons layers, and unlock and select the ActionScript layer:

 

 

Open the Action window, and type the following:

 

 

_root.button01_bt.onRelease = function(){ 

_root.interface_mc.gotoAndStop("page 1");

}

 

 

 

Press 'return' after that third line of code.  Copy those four lines of code, paste six times, and change the button instance name to match the page label each time:

 

 

 

This should now all work, unless you've named your buttons OR the interface instance OR your frame labels in your Interface Clip differently. 'Differently' includes case sensitivity. FLASH NEEDS ALL THE NAMES of the buttons, frame labels, and interface clip TO MATCH IDENTICALLY, EXACTLY with the ActionScript you write here, OR NOTHING WILL WORK. 

 

What does this mean, in English? (of course, inspired by Wizard People, Dear Readers)

 

_root (On the Main Stage—or Scene 1. . .) . (Dot separates elements in lines of ActionScript code, in what's known as 'Dot Syntax') button01_bt (. . . You will find a button named 'button01_bt') . onRelease (This is called an Event Handler) (Ahem, . . . When you press down and then RELEASE this button. . . ) = function() { ( . . . you will activate or call this mighty FUNCTION, which is what shall be put down between the squiggly brackets, herewith to follow forthwith: )

 

_root (Again, on the Main Stage. . .) .interface_mc (. . . you will find a lovely Movie Clip named 'interface_mc' . . .) .gotoAndStop  (. . . and you shall command the mighty PLAYBACK HEAD in the TIMELINE of that movie clip to GO TO, AND STOP ON . . .) ("page 1"); ( . . . the keyframe labeled 'page 1' . . .)

 

} ( . . . The End.)

 

Now, can you translate that into Interpretive Dance? 

 

But seriously, folks. You should now be able to test your movie. You can do that by selecting Control > Test Movie, or by pressing Command + Return (Mac) or Control + Return (PC).

 

And what do we have? We have instances of buttons on the Main Stage telling an instance of a movie clip (also on the Main Stage) to Go To And Stop On a number of frame labels in that movie clip's timeline, and the result is an interactive application—an interface created inside a movie clip! Yay!