Navigating the Timeline

From EGMSWiki

Jump to: navigation, search

Contents

Topic Summary: In this topic, you'll learn how to use stop, gotoAndPlay, and event listeners to control the way the user navigates through the game timeline. You'll also get some tips on how to organize your timeline.

Topic Assignments

stop();

Flash movies automatically loop (that is, play over and over). To make a movie clip play only once, use a stop(); command on the last frame of the clip: create a new layer in your timeline and call it Actions. In that layer, create a keyframe on the last frame of the clip. Open up the actions panel (Window --> Actions or F9) and drop in the code stop();.

The stop command is useful for preventing movie clips from looping. It is also used any time you're waiting for some event to happen before moving on to another location in the timeline. Like the click of a button, for instance:

Here's the start button code from that file: 

stop();

startButton.onRelease = function () {
 gotoAndPlay(2);
}

The code above says, "Wait here... unless someone presses startButton, in which case, go to frame two and begin playing."

In general, this type of code is called an "event listener." This type of code waits, listening for a specific event to occur before moving on. You might also hear it referred to as an event triggering another action.

Besides clicking a button with your mouse, here are some other examples of events that code might listen for:

  • press a keyboard key
  • collision detection
  • answer a question correctly
  • if statement comes true
  • score reaches a certain number
  • time runs out

stop + event listener + gotoAndPlay

A start button is one example of an event listener paired with gotoAndPlay. There are many other possibilities.

For example, your game might have a table of contents with ten buttons, all waiting to send you to a different scene in the game (that is, a different frame on the timeline).

If statement

Here's an example of an if statement paired with gotoAndPlay -- IF the score reaches five, go to frame 2:

And here's the code: 

stop();
score = 0;

onEnterFrame = function () {
bearButton.onPress = function(){
	score = score + 1;
	box.text = score;
	}

	if (score == 5){
	gotoAndPlay(2);	
	}
}

Collision detection

Here's an example of collision detection paired with gotoAndPlay. When the fly swatter hits the fly, the game jumps to a win screen.

And here's the code: 

stop();

swatter.onPress = function(){
startDrag(this);
}

swatter.onRelease = function(){
this.stopDrag();
}

onEnterFrame = function(){
  if (fly.hitTest(swatter)) {
	gotoAndPlay(2);
	}
}

Digging into the timeline

Frame labels

GotoAndPlay is always followed by a set of parentheses, which contain a reference to a frame. That frame reference can be expressed in two ways:

  • A frame number: gotoAndPlay(2);
  • A frame label: gotoAndPlay("welcome screen");

Notice that when you use frame labels, you should surround the label in double quotes. Otherwise, Flash wouldn't really know what to make of the space between those words. The double quotes tell Flash to take the series of characters that spell out "welcome screen" as a single chunk of information.

Why would you use labels to refer to frames, when frames already come with numbers conveniently assigned to them? Frame labels' advantage is their flexibility: once you've labelled your frames and gotoAndPlay is pointing to them, you can add frames, delete frames -- and gotoAndPlay will still point to the right location.

Frame rate

Unless you've added a stop, a gotoAndPlay or something similar, the timeline in Flash runs from left to right. Flash will play all the content in all the layers at a consistent speed (the file's framerate).

If you want to create a five-second tween, and your framerate is 12 frames per second (fps), how many frames should the tween take place over? That's right - 60: twelve frames per second times five seconds.

You can change the document's frame rate by going to Modify --> Document. But in general, you should leave the frame rate alone. If you want to make something happen more slowly or more quickly, the best approach is to add or delete frames from the timeline. If you delete six frames from a 12 fps clip, you'll cut it by half a second (the same animation will happen more quickly).

Timeline organization

It's a good idea to keep yourself organized by putting each item on a different layer in the timeline. However, as your game gets more complicated, you may find yourself with more layers than you can conveniently work with.

In that case, you can organize your timeline using folders. Click the folder icon below the timeline, at the left side of the screen. Name your new folder something descriptive (like "snowman scene"). Select the names of all the layers that should go into it, then drag them into the folder. You can collapse or expand the folder so that you only need to see the layers you're currently working on.

You can also use folders to organize the symbols in your library.

Update the Wiki

  • Upload the assets (.SWF and .FLA) you created to your Team page if you are working on a Team game, or to your "My Projects" page if you are working alone.
    • The .SWF file is the Flash movie you created, upload it to show your work
    • The .FLA file is the code of the movie, upload it and let others learn from your code


Update the Blog

Suggested Post Ideas

  • Write a Blog post about this topic, share your learning experience!

Comment on the blog of one of your classmates!

Related Links and Tutorials


Search the Web for more information

Here are some search results on the Flash timeline:


Retrieved from "http://www.myglife.org/usa/wv/egmswiki/index.php/Navigating_the_Timeline"
Personal tools