Archive for ‘buttons’

May 5th, 2010

Buttons in Flash using ActionScript 3.0: Going to next frame and previous frame

by Jen deHaan

Some people have been asking how to create button code in Flash (CS3, CS4, or CS5) that progresses the playhead in a SWF to the next or previous frame using ActionScript 3.0. This is not too difficult, and is a super simple code modification from any other button in AS3 (and is actually a touch easier than AS2 due to scoping issues).

This post includes an example of how to create two buttons that click between a few different frames. I’ll also include a (CS4) FLA file for you to look at and the AS2 equivalent.

July 24th, 2009

Controlling the window target a button click opens using ActionScript 3.0 in Flash

by Jen deHaan

One of my frequently asked questions in the comments is how to control what window a button click opens using ActionScript 3.0. For example, you might want your button to open in the same window, a particular part of your frames layout, or a new window. It’s similar to ActionScript 2.0, but there is a bit of a difference.

In ActionScript 2.0, you set a target for your button using code such as the following:

The following steps for ActionScript 3.0 will apply to either Flash CS3 or Flash CS4, just make sure that your document is an ActionScript 3.0 button and you’re adding the code to a frame.

  1. Create your button in your FLA, and give it an instance name in the Property inspector, such as my_btn.
  2. Select a frame on the timeline at the same frame number of your button.
  3. Open the Actions panel, and add the following code:
    my_btn.addEventListener(MouseEvent.MOUSE_DOWN, myHandler);
    function myHandler(event:MouseEvent):void {
        navigateToURL(new URLRequest("http://www.adobe.com/devnet/flash/"), "_self");
    }
  4. Publish preview your work in HTML (File > Publish Preview > HTML). Note: When testing locally, you will need to set your security to allow access to the SWF. If you haven’t set this up, click Settings in the dialog that opens when you first test your FLA, select a directory on your hard drive, and save the FLA to that same directory and test again.
  5. By default, without adding this parameter, ActionScript assumes _blank which opens a new window. You can modify the _self in the code above to be _top or _parent (or _blank if you want). Here’s what each of them does:

    • _self opens the link in the current frame of the current browser window.
    • _blank opens the link in a new window (or tab if that’s what the user has their browser set to do).
    • _parent opens the link in the parent of the current frame.
    • _top opens the link in the top-level frame of the current browser window.

October 19th, 2008

Movie clip buttons in a fight: it’s AS2 vs. AS3 (again)

by Jen deHaan

You might have created movie clip buttons in Flash CS3 or Flash CS4 (or Flash 8 or 7 or…) before to get those animations on your buttons. Either way, creating one would have proceeded a bit like the following if you used ActionScript 2.0.

* Create a button, and give it an instance name (in the following case, myMc).
* Along the Timeline, add frame labels _up, _over, _down, and _hit (if you want a hit area for the button).
* Put stop actions at each frame label, and change the graphics and/or add some animation at each state.
* Add this code to frame 1 in the actions panel:

myMC.onRelease = function() {
 trace ("You clicked me.");
}

(For full instructions on creating a movie clip button, you can refer to something I wrote for docs waaay back in Flash 8 days here updated for CS3).

More after the jump.

July 31st, 2008

Creating buttons that link to different scenes, and within a scene, using ActionScript 3.0

by Jen deHaan

A common request in the comments is for information on how to create a button that links to a scene using ActionScript 3.0 in Flash CS4 or CS3. Luckily, it’s largely the same as creating a normal button that links to whatever, and uses the same gotoAndPlay format as in ActionScript 2.0. So hopefully it’ll make sense once you see it.

So if you’re unsure on general button code, see this post here: Making a button work in AS3. More links about writing button code at the end of this post.

Now you’re ready for some scenes-with-buttons action. Here’s some code:

stop();button1.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);function mouseDownHandler(event:MouseEvent):void {
 
gotoAndStop(1, "Scene 2");
 
}

So that code assumes that you have a button with the instance name button1, and a scene in your document called Scene 2 in the Scenes panel. The number "1" in that code points to frame 1 of the scene.

So what if you want to, say, link to a particular frame? Let’s link to frame 5 of a scene called monkeyScene:

stop();button2.addEventListener(MouseEvent.MOUSE_DOWN, monkeyDownHandler);
 
function monkeyDownHandler(event:MouseEvent):void {
 
gotoAndStop(5, "monkeyScene");
 
}

Hope that answers the question. I’ve put an FLA file online that links each scene using buttons so you can see this in action.

Linking to buttons within a scene

There have also been questions about linking to frames within a scene. I’m not positive what the specific problem is, but I’ll take a stab at it (or at least show what seems to work for me.

Now, what causes many of the problems with Scenes in Flash (and why they are officially discouraged from use in Flash best practices – I never use ‘em unless I have next to no code in a FLA), is as follows. From what I understand, when you publish your SWF file, all of the scenes in a FLA are made into one big giant string of frames. Kind of like sticking all of your scenes into one big timeline (one big scene, essentially) and pushing it out as a SWF. Therefore, this can mess up your code. If you’re pointing to a frame 56… which one? To you it may be frame 56 of scene 3, but to Flash that may be frame 56 of the giant new timeline in the SWF that’s published.

So, it’s good to avoid scenes.

But I digress. So if you’re linking to buttons within the same scene, you could specify what scene you’re pointing to in each button. So if you’re in a scene called monkeyScene, you could make your button that’s on frame 1 point to frame 2 of monkeyScene as follows:

stop();
 
mbutton1.addEventListener(MouseEvent.MOUSE_DOWN, monkeyHandler1);
 
function monkeyHandler1(event:MouseEvent):void {
 
gotoAndStop(2, "monkeyScene");
 
}

I’ve uploaded another real ugly FLA file that links multiple buttons to frames within a single scene. Check out monkeyScene in the FLA file.

MORE INFORMATION ON BUTTONS:

March 13th, 2008

Adding more than one button to a FLA file while rocking it in ActionScript 3.0

by Jen deHaan

So there have been a number of questions on my kinda recent post about making a button in Flash CS3 or Flash CS4 using ActionScript 3.0. I will do the next couple posts on how to do the things in the questions (and actually check em out in Flash, and make an FLA to download). Update: More links about buttons and button code at the end of this post.

So if you haven’t already read or don’t know how to make a single button, head on over to the post linked above. Here, I’ll continue on to multiple buttons.

Say you have a couple buttons on a page, and you want one to go to one URL, and the second one to go to a different URL – you need to change your function names in your code so you don’t have multiples with the same name. So, you would need to do something like this:

thumbsdown_btn.addEventListener(MouseEvent.MOUSE_DOWN, thumbDownHandler);
function thumbDownHandler(event:MouseEvent):void {
 navigateToURL(new URLRequest("http://msdn2.microsoft.com/en-us/silverlight/default.aspx"));
}
thumbsup_btn.addEventListener(MouseEvent.MOUSE_DOWN, thumbUpHandler);
function thumbUpHandler(event:MouseEvent):void {
 navigateToURL(new URLRequest("http://www.adobe.com/devnet/flash/"));
}

Note the thumbDownHandler and thumbupHandler in the code.

The source file: Mutliple buttons to URLs

So some people are instead targeting multiple frames. In that case, the code would look like this:

stop();
first_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler1);
function mouseDownHandler1(event:MouseEvent):void {
 gotoAndStop(5);
}
 
second_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler2);
function mouseDownHandler2(event:MouseEvent):void {
 gotoAndStop(10);
}

The source file: Mutliple buttons to frames

MORE INFORMATION ON BUTTONS:

February 25th, 2008

Making a button work in Flash CS3, CS4 or CS5 with ActionScript 3.0 – it’s not too bad

by Jen deHaan

So I used to monitor comments coming in from the CS3 Video Workshop, which contains a few hundred video tutorials on the CS3 products. Some of the comments that came in regarding the Flash videos was how people were having frustrations about how to set up button code with ActionScript 3.0. I thought that’s where I’d start out, with a simple example that compares the two. So I’ll show you how to make a button work in Flash CS3 or Flash CS4 using ActionScript 3.0.

Luckily, the set up is pretty much the same assuming you put code on the Timeline. If you didn’t, it will be a bit of a change and you’ll need to follow the steps below.