Flash for Flex Developers I – Importing artwork from Flash CS3 into Flex

CSS support in Flex is something that lets you tidy up your vanilla UI in a very easy manner…. In Flex2, you could do this with the Flex Style Explorer. When Flex3 happened, we decided to add this into FlexBuilder using the new CSS Design View feature. This lets you do a whole lot of stuff, but what if you want a button that looks like this:

With Flash CS3 we have a method of exporting any artwork, which can then be used in your Flex application. Here are the steps to achieve this

Click to see a bigger view of any of the pics:

  • Step 1: Create all the artwork in Flash CS3 as below.
  • Step 2: Convert each of the artwork to symbols (F8 shortcut) and while doing so, check the Export to ActionScript check box.
  • Step 3: Publish the artwork (File > Publish). But before doing so, make sure that in Publish Settings, Export SWC is checked.
  • Step 4: Copy the artwork in a folder inside your Flex Project & then import it (File > Import). Provide the path to the SWC and the CSS file that you want to create.

  • Step 5: Check all symbols that you want to import into the CSS & the component and the styleName it corresponds to. Click Finish to create the CSS file.
The CSS File
displayed

Now go ahead add the CSS to your Flex app using the <mx:Style tag

<mx:Style source=”styles/assets.css”/>

Here is an example application. In the application the first button & Canvas is un-styled and the second one feeds in from the artwork create in Flash.

Here is the link to the app & its source…

Application | Source


Advertisements

2 Responses to Flash for Flex Developers I – Importing artwork from Flash CS3 into Flex

  1. Peter Witham says:

    Great tutorial, for those that are not aware there are also export scripts/plug-ins for Photoshop that make everything just as easy. Great job on making skinning in Flex 3 a dream to work with.

    Regards,
    Peter Witham

  2. Siva Shanker says:

    Hi Raghu,
    I am importing an artwork into flex from flash cs3. I am able to use it for buttons by using
    upSkin: Embed(skinClass=”OkBut”);

    Same I need to use it for any movieclip or a sprite created in ActionScript class . While doing so it throws a error saying the symbol class cannot be able to convert to IUIComponent.

    How to use the flash symbol inside a ActionScript class?

    Thanks in Advance

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s