Advertisement
  1. Code
  2. Reviews
Code

Flash Builder for AS3 Developers

by
Length:MediumLanguages:

Last week Adobe released a beta for Flash Builder 4; the update to Flex Builder 3. There's been a lot of discussion on the name change but it's clear that Adobe wants to sort out the confusion that Flex is a framework and Flash is the platform.

Seeing how I've been using Flex Builder to write my ActionScript 3.0 projects for over a year now, I figured I would highlight some of the new features to help all you ActionScript 3.0 Flash Developers out there..

Unfortunately, during my day to day work I don't get to use Flex all that much. With that in mind I'll solely focus on features which relate more to ActionScript 3.0 projects, but firstly here are some good resources that talk about Flash Builder 4's Flex 4 support:

With the Flex stuff out of the way, let's jump right into features you can use in your next ActionScript 3.0 project.

Refactoring

Refactoring is a critical part of any application's development. Refactoring refers to renaming classes and moving them around to help organize and optimize your underlying code structure. Refactoring has always been a sore spot in Flex Builder but Flash Builder 4 adds two new commands to make things easier.

First up is Rename. This allows you to rename a variable or method and all references to that item will be updated. This is very important to have and I'm glad to see it has it's own dedicated menu option. Here is a quick example of how to use it:

  1. Find a variable or method you want to rename.
  2. Highlight it and right click.
  3. Select Refactor > Rename.
  4. Fill in the new name and hit continue.
  5. All files with a reference to this item will be changed and updated.

Next up is Move. This is important when moving a class file from one package to another. This actually existed in Flex Builder 3, but in Flash Builder it will actually rename the class's package to the location it was moved to. This is incredibly handy and a great addition to the editor. Here's how to use it:

  1. Right-click on a class file you would like to move.
  2. Select Refactor > Move.
  3. Find a destination and hit continue.

Package Explorer Updates

Aside from the updated icons, the package explorer is now easier to read and understand. Also, there's a really nice feature that lets you expand a class's file and see all the methods in it without having to open it up. Here's an example:

class_viewer

Now default packages are clearly marked and all sub packages have different icons from the main package to help clearly see package hierarchy better.

In addition to those features, all projects now have the same icon as the Flash IDE, a red box with an F over it. This is Adobe's way of reminding you that everything is built for Flash, but I miss seeing Flex and ActionScript projects clearly being visually different.

project_icons

ASDoc Panel

There's now a new ASDoc panel that will show you code documentation on any variable or method you highlight. If there is no comment to go with the selected item, you will see a simple description of the item.

asdoc_panel

Conditional Break Points

Breakpoints are a great asset when developing in Flex Builder and this feature has been slightly improved in Flash Builder. Conditional break points allow to you to stop your code when a specific condition has been met. Let's say you want to test when a Sprite goes off screen? Now you can create a break point and have it activate when the Sprite's x is greater then stage.stageWidth.

  1. Create a break point.
  2. Right-click on it and select break point properties.
  3. Select enable condition.
conditional_breakpoint

Run To A Specific Line

This allows you to continue past a break point to a specific line of code. This is great if you are in the middle of stepping through your break points and want to see just a small part of your code get executed. Here's how you can do this:

  1. Create a break point.
  2. Run Debugger until the break point is reached.
  3. Goto the line you want to run to, right-click then select Run to line.

Unit Testing

Unit testing allows you to create code tests that validate parts of your application. They're very big in almost every language, yet are new to Flash development. The basic idea is that you write a simple class to run code from another class to validate that it was successfully able to execute the command. Unit testing is now built into Flash Builder. It actually makes use of FlexUnit. Although going into the full setup for unit testing is well out of the scope of this article I'll show you a few simple steps to get it up and running:

  1. Right-click on the Class you want to test, select New TestCase Class and hit next.
  2. Choose which method you want to test.
  3. Once class is created you can right-click on the unit test class and select "Execute Unit Test".
  4. Add your unit test code.
  5. Use the Run or Debug to execute your app as a unit test.
