In this tutorial we’re going to go through the steps to create a microsite for my fake mountaineering guide service. It will take you through most of the things you can do with the Flash Catalyst MAX Release. To start, you’ll need to have Flash Catalyst installed, Photoshop CS4 installed, and you’ll need to download the PSD file here. This tutorial is also available, with some minor changes, as a screencast (thanks to the screencast godfather, Lee Brimelow).

Importing Artwork

You can start by taking a look at the PSD file. To optimize things for use in Flash Catalyst I’ve merged some of the layers that we won’t need to work with. Notice the layer structure and the folder structure. Go ahead and open up Flash Catalyst and under “Create New Project from Design File” select “From Adobe Photoshop PSD File…” and select the file you downloaded, Expedition_Simple.psd.

On the import screen you’ll see a bunch of options. For now you can leave these set to the defaults, but Flash Catalyst lets you customize how you bring in your design compositions. We’re going to keep all of our layers editable as well as import non-visible layers. There is also an Advanced menu in the lower left hand corner that will let you specify layer-by-layer whether you want to keep things editable or flatten them when you bring assets into Flash Catalyst.

Introduction to the Flash Catalyst Interface

Once the import libraries have loaded, you should see your composition exactly as it appeared in Photoshop. The layers will be listed in the layers panel on the left, you should have a timeline down at the bottom, and a single Page1 state in the Pages/States panel. You will also get a warning about the fact that auto-effects have been disabled. Flash Catalyst can automatically create transitions between states based on how you manipulate objects and components. If you’re dealing with a lot of layers or objects, this can slow it down, so we turn it off by default. Our document is fairly straightforward, so the first thing we want to do is turn those effects on by going to the “Timelines” menu and selecting “Auto Effects for New Transitions”.

Now we’re ready to get started. Let’s first minimize the timeline by double-clicking on the Timeline tab – that gets it out of our way. Next we want to create a new state for the most popular trips. Up in the Pages/States panel, click on “Duplicate State” and it will copy all of the information from Page1 into a new Page, Page2. A few things happen when we do this. First, notice the Timeline pops back up and we can see that we’ve got space for transitions from Page1 to Page2 and back. In our layers panel, we’ve also now got two boxes next to all of our layers where we used to just have one. The colored boxes are visual cues so you can tell which layers belong to which pages and states. Notice that the two Pages we created have colored edges which match the colored boxes of our layers panel. Let’s go ahead and rename Page1 to “Main” and Page2 to “Most_Popular” (you aren’t allowed to have spaces in your Page names).

Make sure Most_Popular is selected and then in the Layers panel click the eyeball box next to Popular Detail – this hides and shows all the contents of that folder in this state. When you do that, notice that our Timeline creates a whole bunch of fade transitions for us because Flash Catalyst detects that the difference between “Main” and “Most_Popular” is that we’ve made those layers visible. We’re going to do some customization here, so hide the Timelines panel by double-clicking on its tab and then click the arrow next to the Popular Detail folder layer to show its contents.

Creating a Custom/Generic Component

We’re going to first create a custom component out of the Mont Blanc menu item. We have a folder for the Hover state and a normal one. Click the arrow next to Mont Blanc Hover and select all of the sublayers. Click Control+G (or Option+G) to group them. If you click the arrow next to the group, you’ll see all of the layers are still there, this just makes them easier to work with. We can also double-click the on the “Group” text and rename it. Lets call it “Mont Blanc Hover”. Now we can create our custom component.

Select the Group we just created as well as the layer inside of the Mont Blanc Folder. It should look like the picture below. Once those are selected, we can use the HUD to create a custom component. The HUD is the black floating box and it changes based on what you have selected so you get the right context when you’re working with assets. In this case it sees that we have two objects selected and (correctly) assumes we want to work with the properties. Using the HUD we can click on “Convert Artwork to Component” and select “Custom/Generic Component” at the bottom of the list. now our Mont Blanc Hover folder should show a layer called “Custom Component 1″. Double-click the text and change the name to “Mont Blanc”.

To actually edit the component we need to double-click on it inside of our main design space. When we do that, our design view changes so that we’re only dealing with what’s in the component. You’ll see everything else disabled; we only have one State in our Pages/States panel, and our Layers panel has changed slightly – there are now two layers (our Mont Blanc Hover Group, and the original Mont Blanc artwork) under the CustomComponent1 header. If we were dealing with a built-in component like a button, in our states panel we would see states like Up, Over, Down, and Disabled, because those are the built-in states for a button. But with Custom/Generic components we can create our own states. Let’s use the Duplicate State button to create a copy of State1 and then rename State1 “Normal” and State2 to “Hover”.

Creating Transitions with the Timeline

Now we need to manipulate the behaviors for the state. In the Normal state we want to show the regular graphic, so make sure you have the Normal state selected and click the eyeball next to your Mont Blanc Hover Layer. Now go back down and double-click the Timelines tab and you’ll see that Flash Catalyst automatically created the Fade effects for us. If you click on the play button, you can see the transition. But it’s not very good or interesting, so let’s do a bit more with it. The effect we want is for the normal graphic to enlarge and the more detailed information to fade in as it gets bigger. Select the “Hover” state and then use the layers panel to select the regular Mont Blanc graphic (it’s hidden behind our larger hover graphic, so we can’t use the main design area). Now grab the lower left hand corner of the blue rectangle and drag it to make it the same size as the larger Mont Blanc Hover asset. If you did it right, you should see that Flash Catalyst automatically created a Move and Resize effect to go with the Fade effect from before in the Timelines panel. Go ahead and play it to see how it looks. You can toggle between the Normal > Hover and Hover > Normal to see both transitions.

As you can see, it’s not exactly perfect. Luckily we can manipulate things on the timeline to tweak the effect. I like shortening the fade effect and moving it over to the right just before the Move and Resize effects end. You can alter it however you want, just make sure you change both the Normal > Hover states and the Hover > Normal states. Congrats! You’ve created your first custom Flex component in Flash Catalyst. Now click the Expidition_Simple text in the black bar above your design area to go back to the main part of the application.

Creating Interactions

Now that we have the custom component set up, we need to create interactions for it so that when the user rolls over it, we move to the hover state. Your custom component should already be selected, but if it’s not, select it in the main design area or by clicking on “Mont Blanc” in the layers panel. Now select the Interactions tab of the HUD. You’ll see a button to edit the component, but we already did that, so what we want to do is to create a Custom Interaction. We can do that by clicking the plus sign. We want to create a New Custom Interaction for On Rollover. When we do that, it adds an On Rollover interaction to our list. We can now click on the Do Action menu and select “Play Transition to State”. That enables the box right next to it so we can select which state we want to transition to. In this menu you’ll see the two states for our main application, Main and Most_Popular, and also another section which has the states for the component we just created. Go ahead and select the Hover state under Mont Blanc. We also want to create the On Rollout effect, so copy the steps, but Play the transition to the Normal state instead of the Hover state.

You’ll notice that you can also Play an Action sequence under the interaction menu. I won’t get into that right now, but you can use action sequences if you want to move around assets outside of the component that’s changing. It gives you more flexibility over how the rest of your application responds to interaction events.

Working Between Pages

Now that we’ve created our custom component we can start building the transitions between our two pages. Switch over to the Main state and you’ll see that creating our custom component is now visible (that happens when you create it) so let’s go ahead and make the rest of our popular graphics visible by using the layers panel. Make the Rainier and Waddington graphics visible but leave the Popular info one alone, we’ll get to that in a second. The effect we want is for those three boxes to jump in from the right hand side of the page. Select those three boxes either in the main design area or the layers panel and then just move them off screen with the arrow keys or your mouse. Just like with our custom component, Flash Catalyst has automatically created the transitions for us and we can test them with the play button.

I’m kind of a sucker for interesting transitions so I’m going to tweak them a bit so that Rainier at the top comes in first and the others follow. You can create it however you want, but my timeline looks like this (and remember to change transitions for both states):

Working with the Drawing Tools

We’ve created the pages and the transitions but we still need a way for our users to get there. We’ve got some text links over on the right hand side, so let’s turn the Most Popular text link into a button. When you bring Text with a stroke into Flash Catalyst, it creates both the Text object and the stroke object, so select both of those using the layers panel and then use the HUD to convert them into a button component. When we do that, the HUD changes so that we can automatically edit any state we want. Click on the “Over” state in the HUD so we can start editing that part of the button.

Now we can use the built in drawing tools to create a box around the text when we hover over it. Select the rectangle tool and just draw a rectangle around the text. When you do that, the HUD will pop up and you can alter some of the properties. Go ahead and change the Fill color to Black and the Stroke Color to “d0d1d9″. Also change the opacity to 70.

But that doesn’t look quite right. Just like with all of the Adobe design tools we can manipulate the layers panel to change depth. Using your layers panel, move Rect 1 below the text by dragging it to the bottom.

Now we also should change the down state to include the rectangle and maybe make it a bit more transparent. Use the Pages/States menu to select the Down state.

You may have noticed that your Rect 1 is greyed out in the Layers panel and that the only box which is colored is the blue one because we’re only using it in the over state. Like we did with the custom component, we can add it to this state by clicking the eye column. Make sure the rectangle is selected and then let’s change the opacity to 60 and increase the stroke width to 2.

Now back out into the main application and using the HUD create a click interaction just like you did before on that Most Popular button we just created. We just want to create an On Click interaction and transition to the Most_Popular state.

Working with Components and Skin Parts

Now we want to put the finishing touches on the application by letting people search for trips. You can see we’ve got a rectangle with the words “Search for Trips” inside of it, so that might make a pretty good place to create a search box. Using the layers panel, select the following three layers: Search for Trips, Layer 21, Layer 21’s Out Stroke and use the HUD to convert that artwork to a Text Input component. Your HUD will look a bit different from before and you’ll now have an Edit Parts button. Go ahead and click it.

This brings you to the component editing mode that you’ve seen a couple of times now. Use the Layers panel to select the Search for Trips layer, which is the actual text layer. When you click on it, the HUD changes again and you have an “Assign Parts” dialog box with the ability to Convert Artwork to Text Input Part.

In Flex 4 we have the concept of Skin Parts. For instance, in a scroll bar you’d have a few different skin parts: the track, the thumb, and the buttons for up and down. When dealing with more complex components, Flash Catalyst lets you specify which artwork should be associated with a particular skin part for that component. Text Input controls have one skin part, the actual text, and Flash Catalyst is smart enough to figure out that if you select a piece of rectangle artwork and a piece of text artwork that the text should be the Text View part. But I wanted to point out the feature, so make sure you still have the “Search for Trips” layer selected and use the “Convert Artwork to Text Input Part” to specify that you want the text to be the Text View part.

Finishing Up

You should be done! Use the File > Run Project menu to see how it looks.You should be able to interact with the Most Popular button, hover over the Mont Blanc graphic to get the detail, and type text into the Search box. Notice that Catalyst preserved the exact font information we had in Photoshop.

Where to Go From Here

Now you have a couple of different options. We’ve been working on a Flex Project this entire time. You can switch over to code view and see how some of the components and states were created. If you’re finished, you can use the File menu to Publish to SWF and deploy this to the web. But for a lot of your Flash Catalyst projects you’ll want to add some logic or data. For that, we can save this project out as an FXP file. The FXP file is just a zip file which contains all of the assets and code we need to work on the Flex Project. Using Flex Builder “Gumbo” we can open this exact same project and start doing some development work on it. Did you notice that little Google-map looking square when we hovered over the Mont Blanc graphic? Hmm, that might be a great thing to make interactive using Flex Builder Gumbo. I’ll save that for a later tutorial though.

Here are the files available for download:

• Photoshop PSD
• Final FXP Project
• Zip File of PSD and FXP
• Screencast in MOV format