Macromedia has introduced Flex, and everyone seems to be excited about it. But Flex looks like it's for application developers. Does that mean designers are being left behind? Does it mean I have to learn a completely new set of skills?
No, in both cases. It's true that Flex brings the power of the Macromedia Flash Platform to developers, but the applications that developers build require the knowledge and expertise of designers style and appearance, information architecture, interaction design, not to mention great content. So all the skills you've developed around Macromedia Flash, Fireworks, Photoshop, UI design, and so on, can be must be applied to building application interfaces with Flex.
And better yet, by building your designs with Flex you can bring in rich content created with Fireworks, Photoshop, Flash, and other programs. And using Flex, you'll generate code that developers can actually use as opposed to mockups that developers look at, toss out, and then recreate from scratch.
For example, Flex 2 allows designers to create skin assets in Fireworks or Photoshop and then assign them to Flex components using CSS. Our interaction designers can use Flash Professional to create interactive content and then export it to Flex Builder.
Everyone Can Play
At StudioNorth, we're excited about Flex Builder, not just because it lets us build applications more productively, but because we can include everyone, (programmers and designers) in the Flex application development process.
For example, our design and multimedia teams can use Flex Builder to focus on creating higher-level interfaces, while our programming team uses Flex to write lower-level code to deliver data (with HTTP requests, web services, or other means, like Flash Remoting) to the interactive team, who then shapes the data into extremely advanced and expressive interfaces.
Before Flex Builder arrived, everyone on the project team worked with different tools. Our programmers would use ColdFusion or Visual Studio, our designers would work in Photoshop and Dreamweaver, and our interactive media team used Flash and After Effects. Simply put, with each person on an RIA project using different tools, we would face all kinds of time-consuming challenges trying to bring the application together with so many different programs and file formats.
Now, Flex and Flex Builder make that workflow smoother Flex Builder by providing tools that everyone can use, and Flex by making it easy to bring content/media in from external programs.
Approachable for the Designer
Flex Builder 2 has been built from an entirely different base than its predecessor, the original Flex Builder. Macromedia chose to rebuild Flex Builder 2 on top of the open-source Eclipse platform. According to Macromedia, the developer community heavily influenced its decision to go with Eclipse. But don't worry; the Macromedia team hasn't left designers behind.
With Flex Builder, you can visually lay out application interfaces. You can drag containers, such as panels and accordions, and components, like tab and tree navigators, onto your application interface and arrange them any way you like, and Flex Builder will generate MXML code behind the scenes for you.
Flex Builder allows our designers to apply their expertise in visual layout/usability rather than having to focus on the complexities of the underlying code. Just as with HTML, the skill of the designer is what makes a great app, the tool is just an enabler. The great thing about Flex Builder is that Macromedia has lowered the technical bar significantly so that designers can participate more easily in the process of designing an application.
Drag-and-Drop Dashboards
Obtaining information is extremely important in today's environment, yet information is increasingly spread out all over the world. The need for a central location from which to retrieve information is a very valuable thing.
For example, it would be nice to have my favorite blogs, top news stories, and stock reports all on the same screen and to have all that information update in real time as the information is updated at its source. Pages should dynamically change shape when I move my mouse around different areas, or even react on its own to alerts I've set. Building this kind of interface is now possible even easy using Flex.
How easy? Think of it this way, most of the hard work is already done for you. The content is often updated and made available by someone else, somewhere else, and all you need to do is connect to it. Using current syndication standards like RSS, you can use Flex Builder to load up content from any content provider and display it with an expressive, intuitive interface. Tying a web service to a display component, like a tiled product grid, can take as little as a few minutes. This frees designers to spend more time doing what they do best designing and creating advanced user interfaces, like the dashboard interface.
I am sure you've heard of dashboards. Just like your vehicle dashboard, an Internet dashboard application provides a high-level view of the information you are most interested in. Dashboards can present and communicate information in many different ways using charts and graphs, meters, tables and grids, lists, and content areas. Of course, Internet dashboards were once challenging and time-consuming to build and they didn't always look that great.
Now, Flex Builder 2 provides these dashboard features in the form of components that can be dragged onto the page and wired up to feeds. Technically, this can be done in Flash, but it requires a high level of ActionScript knowledge and XML parsing. With Flex, most of those nitty-gritty details are hidden from you.
Using Flex Builder 2, laying out the interface is as easy as fogging a mirror. For example, if I want to obtain the latest Macromedia news, I can simply drag a list box that has a data source that points to the Macromedia News Aggregator "MXNA." If I want to keep track of my friends' and family's video blogs, I can build Whirrl into part of my interface using media display and text area components no coding required. Or if I want to track my favorite stocks, I can drag a chart into the corner with a feed to Yahoo! Finance.
Deployment (or What Do I Publish and Where Does It Go?)
If you're a Flash designer, you are used to creating your Flash movie, publishing it as a SWF, and putting it in a web page. Flex Builder 2 does basically the same thing. However, instead of "publishing," you compile or "build" MXML files into SWF files (and an HTML file is also generated if you would like). From this point, the work flow is essentially the same as what you would do with a SWF file.
It's important to note that Flex Builder 2 generates SWF files that only work correctly with Flash Player 8.5, which is still in alpha. Macromedia expects to release Flash Player 8.5 in the first half of 2006.
Designers, Rest Assured
While Flex 2 allows developers to create better and more powerful user experiences, you can use the skills you already have, like CSS and themes, to make sure that the experience is better than ever.
I encourage you to visit Macromedia Labs, where you can download the Flex 2 Alpha and play with the look and feel of the interfaces. The Flickr Viewer is a very good interface to start with. It's simple to create and understand (try changing the layout sizes in the different states and watch how the application is affected). While you're at Macromedia Labs, visit the Showcase Gallery to get inspired by the great work of others who are using Flex 2.
Andrew Goodfellow is vice president of interactive media at StudioNorth, a creative communication firm based in Chicago.