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
