Turning Graphics into Buttons in Flash Catalyst
Now that we have imported our PhotoshopLayout.psd portfolio project file into AdobeR FlashR CatalystTM and have explored the Catalyst workspace, we are ready to work on the navigation for our portfolio.
Right now, we have only one page, or state, to our project. We need to create two more pages so that we can display a different logo on each page.
1. In the Pages/States panel, we will click on the Duplicate States button twice. This will give us Page2 and Page3. But, they are all alike. Let's take care of that.
2. Click on the Page1 icon and go to the Layers panel. Open the Logos folder. We only want logo 1 to be visible on this page. Turn off the visibility for logo 2 and 3.
3. Click on the Page2 icon and turn off the visibility for logo 1 and 3. Turn on the visibility for logo 2.
4. Click on the Page3 icon and turn off the visibility for logo 1 and 2. Turn on the visibility for logo 3.
Next, we will create the buttons for our portfolio. We have a thumbnail for each logo. These will be the buttons.
5. Go back to Page1 by clicking on the icon in the Pages/States panel. In the Layers panel, open the Thumbnails folder. On the Artboard, click on the thumbnail for logo 1. When you do this, you will see the HUD open and the Properties panel will change.
Let's work in the HUD first. This is where we will tell Catalyst that we want to make this bitmap image into a button.
6. Under Convert Artwork, click on Convert Artwork to Component and choose Button from the components list. The HUD will change to give us new controls for our button. Expand the Custom Interactions list and then click on the Plus icon. Choose On Click from the list. You will get another drop-down menu called Do Action. From this menu, choose Play Transition to State. From the Choose State drop-down menu, choose Page1 because we want this button to take the viewer to Page1.
7. Click on the thumbnail for logo 2 and repeat the previous step. Set Choose State to Page2.
8. Click on the thumbnail for logo 3 and repeat the previous step. Set Choose State to Page3.
Let's test our buttons. From the menubar, click File – Run Project. It will open in your web browser. As you click on each button, the correct logo should be visible.
In the next tutorial, we will dim the button for the visible logo and add a transition between pages.
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.
Right now, we have only one page, or state, to our project. We need to create two more pages so that we can display a different logo on each page.
1. In the Pages/States panel, we will click on the Duplicate States button twice. This will give us Page2 and Page3. But, they are all alike. Let's take care of that.
2. Click on the Page1 icon and go to the Layers panel. Open the Logos folder. We only want logo 1 to be visible on this page. Turn off the visibility for logo 2 and 3.
3. Click on the Page2 icon and turn off the visibility for logo 1 and 3. Turn on the visibility for logo 2.
4. Click on the Page3 icon and turn off the visibility for logo 1 and 2. Turn on the visibility for logo 3.
Next, we will create the buttons for our portfolio. We have a thumbnail for each logo. These will be the buttons.
5. Go back to Page1 by clicking on the icon in the Pages/States panel. In the Layers panel, open the Thumbnails folder. On the Artboard, click on the thumbnail for logo 1. When you do this, you will see the HUD open and the Properties panel will change.
Let's work in the HUD first. This is where we will tell Catalyst that we want to make this bitmap image into a button.
6. Under Convert Artwork, click on Convert Artwork to Component and choose Button from the components list. The HUD will change to give us new controls for our button. Expand the Custom Interactions list and then click on the Plus icon. Choose On Click from the list. You will get another drop-down menu called Do Action. From this menu, choose Play Transition to State. From the Choose State drop-down menu, choose Page1 because we want this button to take the viewer to Page1.
7. Click on the thumbnail for logo 2 and repeat the previous step. Set Choose State to Page2.
8. Click on the thumbnail for logo 3 and repeat the previous step. Set Choose State to Page3.
Let's test our buttons. From the menubar, click File – Run Project. It will open in your web browser. As you click on each button, the correct logo should be visible.
In the next tutorial, we will dim the button for the visible logo and add a transition between pages.
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.
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Follow @ArtAnimationTut
Tweet
Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.
