Flash Builder for AS3 Developers
Jun 10th in Reviews
by Jesse Freeman
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..
Hello, my name is Jesse Freeman and I am Brooklyn based Flash Developer/Artist. I have been a Flash Developer for over 7 years now and an interactive artist for about 10 years. Some of my clients include VW, Tommy Hilfiger, Heavy.com, MLB, the New York Jets, HBO and many more. I have a Flash Blog called FlashArtofWar.com as well as my portfolio FlashBum.com. I also run a New York City meetup called Flash Developer Happy Hour that I invite anyone in the area to join.
Follow FlashBum on twitter @theflashbum.
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:
- Find a variable or method you want to rename.
- Highlight it and right click.
- Select Refactor > Rename.
- Fill in the new name and hit continue.
- 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:
- Right-click on a class file you would like to move.
- Select Refactor > Move.
- 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:
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.
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.
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.
- Create a break point.
- Right-click on it and select break point properties.
- Select enable condition.
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:
- Create a break point.
- Run Debugger until the break point is reached.
- 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:
- Right-click on the Class you want to test, select New TestCase Class and hit next.
- Choose which method you want to test.
- Once class is created you can right-click on the unit test class and select "Execute Unit Test".
- Add your unit test code.
- Use the Run or Debug to execute your app as a unit test.
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.
Here is where you can find the settings in order to update them:
- Go to Eclipse Preferences panel.
- Unfold Flash Builder tab.
- Select File Templates.
- 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:
- Right-click on a project and select Project Properties.
- Go to the Compiler tab (this has a different name depending on what kind of project you're in).
- 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.
- This is the same as putting -target-player=10.0.0 in the additional compiler arguments window.
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.
User Comments
( ADD YOURS )Mário Santos June 10th
Great post!
I’m exploring the new FB also, and found some of those improvements and some others, i think this Adobe really spent some extra time with it and for that we will find some useful tricks on this new version.
Cheers!
( )Alex June 10th
As usual, good article Jesse. You referenced FlashDevelop in the 4th paragraph of Bugs, Problems and Workarounds, but I think you might mean Flash Builder?
The only feature I’m still waiting for is a good way to have a colour theme saved for Eclipse/FB. At least it’s a bit better now with the ability to export/import profiles, but it’s still not the way I’d like to do it.
( )Jesse Freeman June 10th
Good catch, I knew I was going to do that at some point. There are so many names of editors to keep track of now: Flex Builder, Flash Builder and Flash Develop. Boggles the mind sometimes.
( )Ian Yates June 10th
Yup, thanks for that, consider it corrected.
( )Dario Gutierrez June 10th
Good article Jesse. I never use flex but now I see some improvements that makes interesting to use.
( )Matt Przybylski June 10th
Nice roundup of the new features. I’d really like to see you do an article that focuses on unit testing in FB if possible as I’ve never really understood the full benefit of it.
The templates is my favorite addition but until they make them fully editable like FDT I won’t make the switch.
( )Jesse Freeman June 10th
I just suggested doing a Unit Testing tutorial to the powers that be this morning. Last night I started adding it into my Flash Camo framework and it is something that every serious developer should know.
I agree with you on the code templates and it is amazing that Adobe missed the mark on adding them in. Poor choice on Adobe’s end but there is always hope it will make it into the next release.
( )Dave Reynolds June 10th
Good Article, one minor typo – in your mention of ANT support you say “Flash Develop” when I’m pretty sure you mean “Flash Builder”.
( )Jay June 10th
I still don’t quite get how to create a new actionscript project in FB4 and edit the .fla in Flash CS4 at the same time. There seems to be no smooth process on how to do this? With FB3 I was exporting a swc from my FLA and telling Flex Builder to use that as a library. Is this still the same way?
I thought FB4 was going to be geared towards the Flash developer who wants out of the Flash IDE. It doesn’t seem any easier (unless I am missing something obvious)
( )Jesse Freeman June 10th
Unfortunately there is no support for creating/working in FLAs from Flash Builder. FDT (the other eclipse based editor) actually allows you to do this but the work flow is less then ideal. What a lot of people do is, use Flex/Flash Builder for all of your code and use the IDE (Flash CS 3/4) to compile. You simply point your FLA’s doc class to the main class in your Flash Builder project. You can also check out this Ant script I use to use (Mac Only) to have Flex Builder compiler my code in the IDE then open it up in a web browser: http://flashartofwar.com/2008/08/29/flash-ide-and-ant/. I am about to do a workflow for FDT and one of the things I will talk about is how to compile FLA’s from it.
( )demiantriebl June 11th
flash builder 4 is a very good tool, and the fusion whit flash catalyst generated a new whorkflow… i whis your tutorials of the two tecnologies (flahs builder, and flash catalyst)… thank for all
( )David R June 18th
File Templates seems pretty limited, either I’m dumb or there really is no way to add new templates. If there’s a way to add new templates, please let me know!
( )Nasil Yapilir June 24th
Good article Jesse thanks for this. I use flex and flash..
( )Tom Chiverton June 26th
I wonder if those of us on Linux will ever enjoy these benefits ?
Adobe have been mostly silent since dumping a mostly-working Builder build onto their labs site last year…
Mean while, the community is pulling the code apart and enabling it to work with the latest Eclipse version itself – that’s how much we want to work with this great product, http://bugs.adobe.com/jira/browse/FB-19053 not withstanding.
( )Nek October 14th
The post is good!
( )Flash Builder 4 is not. I’m really disappointed by the lack of snippets, some real code completion/generation. Flashdevelop is so much better in these fields it hurts to use Flash Builder.
dafunker October 14th
I’m trying Flash Builder 4 beta v2 and i’m pretty sad about some trivial missing features we can find into FDT Plugin or Flash Develop
By example, we cannot create custom templates, there are some templates but only used when an actionscript (interface, class, file) has been created, will this feature be added ?
Another problem is the auto import command, it cleans unused imports but doesn’t add missing imports, apparently, we have to import missing class by making CTRL (or CMD) + SPACE behind missing class name.
I’ve got another problem with Syntax checking, with FDT or FD, all classes of our project is checked by the syntax engine but with Flash Builder, only the imported classed into main class will be checked
The template feature is for us, the most important one, the CFE Eclipse plugin can be the solution ? isn’t a too big / performance consumer plugin ?
( )