Tutorials

April 7, 2009

Making a Complete Flash Game: Creating & Understanding the Preloader

More articles by »
Written by: Par
Tags: , , , , ,
cg-tn-2

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit

Kicking off the series, we’re going to talk about the first thing you see in every good flash game you’ve played, the preloader.  Without the preloader your audience will likely leave your game after staring at a blank screen for too long. So the feedback given from a preloader that tells the player, “Hey, the game is loading. Be cool wait a second and we’ll be ready to go” is vital.  Now what type of preloader you make is your business… but make sure it gives the user feedback so they know the game is loading and not sitting in limbo.

As a note, this Preloader tutorial can be used for ANY FLASH APPLICATION so even if you’re not making a game this can be very useful.

You are reading Making a Complete Flash Game Read more from this series of articles.

Step 1: Understanding the Problem with Single File Preloaders

Preloaders are not a difficult concept. Seriously, you need to keep up with how much data is loaded and how much data we have to load.  Seems like this whole idea of making a preloader should be cut and dry.  But… it’s not. We have things we need to manage in order to make our preloader work correctly.

Why? Well our goal with this game as mentioned in the last section is to make a game that is single file and that’s our problem.  If we had two files… a swf that does the loading and our game then we could just write the preloader code and be done with it. But all the flash portals that I know want you to submit a one file game and there lies our issue.

So, tired of hearing that a one file preloader is a problem and want to know why it’s a problem? Okay let me explain.

Our first issue deals with our classes linkage setup. Remember this screen?

DISCLAIMER:
If you don’t know what this is… well the concept is going to be way over your head. You need to read AS3 Flash Games for Beginners to get familar with AS3.  This is not a series on familiarizing yourself with Flash, As Gamer has other tutorials to help you with that.

See the third checkbox, “Export in first frame”, that’s our problem. If that’s checked then this class will have to load before anything else in our Flash project will.  So if all our MovieClip’s are set to export in first frame then by the time our preloader starts working our game will already be mostly loaded. Your user will have saw that dreaded blank screen for the majority of your game’s loading time.  So the solution may seem simple right… uncheck “Export in first frame” and problem solved? Sadly, it’s not that easy.

Here’s the new problem. If we don’t export our class in the first frame then we don’t export our class. Which means our class never gets exported and we can never call it from the library and use it.  The conundrum is getting pretty obvious now huh? We either have a preloader that has to wait on everything else to load before it starts working (which defeats the purpose) or we stop everything from loading at the beginning and have to figure out another way to export them.

But there is a solution and this tutorial will explain it. That said, I don’t take credit for it. I first saw the solution for setting up a single file preloader at 8bitrocket.  These guys are geniuses and write some brillant tutorials on flash game development. Click here to read the tutorial that I used to build a flash preloader in as3.

Now, if you wish to follow along on As Gamer to setup the preloader feel free to continue reading as I will discuss the same method I learned from 8bitrocket.  My style of explanation is quite a bit different from theirs so whichever helps you the most, use it :D Plus I’m going to discuss a few more elements that they did not and it’s much easier to discuss the concept as a whole than in part.

Step 2: Making Our Preloader

This is the first game that I will have made the preloader at the beginning of the project. It seems odd because really… what are we loading? At the moment nothing.  But at least once we’ve completed this tutorial we’ll know what to watch out for when developing our game and that it will have a working preloader when it’s finished.

So AsGamer recently released a tutorial on 9-Slice Scaling, if you don’t know what it is then you are going to need to read the tutorial because we’re about to use it. It’s a simple tutorial but it’s important for our preloader that we are about to make.

Alright so open Flash, create a new AS3 Document, set the FPS to 30, and the Dimensions to 550×400.  Good, now we need to build our Preloader screen. Let’s not do anything too complicated. Grab your Rectangle Tool (R) and draw a dark gray box on the stage sized at 550×400. You can resize the box after you draw it in the Properties Window (CTRL+F3). Now right click your gray box and select “Convert to Symbol…”. Make sure the Registration is in the top left, the Type is MovieClip, and the name is Preloader. Now you can delete in the Preloader MovieClip from the stage and select it from the Library to continue editing it.

Using the Rectangle Tool again draw a curved rectangle with curve size of 20 in a slightly lighter gray at a size of approximately 500×50. Then write “GAME IS LOADING” above it. Feel free to use some creativity with all this if you want. My Preloader currently looks like this.

