Thursday, December 11, 2008

Flash for Programmers Part 2: The Display List

The Display List in ActionScript 3 is comparable to the DOM on a web page. Through the Display List you can add and remove your View components.

I am not going to go into too much detail here are there are already many excellent articles about it online (http://www.adobe.com/devnet/flash/quickstart/display_list_programming_as3/) (http://developer.yahoo.com/flash/articles/display-list.html).

Suffice to say you will be calling addChild() and removeChild() quite frequently.

I am going to give you a few practical tips though...

Often (if you are doing truly modular MVC, which I will cover later), you will be firing off notes that may tell you to add and/or remove various components from the display list. You may fire a note which will ask to remove a child which doesn't exist though and this will cause your app to throw a nasty error.

Just like in real life, I find it handy to name my children i.e.

var dialog:Dialog = new Dialog();
dialog.name = "dialog";
this.addChild(dialog);

Later on, you may have some code which removes it.

this.removeChild(dialog);

However, if you aren't sure it will be there there is a better method

if(this.getChildByName("dialog") != null) {
    this.removeChild(this.getChildByName("dialog"));
}

What you are doing is first checking to see this child exists and if so, you can remove it. This should prevent any potential run time errors.

Wednesday, December 10, 2008

Programmer's Guide to Flash: Part 1 - The Document Class

While Adobe came out with Flex specifically to create an IDE for programmers to create ActionScript/SWF applications, it is actually possible for programmers to use Flash CS3 (normally seen as a design tool) to create Rich Internet Apps.

Most Flash programmers tend to regard Flex programmers in the same way that Web Developers regard .NET programmers. Flex (and .NET) programmers tend to be generalists who don't really know that much about interface programming and are afraid to get into the guts of a system. Flex itself is a 300k beast which may speed up your development, but it will slow down your application.

However you are in luck. With Flash CS3 Development, the only really hard part is knowing where to start. Once you are over the initial hurdle, you will find yourself in code most of the time.

Step 1:

First of all, open Flash CS3 and create a new project (File -> New... -> Flash File (ActionScript 3.0).
If you open the Properties Window you will see a box labelled Document Class. This is where you will put the Main ActionScript file which will control the application.







For now what you should do is save your .fla file and create an AS file in the same directory (say Main.as). In the Document Class you enter class name "Main".

Step 2:

Put the following code in Main.as

package
{

import flash.displa
y.MovieClip;

public class Main extends MovieClip {

public function Main(){

trace("I am in the main app");

}

}
}

When you compile this (Control -> Test Movie) this will open up an Output window printing out the trace statement ("I am in the main app").

While this is fine for your own project file, what do you do when you want to import 3rd party libraries or else write large multi file applications?

Step 3:

Understanding packages is important for the next step. A package name is basically a signature which reflects the organization of a file within folders. Therefore a package called com.adobe.webapis.flickr represents a path com/adobe/webapis/flickr and any files to do with this project are put in this folder.

i.e.
package com.yourcompany.project
{

import flash.display.MovieClip;


public class Main extends MovieClip {

public function Main(){

trace("I am in the main app");

}

}
}

This means Main in this case should be placed in the subfolder com/yourcompany/project and referred to in the Document class as com.yourcompany.project.Main.

Step 4:

You may want to move this folder to another location however (or else use a shared package vs copying it into your project, especially for common files). To do this, click on the Publish: Settings... in the Properties window which will bring up the following dialog.
















Click on the Settings... button next to the ActionScript version. There you will see the Classpath box. Click on the + symbol and navigate to the folder above the top of your package (i.e. if your package is in C:\lib\src\com\yourcompany\project, set the Classpath to C:\lib\src). You can add multiple class paths as well.





















And there you have it. A means of adding ActionScript to the Flash file and a means of splitting up your project into multiple files. When you want to call in your own custom classes, you import them according to their class name (the same as when you imported flash.display.MovieClip) i.e.

import com.companyname.util.StringUtil

Just remember to add it to the class path!