Flex primer for Flash users

by Tom Ortega II

Years ago, I used Flash® to develop rich Internet applications (RIAs). In building large-scale applications, I usually created one Flash application (FLA) that comprised one frame and a few hundred MovieClip symbols, each with a few hundred lines of code. Obviously, the code base was difficult to maintain.

Then, two years ago, I discovered Adobe Flex™. I liked how I could use Flex to create markup language and ActionScript™ code that would, in turn, generate files I could nest and reuse as components. I abandoned Flash for Flex for several reasons but the biggest one was that the Flex approach made more sense to me compared to Flash with its timeline and MovieClip paradigm.

However, with the release of Adobe Flash CS3 Professional and the Flex Component Kit for Flash CS3, I am now using Flex and Flash together—and it's a fantastic combination for building powerful applications that look great.

In this article, I familiarize Flash pros with Flex and show you how using the two together can really rock your world. But first I'd like to provide a quick primer on the similarities and differences between the Flash CS3 Professional authoring environment and Flex Builder™ 2.

The similarities

Both Flash CS3 and Flex Builder output SWF files that run in Adobe Flash Player. This is important to note because there seem to be some misconceptions. Some people think there is a separate Flex player, and others believe you need a special version of Flash Player to play Flex content. Neither is true. As long as you and your customers have Flash Player 9 installed, content from both tools play just fine.

Flash CS3 and Flex Builder both utilize ActionScript 3.0, which is based on ECMAScript. The fact that both tools use this common scripting language is incredibly powerful. Rest assured that anytime you code ActionScript 3.0 in either tool, your knowledge will easily transfer from one authoring tool to the other. In fact, a new feature in Flash CS3 enables you to convert your animation directly to ActionScript 3.0 code. This helps the user of either tool visualize how animations get converted to code and provides an easier way to reuse animations.

Components ease development in both tools. They provide common UI elements that are ready to be literally dragged and dropped into your application. These components have default states, such as mouseUp and mouseOver, and default properties, such as visible, height, width, and so forth. Don't think that you'll lose your components as you move from Flash CS3's designer world to the Flex Builder developer world. With the new Flex Component Kit, you can share components between both tools. I'll discuss that later.

One last similarity to note is the Design view. By default, opening a movie clip in Flash CS3 puts that clip's assets in the Timeline. You have a canvas onscreen where you can visually lay out your application. In Flex Builder, you can toggle between Code view and Design view. This takes your current component and puts it on a canvas-like view. You can then drop other UI components plus change property values visually in panels much like Flash CS3.

The differences

I'm not going to lie. If you have spent your entire life in the Flash authoring environment, you're in for a shock the first time you open Flex Builder. The main difference between the two is the default environment layout: Flash CS3 has a designer view with a timeline and a bunch of symbols that you add code to, while Flex Builder has a developer view with the base application tag and reusable code components that you add graphics or styles to. This makes sense because Flash authoring serves the designer crowd, while Flex Builder serves the developer crowd. Here are a few other differences that aren't necessarily bad.

First and foremost, the concept of a timeline does not exist in Flex Builder. Why? The answer is incredibly simple: The timeline scares developers. Developers are comfortable when surrounded by the things they love: code, code, and more code. In addition, Flex Builder is primarily used for creating applications. When you think about it, it doesn't make sense to have a timeline because applications do not run linearly — they jump from one form to another and back again.

Second, code editors vary greatly. Flash CS3 has the simple Code panel where you enter ActionScript 3.0 code. In Flex, you have the entire Eclipse IDE at your disposal. (Eclipse is an incredibly robust, open-source IDE. The Dreamweaver codebase was dropped.) Flex utilizes two styles of code: ActionScript 3.0 (which I described earlier) and MXML. MXML is a markup language that bears a striking resemblance to many other markup languages, such as HTML, CFML, and XHTML. Why two ways of coding? Preferences and speed are the primary reasons. The MXML gets converted to ActionScript 3.0 code at compile time (which is when you build the SWF), so neither is necessarily faster at runtime — which is when the SWF runs in the client's player. Many people do find MXML easier to understand than ActionScript and prefer it when coding.

What about multiframe animations, keyframes, and tweens? Flex Builder has them, but they've been relabeled as effects, states, and transitions. The mechanism to perform these sorts of things has been in Flex from the beginning. To be honest, however, developers have a tough time grasping those concepts. Wouldn't it be great if the designers could just do all that stuff in Flash and then easily hand off their work to the developer for use in Flex Builder? In the past, it was possible but incredibly difficult. Making it simple and easy seemed like a pipe dream. But dreams do come true.

The perfect partners

Soon after receiving my copy of Flash CS3, I got my hands on the Flex Component Kit. This nifty tool enables you to quickly and easily convert Flash MovieClip symbols to full-fledged Flex components (see Figure 1). The ramifications for the RIA space are huge. Imagine the best designers in the world sitting side by side with the best coders in the world, and imagine both being able to do what they do best and then seamlessly integrating their work. I can't wait to see some of the early fruits of this new paradigm. Let me briefly explain some of the details.


Figure 1: Flash components

Keyframes with labels in Flash CS3 translate to states in Flex Builder. Therefore, you can create many snapshots for your component in Flash CS3, utilizing as many layers and nested movie clips as you like. Then in Flex Builder, you merely say:

myComponent.currentState = "labelName";

This takes you straight to that keyframe; there's no need to write any additional Flex code.

What if you want an animation to play during that change of state? That's easy — just build the tweens in Flash CS3. Create some new frame labels. This time, use labelNameOfStart-labelNameOfEnd:start on the start frame and labelNameOfStart-labelNameOfEnd:end on the end frame. In other words, let's say you had two frame labels (small and big) with a size motion tween between them. You'd use the following values: small-big:start and small-big:end. That's it. When you use the same Flex code mentioned earlier, the tween/transition plays automatically. And here's the kicker: it plays the transition in both directions even though you only made a small-to-big tween.


As you can see, there is no better time for a Flash designer to investigate Flex. The two worlds are finally colliding in a way that is beneficial to both sides. Flex developers can go back to coding without worrying about creative stuff. Flash designers can go wild creatively — and, as long as they follow a few naming conventions, they can rest assured their content will be 100% usable in Flex. This convergence has been a long time coming. For those with both creative and programming genes, the fun is just beginning.

I know that I'm excited to be able to use both tools for their primary purpose: creating killer experiences with Flash CS3 and coding powerful applications with Flex Builder. I didn't realize how much I missed Flash authoring until I installed Flash CS3 and starting playing with the Flex Component Kit. Adobe has done an excellent job creating two tools for two distinct customers. I can't wait to start building some cross-tool components.

However, even if you don't necessarily want to build cross-product components, there are still plenty of reasons to investigate Flex. Flex Builder is available as a free 30-day trial. Grab it and play with it. See what it's like to work without a timeline. Feel free to switch to Design view if you find the default Code view too cold. The most important thing to remember is to have fun. Flex is your friend.

‹ Back

Tom Ortega II is a Principal at 360Conferences, where he coordinates low-cost, developer-friendly conferences such as 360Flex and 360|iDev. In addition, he keeps up his coding skills with projects at RapidNinja under the alias of "Ninja Debu".