Search the Community

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, I'm just starting with TweenLite and I have a very basic question: I tween a movieclip in a mouseup event (it is a simple scroll), using this: TweenLite.to(mc, 2, {throwProps:{x:200, y:0}, ease:Strong.easeOut}); The effect looks good, but I need to limit the movieclip "mc" X. The mc may have a maximum X value of 0, and a minimum of -1500, so I can tween the mc without showing the background under the mc. Is there any way to limit the tween or to stop the tween when the mc reach the limits? Thank you very much.

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

Dear Greensock How is it when I publish a Javascript animation using the ThrowPropsPlugin? I would make "members only" code easily available for everyone. Is this okay with you? Flash was a sort of "closed". But there isn't very much one can do with JS files. 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 there, I was wondering if the Throw Props plugin is something that is coming soon, I believe its one of the most useful plugins as it allows quite many applications. Would really love to see something like this on Javascript for our "mobile content creating urges"... Keep up the good work, the lib is amazing so far.

Hello, I´m trying to make a simple pinch zoom image scroll app in Adobe Air Mobile for Android and ios. I always having the same issue when I try to pinch the image zoom in and I activate the blitmask. I don´t have problems making this part. But when I pinch to zoom out, the image moves to different x and y coordinates, and sometimes the image disappears. IThe image upon zoom out moves off-center and doesn´t return to position zero. I know there is something in the blitmask that changes these values, but I´m not sure what exactly is going wrong. I always use blitmask.update() and enable or disable bitmapMode. Does anyone have an example for Flash with pinch zoom gestures with ThrowProps + blitMask? Thanks.

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