You are Here:Home>>Old Posts>>Getting Start with Flash Catalyst Part 4 (end) – Assign Interaction

Getting Start with Flash Catalyst Part 4 (end) – Assign Interaction

Carlos Pinho
By | 2009-06-30T08:31:13+00:00 Jun 30, 2009|Old Posts|

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.

Getting Start with Flash Catalyst Part 1 – Basic

Getting Start with Flash Catalyst Part 2 – Import artwork

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

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.

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).

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

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

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.

Set the properties to the fig below.

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.

Set the properties to the fig below.

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.

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

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

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

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.

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”.

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.

About the Author:

Carlos Pinho
A father, a husband and a geek... Carlos was the founder of projects like The Tech Labs and Flash Enabled Blog. He is the founder of TekTuts He is passionate about technologies. Their main skills are in analytics, transport & logistics, business administration. He also writes about programming resources, trends, strategy and web development.

7 Comments

  1. jérôme June 30, 2009 at 11:25 am - Reply

    Great tut, is it possible to see the result of this work ?

  2. Lyndsay July 7, 2009 at 4:27 pm - Reply

    Yeah, perhaps you could do an examples page?

  3. leef July 16, 2009 at 12:38 am - Reply

    This all looks so much more complicated than doing it all in AS3 inside of Flash or Flex. I thought Flash Catalyst is supposed to make things easier?

  4. Carlos Pinho
    WaiLam July 16, 2009 at 3:43 am - Reply

    >> Leef

    I think if you are not familiarize with AS3 coding. It is more easy to do in Flash Catalyst. Since you don’t need to do any coding. It is really easy for prototype a page. Also, it will not effect the flow of the website if you change any graphics.

    It really a potential product. Since, many of my friends said the AS3 coding really get out of them to using Flash for building website.

  5. טכנאי מחשבים August 4, 2009 at 3:21 am - Reply

    thank you for the tips!

  6. טכנאי מחשבים August 15, 2009 at 10:50 pm - Reply

    I think that examples will be this much more clear. Thanks.

  7. טכנאי מחשבים September 3, 2009 at 11:29 pm - Reply

    Good content, I will be back to read more!

Leave a Reply