back

Make your concept a reality with Adobe Flash Catalyst CS5

by Doug Winnie

We all have amazing ideas. We have ideas for new games, applications, websites, businesses, training, and many other tools. The struggle we all have is how to get that fleeting idea out of our minds and make it a reality. Many authors will tell you to keep a journal with you throughout the day because you never know when you will get that next amazing idea.

But recording your idea is only the first step. The next step is to flesh out that idea to effectively communicate your vision to someone else. In the past, you traditionally had a few potential ways to present an idea for an application or website. You could build wireframes or mock-ups with Adobe Creative Suite design tools. However your vision would still be flat, and there was no way to communicate the experience of the application. Alternatively, you could create a project in Flash Builder or Flash Professional and build something interactive, but that often meant you would get caught up in the code and development issues before your idea was mature. In addition, the act of writing ActionScript could interrupt your flow and process.

To be successful, you need to be able to effectively communicate your idea to your clients, your investors, or your boss. Then you must be able to translate that idea through the design, development, and deployment process with minimal throwaway work or duplicate effort, which can ultimately slow your progress.

That is what Adobe Flash Catalyst CS5 was designed to do. Flash Catalyst integrates with Adobe design tools to give interaction and visual designers the capabilities they need to map out their ideas and designs.

In this article, I show you how to use Adobe Flash Catalyst with Illustrator, Photoshop, and Flash Builder software to take an idea from concept through to the final handoff to the developers.

Getting down to the wire

To rapidly start capturing your idea, start building a wireframe using the wireframe drawing tools in Flash Catalyst. The tools are designed to let you quickly sketch out regions for your application design.

In addition to drawing tools, Flash Catalyst includes the Wireframe Components panel, which offers prebuilt user interface components to speed up your wireframe process (see Figure 1). These are preconfigured components such as buttons, scroll bars, and input text fields that you can use to flesh out your idea.

Prebuilt wireframe components in Flash Catalyst help you map out your application fast.

Figure 1. Prebuilt wireframe components in Flash Catalyst help you map out your application fast.

Using these tools, you can quickly start building out the visual elements of your site, but what makes Flash Catalyst unique is that you can quickly transform these wireframes into actual moving elements in your project that will add credibility to your vision when you share your idea with others.

In Flash Catalyst, you can convert artwork to live components using the Heads Up Display, or you can right-click an object and select a component to convert it to. With just a few steps, you can convert items to complex navigation elements, lists of data, scrollable regions, or custom interactive pieces you can build yourself. You can do all of this within your creative workflow, without touching the code.

When you are finished creating the wireframes and the unique pages or states of your application, you can connect them using the Interactions panel.

The Interactions panel enables you to define what actions users can perform and what the results of those actions are. For example, if you have a button and you want users to navigate to another part of your application when they click it, you can quickly build that cause-and-effect relationship using the Interactions panel (see Figure 2).

Connect application components to actions with the Interactions panel.

Figure 2. Connect application components to actions with the Interactions panel.

With just a few hours of work, you can quickly create a live, interactive wireframe that you can publish and share to communicate your idea. The best part is that when you are ready to start building the final product, you don't have to throw away the work you already created in Flash Catalyst.

Iterative design with Creative Suite 5

With Creative Suite 5, Photoshop and Illustrator offer specific workflows that make it easy to take your wireframe elements piece by piece and update the design using vector and bitmap design tools.

Individual graphical objects, components, or designs in Flash Catalyst can be exported to Photoshop CS5 or Illustrator CS5 so you can refine the look and feel to match your creative vision. Design changes you make in Photoshop and Illustrator are then reflected in Flash Catalyst, so you can simply continue to build out the application or site design (see Figure 3).

In addition, when you work with Illustrator and Photoshop, all layers, filters, and blend modes are visually preserved when you export the files back to Flash Catalyst.

Tight integration means you can graphically enhance the application elements you define in Flash Catalyst with Photoshop and Illustrator.

Figure 3. Tight integration means you can graphically enhance the application elements you define in Flash Catalyst with Photoshop and Illustrator.

Finally, to give your application a natural flow as users move through its various pages, states, or modes, you can easily create animated transitions in Flash Catalyst to add sophistication to your project.

Flash Catalyst tracks the changes you make to location, size, rotation, and opacity and automatically converts these changes to transitions in the project. You can then modify the transitions quickly using the Timelines panel and choreograph them any way you like (see Figure 4).

Create and modify animated transitions with the Timelines panel.

Figure 4. Create and modify animated transitions with the Timelines panel.

Making it work

When you're finished with your design, you can export your project to Flash Builder 4, which is now part of Creative Suite 5 Web Premium and Master Collection, and connect the design to live data, build custom interactive behaviors or other elements using the Flex 4 framework, and publish your finished project (see Figure 5).

Export your project to Flash Builder to connect elements to live data, build custom behaviors, or publish it.

Figure 5. Export your project to Flash Builder to connect elements to live data, build custom behaviors, or publish it.

With Flash Builder 4, you have easy connectivity to a wide variety of data sources. You can also monitor network activity, profile your application for performance, and make necessary adjustments.

When you're ready, you can deploy your project to Adobe Flash Player or Adobe AIR to run in browsers, on desktops, or on a wide variety of devices and screens.

From idea to delivery

With Flash Catalyst, Illustrator, Photoshop, Flash Builder, and the Flex 4 framework, Adobe is making it possible for you to easily capture that great idea and bring it to life quickly, whether you're a designer or a developer.

Now all you have to do is come up with the next big thing.

‹ Back


Doug Winnie is a principal product manager at Adobe focusing in interactive design for HTML5 and the Flash Platform. Doug has worked in the web and interactive industry for over ten years focusing on front-end web design and development. During his time at Adobe, Doug has lead numerous teams to make web and interactive design workflows more efficient and powerful leading the Flash Catalyst, Fireworks, and Dreamweaver teams.