Getting Start with Flash Catalyst Part 3

Last tutorial, you have learn to prepare artwork and import to Flash Catalyst. In the following tutorial. You will learn how to setup a menu will fancy 3d effect and use it as a navigation menu.

If you havn’t read the previous tutorial. You can visit this series of tutorial.

Getting Start with Adobe Flash Catalyst Part 1 – Basic

C. Add rollover effect to the menu

First, we would like to add a fancy 3d transition effect when mouse over on the menu.

1. Select the menu item “button_home_up”, “button_home_over” and the hit area of home item from the stage.

1. Right click on the item. Select “Convert artwork to component>Button”.

1. Now the artwork is converted to a button component. You can see in the HUD. There are 4 states “up”, “down”, “over” and disabled.

1. Click the “up” button on the HUD. You will go into the edit different states of the button component.

1. We are going to set the transition from “up” to “over” state. Select “button_home_up”. From the layer panel or click on the stage.

1. In the timeline panel, select the state transition “up -> over”. Click the “Add Action” button at the lower side of the timeline panel. Add a “Rotate 3D” action.

1. From the properties panel. Set the value like the fig show below.

1. In the timeline panel, add a new “Fade” action. Make sure it is a fade out action.

1. Then, select the “button_home_over” object from the layer panel.
2. In the timeline, click “Add Action” and add a new “Rotate 3D” action.

1. Set the properties like the fig show below.

1. Click the “Add Action” and add a new “Fade” effect.

1. Set the properties like the fig show below. It will be a fade in effect.

1. You can test the movie now by pressing command+return or control+enter in windows. You can rollover the home button and it will show the 3d effect.

1. Now, we will do the transition from “over” to “up”. Select the States transtion “ over -> up”.

1. Select the “button_home_over”. Click “Add Action” and add a “Rotate 3D” action.

1. Set the properties like the fig show below.

1. Click “Add Action” and add a “Fade” action. Make sure it is a fade out action.

1. Select the “button_home_up”. Click “Add Action” and add a “Rotate 3D” action.

1. Set the properties like the fig show below.

1. Click “Add Action” and add a “Fade” action. Make sure it is a fade in action.

1. Now, you can test the movie. You can try rollover and roll out the item.

Repeat the steps for other menu items.Now you have a fancy navigation menu with 3d transition effect.

Short summary

In this tutorial. You have learn how to setup a menu will fancy 3d effect and use it as a navigation menu. Next tutorial, you will learn how to do transition between page and assign action to menu to control the page transition.