2 Replies Latest reply on Dec 27, 2007 6:35 AM by m_hartnett

    how do I resize children objects along with the parent?

    wendallsan
      Hi all,

      I have a canvas item in Flex that contains some other items, including a box object and a few labels. I have the canvas set up to shrink and grow on mouse roll over and out, and I'd like the items contained within the canvas to shrink and grow along with the canvas. Currently the children of the canvas stay the same size and recenter themselves automatically based on the changing size of the canvas. I'm using a Resize effect to handle the change, and applying it to the canvas' rollOverEffect and rollOutEffect. Any idea how I can get this to affect the children obejects so that everything resizes instead of just the canvas and not it's children?

      Any help is greatly appreciated!

      Here is some code if you want to look:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" horizontalAlign="left" verticalAlign="top">
      <mx:Script>
      <![CDATA[

      var SIZE_MODIFIER:Number = 1.25
      var N_WIDTH:Number = 120;
      var N_HEIGHT:Number = 150;
      var M_HEIGHT:Number = N_HEIGHT*SIZE_MODIFIER;
      var M_WIDTH:Number = N_WIDTH*SIZE_MODIFIER;

      public function menuItemClick(e:MouseEvent):void{

      trace("item clicked!");
      }

      ]]>
      </mx:Script>

      <mx:Resize id="tsunamiItemGrow" heightFrom="{N_HEIGHT}" heightTo="{M_HEIGHT}" widthFrom="{N_WIDTH}" widthTo="{M_WIDTH}" duration="250" />
      <mx:Resize id="tsunamiItemShrink" heightFrom="{M_HEIGHT}" heightTo="{N_HEIGHT}" widthFrom="{M_WIDTH}" widthTo="{N_WIDTH}" duration="250" />

      <mx:Canvas id="tsunamiMenuItem" horizontalCenter="0" verticalCenter="0" top="100" left="0" right="0">

      <mx:Box id="menuItemBG"
      rollOverEffect="{tsunamiItemGrow}"
      rollOutEffect="{tsunamiItemShrink}"
      backgroundColor="0XFFCCCC"
      width="120" height="150"
      horizontalCenter="0"
      cornerRadius="5"
      click="currentState='watchVideo'"
      >
      <mx:VBox width="100%" horizontalAlign="center">
      <mx:Label id="title" text="Video Title" horizontalCenter="0"/>
      <mx:Box backgroundColor="0x000000" width="40" height="30" />
      <mx:Label id="time" text="Time" />
      <mx:Label id="author" text="Author" />
      </mx:VBox>
      </mx:Box>
      </mx:Canvas>
      </mx:Application>
        • 1. Re: how do I resize children objects along with the parent?
          Tariq Ahmed [ACP] Level 1
          Well the easiest way is to peg the relative size of those children of the box as it changes.

          Something along the lines of:
          <mx:Label id="time" text="Time" fontSize="{menuItemBG.height * 0.08}" />
          • 2. Re: how do I resize children objects along with the parent?
            m_hartnett Level 3
            Here is some modified code that uses the scaleX and scaleY values to resize the objects in the box. Not entirely smooth but it will work.

            You could also run a resize effect on any object that is not font related.

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
            layout="absolute"
            horizontalAlign="left"
            verticalAlign="top"
            creationComplete="createCompleteHandler()">
            <mx:Script>
            <![CDATA[
            import mx.events.TweenEvent;
            import mx.events.EffectEvent;

            [Bindable]
            private var SIZE_MODIFIER:Number = 1.25;
            [Bindable]
            private var N_WIDTH:Number = 120;
            [Bindable]
            private var N_HEIGHT:Number = 150;
            [Bindable]
            private var M_HEIGHT:Number = N_HEIGHT*SIZE_MODIFIER;
            [Bindable]
            private var M_WIDTH:Number = N_WIDTH*SIZE_MODIFIER;

            [Bindable]
            private var sX : Number = 1.0;
            [Bindable]
            private var sY : Number = 1.0;

            private var ctr : int = 0;
            public function createCompleteHandler():void{
            //tsunamiItemGrow.addEventListener(EffectEvent.EFFECT_END,growEnd);
            //tsunamiItemShrink.addEventListener(EffectEvent.EFFECT_START,shrinkStart);

            tsunamiItemGrow.addEventListener(TweenEvent.TWEEN_UPDATE,growTweenUpdate);
            tsunamiItemShrink.addEventListener(TweenEvent.TWEEN_UPDATE,shrinkTweenUpdate);

            }

            public function growTweenUpdate(e:TweenEvent):void{
            var obj : Object = e.target.target;
            sX = obj.width /N_WIDTH;
            sY = obj.height / N_HEIGHT;
            logText.text = logText.text + "width: " + sX + " --" + "height: " + sY + " --";

            }

            public function shrinkTweenUpdate(e: TweenEvent):void{
            var obj : Object = e.target.target;
            sX = obj.width /N_WIDTH;
            sY = obj.height / N_HEIGHT;
            }


            ]]>
            </mx:Script>

            <mx:Resize id="tsunamiItemGrow" heightFrom="{N_HEIGHT}" heightTo="{M_HEIGHT}" widthFrom="{N_WIDTH}" widthTo="{M_WIDTH}" duration="250" />
            <mx:Resize id="tsunamiItemShrink" heightFrom="{M_HEIGHT}" heightTo="{N_HEIGHT}" widthFrom="{M_WIDTH}" widthTo="{N_WIDTH}" duration="250" />

            <mx:Canvas id="tsunamiMenuItem" horizontalCenter="0" verticalCenter="0" top="100" left="0" right="0">

            <mx:Box id="menuItemBG"
            rollOverEffect="{tsunamiItemGrow}"
            rollOutEffect="{tsunamiItemShrink}"
            backgroundColor="0XFFCCCC"
            width="120"
            height="150"
            horizontalCenter="0"
            cornerRadius="5"
            click="currentState='watchVideo'">

            <mx:VBox width="100%" horizontalAlign="center" scaleX="{sX}" scaleY="{sY}">
            <mx:Label id="title" text="Video Title" width="100%" horizontalCenter="0" scaleX="{sX}" scaleY="{sY}" textAlign="center"/>
            <mx:Box backgroundColor="0x000000" width="40" height="30" scaleX="{sX}" scaleY="{sY}"/>
            <mx:Label id="time" text="Time" width="100%" scaleX="{sX}" scaleY="{sY}" textAlign="center"/>
            <mx:Label id="author" width="100%" text="Author" scaleX="{sX}" scaleY="{sY}" textAlign="center"/>
            </mx:VBox>
            </mx:Box>
            </mx:Canvas>
            <mx:Text id="logText" x="0" y="4" text="Text" width="638" height="37"/>
            </mx:Application>