Search the Community

I would like to replace Flex Spinner (sometimes called Picker or UIPicker) with something written in AS3 without Flex. ThrowProps and Blitmask should be a great help. Are there any examples of doing using Greensock?

I have written a scroller class that is very closely based upon the example given on the ThrowProps api doc page. One of the things that I have added is a scrollToY(num) function, which works fine. But it does not work if called as a result of a mouse click. The viewport being scrolled is a list of words, and when a word is clicked, I would like to scroll that word to the center of the viewport. But, TweenLite.to is not working unless I comment out the ThrowPropsPlugin.to call in the same class. It appears that the ThrowPropsPlugin is doing something with the mouse clicks that interferes with the TweenLite.to Any help would be greatly appreciated. The scrolling animation that I am getting is gorgeous. package views.base { import com.greensock.TweenLite; import com.greensock.easing.Strong; import com.greensock.plugins.ThrowPropsPlugin; import com.greensock.plugins.TweenPlugin; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.utils.getTimer; import lib.data.IDisposable; public class Scroller extends Sprite implements IDisposable { TweenPlugin.activate([ThrowPropsPlugin]); private var _viewport:Sprite; private var _bounds:Rectangle; private var _relativeYPosition:Number; public function Scroller() { super(); } public function setViewPort(sprite:Sprite, dimensions:Rectangle) : void { _viewport = sprite; _bounds = dimensions; _viewport.x = _bounds.x; _viewport.y = _bounds.y; addChild(_viewport); ThrowPropsPlugin.track(_viewport, "y"); //track the "y" property's velocity automatically addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); addEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); } public function beforeResizeViewport() : void { if (_viewport) { _relativeYPosition = Math.max(0, _viewport.y * -1 / _viewport.height); } } public function resizeViewport(dimensions:Rectangle) : void { _bounds = dimensions; if (_viewport) { var yPos:Number = Math.min(_relativeYPosition * _viewport.height, _viewport.height - dimensions.height); _viewport.y = yPos * -1; } } public function scrollToY(position:Number) : void { var duration:Number = Math.abs(_viewport.y - position) / _viewport.height * 20; duration = Math.max(1, duration); TweenLite.to(_viewport, duration, {y:position}); // _viewport.y = position; } public function dispose() : void { removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler); removeEventListener(Event.REMOVED_FROM_STAGE, removedFromStageHandler); if (_viewport && _viewport is IDisposable) { (_viewport as IDisposable).dispose(); _viewport = null; } } private function addedToStageHandler(event:Event) : void { stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } private function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(_viewport); _viewport.startDrag(false, new Rectangle(_bounds.x, -99999, 0, 99999999)); stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } private function mouseUpHandler(event:MouseEvent):void { _viewport.stopDrag(); stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); var yOverlap:Number = Math.max(0, _viewport.height - _bounds.height); ThrowPropsPlugin.to(_viewport, {ease:Strong.easeOut, throwProps:{y:{max:_bounds.top, min:_bounds.top - yOverlap, resistance:200}}}, 10, 0.25, 1); } private function removedFromStageHandler(event:Event) : void { stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } } }

ThrowProps and Blitmask really do work well together for scrolling, but most of my views have too much interactivity for Blitmask to be useful. The BlitMask would need to be updated with a forced recapture of the Blitmask each time any change is made to the view, and this is taking about 500ms, which interferes with a smooth scroll. Is there an example for using ThrowProps in a Scroller without using BlitMask?

I have created an image slider for mobile devices using draggable and throwprops plugins. i want to limit the dragging limit upto just one image per drag. I don't want to make it too much free flow resulting in sliding through many images.

I've created an SVG dial that rotates just fine with Draggable, however when I enable "throwProps" when I release the mouse it flings it in one direction or the other much faster than expected, and not in the direction it should be either. Has anyone had this issue?

Helly everybody, I was hoping someone out there might be able to provide some info on applying the greensock throwprops plugin to a vertical scrolling nav menu for an android app. I have tried modifying the code from the throwprops page, but it uses a textfield, i want buttons inside a movie clip... Is that even possible? Can anybody point out any useful tuts or articles? or would someone like to view the file? Thanks a bunch everybody, Alex

Hi, I'm using the throwProps dial code from the Greensock example. I need to calculate which turn of the dial the user is on eg. turn 2 of 10 How would I do this? At the moment I am trying to calculate whether the user is turning the dial clockwise or anti-clockwise. Then either adding 1 to the turn count if the turn is clockwise and the rotation value equals 359º or subtracting 1 from the turn count if the turn is anti-clockwise and the rotation value equals 0º Is this the correct way or is there another way by adjusting the original sample code? Here's my code in addition to the throwProps sample code. The calculateDialDirection is wrong, so I need a delay of some sort when grabbing the old and the new rotation values. Maybe with an array. // Calculate Direction of Dial (Clockwise or anti-clockwise) // --------------------------- var oldDialRotation:Number; var newDialRotation:Number; var calculateDialDirection:Number; var dialRotationDirection:uint; // Grab first rotation value oldDialRotation = degFromDeg(dial.rotation); // i.e. 5º // Grab second rotation value newDialRotation = degFromDeg(dial.rotation); // i.e. 10º calculateDialDirection = newDialRotation - oldDialRotation; if (calculateDialDirection > 0 ){ dialRotationDirection = 1; // Clockwise } else if (calculateDialDirection < 0 ){ dialRotationDirection = 0; // Anti-Clockwise } else { // No Change } // Count How Many Times Dial Has Turned var wheelTurnNumber:int = 0; if (dialRotAFTERdegFromDeg == 359 && dialRotationDirection == 1){ // Clockwise wheelTurnNumber ++; } else if (dialRotAFTERdegFromDeg == 0 && dialRotationDirection == 0){ // Anti-Clockwise wheelTurnNumber --; }

I am trying to make an interactive map with the draggable plugin that zooms in and out. I have made my image an SVG so it can scale well, and my location dots are css. But i have been running into two issues. 1. Since my map is longer than the view port, i can't seem to see the bottom of the map. it keeps scrolling back to the middle if i drag upwards. 2. All the zooming solutions I have found have only been for images. I need to zoom all the elements in the entire div. I started to create my own zoom, which zooms the whole div and the elements in side it. But this presents a couple of issues. First, it zooms in and out at the same spot, I would like it to zoom into the current mouse location. And second if I zoom out at the edge, the div goes out of the visible boundaries so i can't drag it around. As per your requests I created a codepen, http://codepen.io/jermbo/full/LktfB , and I realize this is a very specific situation. Any direction would be greatly appreciated. I just need a push in the right direction and I got the rest of the map functionality. Thanks in advance!! *Plugin Request : Zoomable. If this were a greensock plugin like Draggable I would be the happiest developer in the world!

Hi, There's a way to know the end value of the throwprops plugin before the the snap function triggers?. I have an array of points for the snap function and what I want to achieve is to snap the element being dragged by one point of the array at a time no matter what, because if the speed of the throw is high enough it could advance more than one. I've tried with some conditional logic onDragEnd, but snap gets called before, the only callback that triggers before is onDrag and this.endX is undefined at that time. What I have achieved is using some conditional logic inside onDrag to determine whether the drag is to the left or right and based on that tell throwprops to move the element to the next or previous point, but you lose the throw ability so to speak, because the smallest drag triggers the snapp, meanwhile with throwProps if the velocity is too small the element goes back to the original position the idea is to keep that feature too. I've setted up a codepen: http://codepen.io/rhernando/pen/hmjyA Best, Rodrigo.

I'm trying to get the Throwprops plugin to play nicely with a Kinetic.js layer that I'm trying to rotate and am getting the following error: Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: setRotationDeg The relevant part of my code looks like this: var tl = new TimelineMax(); tl.to(el, 2, { setRotationDeg: (360 * 1), ease:Power1.easeIn, onUpdate:layer.draw, onUpdateScope:layer }) .to(el, 10, { throwProps: { setRotationDeg: { velocity:'auto', end:end }, ease:Circ.easeOut, onUpdate:layer.draw, onUpdateScope:layer } }); }); The first to() works, but the second fails with the aforementioned error. This type of timeline works if I'm tweening a regular html element such as an image, but not so with the Kinetic canvas element. Is there a way I can get these to work together? Thanks in advance.

The ThrowProps Rotation demo code produces some erratic behaviour although it only happens when the dial is within a movie clip ie. nested movie clips. Symptoms are that the dial; 1. lags behind the mouse pointer and 2. rotates in the correct direction, but only from 90 to 270 degrees, it then rotates in the opposite direction. Is there any way to tweak the code to correct these problems?

Is it possible to use the Draggable util class with Canvas, specifically EaselJS? I'm creating a dial that can you can spin using throwprops. I wasnt able to use Draggable so I've recycled the dial AS3 example from here http://www.greensock.com/throwprops/ It works ok, but its a bit glitchy compared with the Draggable CSS example. I've created a Fiddle with the two versions, http://plnkr.co/edit/eKVhZL5ulUWqj5pgP9BA?p=preview Is the something wrong with the math on my Canvas version perhaps? Any tips would be appreciated.

I have a vertically scrolling mc that i am controlling using the throwprops plugin with a blitmask applied to it. I also have a button within that movieclip that triggers a popup when tapped. After i scroll the movieclip one time i now show a duplicate of the movieclip behind it. so when i scroll up or down to the ends, when the movieclip goes past the end point, I see a duplicate of the movieclip behind it. This only happens after I have scrolled the full thing once, so i'm thinking it has something to do with the blitMask. Any help would be greatly appreciated. I'm using the demo code just to test it out, so i can then edit it. Here is my updated code: var bounds:Rectangle = new Rectangle(0, 0, 480, 800); var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); blitMask.bitmapMode=false; var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number; var isMoving:Boolean=false; var isCatched:Boolean=false; blitMask.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); blitMask.disableBitmapMode(); if(isMoving==true) { isCatched=true; isMoving=false; } x1 = x2 = mc.x; xOffset = this.mouseX - mc.x; xOverlap = Math.max(0, mc.width - bounds.width); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { isMoving=true; if(blitMask.bitmapMode==false) { blitMask.enableBitmapMode(); } var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { //x2 = x1; //x1 = mc.x; y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:50}}, onUpdate:blitMask.update, onStart:blitMask.enableBitmapMode, onComplete:throwComplete, ease:Strong.easeOut}, 5, 0.3, 1); } function throwComplete () { isMoving=false; isCatched=false; blitMask.disableBitmapMode(); } mc.shortcuts_btn.addEventListener(MouseEvent.CLICK,FNA); mc.radar_btn.addEventListener(MouseEvent.CLICK,FNA); function FNA (e:MouseEvent) { if(isMoving==false && isCatched==false) { fna.visible = true; } else{ //donothing; } }

i use ThrowPropsPlugin and blitmask , and its wow scrollview for my background but it disabled every listeners and every movieClips animation inside the background movieClip i dont know why ? this line of code which disable every thing .. blitMask = new BlitMask( mcBg, bounds.x, bounds.y, bounds.width, bounds.height, false); please help me , i need the smooth blitmask scroll , and also i need the children inside the background -mcBg- to work .

I am sure this might be a common issue but I have buttons in my mc that is being moved by throws prop with the iPhone effect. I am using eventListerners. How do I fix this issue? It is creating buttons dynamically in this function and adding dynamic event listners to each button and then finally putting them all in on MC and making it "flickable" with throwProps. Here is my code/// DECLARES flagMC var flagMC:MovieClip = new MovieClip(); var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); var blitMask:BlitMask; function displayFlags(evt:Event = null) { trace("DISPLAY FLAGS---------------"); if(!Lang) { trace("No Lang!"); return; } var p:uint = 0; for (var i:uint = 0; i < Lang.length; i++) { flag = new Loader(); flag.load(new URLRequest(File.applicationStorageDirectory.url + "Languages/" + Lang + "/roundFlag.png")); flag.name = Lang; flagButton = new roundFlag(); flagButton.btext.text = Lang; addChild(flagButton); flagButton.removeChildAt(1); flagButton.addChildAt(flag,1); flag.addEventListener(MouseEvent.CLICK, loadLang(Lang,flagMC)); var fh = flagButton.getBounds(flagButton); if (i % 2){ flagButton.x = flagButton.width + flagButton.width/20; flagButton.y = fh.y * i;} else {flagButton.x = 0; trace("I is " +i); flagButton.y = fh.y * i; } // flagButton.y = fh.y * i; trace(fh.height); trace("Flag Button Height " + flag.height); flagMC.addChild(flagButton); } //addChild(flagMC); flagsIn(); flagMC.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } //B1.addEventListener(MouseEvent.CLICK, getLang); //B2.addEventListener(MouseEvent.CLICK, displayFlags); import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; function mouseDownHandler(event:MouseEvent):void { trace("Mouse Down"); TweenLite.killTweensOf(flagMC); y1 = y2 = flagMC.y; yOffset = this.mouseY - flagMC.y; yOverlap = Math.max(0, flagMC.height - bounds.height); t1 = t2 = getTimer(); flagMC.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); flagMC.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if flagMC's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { flagMC.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { flagMC.y = (y + bounds.top - yOverlap) * 0.5; } else { flagMC.y = y; } //blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = flagMC.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { trace("Mouse Up"); flagMC.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); flagMC.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (flagMC.y - y2) / time; ThrowPropsPlugin.to(flagMC, {throwProps: { y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}}, //onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); } that causes the issue:

I am getting strange spaces in my Android at the top, like ten pixels of white space when I use throwprops and I am getting the same white space on the iphone on the left, about 15 pixels. Here is my code below. What am I missing? I just noticed I have the imports in there twice but I don't think that should matter. This is my first time I actually got throwprops to work on an App. I am very excited to see what can be done. flagButton.width = stage.stageWidth - 50; flagButton.scaleY = flagButton.scaleX; flagButton.x = stage.stageWidth/2 - flagButton.width/2; import com.greensock.*; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.*; import flash.display.Sprite; import flash.events.MouseEvent; import flash.utils.getTimer; import flash.events.Event; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.easing.Strong; TweenPlugin.activate([ThrowPropsPlugin]); import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); var mc:Sprite = flagButton; addChild(mc); //setupTextField(mc, bounds); var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); }

Hello everybody I'm testing the ThrowPropsPlugin. It works like a charm so far. However, I I've come a case where I would like to know my final properties in advance. Is there a chance to retrive the end values of x,y, or rotation onstart of a tween? (Or will this cause a temporal paradox that crashes the universe?) Greetings Henry

Need help creating an iPhone style menu, similar to Angry Birds or Cut the Rope. It needs to use either Adobe Gesture Events or Greensock ThrowProps. I tried using the ThrowProps example, but I need it to stop on each menu item. The code below uses swipe left/right Gesture Events and TweenLite, but I need help adding an overshoot to the first and last menu item. Maybe by adding an 'if else' statement. import com.greensock.*; import com.greensock.easing.* var offsetX:Number = 440; // Swipe Gesture Multitouch.inputMode = MultitouchInputMode.GESTURE; stage.addEventListener (TransformGestureEvent.GESTURE_SWIPE, swipeHandler); function swipeHandler(event:TransformGestureEvent):void { switch(event.offsetX){ // swipe left case -1: { TweenLite.to(mc, 1, {x:mc.x - offsetX, ease:Expo.easeOut}); break; } // swipe right case 1: { TweenLite.to(mc, 1, {x:mc.x + offsetX, ease:Expo.easeOut}); break; } } } stage.addEventListener(Event.ENTER_FRAME, traceXPosition); function traceXPosition(evt:Event) { trace("movieClip Position: " + mc.x); }

hi, I'm trying to get a mouse wheel event implemented onto the example for the ThrowPropsPlugin, from here: http://www.greensock.com/throwprops/ How would I go about doing that ? Thanks import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var bounds:Rectangle = new Rectangle(30,30,250,230); var mc:Sprite = new Sprite(); addChild(mc); setupTextField(mc, bounds); var blitMask:BlitMask = new BlitMask(mc,bounds.x,bounds.y,bounds.width,bounds.height,false); var t1:uint,t2:uint,y1:Number,y2:Number,yOverlap:Number,yOffset:Number; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0,mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300} }, onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); } function setupTextField(container:Sprite, bounds:Rectangle, padding:Number=20):void { var tf:TextField = new TextField(); tf.width = bounds.width - padding; tf.x = tf.y = padding / 2; tf.defaultTextFormat = new TextFormat("_sans",12); tf.text = "Click and drag this content and then let go as you're dragging to throw it. Notice how it smoothly glides into place, respecting the initial velocity and the maximum/minimum coordinates.\n\nThrowPropsPlugin 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.\n\nFor example, let's say a user clicks and drags a ball and you track its velocity using an ENTER_FRAME handler and then when the user releases the mouse button, you'd determine the velocity but you can't do a normal tween because you don't know exactly where it should land or how long the tween should last (faster initial velocity would mean a longer duration). You need the tween to pick up exactly where the user left off so that it appears to smoothly continue moving at the same velocity they were dragging and then decelerate based on whatever ease you define in your tween.\n\nAs demonstrated here, maybe the final resting value needs to lie within a particular range so that the content doesn't land outside a particular area. But you don't want it to suddenly jerk to a stop when it hits the edge; instead, you want it to ease gently into place even if that means going past the landing spot briefly and easing back (if the initial velocity is fast enough to require that). The whole point is to make it look smooth.\n\nThrowPropsPlugin isn't just for tweening x and y coordinates. It works with any numeric property, so you could use it for spinning the rotation of an object as well. Or the scaleX/scaleY properties. Maybe the user drags to spin a wheel and lets go and you want it to continue increasing the rotation at that velocity, decelerating smoothly until it stops.\n\nOne of the trickiest parts of creating a throwProps tween that looks fluid and natural, particularly if you're applying maximum and/or minimum values, is determining its duration. Typically it's best to have a relatively consistent level of resistance so that if the initial velocity is very fast, it takes longer for the object to come to rest compared to when the initial velocity is slower. You also may want to impose some restrictions on how long a tween can last (if the user drags incredibly fast, you might not want the tween to last 200 seconds). The duration will also affect how far past a max/min boundary the property can potentially go, so you might want to only allow a certain amount of overshoot tolerance. That's why ThrowPropsPlugin has a few static helper methods that make managing all these variables much easier. The one you'll probably use most often is the to() method which is very similar to TweenLite.to() except that it doesn't have a duration parameter and it adds several other optional parameters.\n\nA unique convenience of ThrowPropsPlugin compared to most other solutions out there which use ENTER_FRAME loops is that everything is reverseable and you can jump to any spot in the tween immediately. So if you create several throwProps tweens, for example, and dump them into a TimelineLite, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning.\n\nThe overshootTolerance parameter sets a maximum number of seconds that can be added to the tween's duration (if necessary) to accommodate temporarily overshooting the end value before smoothly returning to it at the end of the tween. This can happen in situations where the initial velocity would normally cause it to exceed the max or min values. An example of this would be in the iOS (iPhone or iPad) when you flick-scroll so quickly that the content would shoot past the end of the scroll area. Instead of jerking to a sudden stop when it reaches the edge, the content briefly glides past the max/min position and gently eases back into place. The larger the overshootTolerance the more leeway the tween has to temporarily shoot past the max/min if necessary."; tf.multiline = tf.wordWrap = true; tf.selectable = false; tf.autoSize = TextFieldAutoSize.LEFT; container.addChild(tf); container.graphics.beginFill(0xFFFFFF, 1); container.graphics.drawRect(0, 0, tf.width + padding, tf.textHeight + padding); container.graphics.endFill(); container.x = bounds.x; container.y = bounds.y; }

Hello everyone, I am very new to Flash, AS3 and Greensock. I've used basic movement animation with TweenLite and I'm really content for its ease of use. I thought I'd give Greensock a try (i've heard great things about it). Whatever examples including the textscroll example I've found are too complex for me. I'm trying to make a movieclip container (static text inside) scroll up/down with a frame mask with the famous "elasticity" effect exactly like the example shown in Throwprops page. I've watched the video on the ThrowProps page but that only shows how to animate but not touch and flicking. Can someone please give me a simple code? Thanks a lot. ps. Here is my simple example file: http://goo.gl/3KvQG

I have implemented throwprops functionality.also I am using blit mask but when I Implement scrolling using blit mask I want that user scroll using Blank area covered by blitmask i want that it should scroll. I tried to set hitArea of Blit mask but then It stopped working. TweenPlugin.activate([ThrowPropsPlugin]); public class ScrollingTest extends Sprite { var layoutManager:HLayout; var itemVector:Vector.<ComplexItem> ; var rc:int; var mainContainer:Sprite; var itemList:Sprite; var _scrollMask:Sprite; var bm:BlitMask; var backgroundLoader:Loader; public function ScrollingTest() { MonsterDebugger.initialize(this); init(); } var bounds:Rectangle; public function init():void { bounds = new Rectangle(0,0,1280,720); rc = 0; itemList = new Sprite(); itemList.y = 100; itemVector = new Vector.<ComplexItem>(); layoutManager = new HLayout(); layoutManager.hAlign = Align.LEFT; layoutManager.vAlign = Align.TOP; layoutManager.hGap = 100; layoutManager.vGap = 100; layoutManager.maxItemsPerRow = 50; for (var i:int=0; i<100; i++) { var complex:ComplexItem = new ComplexItem(); complex.addEventListener(MouseEvent.CLICK,onItemClick); complex.addEventListener(Event.COMPLETE,resourceLoaded); complex.startLoad(); itemVector.push(complex); rc++; } backgroundLoader = new Loader(); backgroundLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImageLoaded); backgroundLoader.load(new URLRequest("bigback.png")); } private function onImageLoaded(event:Event):void { var bmp:Bitmap = new Bitmap(event.target.content.bitmapData); addChildAt(bmp,0); } private function resourceLoaded(event:Event):void { rc--; if (rc == 0) { for (var i:int=0; i<itemVector.length; i++) { layoutManager.add(itemVector[i]); } layoutManager.layout(itemList); itemList.name = "ItemListContainer"; addChild(itemList); _scrollMask=new Sprite(); _scrollMask.name = "scrollMask"; _scrollMask.x = 100; _scrollMask.y = 0; _scrollMask.graphics.beginFill(0xFFFFFF,0.5); _scrollMask.graphics.drawRect(0,0,1000,600); _scrollMask.graphics.endFill(); _scrollMask.visible = false; bm = new BlitMask(itemList,100,0,1000,650,false,true); bm.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler); itemList.hitArea = _scrollMask; itemList.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler); dispatchEvent(new Event(Event.COMPLETE)); } } var t1:uint,t2:uint,x1:Number,x2:Number,xOverlap:Number,xOffset:Number; var beforeDragPos:Number; function mouseDownHandler(event:MouseEvent):void { if(isMoving==true) { isCatched=true; isMoving=false; } beforeDragPos = event.stageY; TweenLite.killTweensOf(itemList); x1 = x2 = itemList.x; xOffset = this.mouseX - itemList.x; xOverlap = Math.max(0,itemList.width - bounds.width); t1 = t2 = getTimer(); itemList.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); itemList.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } var isMoving:Boolean=false; var isCatched:Boolean=false; function mouseMoveHandler(event:MouseEvent):void { var moveX:Number = event.stageX - beforeDragPos; trace(moveX); if(moveX<0) { moveX=moveX * 1; } if(moveX < 20) { isMoving = false; return; } else { isMoving= true; } var x:Number = this.mouseX - xOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (x > bounds.top) { itemList.x = (x + bounds.top) * 0.5; } else if (y < bounds.top - xOverlap) { itemList.x = (x + bounds.top - xOverlap) * 0.5; } else { itemList.x = x; } bm.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { x2 = x1; t2 = t1; x1 = itemList.x; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { itemList.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); itemList.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var xVelocity:Number = (itemList.x - x2) / time; ThrowPropsPlugin.to(itemList, {throwProps:{ x:{velocity:xVelocity, max:bounds.top, min:bounds.top - xOverlap, resistance:300} }, onUpdate:bm.update,onComplete:tweenComplete ,ease:Strong.easeOut }, 10, 0.3, 1); } private function tweenComplete():void { isMoving=false; isCatched=false; bm.bitmapMode = false; } public function onItemClick(e:Event):void { if(isMoving==false && isCatched==false) { e.currentTarget.visible = false; } }