Creating a Four-State Button with Flash Catalyst CS5
- Generating the Four-Step Flash Button
- Saving the Button as a SWF
- Embedding the Button in Dreamweaver
- From Here
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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 objects—such as a four-state button—and 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 states—normal, 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 artwork—a 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
- Press T to activate the Text tool. Click to place the insertion point on top of the button, and type CLICK. Use the Select tool in the Catalyst toolbar to locate your text on the button. Use the Text Properties panel that becomes active to format the text color (your choice), font (I chose regular Impact), and font size (36 points). Figure 2 shows my results.
- Now that we're done with the basic button artwork, it's time to start generating a four-state button. Click and drag with the Select tool to select both the button and text. With both objects selected, click Button in the Choose Component pop-up in the Convert Artwork to Component box (see Figure 3).
- Next, we'll add an action to this button—so that, when clicked, it opens a new URL. With the button still selected, click the Add Interaction button in the Interactions tab of the Button panel. From the first pop-up, select On Click. From the second pop-up, choose Go To URL.
- When you converted the selected artwork to a button, the Convert Artwork to Component pop-up menu displayed a four-tab box near the top of the Catalyst window (the Page tab bar). Four button states (up, over, down, and disabled) are visible as separate tabs. Click any of them to open the selected button state in the artboard. All four button states now display at the top of the screen, and you can switch to any of them by clicking one (see Figure 5).
- Click the second page in the Page tab bar—the Over state. Right now, all four states have the same artwork. We'll modify the artwork, using Catalyst's set of filters, so that each button state looks a bit different.
- With the Over state selected in the Page tab bar, use the Select tool to select the rounded rectangle. In the Rectangle Properties panel that becomes active, collapse the Common and Appearance sections of the panel by clicking the small, down-pointing triangle next to each one. Expand the Filters section of the panel, if necessary, by clicking the small triangle next to Filters.
- Click the Add Filter plus (+) symbol to open the list of filters. Add a drop shadow to this version of the button (see Figure 6). The default drop shadow settings will be fine. The drop shadow will appear when the user hovers the pointer over the button.
- Click the Down state page in the Page tab bar. The rectangle should still be selected; if not, use the Select tool to select it. Choose Glow from the Add Filter pop-up. Again, the default settings are fine, but feel free to experiment with them.
- For the final state, Disabled, expand the Appearance section of the Rectangle Properties panel. Choose the Lighten blend mode for the rounded rectangle. When the button is disabled, this setting will present a dimmed version (see Figure 7).
){kind=small}
Figure 1 Rounded rectangle parameters.
)
Figure 2 Text properties.
){kind=small}
Figure 3 Converting artwork to a button.
A new box—called the Head Up Display (HUD) box—appears 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 on—you need the entire URL of the target link.) In the final pop-up, choose the target browser window—either a new browser window, or the current browser window (see Figure 4).
)
Figure 4 Defining a URL action.
){kind=small}
Figure 5 Four button states are available for editing.
){kind=small}
Figure 6 Adding drop shadow.
){kind=small}
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.