CODEWITHSUNDEEP
actionscript-3flashmxmlmxmlc
Rajeev
Rajeev

Reputation: 46919

Making image move in FLEX/AS flash

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>

Upvotes: 1

Views: 887

Answers (2)

Constantiner
Constantiner

Reputation: 14221

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!

Upvotes: 1

Michiel Standaert
Michiel Standaert

Reputation: 4176

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});
}

Upvotes: 1

Related Questions