4 Replies Latest reply on Jan 31, 2011 1:38 PM by broconne

    Moving multiple objects from a single point to different positions.

    broconne Level 1

      During one state transition I want to move multiple objects from a single point to their placed point within a container.  From experimentation it seems that the xFrom,yFrom,xTo and yTo are all relative to the objects placed point within their container.  That is xTo=0,yTo=0 will move the objects to the place I want them to be. 

       

      What I seem unable to calculate a common point for them to start from.  If I set xFrom="{SomeObject.x}" it seems to get the x location of that object.  However, I think I need a function because I am going to have to calculate the relative offset of every object to this specified point (which just happens to be the center of another object).  However, if I set xFrom="{calcX()}" it never seems to call calcX().  I have a simple calcX function where I trace my entry into the function and return a number.  I can see from the logs it does not get called.  Are you not allowed to call functions for xFrom?  If not, any suggestions on how I can solve my problem of having multiple object do a move transition from a central point?

       

       

      Thanks.

        • 1. Re: Moving multiple objects from a single point to different positions.
          saisri2k2 Level 4

          there is transformMatrix on each and every object also matrix you can transform a point to a differnt location using this, I've got

          no much information on this, but it will help you reduce burdern if a lot of point have to be transformed in a differnt coordinate sspace.


          • 2. Re: Moving multiple objects from a single point to different positions.
            broconne Level 1

            Thanks for the tip. 

             

            I guess the base question I have is, can I actually call a function to set my value for xFrom or yFrom?

            • 3. Re: Moving multiple objects from a single point to different positions.
              jmessary

              Ok so I did a little test on that...answer is YES but it will load when the page loads.

               

               

               

              SO here's what I did:

               

              <?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"
                             width="400" height="400">
                 
                  <fx:Script>
                      <![CDATA[
                                     
                          public function calcX(label_param:Label):int
                          {               
                              var horizontal_center:int;
                             
                              if(label_param.id == "label_1")
                              {
                                    horizontal_center = obj1.x + (obj1.width / 2);                                                   
                              }
                              else
                              {
                                  horizontal_center = obj2.x + (obj2.width / 2);                                                   
                              }               
                              return horizontal_center;
                          }
                          public function calcY(label_param:Label):int
                          {               
                              var vertical_center:int;
                              if(label_param.id == "label_1")
                              {
                                  vertical_center = obj1.y + (obj1.height / 2);                               
                              }
                              else
                              {
                                  vertical_center = obj2.y + (obj2.height / 2);                               
                              }               
                              return vertical_center;   
                          }

               

                          protected function button1_clickHandler(event:MouseEvent):void
                          {           
                              move_label_1.xTo = calcX(label_1);
                              move_label_1.yTo = calcY(label_1);
                              move_label_1.play();
                          }

               


                          protected function button2_clickHandler(event:MouseEvent):void
                          {
                              move_label_2.xTo = calcX(label_2);
                              move_label_2.yTo = calcY(label_2);
                              move_label_2.play();
                          }

               

                      ]]>
                  </fx:Script>
                 
                  <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                      <s:Move id="move_label_1" target="{label_1}" />
                      <s:Move id="move_label_2" target="{label_2}" />
                                 
                  </fx:Declarations>
                  <s:Label id="label_1" x="10" y="26" width="88" height="24" fontSize="22" text="Label 1"/>
                  <s:Label id="label_2" x="302" y="27" width="88" height="24" fontSize="22" text="Label 2"/>
                 
                  <s:Button x="10" y="369" label="Move 1" click="button1_clickHandler(event)"/>
                  <s:Button x="320" y="369" label="Move 2" click="button2_clickHandler(event)"/>
                 
                  <s:Button id="obj2" x="65" y="179" height="100" label="OBJ2" enabled="false"/>
                  <s:Button id="obj1" x="267" y="179" height="100" label="OBJ1" enabled="false"/>

                 
              </s:Application>

               

               

               

              Bascially this is a good starting point for you.  You will have to do the calculations to get the centering done (I simply put the object that is being moved to the center of the object it was moving to, not necessarily the center of the object that is moving) shouldn't be too hard though.

               

              If you paste that section of code and run it you should see that I have 2 buttons and 2 objects.  I move the label to the object (really a disabled btn) diagonal to it based on the click of a button.

               

              Is this what you are looking for?

              • 4. Re: Moving multiple objects from a single point to different positions.
                broconne Level 1

                Thanks for the information, that may be useful  However, it does essentially seem that you can't call a method to get your values if you want to do it when the transition is invoked - because it gets done during startup - makes sense.  Thanks for the example!