So, I’ve spent several days working out how I will approach references to stage properties (i.e. stageHeight) within classes. This is a partial review and recommendation of an article I came across in my perusal of the programming communes online. Skip to the bottom if you’d like direct access to Senocular’s article.

Stage’s fight against Globalism:

In AS3, the stage is not globally accessible. It can only be accessed through a displayObject that is attached to the stage. Sometimes, especially in the case of a class that instantiates displayObjects, a reference to the stage through a displayObject isn’t possible until after the constructor is finished and the object you just created has been added as a child to the stage. This means your class won’t have access to stage properties (like stageHeight or stageWidth) until later. Ex:

package {
    import flash.display.*;

    public class Main extends Sprite {
        private var _myClassInstance:myClass;

        public function Main() {
            _myClassInstance = new myClass();
	    addChild(_myClassInstance);
	    /* Now you can access stage props in the _myClassInstance,
	     * but it's probably too late.
             */
        }
    //Class
    }
//Package
}

.
As a side note: Only the document class allows this syntax for addChild(). Normally, you must designate the parent to add the displayObject to: _parentInstance.addChild(_displayObjectInstance).

So, what do you do if you want your object to innately relate itself to a stage property? Looking at several posts and articles online, I didn’t find many solutions that didn’t employ hacks or work arounds. But I did finally find this article by Senocular that addresses the issue head on. Please read if you’re having trouble in the department of access to the stage in your custom classes:

Senocular’s article: “Thinking Outside Looking In and not Inside Looking Out” - http://www.kirupa.com/forum/showthread.php?p=2167721#post2167721

Oh, and here are some others from Senocular that relate:

“Access to stage and root” - http://www.kirupa.com/forum/showthread.php?p=1952513#post1952513

“How stage, root, and MainTimeline Fit Together” - http://www.kirupa.com/forum/showthread.php?p=2129548#post2129548

If you’re used to scaling rounded rectangles w/ the scale9Grid, you’re in luck, b/c not much has changed in AS3. scale9Grid is a property of the displayObject class that allows one to scale all but the corners of a displayObject. This way when you enlarge a rounded rectangle, the corners will remain the same size instead of enlarging or warping. Note: Remember to import the rectangle class before using scale9Grid.

Not clear enough? Let’s say that we’re scaling a rectangle from a to b:

If, to achieve the above transformation, we use xscale and yscale, or change the width and height of the rounded rectangle object, we’ll get this:

Look at the rounded corners! Not round, not pretty. So, instead we use scale9Grid, which sets up an invisible grid to determine the focus for scaling. Imagine your rounded rectangle with an invisible grid inside:

The grid makes 9 regions of the original object. The nine regions will act differently, now, when they are scaled:

The top left will not scale,
the top middle will scale horizontally only,
the top right will not scale,
the middle left will scale vertically only,
the middle middle will scale horizontally and vertically,
the middle right will scale vertically only,
the bottom left will not scale,
the bottom middle will scale horizontally only, and
the bottom right will not scale.

This maintains the rounded rectangle look when we scale. In addition, it maintains the stroke size of the rectangle. Of course, you can use the scale9grid for numerous other reasons, but this happens to be the most common in my practice.

For more details, consult the flash language reference. They do a great job explaining it.

So, creating a rounded rectangle in as2 required using a custom pseudo-class in the Flash drawing API (I used mc.DrawRect from the developer center on Adobe’s site before it came w/ Flash 8). It allowed you to make rounded rectangles through code. In AS3, you can create a rounded rectangle with the included flash.display.Graphics class, which contains the methods drawRect(), drawRoundRect(), drawEllipses(), and drawCircle(). Easy money. Now onto figuring the newest method to scale a rounded rectangle.

Duplicate variable definitions error

So, have you written a couple perfect loops in AS3 only to generate the compiling error “duplicate variable definitions“? I just did that and the error is a little misleading.

So here’s a little background. In AS3, you are not allowed to define a variable and then redefine it later, like this:

var i:Number = 314159;
var i:String = "314159"

.
Once you define a variable, you’re stuck with it. If you do something like the above code, you receive the “duplicate variable definitions” error.

Here’s the weirdness: you receive that same error when you declare a variable more than once in the same scope. This should have a different error name like, “duplicate variable declarations,” but Adobe wasn’t that creative. Oh well.

So here’s an example of what not to do, unless you desire a “d.v.d.” error message :O)

var i:Number = 314159;
var i:Number = 22222;

.
It should look like this:

var i:Number = 314159;
i = 22222;

.
This carries over to for statements (aka loop statements) that are in the same scope. The following code will produce a d.v.d. error:

