Viewers: in countries Watching now:
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.
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.
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 been inserted 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 symbol shape 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 that I 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 snippet named 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 snippets in 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 an instance 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 setting its initial values. The two initial values that are set when you create a Timer object are the number of milliseconds that you want to wait before something happens and then 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 1000 milliseconds, 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 that something has happened. The particular kind of event that the Timer dispatches or fires is called simply 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 for 3000 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 of debug 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 existing variable, 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 shows the 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 the biker 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 command within 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 and a 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 the legs 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 and double-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 code again, 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 an instance of an existing ActionScript class, the Timer class, sets its parameters to the length of time you want to wait, and how many times you want to execute some code, indicates which function you want to call when the TimerEvent is dispatched, 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 of allowing the animation to happen automatically whenever the movie is loaded into Flash Player.
There are currently no FAQs about Flash Professional CS5: Code Snippets and Templates in Depth.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.