CSM ActionScript Class Lecture 24 February 10: Timeline Control from Cody Tolmasoff on Vimeo.

Screencast of lecture from College of San Mateo ActionScript class from 24 February 2010

24 Feb 10 – Timeline Control

Tonight’s lecture is based upon Chapter 5 in the book “Learning ActionScript 3.0″.

Assignment:

  1. Demonstrate changing the frame rate of a flash animation

Lecture:

  • Playhead Movement
  • Frame Labels
  • Frame Rate

Although we are examining more of what we can do with ActionScript, we cannot ignore Flash’s roots and how to control and nest animations. There will likely be many occasions you need to control the play head in an animation. Tonights lecture will be similar to some of the techniques you were trying in your first semester Flash class, but also using some techniques we have learned so far.

Playhead Movement:
Exercise:
In a new file create an animation. This doesn’t need to be too fancy, however it needs to have an obvious start and an obvious end.

Now add a “buttons” layer to your file with the animation. Create a button in this and make a total of 4 copies of it. Your buttons instance names should be:

  • pause_btn
  • play_btn
  • stop_btn
  • restart_btn

Lets now add an Actions Layer. Select your first keyframe and open your actions panel (make sure it says frame – actions at the top).

Lets go ahead and set up our event listeners first

pause_btn.addEventListener(MouseEvent.CLICK, doPause, false, 0, true);
play_btn.addEventListener(MouseEvent.CLICK, doPlay, false, 0, true);
stop_btn.addEventListener(MouseEvent.CLICK, doStop, false, 0, true);
restart_btn.addEventListener(MouseEvent.CLICK, doRestart, false, 0, true);

Now that we have event listeners that have our buttons listening for clicks and calling functions that do not exist, lets write our function bodies:

function doPause(evt:MouseEvent):void{
trace("doing Pause");
}
function doPlay(evt:MouseEvent):void{
trace("doing Play");
}
function doStop(evt:MouseEvent):void{
trace("doing Stop");
}
function doRestart(evt:MouseEvent):void{
trace("doing Restart");
}

Test your movie, you should see your trace statement when you press the various buttons. If not, you’ve missed something, go back and double check your code.

Now lets add some ActionScript to make our buttons work:

function doPause(evt:MouseEvent):void{
trace("doing Pause");
stop(); //stops the playerhead where it is
}
function doPlay(evt:MouseEvent):void{
trace("doing Play");
play();  //starts the playerhead from where its sitting
}
function doStop(evt:MouseEvent):void{
trace("doing Stop");
gotoAndStop(1);  //puts the playerhead back to the beginning of the timeline and stops
}
function doRestart(evt:MouseEvent):void{
trace("doing Restart");
gotoAndPlay(1);  //puts the playerhead back to the beginning of the file and starts playing from there
}

Frame Labels:
Exercise:
Lets start a new file. With the text tool write in large letters “Section 1″. Select this text and convert it to a movie clip symbol.

Select the instance of your new movie clip on the stage and give it the instance name sections.

Double click on the instance of sections on the stage to bring your symbol into symbol edit mode. Note: you should see you are in symbol edit mode by looking in the bar between your stage and timeline that says Scene 1, then next to it the Symbol name of your movie clip you are in symbol edit mode of.

You should have 1 layer, with 1 keyframe. About 10 frames out, lets insert another keyframe, select frame 10 and hit the F6 key (or from the menu Insert > Keyframe). Change your text to read “Section 2″.Then lets do that again at frame 20, and change your text to say “Section 3″. Now lets give ourselves a little space to work, select Frame 30 and hit the F5 key (or from the menu Insert > Frame).

Now lets make some Labels. Add a Layer and label your layer ‘L’ for labels. Select the keyframe in your ‘L’ layer and find your properties panel. In the same place you were adding instance names it should now say Label, and you can add a frame label here. Type the name “section1″ here, and hit the enter/return key. You should see your frame label in your timeline. Now in your same L layer, lets add a keyframe to frame 10 and put the frame label “section2″ here, and add a keyframe to frame 20 of your L layer and give it the frame label “section 3″.

Lets navigate back out to the main timeline by clicking on the button Scene 1 in the bar between the stage and the timeline. Add a Layer and call it buttons. Select the first keyframe of your buttons layer and create a simple button on the stage. We are going to need 3 buttons with instance names of section1_btn, section2_btn, section3_btn.

Now let add a layer A for our actions. Select the first keyframe in the A layer and open your Actions Panel (if everything has gone well here, you should see actions – frame a the top of the panel).

Like before, we will set up our event listeners and some basic functions:

sections.stop();  //to initially stop the playerhead of the sections movie clip.
section1_btn.addEventListener(MouseEvent.CLICK, doSection1, false, 0, true);
section2_btn.addEventListener(MouseEvent.CLICK, doSection2, false, 0, true);
section3_btn.addEventListener(MouseEvent.CLICK, doSection3, false, 0, true);
function doSection1():void{
trace("doing section 1");
}
function doSection2():void{
trace("doing section 2");
}
function doSection3():void{
trace("doing section 3");
}

If you test your movie, you should see your buttons tracing things. Now lets add functionality to out functions.

function doSection1(evt:MouseEvent):void{
trace("doing section 1");
sections.gotoAndStop("section1");  //frame labels are defined in quotes to let flash know to look for the name "section1" on the timeline.
}
function doSection2(evt:MouseEvent):void{
trace("doing section 2");
sections.gotoAndStop("section2");
}
function doSection3(evt:MouseEvent):void{
trace("doing section 3");
sections.gotoAndStop("section3");
}

Frame Rate
Another ability in Flash is to change the frame rate at run time. Do note however that this would be the frame rate of your base file that sets the overall project frame rate, and not the frame rate of an independent movie clip or loaded swf file.

For this project you will need a new file. In this new file create a longer animation.

We will need two buttons and a dynamic text field in this file. Add a layer and create two buttons (one for speeding up the frame rate, and one for slowing it down). Once you have your buttons made, give them instance names of speedUp and slowDown. Also on this layer draw a dynamic text field on the stage and give it the instance name information.

Note: To draw a dynamic text field, select your text tool and from the properties panel choose the drop down that says static text and select dynamic text. Then draw your text field. There is a place in the properties panel to give your selected text field an instance name.

Add a layer and call it A for actions. Select the first keyframe there and open the actions panel (it should say frame – actions at the top).

information.text = String(stage.frameRate);
speedUp.addEventListener(MouseEvent.CLICK, doSpeedUp, false, 0, true);
slowDown.addEventListener(MouseEvent.CLICK, doSlowDown, false, 0, true);
function doSpeedUp (evt:MouseEvent):void{
stage.frameRate += 5;
information.text = String(stage.frameRate);
}
function doSlowDown(evt:MouseEvent):void{
if(stage.frameRate > 5){
stage.frameRate -= 5;
}
information.text = String(stage.frameRate);
}