Example of Preloader setup.

Example of Preloader setup.

Now it’s time to use our 9-Slice Scaling knowledge. Create a new MovieClip (CTRL+F8) and make sure you enable 9-Slice Scaling.

Simply create a MovieClip and make sure you enable 9-slice scaling.

Simply create a MovieClip and make sure you enable 9-slice scaling.

Name it PreloaderBar. Now here’s where you need to be careful. We need the registration point to be at the left of our preloader bar. So draw a square (Hold SHIFT and draw to constrain to a square) in a light gray color. Set its x and y to 0. Now your grid will be out of alignment so line it back up. If you want add another white rectangle on top of our gray square to make a highlight.  It could look something like this.

400x magnification of the preloader bar

400x magnification of the preloader bar

Now drop this new MovieClip into your Preloader MovieClip and stretch it out so that it fills your loading bar.  It should look something like this.

Our Preloader Bar using 9-Slice Scaling ready to be programmed.

Our Preloader Bar using 9-Slice Scaling ready to be programmed.

Alright. One more thing left in the setup. Select your Preloader Bar and set its instance name as mcPreloaderBar (We’ll throw mc in front of all our non-coded nested MovieClips for clarity). Okay, and while you are at it… write down the width of your mcPreloaderBar, we’ll come back to it and use it later. Mine’s 474 but yours is likely different, which is completely fine.

Time for code.

Step 3: Writing Our Preloader Class

So I don’t want to write a Preloader class every time I make a game.  Why not write one Preloader class that we can use on any project as long as we maintain the same structure.

Okay so the first thing we need to do is create our Preloader.as file. Our package for this game is going to be “com.asgamer.snipergame” because I have no idea exactly what we want to call this game yet. So in the directory you saved your FLA file just create a com folder, inside it an asgamer folder, and inside it a snipergame folder.  Your structure is now setup, save your Preloader.as in the snipergame folder.  If you don’t understand why we set it up this way, go read the AS3 Flash Games for Beginners series.

Now let’s write some code in this Preloader.as file. Don’t freak out, I’m going to post all the code but it will be fine…  I’ll explain all of it afterwards.

package com.asgamer.snipergame
{
	import flash.display.LoaderInfo;
	import flash.display.MovieClip;
	import flash.events.*;
 
	public class ThePreloader extends MovieClip
	{
 
		private var fullWidth:Number; //the width of our mcPreloaderBar at 100%
		public var ldrInfo:LoaderInfo;
 
		public function ThePreloader(fullWidth:Number = 0, ldrInfo:LoaderInfo = null)
		{
			this.fullWidth = fullWidth;
			this.ldrInfo = ldrInfo;
 
			addEventListener(Event.ENTER_FRAME, checkLoad);
		}
 
		private function checkLoad (e:Event) : void
		{
			if (ldrInfo.bytesLoaded == ldrInfo.bytesTotal && ldrInfo.bytesTotal != 0)
			{
				//loading complete
				dispatchEvent(new Event("loadComplete"));
				phaseOut();
			}
 
			updateLoader(ldrInfo.bytesLoaded / ldrInfo.bytesTotal);
		}
 
		private function updateLoader(num:Number) : void
		{
			//num is a number between 0 and 1
			mcPreloaderBar.width = num * fullWidth;
		}
 
		private function phaseOut() : void
		{
			removeEventListener(Event.ENTER_FRAME, checkLoad);
			phaseComplete();
		}
 
		private function phaseComplete() : void
		{
			dispatchEvent(new Event("preloaderFinished"));
		}
 
	}
 
}

