Video: Adding a complex code snippet

Simple snippets can be as easy as a stop command, or as complex as creating ActionScript objects using complex features of the language such as constructor methods, and calling methods and setting properties of those objects. I'll demonstrate this using a code snippet that creates a countdown timer. That is, an object that waits for a particular amount of time to go by and then calls a particular function in your code. To demonstrate this, I'll use an existing movie called CountDownTimer.fla.

In Flash Professional CS5: Code Snippets and Templates in Depth, David Gassner shows designers how to use Flash Professional CS5's Code Snippets panel and file templates to get started with ActionScript 3 and implement best practices. This course describes how to insert snippets into existing Flash presentations, includes a detailed explanation of the code behind the snippets, and shows how to use the many templates included with Flash Pro CS5 to quickly create customized presentations. Exercise files are included with the course.

Adding a complex code snippet

Simple snippets can be as easy as a stop command, or as complex as creatingActionScript objects using complex features of the language such as constructormethods, and calling methods and setting properties of those objects.I'll demonstrate this using a code snippet that creates a countdown timer.That is, an object that waits for a particular amount of time to go by and thencalls a particular function in your code.To demonstrate this, I'll use an existing movie called CountDownTimer.fla.

You'll find this file in the Ch01_ SimpleSnippets subfolder of the Exercise Files.In this movie, there is already an Actions layer.Within the Actions layer in frame number 1, there is a stop command that's beeninserted with an existing code snippet.In the Library, the mcBiker movie clip symbol, which the biker is an instance of,also has a stop command.So now I'll go back to Scene 1 and I'll test the movie.You'll see that the biker is stationary. Because of another movie clip symbolshape tween, the hair is appearing to wave in the wind.

But otherwise the biker is stationary.Now to prepare for adding the code snippet, I'll go to the bike layer,right-click on it, and select Lock Others.Then I'm going to move the biker off the screen to the right.I'll hold down the Shift key and then click and drag the biker, making sure thatI keep her at the same vertical position.Then I'll release the mouse button and the Shift key.That will be her new starting position.I want to wait for three seconds, and then cause the biker to go across the screen.

I'll make sure that the playhead is in frame number 1 again.Then I'll go to the menu and open the Code Snippets panel.Then I'll go to the Actions category.Down toward the bottom of the Actions category, you'll find a code snippetnamed Simple Timer.I'll double-click to add that code snippet to the first frame of the Timeline.Here is the snippet.In the first line of code, a variable is created.The name of the variable in this case is fl_TimerInstance_3.

The name may differ, depending on how many times you've executed code snippetsin a particular movie.In particular, a numeric value might be added to the end of the variable name.The variable name doesn't matter at all as long as it's consistent.You'll see that it's referred to on the first line that declares the variable,and then on other lines that add bits of code.This first line of code declares the variable and sets its datatype as aninstance of the Timer class.Then this code calls something called the constructor method of the class.

A constructor method is a way of creating a class and sometimes settingits initial values.The two initial values that are set when you create a Timer object are thenumber of milliseconds that you want to wait before something happens andthen the number of times you want to execute whatever functionality you're making happen.In this bit of code, we're saying fire the Timer every second, that's 1000milliseconds, and do it 30 times.I'm going to change that to 3000 or 3 seconds, and 3 times.

The next bit of code adds something called an event listener.Now if you're new to ActionScript, you may not recognize this.An event listener is a way of calling a particular function when an event occurs.An event is simply a way of telling the development environment thatsomething has happened.The particular kind of event that the Timer dispatches or fires is calledsimply a TimerEvent.This bit of code means listen for that TimerEvent.Then call a function called fl_TimerHandler_3.

Then finally, this bit of code calls the start method or function of the Timer object.From the moment that start method is called, the Timer object will now wait for3000 milliseconds or 3 seconds.Then it will call the function that you requested.The function is down here.Again, it's called fl_TimerHandler_3.Right now, all it does is execute a trace command, which causes a little bit ofdebug output when you're testing the movie in Flash Pro.Then the next bit of code increments, or adds a value of one, to an existingvariable, fl_SecondsElapsed_3.

I'm going to test the code right now so we can see the debug output.I'll close the Actions layer and test the movie.After about three seconds, the Output panel appears in the background and showsthe number of seconds elapsed.Now what it's really telling us is how many times the TimerEvent has executed.Now I'll do a little bit of modification to the code snippet.I'll go back to the Actions panel.I'll make the following changes.

First of all, I don't need this variable named fl_SecondsElapsed_3 to make thebiker move across the screen.So I'll add a comment, starting with two slashes.That stops that code from executing.I'll do the same thing for the trace command and the increment commandwithin the function.Within the function, I'll add a simple bit of code, the play command.I'll type in the word play followed by an opening and a closing parenthesis anda semicolon. This means start the Timeline.

Now, again this function will be called automatically when the TimerEvent is dispatched.I'll test the movie.You'll see when it first starts up, nothing happens.But after three seconds, there goes the biker.After another three seconds, there she goes again.And after another three seconds, there she goes again.So the Timer object is causing that to happen.Now you may have noticed that when the biker went across the screen that thelegs weren't moving.That's because there is a stop command in the timeline of the movie clip symbol itself.

I'm going to remove that stop command by going to the Library, locating anddouble-clicking on mcBiker.Then I'll go to the Timeline, and look at the Actions panel.There is a single frame with an ActionScript command there.I'll open the Actions panel, and simply strip out all of the code.Alternatively, you can simply delete the Actions layer and that would have the same effect.I'll go back to Scene 1.Once again, test the movie.Now after three seconds, the biker goes across the screen.

After another three seconds, she passes by again and again.Now you may notice if you wait a few moments that this will happen again,and again, and again.That's simply because the code was placed into the first frame of the Timeline.Each time the playhead hits frame number 1, you'll execute all of this codeagain, firing off the start method of the Timer object.There are ways of nesting some of this code in conditional logic.So you can make sure it only executes once if that's what you want.

I'll describe some of these strategies in later videos in the series.But here I've shown you how to use a fairly complex bit of code that creates aninstance of an existing ActionScript class, the Timer class, sets its parametersto the length of time you want to wait, and how many times you want to executesome code, indicates which function you want to call when the TimerEvent isdispatched, and then starts the Timer object.In reaction to the event, you've controlled when the Timeline executes.That is, when the movie clips animation begins.

The result? A simple movie that controls when animation happens, instead ofallowing the animation to happen automatically whenever the movie is loadedinto Flash Player.

There are currently no FAQs about Flash Professional CS5: Code Snippets and Templates in Depth.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.