By Doug Winnie

Adobe Flash Catalyst is a new tool for visual and interaction designers to create applications and website designs without needing to write code, and to promote a seamless handoff from designer to developer when building web applications using the Adobe Flex framework.

Flash Catalyst is designed to work alongside other Creative Suite 5 design tools, including Illustrator and Photoshop. When using Flash Catalyst, you can select artwork and modify it using Illustrator and Photoshop without needing to do complicated exports or imports.

Using Flash Catalyst, you can start your project from a design already created using Illustrator, Photoshop or Fireworks. When you start up Flash Catalyst, you can then import your artwork to set up your project.

When working with your design files, it is important to keep your various layers named and organized. When you import your designs into Flash Catalyst, the layer names are preserved and will be used as a guide for your timeline creation, interaction definition and other areas in Flash Catalyst. Keeping your layers well named will make your work in Flash Catalyst much easier.

In Illustrator CS5, you can create multiple artboards using the Artboards panel or tool. When you create artboards, they will be imported as different pages in your Flash Catalyst project.

To create a new artboard:

• Open the Artboard panel.
• Click the “New Artboard” button.
• To rename the artboard, select it and open the panel options drop down menu.
• Select “Artboard Options”.

From the Artboard Options dialog, you can edit your artboard names, sizes and other properties.

In Photoshop CS5, you can create layer comps to configure layer visibility to simulate “pages” in your design. Layer comps can be imported individually using the advanced import options in Flash Catalyst.

To create a layer comp in Photoshop:

• Open the Layer Comp panel.
• Click the “New Layer Comp” button.
• Name and define settings for the Layer Comp.

Layer comps can capture changes in visibility, position, or changes in layer styles when used. To switch between layer comps, select the layer comp from the panel.

If you use Fireworks, there is a special export workflow for use with Flash Catalyst. When you are finished with your design, export your project using the “FXG and Images” option. This will save your project in the FXG format that you can open in Flash Catalyst. Fireworks document pages will carry over to Flash Catalyst.

To export your Fireworks document as FXG:

• Save your file as a Fireworks PNG.
• Open the File > Export… menu.
• Select “FXG and Images” from the Export drop down.
• Select your desired setting from the Pages drop down.
• Click “Save”.

When you start Flash Catalyst, you can create a new project from a design comp. This will set your project dimensions and import the artwork into Flash Catalyst for you to immediately convert to components and build interactions.

After starting your project, you can import additional Illustrator, Photoshop, FXG or other types of images into your project.

When importing from Illustrator or Photoshop, an Import Options dialog will appear, allowing you to change the default import settings.

To import layer comps from Photoshop, click the “Advanced” button in the Photoshop Import Options dialog. You will then be able to select a single layer comp from the top of the dialog window to import into Flash Catalyst.

In the Advanced import options dialog, you can also specify how you want individual layers to import including text, bitmaps, and other elements of your file.

When your artwork has been imported, you can then convert your artwork into interactive components that you can attach interaction behaviors to. Flash Catalyst supports a number of interactive components like buttons, scrollbars and more.

To create components, select the artwork you want and use the HUD or Heads Up Display to select the type of component you want to convert it to. This will wrap the artwork inside of a component and build out the various states or modes of the component.

One of the most common types of components is the Button component. When you create this component, Flash Catalyst will create the common states of the Button: Up, Over, Down and Disabled. You can then edit the designs for each of these components by selecting the component and clicking the corresponding state you want to redesign, or double-click the component to enter into an editing mode for the component.

To create a simple Button component:

• Select the artwork that constitutes the button from the artboard or the Layers panel.
• In the HUD, open the “Choose Component” from the Convert Artwork to Component section
• Select “Button”

When you click the component, the artwork is converted into the button. The HUD changes to show the various states of the button that Flash Catalyst has created automatically for you. You can click these to edit the design of the button in each of the states:

When working with artwork in Flash Catalyst, you can modify a number of properties of the artwork directly in Flash Catalyst. Flash Catalyst includes a number of basic drawing tools to help create basic artwork for placeholder graphics, or wireframe elements.

You can also edit the various text parameters of text fields. When using unique fonts, you can opt to embed fonts during the publishing process to ensure that the text is displayed as designed.

Other design properties you can modify are the various blend modes that are supported with Flash Player and a number of common filters including drop shadows and glows.

To make it easier to design in components and across pages of your site, when you make a change, it is exclusive to a single state or page of your project. By clicking the “Make Same in All Other States” button, you can synchronize the design and appearance of the selected object across the pages or states that it is in.

When you need to make changes beyond the capabilities of Flash Catalyst, you can easily take your vector and bitmap artwork to Illustrator CS5 and Photoshop CS5 for redesign. On graphical objects and some basic components you can rightclick them and send them to Illustrator and Photoshop. Once in those tools, you will see the object in context with the entire application and can use advanced vector and bitmap tools to redesign the artwork.

In Illustrator, click the “Done” button at the top when you are finished to send the design changes back to Flash Catalyst. In Photoshop, run the “Simplify Layers for FXG” to prep your artwork, save and close the file. You can then go back to Flash Catalyst and see the design changes have been applied to your project.

To edit a vector design in Illustrator from Flash Catalyst:

• Select the artwork you want to change.
• Right click, or open the “Modify” menu and select “Edit in Adobe Illustrator CS5”.
• 
• Illustrator will launch and display the project with the entire application in the background washed out.
• The artwork you selected will be editable.
• 
• Make the desired changes to the artwork using Illustrator design tools.
• Click the “Done” button in the top right corner of the artboard.
• 
• Flash Catalyst will then display your design changes.

To edit a bitmap design in Photoshop from Flash Catalyst:

Note: To perform this function, you need to install the FXG Extension for Photoshop, which is available at Adobe Labs:http://labs.adobe.com/technologies/photoshopcs5_fxg/

1. Select the artwork you want to change.
2. Right click, or open the “Modify” menu and select “Edit in Adobe Photoshop CS5”.
3. 
4. Photoshop will launch and display the project with the entire application in the background washed out.
5. 
6. The artwork you selected will be editable.
7. Make the desired changes to the artwork using Photoshop design tools.
8. Open File > Scripts > Simplfy Layers for FXG.
9. When the script is finished, Save and Close your file.
10. Flash Catalyst will then display your design changes.

With more advanced components, there are a number of “parts” that need to be identified in order for the component to fully work. A scrollbar is a good example of this. In order for a scrollbar to work, you need to have a thumb, track and optionally, an up and down button.

When you convert artwork into a component that has predefined parts, you’ll see a notification in the HUD when you create the component. To connect the parts, enter into the component and select the artwork that is mapped to a component part and select the corresponding part in the drop down list in the HUD. You’ll notice that not all parts are required. When all of the required parts are finished, the component is configured and is ready to work.

To create a scrollbar using component parts:

1. Select the artwork that is part of the scrollbar design.
2. 
3. Open the "Choose Component" drop down under Convert Artwork to Component.
4. Select "Vertical Scrollbar".
5. Click the “Edit Parts” button, to connect the artwork to the parts of the scrollbar.
6. Select the artwork that maps to the thumb of the scrollbar.
7. Open the “Choose Part” drop down under Convert to Vertical Scrollbar Part, and select “Thumb”.
8. 
9. Repeat the same steps for the track.
10. (Optional) Repeat the same steps for the Up Button.
11. (Optional) Repeat the same steps for the Down Button.

When building components that are lists of data, you can convert artwork into a Data List component and then populate the list with data in the Design Time Data panel.

To create the Data List, you need to take the design, including a sample row, column, or item of data and convert it into a Data List. To complete the Data List configuration, you need to select the artwork that represents a single “item” of your list and connect it to the Repeated Item part in the HUD. Flash Catalyst will then create additional copies to simulate what the list would look like with additional items.

If your repeated item artwork contains text and bitmap images, they will be captured as fields in the Design Time Data panel.

You can then adjust the data in the panel for the text, or select different bitmaps for the various images in your list.

Inside the Data List, you can select the Data Group element and adjust the layout of the list, choosing Horizontal, Vertical, or Tile based layouts. You can also adjust the padding and spacing of the objects to get the exact look you are going for.

To create a Data List from existing artwork:

1. Select the artwork that represents a single item that will repeat in your list and your list background (if applicable).
2. Open the “Choose Component” drop down under Convert Artwork to Component in the HUD.
3. Select “Data List”.
4. Click the “Edit Parts” button in the HUD.
5. Select the artwork that represents the single item of the list.
6. Open the “Choose Part” drop down under Convert to Data List Part and select “Repeated Item” in the HUD.
7. Adjust the visual area of the data list (called a Data Group in the Properties panel) using the mouse or adjusting the width and height items in the Properites panel.
8. Open the Layout section of the Properties panel, and select the desired layout arrangement and column spacing, row spacing and alignment.
9. Exit the component using the Escape key or by double clicking outside the component area.
10. Select the new data list and open the Design Time Data panel
11. Add or remove items as needed, replacing images and text with the appropriate values.

Flash Catalyst lets you create your own custom components where you create the various component states yourself. To create these, select “Custom/Generic Component” from the HUD. Then you can create and name your own custom states inside the new custom component.

When you have states inside the custom component, you can then select which state you want to display using the Properties panel of the custom component and select the state that you want to appear.

To create a custom component:

1. Select the artwork that you want to convert into a custom component.
2. Open the “Choose Component” drop down under Convert Artwork to Component in the HUD.
3. Select “Custom/Generic Component”.
4. Double-click the component, or select “State1” from the HUD to enter it.
5. Add states as needed using the Pages/States panel.

Once you have components created, you can then attach behaviors to them. All interactions are created in the Interactions panel. When you select a component, the Interactions panel knows the type of component you are working with and when you click “Add Interaction” will give you a selection of interactions that are unique to the component.

The interactions pop-up is like a sentence that you need to complete. By finishing the interaction statement, you have defined the interaction on the component. An example sentence could read like this: “On click, play transition to state Clicked, when in the Home state.” Or “On click, play video SampleMovie.flv when in any state.”

To create an interaction on a Button component:

1. Select the button that you want to add an interaction to.
2. Click the “Add Interaction” button in the Interactions panel.
3. In the interactions pop-up, complete the sentence by selecting items from the dropdowns:
   • a. The action that triggers the interaction.
   • b. The action that happens when the interaction takes place.
   • c. The target of the action.
   • d. Any special conditions that may need to exist for the interaction to take place.
4. Click “OK”.
5. The Interactions panel will then display the interaction for the object.

When you make changes to your project in different states, Flash Catalyst tracks a number of changes and builds out transition timelines for your project. In Flash Catalyst, a transition represents how the application design flows from an origin state to a destination state. The Timelines panel shows all of the transitions that are in your project based on the names and number of states that you have in your project or component.

By selecting a specific transition timeline, you can then see the various transitions that take place. By default, the transitions are instantaneous, but you can choreograph them visually using the timeline editor. By stretching the timelines out, or by clicking “Smooth Transition” at the bottom of the panel, you can build out the duration and timing of the animated effects in each of your transition timelines.

To create a transition between application states:

1. Open the Timelines panel.
2. Select a state to state transition on the left hand side.
3. Select an individual transition item and expand it by dragging the right end of the transition, or time it by dragging the transition bar along the timeline.
4. Press the play button above the timelines to preview a transition.

To create a transition between application states:

1. Select individual transition effects, a specific state transition or multiple state transitions.
2. Click the drop down arrow next to the Smooth Transition button.
3. Set your Smooth Transition timing and preferences, choosing to overwrite existing effects if applicable.
4. Click OK.

You can also add additional effects into your timeline using the “Add Action” button. By selecting a object on the artboard, you can add a unique action for it to your timeline including the ability to add simple 3D effects, set component properties, or set a component state.

To add custom effects to state transitions:

1. Select a state transition that you want to add an additional effect to.
2. Select the object on the artboard that you want to add the effect to.
3. Click the “Add Action” button.

If you want to create an animated sequence without going between states, you can create action sequences based on interactive behaviors and build out unique timelines linked to those behaviors without needing to build an origin or destination state in your project.

To create an action sequence:

1. Create a new interaction that will trigger the action sequence. Choose the interaction action to be “Play Action Sequence”.
2. Select the action sequence from the Timelines panel.
3. Select items that you want to add to the sequence and attribute effects to them using the “Add Action” button.
4. While the effect timelines are selected, modify effect properties using the Properties panel.
5. Preview the action sequence by clicking the Play button.

In addition to artwork from Creative Suite design tools, youcan also import Flash Professional SWF files into your project. When you import a SWF, you can position it on the artboard.

You can control the playback of your SWF using action sequences and transition timelines and adding common SWF playback actions.

To import and control a SWF:

1. Open the File > Import > SWF File… menu item.
2. Find and select your SWF file.
3. Select a transition that includes the SWF file from the Timelines panel.
4. Select the SWF on the artboard.
5. Click the “Add Action”.
6. Select “SWF Control” from the fly-out menu and select a SWF control option.

If you have video and audio files that you want to include in your project, you can import them into Flash Catalyst. If your video is not in one of the supported video formats, you can use Adobe Media Encoder to encode your videos into the common Flash video formats, or into MP3 for audio.

