Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Adding a Preloader   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Adding a Preloader

In this tutorial, you will learn how to add a preloader before the flash file is loaded in the browser. The preloader gives the visual feedback to the user that something is getting downloaded in his browser. The pre loader acts as a type of progress bar that tells the progress according to the net speed of the viewer.

This is part of a 6 part tutorial series on how to create a Flash website using Flash CS5. The tutorial covers the following :

  1. Creating a web template using Photoshop

  2. Importing a Photoshop file in Flash CS5

  3. Adding sounds and animation to buttons

  4. Adding Animation and Button interactivity

  5. Adding a Preloader

  6. Publishing the Flash content

To start with, use the same file that you completed in the last tutorial, or download it from here (click here).

  1. Open the downloaded file in Flash CS5. Press CTRL+ENTER to publish the the content of the flash movie.

  2. Next, we will check that how this flash content will be downloaded actually ini the web browser at runtime. To do so, choose View > Bandwidth Profiler from the menubar in the window.

    The bandwidth profiler gives a brief profile for the content to be downloaded, refer to the figure below.



    The size refers to the complete size of the flash content at runtime.

  3. Next, choose View > Download Settings; this will display the download settings that are used by default in flash, i.e 56 k (4.7 kb/s). Next, we will make flash simulate the content as it will do at runtime with internet speed of 4.7 kb/s.

  4. Choose View > Simulate Download from the main menubar. You will notice a grey background with dots appearing at the center that indicates that the content is getting downloaded, as shown in figure below.



    Also notice that the Bandwidth Profiler displays that how much content has been downloaded and how much is remaining with a speed of 4.7 kb/s. Next, we want to make a bar appear indicating the progress instead of these dots.

  5. Save the flash file again with the name as index.

  6. Next, choose File > New; the New Documents window is displayed. Choose the Templates tab from there. Choose Sample Files from the Categories area and Preloader for External File option from the Templates area. Choose the OK button to open that file.

    A new file for the preloader is created in flash, indicating the preloader bar, as shown in Figure.



  7. Delete the background layer from the timeline as we don’t need that. Also, make the stage area size to be similar to what we have for the index.fla file (main flash file).

  8. Next, we will set the red progress bar at the center of the stage. To do so, select the progress bar from the stage area and choose Window > Align from the main menubar, the Align panel is displayed. Choose the Align to stage checkbox and choose the Align horizontal center and the align vertical center buttons, refer Figure below.



  9. Next, choose frame 1 of the actions layer and press F9 to open the Actions panel. The actions panel displays the required code for our pre loader.

  10. Next, add index.swf at the place of the circled area, refer Figure.



    The marked area indicates the path of the file or the content to be downloaded.

  11. Next save this preloader file at the same location as that of the index.fla file with name as pre_loader.

  12. Press CNTRL +ENTER to view the published file. Incase the index.swf file is not loading, please check if the main folder where the preloader file is saved is having the index.swf file or not.

  13. Next, choose View > Download Settings > DSL from the menubar. Choose View > Simulate Download to view the downloading at runtime. The pre loader will show the visual feedback of the download, refer Figure.



    You can change the shape and the thickess of the preloader bar as per your wish. You can also change the color of the pre loader bar to match with your webpage. In our case red color was going on with our web design color, so we sticked to this color itself.

Proceed to Step 6 >> Publishing Flash Content


Now building a website is as easy as 1-2-3!

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

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 62077
Type: OpenCart
Price: $89

Flash Photo Galleries