Adobe Flash ActionScript 3.0 for Designers Tutorials
Controlling Multiple Timelines / Project 3: Controlling Multiple Timelines
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Flash ActionScript 3.0 for Designers / Controlling Multiple Timelines / Project 3: Controlling Multiple Timelines)
We're now ready for our next project, controlling multiple timelines using a button interface. We're going to combine the skills that you've learned in targeting multiple movie clips also with your skills in programming buttons so that we can use the buttons to target those movie clips to see the end result of this project. Open up the Target Clock Hands File in the Work Files folder and do a Control Test Movie. Notice that to start with all the movie clips are stopped, that we can start them up by clicking on the second, minute and hour hands and then we can stop them by clicking on the corresponding stop button. So you can see that each of the buttons is controlling a movie clip in some way. So go ahead and open up your Target Clock Hands Start File. If you've already added some scripts to this file from a previous movie, go ahead and clear those out by choosing File, Revert and that'll bring this back to its initial state. Do a Control Test Movie and the initial state should be all the movie clips are in fact moving. They're not stopped. So the first thing you'll want to do is navigate to the various timelines and stop them. Stop the various timelines. We're going to do that by double clicking on the clock face. Go ahead and hide all of the other layers. Go to the minute layer. Make sure that's not hidden and double click on the minute timeline and go ahead and add a stop action there like so; stop action. Test your movie. Make sure that it does in fact stop. Then go to the hour, unhide that, go to the hour timeline by opening up the hour layer, double clicking on the movie clip and then in its timeline go ahead and add a stop action there to stop that one. Now, remember, the seconds movie clip is inside of the minute movie clip so you'll have to double click on the minute movie clip and then hide the Layer 1. Go to the seconds layer and double click on that movie clip and go ahead and add a stop action. After you've added all the stop actions, go ahead and do a Control Test Movie to make sure you're not getting any errors and that all of the movie clips are in fact stopped. So far so good. Next you'll want to go back and name all of your movie clip instances. Don't forget; always the first thing you want to do. So let's go to the minute hand there, open up the Properties Inspector, make sure that the instance is labeled Minute. Likewise, go to the seconds movie clip by double clicking on minute. Make sure that's labeled seconds and the last one is the hour. Unhide that, click on it and here in the Properties Inspector it's labeled hours. So it's very, very important that you first stop all the movie clips and then label the movie clip instance minute, hour, seconds. We're now ready to start adding our scripts. Let's go back to Scene 1 in here in the main timeline. Go to the Actions Layer. Open up your Actions Panel and underneath the stop action that you should have there and in the, let's go ahead and separate out the Properties Panel, in the first space there let's go ahead and add our function. First I'm going to add a little comment function to handle the mouse clicks, function handle click, open parentheses, P underscore Event colon mouse event close parentheses colon void. That should look familiar. There's our function. Open up the function with an opening curly brace after the void. Then we're going to write a conditional as we did in our first script. And if the target is the second stop button, let's actually go ahead and change that to play button. You'll see why in a moment. I want to test this line of script and because the movie clip is already stopped, this will make it play. Let's go ahead and we've target the correct instance right here. That's the target that we've been practicing. Let's type play instead of stop. Let's also close out this function with a closing curly brace. Notice the closing curly brace is lined up with the open curly brace. So there is my first conditional to check if the second play button has been clicked and that will remind us to make sure that all the buttons are properly labeled so let's do that now. Let's click on the seconds play button which is this one here and open up the Properties Inspector and notice that says Second Play underscore, actually Second underscore Play underscore Btn. Let's move this where I can see everything OK like so. Click on the minute hand. Go ahead and label that one. I'm on the main timeline here, Minute underscore Play underscore Button and the hour is Hour underscore Play underscore Button. Likewise, the stop buttons are named very similarly; Stop underscore Second underscore Button, Stop underscore Minute underscore Btn and Stop underscore Hour underscore Btn. The reason that all those names are so similar is I'm going to cut and paste one working script to get all the other scripts working. So now that I've added my function and I've gone in and I've labeled all of my button instances we're now ready to add the event listeners so we can actually check that first line of script. First off let's close out our Properties Inspector, bring back our timeline. We're going to add this script in the main timeline right there after our closing curly brace. Let's add a few lines of code and then let's add our event listener second play button.add event listener, mouse event.click. We're going to do this with a mouse click and then we're going to run the handle click function right there. That's the function that we created up here. Double check that everything is correct, that we're targeting the same button, the seconds play button, second play button here. Notice that the target path is correct. This clock instance.minute.seconds and triple check that this name right here is the same as the event listener that I've set up here. Sometimes I'll do Copy and Paste those or actually Copy and Paste them from the Properties Inspector and we'll now test this. What should happen is that all the timelines should be stopped and then when I click on the Seconds Button, the second movie clip should start playing. Test Movie, click on the Second Button and sure enough the second hand is moving. So that means that the event listener is correct. The function is correct. Now all I need to do is Copy and Paste duplicates of those two scripts to get the rest of the buttons working. I'll let you do that on your own. Go ahead and just copy each of the event listeners changing the button that you're targeting, copy the if then statement. Don't forget to leave that closing curly brace there. All the conditionals go in between these two sets of curly braces. If you need help, remember you also have the Target Clock Hands End Button and go ahead and look at the script that I have there as guidance. But go ahead and do this on your own but do it in the order that I've shown you. Get one of the buttons working first. The play button is the obvious one to get working first. Any of the play buttons; get that working and then Copy and Paste for the other five buttons.
Tutorial Information
| Course: | Adobe Flash ActionScript 3.0 for Designers |
| Author: | James Gonzalez |
| SKU: | 34060 |
| ISBN: | 1-935320-82-3 |
| Release Date: | 2009-11-09 |
| Duration: | 9.5 hrs / 101 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
