g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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.

Join us in the Flash forum.

Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to Twitter Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to Facebook Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to MySpace Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to Digg Turning+Graphics+into+Buttons+in+Flash+Catalyst Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to Yahoo My Web Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to Google Bookmarks Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to Stumbleupon Add Turning+Graphics+into+Buttons+in+Flash+Catalyst to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor