Tween Limitation - Sort Of?

[ctaminian]

Hey guys, can anyone please help me with my problem? I am at the point of pulling my hair out, so please someone out there spare me!!!

 

I have an image that is bigger than the stage which contains many thumbnails...I use TweenLite (props to you) for doing a panning effect...everything works like a charm...

 

My problem is that I don't want the image to pan directly to my x,y destination, I want it to move to about a quarter of the total distance....

 

Here is the link of what i'm talking about...

 

http://

http://www.prada.com/pradabook/

 

Once you click on a thumbnail and it zooms, move the mouse left or right and notice that it only moves a certain distance...it doesn't move to the mouse pointer exactly, is just moves a fraction of the distance....THIS IS WERE I'M HAVING PROBLEMS!!! How is this done???

 

I use the following code to pan the image...

 

var stageWidthB = Stage.width;
var imageWidthB = mc2._width;
var outSideStageXB = imageWidthB - stageWidthB;
var calculationXB = stageWidthB / outSideStageXB;
var moveToPositionXB;

var stageHeightB = Stage.height;
var imageHeightB = mc2._height;
var outSideStageYB = imageHeightB - stageHeightB;
var calculationYB = stageHeightB / outSideStageYB;
var moveToPositionYB;

mc2.onEnterFrame = function()
{
moveToPositionXB = Math.floor(_xmouse / calculationXB);
moveToPositionYB = Math.floor(_ymouse / calculationYB);
TweenLite.to(mc2,80,{_x:-moveToPositionXB, _y:-moveToPositionYB});
};

 

mc2 is the name of the movie that holds all the images...

 

Please guys, any help would be much appreciated!!!

[Zync]

This effect is not really a Tween related problem specifically, more Math related. Sound like you want the billboard (thats what I'm gonna your mc2) to move a proportional amount based on where the mouse is relative to the stage height and width. Kind of like an inverse parallax effect with only 1 layer. So lets use some arbitary numbers.

 

Lets assume that your billboard has its registration point in the uppleft corner, is on the stage posited at the upper left and is

1000x1000

 

And lets assume your stage size is:

500x500

 

And lets work with the X axis to begin with.

If your mouse is all the way to the left of the stage, so 0 on the x axis, then your billboard clip's .x should be set to 0.

If your mouse is all the way to the right of the stage, so stage.stageWidth then your billboard clip's .x should be -500.

 

Now we need to find a ratio formula to solve this. I'd probably go with:

var xRatio:Number = ((stage.stageWidth - mc2.width) / stage.stageWidth);
var xTweenAmount:Number = stage.mouseX * xRatio;

 

The y axis will be similar.

 

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);

function mouseMove(e:MouseEvent):void 
	{
		var xRatio:Number = ((stage.stageWidth - mcBox.width) / stage.stageWidth);
		var xTweenAmount:Number = mouseX * xRatio;

		var yRatio:Number = ((stage.stageHeight - mcBox.height) / stage.stageHeight);
		var yTweenAmount:Number = mouseY * yRatio;

		mcBox.x = xTweenAmount;
		mcBox.y = yTweenAmount;
	}

[ctaminian]

Hey Zync...

 

Thank you very much for your reply...I greatly appreciate it!!!

 

I adapted the code you gave me and used TweenLite to get more control over the tween and duration instead of assigning the x and y on mouse move / enter frame...

 

It pretty much works great!! The problem is that it only stops when it reaches the mouse pointer!!!

 

I am trying to make the image (mc2 or mcBox) to follow the mouse smoothly but only move a certain distance...

 

So if my mouse pointer is moved all the way to the right corner, my image moves in that direction but not to the mouse pointer, instead to a distance lets say half way or a quarter of the way!

 

Heres the code you gave me which i converted to as2...

 

I know my question is not tween related as you mentioned...and I understand if you don't post a reply again...but oh well, i'm stuck so its worth a shot!!! Thanks again bro!

 

var xRatio = 0;
var yRatio = 0;

var xTweenAmount = 0;
var yTweenAmount = 0;


mc2.onEnterFrame = function()
{
mc2.onMouseMove = function()
{

	xRatio = ((Stage.width - mc2._width) / Stage.width);
	xTweenAmount = _xmouse * xRatio;

	yRatio = ((Stage.height - mc2._height) / Stage.height);
	yTweenAmount = _ymouse * yRatio;

	TweenLite.to(mc2,5,{_x:xTweenAmount, _y:yTweenAmount});
};
};