Create a revealing silhouette preloader in flash
September 1st, 2009 in Flash | 6 CommentsIn this AS3.0 tutorial, we’re going to create a simple but attractive flash preloader that reveals a silhouette according to the progress of the file’s loading.
(As the file that we’ve put to load is light, you might see the silhouette preloader furtively).
1. Create a new flash file (AS3) and save it as silhouette_preloader.fla.
2. Read our previous tutorial on how to create a basic flash preloader.
3. In your flash file, rename ‘layer 1′ to ‘silhouette’ and import a silhouette image. Convert it to a movie clip and give it an instance name of ‘sihouette_mc’.
4. Create a new layer, beneath the ‘silhouette’ layer, named ‘mask’. With the rectangle tool selected, draw a rectangle that cover entirely the silhouette. Convert the rectangle to a movie clip with registration point at the bottom center as we want to reaveal the silhouette from bottom to top. Give it an instance name of ‘maskRect_mc’.
5. Create an ‘actions’ layer and with its first frame selected open the actions panel. The code will be quite the same as our basic flash preloader. What differs is that we need to mask the silhouette with the rectangle and the progressHandler function will change the scaleY property of the rectangle mask.
6. Here’s the final code, test the movie to see it in action.
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
loader.load(new URLRequest("content.swf"));
silhouette_mc.mask = rectMask_mc;
rectMask_mc.scaleY = 0;
function progressHandler(event:ProgressEvent):void{
var ratio:Number = event.bytesLoaded / event.bytesTotal;
var scaleMask : Number = ratio;
rectMask_mc.scaleY= scaleMask;
}
function completeHandler(event:Event):void{
removeChild(silhouette_mc);
removeChild(rectMask_mc);
silhouette_mc = null;
rectMask_mc = null;
addChild(loader);
}
Sep 1st, 2009
Very nice preloader
Thx for the tut
Sep 2nd, 2009
Cool man !
Feb 2nd, 2010
hm… i can’t make it work, dunno why ;(
Mar 26th, 2010
This is a nice tutorial and much appreciated, but I would like to point out one thing. During step four you say to give the mask rectangle an instance name of ‘maskRect_mc’, but then your code has it as ‘rectMask_mc’. Luckily I caught this during the code stage, rather than debug stage, but I can see it causing problems with other potential visitors. Thanks once again though!
May 18th, 2010
Just found this site and I must say it is amazing. I am a student and I use flash all the time but have no knowledge of AS3. This site basically gives me the tools to do what I want and so far all instructions work perfect as well as having the actual file on hand. Great Job.
(working preloader and slide show all from tutorials on this site at http://joshstollings.com/slide_test/index.html)
May 18th, 2010
take off that parenthesis sign off the end of the link to go to it..
http://joshstollings.com/slide_test/index.html