Results 1 to 5 of 5

Thread: Reversing Animation Using A Function

  1. #1
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Reversing Animation Using A Function

    Hi all,

    I have an mc which when rollOver plays an animation (works like a button), on rollOut I want the animation to play in reverse... I have seen it done before using a fucntion, but can't seem to get it to work... If I just reverse all the frames and get it to play that on rollOut it doesn't work properly...

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    I saw these on the Flash Groups forum a long time ago and have saved it as it comes in handy.

    I'm posting the whole lot as it might be of use to someone who is searching for a similar effect.

    Code:
    //will stop 'play', 'gotoAndPlay' and 'rewind', 'gotoAndRewind' functions
    MovieClip.prototype.stopAll = function () {
            delete this.onEnterFrame;
            this.stop();
    }
    
    //will stop 'rewind', 'gotoAndRewind' functions
    MovieClip.prototype.stopRewind = function () {
            delete this.onEnterFrame;
    }
    
    //will play the timeline backwards and continal to loop until 'stopAll', 'stopRewind' or 'pause' are called
    //note: the 'rewind' function will cancel the 'play' function BUT the 'play' function will not cancel the 'rewind' function
    //you must call 'stopAll' or 'stopRewind' before using 'play' when your timeline is playing backwards
    MovieClip.prototype.rewind = function () {
            this.stop();
            this.onEnterFrame = function () {
                    if (this._currentframe > 0) {
                            this.prevFrame ();
                    } else {
                            this.gotoAndStop (this._totalframes);
                    }
            }
    }
    
    //will goto the specified frame and play the timeline backwards and continal to loop until 'stopAll', 'stopRewind' or 'pause' are called
    MovieClip.prototype.gotoAndRewind = function (frame) {
            this.gotoAndStop (frame);
            this.rewind();
    }
    
    //will pause the timeline for the specified amount of time. will always play forwards when the pause has finished
    MovieClip.prototype.pause = function (time) {
            delete this.onEnterFrame;
            secondsToPause = time;
            pauseInt = setInterval (this, "restart", secondsToPause * 1000);
    }
    
    restart = function () {
            clearInterval (pauseInt);
            play();
    }
    Sample Below:
    Attachment 858
    Last edited by Medyman; 03-11-2007 at 10:30 PM. Reason: Added Sample

  3. #3
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Medyman looks like exactly what I need, but the code is a bit over my head, not sure what bit's to use... Any ideas?

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Have you taken a look at the sample file?
    That might give you more insight.

    I'll walk you through what was done in the sample file:

    consider: a simple buttons which controls the direction that the timeline plays. (This can of course be changed to onRollOver/Out as you wish).

    So the timeline contains 3 layers:
    Layer 3: Animation
    Layer 2: Button
    Layer 1: Actions (Locked)

    On the button, you'll start out with this basic AS:
    Code:
    on(release)
    {
            play();
    }

    Then copy and paste the entire code snippet I've posted in the 1st frame of your actions layer.

    Also include this on the same frame:
    var direction = "fw";
    stop();
    Then just attach the following code to your button, and you're good to go:
    on(release)
    {
    if(direction=="fw")
    {
    stopAll();
    play();
    direction = "bk";
    }
    else
    {
    rewind();
    direction = "fw";
    }
    }

  5. #5
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Just be careful not to mix this with too many MCs.

    I LOVE the _prototype functionality, but it will effect EVERY instance of said MCs, meaning if you have 4 buttons and you only want 2 to have rewind capabilities, you will need to either set up a second prototype function, or define the differences on the buttons you don't want to use the functions.

    Think of it as a htaccess on a folder, it effects everything in that folder, and every sub folder inside. You will have to specifically write another htaccess telling the subfolder to basically ignore the first one.

    For a Flash example take a look at this:

    Code:
    game.TileClass = function () {};
    game.TileClass.prototype.walkable=false;
    game.TileClass.prototype.frame=2
    Here I am telling my game that every tile within the game.TileClass group that it should show frame 2 of the title MC AND that it is NOT walkable.

    But, what fun would a game be where every tile looked the same and you couldn't walk around?

    Instead of making 4 million MCs with tiles, this one walkable, this one not, this one grass, this one dirt.. I just change the prototype functionality like so:

    Code:
    game.Tile0.prototype.__proto__ = game.TileClass.prototype;
    game.Tile0.prototype.walkable=true; 
    game.Tile0.prototype.frame=1;
    Now, when ever I want frame 1 of the MC to appear on my map, I put a "0" there, this tile will show frame 1 of the tile MC and it will be walkable.

    Much easier to define the differences than to code for each tile
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

Bookmarks

Posting Permissions

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