• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

How To: animate in/out for the duration of rollover

Explorer ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

I have a project that requires a rollover. When the object is rolled over, a quote animates (fades in). On roll out, it fades out. The easy way would be to do it on the timeline, but if the roll over isn't long enough for the animation (fade in) the roll out starts at 100% alpha then down to 0%. I need a smooth transition if someone rolls out before I expect them to.

I've asked this question on another forum, and some very nice person took my file and wrote around 100 lines of code, but I don't understand how to expand the animation for 3 more quotes. Please help me. If you don't have time to look at the file, any tutorials that you know of would be appreciated.

to download the fla visit http://board.flashkit.com/board/showthread.php?t=795552

Thanks in advance

TOPICS
ActionScript

Views

1.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

what was the code?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

stop();

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;
import flash.utils.*;


var adjustFade:Tween;
var adjustSizeX:Tween;
var adjustSizeY:Tween;
var adjustPosX:Tween;
var adjustPosY:Tween;
var aniSeconds:Number = 1;
var obj:Object;
var id:Number;

//Stored the start and stop position for all quote objects
/*********************************************************************************
Understanding the object array, it is a multidimensional array and is built as such
[[[272,150],[67,199]]]
[ [[start x, start y],[end x, end y]] , [[start x, start y],[end x, end y]] ]
***********************************************************************************/
var objArr:Array = [[[272,150],[67,199]]];

quote1.buttonMode = true;
quote1.addEventListener(MouseEvent.ROLL_OVER, overHandler);
quote1.addEventListener(MouseEvent.ROLL_OUT, outHandler);

/*********************************************************************************************************
NOTE: To add more quotes, just duplicate the lines above for each one, no need to do anything else
except ensure that the name of the objects are 'quote' followed by a number and add the starting x and y
and ending x and y in the objArr above
**********************************************************************************************************/

function overHandler(event:MouseEvent) {
    getObj(event.currentTarget.name);
}

function outHandler(event:MouseEvent) {
    animateObj(false);
}

function getObj(objClass:String):void
{
    //Put the object on the stage and properly set it prior to animation
    var TempClass:Class = getDefinitionByName(objClass) as Class;
    var tempObj = new TempClass();
   
    //Make sure they didn't roll over the same object, if so delete the obj before building a new one
    if(tempObj != obj)
    {
        if(obj != null)
        {
            try
            {
                this.removeChild(DisplayObject(obj));
            }catch(E:Error){}
        }
       
        obj = tempObj;
       
        //Extracted the associated number that references the array
        id = objClass.substring(5, objClass.length) as Number;
       
        //Adjust its size and position
        obj.alpha = 0;
        obj.scaleX = .18;
        obj.scaleY = .18;
        obj.x = objArr[id][0][0];
        obj.y = objArr[id][0][1];
        obj.id = id;
       
        this.addChild(DisplayObject(obj));
    }
       
    //Now its on the stage, go ahead and animate it
    animateObj(true);
}

function animateObj(b:Boolean):void
{
    try
    {
        adjustFade.stop();
        adjustSizeX.stop();
        adjustSizeY.stop();
    }
    catch(e:Error){}
       
    if(b)
    {
        //Assign a new tween to this object and continue
        adjustFade = new Tween(obj, "alpha", None.easeNone, obj.alpha, 1, aniSeconds, true);
        adjustSizeX = new Tween(obj, "scaleX", None.easeNone, obj.scaleX, 1, aniSeconds, true);
        adjustSizeY = new Tween(obj, "scaleY", None.easeNone, obj.scaleY, 1, aniSeconds, true);
        adjustPosX = new Tween(obj, "x", None.easeNone, obj.x, objArr[obj.id][1][0], aniSeconds, true);
        adjustPosY = new Tween(obj, "y", None.easeNone, obj.y, objArr[obj.id][1][1], aniSeconds, true);
    }
    else
    {
        //Assign a new tween to this object and continue
        adjustFade = new Tween(obj, "alpha", None.easeNone, obj.alpha, 0, aniSeconds, true);
        adjustSizeX = new Tween(obj, "scaleX", None.easeNone, obj.scaleX, 0.18, aniSeconds, true);
        adjustSizeY = new Tween(obj, "scaleY", None.easeNone, obj.scaleY, 0.18, aniSeconds, true);
        adjustPosX = new Tween(obj, "x", None.easeNone, obj.x, objArr[obj.id][0][0], aniSeconds, true);
        adjustPosY = new Tween(obj, "y", None.easeNone, obj.y, objArr[obj.id][0][1], aniSeconds, true);
        adjustFade.addEventListener(TweenEvent.MOTION_FINISH, transComplete);
    }
}

function transComplete(te:TweenEvent):void
{
    adjustFade.removeEventListener(TweenEvent.MOTION_FINISH, transComplete);
    this.removeChild(DisplayObject(obj));
}

this is the codes specifically for the fade in/out

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

Deleted repeated post.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

Deleted repeated post.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

Hahaha! That guy done everything from code that was not at all required in your case.

The only change you need in your fla is in the function "outHandler" that to a single line

I am pasting it here use it in your original fla.

I am getting an error while attaching the file so pasting the code below.

function outHandler(event:MouseEvent)

{

//calculate from where to play
var temp:Number = ((event.target as MovieClip).totalFrames - (event.target as MovieClip).currentFrame);
  event.target.gotoAndPlay(temp);

}

You should have the same no of frames for fade in and fade out animation for this code to work.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

lol.  ok.  i can beat that.  but to do it right in as3 is still a load of code.  (and i can't believe people have disagreed with me about how it doens't take much more code to program in as3 compared with as2.)

import fl.transitions.Tween;

import fl.transitions.TweenEvent;

import fl.transitions.easing.*;

var tweenA:Array = [];

var tween:Tween;

var btnA:Array = [btn1,btn2,...];  // <- list your button references.  use movieclip buttons

var textA:Array = ["text that should fade in when btn1 is rolled over", "text for btn2","for btn3", etc];

for(var i:uint=0;i<btnA.length;i++){

btnA.addEventListener(MouseEvent.MOUSE_OVER,overF);

btnA.addEventListener(MouseEvent.MOUSE_OUT,outF);

btnA.ivar = i;

btnA.buttonMode = true;

}

function overF(e:MouseEvent){

var tf:TextField  = new TextField();

tf.text = textA[e.currentTarget.ivar];

tf.alpha = 0;

e.currentTarget.addChild(tf);

tf.y = -20; // adjust this to your needs

clearTweensF();

tween = new Tween(tf,"alpha",None.easeNone,tf.alpha,1,1,true);

tweenA.push([e.currentTarget,tween]);

}

function outF(e:MouseEvent){

tween.stop();

tween = new Tween(e.currentTarget.tf,"alpha",None.easeNone,tf.alpha,0,true);

tweenA.push([null,tween]);

}

function clearTweensF(){

for(i=0;i<tweenA.length;i++){

if(tweenA[0]!=null){

var tf:TextField = TextField(tweenA[0].tf);

tweenA[0].removeChild(tweenA[0].tf);

tf=null;

}

tweenA[1].stop();

tweenA[1] = null;

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

SwapnilVJ and kglad

You guys are really great for looking at my problem and helping me. However, I don't completely understand what either one of you are saying. I'm new to any kind of flash development, and relatively new to flash (animating for about a year). Could you speak down to me a little to help me understand how to make it work?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

copy that code and paste it into a fla.  add your buttons on stage or with code.

list your button references in btnA and list the corresponding text in textA.

test.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

Thanks for your help guys. I had a friend tell me about caurina Tweener. My code went from all that above to:

import caurina.transitions.Tweener;

quoteBtn1.addEventListener(MouseEvent.ROLL_OVER, overHandler);
quoteBtn1.addEventListener(MouseEvent.ROLL_OUT, outHandler);
quoteBtn1.someTweenRef = quote1;

quoteBtn2.addEventListener(MouseEvent.ROLL_OVER, overHandler);
quoteBtn2.addEventListener(MouseEvent.ROLL_OUT, outHandler);
quoteBtn2.someTweenRef = quote2;

quoteBtn3.addEventListener(MouseEvent.ROLL_OVER, overHandler);
quoteBtn3.addEventListener(MouseEvent.ROLL_OUT, outHandler);
quoteBtn3.someTweenRef = quote3;

quoteBtn4.addEventListener(MouseEvent.ROLL_OVER, overHandler);
quoteBtn4.addEventListener(MouseEvent.ROLL_OUT, outHandler);
quoteBtn4.someTweenRef = quote4;

function overHandler(e:MouseEvent):void
{
    Tweener.addTween(e.target.someTweenRef,{alpha:1, scaleX:2, scaleY:2, time:0.4 });
}
function outHandler(e:MouseEvent):void
{
    Tweener.addTween(e.target.someTweenRef,{alpha:0, scaleX:1, scaleY:1, time:0.4 });
}

to handle 4 rollovers with animations

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 21, 2009 May 21, 2009

Copy link to clipboard

Copied

LATEST

you're welcome.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines