Basic steps for making a user interface with buttons that control multiple scenes

click here for a text only version of these steps

This is a simple example…



1. Start by beginning a new Flash Actionscript 2.0 project.

2. Design a layout for your user interface. Pick a cool background. Use text to tell the user they are at the beginning.

3.Create a button. In my example, I only created one button and then I duplicated the button (Control-click on the button in the library) and then I made changes to each. I did this to maintain uniformity. You may also want to use the Common Library buttons.

4. Lay out all your buttons the way you want your user interface to look. Use a different layer for each button.

5. Add another layer and click in the first frame. Name it "script." Open the Actions window by clicking on Window > Actions.

6. Type:
 stop();

This will keep all your scenes from playing on after the other.

7. The next step is to code your buttons. You have to be very orderly about this to keep it all together. Start with your first button. Control-click on it to open the Actions window. Type:

on (release){
	gotoAndPlay("Scene 2", 1);
}


This is the code that tells the button that when it is released (by clicking) that it will make Flash go to and play the first frame of scene 2. You will need to code each of the buttons in your user interface. The button for Scene 3 should go to Scene 3 and so on. Keep in mind that it's totally up to you what you call each of these scenes. Just make sure your button is coded to match whatever you named the scene (and it is case sensitive).

8. Open up the scene panel. Window > Other Panels > Scene.

9. Inside the scene panel you will see that you only have one scene so far: scene 1. At the bottom of the scene panel, you will see a little icon with arrows. That is the duplicate scene panel. Clicking on this will make a perfect copy of your scene. In my example, I needed three more scenes. I duplicated my scene three times and renamed each as I duplicated them. This is important because you will be referring to these scenes later when you code your buttons.

10. You are almost done. If you test it now, it should basically work. There is one little problem in that Flash gets a little confused if you are say, in Scene 2 and you are clicking on the button that tells it to go to scene 2. You don't need this because obviously you wouldn't ever click on the button of the scene that you are already in. You should deactivate those buttons in each scene.

Assignment

Make your own user interface with at least three additional scenes. Use pictures and text to make each scene look different.

Video Tutorial Part 1

Video Tutorial Part 2