Applying Transitions and Actions in Flash Catalyst CS5
- Creating a Button to Trigger a Transition
- Adding Artwork
- Creating a New State for the Transition
- Adding an Action in the Timeline
- Testing and Exporting to SWF
- From Here
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
I have to admit that Adobe Flash Catalyst is growing on me, despite the fact that I had to be convinced to include substantial coverage of Catalyst in Adobe Creative Suite 5 Web Premium How-Tos: 100 Essential Techniques.
At first, I thought that Catalyst didn't offer much to those of us who work outside the rigid, strictly hierarchical design environments where designers design, programmers program, and ne'er the twain shall meet. However, after Victor Gavenda at Adobe Press nudged me toward a second and third look, I saw that there's more to this new kid on the Flash block than meets the eye. Catalyst might actually be a better fit than Flash Professional for many web designers who need Flash interactivity and a bit of animation.
In previous articles, I've shown you how to create four-state buttons, custom video players, and—perhaps my favorite—customized scrolling boxes. In this final tutorial, we'll cover everything you need to know to create an impressive web page with Flash animation and interactivity. On this inviting splash page, visitors will be able to click (or hover over) a button, and artwork will transition from one state to another and rotate in three dimensions.
Here's a quick preview of the process. We'll start by creating a button to trigger the transition. Then we'll whip up a shape that transitions from one state to another. (In real life, you'd probably create more complex artwork, but here we'll rotate a sphere.) Finally, we'll use the Catalyst timeline to add a Flash action, making the transition really dynamic.
Ready to get started? Launch Flash Catalyst (or borrow it for 30 days from Adobe), and follow the path I've sketched out in the following sections.
Creating a Button to Trigger a Transition
The object of this tutorial is to apply a transition and an action to some artwork. In short, we want to animate the artwork. To do that, we'll need a button that users interact with to trigger the transition.
The first step is to create the button. Here are the steps for that phase:
- Launch a new Catalyst project and give it a name. (I'm calling mine e for short.) Leave the artboard dimensions at their default 800 pixels (width) by 600 pixels (height). Leave the background color at the default white, just to keep things simple. Click OK to generate a new Catalyst project.
- Just for basic reference, press Ctrl-R (Windows) or Command-R (Mac) to view the ruler, and Ctrl-' (Windows) or Command-' (Mac)—that's the apostrophe (') key—to view the grid. We won't stress over precise sizing here, but the ruler and grid will help us to stay on the same page (literally and figuratively) as we create the basic artwork we need.
- Press U to activate the rounded rectangle tool. Draw a rounded rectangle near—but not quite at—the upper-left corner of the artboard, about 100 pixels high and 200 pixels wide. With the rounded rectangle still selected, apply a yellow fill, using the Fill palette on the Common tab of the Properties panel, as shown in Figure 1.
- Press T to activate the Text tool. Click inside the rectangle and type CLICK FOR ANOTHER VIEW. Use the Select tool to place the text.
- With the Select tool, select both the text and rectangle, and choose Modify > Group.
- With the button content still selected, choose Button from the Choose Component pop-up in the Head Up Display (HUD)—the gray box that floats on the artboard when you select objects in Catalyst (see Figure 2).
)
Figure 1 Rectangle properties.
){kind=small}
Figure 2 Creating a button.
That's it—button done! We'll use this button to activate the transition effect that is the main object of this tutorial.