A Flash Developer Resource Site

Results 1 to 12 of 12

Thread: Button - Roll Out - Reverse Animation

  1. #1
    Heaven is made
    of 1's and 0's
    Eyenovation's Avatar
    Join Date
    Feb 2001
    Location
    So. California
    Posts
    1,851
    I have tried looking at FLA and tutorials on this site, but have yet to find a simple answer. I am trying to build a button with a MC as a mouseover. Thats fairly simple. Here is my struggle -

    I am trying to find a way.. on MOUSE OUT, the movie clip retraces its steps and plays backwards. So - for example, the movie clip faded in.. it would now fade out, even if I went to another button.

    The effect I am looking for is sort of like a water drop.
    Meaning.. if you advance to another button, the button you were JUST over, is still playing backwards, while the next is playing forwards..

    Does this make any sense? I would be thankful for any advice. I will try to find a link or two to illustrate my point.

    Thanks to anyone..

  2. #2
    newayblue.com
    Join Date
    Jan 2002
    Location
    Leicester, UK
    Posts
    971
    I made a demo for this a while ago,

    what you do is create an MC, and make the animation for the forward and the backward, then have a layre with a button, make a different instance of the button in each frame (as in a keyframe in each frame) and add the scrip to the button relevant to each step of the animation

    eg... if you have 10 frames for the forward animation followed by 10 frames for the backward animation, in keyframe 1 you would this action on your button:

    Stop ();
    on (rollOver) {
    Play
    }

    in keyframe 2 your button would have this script:

    on (rollOut) {
    gotoAndPlay (18);
    }

    in keyframe 3 your button would have this script:

    on (rollOut) {
    gotoAndPlay (17);
    }

    etc.

    in keyframe 10 your button would have this script:


    Stop ();
    on (rollOut) {
    gotoAndPlay (11);
    }

    finally on keyframe 20 there would be an action to gotoAndStop (1);


    Do you understand what I am trying to say?
    if not let me know what you dont understand and I will try to put it more clear.

    good luck


  3. #3
    Heaven is made
    of 1's and 0's
    Eyenovation's Avatar
    Join Date
    Feb 2001
    Location
    So. California
    Posts
    1,851
    Originally posted by neway
    I made a demo for this a while ago,

    what you do is create an MC, and make the animation for the forward and the backward, then have a layre with a button, make a different instance of the button in each frame (as in a keyframe in each frame) and add the scrip to the button relevant to each step of the animation[/QUOTE]

    Okay - so an instance on EACH frame? ?? So if I had 20 frames, I would have 20 instances?

    eg... if you have 10 frames for the forward animation followed by 10 frames for the backward animation, in keyframe 1 you would this action on your button:
    Okay - then would the other instance be on frame 10 ??

    Do you understand what I am trying to say?
    if not let me know what you dont understand and I will try to put it more clear.
    So, (if I understand) for example - my footer - so I can have it play backwards once someone rolls out? But I would have to have the backwards animation AFTER the forwards ?? on the same Movie Clip? Is that right? What if somone mouses out BEFORE the forward movie clip is totally finished.. will the backwards play as if the forward did? For example - my footer.. make any sense?

  4. #4
    newayblue.com
    Join Date
    Jan 2002
    Location
    Leicester, UK
    Posts
    971
    Okay - so an instance on EACH frame? ?? So if I had 20 frames, I would have 20 instances?

    yes... its so you can assign a different action to the button in each frame, this can just be an invisible button.

    yep, I think you understood, try it out and email me the file if you have problems, then I will make the changes and explain to you,

    click neway on my banner to mail me direct.

    good luck.

  5. #5
    newayblue.com
    Join Date
    Jan 2002
    Location
    Leicester, UK
    Posts
    971
    send me your email and I will send you the demo that I did for someone else, it was for a slightly different thing but the same principal.

  6. #6
    Heaven is made
    of 1's and 0's
    Eyenovation's Avatar
    Join Date
    Feb 2001
    Location
    So. California
    Posts
    1,851
    Originally posted by neway
    send me your email and I will send you the demo that I did for someone else, it was for a slightly different thing but the same principal.
    My email is:

    chris@eyenovation.com

    Perhaps also, I can send you an FLA if I get stuck ??

  7. #7
    Heaven is made
    of 1's and 0's
    Eyenovation's Avatar
    Join Date
    Feb 2001
    Location
    So. California
    Posts
    1,851
    [b]YOU THE MAN! I FIGURED IT OUT!! THANKS BRO - !!!

  8. #8
    Heaven is made
    of 1's and 0's
    Eyenovation's Avatar
    Join Date
    Feb 2001
    Location
    So. California
    Posts
    1,851
    Come to think of it, I actually found a better way.
    Send me your email, I will send you the fla if you are interested.

  9. #9
    newayblue.com
    Join Date
    Jan 2002
    Location
    Leicester, UK
    Posts
    971
    ok, click neway on my banner and send me the .fla, would be interested in having a look.


  10. #10
    Heaven is made
    of 1's and 0's
    Eyenovation's Avatar
    Join Date
    Feb 2001
    Location
    So. California
    Posts
    1,851
    Actually have a look at the test site:

    http://www.eyenovation.com/beta/test.htm

    The ONLY problem is that they will get stuck from time to time.. On either way I try it. Does that happen from time to time?

  11. #11
    newayblue.com
    Join Date
    Jan 2002
    Location
    Leicester, UK
    Posts
    971
    If I had known that you wanted it to look like that, I have such an easy way of doing it, you just make a light grey box as a movie clip.
    assign this action to it:

    onClipEvent (load) {
    function follow (source, target, percent) {
    vector = (source-target);
    desp = vector*percent;
    return source-desp;
    }
    }
    onClipEvent (enterFrame) {
    this._alpha = follow (this._alpha, target, .1)
    }


    put it on your stage as alpha 0%, set the instance name as button 1 and assign this action to the button:

    _root.button1.target = 100

    change the .1 for the speed that it changes.


  12. #12
    Heaven is made
    of 1's and 0's
    Eyenovation's Avatar
    Join Date
    Feb 2001
    Location
    So. California
    Posts
    1,851
    OKay, I will try that.
    I actually did something like


    A tween from 1 - 10. On 10, there was a command

    saying if they mousedout along time ago - to continue playing. If not, wait until they did.

    I guess I did it backwards

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center