How To Create an Adobe Flash Preloader Screen

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.

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 don’t blend into the background of the web page.

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.

Click 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.”

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.”

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.

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.

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.