Join David Gassner for an in-depth discussion in this video Adding Play and Stop actions, part of Flash Professional CS5: Code Snippets and Templates in Depth.
- View Offline
Many of the code snippets provided with Flash Professional CS5 allow you to control Timeline and other navigation tools. In this demonstration, I am going to show you a Flash movie that has a lot of animations built into the movie clip symbols themselves rather than stored on the main Timeline and talk about how you can use code snippets to very quickly control when those symbols work and when they stop working. I will use the following file. If you are following along go to the Ch02_Timeline folder under Exercise Files and open the file OlivePressWithPlay.fla.
Here is what this Flash movie does initially. On the main Timeline there are some animations controlling the movements of the arms. Then there are three separate instances of a single movie clip symbol named Gear. The Gear symbol had its own animation built-in and there is one other movie clip symbol over here named Drop, which is creating its own animation. Now to stop this animation from happening as the movie fires up, you are going to create a single Stop command to control the main Timeline, but you are also going to have to explicitly control each of the instances. That is, the three gears and the drop.
So let's start with the simple code snippet. I will go to the menu and choose Window > Code Snippets and I will go to Timeline Navigation and I will double-click Stop at this Frame. That adds a simple Stop command which causes the main Timeline to stop its operations. I will test the movie and show that that's affected the three arms, but not the gears or the drop. So I will close Flash Player and return to the Actions panel and I will copy the Stop command and I am going to paste it four times. Now the first stop command will control the main Timeline, but all of the other stop commands will be used to control the movie clip instances.
There are three instances of the Gear symbol with names of gear1, gear2 and gear3. So I will simply add in those movie clip symbols, separated by a period form the stop command. If you are not sure of the movie clip symbol names, go back to the Stage and click on each symbol and then check the properties. Going back to the Actions layer to frame number one and then to the Actions panel, I will use the final stop command to control the drop instance. And once again, if I am not sure of the instance name I just click on it here and take a look at the Properties panel.
So now let's see what happens as the movie starts in Flash Player. It's completely static. Next I am going to add user interface elements. I am going to add a Start and a Stop button so that the user can control when the machine is working and when it's not. This will make the movie highly interactive. I will close the test movie and the Code Snippets panel. This Flash movie already has two button symbols with names of StartButton and StopButton. These were simple buttons. They don't have any animations; just a couple of different visual states.
First, I am going to insert a new layer and name it buttons and then I will right-click on the new layer and choose Lock Others. That will ensure that as I add symbol instances from the Library onto the Stage, that they will go into the right layer. Then I will add one copy of the StartButton and one copy of the StopButton to the stage. I will hold down the Shift key and select them both. Then I will go to the Align panel and just make sure that they are left aligned. Now when the user clicks each of these buttons I'd like to control the Timeline.
We will begin with the Start button. The Start button currently does not have an instance name. This time I am going to allow Flash to assign the required instance name for me. So I will click on the button and go to the Code Snippets panel. I will go to Timeline Navigation and this time I will choose this code snippet, Click to Go to Frame and Play. I will double-click and see this message, that the selected symbol requires an instance name, and when I click OK Flash assigns an arbitrary instance name, in this case button_3, and then creates all of the code to create the effect I want.
Now Flash has added a little bit of code. gotoAndPlay(5). If you prefer you can replace this with the simple play command and then you won't see any flicker in the Timeline. But I am going to leave that as is and I am also going to go up to the code that I had already created to control the Gears and the Drop. I will select and copy those four lines of code to the Clipboard and then I will return to the new function and paste them in. I will select that code and press Tab once to indent and then I will go through and replace the stop commands with play commands. I will go ahead and test the movie at this point and you will see that as the movie starts up, no animation is happening and then I will click the Start button and the entire animation kicks off.
Now notice when I hit frame number one again, the machine stops. So let's go back to the design surface and now I am going to add an event handler for the stop button. I will select the stop button, once again go to the Code Snippets panel, and this time I will choose Click to Go to Next Frame and Stop. Once again, I will allow Flash to assign the required instance name, then I will go up to the top of the code and select all of the code that I initially was executing in frame number one and I will cut it to the Clipboard. Then I will go down to the new function that was just created, I will delete the code from there, and paste in the code that was previously outside of any functions. And here is the result.
Now when I run my Flash movie the machine is running, but I can stop it and I can start it. You have now created a complete interactive application that gives the user control over when the movie is running and when it's not and you have done it all with minimal coding on your part.
- Touring the Code Snippets panel
- Adding simple and complex code snippets
- Handling mouse and keyboard events
- Starting and stopping video and sounds
- Loading external SWF files, images, and text
- Customizing code snippets
- Understanding template types and categories
- Replacing template content
- Creating a slide show