Creating a Preloader

This is a step-by-step tutorial for creating a Preloader. This tutorial illustrates some of the features seen in the "first.swi" file in the Samples Menu.

A Preloader is a looping animation that plays while the rest of the Movie loads into your visitor's browser.

1. Open "myfirst.swi"

2.   Press Insert Scene on the Insert Toolbar

3. Press the 'Send to Front' button on the Standard Toolbar

4.   Select the Scene Panel, and change the name to "Preloader" in the 'Scene Name' edit box

5. Press Insert Text on the Insert Toolbar

6.   Select the Text Panel and change the word "Text" to the word "LOADING" in the 'text' window. Change the font size to 20, and the color to a dark green

7.   In the Timeline Panel, click on Frame 1 in the Loading Text Object's row. Press Add Effect and choose Fade In from the Menu. Press Close on the Fade In Settings dialog box to accept the default settings

8.   Press the 'Add Effect' button and select Move from the Menu. From the Motion Tab in the Move Settings dialog box, select Color | Fade to Color, choose a medium gray from the Color Palette, and leave the value set to 100 in the '%' edit box. Press Close to accept the changes

9. Press the 'Add Effect' button again and select Move from the Menu. From the Motion Tab in the Move Settings dialog, select Color | Fade to Color. Choose any color you wish from the Color Palette and change the value to 0 in the 'color A %' edit box.

Note: Entering the 0% value in the 'A' (Alpha) % edit box will cause the color to fade to the original dark green again. This can be very useful when you want to display an image or shape in its original color after having changed the color value to tint it

10. Click on Frame 35 in the Loading Text Object's row. Press Add Effect and choose Fade Out from the Menu (the Fade Out Settings dialog box for the Move Effect is displayed). Press Close on the Fade Out Settings dialog box to accept the default settings


The 'Timeline' Panel should now look like this:



11. Press the 'Play Scene' button. Your text should fade in then fade to gray and back to green again; then your text will fade out. The Scene will continue to loop. Press the 'Stop Movie' button

12. Select the Preloader Scene row from the Timeline. Right-click on Frame 31 and select Go to Frame from the context Menu. A place marker for the Go to Frame Action will appear on the Timeline, and the action will appear in the window of the Actions Panel. From the 'Actions' Panel, change the value in the 'Number' edit box from 0 to 11

The 'Actions' Panel will look like this:



13. Press the 'Play Scene' button. Your text should fade in then fade to gray and back to green again. Your text will continue fading from gray to green and from green to gray until you press the 'Stop Movie' button. Press the 'Stop Movie' button


14. Press the 'Play Movie' button. Your "LOADING" text will continue to loop - it will not fade out and your introduction will not begin. Press the 'Stop Movie' button


Note:

·

You have created the looping animation for your Preloader. Now you need instruct your Movie to loop this animation until your Movie, or a portion of it, has preloaded into the viewer's browser cache. The instructions that the Player needs can be added to your Movie with the If Frame Loaded and the Go to Frame Actions

·	If your Movie is in the viewers cache, there is no need to have them view this looping animation at all. You may instruct your Movie to go to Scene 1 rather than playing the Preloader Scene in the first Frame of the Preloader Scene as in this example

15. Select the Preloader Scene row from the Timeline. Right-click on Frame 0 and select If Frame Loaded from the context Menu. This section will be added to and highlighted in the 'Actions' Panel window. By default it will add the 'If Frame 0 of Preloader is Loaded' Event to the 'Actions' Panel. This Action will be highlighted. Change the value from 0 to 10 in the 'Frame number' edit box. From the Scene drop-down Menu, select Scene 3

16. Press the 'Add Action' button and select Go to Frame from the Menu. Leave the Frame value at 0. Select Scene 1 from the Scene drop-down Menu

The 'Actions' Panel should look like this:

You need to add one more action for your Preloader to function properly

17. Right-click on Frame 30 in the Preloader Scene row and select If Frame Loaded from the Menu. Change the value from 0 to -1 in the 'Number' edit box, and select Scene 3 from the drop-down Menu. Press Add Action again and select Go to Frame from the Menu. Change the value from 0 to 35 in the 'Number' edit box. Leave the Scene set to Preloader

Note: The -1 value refers to the last Frame of a Scene. You are instructing the player to download the entire Movie before playing

The 'Actions' Panel should look like this:


Note: For the Go to Frame Action Scene, you can select a Scene by name e.g., Scene 3 as in this example, or choose a relative Scene name such as _LAST_SCENE_ from the Menu

18.    Press the 'Play Movie' button. You will not see the Preloader Scene; as this is a local file your entire Movie is loaded instantaneously. Press the 'Stop Movie' button

19.    Save your Movie

You are now ready to continue with the Exporting your movie and Getting it Ready for the Web tutorial.







[Previous] [Main] [Next]