Flex 2 featured on SitePoint

For the next couple of weeks, SitePoint will be featuring an article I wrote about Flex 2. It’s titled Flex 2: Rich Internet Applications in a Flash!, and it gives an excellent birds-eye view of Flex and Flex Builder. According to Alexa, SitePoint ranks in the top 500 websites on the Internet. In other words, this article pushes Flex into the minds of a very large audience.

Recently, Ryan Stewart pondered why more people don’t know about RIAs. You could say the same thing specifically about Flex. Articles on high-traffic websites like SitePoint need to show how easy, but powerful, MXML and Actionscript 3 can be. Many developers consider Actionscript as nothing more than kids stuff. Sadly, JavaScript, which is based on the same standard, gets more interest thanks to the recent AJAX push. Strong examples, perhaps even pointing out the parallels between MXML/AS3 and HTML/JavaScript, should help the development community reconsider Flash as a great option.

About Josh Tynjala

Josh Tynjala is a frontend developer, open source contributor, bowler hat enthusiast, and karaoke addict. You might be familiar with his project, Feathers UI, an open source user interface library for Starling Framework that is included in the Adobe Gaming SDK.

Discussion

  1. Brandon Ellis

    “Many developers consider Actionscript as nothing more than kids stuff” –
    Yep and no matter how great/powerful/badass we know it is, until they take ‘script’ out of the name it will continue to be slow at gaining credibility.

  2. arpit

    There is a pretty big trend towards scripting languages (tho AS doesnt seem to be reaping any benefits from it). A lot of people are moving towards python and ruby.
    We should just stop calling .swfs ‘flash movies’ 😉

  3. Josh Tynjala

    arpit,

    You make a good point about “Flash movies”. It’s sort of the default name for a SWF, but many SWFs you encounter on the web aren’t necessarily movies at all.

    Until recently, you might say the same thing about Actionscript’s “MovieClip” type. Thanks to Flash 9, the name feels more valid for it’s more specialized uses. For most visual pieces you’ll use the new “Sprite” type now. It’s like a MovieClip, but without the timeline. Hopefully Sprites will be better understood and accepted by developers from other backgrounds.

  4. Frank

    Josh,

    I’m not well-versed in Flash or AS at all, but one thing I always wondered was whether or not you could code Flash Movies or Flex apps entirely using AS.

    Or, are you also restricted to using the Flash development tool to do certain things that can’t be done in code?

    Thanks,
    Frank

  5. Josh Tynjala

    Frank, you can definitely create Flash movies using only Actionscript. For Actionscript 2 (for Flash 7 and 8 ), you should check out MTASC, an open source compiler. Many Flash developers swear by it because it has much faster compile times, and it is a little stricter with syntax than the official compiler.

    For a complete solution, I suggest taking a look at FlashDevelop. It’s an open source IDE that uses the previously mentioned MTASC to compile code, and another program called SWFMill to let you embed images, vector graphics, and fonts into your projects. FlashDevelop includes a wonderful code editor and project manager.

    For Flex and Actionscript 3, the free Flex 2 SDK doesn’t require the Flash IDE at all. You don’t even need Flex Builder. The Flex compiler allows you two compilation modes:

    1) Using MXML and Actionscript 3, you can build a project that uses the Flex Framework. You must use a base MXML Application to use the Flex components.

    2) Using only AS3, you can’t use the Flex components, but you can still access all the base Flash libraries provided by the Flash player. You could use this to build your own component libraries that don’t use Flex or to do anything Flash allows on it’s own.

    If you’re interested, FlashDevelop has been adding some experimental support for MXML and Actionscript 3 recently. They’re still exploring things, though, so Flex Builder will be your best bet for now.

    Finally, from a strict design standpoint, if you want to leave out the main Flash IDE from your workflow, you may be limited. You won’t be able to design objects with the visual drawing tools that the Flash IDE provides. For a developer, this generally doesn’t matter. If you\’re designing application skins, it might be easier to do it within Flash. However, I’ve heard that the Flex 2 SDK will let you import SVG so you could design things in another program such as Illustrator or some free alternative.

    I hope that helps, Frank.

  6. Josh Tynjala

    As an additional note, just so no one who may be new to Flash gets confused, you can draw items and create many types animation from within Actionscript. The Flash IDE just lets you do these things visually.

  7. Frank

    Josh,

    Thanks for the clarification… Flex looks really interesting to me. I’m still confused as to how AS integrates with it. I setup my xCode environment to allow me to code Flex, and followed the first “Hello World” sample from the Adobe Devnet site, but it was all XML-based. Am I wrong in assuming that AS is part of Flex?

    Excuse the ignorance… 😉

  8. Josh Tynjala

    Don’t worry about it. I’m glad I can give you some good information. Actionscript, like MXML, is a big part of Flex. You just happen to get exposed to MXML first since it’s such an integral part of Flex. It’s an easy application and container layout language, and it can have Actionscript embedded into it. For instance, if you want to listen for a button click, you might do something like this:

    <mx:Button click="this.buttonClickHandler()"/>
    <mx:Script>
        private function buttonClickHandler():void
        {
            //do something here in Actionscript
        }
    </mx:Script>

    You also have the option of building components inside Actionscript classes. For advanced components with a lot of functionality, it’s easier than MXML, and you’ll probably have an easier time organizing it all.

    For the best example, look in the Flex SDK 2\frameworks\source directory. You’ll find the actual source code Adobe uses to create the Flex Framework. 99% of it is pure Actionscript. Everything from the Button component, to Panels, to the way that drag and drop are handled is in this directory for anyone to extend and learn from.

    I’m sure if you go through more of the samples from Adobe, you’ll find some that use Actionscript to perform complex functionality. I know that they’re constantly adding new content, and I know that many developers will benefit from learning the component lifecycle. There are many events you can use, functions you can override, and best practices to learn.

    You should download Adobe’s open source Actionscript 3 libraries. These include more source code for functionality like RSS and Atom feeds, working with pictures fro Flickr, videos from YouTube, and more. I have some code on my downloads page that’s written in Actionscript 3. I wrote some classes to connect to AOL Instant Messenger, search through Google’s public API, and create particle systems.

  9. Frank

    Josh,

    Wow, thanks for clearing _that_ up.. hehe. I’m a JS developer myself, so it’s nice to know that I can use AS for what seems to be most of Flex-related development.

    I’ll definitely take a look at the links you suggested.

    One thing I noticed is that in the code you pasted, the event handler setup seems to be inline with the button tag. Is there anything similar to the “unobtrusive” style of JS for AS code?

    Also, any tips for someone coming from a JS background?

    Thanks again… Really appreciate it!

  10. Josh Tynjala

    It’s not generally considered bad practice in Flex to put AS in your MXML. I know it’s the proper way to do things in HTML/JS, though, so that may change later. How about something like this?

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
        <mx:Button id="myButton" label="Click Me!"/>
        <mx:Script>
        import flash.events.MouseEvent;
        override protected function initializationComplete():void
        {
            super.initializationComplete();
            this.myButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
        }
        private function buttonClickHandler(event:MouseEvent):void
        {
            //do something here
            trace("button clicked!");
        }
        </mx:Script>
    </mx:Application>

    If you’re looking to make it even more like HTML, you could put your script in a seperate .as file, and put this in your MXML:

    <mx:Script source="myButtonCode.as"/>

    For someone who has a background in Javascript, I’d recommend that you learn how to use classes in Actionscript, and brush up on your OOP. Get ready to write stricter code too.

  11. Michael Newman

    Maybe it’s not the name or the connotation that ActionScript has but the fact that it involves quite a bit of overhead in order to display it in a browser. It is the same reason that Java isn’t used that often on the Web: it is heavy and doesn’t really comply with standards (and here come the arguments… but programing MXML and AS3 to meet Web standards is a huge time commitment compared to HTML and JS).
    AS3 is a huge step in the right direction, but AJAX can fail gracefully and simply display a static Web page. Flex and Flash when they fail show nothing. So why would I program with a compiler if I could just do everything with DOM?
    I say this as I am designing a video player with Flex