A Preloader is a looping animation that plays while the rest of the Movie loads into your visitor's browser.
1. Open "myfirst.swi" saved from the previous tutorial.
2. Press
Insert Scene on the Insert Toolbar
3. Press the
'Bring 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 2 in the Loading Text Object's row. Press the
'Add Effect' button and choose Fade | Fade In from the Menu
8. In the Timeline Panel, click on Frame 12 in the Loading Text Object's row. Press the
'Add Effect' button and select Move from the Menu. Right-click on the Effect in the Timeline and select properties. 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. In the Timeline Panel, click on Frame 22 in the Loading Text Object's row. 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 'Fade to Color %' edit box
Note: Entering the 0% value in the 'Fade to Color %' 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. 100% means replace the original color completely with the new color, 0% means no change to the original color
10. Click on Frame 36 in the Loading Text Object's row. Press the
'Add Effect' button and choose Fade Out from the Menu
The 'Timeline' Panel should now look like this:
11. Press the
'Play Timeline' button. Your text should fade in then fade to gray and back to green again; then your text will fade out. Press the 
'Stop Movie' button
12. Select the Preloader Scene row from the Timeline. Right-click on Frame 31 and select Movie Control | gotoAndPlay | gotoAndPlay(FRAME) from the context Menu. A place marker for the Go to Frame Action will appear on the Timeline, and the script will appear in the window of the Script Panel. From the 'Script' Panel, change the value in the 'Frame' edit box from 1 to 11
The 'Script' Panel will look like this:
13. Press the
'Play Timeline' 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 to 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 etc Scripts
|
| · | 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 2 and select Conditional | If Frame Loaded from the context Menu. This section will be added to and highlighted in the 'Script' Panel window. This Action will be highlighted. Change the value from 1 to 10 in the 'Frame' edit box. From the Target drop-down Menu, select Scene_3
16. Press the 'Add Script' button and select Movie Control | gotoAndPlay | gotoAndPlay(FRAME) from the Menu. Leave the Frame value at 1. Select Scene_1 from the Target drop-down Menu
| The 'Script' 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 Conditional | If Frame Loaded from the Menu. Change the value to -1 in the 'Frame' edit box, and select Scene_3 from the Target drop-down Menu. Press Add Script again and select Movie Control | gotoAndPlay | gotoAndPlay(FRAME) from the Menu. Change the value from 1 to 36 in the 'Frame' 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 'Script' Panel should look like this:
|
Note: When using a gotoAndPlay(FRAME) action and chosing a Scene from the Target drop-down menu, 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.