9.8.自定义组件样式属性

<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle" creationComplete="creationHandler();">
<mx:Metadata>
[Style(name="teeterAngle", type="Number")]
[Style(name="activeColor", type="uint", format="Color")]
[Style(name="idleColor", type="uint", format="Color")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
[Embed("assets/fonts/verdana.TTF", fontName="MyFont")]
public var verdana_font:Class;
private function creationHandler():void { playAnim(); }
private function effectStartHandler():void {
holder.setStyle( "backgroundColor",getStyle( "activeColor") );
holder.enabled = false;
field.text = "Wheeeee!";
}
private function effectEndHandler():void {
holder.setStyle( "backgroundColor",getStyle( "idleColor") );
holder.enabled = true;
field.text = "Again! Click Me";
}
private function playAnim():void { rotater.play( [this], true);
}

]]>
</mx:Script>
<mx:Rotate id="rotater"
effectStart="effectStartHandler();"
effectEnd="effectEndHandler();"
originX="{width}" originY="{height}"
angleFrom="0" angleTo="{getStyle('teeterAngle')}"
easingFunction="{Bounce.easeIn}" duration="500"/>
<mx:VBox id="holder" width="60%" height="60%" horizontalAlign="center" verticalAlign="middle" click="playAnim();">
<mx:Text id="field" width="100%" selectable="false" fontFamily="MyFont"/>
</mx:VBox>
</mx:Box>