• Stick Nodes - 100% Complete Go animate some stickfigures. Google Play links: [free] or [pro]. App Store links: [free] or [pro].
Weapons on Wheels 2
Stick Nodes

Get it from: App Store | Google Play | SlideMe | Amazon | Opera

How To: Preloader in Flash Builder 4.7

10comments

So I’ve spent the better part of the past two or three days fumbling around Flash Builder 4.7 because, come on, who wants to use old, outdated Flash Builder 4.6, right?

Anyway, I unknowingly backed myself into a corner when I (stupidly) uninstalled FB 4.6 before installing FB 4.7 because a download link for FB 4.6 is apparently hard to come by these days.  As a result, I was stuck with the task of fixing the monumental wall of errors facing me when I first imported up my old game project.

This has nothing to do with this preloader stuff, but in case anyone out there runs into this problem, this is bad and throws errors:

1
[Embed(source = "../lib/levels/level1.lvl", mimeType = "application/octet-stream")]

This is valid:

1
[Embed(source = "/../lib/levels/level1.lvl", mimeType = "application/octet-stream")]

Spot the difference!  That alone fixed 80+ errors I was facing.  Apparently that leading forward slash is now mandatory.

Alright, onto the preloader.

Custom Preloader in Flash Builder 4.7

From what I can surmise, things have changed in FB 4.7 and I’m not sure if there are plans to “fix” things back to the way they used to work.

To get started, the basic core of my Preloader.as class I got from somewhere else on the internet.  I can’t seem to remember exactly, but shout-out to them.

Edit: I’ve found the original source of the preloader code to be from a post on pixelpaton.com.

Now, this process involves two classes, the Preloader.as class and your document class (here, mine will be Main.as).

Step One – Compiler Settings

  1. Flash Builder 4.7 Preloader Open FB 4.7 and right-click on your project, select Properties.
  2. Click ActionScript Compiler on the left and find the Additional compiler arguments field.
  3. Append this in that field: -frame appFrame Main
    Note: This assumes Main is the name of your document class, make sure you change it appropriately.

Step Two – Preloader Class

  1. Create a new class, call it Preloader.as.
  2. Paste the following code into this class:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
package
{
import flash.display.DisplayObject;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.utils.getDefinitionByName;

[SWF(frameRate="60", width="700", height="525", backgroundColor="0x000000")]
public class Preloader extends Sprite
{
// Private
private var _preloaderBackground:Shape
private var _preloaderPercent:Shape;
private var _checkForCacheFlag:Boolean = true;
// Constants
private static const MAIN_CLASS_NAME:String = "Main";

public function Preloader()
{
trace("Preloader: Initialized.")
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}

public function dispose():void
{
trace("Preloader: Disposing.")
removeEventListener(Event.ENTER_FRAME, onEnterFrame);
if (_preloaderBackground)
{
removeChild(_preloaderBackground);
_preloaderBackground = null;
}
if (_preloaderPercent)
{
removeChild(_preloaderPercent);
_preloaderPercent = null;
}
}

// Private functions

private function onAddedToStage(e:Event):void
{
trace("Preloader: Added to stage.");
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP_LEFT;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}

private function onEnterFrame(e:Event):void
{
if (_checkForCacheFlag == true)
{
_checkForCacheFlag = false;
if (root.loaderInfo.bytesLoaded >= root.loaderInfo.bytesTotal)
{
trace("Preloader: No need to load, all " + root.loaderInfo.bytesTotal + " bytes are cached.");
finishedLoading();
}
else
beginLoading();
}
else
{
if (root.loaderInfo.bytesLoaded >= root.loaderInfo.bytesTotal)
{
trace("Preloader: Finished loading all " + root.loaderInfo.bytesTotal + " bytes.");
finishedLoading();
}
else
{
var percent:Number = root.loaderInfo.bytesLoaded / root.loaderInfo.bytesTotal;
updateGraphic(percent);
trace("Preloader: " + (percent * 100) + " %");
}
}
}

private function beginLoading():void
{
// Might not be called if cached.
// ------------------------------
trace("Preloader: Beginning loading.")
_preloaderBackground = new Shape()
_preloaderBackground.graphics.beginFill(0x333333)
_preloaderBackground.graphics.lineStyle(2,0x000000)
_preloaderBackground.graphics.drawRect(0,0,200,20)
_preloaderBackground.graphics.endFill()

_preloaderPercent = new Shape()
_preloaderPercent.graphics.beginFill(0xFFFFFFF)
_preloaderPercent.graphics.drawRect(0,0,200,20)
_preloaderPercent.graphics.endFill()

addChild(_preloaderBackground)
addChild(_preloaderPercent)
_preloaderBackground.x = _preloaderBackground.y = 10
_preloaderPercent.x = _preloaderPercent.y = 10
_preloaderPercent.scaleX = 0
}

private function updateGraphic(percent:Number):void
{
// Might not be called if cached.
// ------------------------------
_preloaderPercent.scaleX = percent
}

private function finishedLoading():void
{
var MainClass:Class = getDefinitionByName(MAIN_CLASS_NAME) as Class;

if (MainClass == null)
throw new Error("Preloader: There is no class \"" + MAIN_CLASS_NAME + "\".");

var main:DisplayObject = new MainClass() as DisplayObject;
if (main == null)
throw new Error("Preloader: The class \"" + MAIN_CLASS_NAME + "\" is not a Sprite or MovieClip.");

addChild(main);
dispose();
}
}
}

