1 Reply Latest reply on Nov 10, 2009 2:19 AM by mewk

    Change object "origin point"?

    Handycam Level 1

      I have an object that I have set to enlarge on roll over:

      <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                            xmlns:s="library://ns.adobe.com/flex/spark" 
                            xmlns:mx="library://ns.adobe.com/flex/halo" rollOver="currentState='over'" rollOut="currentState='normal'" 
                            width.normal="40" height.normal="40" width.over="300" height.over="300">
      
           <s:states>
                <s:State name="normal"/>
                <s:State name="over" />
           </s:states>
           
           <s:Rect top="0" left="0" bottom="0" right="0">
                <s:fill>
                   <s:SolidColor color="#ccff00"/>
                </s:fill>
           </s:Rect>
           
      </s:SkinnableContainer>
      

      I would like to be able to configure the direction in which it grows; the default is to grow from the top left, which is fine, but I'd like to have set-able options...

        • 1. Re: Change object "origin point"?
          mewk Level 3

          The simplest solution is to define an offset (left,right,top,bottom) and resize off the constraint. This will give you the ability to control the "direction" from the corners.

           

          Alternatively you can have complete control over the central point of growth as the following code hopefully will demonstrate.

           

          Clicking anywhere on the image will trigger a growth effect centered around the mouse click - so try clicking the corners of the container or within a marble to see the effect. There are two containers that have near identical behavior. The first applies a scale effect and the second container applies a parallel resize and move effect. While the scale effect was easier to code, it has an impact on the container that might not be desirable -- for example here, we can see that the border is also scaling with the growth.

           

          Here's the code:

           

          ------------------------ main.mxml -------------------------------------

           

          <?xml version="1.0"?>
          <s:Application
            xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:mx="library://ns.adobe.com/flex/halo"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:comp="components.*"
            frameRate="60">
          
            <fx:Script>
              <![CDATA[
                protected function myContainer_clickHandler(event:MouseEvent):void {
                  myContainer.growAndShrinkAboutPoint(event.localX, event.localY, 1);
                }
                protected function myContainer2_clickHandler(event:MouseEvent):void {
                  myContainer2.growAndShrinkAboutPoint(event.localX, event.localY, 256);
                }
              ]]>
            </fx:Script>
          
            <comp:ExpandingContainer id="myContainer" width="256" height="192" x="200" y="200"
                         click="myContainer_clickHandler(event)"/>
            
            <comp:ExpandingContainer2 id="myContainer2" width="256" height="192" x="800" y="200"
                         click="myContainer2_clickHandler(event)"/>
          </s:Application>
          

           

          ---------------------------- components/ExpandingContainer.mxml -------------------------

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/halo"
                      skinClass="skins.SkinnableContainerSkin">
            <fx:Script>
              <![CDATA[
                [Bindable] private var scale:Number;
                [Bindable] private var pointX:int;
                [Bindable] private var pointY:int;
          
                public function growAndShrinkAboutPoint(x:int, y:int, growth:Number):void {
                  pointX = x;
                  pointY = y;
                  scale = growth;
                  if (!growAndShrinkEffect.isPlaying) {
                    growAndShrinkEffect.play();
                  }
                }
              ]]>
            </fx:Script>
          
            <fx:Declarations>
              <s:Sequence id="growAndShrinkEffect" >
                <s:Scale target="{this}" duration="600"
                     scaleXBy="{scale}" scaleYBy="{scale}"
                     transformX="{pointX}" transformY="{pointY}"/>
                <s:Pause duration="500" />
                <s:Scale target="{this}" duration="600"
                     scaleXBy="{-scale}" scaleYBy="{-scale}"
                     transformX="{pointX}" transformY="{pointY}"/>
              </s:Sequence>
            </fx:Declarations>
          
          </s:SkinnableContainer>
          

           

          ------------------------ components/ExpandingContainer2.mxml --------------------------------

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:SkinnableComponent xmlns:fx="http://ns.adobe.com/mxml/2009" 
                      xmlns:s="library://ns.adobe.com/flex/spark" 
                      xmlns:mx="library://ns.adobe.com/flex/halo"
                      skinClass="skins.SkinnableContainerSkin">
            
            <fx:Script>
              <![CDATA[
                [Bindable] private var growthX:Number;
                [Bindable] private var growthY:Number;
                [Bindable] private var xBy:int;
                [Bindable] private var yBy:int;
                
                public function growAndShrinkAboutPoint(x:int, y:int, growth:Number):void {
                  this.growthX = growth;
                  this.growthY = growth * this.height/this.width;
                  this.xBy = - x/this.width * growthX;
                  this.yBy = - y/this.height * growthY;
                  if (!growAndShrinkEffect.isPlaying) {
                    growAndShrinkEffect.play();
                  }
                }
              ]]>
            </fx:Script>
            
            <fx:Declarations>
              <s:Sequence id="growAndShrinkEffect">
                <s:Parallel target="{this}" duration="600">
                  <s:Resize widthBy="{growthX}" heightBy="{growthY}" />
                  <s:Move xBy="{xBy}" yBy="{yBy}" />
                </s:Parallel>
                <s:Pause duration="500" />
                <s:Parallel target="{this}" duration="600">
                  <s:Resize widthBy="{-growthX}" heightBy="{-growthY}" />
                  <s:Move xBy="{-xBy}" yBy="{-yBy}" />
                </s:Parallel>
              </s:Sequence>
            </fx:Declarations>
          </s:SkinnableComponent>
          

           

          --------------- skins/SkinnableContainerSkin.mxml -------------------------------

           

          <?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/halo">
          
            <fx:Metadata>
              <![CDATA[
                [HostComponent("spark.components.SkinnableContainer")]
              ]]>
            </fx:Metadata>
          
            <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
            </s:states>
          
            <s:Rect left="-2" right="-2" top="-2" bottom="-2">
              <s:stroke>
                <s:SolidColorStroke color="black" weight="2" />
              </s:stroke>
            </s:Rect>
          
            <mx:Image source="@Embed(source='assets/marbles.jpg')"
                  width="100%" height="100%"/>
          
            <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
              <s:layout>
                <s:BasicLayout/>
              </s:layout>
            </s:Group>
          
          </s:Skin>
          

           

          -------------------- assets/marbles.jpg -----------------------------

           

           

          - e