Flash Timeline Preloader

This tutorial will explain how to create Timeline Preloader in Flash MX 2004. The download .fla is included at the end of the tutorial.

Please note:
1. You need to have Flash Player 7.0 installed to view the Flash animation.
2. Flash MX 2004 must be installed in your system to download the .fla file.

STEPS TO FOLLOW

Create a Graphic Symbol

• First and foremost type "LOADING" on your center stage. Select the word LOADING and press F8 to convert it to a symbol.
• Name the symbol "loading", choose Graphic behavior and press OK.

Create a "LOADING" Movie clip

• Press Ctrl+F8 to create a new Movie clip.
• Name this Movie clip "loading_mc", choose Movie clip behavior and press OK.
• Insert your loading Graphic Symbol in Frame1.
• Press F6 to insert keyframe in frame5 and in frame10
• Now go back to frame5. Select "LOADING", still keeping the playhead in frame5, choose Alpha 0 from color pop-up menu of your property panel.
• Choose any frame between 2 and 4 and select Motion from the tween pop-up menu in the Property inspector.
• Choose any frame between 6 and 9 and select Motion from the tween pop-up menu in the Property inspector.
• Your Movie clip is ready, Now come back to Scene1.
  

Create Bar Preloader

• Insert 5 layers and name them as shown below.
  
  
• Now go to frame1 of loading layer, drag loading_mc to your center stage. Center Align the movie clip. Press F5 on your 40th frame of loading Layer.
• Select frame1 of your mask layer and draw a rectagle as shown below.
  
  Press F5 in frame 40
  
• Double click on this rectangle, Copy ( Ctrl+C), go to Layer bar and press (Ctrl+Shift+V) to paste it exactly in the same position. Now select only its border, Cut (Ctrl+X) and paste (Ctrl+Shift+V) in frame1 of your border layer.
• Press F5 in frame 40 of border layer
• Now come back to your bar layer, Push the rectangle to the left as shown below
  
• Go to Frame 40, keeping playhead on frame 40, pull the rectangle onto the other side as shown below
  
• Now select any frame between 2 and 39 and select Shape from the tween pop-up menu in the Property inspector.
  
• Now go back to layer mask, right click on the label and select mask.
  

Insert script in the action panel

1. Go to action Layer, insert keyframe in 1st,2nd,5th,6th,10th,11th,15th,16th,20th,21st,25th,26th,30th,31st,35th,36th and 40th Frame
2. Copy & Paste the following script into the action panel of Frames mentioned below.
   
   

   ifFrameLoaded ("s1") { x = 1; play (); } Frame 1 ifFrameLoaded ("s2") { x = 2; play (); } Frame 5 ifFrameLoaded ("s3") { x = 3; play (); } Frame 10 ifFrameLoaded ("s4") { x = 4; play (); } Frame 15 ifFrameLoaded ("s5") { x = 5; play (); } Frame 20 ifFrameLoaded ("s6") { x = 6; play (); } Frame 25 ifFrameLoaded ("s7") { x = 7; play (); } Frame 30 ifFrameLoaded ("s8") { x = 8; play (); } Frame 35 gotoAndPlay ("start"); Frame 40

   
   
   

   if (x != 1) { gotoAndPlay(1); } Frame 2 if (x != 2) { gotoAndPlay(5); } Frame 6 if (x != 3) { gotoAndPlay(10); } Frame 11 if (x != 4) { gotoAndPlay(15); } Frame 16 if (x != 5) { gotoAndPlay(20); } Frame 21 if (x != 6) { gotoAndPlay(25); } Frame 26 if (x != 7) { gotoAndPlay(30); } Frame 31 if (x != 8) { gotoAndPlay(35); } Frame 36

   
   

Your preloader is now ready. You can start building your main movie from the 41st frame and call the 41 frame "start" . After your main movie is ready. Divide the total frames used by your main movie by 8. Name them s1, s2, s3 and so on.

Download the .fla file

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!