Geez… yeah that’s a lot. Like I said don’t freak out. It’s actually very simple.

  • Okay you know what imports are so skip those.
  • You know what the class is and the whole extends MovieClip stuff.
  • If you don’t know what those are then go read AS3 Flash Games for Beginners before you write me nasty letters.
  • private var fullWidth:Number alright. Remember when we wrote down what our mcPreloaderBar’s width was. Well this variable will end up holding it. This way we know what our Preloader Bar should look like when the loading is at 100%.
  • public var ldrInfo:LoaderInfo; we’ll get this guy passed into us from the Engine class like fullWidth. Our Engine class will already have a loaderInfo that keeps up with how big our file is and how much of it is loaded. We will just pass that loaderInfo into our preloader and set it as ldrInfo and use it.
  • addEventListener(Event.ENTER_FRAME, checkLoad); When we enter the frame… we run the checkLoad function. Simple.
  • if (ldrInfo.bytesLoaded == ldrInfo.bytesTotal && ldrInfo.bytesTotal != 0). Our buddy ldrInfo has two variables we want to make use of, bytesLoaded and bytesTotal. It’s pretty obvious but bytesLoaded tells us how much data is loaded while bytesTotal tells us the filesize of our project. So we check to see if the bytesLoaded is as much as the bytesTotal which if true means the swf is loaded. We also make sure bytesTotal doesn’t equal 0. Because if it does either the ldrInfo hasn’t kicked in yet or we got a problem. Either way, we don’t want to run our game if bytesTotal == 0.
  • if it does return true we call phaseOut and dispatch our loadComplete event.
  • updateLoader(ldrInfo.bytesLoaded / ldrInfo.bytesTotal); We pass into updateLoader a value between 0 and 1. As long as we can’t load more bytes than the total number of bytes then this will always be between 0 and 1. And don’t worry unless something I’ve never seen before happens, between 0 and 1 it will always be.
  • mcPreloaderBar.width = num * fullWidth; Here’s why we need a number between 0 and 1. If we get a 0 then our mcPreloaderBar has a width of 0. If we get a 1 then it has a width equal to fullWidth. Makes for a great preloader bar.
  • private function phaseOut() Okay so right now… this function is doing next to nothing. it removes checkLoad event listener and calls phaseComplete. But let’s assume you want to use Tweener and animate out your preloader. Well you’ll do that right here in this function. Then when everything is complete just call phaseComplete to remove your preloader for good.
  • private function phaseComplete(). Alright, all we do here is dispatch a “preloaderFinished” event. If you set up listeners in the Engine class to catch these events then we can jump to the next phase when the preloader finishes. You’ll see what I mean when we create our Engine class in just a second.

Okay so that’s our preloader class. How are we going to use it?

Step 4: Using our Preloader and Exporting Our Classes for ActionScript

If you remember… earlier in this tutorial I said we need to remove the “Export in first frame” from all our Class linked Library Symbols. Well that’s true for everything but one symbol. We need to export our preloader in the first frame. So right click your Preloader symbol in the library and “Export for Actionscript” make sure to leave “Export in first frame” checked. Then set up the class as “com.asgamer.snipergame.ThePreloader” without the quotes. Now OK it. the reason we export our Preloader is because we want it to export immediately when the swf starts loading. That way it will show up first.

Now our other “Export for ActionScript” Library symbols with classes attached to them need to get exported somehow. We’re not exporting them on the first frame so how will we export them? Well the idea, as presented at 8bitrocket, is to create a MovieClip and name it AssetHolder. In this AssetHolder MovieClip we put all our “Export for ActionScript” symbols simply by dragging them into it. Now what we are going to do with this AssetHolder MovieClip is drop it on Frame 2 of the Main Timeline. Why Frame 2? Because we want to keep frame 1 empty and stop the timeline from playing. Then when everything is loaded, we can play through frame 2 which will have all our “Export for ActionScript” symbols. This will result in exporting our symbols and we can now use them the same as if we had exported them on the first frame. We’ll go ahead a create a frame 3 as well and put a stop on it.

I know this may sound a little confusing so take a look at what my main timeline looks like.

Timeline setup for our Game in order to preload our assets.

Timeline setup for our Game in order to preload our assets.

Okay so let me quickly explain this once more for clarity.  In the actions layer frame 1 and frame 3 have stop(); wrote in their Actions window (F9). In the AssetHolder layer on frame 2 only we put our AssetHolder MovieClip. This setup will allow us to load everything up with our main timeline not leaving frame one. Then once everything is loaded we will call play() and run to frame 3 and stop again. When Flash runs through frame 2 our assets are ready to be used in ActionScript 3.

Okay… so now we need to setup our Engine Document Class.  If you don’t know what a Document class is, guess what, AS3 Flash Games for Beginners will teach you what a Document Class is. So goto your Properties Window (CTRL+F3) and set your document class to “com.asgamer.snipergame.Engine”.

