How to Create an Animated Stripe Bar Preloader

Oct 21, 2009 17 Comments by j000

Hi everyone.

This is j000 with a new flash preloader tutorial. In previous tutorials we showed you how to create an mp3 player from scratch and we also showed you how to create a simple circular preloader. Preloaders are not complete until we show you how to create a bar preloader. In this tutorial we are going to demonstrate the steps required to create a cool animated stripe bar preloader that you see in some of flash websites.

Let’s get started.

1. Creating the Stripes

Open your flash software, I’ll be using CS4, yest I finally made the transition . Create a new AS3 file and using your rectangular tool create shapes similar to the following:

You can call it a Zebra bar or whatever name you want but just keep it simple. After you have finished convert the shape to a movie clip symbol, you may as well convert it to a graph symbol. I named mine lines (how original)

2. Creating the Animation

Now create a new empty movie clip symbol name it barAnim and grab the lines symbol and insert it in frame one make sure it is properly aligned in the middle of the stage. Now create a new key frame on frame 12 by hitting F6. Go back to frame one and nudge the bar to the left about 20 pixles.

3. Setting-up the Preloader

Now we’ll bring everything we create to a new empty movie clip and create our preloader animation. So go ahead and hit Ctrl+F8 this will prompt you to create a new movie clip. While at it, name the first layer barAnim. Then create another layer and call it mask. Additionally, create the following layers: border, hilight, text, and actions.

In barAnim, insert barAnim instance (created in step 2) and align it in the middle of the stage. Next in the border layer, create a rectangle with a width of 100 pixels and height of 8 pixels. Align it in the middle of the stage. Cut the filling from it and paste it in place in the mask layer. We will use it as the mask that will reveal the wanted part of the bar animation. Keep the border in the border layer.

After that we are going to create a hilight. Copy the mask shape and paste in place in the hilight layer and using the transform tool reduce the height to half or so. Now use the color window with the following settings to create a hilight like effect:

Go back to mask layer and convert the rectangular shape to movie clip symbol and call the instance maskAnim. It is better to edit the shape and change it’s color. I made mine red that’s how I distinguish masks from other elements in my movie. Back on the mask layer, change the size of the mask to 1 pixel in width. We are going to programatically increase its size using actionscript.

Next add a text box for our percentage output. Place the text underneath the animated bar and call the the instance percentage and make it dynamic. These are my setting for the text:

You should now have something similar to this:

Notice the red mask, text border and highlight? If you don’t have that I suggest you go back and redo step 3 again.

4. Adding ActionScript:

Add the following code to you actions layer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var fileURL:String = "image.jpg";
var urlRequest:URLRequest = new URLRequest(fileURL);
var loader:Loader = new Loader();

loader.load(urlRequest);

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayFile);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, displayProgress);

function displayFile(e:Event):void{
this.x = -200;
stage.addChild(loader);
}

function displayProgress(e:ProgressEvent):void{
var percent:Number = Math.round((e.bytesLoaded / e.bytesTotal) * 100);
maskAnim.width = percent;
percentage.text = percent + " %";
}

5. Testing the Movie

When done go to the main time line and in the first scene, name the first layer preloader. Grab an instance of preloaderAnim to the stage. Center it and make sure you have an image called image.jpg saved in the same folder as your movie. Test the movie by hitting Ctrl+Enter.

In the testing mode, go to View + Download Setting + 56K (4.7 KB/s). Then go again to View+ Simulate Download (Ctrl+Enter). See below:

Now you should be able to see your preloader animating the stripes.

I hope you have enjoyed this tutorial. Please do the necessary to help us grow by commenting and promoting our posts. Thanks you.

You can follow me on twitter here

Flash-tuts, Tutorials

MAD says:

October 21, 2009 at 9:00 pm

Nice one.

j000 says:

October 21, 2009 at 9:09 pm

Thanks MAD for the support and encouragement

Graphic Design Links and Tutorials says:

October 24, 2009 at 10:21 pm

Flash Journey – How to Create an Animated Stripe Bar Preloader…

In this tutorial we are going to demonstrate the steps required to create a cool animated stripe bar preloader that you see in some of flash websites….

joyoge.com says:

October 24, 2009 at 10:34 pm

How to Create an Animated Stripe Bar Preloader…

zabox.net says:

October 24, 2009 at 11:36 pm

How to Create an Animated Stripe Bar Preloader | Web Design Updates says:

October 25, 2009 at 1:45 am

[...] How to Create an Animated Stripe Bar Preloader [...]

Stuart says:

October 25, 2009 at 2:30 am

Nice tutorial thanks for taking the time to write it, will give it a go when i get a few mins spare

j000 says:
October 25, 2009 at 10:38 am

You are welcome. Glad you liked it

30+ Stunning Community Links for Designers and Developers | Programming Blog says:

October 25, 2009 at 9:19 pm

clippingimages says:

October 27, 2009 at 5:55 am

WoW, Awesome Flash tutorial . Thanks for sharing this nice tutorial post.

DIY Makeup says:

February 5, 2010 at 2:51 am

Hello darling, sweet website! I genuinely like this post.. I was curious about this for a long time now. This cleared a lot up for me! Do you have a rss feed that I can add?

Vergie Nitta says:

February 21, 2010 at 6:59 pm

I guess I really don’t have the time.

Rose says:

March 11, 2010 at 6:57 am

Very nice tutorial. That’s a lovely little preloader

Marcus says:

July 21, 2010 at 11:30 pm

Hey man!
Tanks for the tutorial, itÂ´s cool.
I just have a problem, when i test the movie i got an error, “Symbol ‘load’, Layer ‘Actions’, Frame 1, Line 17 1120: Access of undefined property maskAnim.”
Did u know what is about?
Tanks, keep the good job!

hugs from brazil.