for(var i:Number = 0; i < array.length; i++){
    //code here
} 

for(var i:Number = 0; i < array.length; i++){
    //other code here
}

.
Avoid the error by changing the var’s name in the second loop:

for(var i:Number = 0; i < array.length; i++){
    //code here
} 

for(var j:Number = 0; j < array.length; j++){
    //other code here
}

.
Another solution is to declare the var outside of both statements:

var i:Number = 0
for(i = 0; i < array.length; i++){
    //code here
} 

for(i = 0; i < array.length; i++){
    //other code here
}

.
All set! No more d.v.d. errors!

Curtis Morley explains it well unfortunately in the last comment in the following link: CurtisMorley on Variable Scopes.

The flex 3 sdk doesn’t support the fl packages that ship w/ Flash CS3 (includes fl.transitions.Tween and fl.transitions.easing). That seems to leave Flex’s mx.transitions.Tween class or any custom classes out there. What would be the benefit of one over the other? I’m considering Tweener b/c it appears to be simple yet flexible and AS3 capable.

Tweener (Official Site) - http://code.google.com/p/tweener/

Language Reference - http://hosted.zeh.com.br/tweener/docs/en-us/

INTRO:

Adobe has been ever so gracious to grace us with the Open Source Flex SDK (we’re up to Flex 3 SDK at time of writing). This means that us actionscripters can compile/build our flash projects without using the Flash CS3 Software. In other words, a programmer can add a bit-o-elbow grease to the mix, take advantage of the awesome Open Source community out there, avoid the $200 upgrade or $500-600 dollar price tag of Flash CS3, and still create spectacular (or basic) flash applications. Wow!

My goal in this article is to quickly orient you to my, albeit primitive, understanding of how to set up a development environment for programming in AS3. Simultaneously, I hope to uncover the mystery of how this is even possible and I’d like to do it in layman’s terms (the only kinds I know). I’ve temporarily settled on this particular set up after hours and days of research, and trial & error, and exhaustion. Please, feel free to use this article as a springboard, for research, and/or just as a general introduction to openSource AS3 programming. Certainly, this approach can be improved upon, as I am anything but a computer science expert. Also, make sure to read the warnings section (below) before delving blindly into and relying on an open source flash setup.

So, I never use and never have used Flex, but the compiling engine (the opensource version is Flex SDK) is the key ingredient to openSource flash. Flex is simply another Adobe software/environment for creating *.swf files. The Flex compiling engine recognizes the Flex language (mxml–an actionscript markup language) and straight actionscript. So now, with Flex SDK, we have an opensource compiler that can read actionscript 3.0 and output a *.swf file. Sweet!

WARNINGS:

Realize that you’re giving up things by giving up the Flash software. This is me getting high off of disclaimers:

W/o the software, say goodbye to timelines. Sad. But, really, this is good for you. Timelines only made your code messy. Pure actionscript applications are often cleaner, more streamlined and thus faster. And you still have powerful animation tools at your disposal. If you do all or most of your work with timelines, then expect to be challenged. Using an open source development is mostly synonymous with code-only applications.

W/o Flash CS3, you won’t receive any included classes or new components or whatever is in that bundle. Instead, you get what’s included with the free Flex 3 SDK bundle (similar to but different than the flash bundle–A complete list of the Flex packages of classes here. I’m not aware of how to use or get access to the components in the bundle, as I have never used Flex components). Note: The fact that certain flash packages aren’t supported by Flex was important to me because I relied heavily on the fl.transitions.tween class to animate all my AS2 crap and it apparently is not supported by Flex.

In addition, be aware that AS3 applications use an overhauled actionscript language and thus it doesn’t support many AS2 conventions. Flash Player 9 claims backwards compatibility, but it isn’t as backwards compatible as you’d like. (From page 26 of Adobe’s Guide to AS3.) This is more a warning about AS2 to AS3 migration, not necessarily about setting up the open source environment, but it’s worth mentioning. And consequently, it’s probably wise to try a strictly AS3 project before migrating an AS2 project to AS3.

Be aware that, without the Flash Software, there is no Flash library. I only use the flash library for fonts, so this isn’t a giant issue for me and apparently, there’s a workaround. I haven’t gotten that far, though.

Finally, and probably most importantly, I haven’t figured out how to reintegrate the trace function. Many of the set ups that I found out there use a separate debugging/logging class instead of a trace function to accomplish what trace accomplishes in Flash software. In addition, these setups require running a second *.swf while testing your main.swf in order to catch the debugging messages. I may have to settle on that solution, but it seems like too many programs and too much extra-ness. Trace is fully supported in FlashDevelop. I hadn’t completely un-installed my Flash Player before installing the Flash Player 9 Debugger version (see below)

