Creating Interactivity with the Flash TimeLine.

Call or email for a one on one Session
415-839-0096

Where We Left off?????

Well, we have our boring little red, blue, green and yellow animation.  But, the thing is that this could be a presentaion if we just make a few additions and changes.

What is InterActivity and What are the Options.

Interactivity would mean that we have buttons, and when we click a button, we show the viewer something new.  There are many ways to do this.  Here is a basic list and we will cover them all.

1.  Frame Labels.  Give a frame a name and on release of a button, send the viewer to that frame to see something new.

2.  Using Scenes in Flash. If you're new to Flash, most likely you have been working in "Scene 1," up to now.  You can create as many scenes as you like, create differnent parts of a presentation, and put each different part of the presentation into another Scene.  We'll do that too.

3.  Send the user to a new html document.  Your file size may be so large, that you need to just create a Flash file and put it in a new html document and on release of a link, you go to a different page.

4.  Levels.  Levels is a great way to go, but somewhat hard to explain.  In this method, we load differnent Flash Files into an exsisting Flash File.  Sometimes I'll have one presentation that has 50 different Flash Files being called upon.  This is good because my original document might have 50 buttons, and when I click a button, it loads a different file.  This means that the view doesn't have to load all of the content at one time, they just get what they want, when they need it.  This is a good one.

There are more methods, but these will give you some options for now.

Click this Button, Go to This Frame and See New Stuff!

We want to make it so that when the viewer clicks a button, they see different parts of our presentation (you could say different parts of our web site).

The problem with Flash is that the Playback head in the timeline was invented by none other that Bruce Springsting.  Yeap, most people don't know that.  The Playback head was,,,,,,,,,,,BORN TO RUN...........Right now, if you test your movie, you see one color after the next, we are not in control. 

If we want to put Bruce out of business, we have to do it with ActionScript.  Actionscript is the code that runs Flash.  If we can "Stop" the playback head in each area, Red, Blue, Green and Yellow, on the click of a button, then we are in control.

Two things we need to do. We want to create buttons so that we can click, and go to different content. The content, or what the viewer will see is simple, Red, blue, green or yellow.  They click, go there, see it, and the playback head stops until they click another button.

Notice we added three layers, Actions, Labels, and Buttons.  Almost every developer in Flash will put all of there Frame Actions in one Layer called actions.  We create a labels layer to give our frames names so that we can code the buttons to go to that frame, then, in the Actions Layer, we put in our Stop Actions.

Adding Frame Labels Using the Property Inspector .

When we click a button, we want to send the playback head (the pink square in the timeline) to red, blue, green or yellow.  So we give each frame a name so that we can use the name in code, Actionscript.

1.  Click in Frame 1 of the timeline in the Labels Layer.

2.  Click in the Property Inspector where is says Frame, and type in "red."

3  Very important!!!!  After you type in "red." Hit enter or return on your keyboard, then you will see the Frame Label name show up in the timeline.

4.  Adding FrameLabel for "blue.  Where ever there is change in flash, there is a keyFrame.  We are going to change the Frame Label.  So we want to go to frame 10, insert a keyframe, then, in the Property Inspector, we click in the Frame box, type in Blue, then hit enter on the keyboard to see the name show up on the timeline.

Just play the quicktime movie above and you will see how it works.

5.  You want to add labels for red, blue, green and yellow.

Now, Let's Put Bruce Springsting out of business with ActionScript and Stop Actions.

We want to put in stop actions in each area that we send the viewer to.  I'm going to drop the action into the last frame of each area, red, blue, green and yellow.

Again, where ever there is change in Flash, there is a keyframe.

In frame 1 of the actions layer, there is already a keyframe, so I open the actions panel (window, actions in Flash 8,,,,,,window, development panels,,,,,actions, in Flash 2004).

You will see many little booklets in the Actions Panel, click the one that says "Global Functions" and you will see more little booklets. We want the booklet that says, "Timeline Control," because we want to control the timeline.  In the Timeline control booklet, we want to find "stop."  Double click that, and you will see your code show up in the actions panel.

Also, you will see a tiny, tiny little "a" show up in the actions layer.  This indicates that you have actionscript in that frame.  Whenever you see a little "a" like this in a layer, if you click on it and open the actions panel, then it will show you all of the code associated with the little a.

The thing is, you must put a stop action in each area. So, at the end of each Area, I insert a keyframe, then I double click "stop" in the actions panel and that adds stop actions in four places in the timeline.

This is how your Document Should Look.

We have all of our layers, frame labels, stop actions, but we need one more thing.  We have no Buttons.  In the next segment, we create buttons and make this thing interactive.