Introduction: How to Create an Adobe Flash Preloader Screen

By Watch Me On Youtube!


A Flash preloader engages users with your web site while its still loading by displaying a file-loading bar that updates the web sites progress. Heres how to make one.

You Will Need

  • A computer with internet access
  • Adobe Flash CS4
  • An existing Actionscript 3.0 web site

Step 1: Step 1: Open Your Flash Files

Launch the Adobe Flash CS4 program and open your Flash web sites files. Switch the workspace layout by clicking on the drop-down menu box in the upper left of the menu bar and selecting Designer.

Step 2: Step 2: Add Blank Key Frames

In the timeline panel, select all of the layers by highlighting the top layer, holding down the Shift key, and highlighting the bottom layer. Click and drag the first frame of the top layer one frame to the right,
creating a blank frame at the beginning of each layer.

Step 3: Step 3: Create the Loading Bar

Create the loading bar. First, highlight the bottom layer of the timeline and in the Tools panel, select the rectangle tool. Then, in Properties, change the colors of the rectangle stroke and fill, and the size of the stroke. Draw a rectangle in the center of your web page. Make sure the rectangle and stroke dont blend into the background of the web page.

TIP
If you are not sure what an icon means in any of the panels, hold your mouse cursor over it for a description.

Step 4: Step 4: Convert the Loading Bar Outline

Convert the loading bar outline to a movie clip. Choose the selection tool from the tools menu, and double-click on the rectangle so that the whole outline is selected. Hit F8 to bring up the “Convert to Symbol” window. Change the name to “outline” and change the type to “Movie Clip.” Click OK.

Step 5: Step 5: Convert the Loading Bar

Give a general description of the StepClick the center of the rectangle and hit F8 to convert it to a symbol as well. Change the name to rectangle and change the type to Movie Clip. For Registration, select the center square on the far left. Then, click OK. Now go to the Properties panel and change the instance name to rectangle_clip.

Step 6: Step 6: Create the Percentage Text

Select the text icon from Tools. Adjust the attributes for your text under Properties, and make sure that the text-tool option is set to dynamic text. Draw a text box on your document directly below the rectangle. This will make the Properties panel show the properties for the text box. In these new properties, change the instance name to text_clip.

Step 7: Step 7: Write the "stop" and "event" Scripts

Making sure the first frame of the bottom layer is selected in the Timeline panel, hit F9 to bring up the Actions panel. On the first line, write a stop script that stops the web page from cycling. Hit Enter to skip to the next line, and add a script that assigns an event function to the web page. Call the function preload1. Hit Enter.

Step 8: Step 8: Write the "function" Script

Write the preload1 function, which contains two variables: one that returns the total bytes for the web page, and one that returns how many of those bytes have loaded. The function then sets the loading bar size and the percentage text to represent how many bytes have been loaded. The last part of the function tells Flash to go to the second frame of the timeline and play it once the entire document has been loaded.

TIP
To preview the document in action, go to Control, Test Movie from the top menu.

Step 9: Step 9: Publish and Upload

Publish the web site by going to File, Publish Settings. Make sure both the SWF and HTML boxes are checked. Rename both files, and select a location to save. Then click publish, and upload all of the published files to your web server. To access the Flash page, navigate to the HTML file on your web server.