Did you know…
You can dynamically change a display elements style and attributes by utilizing custom style tags in conjunction with the setStyle/GetStyle methods of the component to which the style is applied to? Let’s walk through a simple example to illustrate.
A simple gradient border skin as illustrated below.
package com.thekeunster.skins
{
import flash.display.Graphics;
import flash.geom.Matrix;
import mx.core.EdgeMetrics;
import mx.skins.halo.HaloBorder;
[Style(name="fillColors", type="Array", inherit="no")]
public class SimpleGradientSkin extends HaloBorder
{
private var fillColors:Array;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
fillColors = getStyle("fillColors") as Array;
if (!fillColors) fillColors = [0xFFFFFF, 0xFFFFFF];
var g:Graphics = graphics;
var b:EdgeMetrics = borderMetrics;
var w:Number = unscaledWidth - b.left - b.right;
var h:Number = unscaledHeight - b.top - b.bottom;
var m:Matrix = verticalGradientMatrix(0, 0, w, h);
g.clear();
g.beginGradientFill("linear", fillColors, [1, 1], [0, 255], m);
g.drawRect(0,0,w,h);
g.endFill();
}
}
}
Then applying that border skin to a canvas, as illustrated below. W/in the “switchGradient” method, you’ll notice that we’re switching out the gradient’s fillColors dynamically via “setStyle”. In the borderSkin, we reference the fill colors via “getStyle”.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style>
.simpleBorderSkin
{
fillColors : #ff0000, #0000ff;
borderSkin : ClassReference('com.thekeunster.skins.SimpleGradientSkin');
}
</mx:Style>
<mx:Script>
<![CDATA[
private function switchGradient( event : Event ) : void
{
// dynamically switch the border skins gradient fillColor with random color values
content.setStyle( "fillColors", [ Math.random() * 0xff0000, Math.random() * 0x00ff00 ] );
}
]]>
</mx:Script>
<mx:Button label="Switch Gradient" click="{ switchGradient( event ) }" />
<mx:Canvas styleName="simpleBorderSkin" id="content" left="30" right="30" bottom="30" top="30" />
</mx:Application>
This entry was posted
on Thursday, December 25th, 2008 at 4:10 am and is filed under Flex, QueueTip.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Thank you for this information. It’s helping amazingly in different fillColors for accordion headers. Struggled for hours on this, but it looks like this tutorial is helping me see the finish line.