When you import a video into Flash Catalyst, it will be placed on the artboard and automatically placed in a video controller. You can use a wireframe or standard design for the controller, or you can hide it and make your own.

To import and define settings for a video:

1. Open the File > Import > Video/Sound… menu item.
2. Find and select your video file.
3. Open the Common section of the Properties panel with the Video Player selected.
4. Modify your video controls, scale, and sizing options as desired.

To create your own playback controls, create buttons and link them to Play, Stop and Pause video interactions and select the target video in the Interactions panel.

To create a custom video Play button:

1. Create a button by converting artwork into a button component or by re-skinning a wireframe component.
2. With the button selected, open the Interactions panel.
3. Select “Add Interaction”.
4. Select “On Click” then “Play Video”.
5. Choose the video you want to play in the new drop down list at the bottom of the panel.

To work with audio, you need to add it to a timeline using “Sound Effect” under the “Add Action” button. Then you can time and adjust the playback of the sound effect in context with other animated sequences.

To import a sound effect:

1. Open the File > Import > Video/Sound… menu item.
2. Find and select your sound file.

To play a sound effect during a transition:

1. Open the transition or action sequence that you want to add the audio to and select a transition effect in your timeline.
2. Click the “Add Action” button.
3. Select “Sound Effect” from the fly-out menu.
4. Select the audio file from the Select Asset dialog that you want to play.
5. Adjust the new audio timeline as needed.

Flash Catalyst includes multiple ways to optimize your artwork to reduce published file size and to make it easier for developers to work with your project, and to make design changes after you have published.

When working with vector graphics, the paths, colors, fills, gradients and other aspects of the design are saved in FXG, a new XML format for use with Flex and Flash Player. If you have complex vector graphics, it can be a lot of code for your developer to work with. To make this easier, you can convert the vector object to an optimized graphic. This will extract the FXG code into a separate file, resulting in cleaner code for your developer. In addition, by using optimized graphics, you will increase the performance of your application.

To convert artwork to an optimized graphic:

1. Select the artwork on the artboard.
2. Select “Optimize Vector Graphic” from the Optimize Artwork dropdown, or right-click the artwork and select “Optimize Vector Graphic”.

For complex vector objects that don’t need to retain their vector data, you can rasterize them into bitmaps. In addition, bitmaps can be compressed using JPEG compression to bring down their file size.

To rasterize a vector object:

1. Select the artwork on the artboard.
2. Select “Rasterize” from the Optimize Artwork dropdown, or right-click the artwork and select “Rasterize”.

When working with bitmaps, you can also set them to be externally linked images. This will prevent bitmaps from being embedded into the published SWF file. When you publish from Flash Catalyst, you will have an extra folder that will contain the bitmaps that were set as externally linked. This will bring down the file size of the published project, and also let you make changes to the bitmaps without having to reopen the project in Flash Catalyst.

To set a bitmap to be linked externally from the published SWF:

1. Select the bitmap on the artboard, or select the bitmap from the Library panel.
2. Select “Convert to Linked Image” from the Optimize Artwork dropdown, or right-click the artwork in the Library panel and select “Convert to Linked Image”.
3. Click “Convert to Linked Image” in the confirmation dialog.
4. The bitmap in the Library panel will display an icon indicating that it is now a linked image.
5. 

You can re-embed the image in your project by selecting “Embed Image” when right-clicking the image from the Library panel.

Once you are finished with your project, you can then publish it in a number of formats using the “Publish to SWF/AIR” from the File menu. In the dialog box that appears, you can customize the publish settings.

Flash Catalyst gives you the ability to create a version of your project that you can post on a web server. This gives you all of the HTML, SWF, JavaScript and other files that are required and configured for the project to run when you post it up on a web server.

To publish your project:

1. Open the File > Publish to SWF/AIR option in the menu.
2. Choose a publish destination in the Output directory field.
3. Select the types of projects you want to publish.
4. If you are using custom fonts, click the “Embed Fonts” checkbox to include the fonts with your compiled SWF.
5. Click the “Publish” button.

When you are finished with your project in Flash Catalyst, you can open the file in Flash Builder to finish the project by connecting to live data services, add in custom behaviors using ActionScript, or give your project to a developer to complete.

To import a Flash Catalyst project in Flash Builder 4:

1. In Flash Builder select File > Import Flex Project (FXP).
2. Select “Browse” from the Import project, File option.
3. Find and select your FXP file from Flash Catalyst.
4. Click “Finish” at the bottom.
5. Open the project from the Package Explorer on the left side of the application.
6. Find your main application file as src > (default package) > Main.mxml.