Printer Friendly Version

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.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

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

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

BellaOnline Editor