AS3 Button Press

Moving from Flash AS2 to Flash AS3: Button Press

Tags: ,

Lately, I’ve begun dedicating my time towards learning Actionscript 3.0. I’ve been told that Actionscript 3.0 is a bit tricky, but very powerful once you get the hang of it. However, when I came across a simple button press, I realized this wasn’t going to be a walk in the park.

The simple button press is probably one of the most used features for Flash users. With Actionscript 3.0, this has changed quite a bit. This is why this tutorial will directly focus on just that.

Getting Started with AS3: Button Press

The AS3 code below will show you how to add interactivity to a button using ActionScript 3.0.  It will also give you a glimpse of how the structure of ActionScript 3.0 has changed the face of ActionScript…for the better.

AS3 Code

//imports the necessary AS events
import flash.events.Event
import flash.events.MouseEvent;
//attaching mouse events to the button on stage
rssButton.addEventListener(MouseEvent.CLICK, rssClick);
rssButton.addEventListener(MouseEvent.MOUSE_OUT, rssMouseOut);
rssButton.addEventListener(MouseEvent.MOUSE_OVER, rssMouseOver);
rssButton.addEventListener(Event.ENTER_FRAME, onEnterFrames);
//Properly declaring variable
var box_color_play:Number;
//On mouse clicked function
function rssClick(event:MouseEvent):void {
eventNotice.text = "MOUSE CLICKED";
}
//On mouse out function
function rssMouseOut(event:MouseEvent):void {
eventNotice.text = "MOUSE OUT";
box_color_play = 0;
}
//On mouse over function
function rssMouseOver(event:MouseEvent):void {
eventNotice.text = "MOUSE OVER";
box_color_play = 1;
}
//Function in place used for on ENTER_FRAME event animation
function onEnterFrames(event:Event)
{
if ((rssButton.box_color.currentFrame != rssButton.box_color.totalFrames) || (rssButton.box_color.currentFrame != 0)) {
if (box_color_play == 1) {
rssButton.box_color.nextFrame();
}
if (box_color_play == 0) {
rssButton.box_color.prevFrame();
}
}
};

Additional Resources:

AS3 Button Press

Video Tutorial brought to you by Justin Everett-Church

The tutorial will go into depth on how to go about creating an interactive button inside of Adobe Flash using Actionscript 3.0.

Download Tutorial Files

File: btnPress_as3.zip

15 Comments

  1. jed

    03.25.2008

    Reply

    exactly what i was looking for.

    thx

  2. solo1artist

    03.25.2008

    Reply

    No problem.

  3. simon

    11.22.2008

    Reply

    in as3 wat is the code for gotoAndPlay and nextFrame because i can’t use the bone and 3d tool in as2
    pls help me

  4. Tom

    12.01.2008

    Reply

    Switching to AS3 today. Yep first thing I ran into.

  5. Angel

    12.02.2008

    Reply

    That’s cool! I plan to continue this series of “Moving From AS2 to AS3″ very soon.

  6. Taher

    01.07.2009

    Reply

    God bless you! :)

  7. Jez

    01.25.2009

    Reply

    This is nearly exactly what I am looking for.

    I need a button to link to a URL is this possible with this file?

    our help is much appreciated.

    Thanks.

  8. Angel

    01.25.2009

    Reply

    @Jez: Yeah, this example uses that exact functionality.

  9. sangjolie

    02.04.2009

    Reply

    thanks….btw how about multi button? if I have more than 1 button?

  10. Jan

    02.05.2009

    Reply

    Great button and tutorial. One question, do new buttons not show the hand when you hover over them? anyway to get the hand back?

    thanks

  11. Jan

    02.05.2009

    Reply

    Never mind my last question. I figured it out.

    // if you want a hand cursor
    rssButton.buttonMode = true;
    rssButton.useHandCursor = true;

    • Angel

      02.05.2009

      Reply

      Yeah, that is something that needs to turned on if desired.

  12. PoteN

    08.01.2009

    Reply

    Thanks for the post and thanks Jan! Saved me a lot of time.

  13. Ronald

    09.11.2010

    Reply

    This is truly excellent tutorial of a Mouse Button rollover, click, etc. I had an excellent time creating button out of this!

  14. srigiri

    10.24.2010

    Reply

    Thanks for the post Jan Appreciated your help…

Leave a Reply









Latest Theme From WooThemes

Capital

By WooThemes

Capital is a WooCommerce theme which has been designed specifically to sell digital products. There are options to strip functionality right back which makes this the perfect theme for boutique software agencies. Capital has also been fully optimised for use on hand-held, touch screen devices.

Theme Categories: Responsive, WooCommerce

Latest Tweets