A Flash Developer Resource Site
|
Internet Commerce
Developer ChannelFlashKit.com
JavaScript.com JavaScriptSource Developer Jobs ScriptSearch StreamingMediaWorld Web Developer's Journal Web Developer's Virtual Library WebDeveloper.com Webreference Web Hosts XMLfiles.com
internet.com
|
  Tutorials HomeWhat's NewTop RatedSubmitmyTutesRandom!
Search Tutorials
 Tutorials » Actionscripting
II - Entering Code8. Now we will get into the code portion of the tutorial so we can make the loader bar fully operational, not unlike the Death Star. I always like to initialize everything first, so in the first frame of your actions layer insert the following code: loadpercent = "0%"; loadBytes = "0 of " + Math.round((_root.getBytesTotal() / 1024) * 1000) / 1000 + " Kb"; The loadBytes line may wrap around in your browser, however it
should be entered as one line in Flash.
This just puts initial values in our text fields and gives us a chance to line things up and make sure we set up the fields properly. The (_root.getBytesTotal() / 1024) uses Flash's built in getBytesTotal function and divides it by 1024 to give us kilobytes instead of bytes. I prefer Kb over bytes for my loaders. The Math.round method is just being used to round our result to 3 decimal places so it's easier to read. 9. To update the text fields properly during the loading of our animation we need to make another keyframe in the actions layer by selecting frame 2 and hitting F6. Then select that frame and insert this code: loadPercent = (Math.floor (_root.getBytesLoaded() / _root.getBytesTotal() * 100) + "%"); loadBytes = (Math.round((_root.getBytesLoaded() / 1024) * 1000) / 1000 + " Kb of " + Math.round((_root.getBytesTotal() / 1024) * 1000) / 1000 + " Kb total Loaded."); The loadBytes line may wrap around in your browser, however it
should be entered as one line in Flash.
It's much easier than it may seem. We take _root.getBytesLoaded and divide it by the total number of bytes in our movie [getBytesTotal], and we get a number between 0 and 1. When you multiply that by 100 you get the percent of your movie loaded. The Math.floor method is used to round it to an integer to keep the numbers clean. For loadBytes, you just take the bytes loaded and total bytes and put them in between some formatted text so it looks better. The Math.round method is being used here as well to round the numbers to 3 decimal places so they don't get out of hand. And again we divide by 1024 to get Kb instead of bytes. 10. OK, double click on the LoadBarFill instance on the stage so that it's in edit mode. Make a new layer in LoadBarFill's timeline for the actions you will be adding. In frame 1 enter the following: this._xscale = ((_root.getBytesLoaded() / _root.getBytesTotal()) * 100); Very straightforward, we simply scale the fill with the loaded amount to produce the loading bar effect we are all familiar with. Also, make another keyframe on frame 2 of LoadBarFill's timeline and enter: gotoAndPlay(1);  LoadBarFill's layer setup. This creates a loop that will insure the bar is updated continuously as our movie loads. Now go back to the root of your movie and add another keyframe [F6] to the actions layer. In the newly created frame 3 enter the following code: gotoAndPlay(2); This will begin the looping process that will continue until our movie is loaded. After the text fields update in frame 2 we come here, only to return to frame 2 and update the text fields again. Now you see that we need a special conditional statement to end this loop after our movie has loaded completely. Return to frame 2 to enter this after our existing code:
if (_root.getBytesLoaded() == _root.getBytesTotal()){
loadPercent = "100%";
loadBytes = (Math.round((_root.getBytesLoaded() / 1024) * 1000)
/ 1000 + " Kb of " + Math.round((_root.getBytesTotal() / 1024) * 1000) / 1000
+ " Kb total Loaded.");
gotoAndPlay("Button");
}
The loadBytes line may wrap around in your browser, however it
should be entered as one line in Flash.
This is a cleanup conditional that first checks to see if our movie has finished loading. If it has, we finalize the text field display [you may not need to do this if your user is immediately sent to another frame that doesn't contain them], and go to the frame label "Button". We haven't created this label yet, so let's do it now. Create one last keyframe in the actions layer [this will be the fourth] and give it the frame label "Button" using the Frame panel. From this point we just need to tie up a few loose ends. First, in the "Button" frame, enter this action on the actions layer: stop(); This just ensures that our movie stops and waits for the user to click our continue button. The continue button is an optional step I decided to take so that once my movie loads my user can click to start it [this also ensures focus on your movie for keyboard input]. If you want a continue button, Put it in the "Button" frame of your continue layer. It will appear after your movie has loaded. Just create a simple release function that takes your movie where you want it to go when the user clicks your button.  A sample continue button. Lastly, you'll want to make keyframes for all of your layers at the "Button" frame so that everything is visible for the duration of your preloader. Just select the fourth frame in each layer and hit F6 to do so.  The final layer setup. That's it, just link your continue button with whatever content you've loaded and you're finished. Be sure to grab the sample .fla file so you can double check if you run into trouble. It will be hard to initially see that your bar is moving because the .swf output's file size is so small. Just use View > Show Streaming to see the bar grow as it would when streamed from a browser. Finally, below you see Programming Art's finished Flash 5 preloader.
| |||||||||||||||||||||||||
Creating an Advanced Preloader in Flash