Why Flex?

Some of you may have already read
Pierre’s earlier post on Flex 2 where he demonstrated a simple “Hello World” type program using only a few lines of code. This is an example of one of the tasks Flex seems ideally suited for- developing (attractive) interfaces for web applications. Another potentially useful application of Flex programs that may not be as obvious however is for displaying information in a meaningful way.

Let me take a step back for a second though and make something clear in case some of you aren’t familiar with what exactly Flex is. Flex is an alternative way of creating Flash animations. That’s somewhat of a simplification but in the end that is one way to think of Flex- as a free alternative to Adobe Flash CS3.

We all know that many of the current methods for visualizing biological data leaves something to desire. This is where flex could potentially come in handy! Flex programs can be written using ActionScript which in it’s recent incarnation (AS3) looks and feels pretty similar to many of the other object-oriented programming languages we have come to know and love. Furthermore, it is probably one of the easiest methods for generating fairly simple graphics (GD::Simple is another.) Add on top of that built-in regexp, database and xml support and you now have in my opinion a pretty good reason to learn Flex

Setting up a free flex development environment on windows

You need essentially three things to create flash (.swf) files on windows using the free Flex 2 sdk: an editor, the Flex 2 SDK/compiler and a flash player. While any text editor would work, FlashDevelop is especially useful in that along-side of some other nifty features it can be set-up to compile your flex applications.

Basic steps

1. To get started, download the Flex 2 SDK and extract to desired location, e.g. C:\flex_2_sdk.
2. Download and install the latest version of FlashDevelop 3.
3. Open FlashDevelop. Click on Tools -> Installed Plugins -> AS3 Context -> Settings.
4. Find where it says “Flex 2 SDK Location” and add the path where you extracted the sdk to, e.g C:\flex_sdk_2.
5. Make sure the .swf (Flash file) extension is associated with a flash player. The Flex 2 SDK comes with a flash player which you can find in the “\player\debug\” folder (C:\flex_sdk_2\player\debug\SAFlashPlayer.exe)
6. Copy and Paste the code, and save as “Test.as”:

   package {
       import flash.display.Sprite;
       public class Test extends Sprite {
           public function Test() {
               init();
           }
   
           private function init():void {
               graphics.beginFill(0xff0000);
               graphics.drawEllipse(100, 100, 100, 100);
               graphics.endFill();
           }
       }
   }
   

7. Done! Hit the button to build (Control + Enter) and the flash player should pop-up on your screen displaying a masterful work in contemporary art:

 

Adding support for debugging (trace)

The last thing you will want to do is add “trace” support. Actionscript has a useful function called trace() which works similar to STDERR. Any output sent to the trace function will only show up during debugging. Adobe Flash CS3 has an output window to show this by default. For FlashDevelop you have to set this up yourself. The easiest way I found to handle traces with FlashDevelop is to use a provided tool called FlashConnect. It requires adding a couple more lines of code to your file, but for most purposes should be sufficient.

1. Find the location of the included file FlashConnect.as (e.g. C:\Program Files\FlashDevelop\FirstRun\Library\AS3\classes\org\flashdevelop\utils\FlashConnect.as)
2. Add an import statement of the code to include the FlashConnect library, org.flashdevelop.utils.FlashConnect.
3. Add the following directive to specify where the compiler should find it:

   
   /***
   @mxmlc -source-path=C:\\Program Files\\FlashDevelop\\FirstRun\\Library\\AS3\\classes\\
   */
   
   

4. Call the trace function with FlashConnect.trace(”some string…”).
5. Your modified code should now look something like:

   package {
       import flash.display.Sprite;
       import org.flashdevelop.utils.FlashConnect;
       public class Test extends Sprite {
       /**
       * @mxmlc -source-path=C:\\Program Files\\FlashDevelop\\FirstRun\\Library\\AS3\\classes\\
       */
   
           public function Test() {
               init();
           }
   
           private function init():void {
               graphics.beginFill(0xff0000);
               graphics.drawEllipse(100, 100, 100, 100);
               graphics.endFill();
               FlashConnect.trace ("bla");
           }
       }
   }
   

6. That’s it! Compile as before and you should now see the text you passed into trace() displayed under “output” at the bottom of FlashDevelop.

Now what?

Hopefully as I become more familiar with actionscript I can write a couple more tutorials on things like parsing xml or generating simple graphs. For now though.. I’m going to sleep.

Credits & References

The example source-code used above comes from the excellent book Foundation Actionscript 3.0 Animation: Making Things Move by Keith Peters.

For more information on using trace() with FlashDevelop along with several alternative methods check out this forum post on FlashDevelop and trace.

–edit–
Philippe over at the FlashDevelop forums has pointed out that the @mxmlc directive used above to show trace output will only work for quick-builds. For more information see the forums post on the topic mentioned above. Thanks Philippe!

---

Possibly related posts: (automatically generated)

• Flash or Flex?
• Use FlashDevelop for Flex and AS3.0 editing
• So you wanna go AS3 for Free?
• Adobe releases trio of Labs goodies for designers, developers