Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise, you're going to learn how to build a simple pre-loader that you can easily add to your other projects. There are a variety of different ways to create a pre-loader. But the method that you're going to be using to create this pre-loader,or progress bar, is simply to create a 100 frame long animation (100 frames representing from zero to a hundred percent downloaded). Again the pre-loader is going to be showing the downloading progress of your content. So you're going to create an animation that represents the downloading progress as it occurs of whatever content that is being loaded.
So for the first step let's create a simple animation that spans 100 frames long in length. I'm going to create a new movie clip to house this animation. So inside of a new FLA in the Library create a new symbol by clicking on the new symbol button, down at the bottom left. Name the symbol Progress Bar and make sure that it's type is set to movie clip, and then click OK. Inside of this Progress Bar movie clip, which is where flash puts you automatically, select the Rectangle tool, pick a stroke and a fill color and then, on your Stage, click and drag out a bar to any size that you'd like.
Then select your Selection tool, select that rectangle, and its position is at the top left to the rectangle, aligned with the center of the movie clip instance. To do that, open up your Align panel by choosing Window, Align, make sure that the To Stage button is depressed, and then click on the Align Left Edge, and Align Top Edge buttons to align the top left edge of your shape with the center of that movie clip symbol. Then for how this progress bar is going to be designed let's separate the outside stroke of that rectangle from the fill.
To do that deselect your shape and then double click just in the outside stroke of that shape to select all four sides. And then cut the stroke away from that by choosing Control X on Windows (or Command X on Macintosh). Then create a new layer above that and paste what you just cut in place by choosing Control Shift V (or Command Shift V on Macintosh). That'll place that shape back where you cut it from but in a new layer.
Rename that new layer to be titled Outside Stroke and lock that layer. Then let's define the very end of this animation by creating a keyframe on Frame 100. In Layer 1, the layer that has the fill in it, scroll down to the Frame 100 and add a keyframe there by pressing F6. So you can also see the outside stroke all the way out to that point ,Frame 100, by selecting frame 100 in the outside stroke layer, and press F5.
That'll make it so that you can see the outside stroke throughout the entirety of the animation. Now the reason why you added the keyframe on Frame 100 first is because, now, you already have represented what the progress bar should look like at the very end. It should be filled just like it is now. Now you can easily take your Playhead, move it back to Frame 1, click once on the Fill to select it, and change its size so that it's only one pixel width, and it'll be aligned down here on the left-hand side.
To do that, after you've selected the Fill, making sure your Playhead is down here on Frame 1, open up your Info panel and change the width to 1 pixel wide, and, then press Return or Enter. So now the width of it is only one pixel and it's aligned here on the left-hand side. Now all you have to do is select Keyframe 1 in the layer that contains your fill and then, from the Properties inspector, change the tween to shape.
So essentially, it's just the shape tween of that progress bar moving from the left-hand side to the right-hand side. Again this can be any animation that you'd like as long as it spans 100 frames in duration. Now just to make the progress bar a little more interesting, I'm going to click and drag around where my shape is on the Stage. Again, making sure my Playhead is over Frame 1. And then, in the Properties inspector, I'm going to change the fill to be a yellow color. So not only will the progress bar animate across but the color will change as well from yellow to orange.
So there is the progress bar, that's going to show the downloading progress of whatever content I'm loading,using my movie clip loader class. Now when your movie first loads you obviously don't want this animation to automatically start playing. You're going to use ActionScript to tell this Playhead when to move and where to move to. So you want your animation that you just constructed to be paused at the very beginning. To do that, we need to add, to stop the action to the first key if we remove our movie. But again, because we're adding an action to a keyframe in the Timeline, we should create a separate layer for our actions.
So again, still on the progress bar of movie clip symbol, select the topmost layer and add a new layer. Rename the new layer to be titled A, for actions, select the very first keyframe. And, in your Actions panel, type "stop begin print the c and print the c, semicolon". That'll make the Playhead, when it first goes to play this movie clip symbol, stop on the very first frame. Now return to Scene 1 by clicking on the Scene 1 icon above the Timeline.
There is no progress bar symbol instance yet on your Stage because you've constructed it entirely within the Library. Now, from within the Library, take that progress bar movie clip symbol and drag it out unto the Stage placing it where you want it to be. I'm going to put mine right about in the middle, and rename the layer that that progress bar resides in from Layer 1 to Progress Bar. Now when we tell that that progress bar to actually animate or move, we need to be able to target it by name in the actions that we create.
So click once on that progress bar movie clip symbol instance on the Stage, and then in the Properties inspector, click in the instance name field and type ProgressBar, all one word with the capital B in Bar. Now we know, as we're writing our ActionScript, we can tell that specific movie clip instance to do something by saying, "progress bar, do this". As you saw on the last exercises when you're loading content using the movie clip loader class, you need to specify where the content is going to load into.
In the previous exercises we created a blank movie clip symbol to act as a container for that content to load into. We're going to do the same thing in this new FLA. So back in your Library panel, again, click on the new symbol icon at the bottom and create a new movie clip symbol called Container. Again, make sure the type is set to movie clip, and click OK. We don't need to put anything inside this movie clip so go back to Scene 1 by clicking on its Tab, and create a new layer.
Rename this new layer to be called Container and make it the bottom most layer by changing the layer order by dragging it. Then, just so we don't accidentally put anything in the progress bar layer, go ahead and lock that layer leaving your container layer, which is currently empty, unlocked. Then take the movie clip that you just created ,the empty one called Container, and drag an instance of it out on to the Stage. Remember wherever this movie clip symbol instance is positioned is where the top left of your content will load into when it loads into that movie clip symbol.
So that we can target that movie clip symbol container with ActionScript, we also need to give it an instance name as well. So make sure you have it selected. And in your Properties inspector, click in the instance name field, and type container. So now, I can just refer to it by the name Container. Now we can start writing the ActionScript to make this whole thing work. Click on the topmost layer (which right now should be Progress Bar) and create a new layer.
This layer's going to house all the ActionScript that makes this all work. Rename the new layer therefore, to be titled A for actions, and go ahead and lock that layer so we don't accidentally put anything on the Stage in our Actions layer. Then select the first keyframe in that layer and open up the Actions panel. In the next movie you're going to start writing the ActionScript to load the content in as well as show the downloading progress using your new progress bar as the content is being downloaded.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.