Have you ever made a project in Flash that was so long that it took you 5 minutes just to figure out which keyframe you wanted to modify? Or how about a project where you have so many layers that it becomes impossible to find the one you’re looking for?

Using scenes helps solve these problems. Not only does it make it so that your timeline isn’t a jumbled mess, but it also helps you to organize your animation into logical sections (ex. Introduction, body, conclusion.)

1. Open mousemaze.fla

2. Select Window > Other Panels > Scene to open your Scene panel. You should get a window that looks like this:

In this window, you can browse through all of the scenes in your movie, add scenes, rename them, etc.

3. Double-click on Scene 1 to rename it. Call this scene Maze.

4. Click on the Add Scene button at the bottom of the Scene panel:  to add a new scene. Rename this scene as Introduction.

5. Drag the Introduction scene so that it is above the Maze scene in your panel.

When you insert scenes into your animation, they will play in the order that you have chosen in the Scene panel (top first, bottom last). They will play continuously (they won’t stop playing when a new scene starts) unless some ActionScript code tells them to.

By selecting a scenes in your Scenes panel, you can browse through it on the stage. Notice that when you select your newly created Introduction scene, It is completely blank timeline. If we go back to the Maze scene, all of your previous animation is still there!

Introduction Timeline

Maze Timeline

6. In your Scene panel, select your Introduction scene.

7. Rename Layer 1 to Background. Insert frames (F5) up to frame 50.

8. Select the rectangle tool. Set the fill colour to green, and the stroke to none.

9. Draw a rectangle across the whole stage.

10. Create a new layer. Call this layer amazed.

11. Using the text tool, add text to your animation that says “Prepare to be amazed…” onto your amazed layer. Format your text any way you choose, but do take the time to make things look the way you would like them to (ie. choose your own font, size, colour, etc.)

12. On your amazed layer, add keyframes at frames 10, 20 and 30.

13. Add motion tweens between frames 1 and 10 on your amazed layer. Set the transparency (alpha) for frame 1 to 0%, and frame 10 to 100%.

14. Do the same thing between frames 20 and 30, but set frame 20’s transparency to 100% and frame 30’s to 0%.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes1.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Notice that if we press play once the mouse is done running through the maze, the animation doesn’t go back to when the mouse is entering the maze: it goes to the beginning of the Introduction scene. So when the movie loops to the beginning, it doesn’t go to the beginning of the current scene; it goes to the beginning of the first scene.

As you can see, our movie plays the scenes in the order they appear on the Scenes panel. If we reversed the order, they would play like this:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

15. Insert a new layer in your Introduction scene. Name this layer mouse.

16. Insert a keyframe on this layer at frames 30 and 40.

17. Select frame 30 on your mouse layer. Using the text tool, add text that says “By the magical maze-solving Mousedini!” You can choose a different name for your mouse if you’d like. Again, format the text any way you like.

18. Add a motion tween between frames 30 and 40 on your mouse layer. Set the text’s transparency at frame 30 to 0% , and frame 40 to 100%.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes3.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Now we have to start adding some ActionScript, so that we can choose when our introduction continues playing.

19. Insert two new layers on your main timeline. Call the first layer actions, and the second layer buttons.

20. Add keyframes to frame 40 on both the actions and buttons layers.

21. Select frame 40 on your buttons layer. From your library, drag a playbutton object onto your stage.

22. Select the playbutton instance on your stage. In the property inspector, set the instance name to start_btn.

Note*** Recall that you can have as many instances of any symbol as you want, and still have them work properly with ActionScript. You just have to make sure and give all of them different instance names!

23. Select frame 40 on your actions layer.

24. Open the Actions panel.

25. Tell Flash to stop playing at this point by typing

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

26. Type in code that will tell Flash to do something when the play button is pressed:

So now we have to add in some code to make our play button direct the user to the next scene. We can do this by using our gotoAndStop or gotoAndPlay command.

When we’ve used gotoAndStop before, all we’ve put in the brackets is the number of the frame that we want to go to. We can also specify the scene.

27. Inside the curly brackets in our function, type in: 

Note*** When we tell gotoAndStop what scene to go to, we have to put the name in quotations. If you try to go to a specific scene, but forget to put it in quotations, your ActionScript won’t work!

What this tells Flash is: “Jump to the scene named Maze, then go to frame 1 and stop playing.” While we could have done the same thing by using the play() command, this prevents future problems from arising.

For example, what if we decided to insert a scene between the Introduction and the Maze? The animation would start playing that scene, even though we wanted to jump to the Maze scene.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes5.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So now we can make our animation jump from the Introduction to the Maze scene. Lets do the opposite as well, so that we can watch our animation all over again from the beginning.

28. In the Scene panel, create a new scene. Call this scene Conclusion.

29. In your Conclusion scene, rename Layer 1 to buttons.

30. Insert a new Button symbol. Name it restartbutton.

31. Create a button that will restart your animation, looking something like this:

32. Go back to your main timeline of your Conclusion scene. On your buttons layer, drag your new button onto the middle of your stage.

33. In the property inspector, give your new button an instance name of again_btn.

34. Create a new layer named actions.

35. Click on frame 1 of your actions layer and open the Actions panel.

36. Tell your animation to stop by adding the stop(); command.

37. Add the following code to the end of your actions:

So our full code for this scene is:

Just like when we used gotoAndStop to jump between scenes, we can do the same thing with gotoAndPlay. Here, we are telling our animation to go to our Introduction scene and play from frame 1.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asscenes6.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Now we know how to start and stop animation, add buttons, navigate around our animation, and how to use scenes to our advantage. This is only one small part of what ActionScript can do.

38. Save this Flash animation as mousemaze.fla and complete assignment6.