Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Have you ever wanted to track the playback of a SWF file as a percentage, like a video? You can do that using simple math and some built-in properties. On the Stage, I have my main animation, which is main_mc, and then I have playPaused_mc that controls the playing and pausing of the animation. I am going to have prog_mc. That's a progress bar. By double-clicking, you can see that its Timeline is a 100-frame animation.
As a side note, you'll see that I use the classic tween instead of a motion tween; sometimes I just do that because it's faster for me, but there is no particular reason why you would need to use a classic tween here. On the first frame, I have a stop action, and that's all there is to that movie. What we are going to do is track the progress of the main animation as a percentage, and tell the prog movie clip to go to the frame that corresponds to the percent that's played in the movie.
So let's go to the first keyframe of the actions layer and open up the Actions panel. Inside of playClicked, below the last line of code that's in there, I am going to add an EventListener to main_mc. Type main_mc.addEventListener, capital E for Event, capital L for Listener; it should be blue after you type it. Then in the parentheses, I am going to type the event that I want to listen for.
Now this event is called ENTER_FRAME. It runs every time your movie enters a new frame. So it's executed with each frame. That's the perfect interval to track the playback progress for this animation. So the ENTER_FRAME event is Event with a capital E Event, .ENTER, in all caps, _FRAME, also in all caps. This should all be blue. So type a comma, and then after that, we'll type trackProgress.
So that will be the function that it will create. Now before we go on, I want to take this line of code, copy it with Command+C or Ctrl+C, and then paste it at the bottom of the pauseClicked function. Now the reason I want to do this is because I want to remove the EventListener. The ENTER_FRAME event runs very frequently and takes up memory in the Flash player. So when you don't need to run it, like when the movie is paused, it's best to not use it all.
So let's change add to remove in the pasted code, and that way we won't use memory when we don't need to. Below the pauseClicked function, let's define the trackProgress function. So type function trackProgress with a capital P, some parentheses, and inside of the parentheses we need to receive an event object, so type evt:Event with a capital E. After the close parenthesis, type colon, void, all lowercase, then type some curly braces.
So I have open and close curly braces, and I am indenting here. To track the progress, we are going to need two things: the current frame that the movie clip is on and the total number of frames the movie clip has. So in the trackProgress function, we are going to create a variable called percent. And this is going to be a Number, capital N. I am going to set it equal to the percentage of the movie that has been played.
To find the percentage, we are going to take the current frame that the movie is on and divide that number by the total number of frames in the movie. That will give us a number between 0 and 1 that will represent the percentage, and then we can multiply that number by 100 to get a whole number percentage. So let's see how that works. Type main_mc.currentFrame / main_mc.totalFrames.
Before we move on, let's just trace the value of percent to see what we get. Test the movie and then click the Play button and just look in the Output window. We'll close the movie, and we'll scroll down, and we get these values that start off at 0.01, 0.02, 0.03, and going on and on.
So what this represents is right now where I have highlighted 0.06 that is 6% of the movie that's played. So I ended at about 28% of the movie played. So if we multiply this value by 100, by moving that decimal point two places to the right, then we can get a whole number to use as a frame. So let's go back to our code, and we'll look at getting a whole number.
So the first I am going to do is wrap some of this code in parentheses, and parentheses in math, in ActionScript, work just select like parentheses in math class. They make sure that one process is done before moving onto another process. So they give this priority, this division right here. So I am going to take that, I am going to multiply that value by 100 to move the decimal point, and there we should have a number between zero and 100. The problem is it's still not going to be a whole number.
We need to round it off somehow. So I'll take that and wrap this whole thing in parentheses, so I'll have two open parenthesis at the beginning of this equation, and at the very beginning I am going to type math.round, and then I am going to delete that extra parentheses that Flash created for me. And what this is going to do is it's going to take this whole number and round it off. So instead of having 28.075, I am just going to have 28.
So I can use this percent to correspond to a frame in the progress bar movie clip. So we'll go to the next line and type prog_mc. That's the name of the progress bar .gotoAndStop; capital A, capital S, and in parentheses pass in the word 'percent.' Now let's test the movie, see what we get. Click the Play button and watch the playhead at the bottom of the screen track the progress of the animation.
So you see the bear walk in, eat the fish, and then walk out, and the whole time you can see the progress right at the bottom of the screen. Notice at the end, the progress bar goes all the way back to the beginning. So now I'll close the preview window. It looks like everything is working great. So by using the current frame and total frame properties, along with common math equations and rounding numbers, you can track the playback progress of an animation.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100017 Viewers
56 Video lessons · 113086 Viewers
71 Video lessons · 81934 Viewers
131 Video lessons · 39315 Viewers
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.