There are two main components here you need to worry about.

  1. Be sure to change the values in the SWF metadata tag to whatever you want (above the class declaration).
  2. Also be sure to change the value of the constant that holds the name of the document class (again, mine is Main.as):
    private static const MAIN_CLASS_NAME:String = “Main”;

This is the most absolute bare-bones preloader you can have.  It simply uses two rectangle shapes to display a loading bar.  When you need to, you can replace the functionality with graphics or whatever.

Step 3 – Main.as (or whatever your document class is)

There is nothing special about Main.as.  This is simply the “starting point” for your game.  It doesn’t matter what’s in the actual .as file, just as long as the file exists right now.

Step 4 – Default Application

  1. Flash Builder 4.7 PreloaderRight-click on Preloader.as in the Package Explorer window and select Set as Default Application.
  2. In the Package Explorer window, Preloader.as should now have an icon with a small blue circle and Main.as should not.
    (Also, very important. Preloader.as should also have a green triangle on it’s icon while Main.as should not.  If Main.as does have this triangle, read below section, “Having Problems?.”  The image to the right shows a green triangle on both icons – this is bad.)

Step 5 – Profit!

That’s it, you’re done.  The main change here (at least from the method I’ve become accustomed to) is the lack of the [Frame(factoryClass = “Preloader”)] tag typically utilized.

Having Problems?

Depending on when you’re adding a preloader to your project, you may have to do one more thing.  I learned this the hard way after things would only work once, then on the next build it’d be all messed up again.

You only need to worry about this if there is a green triangle on the icon next to Main.as in the Package Explorer window.

  1. Right-click on your project and select Properties.
  2. Select ActionScript Applications on the left.
  3. In the list on the right, select Main.as and click Remove.  All that should be left in the list is Preloader.as (default).
  4. Now select Run/Debug Settings on the left.
  5. In the list on the right, select Main and click Delete.  All that should be left in the list is Preloader.
  6. Click OK.  All done!

From what I’ve seen, there hasn’t been a clear-cut answer to this preloader issue posted anywhere for FB 4.7 yet, so that’s why I wrote this up.

I originally didn’t know the “old” method of creating preloaders was deprecated until FB 4.7 kept throwing a ReferenceError: Error #1065: Variable Main is not defined error as soon as I attempted to build my project.  Big thanks to the topic on the Adobe forums here that led me to this solution.

  1. unmigo utters: January 4, 2013 at 8:48 am

    Thanks a lot!
    I have updated a Flash Builder 4.6 game project with preloader and this help me to make it run.

    🙂

  2. Terry Paton states: February 13, 2013 at 4:06 pm

    My old preloader code had stopped working, thanks for the solution why. And strange, a lot of the preloader code looks remarkably like the preloader I posted on my site!

  3. Ralph remarks: February 14, 2013 at 3:00 pm

    Haha, glad I could help. And you’re right, I got my preloader code from you (of course I’ve modified it for my own use over time), funny you should comment here.

    Not sure if you saw, but in the post I mentioned, “To get started, the basic core of my Preloader.as class I got from somewhere else on the internet. I can’t seem to remember exactly, but shout-out to them.”

    I’ve updated that section with a proper link to your tutorial, now.

  4. Gaurav says: July 28, 2013 at 6:17 am

    When i use the same code to make a preloader for a minko3d file i get the following error
    Error #1063: Argument count mismatch on Main/initialize(). Expected 0, got 1.

    Can anyone help.

  5. Tom announces: January 10, 2014 at 8:37 pm

    Would it be possible for you to send an actual project file of this tutorial?, it would ad the extra edge to your post…thanks this was very helpful.

  6. BunbunManJu utters: September 14, 2014 at 10:17 pm

    Hi, I noticed that _checkForCacheFlag is set to true in the beginning. Does this not means that everytime I run the swf, it will automatically be taken as true? Shouldn’t there be away to check if there is cache data first then set it?

  7. Lampogolovii says: January 23, 2015 at 2:38 pm

    you made my day!
    thanks!

  8. shaman4d utters: March 21, 2016 at 8:20 pm

    Thanks a lot!!!

Post a Comment

You must be logged in to post a comment.