Holiday Flash eCard Tutorial – Simple Percent Preloader

Tis the season for Flash eCards. If your flash card is a large file size, you will need to incorporate a preloader into your card to give your audience the full experience of your animations and/or music. Follow the steps below to create a simple, yet elegant and effective preloader that counts numerically in percentage from zero to 100%. Let’s assume that you already have created the flash card, but need to add a preloader to the beginning of it.

Note: This tutorial is demonstrated in Adobe Flash CS4. Screen views may differ from other versions.

1. To begin, open your flash (.fla) file.
2. Create a new scene by opening the Scene panel Window > Other Panels > Scene (Shift+F2).
3. Click on the "Add Scene" icon located in the bottom left corner of the Scene panel. This will be in addition to the existing Scene called "Card".
   
4. Once created, double click on the scene and type in "Preloader". When done, click anywhere on the panel and the change will be made.
   
5. Now, you will need to put the preloader in front of the actual card. With the Scene panel still open, click and drag the Preloader scene you just created and move it directly above the main card then release your mouse.
   
6. At this point, either close the Scene panel or move it aside. The current work area should already be set to the preloader.
7. On the first layer, decorate the preload screen with your own custom background graphic, color, etc. Open the Library and drag all images you want to be on your preload screen. In this example, I also included my company’s logo.
   
8. Insert a new layer on the time line and name it "Loading". Using the tools palette, choose the type tool and type in the word "Loading…" into the new layer you just created.
   
9. Create a new layer and name it "Percent". With the text tool still open, type in "100%" and style it any way you like. Then, remove the text and expand the width and height of the box so the text will fit in it.
   
10. Under "Properties" with the percent object selected, choose "Dynamic Text" from the drop-down list.
11. Under Instance name, type in "loadingPercent" (without quotes of course).
12. On the scene time line, create one more layer and name it "Actions".
13. On the first keyframe (click F6), right click to get the context menu and then choose "Actions".
14. For actions, copy and paste the following into the panel and then close it and go back to the time line.
    percent = Math.floor(getBytesLoaded()/getBytesTotal()*100);
loadingPercent.text = percent + " %";
15. On the second keyframe of the "Actions" layer, right click the keyframe, choose "Actions" from the context menu, then copy/paste the code below into the panel. When done, close the panel.
    if (percent ==100){
gotoAndPlay("Card",1);
}else{
gotoAndPlay(1);
}
16. Your time line should look something like this:
    accupril generic alt=”Layers in the Time line.” title=”Preloader 6″ width=”308″ height=”150″ class=”alignnone size-full wp-image-331″ />
17. At this point, you should be ready to test your movie. Control > Test Movie (Ctrl+Enter)