Oh, and the most obvious warning: Using AS3 in flex, flash, or an open source environment innately means that you and user/visitors of your AS3 application must have Flash Player 9 or higher. You actually should have the Flash Player 9 debugger version.

So all that said, AS3 is a much more intuitive, genuine programming language than AS2. It runs quicker (something like up to 10x quicker) in Player 9 than AS2 does in Player 8. It also has added functionality like true Fullscreen, etc.

BASIC SETUP / BASIC HELLO WORLD:

The basic setup is pretty ideal and pretty customizable.

Install: Flex 3 SDK to your C:\ directory. (Adobe’s Flex 3 SDK)

Install: Favorite text editor, I’ll be using FlashDevelop b/c it has AS3 code-hinting and has built in compilation capabilities. (FlashDevelop)

Uninstall: Flash Player, using the Adobe uninstaller (Adobe Uninstaller)*

Install: Flash Player 9 Debugger version (Flash Player Debugger Version)*

*These are key. An added complication to not completely un-installing previous versions of the Flash Player can arise if you used Flash 8. Make sure to delete and update the player included in that installation. (in my setup, it was at this location C:\Program Files\Macromedia\Flash 8\Players\ )

Open FD and start a new AS3 Default project. Name it “test” and choose a location. Click ok. This automatically makes a folder for “test” which includes a “src” and “bin” folder which are respectively in and out folders. FD also makes a “main.as” class in the “src” folder.

Instead of centering your actionscript application around a main.fla file and importing your classes, center your application around a main class (main.as) file. This will be your document class–a concept new in AS3. FD already types out the doc class for you (below). Simply add a “Hello World” to test.

Doc Class Example (in lieu of Main.fla):

package
{
	import flash.display.Sprite;
	public class Main extends Sprite
	{
		public function Main():void
		{
			//ENTRY POINT TO APPLICATION
			trace("Hello world");
		}
	}
}

SCREEN SHOT OF FLASHDEVELOP:

To compile the site, Project>Test Movie or f5 or click the test button. Make sure “Debug” is selected in order to receive trace messages in the output panel.

ALTERNATIVE: If things aren’t set up appropriately in FD, you may want to compile the straight forward way: You simply drag and drop your document class onto the mxmlc.exe included in your Flex SDK bundle (C:\Flex sdk\bin\mxmlc.exe). This will generate a *.swf in the directory where the document class is saved (i.e. in the “src” folder of your “test” project).

When you compile your application, the Flex SDK will set the *.swf to automatically run the constructor for the document class. It’s nearly the same as using the Flash Software, but cleaner. Done and done.

From here, have at it!

Of course, make sure to complete the assignments below (especially the movies) and send me feedback.

RESOURCES AND SUCH:

SUPPORT (kinda :O) and LINKS:

Open Source Flash - http://osflash.org/
Awesome resource! Good luck finding what you need if you’re a novice :O(

Flex SDK Documentation - http://opensource.adobe.com/wiki/display/flexsdk/Developer+Documentation
Not really that in depth, let me warn you.

Flex Language Reference - http://livedocs.adobe.com/flex/3/langref/index.html

Migrating AS2 to AS3 - http://www.mandalatv.net/fcny/
Awesome for a quick check at how the two compare/contrast.

Getting Started w/ AS3 (w/o Learning Flex) - http://www.senocular.com/flash/tutorials/as3withmxmlc/
Repeats some of what’s in this article, but w/ better credentials.

Adobe’s Guide to AS3(pdf) - http://livedocs.adobe.com/flash/9.0/main/flash_as3_programming.pdf
An all-around guide to object-oriented programming using actionscript 3.0

Adobe’s AS2-AS3 Migration Reference - http://livedocs.adobe.com/flex/3/langref/migration.html

Suggested reading (in no particular order):

• Foundation Actionscript 3.0 Animation: Making things move! - By Keith Peters
• Essential Actionscript 3.0 - By Colin Moock
• The Holy Bible, especially Mark 3:1415 - By God

Suggested viewings (reverse order):

• Revolution OS (history of Linux/Open Source documentary,86m) - Instant viewing on NetFlix
• Hackers - Pretty much the worst movie ever made, so it deserves a re-visit!

Hello Blogosphere-

Thanks so much for visiting Actionscription. My hopes are high and expectations low :O) I simply feel like contributing to the Actionscript programming community one little piece at a time. Feedback and comments are greatly appreciated!