Big Bad Roo

Thanks Carl - that helped immensely.

OK - I've just become a Business Green member. Thanks mate. Re the flick code and buttons, I've ALMOST nailed it I think. I just need a little advice for a final bit of code - where to put... blitMask.bitmapMode = false; ...so that it triggers false AFTER the tween has finished. It's so the bitmapMode = false while the clip is resting ie buttons can be clicked. Then my code checks for a drag of over 20 pixels before bitmapMode = true. Can you please help out there Carl? Cheers mate

Cheers Carl I JUST got it working. I have an instance of a movieclip called _home that I place the clip to be scrolled into, so I had to code: yOffset = _home.mouseY - mc.y; ...instead of the default... yOffset = this.mouseY - mc.y; (and had to do the same elsewhere in the code). So now - couple of questions if you are able to please take a look...? 1. Should I also be placing the blitmask inside the _home clip? I thought no since it's not being added using addChild anyway. 2. Is there already a way to allow buttons within a clip within a blitmask to be clicked? I experimented with MyEmpty's non-blitmask way, but am wondering if Greensock already has a way before I spend too much more time playing around with blitMask.bitmapMode = false; and testing to see if it's a button click or scroll flick based on drag distance. Thanks mate

Thanks Jamie - that made it appear. It's only scrolling a miniscule amount and there's no apparent flick action. Anyone out there want a couple hours work helping me to get this up and running? I'll pay via Paypal. What I need - - scrolling for an AIR project for iOS and Android!!! - blitmask running, as some elements to scroll are quite long - advice as to how to keep buttons within the scrolling mc still clickable Please PM me if anyone is interested. Cheers

Thanks Carl I'm not after the scrollbar versions, just the vertical flick type scrolling, so ThrowProps looks the go. I have been having a play with the demo code on the ThrowProps page, and can get it to work when I copy it verbatim into a frame in Flash Pro. I then tried to set it up as a document class so I could practice incorporating it into my classes, but nothing displays. If I get rid of the BlitMask it works. If possible, would you mind taking a look to see if something obvious is tripping me up? Thanks again mate. If I can get this to cater for my project's scrolling needs, I'll happily become a corporate member. package { import flash.display.MovieClip; 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]); public class ScrollTestDelete extends MovieClip { var bounds:Rectangle = new Rectangle(30, 30, 250, 230); var mc:Sprite = new Sprite(); 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; public function ScrollTestDelete() { // constructor code init(); } public function init():void { addChild(mc); setupTextField(mc, bounds); 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; }; } }

Gidday Jack I'm using Flash Pro and AIR to create a native mobile app for iOS and Android, and have JUST realised that scrolling doesn't happen automatically - you have to program that little devil. What of your products would I need to do this? ThrowProps? And what else? Do you have any as3 coding examples that can get me up and running with vertically scrolling lists that contain text and images? Thanks for your time and help.

Thanks so much Carl - that solved the problems beautifully. I appreciate your help. Shaun

Hi Jack I'm using TweenMax to fade out a sound channel when a user hits a stop button: TweenMax.to(soundChannelBG, 1, {volume:0}); I was wondering how to tell Flash to soundChannelBG.stop(); once the fadeout tween is complete, rather than just turning the volume to zero? Thanks for your time and help. Shaun Thomson

Gidday Jack I have some Flash transitions I'm applying to full screen size bitmaps and swfs that are loaded into a container clip. They work ok, but I was wondering if there are any Greensock versions I could check out? The equivalent of things like Blinds, Wipe, Rotate, Iris etc, or something a but fancier? Cheers Shaun

Gidday I have written code for making a movieclip rotate, and slow down it's rotation to a stop over time. At certain points in the slowing, a different sound is played. My way is a little flimsy. I was wondering if greensock had something specific for controlling rotation like this? Cheers Shaun

Hi I'm currently using a global var to populate the easing parameter in a tween, and it works fine: globals.data.easesetting = Bounce.easeOut; and in the tween: ease:globals.data.easesetting, I'm wondering how to do it with a regular var? If I create a var: var easesetting = "Bounce.easeOut"; and then in the tween: ease:easesetting, - it doesn't work. I'm guessing I'm creating incorrect syntax somewhere, but where? Thanks Shaun

Thanks for that. That's a cool new thing to learn. I'd also forgotten to put stop(); at the end of my frame code, so it was playing to the "end up" frame regardless.

Hi I have an onComplete:gotoAndPlay("frame_label"); type statement in my tween. I notice that it's playing the frame before the tween has finished. I tested it by making it a really long tween time, and then putting onComplete:trace("finished");, and it displays "finished" as so as the tween starts. Is there a fundamental I'm not understanding? Also, another question - where do I find a list of all the ease functions available, and is there one called None? I know I could just leave the ease out of the tween, but I'm relying on varaiables to control my eases, and one of the vars is "None". Thanks again for your help. Shaun

Hi I'm going to try replacing the flash engine with Greensock, but am wondering if I need TweenLite or TweenMax to deal with the following that I have in my tweens: transitions transitions.easing transitions.TweenEvent TweenEvent.MOTION_FINISH I have an event listener that triggers a functions when the tween has finished. Also, regarding the data size of each engine, how big is Max compared to Lite? Does the Flash engine also add size (IOW, do Lite and Max have smaller data sizes than the Flash engine, therefore making projects that use them smaller in size? Thanks for your time and help. Shaun Thomson

Hi I'm a Greensock newb. I'm in the process of converting my motion tweens in CS4 to Tweenlite code I have a button I made in Flash CS4, and it originally had a motion tween based animated over state (the button expands and then displays text). THE PROBLEM: When I replaced the motiontween with Tweenlite code, the buttonjust jumps to the bigger size, there is no animation regardless of the time I put in (currently 3 secs). A CLUE: This button actually appears inside a box that when a user clicks a button, alpha appears and expands (using Tweenlite). This box takes 1.5 seconds to do it's thing before the button appears. I notice that aif I click the problematic button anywhere up to 3 seconds after the main box starts to appear, the button animation works, displaying what's left of the animation. However, after that three seconds is up, if I mouse off the button (making the enlarged text box disappear), all future mouse overs expand the button but without the animation. Am I overlooking something basic when working with tweens inside other tweens? Cheers Shaun Thomson