Doobers kicsapott – hogyan kell csinálni egy tween? Teszteset + képernyőkép csatolva

A legtöbb közösségi játékban (mint például a CastleVille (c) Zynga vagy a Magic Land (c) Wooga) vannak dooberek – érmék, csillagok stb., amelyeket a játékos kap néhány egyszerű műveletért, például favágásért.

Úgy tűnik, hogy a dooberek több tweent is végrehajtanak:

1. Először kipattannak, ugrálnak. És a méreteik is ugrálnak.
2. Ezt követően egy bezier görbében felrepülnek a pontozósávhoz.

Készítettem egy nagyon egyszerű tesztesetet és egy képernyőképet a kérdésemhez. A teszteset Flexben van, mert ezt használtam legutóbb, de a kérdésem általánosabb (ActionScript, Tween). A com.greensock.TweenMax könyvtárat használom.

Az én problémám: rájöttem, hogyan kell elkészíteni a második, bezier részt. De nem tudom, hogy kell csinálni az első, pattogós részt?

MyApp.mxml (nem kell Flexnek lennie, lehet Flash):

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import spark.core.SpriteVisualElement;
            import com.greensock.TweenMax;
            import com.greensock.easing.Cubic;

            private function init():void {
                var g:Graphics = myComp.graphics;
                g.clear();
                g.beginFill(0xCCCCCC);
                g.drawRect(0, 0, myComp.width, myComp.height);
                g.endFill();                
            }           

            private function handleClick(event:MouseEvent):void {
                var star:SpriteVisualElement = new Star();
                star.x = event.localX;
                star.y = event.localY;
                myComp.addChild(star);

                TweenMax.to(star, 1, {
                    delay: 2,
                    ease:  Cubic.easeOut,
                    bezier: [
                        {x: myComp.width - star.width, y: Math.max(event.localY, myComp.height/2)}, 
                        {x: myComp.width - star.width, y: 0}
                    ]
                });
            }

        ]]>
    </fx:Script>    

    <mx:UIComponent id="myComp" width="100%" height="100%" click="handleClick(event)" />

</s:Application>

Star.fxg:

<?xml version='1.0' encoding='UTF-8'?>
<!-- fxg/star.fxg -->
<fxg:Graphic xmlns:fxg="http://ns.adobe.com/fxg/2008" version="2">    
    <fxg:Path x="9.399" y="10.049" data="M 82.016 78.257 L 51.895 69.533 L 27.617 89.351 L 26.621 58.058 L 0.231 41.132 L 29.749 30.52 L 37.714 0.241 L 56.944 24.978 L 88.261 23.181 L 70.631 49.083 Z">
        <fxg:fill>
            <fxg:SolidColor color="#FFFFFF"/>
        </fxg:fill>
        <fxg:stroke>
            <fxg:SolidColorStroke 
                caps="none" 
                color="#4769C4" 
                joints="miter" 
                miterLimit="4" 
                weight="20"/>
        </fxg:stroke>
    </fxg:Path>
</fxg:Graphic>

Arra is kíváncsi lennék, hogyan lehet a legvégére hozzáadni egy "Polaroid fényképezőgép vaku" effektust?

FRISSÍTÉS:

A LondonDrugs_MediaServices segítségével (köszönöm!) az ügyeskedők szorítanak és ugrálnak (a kód lent), de még mindig van 3 nyitott problémám:

1. Hogyan futtassuk a flyTweent az egérrel az esemény fölé?
2. Hogyan adjuk hozzá a "polaroid blitz" tween-t a legvégére?
3. Nem tudom, hogyan kell eltávolítani az egeret a kezelőről a végén - mivel ez egy névtelen lezárás

Kérdésemet a a GreenSock fórum.

Köszönöm az esetleges tippeket

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            import com.greensock.TweenMax;
            import com.greensock.easing.Bounce;
            import com.greensock.easing.Cubic;
            import spark.core.SpriteVisualElement;

            private function init():void {
                var g:Graphics = myComp.graphics;
                g.clear();
                g.beginFill(0xCCCCCC);
                g.drawRect(0, 0, myComp.width, myComp.height);
                g.endFill();                
            }           

            private function handleClick(event:MouseEvent):void {
                var star:SpriteVisualElement = new Star();
                star.x = event.localX;
                star.y = event.localY;
                myComp.addChild(star);

                TweenMax.to(star, 2, {
                    bezier: [
                        {x:star.x + 10, y:star.y - 20, scaleX: 1,   scaleY: 1}, 
                        {x:star.x + 20, y:star.y + 20, scaleX: 1.2, scaleY: .8}, 
                        {x:star.x + 20, y:star.y + 30, scaleX: 1,   scaleY: 1}], 
                    orientToBezier: false, 
                    ease: Bounce.easeOut
                });

                var flyTween:TweenMax = TweenMax.to(star, 1, {
                    delay: 10,
                    ease:  Cubic.easeOut,
                    bezier: [
                        {x: myComp.width - star.width, y: Math.max(event.localY, myComp.height/2)}, 
                        {x: myComp.width - star.width, y: 0}
                    ],
                    onComplete: function():void {
                        myComp.removeChild(star);
                        // XXX how to remove the mouse over handler here?
                    }
                });

                star.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
                    // XXX how to force flyTween to execute right now, without the delay?
                    flyTween.complete();
                });
            }
        ]]>
    </fx:Script>    

    <mx:UIComponent id="myComp" width="100%" height="100%" click="handleClick(event)" />

</s:Application>

UPDATE2: Köszönöm LondonDrugs_MediaServices, ismét itt a frissített képernyőkép + kód.

Jó móka játszani a dooberekkel, de van még két kisebb probléma:

1. Valóban meg kell ölnöm a (késleltetett) legyet? Nem tudom ehelyett valahogy módosítani a késleltetését (0-ra állítani), ha az egeret fölé viszem?
2. Jó lenne a "fényképezőgép vaku" effektusa a végén. Csak nem emlékszem, hogyan csinálták - valami szabványos Flash MX effekt...

MyApp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               applicationComplete="init()">

    <fx:Script>
        <![CDATA[
            import com.greensock.TweenMax;
            import com.greensock.easing.Bounce;
            import com.greensock.easing.Cubic;
            import flash.filters.GlowFilter;
            import spark.core.SpriteVisualElement;

            private function init():void {
                var g:Graphics = myComp.graphics;
                g.clear();
                g.beginFill(0xCCCCCC);
                g.drawRect(0, 0, myComp.width, myComp.height);
                g.endFill();                
            }           

            private function goFlyTween(star:DisplayObject, delay:Number = 0):void {
                TweenMax.to(star, 1, {
                    delay: delay,
                    ease:  Cubic.easeOut,
                    bezier: [
                        {x: myComp.width - star.width, 
                         y: Math.max(star.y, myComp.height/2)}, 
                        {x: myComp.width - star.width, y: 0}
                    ],
                    onComplete: function():void {
                        if(star.parent)
                            star.parent.removeChild(star);
                    }
                });
            }

            private function handleClick(event:MouseEvent):void {
                var star:SpriteVisualElement = new Star();
                star.filters = [
                    new GlowFilter(0xffffff, 1, 4, 4, 10, 2), 
                    new GlowFilter(0x0, 1, 1.5, 1.5, 10, 2)
                ];
                star.x = event.localX;
                star.y = event.localY;
                myComp.addChild(star);

                TweenMax.to(star, 2, {
                    bezier: [
                        {x:star.x + 10, y:star.y - 20, scaleX: 1,   scaleY: 1}, 
                        {x:star.x + 20, y:star.y + 20, scaleX: 1.2, scaleY: .8}, 
                        {x:star.x + 20, y:star.y + 30, scaleX: 1,   scaleY: 1}], 
                    orientToBezier: false, 
                    ease: Bounce.easeOut,
                    onComplete: goFlyTween,
                    onCompleteParams: [star, 3]
                });

                star.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
                    // instead of killing + recreating, can't we just reset the delay?
                    TweenMax.killTweensOf(star);
                    goFlyTween(star);
                }, false, 0, true);
            }
        ]]>
    </fx:Script>    

    <mx:UIComponent id="myComp" width="100%" height="100%" click="handleClick(event)" />

</s:Application>