Producing an Advanced Flash Website with ActionScript 3: The Preloader
Made by Peter Singh-Vigilante on Mar 7th, 2012 in Articles
In this series of posts, on going to be taking you throughthe steps I took to producing an advanced AES three website using Flash ProfessionalCS5. I will not be creating a pretty website, so no design tips here. Instead Iwill be producing a flash template using pure code; after which, you can createyour own design assets and apply it to this Flash template to create manywonderfully beautiful sites. I also assume that you have a basic understandingof Flash, and have used ActionScript before. This first post will focus on justproducing the pre-loader for this site. Check back in the coming days forfuture steps.
1 Start a new Flash document, make sure it isan ActionScript 3 document, and set the stage size to 1000 x 600 pixels.
2 Before we go adding anything tour stage,there’s something we need to set in our ActionScript settings.
3 Go to File> ActionScript Settings.
a. Where it says “Export classes in frame:” change thevalue to frame “2”.
I’ve found flash to be a bitfinicky and loading sites that have multiple frames, sometimes the programsskips the first frame. To avoid this “glitch” we export all of our importantassets to frame 2 instead.
4 Back on the stage, renamed the first layeron the stage to “Preloader”.
Add another layer above that and just name it “AS”.
Add another layer above that and just name it “AS”.
5 We’re going to first create our pre-loaderfor the site. Go to Insert > NewSymbol.
a. In the new symbol dialog box, name the symbol “Preloader”.
Set its type to Movie Clip.
Set its type to Movie Clip.
b. And check on “Export for ActionScript” (the Class nameshould also be “Preloader”).
also check on “export in frame 2”.
Click okay.
also check on “export in frame 2”.
Click okay.
6 Make the following layers in your timelinepanel in the same order:
c. Percent counter
d. Progress bar
e. Progress area
f. Background
7 On the Percentcounter layer, add a text field set to “Classic Text” and “Dynamic Text”.
Give it an instance name of percentageText.
Type in it “100%” and embed the font ( numerals and punctuation should be allyou need).
Give it an instance name of percentageText.
Type in it “100%” and embed the font ( numerals and punctuation should be allyou need).
8 On the Progressbar layer, create a rectangle, about 200 pixels wide and 14 pixels high.
Converted into a MovieClip and give it an instance name of progressBar.
this will be the object that will fill up based on how much of the site isloaded.
Converted into a MovieClip and give it an instance name of progressBar.
this will be the object that will fill up based on how much of the site isloaded.
9 On the Progressarea layer, create a rectangle, just like the one you just created for theprogress bar, but with a more muted color. This will act as just the area inwhich the progress bar will fill up.
Convert this into a movie clip and give it to an instance name of progressArea.
Convert this into a movie clip and give it to an instance name of progressArea.
10 Finally, on the background layer, just put a rectangle around everything. Thislayer is purely for looks and has no importance in the code.
We can now add this to the stage and begin creating our ActionScriptfor it. All the ActionScript for this site (Aside from stop actions) will bedone in external ActionScript files. This allows for easy access to specificobjects code, as we can organize them better in our folder structure. This alsoallows for scalability, I can easily take this pre-loader and its code andapply it to any of my future websites.
11 Addthe Preloader symbol that we justcreated to the stage by dragging it out from the library, on to our Preloaderlayer.
give it an instance name of preloader.
give it an instance name of preloader.
12 In the library, right-click the Preloader symbol and go Edit Class.
13 You’llbe taken to a new ActionScript file, immediately save it to your root folderfor this website project as Preloader( it is extremely important that the file name is identical to the object’sname and its class name).
In the code write the following:
package {
importflash.display.MovieClip;
importflash.display.LoaderInfo;
importflash.events.Event;
importflash.events.ProgressEvent;
importflash.text.TextField;
publicclass Preloader extends MovieClip {
publicfunction Preloader() {
//constructor code
}
publicfunction setLoaderInfo(ldrInf:LoaderInfo):void {
ldrInf.addEventListener(ProgressEvent.PROGRESS,onProgress);
ldrInf.addEventListener(Event.COMPLETE,onComplete);
}
privatefunction onProgress(e:ProgressEvent):void {
varpercent:int = Math.round(e.bytesLoaded / e.bytesTotal * 100);
progressBar.width= percent / 100 * progressArea.width;
percentageText.text= percent + “%”;
}
privatefunction onComplete(e:Event):void {
dispatchEvent(e);
}
}
}
The first function we created “setLoaderInfo(ldrInf:LoaderInfo)” it’s a nice reusablefunction to attach the proper of the listeners to our loader object ( whateverpages, images, or other assets we want to load into the site and have use ourpre-loader). The (ldrInf:LoaderInfo) partin the brackets, defines a parameter that this function will need in order tooperate. In this case it is waiting for us to define what object we are loadingin our page. Once we set this parameter, the function will add a progress eventand complete event listeners to the object we are loading in.
ldrInf.addEventListener(ProgressEvent.PROGRESS,onProgress);
ldrInf.addEventListener(Event.COMPLETE,onComplete);
once we have the listeners attached, we need to write thefunctions that those listeners will run ( also known as a method call). For theonProgress function, we first create a variable to store our percent. To calculateour percent, we take the number of bytes loaded and divided by the total sizeof our object, then we multiply that by 100 to give us a proper percentage ofhow much our object has been loaded into our site.
var percent:int =Math.round(e.bytesLoaded / e.bytesTotal * 100);
We then take that number and use it to control ourpre-loading objects. Such as making the width of our progressBar movie clip, based on the percent loaded. We take thepercent loaded, divided by 100, but then multiply it by the total width of our progressArea movie clip ( told you thatone was needed)
progressBar.width =percent / 100 * progressArea.width;
we then take the literal number is generated by the percentvariable, and place it in the text field be added to the stage. Just for addedeffect, we can add the percent symbol to the end of it ourselves.
percentageText.text =percent + “%”;
finally we get to our onComplete event. All this event doesis dispatches our object that we’ve just loaded into the event flow of ourwebsite. This will allow us to take the object loaded, and place it on ourstage at a later point.
private function onComplete(e:Event):void {
dispatchEvent(e);
}
Unfortunately that’s all the time I have today. By itselfyou will not see this do anything quite as yet, next day I will be continuingthis pre-loader by creating our pre-loader catcher file, which will take theobject we are loading and animating it onto the stage.
RSS Feed
Email Updates
Pingback: Producing an Advanced Flash Website with ActionScript 3: The Catcher | Digital AG Studios