Posted Apr 3, '13 at 12:46pm
I have seen quite a few different styles of adding a pre-loader to your game, this is one that works for me.
This tut is adding a pre-loader using AS3 download free trial here
Lets start off by creating a new fla file (or you can use an existing one)
save as whatever you want I chose preloader
then go to file>ActionScript Settings
this next step is very important EXPORT CLASSES IN FRAME 2 then click edit class definition you can choose whatever you want as document class name I chose main
If you see this message its fine, its just letting you know that there is no class found and one will automatically be created which is not relevant as we will be creating the class. Just click ok and proceed
click save and make sure you save it with the same name as class name or else it wont work.
All that we have done is created an fla file and class file and linked them together but the class is only loaded in the second frame so lets go to the timeline and insert a new blank keyframe (if you dont see your timeline press Ctrl+Alt+T to show it)
I like to start with the visual first so lets click on the first frame to make sure it is selected then on the stage draw a rectangular box which will represent the download bar
choose any color you want I chose black outline with dark grey fill, now click on the fill and separate it from the outline.
Now what we want to do is convert these to symbols, while it is not necessary I like to do it anyways so lets start with the outline. Use the selection tool and highlight all 4 sides of the outline RIGHT CLICK>Convert to Symbol... Whatever you want as the name and select center registration
now for the relevant part highlight the bar convert to symbol and choose left registration
now select the bar symbol that you just created and in the properties panel set the to loadBar
at this point you will notice that in the library panel the 2 symbols now appear, you can then proceed to put the bar back inside the outline
the loadbar is complete at this point and now we want to add a numerical display of the progress so click on your text tool add a box and set the instance name as loadTxt
now the visual display is done so lets save our fla file and navigate to our class file
if you already tried to test scene you will see the bar flickering and what is happening is the video plays the frame then starts over essentially switching back n forth between frames so lets add a code to make it stay on the first frame
what we want to do is create a progress event so we need to import it. I like to just import everything by changing this line here
then importing all events like so
your code should look like this
nothing is happening here so lets add an event listener one for loading and another for when loading is complete. Add these lines under stop();
trace( loaderInfo.bytesLoaded, loaderInfo.bytesTotal );
run the code and you will see data in the output panel but it is confusing and we want perfectly rounded numbers to wrap our heads around so lets use the math function and multiply bytes loaded by 100 then divide by the total amount and add a display of what is happening
trace(Math.floor(100*loaderInfo.bytesLoaded/loaderInfo.bytesTotal)+ "% Loaded");
save your class file then run and you will see it is more uniform and the display shows 100% loaded, the file size is so small you probably wont even see the loader but we can emulate a download speed which ill get into in a moment
For now lets add a trace for when the download is complete remove the event listeners as they are no longer needed and create a startup event
trace("DONE!"); loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loading);
make the startup event out of the main constructor, and tell it to go to frame 2 then stopping, dont forget to remove the listener, your code should look like this
If you try running it again you will see the bar for a second then blank screen I went ahead and added a picture to mine to show something when complete
now to simulate the download. test your movie then click on view>download settings and select the top one to emulate a download speed from 1980's
once selected press Ctrl+enter to simulate the download. voila you see the bar and parameters in the output panel but it is not doing anything... lets go back to the code constructor and in the progress function tell the bar to scale itself equally to the amount loaded so add this line
loadBar.scaleX = loaderInfo.bytesLoaded/loaderInfo.bytesTotal;
might as well add the numerical display while were here
loadTxt.text = Math.floor(100*loaderInfo.bytesLoaded/loaderInfo.bytesTotal)+ "% Loaded";
save run the simulated download and now you should see it working(*NOTE: if you have nothing there it will simply show as 100% so I have added an img to give it something to load)
If it is blank for a few seconds that is fine it is the time taken to load the loadBar and text which is as minimal as possible then the loader shows the time left for loading the rest of the file
Altho not needed until the game is large enough, it needs to be added first before anything else is loaded, so if you add the preloader first it will save the time needed to add it in later and reconstruct your code which also isnt very hard but it is nice to be prepared in advance
Good Luck and Happy Game Making
Posted Jun 2, '13 at 12:41pm
I have re-written the code and created a preloader class
All you need is one of these lines
preloader.addSimple(stage); //SIMPLE NO MC
stage.addEventListener("done", startUp); //EVENT DISPATCHER
Copyright 2005-2014 Armor Games. All Rights Reserved.
We strive to deliver the best online games experience on the internet, with thousands of free online games for kids, access to free mmorpg games, free online games for girls, online rpg games, fun online flash games, and more. We offer free flash games in many different genres: online shooting games, online puzzle games, online war games, free online car games, free online hidden object games and dozens more. This is the best place on the web to play online games for free... play on Armor Games! No matter what game style you prefer, we've got it here.
As one of the biggest free gaming websites, we offer thousands of new game reviews and ratings, making it easy for gamers to find new games every day. We offer only the best games from developers Jmtb02, Krin, ConArtist, Joey Betz, Tony Lavell, Louissi, Gameinabottle and of course Armor Games develops some of the best games around.Ready to play online games?
We are dedicated to providing our players the best online gaming experience on the internet! Visit every day to discover new games, achieve high scores, and participate in one of the most active gaming communities.
Have your game played by millions of gamers! Armor Games welcomes game submissions from talented game developers. Not every game makes the cut, but if it does, we'll promote it on Armor Games and give you all the credit and link back to your site. Submit your game here and good luck!