1 Reply Latest reply on Mar 20, 2014 11:48 PM by TheRaisingSun

    How to set resize effect for border container using flex 4 or 4.5

    grace-glory

      Hi friends,

       

      resize effect works fine for one control (image). if want to same for custom comp, then is not working.

       

      below is the code is in custom comp,

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" width="200"
               xmlns:s="library://ns.adobe.com/flex/spark" horizontalAlign="left" verticalAlign="bottom" 
               xmlns:mx="library://ns.adobe.com/flex/mx"  xmlns:parsley="http://www.spicefactory.org/parsley" 
               xmlns:general="com.presentation.components.general.*">
          
          <fx:Declarations>
              <parsley:Configure/>
          </fx:Declarations>
          
          <s:BorderContainer id="bcMain" backgroundColor="#f4f4f4" borderColor="#CDC7C7" borderStyle="solid" borderVisible="true" width="100%">
              <s:layout>
                  <s:VerticalLayout horizontalAlign="left" verticalAlign="middle" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"/>
              </s:layout>
              
              <s:HGroup id="hg1" horizontalAlign="left" verticalAlign="middle" width="100%" gap="5"
                        buttonMode="true" useHandCursor="true" >
                  <s:Image id="img1" source="@Embed(source='assets/flex.png" width="15" height="17" cachePolicy="on" cacheAsBitmap="true"/>
                  <s:Label text="label 1" textAlign="center"/>
              </s:HGroup>
              <mx:HRule width="100%"/>
              
              <s:HGroup horizontalAlign="left" verticalAlign="middle" width="100%" gap="10">
                  <s:BorderContainer id="bc1" width="35" useHandCursor="true" buttonMode="true"
                            backgroundColor="#f4f4f4" height="40">
                      <s:layout>
                          <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
                      </s:layout>
                      <s:Image id="img2" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
                      <s:Label text="label 2" textAlign="center"/>
                  </s:BorderContainer>
                  <s:BorderContainer id="bc2" width="35" useHandCursor="true" buttonMode="true"
                            backgroundColor="#f4f4f4" height="40">
                      <s:layout>
                          <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
                      </s:layout>
                      <s:Image id="img3" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
                      <s:Label text="label 3" textAlign="center"/>
                  </s:BorderContainer>
                  <s:BorderContainer id="bc3" width="35" useHandCursor="true" buttonMode="true"
                            backgroundColor="#f4f4f4" height="40">
                      <s:layout>
                          <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
                      </s:layout>
                      <s:Image id="img4" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
                      <s:Label text="label 4" textAlign="center"/>
                  </s:BorderContainer>
              </s:HGroup>
          </s:BorderContainer>
      </s:VGroup>
      

       

      I followed how resize effects works for image control,

       

      <mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200"  duration="2000"/>

              <mx:Resize id="contract" target="{img}" widthTo="30" heightTo="60"  duration="2000"/>

       

      <s:Panel title="Resize Effect Example" width="100%" height="100%">

              <s:VGroup width="100%" height="200" horizontalAlign="left" verticalAlign="bottom">           

                  <mx:Image id="img" source="@Embed(source='assets/05_ipad.png')" width="10" height="10"/>

                  <mx:Button label="Expand" click="expand.end(); expand.play();"/>

                  <mx:Button label="Contract" click="contract.end(); contract.play();"/>

              </s:VGroup>

          </s:Panel>

       

      Please help me.