Alright time to write our Engine class. We don’t need it to do much yet, just manage our Preloader. So this will be a quick and easy class to write. Like before I’m going to show you the code then explain it afterwards.

Engine.as

package com.asgamer.snipergame
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class Engine extends MovieClip
	{
 
		private var preloader:ThePreloader;
 
		public function Engine()
		{
			preloader = new ThePreloader(474, this.loaderInfo);
			stage.addChild(preloader);
			preloader.addEventListener("loadComplete", loadAssets);
			preloader.addEventListener("preloaderFinished", showSponsors);
		}
 
		private function loadAssets(e:Event) : void
		{
			this.play();
		}
 
		private function showSponsors(e:Event) : void
		{
			stage.removeChild(preloader);
			trace("show sponsors");
		}
 
	}
 
}

Okay. Time for the breakdown.

  • private var preloader:ThePreloader; The instance of our preloader class.
  • preloader = new ThePreloader(474, this.loaderInfo); Okay, time to make a new ThePreloader. If you remember we needed to pass in two parameters. The first is the full width of our loading bar. In my case it was 474, yours is probably different so make sure you update it. Second we have to pass in the loaderInfo so we just take the loaderInfo from the document class and pass it into our preloader.
  • stage.addChild(preloader); add our Preloader to the stage.
  • preloader.addEventListener(“loadComplete”, loadAssets); Remember the two events we dispatched from our ThePreloader class? Well here is where we use them.  When the preload is complete we dispatched “loadComplete” so we will run the loadAssets function. Then when the phaseOut() function in ThePreloader is complete we dispatch “preloadFinished” and catch it here in Engine to run showSponsors.
  • private function loadAssets(e:Event). This function is crucial. I know it doesn’t do much but it does exactly what we need it to. As we noted before, loadAssets is called when the SWF is preloaded. At this point we need to play the main timeline so we can run all the assets that have been exported for ActionScript. So our main timeline will play at frame 1, move through frame 2 and load our game assets, then stop again on a blank frame 3. At this point all our assets will be completely “Exported for Actionscript”
  • private function showSponsors(e:Event). This does nothing at the moment. Well it removes our preloader but in the next tutorial we’ll discuss making it work to show our sponsors.

Step 5: Testing your Preloader by Simulating a Download

Alright. Seriously by now we are all probably ready for this tutorial to end. It’s a behemoth, I know.  But we really need to test our preloader out and make sure it works. Don’t worry it’s a pretty simple and painless process.

To test it out we are going to need a big image. So you can hit up your Documents and find the biggest image you have or just grab this one I threw together.

Just a big image with a decent filesize so we can test our preloader.

Just a big image with a decent filesize so we can test our preloader.

Right Click, Save As, all that good stuff. Then just import it into your Flash Library. Now I dropped mine into my AssetHolder MovieClip.  We’ll delete it back out soon enough, we just need something with some file size so we can test our preloader. I mean if our SWF is 1 kb, then we don’t really have anything to preload.  This image will make it big enough to run a preloader test.

Once you have your image in there Test your Movie (CTRL+ENTER). Now at first it isn’t going to work. You’ll see a white screen like nothing happened. So to test our Preloader, on our SWF file that we just rendered goto View > Simulate Download or press (CTRL+ENTER)
again. Now you should see your SWF simulate preloading.  If your SWF preloads too fast you can always adjust the simulation speed under the View > Download Settings navigation.

Now one more thing you can do with simulating the download is watch the Bandwidth Profiler, press (CTRL+B) or select it under the View tab. It looks like this:

A screenshot of the Bandwidth Profiler and our Preloader in action

A screenshot of the Bandwidth Profiler and our Preloader in action

Notice the Bandwidth Profiler tells you how much of the SWF is loaded. This will help you to assess if your Preloader is working correctly. Especially if you are creating a preloader that does something different after so many percent have loaded.

Anyway, this pretty much covers our tutorial on the preloader for our game. I’ll bring it up time to time as we develop the game so you remember how to setup your other game assets to be preloaded correctly.

Here’s the final source code:
Creating & Understanding the Preloader Source Code Zip Archive

Similar Posts:


Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg ThisSubmit to reddit


About the Author

Par
Hey! Don't be surprised, I'm a flash developer. While Flash is definitely one of my favorite languages to develop in, most of all I just like making games. If you want to see the games I've developed so far head over to my website, DigitallyBold, in the link below. If you want to know more about what I'm working on now and in the future be sure to follow me on twitter.




