0 Replies Latest reply on Jul 17, 2012 11:21 AM by Yateam

    Fade out effect from PanelSkin

    Yateam

      Hi,

       

      Have a question. So I want to add some effects to Panel. When panel is added fade-in should be performed and when it is removed - fade-out. It perfectly works if I put those effects in the same place where adding/removing code is called. And it is actually shown here: http://forums.adobe.com/message/3764214

       

      But my problem is that I want to have those effect instances in PanelSkin and in that case fade-out does not work. How can it be solved?

       

      Here is the code of the applicaiton where Panel is added:

       

      <?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" 
                                       xmlns:mx="library://ns.adobe.com/flex/mx" >
                <fx:Script>
                          <![CDATA[
                                    import mx.events.FlexEvent;
        
                                    import spark.components.Panel;
        
                                    private var panel:Panel;
        
                                    protected function addPanel():void
                                    {
                                              panel = new Panel();
                                              panel.width = 300;
                                              panel.height = 200;
                                              panel.setStyle('skinClass', PanelSkin);
                                              addElement(panel);
                                    }
        
                                    protected function removePanel():void
                                    {
                                              removeElement(panel);
                                              panel = null;
                                    }
        
                          ]]>
                </fx:Script>
        
                <s:layout>
                          <s:HorizontalLayout horizontalAlign="center" paddingLeft="50" paddingTop="50"/>
                </s:layout>
        
                <s:controlBarContent>
                          <s:Button label="add panel" click="addPanel()" />
                          <s:Button label="remove panel" click="removePanel()" />
                </s:controlBarContent>
        
      </s:Application>
      

       

       

      And here is the code of custom PanelSkin (only differences from original PanelSkin) :

       

      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false" 
          minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5"
                addedEffect="{fadeIn}"
                removedEffect="{fadeOut}">
        
                <fx:Declarations>
                          <s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1500"/>
                          <s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="1500" />
                </fx:Declarations>
      ...
      
      </s:SparkSkin>
      
      

       

       

      I also tried to call fadeOut.play() from removedFromStage handler but it does not work as well.