Even though Flex Builder includes its own set of components, there are two cases where you might want to use Flash CS3's V3 components in a Flex Builder project:
* when using Flex Builder to create the code for a .fla file
* when producing an ActionScript-only application that you want to be able to compile in both Flash CS3 and Flex Builder
This article explains how to use Flash CS3's V3 components in Flex Builder. The process isn't pretty, but it works. Note that before you get started you'll need to install the Flex Builder 2.0.1 Updater and the Flex 2.0.1 patch for Flash CS3 Professional compatibility. Or simply use Flex Builder 3 (now in beta), which doesn't require any special patches for V3 component compatibility.
As a simple example, let's assume we want to use the V3 TextArea component in Flex Builder. Here's the general process we follow:
1) Create a .swc file containing the desired V3 components.
2) Add the .swc file from Step 1 to the Flex Builder project's Library path.
3) Import and use the component classes.
To generate the .swc file in Flash CS3, we follow these steps:
1) Make a new Flash CS3 ActionScript 3.0 .fla file.
2) Drag the desired component(s) to the Library. In this example, we'll drag the TextArea component to the Library.
3) Choose File > Export > Export Movie.
4) For File name, enter v3components.swf. (We don't even want the generated .swf, but there's no other way to get the .swc to compile.)
5) Select a folder in which to save the .swf file.
6) Click Save.
7) In the Export Flash Player dialog, check Export SWC.
8) Click OK.
The preceding steps generate two files, v3components.swf and v3components.swc, both of which are placed in the folder selected in Step 5.
Now let's use v3components.swc in a Flex Builder project. Follow these steps:
1) In Flex Builder, select File > New > ActionScript Project.
2) For Project name, enter "V3Test.as".
3) Click Next.
4) For Main source folder, enter "src".
5) For Main application file, enter "V3Test.as".
6) On the Library path tab, click Add SWC.
7) Browse to the v3components.swc file from the preceding procedure.
8) Click Finish.
9) Update the code in V3Test.as so it looks like this:
package {
import flash.display.Sprite;
import fl.controls.TextArea;
public class V3Test extends Sprite {
public function V3Test() {
var t:TextArea = new TextArea();
t.text = "You're not cookin'";
addChild(t);
}
}
}
10) Run the project.
So that wasn't too hard. But there's no going the other way--that is, you can't use Flex framework components in Flash CS3. Ahh...wouldn't it be great if Flash and Flex Builder shared the same set of interchangeable components? One can only dream...
--
A final note: linking directly to the component .swcs or component source included with Flash CS3 doesn't work. You get errors such as the one shown below. Hopefully including the error on this page will help people google their way here...
TypeError: Error #2007: Parameter child must be non-null.
at flash.display::DisplayObjectContainer/addChildAt()
at fl.controls::BaseButton/fl.controls:BaseButton::drawBackground()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;BaseButton.as:538]
at fl.controls::LabelButton/fl.controls:LabelButton::draw()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;LabelButton.as:600]
at fl.controls::Button/fl.controls:Button::draw()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\controls;Button.as:167]
at fl.core::UIComponent/fl.core:UIComponent::callLaterDispatcher()[C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Component Source\ActionScript 3.0\User Interface;fl\core;UIComponent.as:1379]
at [renderEvent]
I have just confirmed with Flash Player engineering that Flash Player's Event.DEACTIVATE event does not work in all browsers. For example, on some versions of Macintosh Safari, neither Event.ACTIVATE nor Event.DEACTIVATE occur. In others, Event.ACTIVATE occurs, but Event.DEACTIVATE does not. In Macintosh Firefox, Event.ACTIVATE occurs, but Event.DEACTIVATE is not triggered unless system focus moves to another Firefox window (not another application window) or the browser address bar.
Moral of the story: before using the Event.DEACTIVATE or Event.ACTIVATE events, test to make sure they work on your target browser(s). (So far I haven't seen any problems on Windows browsers.)
>> Test Event.ACTIVATE here
>> Source code
As an alternative to Event.DEACTIVATE, consider detecting when the mouse pointer leaves the Player area via Event.MOUSE_LEAVE. Note that there's (strangely) no companion Event.MOUSE_ENTER event for Event.MOUSE_LEAVE, but you can hack one yourself using MouseEvent.MOUSE_MOVE.
Thanks to Michael Shamoon and Hoss Gifford for bringing this issue to my attention.
recently I finished migrating the code base for unity from ActionScript 2.0 to ActionScript 3.0. as I did the migration, I wrote down all the things I changed along the way. a few general trends I noticed:
-the code base got smaller (was 10000 lines, now 7000 lines)
-the code is much easier to follow
-Flex Builder's error messages guided me through most of the required changes
admittedly, I did a fair amount of refactoring, and that helped the code base's size and readability, but I was still pleasantly surprised to see that ActionScript 3.0 is generally not more verbose than ActionScript 2.0. in particular, all my xml handling is *much* shorter now, thanks to e4x.
here is the list of specific changes i made during the migration:
##
added package declaration for all classes
##
removed package name in class declarations
##
added 'public' modifier to class definitions
##
changed Void to void for all functions with no return value
##
removed access-control modifier (public) from interface members
##
changed private constructors to public
##
moved from custom depth management system to display api depth management (e.g.,
DisplayObject.addChild())
##
changed "private" to "protected" where subclasses need access to a member
##
explicitly declared "rest" parameter for methods that use undeclared (extra) parameters
##
changed undefined to NaN in checks for unassigned variables of type Number
##
imported flash.utils.* before using setInteral()/clearInterval()
##
added default values for optional parameters (e.g., port:int = 9100)
##
removed member access through variables whose value is null. e.g.,
var o = null;
o.m() // Error in ActionScript 3.0, allowed in ActionScript 2.0
##
added thrown exceptions for error conditions
##
changed Number to int where appropriate
##
changed System.security to flash.system.Security
##
changed legacy XML objects to E4X XML objects
##
changed system.capabilities to system.Capabilities
##
removed check for XMLSocket.connect() return value (no longer returns a boolean).
listen for securityError instead.
##
imported SharedObject from its new package (flash.net)
##
added "override" attribute to method overrides
##
changed XML.load call to URLLoader
##
changed "typeof" datatype checks to "is"
##
changed fixed-value variables to constants
[UPDATE: the test run is done. a training tour announcement with schedule and venues is coming soon]
i'm holding a 9-hour day of free ActionScript 3.0 training next wednesday in toronto. it's a practice run for a training tour i'll be doing around the world over the next year.
i currently have 10 spaces remaining in a room of 25 people. if you would like to participate, please send your name and email address to colin@moock.org, with the subject ACTIONSCRIPT TRAINING. the first 10 responses get a spot. the course is very grueling, so please be prepared for an intense day.
location:
downtown toronto
(156 augusta ave in kensington market)
time:
wed, august 15, 2007
9am-6pm
course content:
-introduction to object-oriented programming in ActionScript 3.0
-covers classes, objects, loops, conditionals, inheritance, functions, methods, variables, events, and display programming
-lecture notes here
audience:
-ambitious beginners
-intermediate ActionScript programmers
-advanced programmers with no knowledge of ActionScript 3.0
thanks to shawn pucknell of fitc for providing the space, and doing the production for this event.
by default, there's no hotkey for folding/unfolding asdoc comments while editing a class in flex builder. but you can add one:
Preferences > General > Keys > Modify (tab) > Navigation (Command
Category) > Toggle ASDoc comments
ahhh.
now if only flex builder would remember the folding state when you reopen the file...