WEBSITE TEMPLATES       FLASH WEBSITES       FLASH INTROS   

Search Templates     
Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
Website Promotion
Tutorials
Website
Add Ons
   You are here : : Home > Free Resources > Flash Tutorials & Resources > Simple Preloader   

Simple Flash Preloader

This tutorial will explain how to create a simple 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 Movie clip.

  1. Draw a borderless rectangle.
    If your color mixture panel is not open press Shift+F8 to open it.
    Select your rectangle, go to color mixture panel and choose linear from the drop down menu.
    Now change your linear fill accordingly, with white on right end and your background color on the other end.
  2. Select this rectangle and press F8 to convert this rectangle to a symbol. Name this symbol "Bar" and choose Graphic behavior. Press OK.

  3. Press Ctrl+F8 to create a new movie clip for preloader effect.
    Call it "preloader_mc". Choose movie clip behavior and press OK.
  4. Draw a borderless zigzag as shown below on the first frame and press F5 on the 90th frame.

  5. Insert a new layer and pull it below Layer1.
  6. Insert the bar graphic symbol into this new layer "Layer2".
  7. Adjust the height of the bar such that its height is equal or little more than the zigzag height.
  8. Position this bar graphic as shown below.

  9. Press F6 on the 35th frame. Keeping framehead on 35th frame, pull the bar graphic onto the other side of zigzag as shown below.

  10. Select any frame between Frames 2 and 34 and select Motion from the tween pop-up menu in the Property inspector.
  11. Select frame 40 and press F6 to insert a new keyframe on the 40th frame.
  12. Keeping the framehead on the 40th frame select bar graphic and go to main menu,
    Modify>Transform>Flip Horizontal.
  13. Select frame 85 and press F6 to insert a new keyframe on the 85th frame.
  14. Keeping the framehead on the 85th frame pull the bar graphic symbol to its initial position as in frame 1.
  15. Select any frame between Frames 41 and 84 and select Motion from the tween pop-up menu in the Property inspector.
  16. Select frame 90 and press F5.


Adding Preloader to your Scene1

  1. Now go to your Scene1.
  2. Insert 3 new layers.
  3. Drag "preloader_mc" from your library onto your working area. Place it at the center of your working area. Press F5 on the 2nd frame
  4. Type in "LOADING" on the 1st frame of your 2nd layer.
  5. Copy and Paste the below script in the action panel of your 1st frame of 1st layer.

    ifFrameLoaded ("end") {
    gotoAndPlay ("start");
    }

  6. Press F6 on the 2nd frame of 1st layer and insert the below script in the action panel of your 2nd frame of 1st layer.

    gotoAndPlay (1);

Start your Main movie from the 3rd frame onwards.
Name the 1st frame of your main movie "start" and the last frame "end".

Download the .fla file

Learn More! Click here for a Adobe Flash CS3 Step By Step Video Traing Course!


Social Bookmarking
Bookmark to: Digg Bookmark to: Del.icio.us Bookmark to: Facebook Bookmark to: Reddit Bookmark to: StumbleUpon Bookmark to: Slashdot Bookmark to: Furl Bookmark to: Blinklist Bookmark to: Technorati Bookmark to: Newsvine Bookmark to: Blinkbits Information

New! We have added an article directory of more than 2,000 articles on web development and site promotion! Topics cover domain names, web design, web hosting, ecommerce, blogging & rss, email marketing, internet marketing, ppc advertising, seo, traffic building and much more!



domain names web design web hosting ecommerceblogging traffic building internet marketing web development

Home  |  Templates   |  Low Cost Solutions  |  Custom Services  |  Free Resources  |  Contact
Website Templates  |  Full  Flash Website Templates   |  Flash Intros  |  Logos & Corporate Identities  |  Swish Templates  |  Ecommerce Templates  |  CMS & Blog Templates
Copyright © 2004-2008 www.entheosweb.com - Entheos. All Rights Reserved.