Greensock’s ThrowPropsPlugin iPad Test

Heres a quick video showing how You can use the Greensock’s ThrowPropsPlugin to emulate the bouncy effect of the iOS devices, on the example I used an image but it can also be used with TextFields or Lists and it performs equally good on the iPad.

ThrowPropsPlugin is a plugin for TweenLite and TweenMax that allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite). This is perfect for flick-scrolling or animating things as though they are being thrown

For the code part I just used Jack’s sample with some minor tweaks to use an image instead of a TextField.
Here is the class:

package com.swfgeek.mobile.ThrowPropsPlugin {
	import flash.display.MovieClip;
	import flash.display.Shape;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.utils.getTimer;
	import com.greensock.TweenLite;
	import com.greensock.easing.Strong;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.ThrowPropsPlugin;
	import flash.geom.Rectangle;
	
	public class MainApp extends MovieClip {
		private var bounds : Rectangle;
		private var mc : MovieClip;
		private var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number;
		
		public function MainApp() {
			TweenPlugin.activate([ThrowPropsPlugin]);
			initialize();
		}
		
		private function initialize():void {
			bounds = new Rectangle(-128, 0, 768+128, 1024);
			mc = getChildByName("robots_mc") as MovieClip;
			setUpTPBounds(mc, bounds);
			mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
		}

		
		private function mouseDownHandler(event:MouseEvent):void {
			TweenLite.killTweensOf(mc);
			x1 = x2 = mc.x;
			y1 = y2 = mc.y;
			t1 = t2 = getTimer();
			mc.startDrag();
			mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
			mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}

		private function enterFrameHandler(event:Event):void {
				x2 = x1;
				y2 = y1;
				t2 = t1;
				x1 = mc.x;
				y1 = mc.y;
				t1 = getTimer();
		}

		private function mouseUpHandler(event:MouseEvent):void {
			mc.stopDrag();
			mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
			var time:Number = (getTimer() - t2) / 1000;
			var xVelocity:Number = (mc.x - x2) / time;
			var xOverlap:Number = Math.max(0, mc.width - bounds.width);
			var yVelocity:Number = (mc.y - y2) / time;
			var yOverlap:Number = Math.max(0, mc.height - bounds.height);
			ThrowPropsPlugin.to(mc, {throwProps:{
										 y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300},
										 x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:300}
									 }, ease:Strong.easeOut
									}, 10, 0.3, 1);
		}

		private function setUpTPBounds(container : MovieClip, bounds : Rectangle):void {
			var crop:Shape = new Shape();
			crop.graphics.beginFill(0xFF0000, 1);
			crop.graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
			crop.graphics.endFill();
			container.x = bounds.x;
			container.y = bounds.y;
			container.parent.addChild(crop);
			container.mask = crop;
		}


	}
	
}

To know more about this plugin visit Greensock’s ThrowPropsPlugin page and check out the ASDocs.

Note: ThrowPropsPlugin is a membership benefit of Club GreenSock (“Shockingly Green” and corporate levels). If you’re not a member yet,I suggest you sign up, believe Me is really worthy.

Happy Coding

Fuse 2.1.3 and FuseFX 0.1 Released

An update of the Fuse Tween engine has been released, and with it FuseFX extensions, a release of new tweenable properties wish includes MixerFX a sample extension that lets you tween Sound objects and TextFX to animate all numerical TextFormat properties right on a TextField.

Check ’em out at the Moses?s Fuse ZigoEngine site.