Seamless / Smooth Rollover Effect


Complex buttons and rollover effects are a staple of any media-rich content site.  In this tutorial I will cover a basic example of a smooth and seamless roll-over effect.

 

Here's the final result.


 

 

When rolling over the above button, at a rapid pace, the animation is seamless at no matter what point you roll in or out.  This is actually quite a simple effect to implement, with very little actionscript needed to get it rolling. 

Here are the steps how:

  1. Create a new AS3 Flash Document.
  2. Set the document size so you have some reasonable space to work (Mine’s 550px x 370px).
  3. Find a nice background image if you’d like, or you can just set the back to a solid color using the bucket tool in Flash.
  4. Once the background is set, Insert a new layer up on the top; and label it as so:Where the background layer contains either the background image or a solid color. The button layer is where we’ll add the interactive piece!
  5. Go ahead and create a new movieclip (Hotkey is Ctrl+F8 for PC, Cmd+F8 for Mac), and name it “button”.
  6. Double-click the button class in the library to open up editing mode, and then draw a nice rounded rectangle using the Rectangle Tool (R) on Frame 1 of Layer 1, where your rounded-end setting is 9.00, line stroke is 8.00, width is 200, and height is 70.  Set the border to a lighter color, and define the inside rectangle color as a two-tone gradient spread across horizontally.
  7. Once you have this bordered rectangle drawn in frame 1 of your “button” layer, head up to the frame listing and insert new keyframe at frame 15 (Press F6).
  8. The rectangle housed on frame 15 should be updated with our new, final state colors. For mine, I set the border to be black, and the inner rectangle to be the exact same color as what the border was in frame 1.  This will really bring out a nice contrast when we tween between the two frames.
    This is what my transitional rectangle looks like on frame 15 for reference.
  9. Now for some copy-paste! Select, on the button layer, frames 1-15 using shift-select. Right Click -> “Copy Frames”.  Then click on frame 16, Right Click -> “Paste Frames”. Then, select frames 16-30, Right Click ->”Reverse Frames”.  We should now have a contiguous block of frames from 1-30, where 16-30 are the exact same as 1-15, only in reverse order.
  10. Select all thirty frames using a shift select, and then Right Click->”Create Shape Tween”.  All the frames should now be tinged green and have arrows drawn between the 4 keyframes! As shown below:
  11. We need to set some pause states for this button.  Select frame 1, Right Click->”Actions” and paste in the following line:

    stop();

  12. Write the exact same line of code on Frame 15 as well.
  13. On frame 30, instead write the line:

    gotoAndStop(1);

  14. We’re now done working on the inside of the Button class! So, click on the breadcrumb labeled “Scene 1″ to enter our main file again, and then Drag and drop an instance of the button class onto the stage, and label this instance as “button1″, as shown in the image.
  15. On the Layer 1, Frame 1 Actions panel, insert this chunk of code:

    button1.addEventListener(MouseEvent.ROLL_OVER,r_ov);
    button1.addEventListener(MouseEvent.ROLL_OUT,r_ou);function r_ov(e:MouseEvent):void {
    if(button1.currentFrame == 1){
    button1.gotoAndPlay(1);
    }
    else{
    button1.gotoAndPlay(30 - button1.currentFrame);
    }
    } 

    function r_ou(e:MouseEvent):void {
    button1.gotoAndPlay(30 - button1.currentFrame);
    }

  16. Once that code has been entered, try compiling your flash project by pressing the shortkeys “Ctrl+Enter” or “Cmd+Enter” on Mac. And…

Voila!
 

Here's the final result (Without text!).


 
We now have a sweet rollover effect on our button class!
 
To add the text overlay as I did in the initial example, all that’s needed is a new layer within the button class, where there are four key-frames, frame 1 and 30 having the same color (in my case the baby blue), and frames 15 and 16 (these two having black font) having the inverse you wish to tween to. Set a “Shape Tween” across all thirty frames on the layer, and you’re good to go! All of the code logic / roll over logic is already implemented; so the only thing you need to worry about are what colors you are tweening between for best effect.

About Dave

Hey Guys! I'm Dave, an Ohio State CSE alumni who just recently started work in the industry. I'm a flash hobbyist at heart, and love making flash games and tutorials when the time permits. Check out what flash tutorials are available on the site, and don't forget to "Like Us!" on Facebook!