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>

score 1 · Answer 1 · answered Apr 24 '11 at 08:57

1

download the tweenLite library at http://www.greensock.com/tweenlite/

then you can just use the following code:

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

answered Apr 24 '11 at 08:57

Michiel Standaert

4,096
7
27
49

I am using open-source flex SDK,Where should i unzip it into .This is my directory structure..`/opt/flex-sdk` and the directories in this are `ant bin flex-sdk-description.xml lib license-mpl.htm samples templates asdoc flex_sdk_4.1.0.16076_mpl.zip frameworks license-adobesdk-fr.htm readme.htm SDK license.pdf` – Rajeev Apr 24 '11 at 14:33
the place where you have your source file for your code, there you should unzip it :) (so if you have main.mxml for example, you should unzip it there and then you should see a new directory called com/greensock :) ) – Michiel Standaert Apr 24 '11 at 18:29

score 1 · Accepted Answer · answered Apr 24 '11 at 18:43

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!

Making image move in FLEX/AS flash

2 Answers2