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


Flash Catalyst and Artwork

One great feature of FlashR CatalystTM CS5 is that you can turn any static artwork into an interactive component such as a button, text input box or slider. Another great feature of Flash Catalyst is that it not only writes the code to program the interactive components but its menu-driven interface makes creating these components an almost full-proof process.

Let's walk through the process of converting two small graphics into a slider component. We have already created these two graphics in PhotoshopR. The first thing that we need to do is import our artwork into Catalyst. When we do, you will notice that the elements in the artwork maintain their layer positions. Catalyst also maintains any filters, effects and editable text.

The control center for working with artwork in Catalyst is the HUD (Head-up Display). This box will change as needed as you work indicating what your next step should be and giving you the menus you need for that step. Let's use the HUD to convert our arrow line and cat into a horizontal slider component.

Once we select both the arrow line and cat, the HUD changes to tell us that we have 2 items selected and gives us a menu list of possible components. Once we choose the Horizontal Slider component from the Convert Artwork to Component Choose Component menu, the cat and arrow line in the Layers panel have been combined and renamed 'Horizontal Slider" and the HUD changes to tell us that the next step is to define the parts of the slider.

A slider has two parts which are the Thumb (the object that slides along the horizontal line) and the Track. We need to tell Catalyst that we want our cat to be the Thumb and the arrow line to be the Track. When we click the Edit Parts button in the HUD, the workspace changes to "editing mode" for the Horizontal Slider. Just as in Flash, you can see where you are by watching the "breadcrumbs" at the upper left. You will also notice that the Layers panel now shows the cat and arrow line as two elements inside the HorizontalSlider.

Next, the HUD tells us that we need to select one of the elements and convert it to one of the Horizontal Slider's parts. Let's select the cat and choose Thumb from the Choose Part menu. The Layers panel changes the name of our first element from cat to Thumb. We will repeat this for the arrow line to make it the Track. The only thing left to do is to test our new component.

*Adobe provided a review copy to me free of charge.

Join us in the Flash forum.

Add Flash+Catalyst+and+Artwork to Twitter Add Flash+Catalyst+and+Artwork to Facebook Add Flash+Catalyst+and+Artwork to MySpace Add Flash+Catalyst+and+Artwork to Digg Flash+Catalyst+and+Artwork Add Flash+Catalyst+and+Artwork to Yahoo My Web Add Flash+Catalyst+and+Artwork to Google Bookmarks Add Flash+Catalyst+and+Artwork to Stumbleupon Add Flash+Catalyst+and+Artwork 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