Note: This article was created based on Flex 2. Minor changes in the description and code may be necessary before it can be applied to Flex 3.

Adobe Flex is more frequently being selected as the platform of choice to satisfy the business objectives of more complex rich Internet applications (RIAs). These applications continue to demand immersive user experiences that push boundaries with unique visual design. For a developer, active collaboration with designers to satisfy the creative, technical, and business objectives has become increasingly more imperative and, in many ways, complicated.

From personal experience, I can identify five main hurdles encountered for effective collaboration with designers.

1. Moving beyond preconceived notions about Flex inhibiting custom design
2. Establishing open lines of communication by education
3. Establishing a comprehensive understanding of the framework to back-up decisions
4. Communicating how design will be executed
5. Creating a smooth process for the creation and management of visual assets (next installment)

With a good education on the capabilities and limitations of Flex, all parties involved in a project are able to feel confident in understanding daily decisions that impact user experience. Despite differences in the contributions by designers and developers, good communication pushes team members to solve problems together and collaborate to develop creative ideas.

Note: Choosing the appropriate technology is indeed one of the first and most important decisions in a production process. Like any technology, Flex has benefits and drawbacks, not always making it the best solution for a client's needs.

The second installment of this article will concentrate on process and asset management. It will look to include new workflows, such as features of various software packages including Adobe Illustrator and Adobe Photoshop, which are being revamped currently to ease and optimize workflow.

Requirements

Adobe Flex

• Try
• Buy

Prerequisite knowledge

• While this article does not require any software, the information contained applies to developers building visually rich applications using Flex Builder 2 and Flash 9 Alpha.
• You should have experience working with the Flex Framework, ActionScript 3.0, Flex builder 2 and Flash 9 Alpha. This article also assumes general understanding of asset creation with Illustrator and Photoshop.

Dispelling preconceived notions

Working in design-driven environments, Flash developers often are seen as supporting only Flash as the de-facto solution for every project that comes across the table. This is not the case. Developers look for the best platform to satisfy business needs. Now that Flex is increasing in popularity, it is important to understand that Flex is not just a publicized product for developers right now, but it is the right solution for many projects, even those that are design-driven.

Often there is concern from the misperception that Flex is severely limited in providing a unique and visually engaging experience. Designers wonder how you can apply design to a Flex component. Even the word component feels less creative.

Designers have grown extremely accustomed to the flexibility, empowerment and animation capabilities that Flash provides to create rich interfaces. Flash does allow you to do just about anything.

Flex is Flash. Flex still enables a rich experience and demands that designers think objectively about how to create designs for RIAs. You and your Flash designers can still produce highly engaging hand-animated assets in Flash and import them into your Flex project. You can even build components completely in Actionscript 3.0 to match intricate and unique custom UI interactions that are not provided in the current Flex framework. In fact, designers should learn that Flex enables them to have their designs look as intended with precise font, transparency, and layouts that all imitate design and rarely make them sacrifice a comp after it moves to development.

Education is essential in the initial project stages. From working with great creatives, I know firsthand that they will respect and be eager to accept new technology to enhance their design. Clients will be pleased to know that you can accomplish their business objectives in a scalable environment while still providing the visual impact they desire.

Establishing an open line of communication

Moving forward with a Flex project, the best way to collaborate is to establish an open line of communication.

The first form of communication should be to actively demonstrate and educate the design team (and other project participants) on critical capabilities and interface considerations as they relate to the Flex UI components.

To do this, be sure to attend initial client briefings to understand the business requirements, tone, and interactive expectations consistent with previous work for the brand. Involvement at this stage enables you to extend your knowledge of Flash and Flex to the conceptual stage while fending off any potential conflicts with direction that arise from ideas by the client or design team. Your knowledge can highlight conflicts due to scope restrictions, processor usage, bandwidth restrictions, or levels of effort that exceed their "worth" or impact on the overall project.

To initiate the conversation, here are few essential things to highlight:

• Identify and qualify all the "states" of the UI elements.
• Identify all Flex UI "nuances" to keep in mind.

  Example: "The ComboBox works best with at least 22 pixels in height, but we can get away with 18 pixels if we use a 10 px font size."

• Promote reuse of common user interface elements and levels of effort to complete intense elements.
• If you know the project requirements, provide examples of how varying content renders in Flex components.
• Review custom interface ideas closely, and if something presents a potential technical issue, give suggestions as to what may be a feasible solution.

When involving yourself, be sure to keep in mind that the value of a particular visual element could be interpreted very differently by you than by a designer. Sensitivity and active listening to the significance of certain visuals will enable you to find a "happy medium."

The next form of communication is to establish intermittent reviews of design comps. As a developer, you want to review all designs and prototypes whenever they are complete, and especially before they are shown to the client. The last thing you want to have happen is to allow a client to become attached to a design that causes performance problems with the Flash player, no matter how many times you rewrite the engine.

Understanding the framework

To communicate the capabilities of Flex effectively, you need to take time to really dig into the Framework. I found that the more I explored the Framework, the easier it was for me to communicate to designers the ideas that would be easy to pull off as well as preempt the tasks that might blow scope right out of the water.

It is important to remember that while the Framework may seem like an insurmountable beast to understand completely, it is built purely in ActionScript 3.0. ActionScript 3.0 is based on ECMAScript, the international standardized programming language for scripting. To me, this meant that I could easily build upon my knowledge of other programming languages.

If you ever want to know exactly what is going on "under the hood," you simply select Navigate > Go to Definition in Flex Builder 2. This exposes the Framework class and you can see exactly what is going on. You can also view the entire Framework source in your local installation at {Flex install dir}/Flex SDK 2/frameworks/source/.

Flex provides many enhancements for the creation of user interface elements; for example, where Flash gives you the Tween class, Flex gives you TweenEffect and TweenEffectInstance class. Simply put, this provides to you a consistent framework with which to build various effects that can be reused throughout your application. For example, the Fade class uses the aforementioned TweenEffect and TweenEffectInstance classes. You can model your own visual translations using the source available for the Flex classes.

Flex uses inheritance logically to build the functionality for both the front-end and the data aspects of your project. Patterns like mixins are all but eliminated in the current Flex Framework, making the hierarchy logical and easy to follow. The architecture of the Framework promotes customization, enabling you to extend the base functionality. With a little practice, you can achieve just about anything in Flex from a design and interactive standpoint that you can in Flash. Continuing to educate yourself and other developers about the Framework enables you to manage design expectations effectively and communicate about best practices for approaching UI elements.

Matching comps

A better knowledge of the Framework enables you to accomplish a few things you may have not thought possible and helps you better understand and educate others about limitations.

Making it pixel perfect

Flex provides several methods for "skinning" that will get you part of the way to a pixel-perfect execution of the intended design, but understanding the framework will build your knowledge and capability to achieve the designer's vision.

• When matching design:

  For example, to create an invisible line that is drawn between a header and DataGrid rows:

  override protected function drawHeaderBackground(headerBG:UIComponent):void
     {
      super.drawHeaderBackground(headerBG);
      headerBG.alpha = 0;
     }
  

• Utilize CSS to define both external graphical assets and public properties of components. To find out more, read Designing Flex 2 skins with Flash, Photoshop, or Fireworks.

And as always, use and contribute to the Flex community. There are numerous articles that can assist. Chances are someone out there has come across the same challenge you may be facing and has documented a solution. Check out the Flex cookbook, a new community-managed site where developers can share technical knowledge and coding solutions to common development issues.

When limitations arise

While matching comps, make sure that you continue to educate and communicate with designers as to why a certain design may match, but the interaction may not be as intended.

One issue in particular is the rendering of scrollable items in a DataGrid or TileList. Sure, you can match the design to the pixel using an itemRenderer, but designers may find the scrolling not as smooth as they are used to.

When I handled this problem in Flash, I would render all of the elements based on the data contained in the model and mask the elements in the interface. The scrolling appeared smooth, as all of the rows were rendered and could be eased into position when scrolled. Flex handles things differently, and for good reason. It stands to reason that the scrolling component does not know how many items it potentially may contain. Flex components only render what they need to show visually, and thus, when items are scrolled, they "pop" into position rather than scroll smoothly.

Understanding exactly why designers can't have everything is extremely important when communicating limitations. I have found it helps to explain how the performance of the more visually intense elements would be maintained. Designers will appreciate knowing the reason behind the limitation, as all of them have experienced poorly performing interfaces and have limitations they deal with themselves.

Where to go from here

As RIAs begin to proliferate in the market as the preferred platform to deliver dynamic content and immersive user experiences, Flex provides a scalable solution to meet the emerging business objectives of each application.

Effectively reaching those objectives requires active collaboration of the creative and technical team members. As the developer, it is your responsibility to let other team members know how best to describe capabilities and limitations to the client and, of course, designers for the project.

A common error in communication stems from lack of knowledge of the Flex Framework. Arming yourself with a strong knowledge of the framework will enable you to educate designers and communicate with them on how to approach visual UI elements. To discover more about the benefits and efficiencies of Flex, review the following Flex Developer Center articles.

• An architectural blueprint for Flex applications
• In Labs: Cairngorm for Flex 2
• Video interview: Developers tell us why they use Flex

About the author