Page 1 of 1

Creating a Flash Preloader Rate Topic: -----

#1 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1647
  • View blog
  • Posts: 8,510
  • Joined: 07-September 06

Post icon  Posted 05 June 2008 - 10:51 PM

Everyone loves to have their flash apps and sites out there for the world to see, however nobody likes to have to wait to see the awesome content that you have in store for them. With a flash preloaded in your flash sites it may not load any faster, but at least they will know about how much longer they will have to wait until it has loaded.

For those of you who want, I have attached a pdf of this tutorial, along with a working demo of the application we make in this demo.

Today we will be creating a simple flash preloaded that can be used over and over throughout your various flash applications. Attached File  flash_preloader_tutorial_final.pdf (33.74K)
Number of downloads: 1275

Step 1 - Open flash and get ready for some work. (Create a new document that is at standard size, 550 x 400 px)
Step 2 - Select the first frame of the un-named layer and name it “loading”
Step 3 - Create a new key frame after the “loading” frame and name it “start”

Now that the basic setup is out of the way you get to make a movie clip or two. Select the “loading” frame.

Step 4 - Draw a rectangle that is 10px wide and 20px tall
Step 5 - Click on the fill of the rectangle and change its height to 1px then press F8 (to convert it to a symbol) name this symbol “progress_bar”
Step 6 - Double click on the rectangle outline (border) and set it’s height to 400px, then convert it to a movie clip (F8), name it “bar_outline”
Step 7 - Select and move both movie clips to (0, 420) then select them both at the same time and convert them to a movie clip (F8) called “preloaded”
Step 8 - Before going any further deselect everything and press F9 to open the action script pane, inside the pane place the code:

Step 9 - Double click on the “preloaded” movie clip to enter its edit mode.
Step 10 - Make a new layer called “actions” and lock it
Step 11 - Select the unnamed layer and make sure that everything is placed correctly.
Step 12 - Select the “progress_bar” movie clip and give it the instance name of “pb”
Step 13 - Return to the “actions” layer and select the action script pane (F9)
Step 14 - Insert the following code:
onEnterFrame = function(){
	if (getBytesLoaded()>4 && getBytesLoaded() == getBytesTotal() && pct == 1) {
	else {
		pct = Math.round(getBytesLoaded()/getBytesTotal());
		this.pb._height = (pct)*400;

What the above code does it tells the movie clip, when it neters a frame make a check on the amount of the swf that is loaded and see if it is done loading, if it isn’t go ahead and update the progress bar with the percent of the document that has been loaded.

Step 15 - Add whatever content you want into the frames on and after the _root frame named “start”

Congrats! You have completed making your first pre-loader in flash. Go have fun with you new knowledge!

NOTE - Don't be upset if you can't tell that the preloader is working on your computer.As the files are all local there isn't much time needed to load the movie and you maynot even know that your app has done anything. Preloaders come in handy when youhave a file on the web that is streaming to clients' computers around the world.

Is This A Good Question/Topic? 1
  • +

Replies To: Creating a Flash Preloader

#2 Glorfindal   User is offline

  • Java Enthusiast
  • member icon

Reputation: 37
  • View blog
  • Posts: 607
  • Joined: 31-December 08

Posted 29 January 2011 - 08:18 AM

Thanks for this tutorial. This will come in real handy for flash document I have made that is 3000+ frames. Right now mine just says Loading, but doesn't any loading bar.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1