David Stiller’s blog

Making Buttons Work in Flash CS3 (A Reply)

Often, but not always, I syndicate my blog entries on the blog at Community MX, CMXtraneous. That particular blog has a word limit on article length, so not everything I write makes it over — that, and sometimes I simply forget to copy/paste my content to both locations. In any case, I don’t see replies to the CMX entries nearly as often as I do my own, but I do try to make the rounds. I just found three replies to my recent “Making Buttons Work in Flash CS3 (ActionScript 3.0),” and since the CMX interface doesn’t seem to like replies with sample code in them, I’m replying to those comments here.

Anon

Doesn’t work.

I copied and pasted directly from the article, and I have to say … it works just fine for me. Can you be more specific about what doesn’t work? Are you using the AS3 code in an AS3-based FLA file?

The MalloMan

This creates the trace output correctly, however, I have not been able to understand how to get a button to navigate to another Web page.

For that, you’ll need the navigateToURL() function, which replaces the older getURL(). The URL you provide (as a parameter) needs to be an instance of the URLRequest class, so your final code might look like this:

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    navigateToURL(new URLRequest("http://www.domain.com/"));
  }
);

Do you know how to take this code that you’ve written here and actually make the button work other than create an output in your output manager? Any help would be greatly appreciated, thanks!

Sure thing. Let’s look at wes’s feedback and take it from there.

wes

I’m tired of seeing example for buttons in AS3 where all you are doing is tracing out ("You clicked me").

Fair enough.

I’m sorry, but that is not at all how people will be building buttons

It’s great for a proof of concept!

… and the way to customized each button’s behavior in AS3 is much more involved.

Well, that’s just it. The “more involved” part is spelled out in the original blog entry. What you put inside the event handler function is up to you. I used a trace() statement because that was a generic approach. If you wanted to affect another movie clip, for example, you would have to give that other movie clip an instance name, then refer to that instance name and invoke MovieClip class members on the instance.

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    someOtherClip.gotoAndPlay(15);
  }
);

In the above snippet, a movie clip with the instance name someOtherClip is told to perform the MovieClip.gotoAndPlay() method, which means when the myButton instance experiences a “mouse up” event, someOtherClip will go to frame 15 of its own timeline and play from there.

If you had already prepared an instance of the Sound class and loaded an audio file into it, you could cause that instance to play in much the same manner:

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    aSoundInstance.play();
  }
);

How about discussing eventDispatcher and making custom events that work?

Custom events are a good topic, but they’re more advanced than the concept I had envisioned for this particular blog entry. This one was just a quick way to answer the question, “Why don’t buttons work any more in Flash CS3?” which I had been seeing in the Adobe forums when I wrote the article.

Conceptually, AS3 still operates in the same object-oriented manner as AS2. It’s just that the event handling mechanism as a whole now behaves similarly to the event handling technique used with AS2’s v2 Components, which also use an addEventListener() method.

I hope this clears things up a bit.

This entry was posted on Monday, July 9th, 2007 at 1:14 pm and is filed under Flash, ActionScript 3.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

32 Responses to “Making Buttons Work in Flash CS3 (A Reply)”

Tim Says:
August 24th, 2007 at 11:20 pm
I’m trying to fire an event at the end of a FLVPlayback instance and stumbled across your previous post (http://www.quip.net/blog/2007/flash/actionscript-20/how-to-determine-completion-of-flv) and attempted to use the code there, but I got nothing but errors using Flash CS3. Then I found this page and thought, “Oh! Okay, so this should work!”

videoPlayer.addEventListener(
VideoEvent.COMPLETE,
function(evt:VideoEvent) {
import flash.external.ExternalInterface;
ExternalInterface.call(”myJSCall”,”");
}
);

But it doesn’t work either. I get this error instead now: 1046: Type was not found or was not a compile-time constant: VideoEvent.
David Stiller Says:
August 26th, 2007 at 7:30 pm
Tim,

I got nothing but errors using Flash CS3.

Remember, Flash CS3 publishes to both ActionScript 3.0 and 2.0/1.0. The article you mentioned was written for AS2 (note the category hierarchy in the URL), so you would have to configure your publish settings for ActionScript 2.0 in order for it to work.

Then I found this page and thought, “Oh! Okay, so this should work!”

The VideoEvent class does support a COMPLETE constant, which refers to the complete event for the FLVPlayback Component, but but it’s one of the classes that needs to be imported when used in timeline code, just like ExternalInterface. When using import statements, put them first, like this:
```
import fl.video.VideoEvent;
import flash.external.ExternalInterface;

videoPlayer.addEventListener(
  VideoEvent.COMPLETE,
  function(evt:VideoEvent) {
    ExternalInterface.call("myJSCall","");
  }
);
```
jaqai Says:
August 28th, 2007 at 10:31 pm
Thanks for this. I stumbled upon this combing the internet for “addEventListener” for buttons in AS3.0 and this got me home. (Finally, a quick blurb - that to me - seemed like it was actually written in english.

I should readily admit that I’m a graphic artist waaaaaay before I’m a programmer, so the thing I’m currently having trouble wrapping my brain around is having an eventListener handle more than one thing at once.

For example: Can one “eventListener” handle a rollover, rollout, and button click? or does each aspect of that button (I typically do my buttons in a movie symbol) need it’s own eventListener?
Tim Says:
August 29th, 2007 at 1:46 am
David,

Thanks for the response. The video was encoded as 9 with a custom skin, so AS 2/1 wasn’t an option.

I finally got it to work using a broader import statement:

import fl.video.*;

Thanks!
Tim
David Stiller Says:
August 29th, 2007 at 7:26 am
To jaqai …

the thing I’m currently having trouble wrapping my brain around is having an eventListener handle more than one thing at once.

You can only handle one event at a time, and that’s the same in both AS3 and AS2. Interestingly, in AS1 — specifically, the on() and onClipEvent() event handlers — it’s possible to include more than one event:
```
on (press, release) {
  trace("hi");
}
```
… but the equivalent in AS3 would be:
```
btnInstance.addEventListener(MouseEvent.MOUSE_DOWN, someFunction);
btnInstance.addEventListener(MouseEvent.MOUSE_UP, someFunction);
```
… where someFunction would either be a named function declared elsewhere or, as shown in the blog entry above, a function literal, spelled out right in the event handler.

To Tim …

finally got it to work using a broader import statement:

import fl.video.*;

That’ll do it. Keep in mind, the * includes more classes than you actually need (it includes the full video package, but that should be fine.
Chiranjeevi Says:
September 8th, 2007 at 3:10 am
Good Excellent IDEAS
But What I need actually in like in AS 2. onReleaseOutside.
Is there any Help to make this one. in AS 3 by any means..
I supposed to use it in my custom components like Drag Bar..
Thank U all.
J Andrews Says:
September 8th, 2007 at 4:03 am
Dave, you’re awesome. Great Blog - This helped greatly
David Stiller Says:
September 14th, 2007 at 7:14 pm
To Chiranjeevi …

Aha! Yes, that’s a frustrating omission from ActionScript 3.0, but easy enough to work around. The solution I tend to use is to assign a temporary mouseUp event handler to the Stage on the button’s mouseDown handler, then remove the stage’s when you’re done. Use a named function, in this case, so you can perform the removal:
```
myButton.addEventListener(
  MouseEvent.MOUSE_DOWN,
  function(evt:MouseEvent) {
    stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  }
);
function mouseUpHandler(evt:MouseEvent):void {
  trace("whatever mouse is supposed to do");
  stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}
```
To J Andrews …

Thanks!
Dan Says:
November 8th, 2007 at 12:37 pm
Hey man, great article – very well written, which is rare for tutorials (especially flash ones!)

one question – if i need to mess with the target frame of whatever URL i happen to be navigating to, is it the same as in earlier versions of actionscripting? ->

old:

getURL(”index.html”, “_blank”);

new(?):

navigateToURL(new URLRequest(”index.html”, “_blank”));

thanks again man, saved my life
David Stiller Says:
November 8th, 2007 at 12:50 pm
Dan,

You’re close, and the navigateToURL() entry in the ActionScript 3.0 Language Reference spells out the small difference you need to make. The navigateToURL() function itself accepts two parameters: a) a URLRequest instance and b) a string. So make sure to specify your window parameter outside of the URLRequest instance:
```
navigateToURL(new URLRequest("index.html"), "blank");
```
Dan Says:
November 8th, 2007 at 1:52 pm
awesome man, thanks a lot
Alkan ARSLAN Says:
November 9th, 2007 at 9:21 am
The MalloMan Thanks
KO Says:
November 21st, 2007 at 9:54 am
first of all, your blogs are a huge help. thank you! i do have a question though….I have to put sound buttons on a site, where it will start and stop. there are 3 different sounds on the site though. Everyone so far is telling me that i have to create a new swf file for each one, but i feel there is no way it should be that difficult. i have been reading through the action script 3 on adobes web site and read through so many forums, but i cant seem to find an answer….
David Stiller Says:
November 21st, 2007 at 10:18 am
To Dan …

You’re welcome.

Alkan …

You’re welcome, too.

To KO …

The answer to your question actually merits its own blog entry, and I’m planning to rewrite a number of the most popular articles on this site for ActionScript 3.0. In a nutshell, though, you certainly do not have to create a separate SWF for each audio file. Three instances of the Sound class (and actually, possibly just one) will do. I would prepare the audio as three MP3 files and either load all three at once, using the SoundChannel class to stop each, when needed, or I would load them one after the other.
KO Says:
November 21st, 2007 at 10:36 am
Thank you! This at least gives me a direction to go in…. I just started to learn flash 2 months ago, I’m a design student but I love learning all the coding and what not, I prefer sitting here and reading this stuff and figuring it out over everything else, its just hard because there isnt too much out since 3.0 is still newer that explains things well. I have probably learned more from your blog than i have from my teacher in 2 months! thank you again…i’m sure ill get stuck again though and be back with more questions haha
David Stiller Says:
November 21st, 2007 at 11:19 am
KO,

I have probably learned more from your blog than i have from my teacher in 2 months!

Wow, thanks! I hear this sort of thing a lot, and it baffles me, because I would expect schools to be more beneficial — but I’m certainly glad to have been a help.

Use the search form on this blog to look for articles on “Sound,” and you’ll find a number of AS2 articles on the Sound class. Keep in mind, of course, that AS3 is often very different in practice, but in principle, many of the concepts overlap.

The book I wrote with Tom Green, Foundation Flash CS3 for Designers (friends of ED) has a whole chapter on audio in Flash, and it’s all based on ActionScript 3.0. Amazon sells it pretty cheap!
KO Says:
November 21st, 2007 at 11:33 am
after i found your blog this morning and saw you had a book i went on amazon and ordered it…. already on it! haha. i have been looking at flash forums/blogs etc. for 2 months and was so excited to find one that made sense. i read about toggle buttons on adobes livedocs earlier and i was thinking that would probably be what i want to figure out…..i was actually just reading through your other posts before i checked back here and had found one about toggle buttons in AS2. i got the 3.0 script off of adobes site and but theres something in it that flash isnt liking very much so im tinkering around with it….

and i know for my school at least the teacher is geared more towards the design of the site/presentation etc. and not as worried about executing the codes…. which i find much more interesting and would pick over design any day… which is possibly why i have been reading flash 3.0 live docs for 13 hours now…….a project finally past making a layout and im finally learning
David Stiller Says:
November 28th, 2007 at 9:18 am
KO,

which is possibly why i have been reading flash 3.0 live docs for 13 hours now

Sounds like you’ve found your passion! Have fun with it! Flash has given me a creatively rewarding career to date.
Tom webdesign Says:
January 26th, 2008 at 1:31 pm
great tip ! thx
David Stiller Says:
January 27th, 2008 at 10:19 pm
Tom,

Thanks!
neille Says:
April 12th, 2008 at 1:50 pm
Thanks so much for this David! AS3 is kicking my butt.

One question, I used the following code to link to new pages from my flash movie

myButton.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
navigateToURL(new URLRequest(”http://www.domain.com/”));
}
);

But I’d like the new page to load in the same browser window, and I’m not understanding where in this code it says open in a new window, which is how the swf is behaving now. Can you tell me how this is designated here?
David Stiller Says:
April 12th, 2008 at 7:21 pm
neille,

Actually, the way you’re showing it is the way that opens the requested page in the same window. You’re supplying a single parameter to the navigateToURL() function — namely, the URLRequest object — and you have the option of suppling a second parameter that determines how the hyperlink should behave (e.g., "_self", which is the default and therefore unnecessary, and, say, "_blank", which opens the requested page in a new browser window).

My hunch is that you’re testing from inside Flash, which has no choice but to open a browser to display the requested page (as the Flash IDE is not, itself, a browser). Have you tested by embedding your SWF into an HTML document?
neille Says:
April 14th, 2008 at 12:18 pm
Actually the swf is embedded into an html file and is live now www.neille.com, and the two links are opening in new tabs, oddly …
David Stiller Says:
May 7th, 2008 at 11:18 pm
neille,

I believe the open-in-tabs issue, as opposed to open-in-a-window, is a user configurable browser setting.
David Pounds Says:
July 24th, 2008 at 7:05 pm
I have been looking and looking, but I cannot find the method to go to a specific frame number, or frame name. Any suggestions?

Thanks!
David Stiller Says:
July 24th, 2008 at 7:28 pm
David,

If you check out my reply to wes, you’ll find what you’re after. To go to a specific frame number or label, you need to invoke the MovieClip.gotoAndPlay() (or MovieClip.gotoAndStop()) method on a movie clip instance. If you have the movie clip’s instance name handy, you would specify that instance name, followed by a dot, then the method:

someClip.gotoAndPlay(15)

Or you can leave off the movie clip reference and the method will apply to the timeline in which the frame script appears, such as the main timeline:

gotoAndPlay("someFrameLabel")
David Pounds Says:
July 25th, 2008 at 2:29 pm
That worked David, thanks so much!

I am a graphic design professor and I am having to teach Flash this coming semester, with my last experience with the program being Flash 4. I was always able to get around in Macromedia Director’s Lingo, but ActionScript baffles me. How basic does your book start out? So many of the self help books assume some basic knowledge, and I don’t have the basic knowledge, or the aptitude, for that matter.
David Stiller Says:
July 25th, 2008 at 2:36 pm
David,

Sure thing! Glad to help. Foundation Flash CS3 for Designers assumes you have no experience with programming. The reviews on Amazon are mostly (as in, 99%) positive, and one or two folks have suggested that the ActionScript Basics chapter is worth the price of the book.

I happen to be self-taught, and over the years, I think that’s had a positive effect on my writing style in terms of ActionScript tutorials.
David Pounds Says:
July 29th, 2008 at 11:45 am
I bought your Foundation Flash book and it has been quite helpful. I am sure it is staring me in the face and I am missing it, but your book did not come with a CD and I don’t see a website download reference for the files you mention. Where should I be getting those files?
David Stiller Says:
July 29th, 2008 at 11:56 am
David,

Thanks for the purchase! Your question is answered in the book, but it most certainly isn’t staring you (or anybody) in the face. In fact, we’ve had a number of readers ask where the files are — both privately and through Amazon comments — so we’re breaking from the publisher’s norm for the second edition by making it a note at the beginning of every chapter.

Meanwhile, in the case of the book you have in your hands, you can flip to the inside of the very first printed page (with the copyright info) and you’ll see where to go … but it’s quite the hidden URL!

Here’s what you want:

www.friendsofED.com/download.html?isbn=159059861X

or

www.FoundationFlashCS3.com/sample-files.html

Thanks again for picking up a copy!
Ryan Says:
August 5th, 2008 at 3:02 pm
Hey,

I have a nested movie clip called “menu”. In that mc I have another called “button1″ that is only on frame 10. On frame 10 of the “menu” is a script:

button1.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
this.sections.gotoAndStop(”spaCap”);
}
);

Now I would like this script to go to a frame labeled “spaCap” of a movie clip called “sections” which is actually on the same level as “menu”.

This script runs and i get the error:

TypeError: Error #1010: A term is undefined and has no properties.
at MethodInfo-26()

I think it has something to do with the script being on frame 10, but I put it on frame 1 and it did the same thing. What should I do?
David Stiller Says:
August 11th, 2008 at 10:00 pm
Ryan,

It sounds like you’re referencing an object incorrectly, and it’s probably due to your use of this in your ActionScript. From the point of view of your function there, this refers to the timeline in which this code appears — namely, the timeline of your nested “menu” movie clip.

The timeline of the “menu” clip doesn’t contain “sections,” so you’ll need to refer to the parent timeline of “menu,” which does contain the “sections” clip.

Try this:
```
button1.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    MovieClip(this.parent).sections.gotoAndStop("spaCap");
  }
);
```

Making Buttons Work in Flash CS3 (A Reply)

Anon

The MalloMan

wes

32 Responses to “Making Buttons Work in Flash CS3 (A Reply)”

Leave a Reply