Get GSAP

Version: 1.14.2 updated 2014-10-29

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        Jump to content

        Codepen Notification

        You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

        Doobers plopping out - how to squeeze and bounce at the same time

        Started by afarber, Aug 18 2012 08:00 AM - - - - -

        3 replies to this topic
        afarber

        Post #1 by afarber , 18 August 2012 - 08:00 AM

        Hello,

        I'm trying to reproduce "doobers" - i.e. coins, stars, etc. provided to players in games after they performed simple tasks, like chopping a tree.

        The doobers would usually

        1) Bounce and change dimensions at the same time (bigger width, smaller height and then back to normal)
        2) Fly in a bezier curve up to the score bar
        3) Lighten up in a polaroid effect for a split-second.

        I have prepared a complete working example and screenshot for the 2)

        but don't know how to do 1) and 3).

        Any ideas please?

        Regards
        Alex

        P.S. Below my test case code and screenshot:

        Posted Image

        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>
        

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

        • Back to top

        afarber

        Post #2 by afarber , 18 August 2012 - 08:37 AM

        Hello again,

        I've come forward with the following code but still have 3 problems:

        1) How to run the flyTween on mouse over event?
        2) How to add the "polaroid blitz" tween at the very end?
        3) Don't know how to remove the mouse over handler at the end - since it is an anonimous closure

        Thank you for any hints

        <?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 mx.collections.ArrayList;
          
           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 mouse over listener here?
        	 }
            });
           
            star.addEventListener(MouseEvent.MOUSE_OVER, function(event:MouseEvent):void {
        	 flyTween.complete();
            });
           }
          ]]>
        </fx:Script>   
        
        <mx:UIComponent id="myComp" width="100%" height="100%" click="handleClick(event)" />
        
        </s:Application>
        

        • Back to top

        Carl

          Administrator

        • Carl
        • 5,116 posts

        Post #3 by Carl , 19 August 2012 - 01:51 AM

        Hi,

        Glad to see you are making progress.

        1) How to run the flyTween on mouse over event?

        currently on MOUSE_OVER you are forcing the flyTween to complete. I've also noticed that you have a delay of 10 seconds on the flyTween. If you want the flyTween to play as soon as the MOUSE_OVER happens try using

        flyTween.restart()

        using restart() you will bypass the existing 10-second delay

        2) How to add the "polaroid blitz" tween at the very end?


        I don't know exactly what you are asking. I don't see any code about a polaroid blitz. Are you asking how to create a polaroid blitz? or how to add more tweens to a sequence?

        If the latter, I would suggest you look into TimelineLite or TimelineMax as they provide very powerful sequencing tools.
        http://www.greensock.com/timelinelite
        If you need more help, just ask.

        3) Don't know how to remove the mouse over handler at the end - since it is an anonimous closure


        Yes, that is one of the downsides of using anonymous functions; You can't reference them. I would suggest naming your event handler functions just like you did with handleClick().
        • Back to top

        afarber

        Post #4 by afarber , 19 August 2012 - 01:41 PM

        Thank you I didn't realize that the restart() method will cancel a delay and execute the tween immediately.

        I've updated my test code here
        http://stackoverflow...enshot-attached

        It runs good enough now, thanks
        • Back to top




        0 user(s) are reading this topic

        0 members, 0 guests, 0 anonymous users