1 Reply Latest reply on Oct 16, 2007 1:41 PM by Gregory Lafrance

    Animate Stuff by Button IDs

    ChromeDemon
      I have this piece of code ... What i am trying to do is, calling the function "move" with the "target" depending of the "id" of my buttons ... In Flash it is easy, but i cant get this thing running in Flex ...

      <?xml version="1.0"?>
      <!-- controls\bar\TBarEvent.mxml -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
      <mx:Style>
      .myButtonStyle {
      overSkin: Embed("img/btn1.png");
      upSkin: Embed("img/btn2.png");
      downSkin: Embed("img/btn2.png");
      }
      </mx:Style>

      <mx:Script>
      <![CDATA[
      import flash.events.Event;
      import mx.controls.Alert;
      [Bindable]
      public var lagerung:String = "btn1";
      private function myEventHandler(e:Event):void {
      lagerung = e.currentTarget.id;
      //moveImage();
      }
      private function moveImageIn():void {
      myMove.end();
      myMove.yTo=5;
      myMove.play();
      }
      private function moveImageOut():void {
      myMove.end();
      myMove.yTo=40;
      myMove.play();
      }
      ]]>
      </mx:Script>
      <mx:Move id="myMove" target="{btn2}"/> <--- cant get the "BTN ID" here ... always got errors ???
      <mx:Canvas x="384" y="271" width="66" height="110">
      <mx:Button x="10" y="30" click="moveImageIn();" height="72" styleName="myButtonStyle" id="btn1" width="52"/>
      </mx:Canvas>
      <mx:Canvas x="434" y="271" width="66" height="110">
      <mx:Button x="10" y="30" click="myEventHandler(event)" mouseOver="moveImageIn()" mouseOut="moveImageOut()" height="72" styleName="myButtonStyle" id="btn2" width="52"/>
      </mx:Canvas>
      <mx:Canvas x="484" y="271" width="66" height="110">
      <mx:Button x="10" y="30" click="myEventHandler(event)" height="72" styleName="myButtonStyle" id="btn3" width="52"/>
      </mx:Canvas>
      <mx:Canvas x="534" y="271" width="66" height="110">
      <mx:Button x="10" y="30" click="myEventHandler(event)" height="72" styleName="myButtonStyle" id="btn4" width="52"/>
      </mx:Canvas>
      <mx:Canvas x="584" y="271" width="66" height="110">
      <mx:Button x="10" y="30" click="myEventHandler(event)" height="72" styleName="myButtonStyle" id="btn5" width="52"/>
      </mx:Canvas>
      <mx:Canvas x="393" y="322" width="448" height="73">
      <mx:Image x="0" y="0">
      <mx:source>file:///D|/Kunden/Marks Flex Krams/Paneltest/panel1.png</mx:source>
      </mx:Image>
      </mx:Canvas>
      <mx:TextArea id="message" text="{lagerung}" editable="false" height="50" width="222"
      color="#0000FF"/>
      </mx:Application>

      thanx in advance, any help much appreciated, coz i am a totaly noob :)

      cheers
        • 1. Re: Animate Stuff by Button IDs
          Gregory Lafrance Level 6
          I simplified your code a bit, and changed paths to images for my images, but I think the following code does what you want:

          <?xml version="1.0"?>
          <!-- controls\bar\TBarEvent.mxml -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
          horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Script>
          <![CDATA[
          import flash.events.Event;
          import mx.controls.Alert;

          [Bindable]
          public var lagerung:String = "btn1";
          private function myEventHandler(e:Event):void {
          lagerung = e.currentTarget.id;
          //moveImage();
          }
          private function moveImageIn():void {
          myMove.end();
          myMove.yTo=5;
          myMove.play();
          }
          private function moveImageOut():void {
          myMove.end();
          myMove.yTo=40;
          myMove.play();
          }
          ]]>
          </mx:Script>

          <mx:Style>
          .myButtonStyle {
          overSkin: Embed("assets/images/blueSquare10px.JPG");
          upSkin: Embed("assets/images/purpleSquare10px.JPG");
          downSkin: Embed("assets/images/redSquare10px.JPG");
          }
          </mx:Style>

          <mx:Move id="myMove" target="{btn2}"/> <!-- cant get the "BTN ID" here ... always got errors ???-->
          <mx:Canvas x="100" y="271" width="66" height="110" horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Button x="10" y="30" click="moveImageIn();" height="72" styleName="myButtonStyle" id="btn1" width="52"/>
          </mx:Canvas>
          <mx:Canvas x="200" y="271" width="66" height="110" horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Button x="10" y="30" click="myEventHandler(event)" mouseOver="moveImageIn()" mouseOut="moveImageOut()"
          height="72" styleName="myButtonStyle" id="btn2" width="52"/>
          </mx:Canvas>
          <mx:Canvas x="300" y="271" width="66" height="110" horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Button x="10" y="30" click="myEventHandler(event)" height="72" styleName="myButtonStyle" id="btn3" width="52"/>
          </mx:Canvas>
          <mx:Canvas x="400" y="271" width="66" height="110" horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Button x="10" y="30" click="myEventHandler(event)" height="72" styleName="myButtonStyle" id="btn4" width="52"/>
          </mx:Canvas>
          <mx:Canvas x="500" y="271" width="66" height="110" horizontalScrollPolicy="off" verticalScrollPolicy="off">
          <mx:Button x="10" y="30" click="myEventHandler(event)" height="72" styleName="myButtonStyle" id="btn5" width="52"/>
          </mx:Canvas>
          <mx:TextArea id="message" text="{lagerung}" editable="false" height="50" width="222"
          color="#0000FF"/>
          </mx:Application>