- Exciting Opportunities
- Test Drive: My First Flash Catalyst Project
- Real-World Ideas: Using Flash Catalyst to Leverage Existing Skills
- We Have a Winner!
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Test Drive: My First Flash Catalyst Project
I was able to get on Adobe's prerelease beta program to try Flash Catalyst, to find out just what I could and couldn't do. Read on for the play-by-play of my first project.
For a project theme, I decided to create an interactive web portfolio featuring some of my acrylic paintings. I thought it would be fun to display them as though they were clipped to a clothesline, which the user could scroll through horizontally, using a back/forward button interface. I wanted to add text descriptions of each piece of art as well.
In Photoshop CS4, I created my initial design as layered artwork. In this case, my concept was to have samples of my paintings slide into the frame clipped onto a clothesline (see Figure 1).
)
I created a home page for the site as well (see Figure 2). I can envision animating this paint splatter, but I'm new to Flash Catalyst, so let's not push it.
)
Next, I opened Flash Catalyst. At the welcome screen (see Figure 3), I chose the option to create a new project from an Adobe Photoshop PSD file.
)
Flash Catalyst imported my layered Photoshop artwork and set it up for me to begin implementing interactive features (see Figure 4).
)
As Figure 4 shows, Flash Catalyst maintained my Photoshop layers. When I clicked a layer in the Layers panel, the program selected the corresponding object in the artwork and opened the Heads-Up Display (the black pop-up interface in Figure 5), which allowed me to convert the selection into a button, text input, scrollbar, or data list.
){kind=small}
Across the top of the interface are pages, called states in Flash Catalyst. These states are akin to web pages in that they represent locations within the project.
To create interactivity between pages, I clicked the New Blank State button at the top of the interface and imported another layered Photoshop file, representing the portfolio area of my site. Flash Catalyst created a corresponding new page, as shown in Figure 6.
){kind=small}
At the bottom of the user interface is a Timelines panel, which displays motion and transitions. I selected the Page1 > Page2 transition and applied a Fade Out to all the layers on page 1, as shown in Figure 7.
){kind=small}
Since I wanted my first content page to be blank except for the header and footer elements, I slid all the paintings and clothespins—as well as the copy—off to the right of the page, and hid those layers. With page 2 selected, I clicked the Duplicate State button to create a third page identical to the second page (see Figure 8).
){kind=small}
Then it was time for some Flash Catalyst magic! On the third page, I revealed the layers I had just hidden, and slid the first two paintings and copy back onto the page. Flash Catalyst automatically created Move and Fade transitions for me in the Timelines panel, creating the appearance that the artwork was sliding onto the screen along the clothesline (see Figure 9).
)
At this point, I realized that the copy on page 3 didn't match the image of the bird to which the arrow above the copy was pointing. Since I'd chosen to keep my text layers editable when I imported my Photoshop artwork at the beginning of the project, I was able to edit my text directly in Flash Catalyst and change it to match the image.
To add actions to a layer manually, you can select the layer in the Timelines panel and click Add Action to select from a menu of actions, including fade, move, resize, rotate, and rotate 3D (see Figure 10).
){kind=small}
Flash Catalyst's roundtrip workflow comes in really handy when you want to make a change to your artwork that the basic editing tools in Flash Catalyst cannot handle. Right-click the desired layer in the Layers panel, and choose Edit in Illustrator CS4, as shown in Figure 11.
)
The layer opens within Illustrator, allowing you to change the selected object. Once you're done with the edit, save the file in Illustrator and close it. When Flash Catalyst asks whether you want to accept the changes from Illustrator, click Yes, and the update is imported into your Flash Catalyst project.
Having put into place some of the basic animations I wanted to use in this project, I was ready to add buttons to advance the paintings along the clothesline. I had already put the artwork for the buttons in place in Photoshop, so it was just a matter of defining them as buttons (custom components, as Flash Catalyst calls them) and specifying what they do.
While I was on page 2, I selected the forward arrow and the text that says "next" within the Photoshop art. Flash Catalyst automatically opened the Heads-Up Display, as shown in Figure 12.
)
From the Convert Artwork to Component menu, I selected Custom Component. From the Custom Interactions menu, I selected On Click. Finally, I selected Play Transition to State; for the state, I chose Page3 and When in Page2 (see Figure 13).
)
The State 1 button at the top of the HUD allows you to define one (or several) states for the component. The component states are shown in the Pages/States panel (see Figure 14).
)
I went through a similar process to define the "back" button on page 3, editing the transitions in the Timelines panel under State Transitions, Page3 > Page2, so that the images would slide back off along the clothesline to the right of the screen, and the text would fade out.
Finally, to see my project in action from the beginning, I chose File > Run Project (see Figure 15). Alternatively, you can just press Ctrl-Enter. I can export my project as an SWF from the File menu and have a web-ready interactive project in a minute or two.
)
Well, so far I'm impressed! Flash Catalyst has the potential to increase the productivity and scope of projects we can handle in-house at our studio. Check out the next section for some real-world examples of how we hope to include Flash Catalyst in our workflow, based on projects we've done in the past year.