blank blank blank blank blank
blank       blank
blank  

.:|:. home .:|:. resources .:|:. links .:|:. contact .:|:.
  blank
blank       blank
blank
blank       blank
blank  
Controlling Button Animations



  • Although this code won't win you any menu awards for efficiency with it's duplicated buttons (as opposed to instanced) it is easy to do, self contained, stable, and fine for single buttons
  • The animations will start and stop smoothly on rollovers and mouse clicks
  • Don't make the click animation so long that it annoys your guests
  • Be sure to name all the clips, including clips the buttons might be in, all the way to the main stage
  • I find using at least 18 fps movie speed helps eliminate missed mouse events and the typically small animations still run smoothly on low powered machines
The Invisible Button
  • First create a button without visible graphics
  • Only the hit frame is defined with the shape you want the hit area to be
  • This buttons purpose is to serve as a "code container" and mouse over detector




Creation of the Animation and Initialization
  • Next create a movie clip to hold everything
  • Create code, animation, and button layers
  • In the first keyframe declare a stop and a variable for detecting button presses, shown here as "pressed10"




Timeline Traffic Controls
  • Frame 15 has a stop();
  • Frame 29 determines if the button was pressed




The End is Here
  • Frame 30 double-checks that the button was pressed, and if true, the getURL action is performed




The Brains
  • Click the dummy button on the stage to enter the code for controlling the clip
  • Since the code is in a button layer the mouse events can be used for control
    • on(rollOver)
    • The on(rollOver) code checks where the animation is and either starts the animation or resets it
    • on(rollOut)
    • The on(rollOut) code checks where the animation is relative to the center stop of the nimation and either moves the playhead to a similar location on the downside of the ani or if it is past the center the code lets it continue to play to the end
    • on(press)
    • The on(press) code sets the "pressdetect" variable to 1 (true) so at the end of the animation it goes to the specified URL
    • The rest of the code figures out where the animation is at and sends the animation to the right frame like the on(rollOut) code
  • In the Library, duplicate this template for each button in the menu and go into the clips to rename the variables ("pressdetect10" shown here) to a unique number
  • There's a lot more you can do with this method such as letting all the buttons on the main menu know what the status is of the other buttons, call other movies clips, etc...





Here's the code text, adjust the numbers as needed for your ani:

on (rollOver)
    {
    if (_currentframe < 15)
        {
        play ();
        }
    if (_currentframe > 15)
        {
        gotoAndPlay (_totalframes - (_currentframe));
        }
    }

on (rollOut)
    {
    if (_currentframe < 16)
        {
        gotoAndPlay (_totalframes - (_currentframe - 1));
        }
    else
        {
        play();
        }
    }

on (press)
    {
    pressed = 1;
    if (_currentframe < 15)
        {
        gotoAndPlay (_totalframes - (_currentframe - 1));
        }

    else
        {
        play();
        }
    }
  blank
blank       blank
blank
blank       blank
blank     blank
blank       blank
blank blank blank blank blank