Old-Style Flash: Working with Scenes

Open a new Flash document (FLA file). Look right above the stage: you'll see that you're in "Scene 1." By default, that's what the main timeline is called. As you might think, if you can have a "Scene 1", you can probably have a "Scene 2", and maybe a "Scene 3".

If that's what you suppose, you suppose right. "Scenes" are the the first scheme Flash designers came up with to move through a complex project. Basically, a "Scene" is made to be an almost identical timeline environment as the maintimeline; unlike a movie clip, one scene cannot play while another is playing. Some find this comforting.

Let's do a very simple excercise. In it, we'll make 3 buttons, create an additional 2 scenes, and program the buttons to take us from one scene to the next. (See finished SWF file below.)

1) Open a new FLA and name it "scenes.fla" (I made mine 450x200). Make a simple button, like we did last week, or use that one. Here's a simple "dot" button I'm making by having the red circle turn blue on rollover (see simple button tutorial). Like this:

2) Duplicate the button twice IN THE LIBRARY; I've had unpredictable results coding button instances on stage. That's a total of 3 buttons. Name the buttons "btn_sc_1", "btn_sc_2" and btn_sc_3".

3) In "Scene 1", the main timeline, drag "btn_sc_1" onto the stage (name the layer "button") ; now make a new layer (named "text") and using the text tool, write in big red letters "SCENE ONE".

4) Go to the Main Menu > Insert > Scene ; you'll note that where it once said "Scene 1" it now says "Scene 2".

4.1) Add an "ACTIONS" layer and put a "stop" on the first frame. Again, that's done by selecting the blank keyframe in the first frame, then going -- Window > Development Panels > Actions -- in the Actions Panel, you should see the heading "Frame - Actions" meaning you've properly selected a frame to place an action in. (My PC froze, so I have no access to MX 2004, so this next step will have to be described.) In the Actions Panel, select the first item on the list, then > Timeline Control > Stop. Or you can type " stop(); " (not incl. the quotation marks) in the Action Panel window. You'll need to add one of these to each scene, or the movie will skip freely from scene to scene.

Here's my total "Scene 1": very simple, really. The red dot, is, of course, a button, and Action Script put on it will move to the other scenes. NOTE: due to my PC crash, this image is from Flash MX, the last version, but it should be fairly accurate. Scenes 2 & 3 should look very similar, except for the color and content of the text.

5) Now in "Scene 2", drag "btn_sc_2" onto the stage (name layers as in Scene 1); now make a new layer and write in big blue letters "SCENE TWO".

6) Go to the Main Menu > Insert > Scene ; you'll note that where it once said "Scene 2" it now says "Scene 3".

6.1) Add Actions layer with "stop" on frame one, as above in 4.1.

7) In "Scene 3", drag "btn_sc_3" onto the stage; now make a new layer and write in big yellow or green letters "SCENE THREE".

7.1) Add Actions layer with "stop" on frame one, as above in 4.1 & 6.1.

8) As long as we're in Scene 3, let's code the button there to return us to Scene 1. Click on the new button to select it.

9) Now go to the Main Menu > Window > Development Panels > Actions (or F9). A panel named "Actions" should appear, with the word "Button" in it (meaning we've selected a button, so that's what it sees).

10) Type this code in the window below, exactly:

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

The code is written on several lines, as a rule, to make it easy to see the parts; any of them out of place or missing, and the code won't work. "on" tells the button to prepare to define a mouse action, which will be stored in parentheses "( )"; the action the button will work on is placed in the "( )", in this case it is "release" which means that moment when the finger pulls off the mouse button; the stuff in the brackets "{ }" is what the "release" action will set in motion, in this case "gotoAndPlay", which is pretty self-explanitory and it has a set of "( )" which contain where the play head is to "go to" and "play" at, in this case, it is to "go" to the object called "Scene 1" and there it is to find the first frame (1) and start playing.

11) Go to Scene 2: you can do this by finding the little "clipboard" icon on the upper right, click on it, and it should roll down showing you the three scenes.

12) On the Scene 2 button put this code:

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

13) Go to Scene 1: on the Scene 1 button, put this code:

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

OK, what have you done? You've made the button in Scene 1 take you to Scene 2, the button in Scene 2 take you to Scene 3, and the button in Scene 3 take you back to Scene 1. Test your movie to see if your buttons are moving you from scene to scene properly.

Simple. Well, in theory. We'll work through it together.

BELOW IS MY FINISHED SWF MADE AS ABOVE: