In his second article from the Flash to Flex series, which focuses on helping you migrate your work environment from Flash to Flex by learning the differences between and comparing the two applications, Kris Hadlock shows you all you need to know to get started using ActionScript 3. In this article you'll learn how to create packages and classes and incorporate them into a Flex project.

For years there has seemed to be a stigma in the development community about developing with AS (ActionScript). With the release of AS 2 there was a huge shift and many more developers made a transition to Flash; and with the ability to create classes, existing Flash developers were finally able to begin writing object-oriented code. AS has really matured over the years, and version 3 has raised the bar for object-oriented approaches by providing the ability to create packages, forcing strict typing through the compiler, and much more. In addition, the Flex environment has made it much easier to debug code and see errors or warnings while writing code.

The Flash to Flex series will focus on helping you migrate your work environment from Flash to Flex by learning the differences between and comparing the two applications. Last time, we covered how to integrate AS with MXML; this week we'll take it a step further by focusing on AS 3 and how to use it to create packages and classes and then incorporate them into a Flex project. If you have questions about creating a new Flex project, incorporating ActionScript, or triggering events, take a look at my previous article, "Integrating ActionScript with MXML."

Creating a Package

The concept of a package did not exist in previous versions of AS. In fact, classes were not even possible until the release of AS 2, and in AS 1 developers were left creating prototype objects, much like in JavaScript. Thankfully, AS 3 has kept the same concept of classes from AS 2 and has also incorporated packages.

Packages are essentially the folder structure that you define for particular classes. For instance, my company is studiosedition.com, so the base package for all of my company classes will be the same as Listing 1.

Listing 1 Creating a base packageLet's say that I have some utility classes, such as a class that only handles all alerts, named it Alert.as, and added it to a utilities folder. The full class path for this object would look like Listing 2 in AS 2.

Listing 2 Creating a full class path in AS 2

com.studiosedition.utilities.Alert

Listing 3 shows an example of how AS 3 enables developers to actually use the package keyword as other languages do.

Listing 3 Packages in ActionScript 3

package com.studiosedition.utilities
{
   public class Alert
   {
   }
}

A bonus of Flex is that it streamlines the creation of classes and packages by incorporating a dialog for creating new AS classes. The dialog enables you to browse for a package, name the class, choose whether it is public or internal, choose dynamic and/or final, browse for a superclass if it extends another class, and add interfaces. Beyond that it even provides the ability to automatically create the constructor, generate functions from an interface, and add comments. This helps save a lot of typing when you have a large project and are creating a lot of classes. Take a look at Figure 1 to see the dialog used to create a new AS class.



Figure 1: Creating a new ActionScript class with Flex

Note that the folder structure needs to exist in the Flex project in order to use it. For example, to use the package com.studiosedition.utilities, I needed to first create a com directory with a subdirectory named studiosedition, with another subdirectory named utilities.

Now that our class has been started we can take a look at how to start using it in the project.

Using a Custom Class

In the last article, "Integrating ActionScript with MXML," I showed how to create a simple method called recordEvent, which used the Alert class for notification of a few mouse events. In this article I will take that same method, add it to the new custom Alert class that we created, and show you how to use it in a project.

First, take a look at Listing 4 to see how to add the recordEvent method to our class.

Listing 4 Creating a custom method in the Alert class
You should notice a couple of interesting facts about the RecordEvent method. The first letter of the method name is now capitalized. I do this to differentiate methods in my classes, I prefer to code public methods this way and have private methods starting with lowercase (this is sort of a standard coding practice, but not a requirement).

The next thing to notice is the static keyword, which I added to allow the method to be called without class instantiation. This means that you can simply call Alert.RecordEvent()instead of creating a new Alert object before calling the method.

With our new method in place, let's start calling it from the MXML file that is created when a project is started. Listing 5 shows how to import our new Alert class and use a button to trigger the RecordEvent method.

Listing 5 Incorporating AS 3 with MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script><![CDATA[import com.studiosedition.utilities.Alert;]]></mx:Script>
    <mx:Button label="My Button" id="myButton" click="Alert.RecordEvent('Click');" mouseUp="Alert.RecordEvent('Up');" />
</mx:Application>

The first things you'll notice are the Script tags, with the import statement for our new custom Alert class, which enables us to have access to the code that we wrote previously. With the class imported, we can call the public methods contained within. As an example I created a button with a label, id, and two events. The events are tied to the RecordEvent method to notify when either the click or mouseup event is fired.

That's it. I know this is a simple example, but the concepts are the same no matter how complex your code gets.

Next in the Series

Get familiar with the Flex environment and get ready to keep progressing to more complicated functionality throughout the From Flash to Flex series. The next article of the series will cover how to create ActionScript components for Flex. In the meantime, enjoy the new environment and reap the rewards of AS 3.