Tween to frame label using "timeline time"

[Nickbee]

I'm trying to figure out how to use tweenlite to replace the code I use for animated buttons:

 

stop();
btn.buttonMode = true; 
btn.addEventListener(MouseEvent.MOUSE_OVER, onOver);
btn.addEventListener(MouseEvent.MOUSE_OUT, onOut);


var overBtn:Boolean = false;
function onOver(e:MouseEvent):void {
   overBtn = true;
}
function onOut(e:MouseEvent):void {
   overBtn = false;
}

addEventListener(Event.ENTER_FRAME, onEnter);

function onEnter (e:Event):void {
   if(overBtn){
       this.nextFrame();
   }else {
       this.prevFrame();
   }
}

 

I figured if I used the tween to a frame label to mimic this effect without having to use Event.ENTER_FRAME).

 

but.... from what I understand I have to enter a time for the tweening to a frame label. Is there a work around for this? I'd like it to tween to a frame label from what ever point it is in the MC timeline.

 

Thanks

[GreenSock]

Those are two very different questions.

 

First, to use TweenLite to do exactly the same thing as your existing code, you'd do:

 

stop();
TweenPlugin.activate([FramePlugin]); //just do this once to activate the "frame" feature in TweenLite.
btn.buttonMode = true;
btn.addEventListener(MouseEvent.ROLL_OVER, onOver);
btn.addEventListener(MouseEvent.ROLL_OUT, onOut);
var frameTween:TweenLite = new TweenLite(this, this.totalFrames, {frame:this.totalFrames, ease:Linear.easeNone, useFrames:true, paused:true});

function onOver(e:MouseEvent):void {
   frameTween.play();
}
function onOut(e:MouseEvent):void {
   frameTween.reverse();
}

 

However, if you want to tween to a particular frame label whenever the button is rolled over, it'd be as simple as this:

 

stop();
TweenPlugin.activate([FramePlugin]); //just do this once to activate the "frame" feature in TweenLite.
btn.buttonMode = true;
btn.addEventListener(MouseEvent.ROLL_OVER, onOver);

function onOver(e:MouseEvent):void {
   var endFrame:uint = getFrameLabelNumber("myLabel", this);
   TweenLite.to(this, Math.abs(endFrame - this.currentFrame), {frame:endFrame, ease:Linear.easeNone, useFrames:true});
}

function getFrameLabelNumber(label:String, mc:MovieClip):uint {
   var labels:Array = mc.currentLabels;
   var i:int = labels.length;
   while (i--) {
       if (labels[i].name == label) {
           return labels[i].frame;
       }
   }
   return mc.currentFrame;
}

 

Does that help?

[Nickbee]

Thanks a ton! The first example of your code is exactly what I was looking to accomplish. I think I have one error though. In my movieclip I have this code:

 

stop();
import com.greensock.*;
import com.greensock.plugins.*;
TweenPlugin.activate([FramePlugin]); //just do this once to activate the "frame" feature in TweenLite.

btn.buttonMode = true;
btn.addEventListener(MouseEvent.ROLL_OVER, onOver);
btn.addEventListener(MouseEvent.ROLL_OUT, onOut);
var frameTween:TweenLite = new TweenLite(this, this.totalFrames, {frame:this.totalFrames, ease:Linear.easeNone, useFrames:true, paused:true});

function onOver(e:MouseEvent):void {
   frameTween.play();
}
function onOut(e:MouseEvent):void {
   frameTween.reverse();
}

 

and I get this error when publishing...

 

1120: Access of undefined property Linear.

 

any ideas? THANKS AGAIN!

[GreenSock]

You forgot to import the easing class.

 

import com.greensock.easing.Linear;

 

or to import them all:

import com.greensock.easing.*;

[Nickbee]

worked like a champ. And things are much smoother then the original code. Here is the code in actions (each button animation)....

 

http://www.nickbee.com/XMLGallery