Viral videos from Unruly Media

Unruly Media creates viral campaigns for the world's top brands. The video is then distributed worldwide via Unruly Media's ad distribution network. See some of the videos here:

 








Advanced Buttons - Flash (AS2)

view all »


For those of you who have completed the basic buttons tutorial, this will show you a few neat tricks to making you buttons look much more interesting, and you’ll want to play with them for hours! (Depending wether you have a girlfriend or not…) Anyway, here’s what you’ll end up with:

And heres how we make it!

STEP 1

Yep you guessed it, we need to set up the stage first. Set the framerate to 31, create a new layer called ‘actions’ and lock it, then rename layer 1 to ‘buttons’. Now we are good to go. First we need to create the buttons, but not how you would expect. Select the square shape tool, and select a fill and border colour to your liking. In the properties panel set the curves to 10:

Select the text tool, and on your button type button 1 (original I know). Align the text in your button, then select all on the stage. Press f8 to Convert to Symbol, select movie clip and give it a name of MC_button_1.

STEP 2

Give this movie clip an instance name of ‘Mc_button_1′. Double click on the movie clip to enter it’s timeline. Select all on the stage, then press f8 to convert to symbol. Set this to graphic, and name it GPH_button. Select frame 10 and press f6 to insert a keyframe, then do the same on frame 20. Rename the layer to ‘button’. Create a new layer called ‘frames’, and a third called ‘actions’. Lock these two layers.

STEP 3

Select frame 10 on the button layer, select the button and in the properties panel set the ‘color’ drop down box to tint, colour to white and an alpha of about 40%:

This will make your button much lighter.

Select a frame between 1-10 and insert Motion Tween, and do the same with frame 10-20. You should now have something like this:

STEP 4

On the actions layer, insert a keyframe on frame 10. Apply the ( ’stop();’ ) command to frame 1 and frame 10 in the actions panel(f9).
stop();
On the frames layer, insert a keyframe on frames 2 and 11. Name frame 2 ‘over’ and frame 11 ‘out’. If you are unsure how to do this please see the Frame Labels tutorial. Your timeline should now look like this:

STEP 5

Now its time for the actionscript. Select scene 1 to return to the main timeline, ensure you do not have the movieclip selected and click on the first frame of the actions layer. Press f9 to open the actions window and enter the following code:
MC_button_1.onRollOver = function(){
this.gotoAndPlay("over");
}

MC_button_1.onRollOut = function(){
this.gotoAndPlay("out");
}

Now, by using frame labels and calling them in actionscript, we can make animations activate within the movie clip. The first line of code calls the movieclip, and states that when the mouse is over the clip to run the function ( ‘MC_button_1.onRollOver = function(){’ ). The second line tells flash to play the frame called ‘over’ within this movie clip ( ‘this.gotoAndPlay(”over”)’ ). The function is then closed. This is then repeated for the rollout, when the mouse is no longer over the movie clip. Then the frame labelled ‘out’ is played.

STEP 5

Hit Ctrl + enter and hover over your new button. Nice eh? Now you have animated rollovers! You can then use this button like any other standard button, using the following code:
MC_button_1.onRelease = function(){

//insert your function here //

}
And now your done! Simple as that. As usual have a play, expand on my basics and let me know your feedback!

Signing Off,

The Dude

Did this tutorial help you? If so, click the bookmark button, stumble me, add me to your twitter and tell your friends! Alternatively, sign up and leave a comment!

Not what you were looking for? Then leave a comment or email me and we’ll get you the tutorials you need.

Vote in HexoSearch Help me out by voting for this tutorial

Did this post help you? If so help us continue to grow and Digg this page or Share on Twitter!

If you haven't already, sign up to our RSS feed or register to recieve updates direct to your email!

17 Responses to “Advanced Buttons - Flash (AS2)”

  1. Michal Kopanski

    Ok, so I’m creating a header in flash, and instead of the same old over, down and out button technique, I wanted to make the button fade in from 50% opacity to 100% on mouse over. My problem is that when i preview the clip, the animation doesn’t show, all shows is the original state. I’m not sure anymore whether it’s where i put the AS, or because i have other animations on other objects in the header. I would really appreciate it if you could help me solve this problem.

    thanks.

    and
    Great tuts!


  2. Hi Michal,

    If you follow this tutorial step by step you can create the effect you are after, except where i have changed the the tint, change the Alpha instead. The main code for the rollover effects sits on the main timeline, only stop(); and framelabels are within the button movieclip. Hope this helps!

    The Dude

  3. Michal Kopanski

    Actually, I have initially used Alpha for the transition rather than the Tint, but unfortunately, I’m still having problems with the function responding properly. It’s hard to explain, but I’m having a navigation bar fade in under my header, and on the nav bar, are tabs (which are my buttons). The tab on rollOut is 50% Alpha, and rollOver 100%, and I have that tween set up INSIDE the movie clip for the button. I have everything shown, including the AS on the Stage, but still no response. The little hand doesn’t even show up indicating it’s a button.

    I really appreciate your help as for this is my first major website project. If you would like, I can send you the “.fla”, to see whether you can fix the problem.

    Thanks a bunch.


  4. Michal,

    Send me the .fla, email address on contact page. I’ll have a look for you :)
    The Dude

  5. Tom Newbold

    Its not working :(

    Flash 8

    Ermm jst wont animate on preview! Boo


  6. Send me the .fla, i’ll take a look.

    The Dude

  7. Michal Kopanski

    Hey, I stumbled upon your website, and just wanted to let you know that i abandoned that project (the one with the flash navigation bar), BUT, I would really appreciate it if you gave me some info on how to create a submit form going straight from the website to an email address bypassing the default email client. Basically I’m trying to create a contact form, but it’s not working, and I’m looking for a solution. You would be a great help if you could lend a few words.

    Thanks.



  8. Hey Dude,

    Thanks for the tutorial.. I have went over this 3 times, from scratch, and it’s not working.. I went ahead and emailed my FLA to you. Seems like it should work. I’m not getting the rollover icon (the pointed finger) when I test my movie. I have even tried “export for as” on the MC’s linkage. What minute detail am I missing here?

    Thanks man,
    Ryan


  9. Hi Ryan,

    I have emailed the fixed fla file. The problem was you had placed the code on the button, as opposed to on frame 1 of the actions layer. You can tell if there are actions on a frame by the small a symbol, if you dont see that then the code is in the wrong place. :) I will reword the tutorial to make this clearer for others :)

    The Dude

  10. Paul

    Hey Dude,

    Fantastic tutorial, really helpful for someone such as myself who is just starting out.

    My question is how to stop the button from glitching when quickly rolling off and on it? I have tried numerous “if” statements but no avail.

    Any guidance would be greatly appreciated. I have sent the FLA to your email address.

    Thanks Dude!

    kind regards,
    Paul

  11. JonCreswell

    Hi Dude,

    Great tutorial can get it work no problem when i start a new document. I need to place the ‘button’ within another FLA but when i do it doesn’t work?? do i have to place the actionscript within the new FLA in a separate actions layer?? i’ll send the FLA file.

    Thanks
    Jon


  12. This works great stuff :D


  13. how do you make this into an actual link because it doesnt seem 2 work as a hyperlink…???

  14. Jennifer

    Hi Dude,

    I’m working with graphics that appear to look like buttons to the viewer [they are shaped like buttons, there is a clickable element...the viewer clicks on them and things happen], but are in reality they are just graphics that are programmed as movieclips.

    I have a main sound, and two other sounds that I’ll reference in my question.

    Main sound plays just fine. There’s a ‘play/pause’ button [really is a movieclip] that controls its stopping and starting behaviour of the entire swf — animation and sound included. Nothing to fix here.

    The second sound [as well as the third sound] is attached to a button-like graphic as well. When clicked on, it’s supposed to:
    -Stop ALL audio that’s currently playing
    -Start playing its own audio
    -Begin playing its own new animation instead

    I need, essentially, advice on how to script a movieclip [that appears to behave like a button] to stop all sounds when clicked on and play its own sound and animation. Eventually, I’ll synch its sound with its animation. I think I can figure out the animation synching part just fine, but getting the sound to work like I want it to is key.

    Please let me know what your thoughts are on this, Dude. Thanks in advance for any and all help!

    -Jennifer


  15. Thanks dude , i was looking for something like this tutorial


  16. Thank you so much for taking the time to put this together. I truly appreciate it. I’d been wanting to achieve this effect and just couldn’t figure it out on my own. It’s great, and so well explained. Thank you thank you thank you. :o) I’ll be checking back here to see what else you’ve done.

Leave a Reply