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:
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:
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:
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:
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:
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/
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:
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:
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:
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:
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:
To create a transition between application states:
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:
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:
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:
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:
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:
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:
To play a sound effect during a transition:
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:
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:
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:
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.
To publish your project:
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: