0 Replies Latest reply on Aug 30, 2012 2:12 AM by LauriNaalisvaara

    BorderContainer and percentWidth

    LauriNaalisvaara

      Hi

       

      Im trying to create a simple image carousel. Here is the source code:

       

      <?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" minWidth="955" minHeight="600" xmlns:local="*" creationComplete="application1_creationCompleteHandler(event)">

         

          <fx:Script>

              <![CDATA[

                  import mx.events.FlexEvent;

                 

                  import spark.core.SpriteVisualElement;

                 

                  private var timer : Timer;

                  private var i : int = 0;

                  protected function application1_creationCompleteHandler(event:FlexEvent):void

                  {           

                      timer = new Timer(200,30);

                      timer.addEventListener(TimerEvent.TIMER,timerHandler);

                      timer.start();

                  }

                 

                 

                  private function timerHandler(e : TimerEvent) : void {

                      var img : SpriteVisualElement = new SpriteVisualElement();

                      img.graphics.beginFill(0x00FF00,1);

                      img.graphics.drawRect(0,0,100,30);

                      img.graphics.endFill();

                      img.x = i * 105;

                      i++;

                      slave1.addElement(img);

                      trace("master width : " + master.width.toString() + " slave1 width : " + slave1.width.toString() + " slave2 width : " + slave2.width.toString());

                  }

                 

              ]]>

          </fx:Script>

          <s:BorderContainer id="master" y="100" left="400" right="400" height="200">

              <s:Group id="slave1" />

              <s:BorderContainer id="slave2" y="100" height="100" width="75%" backgroundColor="0xFF0000"/>       

          </s:BorderContainer>

      </s:Application>

       

      Point of this is that slave2 is supposed to be masking slave1. Width of slave2 is supposed to be 75% of the master container ( the background im using) but as the width of slave1 grows when im loading the images so does the width of slave2. What i understand is that the percentWidth property is supposed to set the width as % of the parent containers width ( in this case 75% of master containers width). So how come the size of slave1 does affect to the size of slave2 even though the width of the master container stays the same?

       

      I want to use percentWidht because the size of the master container changes and i want slave2(the mask) to be resized with it.

       

      Cheers.