Flex 2 - Flash for Programmers

Flex 2 Discovered

Wow. Moving from Flash CS2 to CS3 (with ActionScript 3.0), I was surprised and excited. Now after trying Flex 2 for the first time, I'm amazed. Finally it makes sense to develop in Flash. Since I have completely switched to Flex 2 development, I will no longer post about Flash development. If you have Flash questions, I will still answer them to the best of my ability.


Why Flex is Better for Me

• I'm not an animator, I'm a programmer.
• Flex has named "States" while Flash has "frames" and "keyframes" (I know, they can be named).
• I don't consider applications/screens/UI components as MovieClips.

There are lots of other small reasons for me to choose Flex over Flash. The main one is the development environment. Assuming you've shelled out the $ for Flex 2 Builder, you are now working in Eclipse (yes, that's right -- Flash in a real programming IDE). If you haven't spent all that money and simply have a command line compiler, I'm sure you're still using a good programming IDE. This makes a big difference.


How do you get Started?

If you're looking to write a Web 2.0 application, a nice looking desktop application, a rich Internet component, or a fancy UI component, you've started in the right direction. Finding good programming information can be a little harder than usual in the Flash/Flex world.

ActionScript 3.0 and MXML are your languages. MXML compiles down to AS3 but allows Flex Builder to display components in the editor. Mixing both is ok so don't worry too much if you are doing the right thing.

1. Get a copy of Flex 2 Builder. Even the 30 day trial is fully featured. I strongly advise this over the compiler-only free version.
   
2. Read tutorials, get books, read through Adobe's online documentation.
3. Of course, check back here for new information.

Your Project

Write components for anything graphical. Even if you aren't going to re-use this component, having it wrapped up nicely keeps your code away from the main application's code.

Use ASDoc everywhere. If you're a Java fan or have used other document generation products, ASDoc will be familiar. Use it, use it properly, and use it heavily.

Write classes and code correctly. Don't write garbage and follow a common format.

UI components should: be able to re-size/reposition based on the window size, have styles, and use events.

Experienced developers can work with interfacing with web services, class hierarchies, and advanced code while junior developers can easily work with user interfaces, UI backing code, and small components.


Concepts

You are forced into using good practices by not allowing direct database access (both a design decision and a natural limitation I'm sure).

Meta data tags (like annotations in Java) are used to extend certain concepts.

After the function keyword, you may place "get" and "set" keywords to mark this function as a getter or setter. This allows simple get/set methods to act like public properties and reduce documentation. Don't forget not to name your variable the same as the method (it is common to place an underscore at the front of the private variable if it is accessed by get/set methods).

The override keyword (placed before the access type "public" etc.) is used to say "I am overriding a super class method." Meaning if it was spelled incorrectly, the compiler will give an error.

If you are familiar with Java, this will help when trying to learn ActionScript 3.0:

http://flexblog.faratasystems.com/?p=115


Coming up...

I hope to post a lot of helpful links to things that developers want and need when working in Flash. Check back often for new links, tutorials, and reviews to help you get ahead.

Flash for Developers

Are you a software developer new to Flash? I will be writing many mini tutorials which will help you overcome your frustrations and turn you into a Flash coding professional.

Introducing Flash CS3

Just a lead-in about the improvements in Flash CS3 (Flash 9): ActionScript 3.0 is simply amazing compared to the previous versions. It is no longer a headache especially now that the compiler reports errors to you and allows you to click on the line that contains the error. I know this is normal for every other language but ActionScript 2.0 was lacking this crucial feature.

Getting Started

So where does a developer start? First, you will want to check out Adobe's video tutorials located here:

http://www.adobe.com/designcenter/video_workshop/

These tutorials will help you get used to the editor and the development environment. The interface will appear very odd at first but remember this was developed for 2D animation.

I Want to Write Code!

If you have a strong programming background, you want to start writing classes, libraries, and find the ins and outs about the language. This can be a challenge at first.

The easiest way to start is by creating a new "Flash File ActionScript 3.0" with a layer called "actions" (this is a standard and should be the only layer containing ActionScript).

Tip: Double click the layer to rename it

From the Window menu, select Actions (or Press F9 on your keyboard) to bring up the actions tab. By default, this will appear in the middle of the screen. Simply drag and drop the tab down to where you see the Parameters tab.

I added the Align tab to beside the Swatches tab, the Components tab near the Library tab, and the Movie Explorer tab to the bottom-right hand side on it's own. I found these to be of critical importance.

Click on the Actions tab and you will be able to start typing ActionScript 3.0 code. But wait! You don't have any components on the screen. Use the Text Tool (the "T" on the left-hand side) and place a text element on the stage. Type Hello in the text area then click the Properties tab. From the dropdown menu, select "Dynamic Text" instead of "Static Text" and type in "textbox_txt" where you see "" (appending _txt is a standard in the Flash world).

Now you have a text area that can be referenced in ActionScript using the following code:

textbox_txt.text = "Hello World!";

Once you type that on the Actions tab, click on Test Movie from the Control menu.

Tip: Hit Ctrl+Enter to test a movie at any time

You should see "Hello World!" in the text area on screen. Wow!... not that impressive, I know.

In the Future

In the next tutorial, I will discuss creating classes in packages (and how to make them work), Document Classes (main), and some of the features of the language that are really helpful.