Flash CS5 SWF Preloader Sample File

In the new Flash^R CS5, Adobe^R has included a few sample files to help you get started on your projects. For example, the Preloader for SWF sample file, is a basic preloader for any project. Let's take a look.

Open Flash and choose Sample Files from the Create from Template section. In the New from Template dialog box, choose the Preloader for SWF file. The finished preloader opens into the Flash workspace. We have three layers on the Timeline. The Background layer contains a patterned background and the Content layer contains a dynamic text box and the word "LOADING". The Actions layer has all the ActionScript code that runs the preloader.

Click on Frame 1 of the Actions layer. Open the Actions panel ( Window – Actions ) to see the code.

For this tutorial, we want to keep the ActionScript untouched. But we can customized the rest of the preloader to match our project.
Still on Frame 1, go to the Background layer and unlock the layer. Click on the empty area of the stage and go to the Properties panel. We can see that this layer has no Stroke color and the Fill color is dark gray. Click on the Fill color box and change the color to white or the color of your choice.
Still on Frame 1, click on the Content layer. You will see that we have two elements on this layer. Click on the bottom box and go to the Properties panel. This box is a dynamic text box with an Instance Name of "percent_txt". It is a dynamic text box because the ActionScript code will display the amount/percent of the file that has downloaded. This text will change each time Flash checks for a new percentage.

In the Character section, we can change the Font Family, Style, Size and other text controls for the dynamic text to match the style for our project. In other sections of the Properties panel, we have many other controls for the text box such as size and position.
Also on the Content layer, we have the red text "LOADING". If we click on that, we can see in the Properties panel that it is a Movie Clip. Double-click on the red text to enter Edit Mode for this Movie clip. Inside the Movie Clip we have another Timeline with one layer. This layer contains a Tween that has 31 frames. If we scrub along the Timeline, we can see that the Tween animation expands and contracts the text.
Go back to Scene 1 and move the Playhead from Frame 1 to Frame 2. Notice that the contents on the Background layer still display but the contents of the Content layer has changed to say "Large content here". Of course, you will want to replace this with your own content. As you can see, Frame 1 is for the preloader and Frame 2 begins the rest of your project.

*Adobe provided a review copy to me free of charge.

Join us in the Flash forum.