15. The Preloader



The flash movie has to be fully loaded before it can be played. This could be a major problem if we have a big movie and a weak internet connection because it could take long time until the movie starts tom play in the browser window. So we design loader to show the view how much of the movie is loaded and how much should he wait until sees it on the screen.

Open the file index.fla from template/flash.

Go to the Timeline and select the layer named "loader". Unlock it if it is locked and then click on the loader symbol and take a look at the Actions panel:

As you can see above the loader movie clip has a few lines of code that you don't have to modify. The loader movie is placed in the first frame of the animation. This frame has a stop() action in the actions layer that permits the loader to be executed until the entire movie is loaded.

Double click the loader movie in the main window to view it content:

The loader movie must have exactly 100 frames to work correctly. You can modify the elements of the loader but do not modify the number of frames.

The code presented above includes a variable named "text". We can use this variable to show the viewer the exact percent of movie loaded. Let's use this variable.

Select the "loading..." text (Layer 4) and delete it. (press Delete from keyboard).

Now you have an empty frame:

On the canvas create a line of text using the Text tool:

Drag the text area to make it larger. (drag from the circle in the upper right corner)

From the Properties palette make that text a Dynamic text:

Now set the font to Tahoma, size to 12 and color to white:

Now in the "var" field enter the name of the variable: "text". This will make the dynamic text to display the contents of the "text" variable created in Actionsript (loading... number%).

Now test the movie to see the loader working. It will display the text "loading... number%" as in the image below: