Making image move in FLEX/AS flash

Question

In the following code ,onclick of fruits image how to make the fruits image drop in the box image with proper effect(i.e, dropping of the fruit image into the box image should be shown)..

          <?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

You can use the following code:

<?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>

In case if you want to add parabolic movements you can use the following code:

<?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>

Hope this helps!