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.
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.
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.
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.