testcase_class

Setting up good unit tests can be complex and very time consuming, but it's great to see Flash Builder help automate as much of this as possible. Hopefully unit testing Flash applications will become a more widely accepted practice.

Templates

This was one of the features I was really looking forward to seeing added to Flash Builder. Code templates in Eclipse allow you to save a snippet of code and call it up at any time. It is really useful when setting up for loops or repetitive scaffolding code you may need to type out over and over again. Unfortunately, template implementation is limited to the setting up of Class files.

6_file_templates

Here is where you can find the settings in order to update them:

  1. Go to Eclipse Preferences panel.
  2. Unfold Flash Builder tab.
  3. Select File Templates.
  4. Modify to your heart's content.

Player Targeting

In Flex Builder 3 you couldn't target a specific version of the Flash Player. Now in Flash Builder you can tell the project to build to the exact version of the Flash Player you need. It's also intelligent enough to tell you what is Flash Player 10.x.xxx specific verses Flash Player 9.x.xxx specific. There's also an updated Flex SDK 3.4 for Flash Player 9.x.x. If you select Flex SDK 4.0 you are locked into Flash Player 10.x.xxx. Here is how you can modify this property:

  1. Right-click on a project and select Project Properties.
  2. Go to the Compiler tab (this has a different name depending on what kind of project you're in).
  3. You can choose the Flex SDK version, then below that is a property for Flash Player Options to modify the specific version you want to build for.
  4. This is the same as putting -target-player=10.0.0 in the additional compiler arguments window.
target_player

Bugs, Problems and Workarounds

I've noticed a few issues while setting up Flash Builder 4 outside of it being a beta and thought I would share my notes here:

If you're on a mac and try to install subclipse you won't get very far. I found this great tutorial to help walk you through getting it to work.

When you do get SVN setup and checkout a project with the new project wizard as a library it will not remember the source path you select. To give you an example, when I check out Flash Camo and select src as the main source directory I still have to go into the project properties, once it is checked out, and reselect the source folder and all of the classes. This happened in Flex Builder 3 as well and is still a little annoying.

Want ANT support? I would suggest installing the plugin version of Flash Builder since it also installs a clean copy of Eclipse 3.4 (Ganymede). You will also get the Java editor but you can just ignore it if you have no use for it. My first impression of the standalone Flash Builder was that a lot of good things were stripped out of their custom Eclipse Build.

This is not a bug but more of an observation between creating a Flex 4 project vs a ActionScript 3.0 project and something that every developer should take into account. Make a default Flex 4 project and a default ActionScript 3.0 project then perform a release build for each and take a look at the swf's file size. A default Flex project with no code is at 194k vs a default ActionScript 3.0 project at 562 bytes. Now of course the Flex project is going to be larger since it includes the framework but starting at almost 200k is a huge overload if you are not taking full advantage of the framework. Just something to think about next time you are specking out a project and what technology you are planning on using as the code base for your project.

For the most part, it appears that all of the topics I discussed in my Flash Developer Sandbox Tutorial (part 1 and part 2) will work for you in Flash Builder. As I mentioned above, the only issue is the SVN. So if you are new to Flash Builder and want to learn how to set up a streamlined workflow check out my tutorial.

Closing Thoughts

It looks like Adobe added some great new features to Flash Builder making it an even better tool for developing Flash projects. Even though the majority of new features were placed on Flex Projects I hope I have illustrated several key enhancements that ActionScript 3.0 developers can take advantage of. As with any software release there are lots of features people would have liked to have seen added, but I'm very content with what's being delivered in this beta. With stiff competition from FDT it's getting harder to pick a favorite just yet. The unit testing alone is a major enhancement and probably the one feature I am most excited about. I'm also looking forward to playing with the newer version of the Flex Framework.

Please post your thoughts, feelings, or issues below in the comments. Thanks for reading.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.