There is a perception among Flash developers that Flex development is a completely different animal. Maybe you've played with the beta and messed around with some MXML tutorials. But when you get down to the heart of it, developing with FlexBuilder 2 is almost identical to creating good Object Oriented ActionScript 2.0. If you're a solid coder in Flash, you could be a solid coder in Flex in almost no time. The whole purpose of using Flex is to make development easier. But the MXML makes it seem like it's vastly different. So, I'm going to show (from a very high level) how similar coding ActionScript 3.0 is just like ActionScript 2.0. I'm not going to get into all of the details of some things in this article, because I plan on writing other articles focusing on specific aspects of ActionScript 3.0. If you're not a strong ActionScript 2.0 developer, this may not make a lot of sense. Hopefully as additional articles come out and explain the specifics of what's going on are published, this will all start to make sense. But we have to start somewhere, and I'm going to start by showing how I create a Flex application.

The cool thing that I really like about FlexBuilder 2 is that you can create ActionScript only Flex Projects. It's a little confusing because there are so many things revolving around term “Flex” (the FlexBuilder IDE, Flex Framework, Flex Projects, Flex Data Services, Flex SDK, etc.). They all sound like the same thing, or elements of the same thing, but it takes some time to understand that they are quite different (or at least distinct). What I'd like to do is show people that using FlexBuilder doesn't mean you have to get stuck in MXML as many tutorials would have you think.

You can create ActionScript Projects with nothing but a text editor and the free Flex SDK. But for this series of tutorials, we're going to be showing how to do it in FlexBuilder 2. I'm also going to assume you have a pretty good handle on ActionScript 2.0 classes, so we're not going to crawl into every line of code this time around.

Creating an ActionScript Project

Start by creating a new project (everything in Flex is a project), but don't create a Flex Project. Choose to create an ActionScript project in FlexBuilder 2 under File -> New -> ActionScript Project.

Give the project a name, in our case, we're calling it “DrawingApplication”. At this point, you can just click “Finish”. FlexBuilder will set up the project and everything you need, including a folder structure and a number of files that are used for configuration and debugging (which we'll discuss in later tutorials) and sets a class file in the root called “DrawingApplication.as”.

Notice that there is no MXML file at all. We have our root class and at this point we're ready to code. For this example, we're going to make a simple drawing application. You should check out the final app to be able to follow along. You can choose a color from the pallet on the top left side. Then just use your mouse to draw on the rest of the stage. If you right click on the drawing demo and select “View Source”, you can download the source code and follow through with the explanation of what's going on here. “View Source” is a new feature in Flex that makes it easy to share your source code with other developers.

Ok, if you have clicked the demo and clicked View Source, then we can walk through the application and the code that you can see in the View Source.

There is only one class file, but the first thing that you'll notice that is different than ActionScript 2.0 is that the class is enclosed in something called “package”. We actually had packages in ActionScript 2.0, but they were included in the class definition. If you had a class called “MyClass” in a directory structure of “com.myDomain” then you would have defined the class as com.myDomain.MyClass. The package separates this (it just means the directory where you'll locate particular class). So in the previous example, you would have a package of com.myDomain and a class called MyClass. In this case, since our class is in the root the package is declared, but there is no path needed.

After the package declaration, and before the class definition, we import the other classes we intend to use. This should look very familiar, as it's identical to the way we would import classes in ActionScript 2.0.

Next comes our class definition. Notice that our class extends the Sprite class. In previous versions of Flash, we pretty much had the MovieClip and only the MovieClip to display graphics and interact with them. But over the years, MovieClip has become bloated with a lot of options that we very often don't need. To conserve resources, ActionScript 3.0 has a number of different “display objects” that pack only the resources that we need for a particular job. From the simple Shape, to the familiar MoiveClip there is now a pallet of options to choose from when you need to display something visually.

Display objects and display lists (how ActionScript 3.0 handles depth management) is probably the biggest (and best) change. I'm not going to get too deep into it now, but that will probably be the subject of our next article on ActionScritp 3.0. It's good stuff and deserves it's own discussion.

Before the constructor, we set up a few properties, _colorPallet is an array of colors we're going to be able to draw and _colorListeners is an array (a parallel array that matches the order of _colorPallet) that references our event listeners defined on the bottom of the class file. Putting them into Arrays just makes it simple to loop through and configure our buttons when creating our pallet on the stage.

In our constructor for DrawingApplication, we start by setting the stage alignment to the top left (by default, Flex centers the stage within the available view space). Then we call init() to initialize the application.

init() calls two other methods, “createPaper” which creates the background we're going to draw on, and “createPallet” which creates a few buttons that we can use to change the color we're using to draw.

Both of these methods are very similar, so I'm going to discuss them in broad strokes again. We don't need all of the assets of MovieClips, so we can create simple Sprites. Sprites inherit the drawing API which is accessible from their “graphics” property. The drawing API has the same methods you're already familiar with (lineTo, moveTo, beginFill, etc.) but it also has some useful new methods like “drawRect” (which draws a rectangle) and “drawCircle” (which does what was actually pretty challenging in ActionScript 2.0).

In both methods, we add a couple of event listeners. In the case of the paper, we want to know when mouse down and mouse up events occur, so we can start drawing lines when the mouse moves. In the case of the pallet buttons, we just want to change the current color we're using.

onBeginDraw activates our paper to listen for mouse move events and draw lines as the mouse is moved. onEndDraw removes this listener so that the paper will stop drawing lines on the mouse move.

The last five methods are the ones assigned to the pallet buttons (based on the _colorListener array we already set up). They listen for click events and then change the _currentColor property.

Conclusion

That's really it. It's just that simple. In less than 100 lines of ActionScript (that should look very familiar to ActionScript 2.0 developers), we have created a pretty robust drawing application. We didn't have to touch MXML (which definitely has it's place and is nothing to fear). But there is also no reason that skilled Flash developers couldn't jump right in and start busting off some really great Flash 9 applications today. The demand for Flex2 developers right now is HUGE. But many good Flash 8 developers don't seem to realize that they are already 90% there when it comes to developing for Flex2. FlexBuilder2 gives you another 9% of help when working in the new object model. So, that leaves about 1% of effort to dig in, read the docs and take on a new skill that could really advance your career.

Over the next few months, we're going to be focusing on specific aspects of Flex2 and ActionScript 3.0 that will help get you over that last 1%. But I wanted to create something to show our readers that it's really not that hard. It's powerful, and right there for the taking if you just put a little time playing with it.

I hope this was helpful to give you an overview of creating ActionScript Projects in Flex. We're planning to release a number of tutorials that go in depth to specific aspects of Flex2 in the coming months. If we've wet your appetite, I'd recommend checking out the FlexBuilder2 demo and grabbing a copy of the ActionScript 3.0 Cookbook from O'Reilly from Amazon or Barnes and Nobel (none of these are affiliate links). The Cookbook exclusively focuses on creating these types of ActionScript Projects in Flex2 and is a great learning tool and reference book.