Print Close

A Flash preloader engages users with your web site while it's still loading by displaying a file-loading bar that updates the web site's progress. Here's how to make one.

• 

  Step 1: Open your Flash files

  Launch the Adobe Flash CS4 program and open your Flash web site’s 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: 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: 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 don’t blend into the background of the web page.

• Tip

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

• 

  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: Convert the loading bar

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

• 

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

• Fact

  The Flash program had its origins in 1993 as a drawing program specifically for computers with pen tablets.