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.
In Flash Professional, there were a couple of different ways to create animation. When you first learn how to use Flash, you typically use Timeline-based animation, including motion and shape tweens where you define a beginning state and an ending state and let the Flash authoring environment fill in the differences. And then there is the more time- intensive frame-by-frame animation where you create individual images in each frame of a Timeline and then as the Flash Player plays through the Timeline, the animation takes place. You can also create animation though in pure code using ActionScript 3.
You define the animation using ActionScript code depending on an event named ENTER_FRAME. To understand code-based animation, you need to know that the ENTER_FRAME event is dispatched by all movie clip objects, including the main document itself. You listen for the event which happens a certain number of times per second depending on the frame rate of the document. This is set by default to 24 frames per second, which means that the ENTER_FRAME event happens that often. You listen for the event and you call a function when the event occurs.
The code typically looks like this. You call the addEventListener method. You pass in the name of the event, ENTER_FRAME, and you name the function that you want to call on each frame and then within the function, you make something happen, causing an object to fade, move, rotate, or otherwise change its visual state. For this demonstration, I'll use a file from the Exercise Files area. I'll open the Ch02_Timeline folder and then open the file LogoWithEnterFrame.fla. In this presentation, I'm going to move a couple of movie clip symbols around the Stage.
I'll be move both this biker object and the sun, causing the biker to move from right to left and the sun to rise. I'll test the movie and show you its current state. The biker object is a movie clip symbol instance that has its own internal animation, causing the legs to move. But right now the biker itself isn't moving. Also, notice that the sun isn't moving yet. Then I'll go to the Code Snippets panel. Here are the two code snippets I'm going to use. I'll open the Animation category. The Animate Horizontally and Animate Vertically code snippets create ActionScript based animation using this ENTER_FRAME event.
I'll start with the biker object. Now with the layer unlocked, I'll select the biker object. Notice on the Properties panel that it already has an instance name of biker. Now, I'll go to the Code Snippets panel and I'm going to add to the code snippet Animate Horizontally by double-clicking it. Here is the code snippet in its initial state. As with many other code snippets, we're adding an event listener to the object and in this case, we're listening for the event ENTER_FRAME and calling this function, fl_AnimateHorizontally. As in many other cases, an arbitrary number is added at the end by Flash.
If you want to change the name of this function, you can, just making sure that the name here in the addEventListener method matches the name of the function in its definition. The body of the function is very simple. It simply decrements the value of the X property by 10, meaning that the object is moving from right to left. I'm going to close the ActionScript panel and the Code Snippets panel and then I'm going to adjust the beginning position of the biker. I'll click on the biker object, then hold down the Shift key and then click and drag the biker to the right. I'm holding down the Shift key to make it easier to control the vertical position of the object, then I'll let both of the Shift key and the mouse button go.
So now the biker object is going to start off the stage and then move across the stage. I'll test the movie and here's the result. I've now implemented simple ActionScript-based animation. Now you can make adjustments to this animation by adjusting its values. I'll go to the first frame of the Actions layer and then to slow down the animation, I'll just change the number of pixels that the biker is moving by in each frame from 10 to 5. I'll close the Actions panel and test the movie again and now the biker is moving across the screen much more slowly.
Now let's work with the sun object. I'll close the test movie. I'll go to the sun layer in the Timeline, right-click, and select Lock Others. Then in the Stage area, I'll click on the sun object. Now as with the biker object, I want to adjust the initial position of the sun. So I'll click on it once, then hold down the Shift key and move it down a bit and I'll make it so that it's just barely visible behind the hill. Now with the object selected, once again I'll go to the Code Snippets panel.
Go to the Animation category and I'll select and insert the code snippet, Animate Vertically. Just as with Animate Horizontally, Animate Vertically adjusts the position of the selected object, this time adjusting the Y property. I'll close the Actions panel and test the movie and you'll see that the sun flies by much too fast. I'll test it again and watch the bottom of the sun object. Notice that it's cut off a little bit and in fact because the graphic,that I have been provided doesn't have a complete sun, that is the bottom isn't complete, we're only going to cause the sun to rise a little bit.
So I want to slow down the animation a lot and I want to limit how far it travels. So let's go back to the Actions panel, clicking on frame 1 of the Actions layer and then opening the panel. First, I'm going to change the number of pixels that the sun travels in each frame from 10 to 1. I can either use this expression, sun.y -= 1, or I can simplify this now by simply saying sun.y --. Now let's check the animation. The sun is now moving really slowly.
I like that a lot better, but once again I have a problem of the object being cut off on the bottom, so I want to stop the animation at a certain point. Let's go back to the Actions panel. To make this happen, I'm first going to create a variable that tracks the initial vertical position of the sun object when the movie first starts up. I'll create a variable named sunOriginalY where its data type is number and I'll set it to a value of sun.y. Because this movie only has a single frame, this code will be executed once and so I'll be saving the original vertical position and I'll be able to compare that value to the current position as I do the animation.
Now I'll go to the function where I'm changing the vertical position. I'm going to add a conditional clause. It looks like this. If, then with two open parenthesis, sunOriginalY - sun.y, and we'll put that expression in its own set of parenthesis, is greater than equal to 50 and then we'll close the conditional expression. Then I'll add a pair of braces and then in order to cause the animation to stop, I'm going to remove the event listener. To make that happen, I'll select and copy the line that's adding the event listener in the first place.
I'll copy it to the clipboard and then I'll paste it within the if statement and then I'll change the name of the method that I'm calling from addEventListner to removeEventListener. So now I'm saying if the sun has traveled as I want it to travel, I'm going to stop the animation from happening anymore. I'll close the Actions panel and run the movie again and now the sun is rising in the background, but it only rises a certain amount. I see that that wasn't enough. So I'll go back and adjust the number again until I like the animation.
I'll change the number from 50 to 150. I'll run the movie and I see that that's a little bit too much. I can be a little more scientific about this by going to the Stage and doing some calculations or I can simply do this by trial and error and so now the sun is rising to a certain extent and stopping before I see the cutoff of the graphic. So this has been a look at how to create ActionScript-based animation, using two very simple code snippets, Animate Horizontally and Animate Vertically.
You can adjust the direction and speed of the animation by changing whether you're adding or removing pixels and by changing the number of pixels you're adjusting an object's position in, in each frame.
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.