In this tutorial, we will finish the portfolio slide-show in Adobe^R Flash^R Catalyst^R. If you have been following along, we have made our buttons and are ready to add the special effects. As we navigate through the portfolio, we want the button for the visible logo to be dimmed and the other buttons visible. Therefore, we need to tell Catalyst which button is for which page and when to dim the buttons. Then we will add a Fade transition effect between pages.

First we will dim the button for the current logo. When logo 1 is visible on the Page1 State, we want the matching button to be dimmed. We need to do this for all three States or pages of our portfolio.

1. Click on the Page1 icon in the Pages/States panel to work on that page. Click on the thumbnail image that is now our button for logo 1. In the Properties panel, set the Opacity to 40. Because the center of the mat underneath the button is black, this will make the button appear to be dimmed.

2. Click on the Page2 icon in the Pages/States panel. Repeat the previous step for Page2 by dimming only the button that matches logo 2. Click on the Page3 icon in the Pages/States panel and repeat this step.

Click File – Run Project to test our new effect. As you click on the buttons, the corresponding logo should be visible and that button should be dimmed.

The last thing that we will add to our navigation is a Fade Transition between pages, using the Timeline. Go back to Page1 by clicking the Page1 icon. Take a look at the layers in the Timeline and you will see we have a layer for each possible transition between all three pages.

Page1> Page2
Page1> Page3
Page2> Page1
Page3> Page1

3. Click on the Page1> Page2 layer. You will see that Catalyst has given us the transition options for logos 1 and 2 (dimmed out) and buttons 1 and 2. Because we will be moving away from logo 1, we have a Fade Out option. But we will be moving to logo 2. We have a Fade In option for this logo.

We will only add the Fade Out effect to logo 1 and the Fade In effect to logo 2. We do not need the Fade effect applied to our buttons. However, you may wish to use this effect in another project.

Click on the Smooth Transition button at the bottom of the Timeline. You will see that the Fade Out/In controls have been extended to one half second on all layers. Still on the Page1> Page2 layer, we need to turn off the effect for the two buttons. Push the slider control to the left for each button.

Click on the Page1> Page3 layer. Repeat the previous step for the two buttons and logos. Repeat again for the Page2> Page1 layer and the Page3> Page1 layer.

That takes care of all the transitions for the Page1 state. But we have three states in our portfolio. We need to do this again for the other two states. Click on the Page2 icon in the Pages/States panel.

Take a look at the layers in the Timeline. You will notice that the settings that we just set for the Page1 state are carried over to the Page2 state for the transitions between Page1> Page2 and Page2> Page3. We just need to add the transition between Page2> Page3 and Page3> Page2.

4. Repeat the previous steps to apply the transitions to the logos for the Page2 state. You must do this for each layer in the Timeline.

5. Click on the Page3 icon in the Pages/States panel. You will notice that the transition settings have carried over from the other two states. If we had more pages, we would need to work on the layers for this state. But since this is the last of the three states, we are all set.

Test your project again. If all is working, we are ready to save our file as LogoPortfolio.fxp.

6. We need to tell Catalyst to generate the files that will display our Flash portfolio. Click File – Publish to SWF. Browse to the correct location on your hard drive and save your project. You will see that Catalyst gives you two folders. In the deploy-to-web folder, we have the files needed to run the portfolio on a web server. In the run-local, we have the files for running the portfolio on our desktop.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.