AddThis Social Bookmark Button
 Creating a preloader in Flash (Flash MX 2004, Flash 8)

download source files
download source files

Preloaders are very popular and pretty easy to create in Flash. For a preloader to behave smoothly and accurately it is important to take some parameters into accounts, we will analyze those issues here too. I will show two methods that can be used to retrieve the amount of data loaded, the first one will use the onEnterFrame event and the second method will use SetInterval. Let's jump into the action...

Tutorial (part 1)

1. create a new FLA

2. Create 3 layers, called, from top to bottom, actionscript, preloader and assets (fig1)

Layers fig1

3. We are now going to create the preloader itself. select the first frame of the preloader layer and on the stage draw a 350x15 rectangle with a fill color value of #CCCCCC and a stroke color with a value of #666666 (colors are obviously a matter of taste, you don't need to stick to it).

select your rectangle (fill and stroke) and press F8 convert it as a Movie clip and name it preloaderMC. (fig2)

convert to movie clip fig2


Double click on your movie clip (or right click on it and from the context menu choose Edit in Place.
We are now going to create a mask that will move over the loading, as the data is loaded, and show the progress to the user.

In our
preloaderMC Movie clip create, from top to bottom, a layer called stroke, then mask and call the final bottom layer where the rectangle sits graphic (fig3).

layers
fig3

We are now going to cut the stroke from the rectangle and paste it on the top layer called
stroke. Double click on the stroke to select it, then from the right context menu (or from the main menu) select Cut. select the first frame of the top layer called stroke, right click on it and from the context menu select Paste in Place.

Select the fill color of the rectangle, then from the right context menu (or from the main menu) select Copy (not Cut this time). Select the first frame of the layer called mask, right click on it and from the context menu select Paste in Place. You can now lock the layer stroke and graphic. (fig4)

layersfig4

Select the rectangle we just copied and pasted on the
mask layer and change its color to a blue of value #0000FF (we just change the color to differentiate the mask from the graphic of the preloader that sits on the graphic layer). Press F8 and convert this new rectangle to a movie clip and call it maskMC (fig5). Select the Instance of maskMC on the stage and in the property panel give it the Instance name mask (fig6).

convert to movie clip
fig5 instance name fig6


Continue to next page...
AddThis Social Bookmark Button
If you think this page is providing useful information, don't hesitate to leave a comment.
flashvalley
 
Copyright ©2006-2008 flashvalley.com - All rights reserved