37 Comments


  1. miyijura

    great tutorial, thanks man.
    It clarifies a lot the process…can´t wait for the next


  2. Nathan

    I’ve implemented this into an existing project and I’m receiving this error:

    …Character/Loop()
    TypeError: Error #1009: Cannot access a property or method of a null object reference.

    Also, it takes forever to load, if it does load.


  3. Par

    Your problem is likely that you’re accepting parameters into the constructor of your classes that come from Library Symbols.

    I’ll discuss the issues more later as I continue through this tutorial series.


  4. Fei

    thx for the tutorial, but i have a question: i combined this with the custom cursor. when i put the cursor into the asset holder, after loading, the cursor image wont show up (but mouse is still there hiding). when i take the cursor out of the asset holder, the cursor showed up fine after loading. any idea why is like this?


  5. Par

    I’d have to see more of it to see how you set everything up. You should probably upload it to the forums and I can look at it from there.


  6. Dan G

    If your library symbols have constructors that require parameters, you can use gotoAndPlay(3) to jump to frame 3 without running through frame 2.


  7. kav

    Hey, great tute.

    So i’m having an issue.
    Followed the steps and everything loads, classes are all accessable, no errors, etc. Set up the timeline as prescribed and so on. For some reason though, the Preloader only kicks in on 36% of swf load, with the bandwidth profiler declaring 256kb on the first frame. My preloader movieclip, the only thing set to export on first frame, is a couple of squares, and i doubt that the symbol is as heavy as 256kb (is there a way to check a symbols footprint?). I suspect it’s because the assets i’m exporting in the asset dump clip have within them other nested library objects which are not set to export for actionscript. i.e. a symbol say, “objectDesign” exported as ObjectDesign has within it a bunch of animated clips and graphic symbols not assigned for export. Would this be the case? Should an exported asset contain only non-symbol items, with all symbols checked for export? Or is something else going on?

    thanks!


  8. When you refer to saving the AS file for the preloader class, you say to save it as Preloader.as, in fact it should be saved as ThePreloader.as. The class filename should match the name of the class – otherwise flash gives an error.

    Excellent work on this tutorial – I’m looking forward to the rest of the series. Thankyou.


  9. Stew

    great tutorial, thanks

    Sorry new to AS3 but I’m just struggling to see how I can implement this within the AS3 Flash Games for Beginners Engine Document Class.

    Any help that would be great. Thanks


  10. When I make the preloader by itself it works, but any attempts to attach it to an existing project fails horribly. I’m getting 2 errors:

    Type error #1009: Cannot access a property or method of a null object reference.
    at com.asgamer.basics1: :Engine()

    And

    ArgumentError #1063: Argument count mismatch on com.basics1: :ScoreHUD(and all the other as files for the AS3 beginners tutorial). Expected 1, got 0.

    Its a good tutorial, but you said it yourself, you don’t usually start projects by building a preloader. I think you really should have explained a little bit of how to get it attached to a current project. I’ma head over to 8bit and see what they have to say.


  11. Alex

    It looks like it works, but doesn’t. After the download it is not possible to add mc’s to the stage dynamically unless they are checked to “export in first frame” (defeating the purpose).

    Try it with the source files. Add one line to Engine.as:

    private function showSponsors(e:Event) : void
    {
    stage.removeChild(preloader);
    trace(“show sponsors”);
    stage.addChild(new AssetHolder());// add this line
    }

    If “export in first frame” is not checked, you will not see an image.

    I am using CS3.


  12. Ariel

    Hi I think it is a great tutorial but I am having the same problem as Kav because my preloader shows up at 30%. How can I fix this?


  13. Max

    Hi,

    I tried applying this preloader onto a current project I’ve been working on, but I get these parameter-related errors. I know what the problem is, that I’ve just copy+pasted the movieclips (which all have classes assigned to them) into the AssetHolder without giving them any parameters (as they’re not created by code), but I can’t seem to figure how to make the preloader work without pasting the MC’s into the AssetHolder.

    (The error I’m recieving is the good ol’ 1063: “argument count mismatch on ..” )

    Is the only way to make this work copy-pasting each line drawn inside the movieclips into the AssetHolder so I don’t get the 1063 errors or is there another way?


  14. Kim

    @Max

    In loadAssets, instead of this.play() use this.gotoAndStop(3).


  15. Quintus Kilsdonk

    Man you saved me. Your awsome just awsome


  16. Miguel

    Hi all.
    About what Dan G said:
    “If your library symbols have constructors that require parameters, you can use gotoAndPlay(3) to jump to frame 3 without running through frame 2.”

    Where should be exactly placed that gotoAndPlay?

    Or also, when Pan says “I’ll discuss the issues more later as I continue through this tutorial series.”, could someone tell me where I can find that explanation?

    Thaaanks!


  17. Lifirenk

    So if we have a Preexisting Engine class, do we just merge the new engine class with it, or do we have to do some renaming


  18. Lifirenk

    so if we are creating an engine class what should we do with our previous one


  19. sharad

    I think preloader should be the document class … making the engine a document class will result in inability to access any other class directly through it.

    Any directly accessed class from document class gets loaded in frame one. Which will render the preloader useless.


  20. Jking

    Hello I dont know if this forum is dead. But I got an error. I made my game with your previous tutorial and now Im trying to implant the preloader and it doesnt work. Im new to all this programming stuff. I check the preloader on 8bitrocket and couldnt fix my game. I wrote all the codes for the preloader and modified my engine but I get that error 1009 Im trying to find where is the mistake but I cant find it :(


  21. Aron

    Hey all,

    Thanks alot for this great tutorial, really helped me alot.
    I just have one question regarding the assetHolder.
    I made a movieclip with an external as file as his class, and i didn’t have export in first frame checked, and i didn’t use the assetholder with the movieclip in it in frame 2.
    But still when i dynamicly added the movieclip after the preloader was finished, the class still worked properly, Even though i unchecked export in first frame and didn’t use the assetholder.

    I don’t know if i did something the wrong way or something, but this question has been bugging me for abit.
    So if someone could explain this to me, it would be grealy appreciated.
    Thanks in advance!


  22. Chris

    A few things I got stuck on (AND FIXED!) :)

    1) This is not a complete tutorial. Step 1 of the next tutorial explains that you *must* be on frame 3 to start using game assets (like loading your main menu). If you’re getting null references or an argument count mismatch, this is likely your issue. ASgamer solves this with a 1 second tween.

    2) If you have internal sounds to load, you must place them on the second frame *inside* the asset holder mc (with a stop on the first frame. 8bit rocket talks about this. *Do not* set the Sync property of your sounds to “Stop.” This will cause it to load on the first frame (killing the effect we want).

    3) Always make sure you’re not accessing things before you get to frame 3. I was instantiating my sounds at the top of my Engine class and realized that had to be moved to after the Tween as well.

    Hope that helps!


  23. This is really bugging me! No matter what I do, I keep getting Compiler Error 1137 – “Incorrect number of arguments, expected no more than 0″.

    The error’s source appears to lie in the constructor parameters of Class Engine

    public function Engine():void{
    preloader = new ThePreloader(467, this.loaderInfo)
    }

    If I remove the parameters

    If I remove the paramaters, the movie loads on Frame 2, with a full size PreloadBar immediately, and throws RunTime Error #1009: “Cannot access a property or method of a null object reference.
    Ticking “Allow Debuuging” in the ActionScript settings, reveals the following details.

    [The Error is located] at com.asgamer.snipergame::ThePreloader/checkLoad()[/Users/adam/Documents/Adobe/Flash/snipergame/com/asgamer/snipergame/ThePreloader.as:22]Runtime Error

    I can’t find a solution for this. Any suggestions would be most welcome, as I really like your tutorial series,
    Thanks!


  24. lubo

    make sure all classes have default values to their constructor parameters(or was it arguments?).
    eg

    public static function Example(Colour:uint = 0×000000)

    therefore, it will still work, even if you’ve just dragged it onto the stage.

    something like

    public static function Example(Colour:uint) will throw an error


  25. tgau

    Thanks for this terrific tutorial! Your writing is way better than anything I’ve seen in the official Adobe manuals. I suspect that the Adobe writers don’t understand what they are writing about. You are awesome!

    I have one stupid question(s):
    Is the SWF file generated by this Preloader.fla the only file I need to publish? Will this contain everything needed to play the game? What about sound files that are loaded during runtime?


  26. I’ve been trying to use this method for two games now and I’ve discovered one major problem I can’t seem to get rid of when using sounds:

    You can do a gotoAndStop(3) rather than play through frame 2. This still loads assets but does not execute them. This solves randomly triggering all the sound files present on frame 2.

    However, after playing a game preloaded in this fashion the sounds will randomly cutout on some computers (enough to where I get a ton of complaint comments from gamers).

    Any ideas where this problem arises? Again, the sounds works for everyone until about 5-10 minutes into the game. Maybe you just can’t use this method for sounds?


  27. Dinkyfish

    Hi folks, first off I’d like to say a big thank you for such a well-written tutorial.

    BUT, I’m hitting a problem whenever I try to use it and I’ve been sat here all morning trying to work out what the problem is. If anyone is still checking this topic and can think of any possible solutions then please let me know.

    Essentially the loading screen doesn’t appear at all for quite some time, and then when it does it’s only there for a few seconds before the game actually starts. So it appears as though a large portion of the game is being loaded before the loading screen appears. I have gone through my library multiple times to ensure that all my files have ‘Export on frame 1″ unchecked, and are instead all placed in the AllAssets movieclip.

    I do however have a large number of art assets in my library that I am not exporting for AS (these are PNG and JPG files that I have imported). They are used in symbols which I am exporting for AS, but the actual images themselves are not exported. Do I need to export them too? That seems like an awful lot of work, especially when I’m essentially creating classes that will never be used…


  28. mittens

    First let me say that I am a student of ActionsScripting and not its master, much to my dismay.
    I went through both custom cursor tutorials and they worked wonderfully. Then I proceeded to go on to the preloader tutorial and when I had no assets, other than the image file in the second frame, it worked perfectly. However, when I added the assets necessary for the custom cursor into the movie clip on frame 2, and then called to the class I used to instantiate the cursor, it did not work. The error said that it expected an argument of 1 and received 0, even though I did not change anything in the document class code in regards to the previously working custom cursor.
    The way I tried to instantiate the cursor class was by executing a method inside the function which removed the preloader child once the file was completely loaded. I tried passing it no arguments and the stage argument, but neither worked, so I could use some advice if you have any to offer.


  29. Mikey

    Hello,
    I completed the tutorial and the loader works fine. The only problem is it becomes visible around %85ish of the whole content loaded. I followed every step here but still failing.
    anyone have any idea ?

    thanks


  30. Troo

    i keep getting th error “1046: Type was not found or was not a compile-time constant: ThePreloader.


  31. deny prasetia

    Clear tutor, almost for newbe(me)


  32. wondering if anyone got this working on a mobile phone (using air for android) or whats the deal with that? Mine is blank all day then flashes up loaded… been getting everything else perfectly, thanks so much for taking the time to do these tutorials!!!


  33. Mouldywarp

    Ok, played around with this a bit more and for some reason my unchecking the “export on frame 1″ didn’t make any difference. Not sure why, but managed to find a way round it though. In Flash CS4 (which I’m using) there is a setting in Publish > Flash > Actionscript Settings that basically lets you change which frame to export classes in. So I changed that to Export in Frame 2. The only thing with doing it this way is that you cannot use any classes before the preloader finishes other than the document class. So I just wrote the code for the preloader in the document class, my visuals are a named instance of a movieclip called preloader that is not linked to a class. I’ve tested it and it seems to work fine. Hope this helps someone!


  34. I got this to work by following some suggestions, mainly to avoid an argument mismatch error, in the engine class instead of gotoAndPlay(); replace that with gotoAndStop(3); essentially you won’t need a stop(); on that frame in your actions panel b/c this command will do that for you. ALSO – I added a timer which made my preloader show up for 3 seconds BEFORE it starts checking to see if any data has loaded, that may help some with it showing up halfway through loading. I inserted my timer after the line: this.ldrInfo = ldrInfo; and when the timer is complete, I trigger the even to start checking to see if it’s loaded. NOTE: I didn’t use a bar style loader but a simple rotating circle graphic that doesn’t show percentages.


  35. Rhinni

    Very useful tutorial! Thank you so much!


  36. Your tutorial is great! I’ve just completed a previous one called ‘Basics1,” and was wondering how I might combine the engine classes together? I’m not entirely sure how and it would be great if I could get your help.

    Thanks!



Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


Advertisement