logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Add Static Text To Craft Product Trailer Template

Drop Zones and Transitions in Motion 5

Craft Product Template - Background Layer

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor