I am just back from FlashCamp in San Francisco from one of the most exciting and talked about events of the year. Adobe’s release of the beta version of Flash Catalyst and Flash Builder 4 (http://www.labs.adobe.com) will help push Adobe’s products to the boundaries and will pave the road for creating mobile applications with the Flash Platform.
Let’s talk about some of the changes that these new products will bring and their impact on our workflow.

FlashCamp SanFran

New development cycle with Flash Builder 4 and Catalyst

The new development cycle allows us to shift to a design centric cycle, where designers and developers can work in parallel. Here’s the breakdown of the new responsibilities

• Developer responsibilities: application logic, processing, data, services and testing.
• Designer responsibilities: frames, states and visual appearance (pixel) of the application.

With that said, as a developer I wouldn’t wait until a designer will learn Flash Catalyst since developers are feeling the pain every day when they have to chop images and convert them into MXML component, so although eventually these responsibilities will likely shift to designers, you can start enjoying Catalyst to easily convert your PSD, AI files into MXML component.

Shift responsibilities

By utilizing Flash Catalyst, the experience, such as animation between different states, becomes the responsibility of the designer. It allows the designer to control the Flash interaction, choreography of the application and the appearance without even visiting FB. Once the work is completed, the FXG file format can be provided to a developer, which can integrate it with business logic, data and services. As the project continues, designers can modify the appearance and interaction without disrupting the workflow.

FXG and FXP

Flash XML Graphic (FXG) is a declarative format based on MXML and similar to SVG. FXG is supported by Adobe Creative Suite CS4: Photoshop, Illustrator and Firework.
The round-trip workflow between Adobe Creative Suite and Flash Catalyst is meant to be seamless. Flash Catalyst interface was built primarily for the designer and the IDE is similar in look and feel to Flash Professional and Photoshop. It allows designers to quickly jump in and start using the tool in a familiar environment, all without writing any code. As a developer you can use Flash Catalyst and toggle between code view to design view.

Why do we even need a new development cycle?

Users expectations increase since businesses demand more out of our Flash applications. These expectations cause applications to be larger, more complex and include custom components and many services. Also, as Flex and AIR get deployed on more and more devices, we need to be able to easily create different presentation for the same logic so we can easily create an application that gets deployed on different devices.
The challenge is that the current development cycle is developer centric and as a designer you are only responsible for creating the pixel discipline, and you are not involved in any of the Flash experience. It becomes challenging to create Flash applications, since as a developer you need to be able to juggle between all the application disciplines such as converting Photoshop .psd files into MXML, handling data, testing, services, coding and many others responsibilities.

If you ever tried to extend or skin a Flex component you know that is not an easy task and it takes a tremendous LOE to control every aspect of the component. These challenges led developers to create their own custom components and the creation of tools and APIs such as Degrafa (www.degrafa.org/).

The process with Degrafa is not seamless and requires tweaking. Flash Builder 4 addresses these issues and allows full control over graphic components. To achieve that, Adobe had to re-work the component architecture. Under the new Flex 4 architecture, components are loosely coupled and split into three parts: model, visual design and behavior.

The programmer is responsible for the model and the designer can create the visual design as well as the behavior of the component. Using CS4 tools and Flash Catalyst, designers can generate a new file format called FXG, which includes the components skins as well as the behavior of the different components and the whole application.

Adobe re-worked the component architecture

A major effort was put to re-work the component architecture, separate the view, model and logic to allow a better manipulation and the ability to move to design centric development.

GraphicElement is a new core class, which was added in SDK 4 and supports text, images and shapes, as well as advanced layout. It supports UIComponent style layout and invalidation capability, however, it is not a DisplayObject and GraphicElements are able to share the same DisplayObject.

fx:Component is another Flex 4 core class and it is used as the base class for all the skinnable components. The FxComponent class defines the base class for skinnable components.

Skin class - The skins used by a FxComponent class are children classes of the Skin class. You can set the skin class using the skinClass attribute.

The Skin class defines the base class for all skins used by skinnable components. Skin class extends Group (which is the base container and allows nesting UI childrens which can point to other skins). The SkinnableComponent class defines the base class for skinnable components. In the Skin class, you define the component you are skinning using HostComponent metadata.

Adobe Catalyst generates a declarative xml code called FXG and uses the new design model to help support the workflow and features of Catalyst by extending the UIComponent with a new namespace of Fx-prefixed base components (namespace is likely to be changed by the time Flex 4 is released).

The idea is that these base components will allow developers the ability to create and extend core components and focus on the functionality, with as little influence and dependency on the layout and display of the components as possible. The work of re-skining the Flex components and re-designing the layout, behavior and new state architecture are all the responsibility of the designer. Ideally we want to be able to make changes and round trip with Flex without affecting the underlying code that controls the functionality of the component.

Flash catalyst project was saved as FXP file format and Flash Builder 4 is capable of opening a FXP project.

Flash Catalyst saves the projects as FXP file format, which stands for Flash XML Project (FXP). Flash Builder 4 allows you to import and export .FXP file format.

Creating multi-screen applications

Mobile devices are going under an exciting revolution today due to an increase in network subscribers’ growths. Over a billion people are connected to the Internet. Out of those people, 600 million worldwide are connected to a 3G network with fast Internet connection of 144Kbps., about 1.4 billion phones supporting FL.

There is also an increase in UI and hardware innovations such as touch screen experience, as well as consumer expectations of their mobile devices. All of these changes and the dream of an Adobe Open Project materialized into a reality with the announcement of Flash 10 and AIR available on many mobile devices that opens up new possibilities to mobile developers.

Mobile devices consist of many devices such as: Smartphones, Mobile Internet Device (MID), Ultra-Mobile PC (UMPC), ARM based devices, game consoles and others.
The MID is a multi-media mobile device capable of accessing wireless Internet. MID is bigger than smartphones but smaller than UMPC. MID is capable of running Linux OS and with dual-core processors. It can even run Windows XP or Vista. Adobe released Flash 10 on Linux so many MID devices are capable of running Flex and AIR applications.

First let’s take a look at the different mobile devices:

• Mobile Phone is the most used electronic device worldwide. A mobile phone started as mobile device capable of making phone calls, however, in recent years mobile phones have more and more features than just making calls and they turned into what is called smartphone, which includes more capable CPU, larger memory to support multimedia and other programs that we usually use in our desktop or on the Web. Up until now, mobile phones only supported Flash Lite (FL) and the development was limited to create Flash application with AS 1.0 or 2.0, which was a major draw back to many Flex/AIR/AS developers that didn’t want to create applications using legacy code. However, today there are already Smartphones that support Flash 9 on their web browser and this year we are going to see more and more Smartphones support Flash 10/AIR.
• Ultra-Mobile PC is a small sized computer with wireless access capabilities. It can run Linux, Windows XP or Windows Vista Operation system (OS). Mobile Internet Device is a multimedia handheld computer capable of connecting to the Internet wirelessly. It represents the middle between UMPC and Mobile phones. OS can be Linux, or Windows XP/Vista depending on CPU. Although these devices are not very popular, they are a good platform to test Flash 10/AIR applications on a mobile device.
• ARM based devices are devices that have the ARM architecture and can be found in many devices such as mobile phones, set-top boxes, MIDs, TVs, automotive platforms, MP3 players and many other mobile and computing devices. Many of these devices will support Flash 10 and AIR.

As technology progresses and our mobile devices have better CPU and more memory, one challenge is unsolved: fragmentation. Fragmentation means that each screen device such as mobile phone, desktop, Web or TV are based on a different platform or OS and may have a different browser specification and/or a different network. It has become a real challenge and costly to create a multi-screen application that can work on many platforms.

Passive Multi-View Design Pattern

To achieve multi screen using FP 10, I recommend using a design pattern that is a mix of the Passive View design pattern as well as the Factory design pattern.
Using the passive multi-view design pattern allows you to create different views. All views are using the same base high-level classes, and you can combine them easily with other tools such as: Degrafa, Flex FXG, Flex 3 or AS3.0 with CSS.