Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
einnellee

How to change flip to mouseover effect

Recommended Posts

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;
}
}
 
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Our Flash / ActionScript support is extremely limited these days. We mainly focus on addressing bugs if they come up (we don't know of any right now). We just don't have the resources to help a lot with elaborate effects and such.

 

This tutorial has some source files you can use: http://www.snorkl.tv/2010/12/easy-breezy-3d-card-flip-effect-with-flash-as3-and-our-good-buddy-timelinemax/

The syntax is a little out-dated but will probably still work. It's a decent starting point.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×