Adobe Creative Suite supports a complete workflow, from concept to design to development, with the ability to publish to any platform, including the browser, desktop, and mobile devices. Though the Flash platform can be used to create compelling content for virtually any screen, this post focuses on only two example use cases. The first is a rich data-centric Internet application created with the Flex framework, and the second is an immersive experience delivered via Adobe Flash Player.
A Rich Internet Application Example
There are many excellent examples of rich Internet applications (RIAs) built using the Flash platform, including NASDAQ Market Replay, DIRECTV SUPERCAST, and the Demandbase solutions for gathering leads. Â Â Products like these can be created using Illustrator, Flash Catalyst, and Flash Builder, with the Flex framework as the underlying technology.
Design
Adobe Illustrator and Adobe Photoshop are where most RIA designs begin. Designers use these tools to create mock ups of the various screens that will form the user experience. These designs, however, are merely static images and hardly represent the final functionality of the application. With Flash Catalyst, designers can create an interactive prototype from these static design files.
Interactive Prototyping
Adobe Flash Catalyst is a new professional interaction design tool for rapidly creating application interfaces, interactive content, and prototypes without writing code.
The easiest way to get started with Flash Catalyst is by importing a design file (for example, one created using Adobe Illustrator). During the import, the integrity of the design is maintained, as well as the layers that were created in Illustrator. From there, designers can turn the graphics into working components such as buttons and scrollbars. They can then link buttons to pages and states through an intuitive Interactions panel without writing any code. Transitions can be added to move between pages. Designers can also easily add and integrate video, audio, and SWF content (which may be created in Flash Professional).
Once the interactive prototype has been created in Flash Catalyst, key stakeholders and various test groups can test the functionality to determine the best execution of various tasks, such as a purchasing task. It’s easy to modify and retest the prototype in Flash Catalyst over several iterations based on stakeholder feedback.
Development
Once the interactive prototype is approved, the development phase can begin. A principal advantage of this workflow is that all of the graphics have been created, and no additional work is needed to use them in development. The same Flash Catalyst file that was used for the interactive prototype can be used directly in Adobe Flash Builder. The underlying technology of Flash Catalyst projects is the Flex framework, which is the same framework Flash Builder 4 (formerly Adobe Flex Builder) uses. The transition from prototype to development is seamless.
Flash Builder 4
Adobe Flash Builder 4 is designed to help software developers rapidly develop cross-platform RIAs and content using the open source Flex framework. It includes support for intelligent coding, debugging, and visual design. It also features powerful testing tools that speed up development and lead to better performing applications.
Among the many powerful features of Flash Builder 4 are the data-centric development features that make it easy to connect to web services or databases. Developers can use these features to introspect Java, PHP, Adobe ColdFusion, REST, and SOAP services. After introspection, service methods and properties are displayed in the new Data/Service Explorer. These methods can be bound to UI components using drag-and-drop. Developers can customize the appearance of the UI components using CSS and graphical property editors, or they can take it a step further by creating custom Flex components that can be edited in Flash Professional. The result is a custom application with rich data dashboards and interactive data analysis.
Publishing: Flash Player and Adobe AIR
Once the application is complete, it can be delivered as a web or desktop application. The web application would be one or more SWF files, which are viewed using the cross-browser Flash Player runtime. The desktop application would use the Adobe AIR runtime, which supports additional functionality such as accessing the local file system, local databases, device APIs, other input methods, and more. See this comparison chart for more details.
The Flash platform doesn’t stop there. With the introduction of Adobe Flex® SDK “Hero” and Adobe Flash Builderâ„¢ “Burrito,” along with the availability of the Adobe AIR® runtime on mobile devices, developers can now build mobile Flex applications for touchscreen smartphones and tablets with the same skills they use to develop on desktop platforms.
Flash Professional CS5
To illustrate the breadth of the Flash platform, the second example is a rich, immersive experience made entirely in Flash Professional. An experience can be anything from an interactive/animated banner ad to a game like Farmville or a rich video experience like hulu.com. Immersive experiences are not limited to the browser; they can be created for the desktop and for Android and iOS mobile devices, all from the same codebase. Visit the Flash Platform Gallery for more examples.
Design
One of the first steps in building an immersive experience is to create the design, which is often done in Illustrator or Photoshop. Once the design is created, the Illustrator or Photoshop files can be imported into Flash Professional while maintaining the editability of most elements. Designers can also use Flash Professional to create visual elements such as vector graphics and text.
After the basic design is implemented in Flash Professional, additional elements such as animation, interactivity, video, and audio can be added. Animation, for instance, can be applied to various graphics by using built-in Motion Presets, or by simply selecting a movie clip on the stage and choosing Insert > Motion Tween. These animations can be as simple as transitions or small animations to liven a page, or as extensive as cartoons.
Interactivity
Interactivity is enabled by writing snippets in the open-source scripting language ActionScript. ActionScript is similar to JavaScript (they’re both based on ECMAScript), which makes it easy to learn for most web developers. ActionScript provides total control over all elements, from buttons to video and animation.
The easiest way to use ActionScript in Flash is via the Code Snippets panel. Simply select a button on the stage and double-click the desired code snippet. The correct ActionScript is added to the Actions panel, where it can be modified easily.
The Flash Builder Connection
More experienced Flash developers can use Flash Builder as their coding environment to write ActionScript. They can, for instance, create an external document class in Flash Builder that is referenced in Flash Professional to control interactivity.
Once the project is complete with interactivity, animation, video, and/or audio, it can be deployed as SWF files for the web or as a desktop or mobile application using the AIR runtime.
Conclusion
The first example illustrated a rich data-centric application, while the second was for a more immersive experience. Both of these very different examples were created using the Flash Platform. It’s important to note that the Flex framework can use ActionScript and SWF files to add richness, while a Flash Professional project relies purely on ActionScript. Either way, both workflows started with design files and ended with the ability to deliver to the web, desktop, and mobile devices.
