Create Multiple Skins(Flash CS4) for a Flex Button

Did a quick review of creating Flex Button Skins and incorporating these skins into Flex Builder 3. The following records my investigation for my own future reference.


I referenced the following resources:

Importing Skins into Flex Builder/Designing Flex 3 Skins and Styles
The first thing I tried was the exercise in the article Importing Skins into Flex Builder. The article had you create a special flash file by selecting the Template Categories tab option on the start page and selecting the Flex Skins category and then select a single component,Button.

Double click the Button symbol to edit it.

I did this exercise and it automagically generates timelines and states for a button in the flash file. At the end, after I incorporated all the graphics into the button timeline, the flash file was published as a SWC file.

This generated SWC can then be used by Flex. Following the instructions, the swc is imported into a project.

  1. The import request creates a style directory under the project src directory and places the swc file in the style directory. (src/style/NextButtonSkin.swc)
  2. The Flex Build Path property, Library Path tab has the NextButtonSkin.swc added to its list
  3. The import request also automagically generates the CSS file with the styling parameters for the swc(NextButtonSkin.css).

The CSS code(NextButtonSkin.css) automagically generated was :

Button
{
	disabledSkin: Embed(skinClass="Button_disabledSkin");
	downSkin: Embed(skinClass="Button_downSkin");
	overSkin: Embed(skinClass="Button_overSkin");
	upSkin: Embed(skinClass="Button_upSkin");
}

The skin was applied to all Flex buttons, so by just declaring the following mxml, the skin was applied:

<mx:Style source="NextButtonSkin.css"/>
<mx:Button />

It was a good first step because it generated everything that was needed by Flex to apply a skin to all buttons.

The result was not exactly what I wanted since I wanted to create a number of different types of buttons with different skins. The example I followed just generated a single skin for all buttons to use. The implementation assumed that you wanted to create a single skin set for each component in flex(button skin, combobox skin, list skin,…etc).

FlairSkin – png Bitmap Scale 9 approach
So I did more research and found this site FlairSkin – Stateless Skinning for Flex which did not give me a warm feeling inside about my previous process(Importing Skins into Flex Builder). This template process can cause intensive CPU processing because of the incorporation of the mx.flash.UIMovieClip class and its onEnterFrame method calls. This problem became apparent only if you had a boatload of buttons in your application at the same time.

Using the FlairSkin Air program, the following was generated:

  1. From Flash – generated png files of each button graphic
  2. Used FlairSkin to create a scale 9 graphic
  3. Copied these graphics into the Flex Project asset directory
  4. Added a reference to these assets in the CSS file using a styleName(see below)
  5. Added a styleName attribute to the button in order to associate images from CSS file(see below)

Added the following to the CSS code(NextButtonSkin.css) :

Button.rightScaleNine {
	up-skin: Embed(source='/../assets/RightArrowLargeButton_up.png', scaleGridLeft='0', scaleGridRight='31', scaleGridTop='0', scaleGridBottom='31');
	over-skin: Embed(source='/../assets/RightArrowLargeButton_over.png', scaleGridLeft='0', scaleGridRight='31', scaleGridTop='0', scaleGridBottom='31');
	down-skin: Embed(source='/../assets/RightArrowLargeButton_down.png', scaleGridLeft='0', scaleGridRight='31', scaleGridTop='0', scaleGridBottom='31');
	disabled-skin: Embed(source='/../assets/RightArrowLargeButton_down.png', scaleGridLeft='0', scaleGridRight='27', scaleGridTop='0', scaleGridBottom='27');
}
Button
{
	disabledSkin: Embed(skinClass="Button_disabledSkin");
	downSkin: Embed(skinClass="Button_downSkin");
	overSkin: Embed(skinClass="Button_overSkin");
	upSkin: Embed(skinClass="Button_upSkin");
}
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
     <mx:Style source="NextButtonSkin.css"/>
     <mx:Button />
     <mx:Button styleName="rightScaleNine"/>
</mx:Application>

The bad news:
This static bitmap implementation using png files was rather tedious and prone to pixelation problems as a result of human error(mine – when I was setting the scaleGrid attributes for the png files). The flex application I am creating can dynamically resize(800×600, 1024×768, 1280×1024) and the buttons need to easily resize. I might have been doing something wrong but I decided since the original images were vectors(illustrator files) and they scaled nicely I was going to return to flash.

The good news:
Learned that by using the styleName attribute I could reference various skins to create many unique buttons within a single program. In essence, creating multiple styles for a single component.

Back to Applying Skins from a Flash file(Use SWF instead of a SWC)
I found this entry in the Flex 3 cookbook Apply Skins from a SWF File. It discusses creating static assets and changing the default MovieClip base class with the flash.display.Sprite class.

My understanding, from reading Adobe pdf- Importing Flash CS3 Assets into Flex – Importing static assets section, is that this method just includes simple artwork or skins that do not contain any AS 3 code. Whereas the the first method that generates the SWC incorporates UIMovieClip class definition and becomes a Flex component(This is the issue to which the FlairSkins article refers – dynamic SWF assets).

This implementation allows us to use many different static graphical images(skins) in the Flash CS4 fla and provide a variety of skins/graphics to create a variety of buttons(left arrow skins, right arrow skins, sound skins). So I followed the directions as far as they went in this excerpt. I did not use the 9-slice option.

I grabbed all the illustrator button graphics and our Logo that I was using in my Flash 8 player and:

  1. Imported the illustrator graphics into flash cs4 page
  2. Converted them to a movie clip, selected export first frame and changed the class from flash.display.MovieClip to flash.display.Sprite
  3. Note: The library graphic for a sprite is green instead of the movie clip purpleish blue
  4. Published the swf and copied the swf into the Flex Project assets directory
  5. Added styleName references to the static graphics in the CSS file(see below)
  6. Added appropriate styleName attribute to each button in the mxml file(see below)

Added the following to the CSS code(NextButtonSkin.css) :

Button.rightArrow
{
	disabledSkin: Embed(skinClass="Button_disabledSkin");
	downSkin: Embed(skinClass="Button_downSkin");
	overSkin: Embed(skinClass="Button_overSkin");
	upSkin: Embed(skinClass="Button_upSkin");
}
Button.leftArrow
{
	upSkin: Embed(source="/../assets/ButtonBar.swf", symbol="LeftArrow_up");
	overSkin: Embed(source="/../assets/ButtonBar.swf", symbol="LeftArrow_over");
	downSkin: Embed(source="/../assets/ButtonBar.swf", symbol="LeftArrow_down");
	disabledSkin: Embed(source="/../assets/ButtonBar.swf", symbol="LeftArrow_disabled");
}

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
     <mx:Style source="NextButtonSkin.css"/>
     <mx:Button styleName="rightArrow"  toolTip="Next Page" width="62" height="62" />
     <mx:Button styleName="leftArrow"  toolTip="Previous Update Page" width="62" height="62"/>
</mx:Application>
Advertisements

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

%d bloggers like this: