An Exercise in Trial & Error: working with layers and symbols in Flash Catalyst

On a recent round-trip voyage between Adobe Illustrator and Flash Catalyst I found myself frustrated, confused, and missing layers. I was new to Flash Catalyst, but my goal was pretty standard: to create interactive components using artwork created in Illustrator.

According to the tutorials I read on the subject, editing between these programs would be easy thanks to Catalyst’s ability to preserve the structure of the original file.  I created my artwork in Illustrator- a button which included four layers I would assign  states (up, down, over, and disabled). The only problem was that I couldn’t seem to find any of these states once I opened the file in Catalyst. There was a single file with a single layer and that was all.

A little bit about my Illustrator artwork:  I decided to use 9-slice scaling for the buttons I was creating. My basic understanding of 9-slice scaling is that gives the designer control over what parts of a design are scaled, how they are scaled (vertically, horizontally, or both), and inhibits scaling where desired (I want my rounded corners left alone, for example). I definitely needed it for my rounded rectangle button shapes, but not for the eyeball graphic I was creating for the same project. To enable this magic feature I would need to work with symbols. I converted my button shape into a symbol and selected the property “enable 9-slice scaling.” I created a sublayer for each state of the button and saved it as an Illustrator file.

I imported the file into Catalyst (keeping the visible and non-visible layers editable) and attempted to create a button component. In order to assign the various states of the button with specific properties, I had to access those sublayers created in Illustrator. My file appeared to have only one accessible element,  the top level which I had made a symbol.

After some fruitless searching through tutorials for how to preserve Illustrator symbol layers upon import into Catalyst, I decided to play with the original artwork in the hopes of stumbling upon an answer. I discovered that I could create a symbol for each button state, and group them together within a non-symbol layer (a button name layer). Creating a sublayer for each state, I copied and pasted the common components (basic outline, center graphic), edited each as I wanted, and then converted them to symbols.  Creating separate symbols allowed me to continue to make changes to each one without affecting the others. I could have also repeated the same symbol within each layer, breaking the link so that I could edit them individually. As symbols within a non-symbol group, I could have my 9-slice scaling, and import all my illustrator layers within a single file too.

Back in Catalyst  all my layers were where they should be. I selected “Button” from the “Change Artwork to Component” menu, clicked on each state at the top of the workspace, making my file layers visible or not to change their appearance, and exported the project.

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.