Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that developers encounter the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
In this article, we will delve into Flash-Flex integration on a more intimate level, using both Flash and Flex in a completely integrated development workflow. Using David Stiller's Click-and-Paint tutorial as a basis for our enhanced application, we will convert a timeline-based Flash project into a class-based project, but using Flex Builder as the code editor. Essentially we will use the Flash IDE as the assets editor and SWF compiler, and Flex Builder as the ActionScript 3 editor (without using the Flex compiler).
In this article, you will learn how to set up a Flex project workspace to enable the editing of Flash IDE-compiled ActionScript 3 class files. In doing so, you will no doubt discover why Flex Builder is a much more powerful tool for ActionScript class editing than the Flash Actions panel. As one of my Flash colleagues is fond of saying, "Once you go Flex, you never go back." :) But this isn't about making converts to either Flash or Flex development. Whatever your specialty, this series is here to show you that with a little ingenuity, you can have your cake and eat it too.
Flash Actions panel or Flex Builder: for code editing, there is no contest.
Many Flash developers, when they have reached that point in their experience of the Flash authoring tool, suddenly realize how completely and utterly inadequate the Flash IDE is at code editing. Most of this is due to the fact that the Actions panel in Flash, compared to more mature tools like Eclipse, Visual Studio or even Dreamweaver, is missing some very crucial features. In a word, Flash sucks at code editing.
But that's okay. Flash was never meant to be a coder's paradise. It was meant to be the interactive fusion of art and science, the synthesis of design and code, the right-brain meets left-brain full hemisphere experience-creator's dream. And at that, Flash has done enormously well, bringing together creative ideas and assets from design tools such as Photoshop, Fireworks and Illustrator, even After Effects and various video editing tools, combined with some industrial-strength code from the ActionScript 3.0 language, all backed by an ultra-fast precision-engineered Flash Player runtime. Not bad for what used to be nothing more than a fancy vector-based gif-animator.
Flash does design and animation very well; that's what the timeline is for. But now that ActionScript 3 has come along, it's almost as if part of the technology has outstripped its original tools. I've heard many Flash developers expound: "You don't really use the Actions panel for code, do you?" The Flash IDE is just simply no longer up to the task of managing an advanced OOP, class-oriented coding workflow.
Why then do so many developers choose third-party ActionScript editors such as SEPY, FlashDevelop and FDT, for code editing with the Flash IDE, instead of just switching to being Flex developers? The reason is that many Flash developers love mixing up design with code, even as they use industrial-strength tools for their code editing needs. They like coding with the assistance of a timeline metaphor, and may not always want to build component-centric experiences, no matter how many cool things you can do with the Flex Framework. Others simply have not found the time or opportunity to make the migration to component-centric frameworks meant for RIA-building in the Flex development environment. Whatever the reason, that's okay. Flash developers, you can have your cake and eat it too.
The time has come to introduce the power of Flex Builder into the Flash development workflow.
Image 1: Using Flex Builder in the Flash development workflow.
This tutorial assumes a basic familiarity with installing and using Flex Builder. For a basic Flex Builder primer, see the Community MX tutorial Flex 101: Part 3 - Using Flex Builder 2, most of which is equally applicable to Flex Builder 3.
In order to begin coding our application, we first need to prepare our workflow.
This is a crucial first step. We do this because we are using Flex Builder as an ActionScript editor, not a SWF compiler. By turning off Build Automatically, we are effectively disabling automatic compilation by the Flex compiler. To maintain the 'Flash' part of the workflow, we will be using the Flash IDE to compile the SWF.
Image 2: Creating an ActionScript Project in Flex Builder 3.
Creating an ActionScript Project as opposed to a Flex Project allows us to sidestep having to declare an MXML application file for the project, which would serve no purpose, as we cannot use MXML with the Flash compiler.
Flex-compiled applications do not have a timeline or even frames upon which to lay out assets, which is why MXML files are necessary in Flex. The Design View in Flex Builder allows one to see a graphical representation of the MXML layout, but it is not meant to duplicate the versatility of the Flash timeline. Creating an ActionScript project in Flex forces the developer to rely on dynamic instantiation of assets, without the advantage of MXML as a layout helper.
Image 3: Creating an ActionScript Project in Flex Builder 3.
Notice that Flex Builder automatically creates the necessary package folders for the Paint class, and auto-fills the basic class code to start off our application, and opens the file in the Editor.
We have borrowed this project from David Stiller's Creating Click-and-Paint Flash Content, Part 2 tutorial, and will be converting it to a class-file based project using Flex Builder.
This is the Flash sourcefile that we will be working with in this tutorial. Think of the other two FLAs as the "before and after" files.
Image 4: The project file directory in the Flex Navigator view.
The files ending in _final are the completed files for this tutorial.
Now that we have finished setting up our workflow, let us begin converting the application.
This points the FLA to use the code in the Paint.as class file instead of the timeline.
package com.communitymx.flashflex {
import flash.display.Sprite;
public class Paint extends Sprite
{
public function Paint()
{
}
}
}
Code 1: The default Paint.as code.
public function Paint()
{
trace("ready to go!");
}
Code 2: Adding a trace statement to the Paint class constructor.
What happens? Errors!
Image 5: The Flash CS3 Compiler Errors panel.
And here is where the true power of Flex Builder really shines.
Image 6: The Flex Builder auto code completion popup.
Not only does Flex Builder present you with a list of classes to complete the word, intelligently selected from the current package scope, but it adds the MovieClip import statement for you, and deletes the now unused Sprite import. For any Flash developer who has slogged through coding in the Actions panel trying to remember the spelling of countless class names (*author raises hand*), this feature alone is a godsend. But read on, there's more.
If the auto-import or the auto-import-deletion feature does not work, it could be that you have turned off one or both of these capabilities in your Flex Builder preferences. Select Window > Preferences, find the Flex > Editors > ActionScript page, and ensure that "Keep imports organized" and "Remove unused imports when organizing" are checked.
Your code should now look like the following:
package com.communitymx.flashflex {
import flash.display.MovieClip;
public class Paint extends MovieClip
{
public function Paint()
{
trace("ready to go!");
}
}
}
Code 3: Paint.as with correct subclassing.
You should now see the text "ready to go!" in the Output panel.
We have now successfully created a class file in Flex Builder, associated it as the Document class for a Flash FLA Document, and compiled it in Flash.
Now let's begin the process of converting a timeline-coded project into a class file-coded project.
We will now begin the process of migrating this code from the Flash timeline to our new class file in Flex Builder.
All the code you should have remaining in the Actions panel are the paintClickHandler, clearAll, drawingClickHandler and setColor functions.
Your Paint.as file code should now look like the following:
package com.communitymx.flashflex {
import flash.display.MovieClip;
import flash.geom.ColorTransform;
public class Paint extends MovieClip
{
public function Paint()
{
//trace("ready to go!");
var col:ColorTransform = new ColorTransform();
col.color = 0xFFFFFF;
var colorTable:Dictionary = new Dictionary();
colorTable[paintRed] = 0xFF0000;
colorTable[paintBlue] = 0x0000FF;
colorTable[paintYellow] = 0xFFFF00;
colorTable[paintClear] = 0xFFFFFF;
var paintBuckets:Array = new Array(paintRed, paintBlue,
paintYellow, paintClear);
var drawingPieces:Array = new Array(cap, sliceA, sliceB,
sliceC, sliceD, sliceE, sliceF);
// initialize brush
Mouse.hide();
brush.daub.visible = false;
brush.mouseEnabled = false;
brush.mouseChildren = false;
brush.startDrag(true);
// paint code
for (var i:int = 0; i < paintBuckets.length; i++) {
paintBuckets[i].addEventListener(MouseEvent.CLICK,
paintClickHandler);
}
paintClearAll.addEventListener(MouseEvent.CLICK,
clearAll);
// beach ball code
for (i = 0; i < drawingPieces.length; i++) {
drawingPieces[i].addEventListener(MouseEvent.CLICK,
drawingClickHandler);
}
}
function paintClickHandler(evt:MouseEvent):void {
col.color = colorTable[evt.target];
setColor(brush.daub, col.color);
brush.daub.visible = true;
if (col.color == 0xFFFFFF) {
brush.daub.visible = false;
}
}
function clearAll(evt:MouseEvent):void {
for (i = 0; i < drawingPieces.length; i++) {
setColor(drawingPieces[i], 0xFFFFFF);
}
setColor(brush.daub, 0xFFFFFF);
brush.daub.visible = false;
}
function drawingClickHandler(evt:MouseEvent):void {
setColor(MovieClip(evt.target), col.color);
}
// helper functions
function setColor(mc:MovieClip, hue:int):void {
col.color = hue;
mc.transform.colorTransform = col;
}
}
}
Code 4: The migrated timeline code.
Let us tempt fate and see if that works without any tweaking.
Image 7: A missing class reported in the Compiler Errors panel.
Notice that Flex Builder allows for code completion for packages and classes, much like Flash does.
One problem solved, and others appear. But we are getting closer.
Image 8: More errors in the Compiler Errors panel.
Look again. What do you see?
We see properties declared as local variables in the constructor attempting to be accessed by functions outside their scope. Which is why we are getting the "undefined property" errors in the code.
In addition, we are attempting to instantiate certain classes, such as Dictionary and others, without importing them first. This does not mean that the timeline code was flawed (it compiled, didn't it?) It means that we can get away with a certain amount of "loose importing" when coding on the timeline, but not when we are coding in a class file.
So all of the 1120 errors in the Compiler Errors panel in Flash CS3 indicate property references for which we are either missing an import statement, or we have declared a scope local to the constructor, which must instead be declared as a class property.
public class Paint extends MovieClip
{
private var col:ColorTransform;
private var colorTable:Dictionary;
private var paintBuckets:Array;
private var drawingPieces:Array;
private var i:uint;
public function Paint()
{
Code 5: Adding property declarations.
When you type the property declarations, type until you get to the colon, then type part of the class word, such as "private var col:Col". Press Ctrl-Space (or Option-Space) to use the code completion feature to fill in the class name, and you will trigger the auto-import to place import statements for you.Notice anything else? Flex builder organizes your import statements alphabetically by package. Neat, huh?
We also need to change the local variables in the constructor function to class property references.
public function Paint_final()
{
col = new ColorTransform();
col.color = 0xFFFFFF;
colorTable = new Dictionary();
colorTable[paintRed] = 0xFF0000;
colorTable[paintBlue] = 0x0000FF;
colorTable[paintYellow] = 0xFFFF00;
colorTable[paintClear] = 0xFFFFFF;
paintBuckets = new Array(paintRed, paintBlue, paintYellow,
paintClear);
drawingPieces = new Array(cap, sliceA, sliceB, sliceC, sliceD,
sliceE, sliceF);
// initialize brush
...
Code 6: Updating the constructor with class property references.
In addition, the error messages in the Compiler Errors panel tell us that we also need to import the Mouse class.Your class file should now have the following code:
package com.communitymx.flashflex {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.geom.ColorTransform;
import flash.ui.Mouse;
import flash.utils.Dictionary;
public class Paint extends MovieClip
{
private var col:ColorTransform;
private var colorTable:Dictionary;
private var paintBuckets:Array;
private var drawingPieces:Array;
private var i:uint;
public function Paint()
{
//trace("ready to go!");
col = new ColorTransform();
col.color = 0xFFFFFF;
colorTable = new Dictionary();
colorTable[paintRed] = 0xFF0000;
colorTable[paintBlue] = 0x0000FF;
colorTable[paintYellow] = 0xFFFF00;
colorTable[paintClear] = 0xFFFFFF;
paintBuckets = new Array(paintRed, paintBlue,
paintYellow, paintClear);
drawingPieces = new Array(cap, sliceA, sliceB,
sliceC, sliceD, sliceE, sliceF);
// initialize brush
Mouse.hide();
brush.daub.visible = false;
brush.mouseEnabled = false;
brush.mouseChildren = false;
brush.startDrag(true);
// paint code
for (var i:int = 0; i < paintBuckets.length; i++) {
paintBuckets[i].addEventListener(MouseEvent.CLICK,
paintClickHandler);
}
paintClearAll.addEventListener(MouseEvent.CLICK,
clearAll);
// beach ball code
for (i = 0; i < drawingPieces.length; i++) {
drawingPieces[i].addEventListener(MouseEvent.CLICK,
drawingClickHandler);
}
}
function paintClickHandler(evt:MouseEvent):void {
col.color = colorTable[evt.target];
setColor(brush.daub, col.color);
brush.daub.visible = true;
if (col.color == 0xFFFFFF) {
brush.daub.visible = false;
}
}
function clearAll(evt:MouseEvent):void {
for (i = 0; i < drawingPieces.length; i++) {
setColor(drawingPieces[i], 0xFFFFFF);
}
setColor(brush.daub, 0xFFFFFF);
brush.daub.visible = false;
}
function drawingClickHandler(evt:MouseEvent):void {
setColor(MovieClip(evt.target), col.color);
}
// helper functions
function setColor(mc:MovieClip, hue:int):void {
col.color = hue;
mc.transform.colorTransform = col;
}
}
}
Code 7: The completed code for Paint.as.
Notice that we have declared the class instance properties with the private class attribute (also known as an "access control modifier"), but we have not done so for any of the functions. Although explicitly assigning class attributes to all properties and methods of a class is a best practice, not doing so merely defaults these class members to internal, which is to say that the class member is accessible to any reference inside the same class package.
Eureka! It works! And this time with no errors. You should now be able to use the application as it was originally created in the paint_as3.fla file.
Now that we have created our class file-based application, using Flex Builder as the editor, and Flash CS3 for the compiler, we can really see the distinct advantages of staying with Flash for part of our workflow.
In Flash we have:
And with Flex Builder, we have:
Combine these tools, and we have one extremely powerful workflow.
Another nice feature in Flex Builder, as seen in the preview for this tutorial, is the Outline view. This shows you all the class members within a class, including import statements, giving you a bird's eye view of your class capabilities.
Tip: to fullscreen an Editor in Flex Builder, double click the editor tab.
Tip: if you have a widescreen or large size monitor, open two class files, and grab and drag one of the editor panels till it docks on the right-hand side of the Flex Builder workbench, showing two columns of Editor views, thus allowing you to edit two files at once!
Tip: To check out all the neat features in Flex Builder that are just a shortcut away, try hitting Ctrl-Shift-L (or Option-Shift-L on Mac)...
There are a few very important caveats one must remember when using Flex Builder to edit ActionScript files for Flash projects:
Now you have enough know-how to use this workflow in your own projects. There are so many more cool features in Flex Builder that make one's coding experience efficient, that they are too numerous to list them all here. You can find out the rest on your own, with a good Flex Builder tutorial or by picking up a few "power tips" on Flex Builder.
In closing, I hope this tutorial convinces you that Flex Builder is not just for Flex, it can be for coding Flash projects as well.
Happy coding!
Keywords
Flash CS3, Flex, integration, workflow, flash-flex, flex-flash, fla, swf, compiler, Flex Builder
