I'm still very new to flash and greensock. I came across this 3d flip effect with front content and back content.
What I wish to achieve is:
(1) few images with contents at the back
(2) mouseover effect rather than clicking to flip the object/image
(3) object will flip back to the original state on mouse leave rather than sticking with back content.
AND I have tried creating the 2nd object/image, but whenever I click on any of the object, they got affected and flipped together.
Truly have no idea how to edit and fix it.
Your helps are much appreciated!!
import com.greensock.TimelineLite;
import com.greensock.TweenLite;
import com.greensock.easing.*;
flip1.z = 30;
flip1.getChildAt(0).visible = false;
flip1.getChildAt(0).rotationY = 180;
flip1.addEventListener(MouseEvent.MOUSE_DOWN,cardDown);
flip2.z = 30;
flip2.getChildAt(0).visible = false;
flip2.getChildAt(0).rotationY = 180;
flip2.addEventListener(MouseEvent.MOUSE_DOWN,cardDown);
function cardDown(e){
flipSelf(e.currentTarget);
}
function flipSelf(self){
var toRot;
if(self.rotationY > 89){
toRot = 0;
}else{
toRot = 180;
}
var timeline = new TimelineLite();
timeline.insert(TweenLite.to(self,0.5,{z:30,ease:Back.easeOut }));
timeline.insert(TweenLite.to(self,1.5,{rotationY:toRot,ease:Strong.easeInOut,onUpdate:setFlipSide, onUpdateParams:[self] }));
timeline.insert(TweenLite.to(self,0.5,{z:30,ease:Back.easeIn }),0.75);
}
function setFlipSide(self){
if(self.rotationY > 89){
flip1.getChildAt(1).visible = false;
flip1.getChildAt(0).visible = true;
}else{
flip1.getChildAt(0).visible = false;
flip1.getChildAt(1).visible = true;
}
if(self.rotationY > 89){
flip2.getChildAt(1).visible = false;
flip2.getChildAt(0).visible = true;
}else{
flip2.getChildAt(0).visible = false;
flip2.getChildAt(1).visible = true;
}
}