Article
About the Author
Andrew Muller
Trainer, mentor, developer, blogger, and presenter, Andrew Muller has
been involved with Rich Internet Applications in Australia since 2002. He's also a certified Adobe instructor for Flex, AIR, ColdFusion, Flash, and Connect, and an Ambassador and Community Expert for Adobe.
Flash Catalyst: Mockup to Masterpiece, Part II
In part one of this article we started building a small Rich Internet Application that would display music charts using data from a YQL query. We started with Adobe Illustrator to mock up the user interface for our app, then transferred the Illustrator file into Flash Catalyst to begin converting the design into an interactive piece.
In part two, we will continue adding interactivity in Catalyst, and then move into Flash Builder to finish it up. For fun, there’s a quiz at the end!
Creating Buttons From The Artwork
Each of the tabs on the left of our application will now be converted into a button component. We’ll do this by selecting both the text and background graphic for the first tab, and using the Heads Up Display (HUD) to convert it into a button. Repeat this process for the other two tab graphics.
Button components have four states:
- Up, as a normal state for the button
- Over, when the mouse is hovering over the button
- Down, for when the button is being clicked
- Disabled, for when the button may not be pressed
Buttons for each of these states appear within the HUD whenever one of your buttons has been selected. We can edit each of the states’ graphics individually by clicking on them.
Double-click on the button with the blue arrow graphic to select it, and copy the button. Use the breadcrumb at the top of the Design area to switch out of the button, and then double-click one of the other two buttons. Go to the Over state, delete the graphic that’s there, then paste the blue arrow in its place. To align it precisely, look at the Properties panel and set the X and Y values to 0. You should now find that the arrow is positioned perfectly.
Something missing? The text in that state will most likely have disappeared, because the blue arrow will have been placed into a new layer above the text. To make it reappear, simply go to the Layers panel and grab and drag the text layer and drop it above the new graphic layer. This text will also need a change of font color.
Currently, Catalyst’s ability to edit graphics is quite limited. We’re able to modify this label’s size and opacity, but to change other attributes like color or font, we need to return to Illustrator. To do that, right click on the text object and choose Edit in Adobe Illustrator CS4.. You can do this either in the design area, or within the Layers palette.
This will launch the artwork in Illustrator—only the text will be editable‚ and the remaining content will be disabled. You’ll also see a bold yellow message above the Illustrator artboard, telling you to save and close the window when you’re finished.
In Illustrator, change the font colour to white and save. Illustrator will prompt you to save with FXG options‚ FXG is the new language that Catalyst uses to exchange graphics between itself and Adobe design tools like Illustrator and Photoshop. Accept the defaults and close the file in Illustrator, and then switch back to Catalyst. There’ll be a dialog asking you whether you want to accept the Illustrator changes. Accept them, and you’ll see the text with its new colour.
Repeat that process for the button’s Down state. You’ll need to copy a grey background from one of the other two buttons to use for the Up and Disabled states in the Popular Artists button as it had the blue arrow graphic when we created it. You’ll also need to change the colour of the font for this button in Illustrator to black for the Up and Disabled states‚ so let’s do that now.