Get Things Moving

Now we need to code our init frame, this will be where we initialise all our variables, and place the movieclips on the screen. In the timeline, right-click on frame 5 and select Add Blank Keyframe. Do this on both the Action layer and the Screen layer. Change the name in the frame label to init. Any time you need to add some new ActionScript code to a frame, you have to create a keyframe. If you simply add a frame (ie. NOT a keyframe) then the ActionScript code from the previous keyframe will be run when the playhead reaches that frame. If you click on frames 2, 3 or 4 you will see that it contains the code from frame 1 (ie. the previous keyframe). A blank keyframe simply means all the author time content you have added will be removed. This will have the effect of clearing the screen (ie. the splash screen on frame 1).

We will add our code for the trampoline first. Add the following code in our init frame (frame 5) on the Actions layer:

var mcTrampoline:MovieClip;

mcTrampoline = _root.attachMovie("trampoline_mc", "mcTrampoline", 1);
mcTrampoline._x = Stage.width / 2;
mcTrampoline._y = Stage.height - 40;

This code is adding a movieclip (called trampoline_mc in the library) at depth 1, and assigning a reference to the instance as mcTrampoline. Now we can change the properties of the trampoline using the reference. eg.

mcTrampoline._alpha = 50; // change the alpha to 50%

Next we need to write our main loop code, so click on frame 6 and insert a keyframe and change the frame label to main (do not make this a blank keyframe - we don't want any author-time content we might want to add into the init frame to be removed!), then add the following code. This code will be run at 30fps (or whatever fps speed you have set you movie to):

// main program loop
readKeys();

function readKeys() {
	if ( Key.isDown(Key.LEFT) && mcTrampoline._x > 60 ) {
		mcTrampoline._x -= 10;
	}
	if ( Key.isDown(Key.RIGHT) 
			&& mcTrampoline._x < Stage.width-60 ) {
		mcTrampoline._x += 10;
	}
}

This code will simply read the keyboard, and move the trampoline left or right, stopping before it reaches the edge of the screen.

Finally, on frame 7, insert another keyframe and type the following code. Label this frame as endmain:

gotoAndPlay("main");

Lastly, add a frame at frame 7 on the screen layer, so that each layer has the same number of frames.

So, we have now added three keyframes: init (frame 5), main (frame 6), endmain (frame 7). Your timeline should look like this. You may be wondering to yourself, why do we need three frames to do this, when we could possibly do the same in one frame? I wondered the same thing myself. The answer is, Flash will only update the stage at the end of every frame. When I started out coding Flash, I originally tried putting the gotoAndPlay("main") at the end of frame 6; it seemed logical to me. This meant that the end of frame 6 was never reached, therefore the stage isn't updated.