Tiled Skin Effects in Flex | Taterboy.com: Graphics, Multimedia and Such

Tiled Skin Effects in Flex – taterboy
July 21st, 2009 | Filed under: ActionScript 3, Flash, Flex, Tutorials

One of the greatest advantages of creating skins in Flash opposed to Illustrator or Photoshop is the amount of control over how the skin looks and functions. In Flash you can export all your skins as Flex components in a swc file which allows you to use those components as both classes or artwork. The flexibility comes in handy when building custom working/looking components. Button skins can be applied using the skin property with all of the states included in 1 skin class instead of four different images or symbols. You can even add transitional animations in between states.

The WorkWatcher Header:
We developed WorkWatcher, a business management AIR application, in Flex with all the skins designed in Illustrator and Flash. One of the interesting skins is the header bar with the stripes also needed to be able to stretch. The stripes are added or removed as the header width changes without distortion, creating a true tiling effect.

For the header, we used 1(stripe) as a Flex component class and another as a background image with scale9grid turned applied. It took a couple tries to get things working purfectly, so the flexibility really helped and opened up possibilities that are not available to image files.

Note: Keeping your skins vector really has an advantage over bitmap skins, because of the way they work with the scale9grid. Scale9Grid works best in Flash with vector artwork, instead of bitmap. Even with scale9grid turned on in the MovieClip properties, the bitmap still stretches.

Flex Component Kit for Flash:
To get started using Flash to build Flex components you will need to download the Flex Component Kit for Flash and the Flex Skin Design Extensions. (login to Adobe labs required)
Once you have them installed, You will find a new menu item in the commands menu. Create all your skins or components as MovieClips, use the “Convert Symbol to Flex Component” menu command and publish.

You should also now have a Flex Skin Template that has all the major component skins. After publishing a new SWC file with be produced along with an swf(which we do not need). The SWC goes into the “libs” directory of your Flex project and the contained classes will be available for use in Flex. The hardest part is remembering the class names you made in Flash.

Using Flash Skins in Flex:
If you add a stop() action to a keyframe in Flash, you will be able to import the SWC similar to how you import any other class.

^?View Code ACTIONSCRIPT

import TiledHeaderSkins_fla.MainTimeline;

If you have xmlns:local=”*” set in your applications properties, then the skinClasses will show up in Flex’s Class code complete list to declare variable types or mxml components. To use a skinComponent as a skin, you can apply them directly to the skin property in the mxml component or as a style.

Use for mxml Button:

^?View Code MXML

<mx:Button id="myBtn" label="Press This" skin="{myBtnSkin}" />

Use as Style:

^?View Code CSS

backgroundImage: Embed(skinClass='HeaderBackground');

The Striped Header Sample:

^?View Code MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" creationComplete="init()">
	<mx:Style>
		.tiledBackground{
			backgroundImage: Embed(skinClass='HeaderBackground');
			backgroundSize: "100%";
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
 
			/* import TiledHeaderSkins_fla.MainTimeline; */
 
			//how far apart to place the stripes
			private var span:int = 18;
 
			//clear and add stripes on event resize
			private function resizeHandler(ev:Event):void{
				stripeHolder.removeAllChildren();
				makeStripes();
			}
 
			//add strips until stripes width is equal to header width
			private function makeStripes():void{
				var stripeX:int = 0;
				var barWidth:int = tiledBkg.width;
				while(stripeX < barWidth){
					var stripe:HeaderStripe = new HeaderStripe();
					stripe.x = stripeX;
 
					stripeHolder.addChild(stripe);
					stripeX += span;
				}
			}
 
			//set on resize event listener and add stripes
			private function init():void
			{
				addEventListener(Event.RESIZE,resizeHandler);
				makeStripes();
			}
 
		]]>
	</mx:Script>
	<mx:Canvas id="tiledBkg" width="100%" height="40" styleName="tiledBackground">
		<mx:Canvas id="stripeHolder" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" />
	</mx:Canvas>
</mx:Application>