[How to change flip to mouseover effect]

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;

}

}