Template Categories

templates categories Automobiles
templates categories Business
templates categories CSS Templates
templates categories E-Commerce
templates categories Education
templates categories Fashion
templates categories Greeting Cards
templates categories Hotels
templates categories Jewelry
templates categories kids
templates categories Models
templates categories Music - Films
templates categories Night Club
templates categories Real Estate
templates categories Restaurant
templates categories Software
templates categories Sports
templates categories Travel
templates categories Web-design
templates categories Wedding

Tutorial Categories

tutorial categories AJAX
tutorial categories CSS
tutorial categories Dreamweaver
tutorial categories Flash
tutorial categories FTP - File Transfer
tutorial categories HTML Emails
tutorial categories Javascript
tutorial categories Microsoft Excel
tutorial categories Microsoft Windows
tutorial categories Microsoft Word
tutorial categories MySql
tutorial categories Photoshop
tutorial categories Php
tutorial categories Windows Movie Maker
tutorial categories Xhtml / Html
Creating advanced preloader - Flash Tutorial

BELOW IS THE EXAMPLE OF WHAT WE ARE GOING TO CREATE.

Start with a new document.
Name layer 1 as preloader-movie-clip.
Insert a new symbol by clicking Insert menu and selecting the new symbol option. Name this symbol as loader and choose movie clip as the option. Once inside the loader movie clip rename layer 1 as display and insert a blank dynamic text
box and in the var field write display. On frame 120 press F6 to insert keyframe.

Create a new layer above display layer and name it fill. Choose the rectangle tool and create a rectangle without a border. Choose any dimensions and colour. Move this rectangle to the left. Insert a keyframe at frame 120 by pressing F6 key. Now move this rectangle to the center. Create motion tween between frame 1 and frame 120.

Create a new layer above the fill layer and name it bar. Once again create a rectangle without a border and move it to center. Fill the rectangle with any colour of your choice but keep the dimensions similar to that of fill rectangle. Right click on the bar layer and choose mask.

Create a new layer once again and name it border. Create a border of black colour. Dimensions as per the the rectangles created above.

Finally, create one last layer above the border layer and name it message. Use static text option and write - loading ....

Come out of the loader movie clip and back to scene 1.

Drag the loader movie clip on to the stage form the library. Select this movie clip and paste the following code in the action panel. To open action panel press F9.

onClipEvent (load)
{
total = _root.getBytesTotal();
}
onClipEvent (enterFrame)
{
loaded = _root.getBytesLoaded();
percent = int(loaded / total * 100);
display = percent + "%";
gotoAndStop(percent);
if (loaded == total)
{
_root.gotoAndPlay(2);
} // end if
}

On frame 2 on the same layer add the the following actionscript
stop();

Create a new layer above this one and on frame 2 start building your actual content OR for this purpose simply import a heavy image. Press ctrl + enter to see the preloader in action. You can simulate the download by going to the view menu and clicking the simulate download option.

advanced flash preloader


advanced flash preloader

Test your movie.

Hope you have enjoyed this flash tutorial on creating bar type preloader with actionscript.