by Doug Winnie
Adobe Flash Catalyst, a new professional interaction design tool for rapidly creating application interfaces and interactive content without coding, helps you create some really cool UIs from your existing designs. With native Adobe Illustrator and Photoshop support, Flash Catalyst brings to life the sophisticated designs you create with Adobe's industry-standard photo and illustration applications.
In this article, I explore a few other ways you can use Flash Catalyst and how to navigate around some of the quirks in the first beta, including how to use Adobe Fireworks to create projects with Flash Catalyst.
Flash Catalyst doesn't support native Fireworks files; however, you can export your designs from Fireworks to Flash Catalyst via FXG, the new interchange format for the Adobe Flash Platform. Adobe doesn't recommend doing full-scale user interface designs with beta 1, but you can bring vector and bitmap objects into Flash Catalyst via FXG using Fireworks.
To get started, open a new document in Fireworks and create your artwork or open an existing Fireworks graphic. For this article, I'm using a pie chart I created using the Pie vector object.
Then choose Command > Export to FXG from the main menu. Choose a location to save the file, and give it a filename.
You have just created an FXG file of your design. Now you can import that into your project. To do that, create a new project in Flash Catalyst. Choose Create New Project: Adobe Flash Catalyst Project from the start screen.
Give your project a width, height, and background color. Flash Catalyst then creates a blank project that you can then import your artwork into.
Now you can begin to create your application design. Start by defining a small region to hold your artwork using the built-in drawing tools (see Figure 1).
Figure 1. Defining a region in a Flash Catalyst project to contain Fireworks artwork
Now you need to convert this to a custom component so you can add your artwork. To do this, select the object with the selection tool, and right click to open up the object's contextual menu. Select "Convert Artwork to Component" and then select the "Custom/Generic Component."
Now that this is a component, you can enter into its first state (named State1 by default) and import your FXG graphic. Choose File > Import Artwork, select your FXG artwork, and click Open.
Your graphic will appear in Flash Catalyst. You can position it at the desired location and add other elements (see Figure 2).
Figure 2. A Fireworks graphic in Flash Catalyst.
You'll notice that if you ungroup your graphic (you may need to do this a few times based on the structure of your artwork) all the elements are individual paths (see Figure 3).
Figure 3. Ungrouped elements in the Layers panel.
Now that you have integrated a graphic into your Flash Catalyst project, you can use it with other Flash Catalyst tools.
You will notice when you right-click one of the paths that you can roundtrip the graphic, but only with Illustrator.
When you right-click a path and select Edit in Adobe Illustrator CS4 from the menu, the graphic opens in Illustrator for you to make design changes and then updates automatically in Flash Catalyst.
The previous workflow works with vector objects, but if you want to work with bitmap objects or preserve the editability capabilities of Fireworks graphics, you need a different workflow. Flash Catalyst does support external files that can be imported and then aggregated. In addition, you can re-edit external files in Fireworks.
In this example, I create a browser-style application that displays some of my favorite old computer games. I have created the graphical pieces of the overall design as individual Fireworks documents (see Figure 4).
Figure 4. Individual PNG files in Fireworks that make up an overall design to assemble in Flash Catalyst.
I can import these PNG files to Flash Catalyst. Just like the previous project, I need to create a new empty Adobe Flash Catalyst project. Then I right-click the Library panel and select Import Multiple Images.
The files are imported into the project, and I can place them on my application surface. I also name the layers, which is a best practice when working with Flash Catalyst.
I can then convert the objects to buttons. For example, I right-click the Header Background object and select Convert Artwork to Component > Button from the menu.
Now, I can edit the states of the button by double-clicking it. I want the button to have some text in it that defines the items that are currently displayed by the browser. I can quickly add that using the Text tool (see Figure 5).
Figure 5. Using the Text tool to add a label to a button.
Now I need to convert this text to the actual button label. Right now, it doesn't link to the button in any meaningful way. I connect the label to the button using the floating Text panel. With the text field selected, open the "Convert Artwork to Button Part" drop-down and select "Label":
Now that the label is officially part of the button, I can edit the text of the label from the Properties panel of the button itself.
You may notice that the label for this button isn't listed in the other states: Over, Down, and Disabled. A common instinct is to copy the text field and paste it into the other states. But that actually won't work because it will create four text fields in the button layers. With components, layers exist across all the states of a component. Each state defines the unique factors for the objects or layers in each specific state. For instance, if I open the Disabled state, the Label layer is still there, but its visibility has been turned off (see Figure 6).
Figure 6. The layers of the Disabled state of the button.
Instead of copying the label into each of the states, I need to make it visible in each of the states. To do this, I select each state and toggle the visibility on in the Layers panel. Fortunately, Flash Catalyst lets me do this in one step by right-clicking the text object and selecting Share to State > All States. Now I can see the object in all the states (see Figure 7).
Figure 7. Comparing multiple versions of an SVN file.
When I imported the Fireworks files, I imported the native PNG documents. I can now use these files to bring objects back to Fireworks to make design changes — through Illustrator.
I want to modify the header background in the button I just created to glow yellow when users mouse over it. To do this, I select the Over state of the button and then right-click the background graphic and select Edit in Adobe Illustrator CS4.
I then see a dialog box warning me that the PNG contains additional data for Fireworks that will be discarded when I click Save. That's fine, so I click OK.
When the Illustrator document loads, the bitmap appears.
From here, I can add vector artwork using the Illustrator design tools to extend the design, and then send everything back to Flash Catalyst. In this particular case though, I want to edit the bitmap itself.
The bitmap is a linked graphic. In Illustrator, I can refer to external graphics in my document without embedding them directly. I can then edit them using the default application for the graphic and then relink in Illustrator. I select the graphic and then click the Edit Original button at the top of the application window.
I have Fireworks set as my default application for working with PNG files, so when I select Edit Original, the file opens in Fireworks. In Fireworks, I can edit the gradient data in the file and save it.
When I return to Illustrator, a dialog box appears asking me to update the links to the external file because they have changed. I click Yes and then click OK to dismiss the Fireworks PNG message. Now I see the updated graphic in Illustrator.
From there, I choose File > Save As from the main menu to overwrite the existing file and then close the document. When I return to Flash Catalyst, I accept the changes from Illustrator.
I then see the updated graphic in the Over state of the button. Now when I publish my project, the mouse-over effect will work.
One nice feature in Flash Catalyst for designers who create multiple projects or for teams that need to exchange assets is the Library Export and Import feature.
From the Library panel, I can right-click and select Export Library Package, or I can select the same function from the File menu.
When I select this, I give my library package a name and location. Flash Catalyst then creates a single file that contains all my Library items (an FXPL file), including components, imported graphics, and other elements (see Figure 8).
Figure 8. A library package created by Flash Catalyst.
I can then share this FXPL file with my teammates or use it in a future project.
To import the library, I choose File > Import Library Package or right-click the Library panel and select the same option.
Flash Catalyst then accesses the library and adds the objects in it to my current project, including all components with the states preserved as they were in the original.
Flash Catalyst beta 1 includes many different workflows and capabilities. As we continue to develop this application, we'll make workflows more efficient. I hope you've enjoyed this sampling of some of the ways you can use Flash Catalyst for your current projects. Now, download Flash Catalyst beta 1 and try it for yourself.
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.