Hi,
I have a card game which currently handles the cards dragging by simply editing the rotationX and rotationY depending on the mouse movement direction. Then in the onEnter loop I "force" the rotationX and rotationY to move towards 0 by slightly increasing/decreasing their value on each frame. This results in a quite poor 3D effect movement since the transition isn't smooth enough, plus it doesn't feel like a 3D transition (since it's obviously only 2D). We are using plain Flash for this, so no CSS or JS can be involved, we only use GSAP tweens. Our aim, is to create something like hearthstone achieved, a very smooth movement which depends on the position of the mouse-center of the card, as implemented here by @dstnation.
We do handle the smooth transition of the card from its position to the mouse cursor by using just one line of code on the 'onEnter' function, basically:
protected function onEnterFrame(e:Event):void
{
if(mMouseTarget && mMouseDown)
{
//Handle the position of the card 'x' and 'y'
TweenLite.to(this, 0.2, {x:mMouseTarget.x, y:mMouseTarget.y});
}
}
mMouseTarget's position is filled on the onMouseDown, along with the mMouseDown variable.
We are nevertheless, having a hard time trying to figure out how to do something similar with the rotationX, rotationY and (perhaps?) skewX/skewY to achieve a 3D effect? Does anyone have any idea on what could we try?
Thanks beforehand