Creating a Great Flash Preloader

Creating a Great Flash Preloader

Š2010 mkelly/robert morris university

first job: find or create a terrific image (keep its file size small!!!!):

I altered this one I found on the desktop of the faculty computer at Lake County: changed the numbers, the cropping and the color of the thermometer liquid. I also added a glow to the liquid and placed it in its own layer so it can be imported into Flash that way, converted to a symbol and animated growing from 0 to 100 (we'll get to that). you can find inspiration here for creating your own preloader in a number of places: http://www.prettyloaded.com/ http://flashden.net/category/preloaders http://www.smashingmagazine.com/2008/03/13/showcase-of-creative-flashpreloaders/ you can even download preloader flas to see how they were made: http://www.flashkit.com/movies/Scripting/Preloaders/index.php

there are also sites with tutorials. I'll let you google those if this one isn't sufficient. I'm going to presume that it will be because it's just that good! import your psd layers into Flash to the stage in the first frame of a new movie or to an added blank keyframe in the first frame of your existing movie:

selected both layers, converted them to a movieclip (F8), and instance named the clip preloader. changed the background color of the movie to match its background by sampling it. also changed the clip's blend mode to darken to ensure a good blend with the movie bg. of course, you could instead put a rectangle filled with this color on a layer below if you need your movie's bg color to be something else.

I double-clicked to get into the new clip's timeline:

converted the liquid into a movieclip, cut and pasted it in place on its own new layer. moved its pivot point to the bottom so it would grow from there.

created an actions layer so I could tell it to stop in frame 1. f5'd frames in frame 100 for the thermometer and the actions layer. f6'd the liquid layer to be able to motion tween animate it later. I chose 100 frames for a really good reason as you'll see next.

f6'd frame 20 on the liquid layer. 'd it up to the 20 spot on the thermometer – originally had a celsius scale that just wouldn't do. did the same thing for 40, 60, etc., until I made it to 100. took a "Nurse Jackie" On Demand break for a half hour (but saved everything first, of course) ...best show ever! anyway, motion tweened all of it and got back to scene 1.

added a dynamic text box near the bottom of the thermometer, gave the text a contrasting color, instance named the box counter. I would have embedded the numbers had I chosen a more exotic font.

added an actions layer with a stop(); function on the first line. the rest looks like this (you can just copy and paste from here if you'd like): //Import the required assets import flash.display.*; //Stop the playhead while loading occurs. this.stop(); //Create a listener to call the loading function as the movie loads. this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, PL_LOADING); /*This is the main function, basically it grabs the total and loaded bytes, calculates a percentage, and displays it by playing the animation and adjusting the textfield display. If your animation/textbox instancenames are NOT preloader/ counter, you'll need to adjust this code to match your instance names.*/ function PL_LOADING(event:ProgressEvent):void { var pcent:Number=event.bytesLoaded/event.bytesTotal*100; //Play the animation (movieclip). int means integer and rounds off to a whole number and matches the frame number to the percent loaded down to single digits. this.preloader.gotoAndStop(int(pcent)); //Display the % loaded in textfield. counter.text=int(pcent)+"%"; /*If the movie is fully loaded, kick to the next frame on the main timeline.

You may wish to change the gotoAndPlay(2) to a gotoAndStop(2).*/ if(pcent==100){ this.gotoAndPlay(2); } }

if you're just doing a test run, create a blank frame 2 for your actions and image layers.

put a stop(); action in the appropriate layer, and import a large image into the other one for this test. hit ⌘ Return to test your movie. unless your image (or original movie contents) is really, really huge, you probably won't get to see your beautiful preloader since the movie's being generated not downloaded so hit ⌘ Return.

in debugger mode, choose

/

/

I chose 56K because my image was fairly large.

then choose:

, etc. happy preloading...