Customizing the Flash Preloader for SWF Template

In this tutorial, we will build a simple Flash^R slideshow that will display four images. To make this project reusable, we will save this fla as a template. We will first build a basic Flash slideshow fla that has four placeholder images such as image1, image2, image3 and image4.

To use the template for any project, we can adjust the document size and replace the placeholder images with the ones supplied by the client. In preparation for this tutorial, you will need four images that have the same dimensions. For the example, I chose the dimensions 580 px by 200 px. If you would like to make the images, use the link below to read the Photoshop^R tutorial.

Our first step is to build a simple text preloader. But Flash already has a preloader template that we can use.

Start a new Flash project and choose Create from Template.
In the New from Template dialog box, choose Sample Files � Preloader for SWF.

Now we have an empty fla except for the preloader. You can change the default settings to match your project requirements.
From the Menubar, click Modify � Document and in the Document Settings dialog box set the dimensions to 580 x 200 pixels and white background color.
Let's remove the dark gray background from the Background layer. On Frame 1, unlock the Background layer, select all the content and delete.

Now we can see that the text and text box on the Content layer are off our stage because of the new dimensions.
On Frame 1, select all content on the Content layer and drag the content to the center of the stage.

Because the background was originally dark, It's a good guess that the text in the text box (under the "LOADING" text) is white.
Click inside the text box with the Text tool. You will see the color of the text in the Properties panel. Change it from white to black.

You may want to delete the "LOADING" text.
Select just the Loading text on the first frame of the Content layer and delete.

One final change is to remove the "Large Content Here" text from Frame 2 of the Content layer. Because of our new dimensions, this text will also be off the stage.
On Frame 2 of the Content layer, select the text and delete.
This step is optional but helps to keep the Flash Library organized. In the Library panel, create a folder and name it "preloader assets". Drag the loading clip and tween movieclips into this folder.

Now that we have customized the preloader to fit our project, we can build the slideshow animation.

Join us in the Digital Art and Design forum.

	Diane Cipollo BellaOnline's Flash and Animation Editor