使圖像在FLEX/AS閃光燈中移動

Question

在以下代碼中，水果圖像的onclick如何使水果圖像在盒子圖像中下降並具有適當的效果（即應將水果圖像丟棄到盒子圖像中） ..

  <?xml version="1.0" encoding="utf-8"?> 
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 

      <mx:Script> 
       <![CDATA[ 
       import mx.controls.Button; 
       import mx.controls.Alert; 

       public function clickhandler(event:Event):void 
       { 

       } 
       ]]> 

      </mx:Script> 

       <mx:Canvas id="myCanvas" 
       height="800" width="800" 
       borderStyle="solid" 
       backgroundColor="#A9C0E7"> 

       <mx:Image 
        height="50" width="50" 
        x="100" y="10" 
        source="@Embed(source='fruits.jpg')" 
        click="clickhandler(event)" /> 

       <mx:Image 
        height="200" width="200" 
        x="300" y="350" 
        source="@Embed(source='box.jpg')" /> 
       </mx:Canvas> 


      <!--<mx:TextInput x="231" y="175" id="txtLogin"/>--> 



      </mx:Application> 

Answer 1

您可以使用下面的代碼：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
    <![CDATA[ 
     public function clickhandler(event:Event):void 
     { 
      fruitAnimation.play(); 
     } 
    ]]> 
    </mx:Script> 

    <mx:Move id="fruitAnimation" target="{fruitImage}" xTo="375" yTo="450" /> 

    <mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="800" id="myCanvas" width="800"> 
     <mx:Image click="clickhandler(event)" height="50" id="fruitImage" source="@Embed(source='fruits.jpg')" 
      width="50" x="100" y="10" /> 
     <mx:Image height="200" source="@Embed(source='box.jpg')" width="200" x="300" y="350" /> 
    </mx:Canvas> 
</mx:Application> 

在情況下，如果你想添加你可以使用下面的代碼拋物線運動：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
    <![CDATA[ 
     import mx.effects.easing.Quadratic; 
     public function clickhandler(event:Event):void 
     { 
      fruitAnimation.play(); 
     } 
    ]]> 
    </mx:Script> 

    <mx:Parallel id="fruitAnimation" target="{fruitImage}"> 
     <mx:AnimateProperty property="x" toValue="375" easingFunction="{Quadratic.easeOut}" /> 
     <mx:AnimateProperty property="y" toValue="450" /> 
    </mx:Parallel> 

    <mx:Canvas backgroundColor="#A9C0E7" borderStyle="solid" height="800" id="myCanvas" width="800"> 
     <mx:Image click="clickhandler(event)" height="50" id="fruitImage" source="@Embed(source='fruits.jpg')" 
      width="50" x="100" y="10" /> 
     <mx:Image height="200" source="@Embed(source='box.jpg')" width="200" x="300" y="350" /> 
    </mx:Canvas> 
</mx:Application> 

希望這有助於！

Answer 2

下載在http://www.greensock.com/tweenlite/

的TweenLite的庫，然後你可以使用下面的代碼：

public function clickhandler(e:Event):void 
{ 
    TweenLite.to(e.target, 0.5, {x: 300, y: 350}); 
}