How to Make a Flash Video Preloader Using Flash

Step-by-Step Guide

1. 1

   Step 1: Create the “loading bar” and the “dynamic text field”.

   Call the first layer loading bar. , Draw a 150 by 5 pixel rectangle and center it on stage.
   
   Adjust these values by entering them in the appropriate fields in the Properties panel.
   
   You’ll find the width (W) and height (H) input fields in the bottom left part of the aforementioned panel. , Select Modify > Convert to Symbol to make a movie clip out of your rectangle. , In the registration portion of the Convert to Symbol window, click the middle left rectangle. , Call it loading Bar. ,,, Go to the Properties panel once again, and select the following properties for your text field:
   Set the type to “Dynamic text”.
   
   Select “_sans” as font type (it should be on top of the fonts list).
   
   Select the “central alignment” for your text field.
   
   Select the “Use device fonts” option.
   
   Leave the “selectable text” option turned off. , Hit Esc to exit text editing mode. , Call it bytesDisplay. ,,,, Draw a borderless square with the Rectangle tool (R) by holding Shift while clicking and dragging your mouse.
   
   Rotate the square by 45 degrees with the Free Transform tool (Q).
   
   Select the Line tool (L) and draw a line from the square’s left to its right point.
   
   To do this exactly from edge to edge, be sure to have the Snap to objects option turned on (the small magnet icon at the bottom of the Tools panel).
   
   By using the Selection tool (V), select the upper portion of the rectangle and hit Delete.
   
   Select the line and erase it too. ,,,,,,,, Leave all the properties for the dynamic text field the same as they were for the first one you created.
   
   Just make a small adjustment: set the alignment for the text field to left. ,,, Place it where the “blue triangle” points at the “loading bar’s” left edge. ,,, Make a new layer on top of all the existing ones and call it content. ,, The best thing to simulate content is an image.
   
   Select File > Import > Import to Stage.
   
   Select the picture you want to import and click Open.
   
   The picture will appear on your main scene. ,,, Enter the following ActionScript code inside it: stop(); loadingBar._xscale = 1; var loadingCall:
   Number = setInterval(preloadSite, 50); function preloadSite():
   Void { var siteLoaded:
   Number = _root.getBytesLoaded(); var siteTotal:
   Number = _root.getBytesTotal(); var percentage:
   Number = Math.round(siteLoaded/siteTotal*100); loadingBar._xscale = percentage; percentClip.percentDisplay.text = percentage + "%"; percentClip._x = loadingBar._x + loadingBar._width; bytesDisplay.text = "loaded " + siteLoaded + " of " + siteTotal + " bytes"; if (siteLoaded >= siteTotal) { clearInterval(loadingCall); gotoAndStop(5); } } , The site will load instantly, of course, because it loads straight from your hard disk and not from some web server. , This will set the simulated speed of download to a standard (slow) 56K modem. , You will now see the preloader at work!
2. 2

   Step 2: Open a new Flash document.

3. 3

   Step 3: Select the Rectangle tool (R) and block the Outline color.

4. 4

   Step 4: Select the rectangle by clicking on it with the Selection tool (V).

5. 5

   Step 5: In the dialog window that appears

6. 6

   Step 6: select Movie clip as type and call it blue loading bar.

7. 7

   Step 7: With your newly made movie clip still selected on stage

8. 8

   Step 8: go to the left side of the Properties panel below the scene and assign it an Instance name.

9. 9

   Step 9: Lock this layer.

10. 10

    Step 10: Make a new layer and call it "bytes info".

11. 11

    Step 11: Select the Text tool (T).

12. 12

    Step 12: Click and drag out a text field just below the loading bar.

13. 13

    Step 13: Give this field an Instance name

14. 14

    Step 14: otherwise you won’t be able to tell it what to display via “ActionScript” commands.

15. 15

    Step 15: Lock this layer.

16. 16

    Step 16: Create the text field with percentage information that is going to be animated.

17. 17

    Step 17: Make a new layer and call it arrow indicator.

18. 18

    Step 18: Draw a small triangle just above the loading bar’s left edge.

19. 19

    Step 19: With the triangle still selected

20. 20

    Step 20: press F8 (or select Modify > Convert to Symbol) to convert it to a movie clip.

21. 21

    Step 21: Call it moving percentage field and make sure that the registration point is on its left middle side.

22. 22

    Step 22: Double-click on the newly made movie clip on stage to enter inside it.

23. 23

    Step 23: Call this layer "arrow".

24. 24

    Step 24: Select the triangle drawing and move it so that its bottom point is centrally aligned below the movie clip’s registration point.

25. 25

    Step 25: Lock this layer.

26. 26

    Step 26: Make a new layer above it and call it "text field".

27. 27

    Step 27: Select the Text tool (T)

28. 28

    Step 28: click and drag to create a small text field just above the triangle.

29. 29

    Step 29: Give this text field an Instance name: call it "percentDisplay"

30. 30

    Step 30: and lock this layer.

31. 31

    Step 31: Click on the Scene 1 link above the layers to return to the main scene.

32. 32

    Step 32: Use the arrow keys to adjust the position of the moving percentage field movie clip.

33. 33

    Step 33: Give this movie clip an Instance name: call it percentClip.

34. 34

    Step 34: Lock this layer.

35. 35

    Step 35: Place in the site content.

36. 36

    Step 36: Right-click frame 5 of this layer and select Insert “Keyframe” from the menu.

37. 37

    Step 37: Place some content here now.

38. 38

    Step 38: Make a new layer and call it actions.

39. 39

    Step 39: Select the first keyframe of this layer by clicking on it.

40. 40

    Step 40: Press F9 (or select Window > Actions) to open the Actions panel.

41. 41

    Step 41: Test your movie by selecting Control > Test Movie.

42. 42

    Step 42: Still in test movie mode

43. 43

    Step 43: select View > Download Settings > 56K.

44. 44

    Step 44: Select View > Simulate Download.

Detailed Guide

About the Author