actionscript 3 - How can I stop a skin animation? -

i have custom component skin attached it.
there several different skins component, , animated differently. therefor i've contained animations skinclasses.
when component no longer in view, need able stop animations don't run in background.

how can call stop function on skin?

my guess add 2 skin states: "animationstate" , "idlestate".
following code not stop animation when close() called. skinstate not change.

package {     import spark.components.supportclasses.skinnablecomponent;      [skinstate("animationstate")]        [skinstate("idlestate")]      public class animatedcomponent extends skinnablecomponent     {         public function animatedcomponent         {             setstyle("skinclass", myanimatedcomponentskin);         }          public function start():void         {             _isanimating = true;             invalidateskinstate();         }         public function close():void         {             _isanimating = false;             invalidateskinstate();         }          private var _isanimating:boolean = false;         override protected function getcurrentskinstate():string         {             return _isanimating ? "animationstate" : "idlestate";         }     } } 

here's example of way did (this doesn't answer question @ all, worked needed. helps else struggling similar problem).

i have application custom skinnable title , "stop" button.
i've created base class called mycustomtitle extends spark.components.supportclasses.skinnablecomponent, , used stylesheet "main.css" apply skinclass it.

also, when app loaded browser, web-script passes "theme" parameter application (this.parameters.theme). allows user choose theme, determine skins/animations.

<?xml version="1.0" encoding="utf-8"?> <s:application xmlns:fx="http://ns.adobe.com/mxml/2009"                 xmlns:s="library://ns.adobe.com/flex/spark"                applicationcomplete="application1_applicationcompletehandler(event)">      <fx:style source="main.css" />      <fx:script>         <![cdata[             import mx.events.flexevent;              /**              * custom component displays animated label              */             public var mycomponent:mycustomtitle;              protected function application1_applicationcompletehandler(event:flexevent):void             {                 var theme:string = this.parameters.theme;                                    switch(theme) {                     case "red":                         mycomponent = new myscalingtitle();                                              break;                     default:                         mycomponent = new myfadingtitle();                                               break;                 }                 mycomponent.stylename = theme;                 mycomponent.text = "hello world";                 addelementat(mycomponent, 0);                 mycomponent.init();             }              private function stop_clickhandler(event:mouseevent):void             {                 mycomponent.stop();             }          ]]>     </fx:script>      <s:layout>         <s:verticallayout />     </s:layout>      <s:button label="stop" click="stop_clickhandler(event)"/> </s:application> 

here css file defines skin:

/* css file */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace local "*";   local|mycustomtitle {     skinclass: classreference("mycustomtitleblueskin"); }  local|mycustomtitle.red {     skinclass: classreference("mycustomtitleredskin"); } 

here "red" skin:

<?xml version="1.0" encoding="utf-8"?> <s:skin xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark">     <!-- host component -->     <fx:metadata>         [hostcomponent("mycustomtitle")]     </fx:metadata>      <!-- skinparts     name=labeldisplay, type=spark.components.label, required=true     -->     <s:label id="labeldisplay" color="0xff0000" /> </s:skin> 

and "blue" one:

<?xml version="1.0" encoding="utf-8"?> <s:skin xmlns:fx="http://ns.adobe.com/mxml/2009"          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/mx">     <!-- host component -->     <fx:metadata>         [hostcomponent("mycustomtitle")]     </fx:metadata>      <!-- skinparts     name=labeldisplay, type=spark.components.label, required=true     -->     <s:label id="labeldisplay" color="0x0000ff" /> </s:skin> 

i have put animations in skin classes above. work fine non-repeating animation. because these animations loop, need able call stop() function on them when not being displayed. since cannot call functions in skin, instead adding animation hostcomponent class.

mycustomtitle has required labeldisplay property skins.
animation defined here, because of animation properties shared between different themes. however, of right now, animation null.
class has init() method start animation, , stop() method.

package {        import spark.components.label;     import spark.components.supportclasses.skinnablecomponent;     import spark.core.idisplaytext;     import spark.effects.animate;     import spark.effects.animation.repeatbehavior;      public class mycustomtitle extends skinnablecomponent implements idisplaytext     {         //custom component has label , skin          [skinpart(required="true")]         /**          * button required in skin          */         public var labeldisplay:label;          //set common parameters animation share         protected var animate:animate;               override protected function createchildren():void         {             super.createchildren();             labeldisplay.text = _label;             animate = createanimation();             if(animate != null) {                 animate.repeatcount = 0;                 animate.repeatbehavior = repeatbehavior.reverse;                 animate.duration = 500;             }         }          //build animation here         protected function createanimation():animate         {             //override create dynamic animation             return null;         }          //play animation         public function init():void         {             if(animate != null)                 animate.play([labeldisplay]);         }          //stop animation         public function stop():void         {             if(animate != null)                 animate.stop();         }          //components implements idisplaytext         public function set text(value:string):void         {             _label = value;             if(labeldisplay)                 labeldisplay.text = value;         }          public function text():string         {             return _label;         }         private var _label:string;          public function istruncated():boolean         {             return labeldisplay.istruncated;         }     } } 

finally, can extend mycustomtitle can have different animation each theme.

theme "red":

package {     import spark.effects.animate;     import spark.effects.scale;      public class myscalingtitle extends mycustomtitle     {                override protected function createanimation():animate         {             var _scale:scale = new scale(labeldisplay);             _scale.scalexfrom = 0;             _scale.scaleyfrom = 0;             _scale.scalexto = 1;             _scale.scaleyto = 1;             return _scale;         }     } } 

theme "blue":

package {     import spark.effects.animate;     import spark.effects.fade;      public class myfadingtitle extends mycustomtitle     {                override protected function createanimation():animate         {             var _fade:fade = new fade(labeldisplay);             _fade.alphafrom = 0;             _fade.alphato = 1;             return _fade;         }     } }