Getting Start with Flash Catalyst Part 4

In last tutorial, you have learn how to build a fancy navigation menu with 3d effect in Flash Catalyst. In the following tutorial, you will learn how to assign action to the menu and make transition effect to each page of your content.

If you din’t visit the previous tutorial. You can find the previous tutorial of this series here.

Adobe Flash Catalyst beta 1 – Part 1" rel="bookmark" href="http://flashenabledblog.com/2009/06/17/getting-start-with-adobe-flash-catalyst-1/">Getting Start with Flash Catalyst Part 1 – Basic

Getting Start with Flash Catalyst Part 2 – Import artwork

Getting Start with Flash Catalyst Part 3 – Menu with 3d effect

D. Add transition effect between pages

First, we would like to add a fancy 3d transition for transition between pages.

1. Since we have 4 different pages. We need to create 4 states first. From the

PAGES/STATES panel, click the duplicate button and create second state.

1. In this state, we are going to show the portfolio. From the layer panel, hide the “content_home” layer and visible the “content_portfolio” layer by click the visibility icon (the eye).

1. Repeat for the other 2 pages. Now we have 4 states with different page visible.

1. Now, we going to set the transition effect between pages. In the TIMELINES panel,select the transition state “page 1 -> page 2”.

1. Select the “content_home” object. Click “add action” button to add a “Rotate 3D” effect. We add a rotate effect to the portfolio content for hiding.

1. Set the properties to the fig below.

1. Select the “content_portfolio. Click “add action” button to add a “Rotate 3D” effect. We add a rotate effect to the portfolio content for showing.

1. Set the properties to the fig below.

1. Repeat the step to set transition for “page 1 -> page 3”, “page 1 -> page 4”. Also, the revsed trnsition “page 2 -> page 1”, “page 3 -> page 1”, “page 4 -> page 1”. Beside rotate 3d effect, you also add resize effect or move effect.

E. Assign action to the navigation menu button

Now we need to add action to the navigation button for trigger the page transition effect.

1. Select the home menu item (button_home). The HUD will pop up.

1. Click the “+” button in the “Custom interaction” to add a new “on Click” action for the button.

1. From the “Do Action” combo box, select “Play transition to state”.

1. Since this is the “home” button. We want the page transition to home page (page 1). From the “To Target” combo box, select page 1.

1. Since we want to the page transition to page 1 in any state when click on this button. We leave the combo box below to “When in Any state”.

1. Repeat the step for each navigation button. Now we have finished the setup. And you can test the movie. You now have a amazing 3d rotate transition effect for each page.

Summary

Hope you enjoy this series of tutorial for Flash Catalyst. You have learned basic concept of Flash Catalyst and doing transition effect by using it. Flash Catalyst is an amazing tool for designer for creating rich flash website without any programming. And it is just a beta version now. It should add more function in the future release. Hope I can have more tutorial for the future version.