Creating a Flash Preloader

This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.

To keep visitors waiting for your animation to load you should always display a preloader and advise users how long they will have to wait. In Flash you have to program the preloader manually using getBytesLoaded, getBytesTotal and gotoAndPlay functions. Fortunately Flash Designer does the ActionScript part for you, all you have to do is to put a nice "progress" animation on the preloader frame.

You can create your own animation or use one of stock preloader clips ready to insert on the preloader frame, like the one below (the actual animation doesn't load for demonstation purposes):

To customize the preloader:

  1. Open or create your animation
  2. Choose "Movie" > "Edit Preloader"
  3. Choose "Movie" > "Insert Flash Designer Clip". Navigate to "c:program filesseltecoflash designerloaders" and choose one of the clips. Click OK.
  4. Press F9 to preview the preloader
  5. Export SWF file and the web page, choose "File" > "Export HTML Page".
  6. Upload SWF and HTML file to your web site.
  7. Launch the browser and navigate to the page you've just uploaded to watch the preloader loading your animation.

NOTE: The preloader will display only when the animation takes some time to load. This happens only when you download the flash animation over the internet connection and only for the first time. When you view the file locally (for example when you press "Play Animation") the preloader doesn't appear because the animation loads at once, and the preloader has no chance to start showing the progress.

To test the preloader, publish your file on the web site. To display the preloader again you have to clear the cache of your browser.


Close    To Top
  • Prev Article-Flash:
  • Next Article-Flash:
  • Now: Tutorial for Web and Software Design > Flash > Special Effect > Flash Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction