ThrowProps and stopping at a target position

[winged_eel]

Hello there

 

It would be fantastic if you can help me with my problem.

 

I have a Menu movieclip containing a number of Menu Item movieclips and I am doing the vertical scrolling action using ThrowProps and BlitMask (thank you so much for this code - it is great!). Only some of the Menu Items are interactive/highlighted so as the scrolling halts we need to stop on the nearest highlighted Menu Item and this Menu Item needs to be positioned in the centre of the screen.

 

Have you any suggestions about how this could be achieved?

 

I imagine I would need to decide on the target position as the ThrowProps tween comes to its end, rather than specifying the target position when I make the ThrowProps call. So as the scrolling slows down, I would look for the nearest 'active' Menu Item and then send this target position to ThrowProps to complete the tween.

 

Can this be done?

 

Thanks

[GreenSock]

The appropriate way to approach this would be to immediately figure out where the throwProps tween would land and then if it lands where you DON'T want it to land (on a non-interactive spot), set the min and max values to be the closest interactive spot. This is much better than trying to constantly watch the tween and see if the value is approaching a non-interactive spot and trying to spawn another tween or adjust the current one on-the-fly because doing so would degrade performance. The nice thing about ThrowPropsPlugin is that it gives you tools to figure that stuff out right away. There are static "calculateTweenDuration()" and "calculateChange()" methods to assist you.

 

For example, let's say you throw the mc at a velocity of 500 and an ease of Strong.easeOut - you can figure out precisely where that will land. With that knowledge, you can decide if it needs adjusting even before you create the tween. If it does need adjusting, go right ahead and tweak the numbers that you feed into the ThrowPropsPlugin tween. Like if it's going to land at y:400 but that's a non-interactive spot and the closest interactive spot is at 430, then you'd set your min and max values to 430, effectively telling ThrowPropsPlugin that it must land EXACTLY on 430. Consequently, it will smoothly glide into place and it will look like it was designed that way from the get-go. No jerky movements. No complex ENTER_FRAME logic. No need to update the tween on-the-fly.

 

Here's some sample code that you'd have in your mouseUpHandler():

 

function mouseUpHandler(event:MouseEvent):void {
  mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
  var time:Number = (getTimer() - t2) / 1000;
  var yVelocity:Number = (mc.y - y2) / time;

  var max:Number = 500; //whatever your maximum y value should be normally
  var min:Number = 0; //whatever your minimum y value should be normally
  //calculate the duration so that we can plug it into the calculateChange() method to find out where exactly the "y" value will end up if we don't apply any limits (max/min)
  var duration:Number = ThrowPropsPlugin.calculateTweenDuration(mc, {throwProps:{rotation:rVelocity, resistance:resistance}, ease:Strong.easeOut}, 10, 0.25, 2);
  //figure out where it'll land normally
  var landingValue:Number = mc.y + ThrowPropsPlugin.calculateChange(yVelocity, Strong.easeOut, duration);

  //IMPORTANT: this is where you'd run your conditional logic. If "y" lands on a non-interactive spot, adjust it here accordingly by setting the min and max values to EXACTLY where you want it to land.
  if ( /* YOUR LOGIC HERE */ ) {
   //if landingValue is on a non-interactive spot, set the min and max values to be the closest interactive spot. 
	min = max = myInteractiveSpot.y;
}

  ThrowPropsPlugin.to(mc, {throwProps:{
							 y:{velocity:yVelocity, max:max, min:min, resistance:300}
						 }, onUpdate:blitMask.update, ease:Strong.easeOut
						}, 10, 0.3, 1);
}

 

By the way, there was a similar post about rotation values which pose their own challenges, but the concept is similar:

viewtopic.php?f=1&t=5940&p=22812p22812

 

Does that help?

[winged_eel]

Hello

 

I just want to say 'thank you'. Your code and quick reply has helped me immensely. Cheers!

[winged_eel]

Hello

 

It seems I'm not quite finished with this one...

 

Attached is a sample fla of how I've coded the above functionality. You'll see that when you scroll the menu, using ThrowProps, the menu will only stop at one of the 'special' menu items- the items that are light grey. It generally works great so thanks for the help.

 

One thing though, I've noticed that the menu gets 'jerky' after a while. A few times I've noticed that rather than the menu glide to its destination it sort of jumps to its destination position.

 

I've not managed to replicate it unfortunately but I wondered if you could look at my code and see if there's way I could optimise.

 

Thanks

 

[File deleted because it contained members-only plugins and classes]

[GreenSock]

I noticed a few problems with your code. The most important one was that you neglected to include y:yVelocity in the calculateTweenDuration() call. It had absolutely no properties that it could base its calculation on. Your frame rate was SUPER low too (12fps). I tweaked a few things and attached a version that seems to work well. I removed the GreenSock class files because those are for members only

[winged_eel]

Hey, thanks, I'll give that a go. I really appreciate your quick response.

 

There is a next stage to this code. When the user scrolls the menu the position of that scroll needs to be sent to another scrolling menu.

 

Please set attached swf (I've just added a very basic, dummy version of this second menu).

 

So for example, when the user scrolls from item 4 to item 7 on the 'main' menu, this is replicated on the 'small' menu by the arrow tweening from 4 to 7.

 

Have you any suggestions how I go about this?

 

Cheers

[winged_eel]

Also, what would you say was an optimal frame rate?

[GreenSock]

Have you any suggestions how I go about this?

There are many ways and unfortunately I don't have time to dig into that deeply, but one idea off the top of my head is to use an onUpdate in your ThrowProps tween to update the other menu accordingly by simply using math to figure out where it should be positioned based on the current position of the main menu (the one that is being throwProp-ed).

 

Also, what would you say was an optimal frame rate?

Depends on your objectives, but if you want the smoothest animation then 60fps is probably as good as you'll get. 30fps is acceptable too and doesn't require as much CPU usage. 12fps is way to low for most things.