Creating a Four-State Button with Flash Catalyst CS5
Flash Catalyst CS5 is a brand-new addition to Creative Suite. And Flash Catalyst is all about workflow.
In my book Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques, I introduce Flash Catalyst by noting that one audience for Catalyst is illustrators who are "designing in a large environment with a rigid division of labor and an army of programmers and database geeks." In that situation, Catalyst artwork is handed off to Flash Builder 4 coders, who can integrate illustrations seamlessly into their applications.
But Catalyst can fit into another workflow: You can use Catalyst to generate interactive Flash objectssuch as a four-state buttonand pop those Flash objects directly into a Dreamweaver website. The vast army of small scale web designers will appreciate that side of Catalyst.
In the book, I explore in detail the dynamic synergy between Illustrator, Photoshop, and Catalyst. For this article, we want to focus on adding interactivity in Catalyst, so we'll skip the process of integrating Illustrator artwork. Instead, we'll create a simple button right in Catalyst, using Catalyst's essential drawing tools. Then we'll make that button display differently in the four statesnormal, hovered, clicked, and active (or some variation of those states)and we'll embed that button into a Dreamweaver web page. This process isn't quite as intuitive as you might wish, so I've included some detailed steps to guide you.
Again, we're going to bypass the Illustrator/Photoshop part of the workflow I just described, in order to focus on creating interactivity with Catalyst. But in a more real-world situation, you'd likely create button artwork in Illustrator (or Photoshop) and then pop it into Catalyst for activation.
Generating the Four-Step Flash Button
Let's begin by using Catalyst's minimalist toolset to create artworka button and text. I can dispense with a quick intro to the Catalyst interface, because the learning curve for acclimating to the Catalyst environment is a short, flat line, and navigating through Catalyst's very limited toolset is easy.
Here are the steps:
- On the Flash Catalyst splash screen, choose New Project from Illustrator AI File or From Adobe Photoshop PSD File. If you don't have a button graphic handy in either of those programs, click the Adobe Flash Catalyst Project button in the Create New Project section of the splash screen. Name the project (I'm using 4-state_button as a filename). For the Artboard size, enter 200 in the Width box and 50 in the Height box. Click OK in the New Project dialog to launch Flash Catalyst.
- Press U on your keyboard to activate the rounded rectangle tool. (This tool is also available from Catalyst's very limited drawing toolbar, which is always visible.) Draw a rounded rectangle large enough so that you can type a bit of text on it. After you draw the rounded rectangle, the Properties panel displays parameters for this shape. Use the following values or invent your own (see Figure 1):
- fill color: yellow
- stroke color: red
- stroke weight: 6
- width: 200
- height: 50
Figure 1 Rounded rectangle parameters.
Figure 2 Text properties.
Figure 3 Converting artwork to a button.
A new boxcalled the Head Up Display (HUD) boxappears under the Go To URL button. Enter the entire URL of the link you want to open when the button is clicked. (Be sure to include the http://www and so onyou need the entire URL of the target link.) In the final pop-up, choose the target browser windoweither a new browser window, or the current browser window (see Figure 4).
Figure 4 Defining a URL action.
Figure 5 Four button states are available for editing.
Figure 6 Adding drop shadow.
Figure 7 Lightened button.
You can test the interactive Flash button by choosing File > Run Project. The button opens in your default browser. (The browser must have the Flash Player installed.) Ready? Click the button! After you've tested the button to your heart's content, close the browser window and return to Flash Catalyst.
Feel free to experiment with other Filters or Appearance settings for any or all of the four button states. You can add multiple filters to any button state. If you want to delete a filter from any of the button states, click the X in the upper-right corner of the box (see Figure 8).
Figure 8 Deleting a filter.