Заставить изображение двигаться во FLEX / AS вспышке - PullRequest
1 голос
/ 24 апреля 2011

В следующем коде нажмите на изображение фруктов, как сделать так, чтобы изображение фруктов падало на изображение коробки с соответствующим эффектом (т. Е. Должно быть показано падение изображения фруктов в изображение коробки) ..

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

Ответы [ 2 ]

1 голос
/ 24 апреля 2011

Вы можете использовать следующий код:

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

Надеюсь, это поможет!

1 голос
/ 24 апреля 2011

загрузить библиотеку tweenLite по адресу http://www.greensock.com/tweenlite/

тогда вы можете просто использовать следующий код:

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