David Stiller’s blog

Making Buttons Work in Flash CS3 (ActionScript 3.0)

At the time of this writing, Flash CS3 is still brand spankin’ new on the shelves. For some lucky folks, whose companies presumably have volume discounts with Adobe, the latest version of Flash is already in their hands — has, in fact, already been installed without any fanfare or training. Some of these designer/developers are finding, quite suddenly, that button symbols no longer seem to work in Flash CS3 (I’ve seen quite a few panic posts already on the Adobe forums). What gives? Is Flash broken? Not a bit of it! Let’s see what’s going on.

ActionScript 3.0 is a new language

The truth of the matter is, ActionScript 3.0 is different, in many respects, from AS2 or 1. (As it happens, it’s also the same in many respects, which can be a source of frustration for experienced users, but chin up!) One of the most basic, familiar things people do in Flash is to assign some ActionScript to a button. In former versions of ActionScript, this could be done in a number of ways, as explained a bit in “Museum Pieces: on() and onClipEvent().” In AS3, the rules have changed. There were at least four ways to handle events in the past — on() and onClipEvent(), dot notation, addListener(), and addEventListener() — and AS3 mercifully reduces those four down to one consistent approach. Honestly, this makes it easier.

Here’s how it goes. Let’s say you have a button symbol on the Stage. Select it, give it an instance name in the Property inspector. Now that it has an instance name, it has become accessible to ActionScript, which now has a unique way of identifying it from any other objects present. In a keyframe script (select a keyframe in line with the button, preferably a keyframe on its own layer), type the following:

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    trace("I've been clicked!");
  }
);

And that’s it. Why not select the button itself? What’s wrong with good old on()? For better or worse, direct attachment of code is a thing of the past. ActionScript 3.0 simply doesn’t support it. In fact, you’ll notice that the Behaviors panel is dimmed when a FLA’s Publish Settings are configured for AS3. Why? Because Behaviors rely on on() or onClipEvent(). Change your Publish Settings to AS2 or 1, they come back.

In the above short sample code, myButton represents whatever instance name you chose for your button symbol. If you actually used myButton, you’re good; otherwise, change the above code to match what you chose.

The classes that define button and movie clip symbols both inherit much of their functionality from a class called EventDispatcher, which provides that addEventListener() method. This method is what “wires up” such objects to respond to events, such as a “mouse up” occurrence, where the user has clicked, then released, the mouse. There are two required parameters (more, if you’re interested — see the EventDispatcher class entry for details), and they are this: a) what event to listen for, and b) what function to perform when the event occurs.

In this case, we’re listening for MouseEvent.MOUSE_UP. To see what other events are available, look up the MouseEvent class (or the Event class itself, which has many inheritors of its base functionality). The function inside any event handler is going to receive an object of its own (here, a MouseEvent object) that gets passed in as a parameter. In the above sample, that parameter is the arbitrarily named evt (for “event”), and that object contains a number of useful properties, including, for example, target, which refers back to the object that dispatched it.

Change that trace() statement from "I've been clicked!" to this, for example:

trace(evt.target);

… and you’ll see a reference to the button itself. The SimpleButton class defines button symbols in AS3, so look up that class to see what further properties are available. You could trace the button’s instance name, for example, by using this expression:

trace(evt.target.name);

… which makes sense if you consider what the expression means. Again, when the user clicked the button and released, a MouseEvent.MOUSE_UP event was dispatched. When that occurred, that dispatch included a MouseEvent instance as carry-on luggage. Because of our event handler, a function received that instance (and its luggage) by way of an evt parameter. That evt parameter is the incoming MouseEvent instance, and according to the MouseEvent documentation — make sure to click the “Show Inherited Public Properties” hyperlink under the Public Properties heading — MouseEvent instances have a target property, which points to the object that dispatched the event. Because that object was a button symbol (an instance of the SimpleButton class), we know that any reference to it has a name property.

This differs from the way such event handling was done in AS2. For button symbols, it went like this:

myButton.onRelease = function():Void {
  trace("I've been clicked!");
}

Notice the lack of an incoming parameter. To refer to the button itself, from inside that function, you could use the global this property:

myButton.onRelease = function():Void {
  trace(this._name);
}

In ActionScript 2.0, the property that points to a button’s instance name is _name (with an underscore). Same principle, different approach.

Enjoy ’em both

If the new approach flies over your head, just go to File > Publish Settings, select the Flash tab, and change the version of ActionScript back to AS2 or 1. But I encourage you to at least take a few stabs at the new way. As the months go by, you’re going to see plenty of AS3 stuff on the horizon. Fortunately, Flash CS lets you take your pick of the language desired.

This entry was posted on Wednesday, June 20th, 2007 at 6:51 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.

175 Responses to “Making Buttons Work in Flash CS3 (ActionScript 3.0)”

Tim Says:
August 4th, 2007 at 6:44 am
Thanks for the insights… they have really helped me!
David Stiller Says:
August 5th, 2007 at 7:00 pm
Tim,

Glad to hear that.
peter souza Says:
August 21st, 2007 at 2:55 pm
i have an invisible button, on the up state i have a picture over the invisible button,

on the over state i have the original picture morph by use of a shape tween into another picture (the morphs are seperate tweens with frame labels)

on the rollout state i have the morphed picture morph back into the priginal

and on the mouse up state the fla advances to the next frame.

now,

im using a seperate addeventlistener for each function here and seperatly they work fine but when i put them all together there is some conflict, no offical errors but it definitly doesnt work properly.

how can i apply all these listeners to the invisible button

if you wanna see the code ill send it to u
David Stiller Says:
August 21st, 2007 at 3:03 pm
peter,

I’m already lost, I’m afraid, while reading your first sentence. You have an invisible button, and the Up state of this button has a picture “over the invisible button” … just not sure what that means. Generally speaking, invisible buttons in Flash are button symbols that only have artwork on the Hit frame, in order to make the button clickable — they don’t have artwork on any of the other frames (Up, Over, or Down), because that would mean the artwork would show, and the button would therefore not be invisible.

You might be talking about a movie clip symbol (something separate) that is instructed to animate based on button event handlers. If that’s it, then yes, it would probably help to see your code. Wrap it in <code> HTML tags and it should show up right here in the comments.
peter souza Says:
August 21st, 2007 at 6:39 pm
button1.addEventListener
(MouseEvent.MOUSE_OVER,
function(MouseEvent)
{(gotoAndPlay(”over”,”Scene 3″))});

button1.addEventListener
(MouseEvent.MOUSE_OUT,
function(MouseEvent)
{(gotoAndPlay(”out”,”Scene 3″))});

button1.addEventListener
(MouseEvent.MOUSE_UP,
function(MouseEvent)
{(gotoAndStop(2))});

‘button 1′ is the invisible button (with only a hit frame)

‘over’ and ‘out’ are the 2 seperate shape tweens

those 3 work seperatly, but if i have all 3 in the actions then it doesnt work
David Stiller Says:
August 22nd, 2007 at 11:02 am
peter,

In the MOUSE_OVER event handler, you’re sending the main timeline to a frame labeled “over” in Scene 3, which is presumably a completely different scene (i.e., a different timeline) from the current one. Maybe not, though. That potentially uproots everything — at least, it does in AS2. Instead of sending the playhead all over the main timeline, I would suggest you put your shape tweens into a movie clip symbol, then use the button to direct the timeline of that symbol. Give the movie clip an instance name and invoke MovieClip.gotoAndPlay() on that, instead. Does that make sense?
peter souza Says:
August 22nd, 2007 at 3:00 pm
finally, what one book would you recommend being the best -how to- actionscript book out right now.thanks
Tomek Says:
September 18th, 2007 at 7:42 am
Hi, I’m trying to figure out how to create clickable button in Flash CS3 and AS3 which will open an URL. In older version of flash I used getURL() but I don’t know how to do that now. Can you please help me? thx
David Stiller Says:
September 18th, 2007 at 8:02 am
To peter …

Colin Moock’s Essential ActionScript 3.0 is likely to give you the most bang for your buck. It’s nearly 1,000 pages, and Colin’s writing is among the best out there.

To Tomek …

Sure thing. getURL(), as you’ve seen, is no longer available in ActionScript 3.0. The replacement is navigateToURL(), which requires an instance of the URLRequest class instead of just a string, like getURL() did:
```
myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    navigateToURL(new URLRequest("http://www.domain.com/"), "_blank");
  }
);
```
The second parameter ("_blank") is optional, just as it is in AS2, and behaves the same way.
David W Says:
September 19th, 2007 at 5:41 pm
I have the code exactly as you said in the tutorial, but it doesn’t seem to be working. it keeps giving me an error when i publish it saying:
“1120: Access of undefined property btn_hbw”
David W Says:
September 19th, 2007 at 5:45 pm
to add, btn_hbw is the instance name of my button
David Stiller Says:
October 15th, 2007 at 8:37 pm
David W,

Well … that’s pretty baffling, I agree. If btn_hbw truly is the instance name — and I don’t doubt you that it is — then something must be awry. Have you been able to duplicate this error message in another FLA — I mean a totally simplified one … just a button with an event handler that traces a message?
NickTheNameless Says:
October 19th, 2007 at 11:00 am
thanks for this post. if you get the urge, i would be first in line to read any other tutorials you write… i like you style.

thanks for the book recommendation as well, i’m ordering it today.
David Stiller Says:
October 19th, 2007 at 11:08 am
Nick,

Sure thing! As of today (Oct 19, 2007), most of this blog centers on ActionScript 2.0, but I’m certainly well versed in AS3 and have begun writing blog entries on the new language too.

Thanks for ordering the book! I had a blast writing it and hope you enjoy it. It recently went for a second print run, which corrected a handful of errors. Of course, copies of the first print are likely still in stores, so make sure to visit FoundationFlashCS3.com to check out the Corrections page.
Dave Puente Says:
October 22nd, 2007 at 3:43 pm
Hey David,

i am trying to get my main movie (root) to stop by using a simple button. and also, i would like to have other movies stop as well, with a simple action script like before… i am attempting to use AS3.0 now, because i am tryin to use a component that requires 3.0.

can you give me some example script to help me, please. here’s what i currently have:

skipIntro.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
_root.gotoAndStop(157);
}
);

thanks and cheers!
David Stiller Says:
October 22nd, 2007 at 6:55 pm
Dave,

In ActionScript 3.0, there is no global _root property, and the Compiler Error panel will give you a warning of that when you try to publish an AS3 SWF with _root in it. There are a number of approaches you can take, but here’s one nudge that may give you somethin’ to chew on. See that evt parameter in your event handler function? That variable represents an instance of the MouseEvent class, which is the object that actually gets dispatched as the user lifts the mouse. Check out the MouseEvent class in the ActionScript 3.0 Language Reference, look up the Public Properties heading, and click the “Show Inherited Public Properties” hyperlink. That will open up additional properties from MouseEvent’s family tree. (Properties are the characteristics a given object has; methods are the things that object can do; events are things that object can react to.)

One of those properties is named target, which gives you a reference to the object that raised the event. This is a button symbol, so you’re dealing (in AS3, anyway) with an instance of the SimpleButton class. Go to the SimpleButton class and look at its Public Properties heading, making sure to show the inherited stuff. You’ll find a parent property that refers to the timeline that contains the button in question (this is the equivalent to the MovieClip._parent or Button._parent properties in ActionScript 2.0). If this button is sitting in the main timeline, then the following expression gives you a reference to the main timeline, by way of those properties:
```
skipIntro.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    trace(evt.target.parent);
  }
);
```
Attila Danka Says:
October 23rd, 2007 at 3:21 am
this blog is very good!

thanks
Dave Puente Says:
October 23rd, 2007 at 9:08 am
Thanks for your response sir!

this is the simplest question ever, probably. how do i simply make the timeline stop? what is the code to do that? thanks!
David Stiller Says:
October 23rd, 2007 at 9:15 am
To Attila …

Thanks!

To Dave …

To stop a timeline, you invoke the MovieClip.stop() method. See, even the main timeline is an instance of the MovieClip class (provided it has a timeline; otherwise, in AS3, it might just be a Sprite or DisplayObject).

Start with this:
```
skipIntro.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    stop();
  }
);
```
… and experiment with your incoming evt object to explore other avenues. Use the trace() function to help determine where you are, in terms of objects and timelines.
Dave Puente Says:
October 23rd, 2007 at 9:48 am
What is the name of the timeline? can i name it in AS 3.0? in flash? i’m so new to AS 3.0. it’s a bit like chinese to me right now. thanks for your quick responses, David.
Dave Puente Says:
October 23rd, 2007 at 10:12 am
My question is how do i talk to the MAIN movie? or do i have to put everything in one movieclip now in AS 3.0? and then name it?
David Stiller Says:
October 23rd, 2007 at 10:22 am
Dave,

The timeline doesn’t have an instance name — not in any version of ActionScript — but all you need is a reference to it. You may treat the main timeline as a MovieClip instance, which is why you could use _root.gotoAndPlay(15) in AS2. Have you started simply with stop() so far? Did that work for you? Have you tacked stop() on the end of the expression evt.target.parent? Did that work for you?

Toy around with it a bit. I’m showing you more than one approach so you can personally evaluate which one seems easier to you — but it’s important you understand both. I don’t know how deeply nested your skipIntro button is. The very simplest approach, from a “how much do I need to code” standpoint, may just be the “start with this” sample I showed you.
Dave Puente Says:
October 23rd, 2007 at 10:46 am
Hey David,

thanks for your time in responding to me. i tried the good ol “stop();” script, but AS 3.0 doesn’t respond to that. i just want to make the main movie stop at frame 157 and make the “skip intro” button work as well. i can’t use “_root”, as you’ve stated previously… i was wondering if i could send you the FLA file to show you what i am trying to do. it’ such a simple function, i’m sorry if i seem dense or slow… but i purchased a component that only works in AS 3.0 and would really like to use it for a website i’m working on. thanks and cheers!
David Stiller Says:
October 23rd, 2007 at 1:21 pm
Dave,

I’m going to encourage you to keep trudging through this one, because when you do nail it, the solution is going to mean more to you than a quick answer from me (or from anyone). If the stop() method doesn’t stop the main timeline, then something about your event handler — the function you’ve associated with MouseEvent.MOUSE_UP — doesn’t “see” the main timeline from where it is. I promise you, the MovieClip.stop() method does indeed halt the main timeline, and you don’t have to put everything in one movie clip nowadays.

You haven’t stated where you ActionScript is located, and it really doesn’t matter, so long as you understand how to find a reference to the timeline you wish to stop (which just happens to be the main timeline). Your next few steps are to trace() out the value of evt and its various properties. Start with this:
```
skipIntro.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    trace(evt);
  }
);
```
… then this …
```
skipIntro.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    trace(evt.target);
  }
);
```
… then this …
```
skipIntro.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    trace(evt.target.parent);
  }
);
```
and make note of the result you get each time in the Output panel. Compare that against the instance names you’ve given your button, and possibly whatever nested movie clips might contain that button, each of which (if there are any) will also need its own instance name. You may even need to keep tacking on additional parent references, but eventually you’ll find the main timeline. Whatever expression gets you there, tack stop() on the end of that.
Randy Miller Says:
October 27th, 2007 at 6:25 pm
I am having the same problem as David W. on Sept 19th’s entry. I get the same error code. And that is on a stripped and basic FLA with only a single button on the stage called: “myButton”

This is the error code:
1120: Access of undefined property myButton.

This is the AS3

myButton.addEventListener(MouseEvent.CLICK, myButtonFunction);
function myButtonFunction(event: MouseEvent) {
var request:URLRequest = new URLRequest(”http://flashgameu.com”);
navigateToURL(request);
}

I am at a loss. Nothing works.
David Stiller Says:
October 27th, 2007 at 8:02 pm
Randy,

I’m still waiting to hear back from David W., so I’m not sure if he managed to resolve his issue on his own.

The key here is what you mean by “a single button … called ‘myButton’,” because it’s not enough that the Library’s symbol name is “myButton”: one particular instance of that symbol, on the Stage, must have the instance name “myButton”, as configured in the Property inspector; otherwise ActionScript has no idea which object you’re talking about.

Could it be that you’ve given this button the correct instance name but accidentally added a space character at the end (“myButton ”)?
Paul de Quaasteniet Says:
November 2nd, 2007 at 11:23 pm
Hi - I’m having the same issues as Randy and David W. with the error code 1120: Access of undefined property mybutton. Have played around with it for a long time now with zero success.
Paul de Quaasteniet Says:
November 4th, 2007 at 8:13 pm
Hi David - Have resolved my issue…I had named the instance of the button “mybutton” and referred to the instance in the actionscript as “myButton”….didn’t realise it was case sensitive. Have made really good progress on my design now, thanks for your blog - useful and very easy to understand.
David Stiller Says:
November 4th, 2007 at 8:32 pm
Paul,

Ah, glad to hear it! Yeah, ActionScript has effectively been case sensitive since Flash Player 7. In fact, I wonder now whether Randy and David W. encountered the same issue? I didn’t occur to me to think of that angle. Thanks for bringing it up!
casey g Says:
November 6th, 2007 at 6:53 pm
hi David, I am just trying to figure out what I can do to make my movie got frame 2 and stop using a simple play button. The play buttons name instance name is “mcClick” I have created a movie clip name zoomin1 here is the code I placed in frame 1’s actions layer.

stop();

mcClick.addEventListener(
MouseEvent.MOUSE_DOWN,
function(evt:MouseEvent):void {
evt.target.parent.play(2);
}
);

for some reason it automatically jumps to frame 2 and it bugs out. How should I write it for this to work?
David Stiller Says:
November 7th, 2007 at 8:06 am
casey,

You’re very close! The MovieClip.play() method doesn’t accept any parameters, but MovieClip.gotoAndPlay() does! Keep in mind that you may not need the evt.target.parent prefix (but it’s good to understand the various ways to reference timelines).
John Says:
November 7th, 2007 at 2:52 pm
I’m completely new to Flah and Actionscript. A question for ActionScript 3.0.

All I want is to create a simple button. Can you tell me what’s wrong?

stop();
function clickSubmit(event:MouseEvent):void {
evt.target.parent.gotoAndPlay(”Layer 1″,”Scene 3″)
}
stopBoarder.addEventListener(MouseEvent.CLICK, clickSubmit);

stopBoarder is the button’s instance name. I want it so that it goes to Layer 1 and Scene 3 when clicked. Also, do I have to include “Layer 1″, so that I just want a whole scene to play?
John Says:
November 7th, 2007 at 2:56 pm
Another question, how do I give an instance name to a MovieClip? Or a section/part of it?
David Stiller Says:
November 7th, 2007 at 3:05 pm
John,

In ActionScript 2.0, it wasn’t possible to include a Scene name as one of the MovieClip.gotoAndPlay() parameters — that would have required the older gotoAndPlay() global function — but in AS3, sure enough, that optional parameter is back; only now, it’s in the second slot, just as you’ve used it. So, sending the movie to Scene 3 makes sense (assuming the name of that scene is “Scene 3″), but that “Layer 1″ part is only going to work if you’ve added a frame label to one of your layers (in Scene 3) by the name of “Layer 1.” I’m wondering if your first parameter is a layer name, rather than a frame label?

As it turns out, timeline layers are nothing more than an author-time convenience. In the published SWF, those layers are automatically converted to a sophisticated system of depths, so there really isn’t a way to send the playhead to a particular layer. What the playhead gets sent to is a particular frame, referenced either by number (the default) or by frame label. Think of any given frame as a vertical column that visually displays the content of all layers in that column.

To add a frame label, you’ll have to put a keyframe into a chosen frame, then use the Property inspector to name that keyframe. I usually use a dedicated labels layer just for that purpose, so they’re all in the same place.

[Added later …]

Woops! I forgot to answer your other question, John. Sorry about that! To give a movie clip an instance name, just select it on the Stage and look at the Property inspector. You’ll see the place to do what you’re after in the upper left corner of that panel.
casey g Says:
November 7th, 2007 at 5:30 pm
Thanks David I will try this once I am at home. I’ve just bought the CS3 package, and this flash is a totally different AS language. I wasn’t too good with AS to begin with so I’m sure you can understand my frustrations….I just miss placing the AS right on the object.. boo hoo hoo..lol. ok, I’ll quit whining and start reading more. Thanks David.
David Stiller Says:
November 7th, 2007 at 5:38 pm
casey,

Aw, chin up! Things are different, for sure. But keep in mind, you can keep right on using ActionScript 2.0 (and even earlier versions) right in Flash CS3 — it all depends on the Publish Settings for that particular FLA. Take small bites of AS3 and learn as you go.
casey g Says:
November 7th, 2007 at 6:35 pm
so, I tried this as a new code to get my movie to work but it still told me

“TypeError: Error #1006: gotoAndplay is not a function.
at MethodInfo-1()”

stop();

mcClick.addEventListener(
MouseEvent.MOUSE_DOWN,
function(evt:MouseEvent):void {
evt.target.parent.gotoAndplay(2);
}
);

what am I doing wrong?? Also, can you answer what the “void” part of this script means?
David Stiller Says:
November 7th, 2007 at 7:51 pm
casey,

Since Flash Player 7, ActionScript has effectively been case sensitive, so it’s important to match up your lower- and uppercase letters exactly. The AS3 compiler is the strictest yet, and gotoAndplay() truly isn’t a function (unless you write it!) — you’ll want gotoAndPlay() (capital A and P).

The :void tells what sort of value this function returns, which happens to be nothing (this function returns no value). Some functions and methods do return values, such as Math.round(), which rounds numbers to the nearest integer. You feed it 4.5, for example, and it feeds you back 5, which makes that return value a number. The Sound.play() method, as another example, returns a SoundChannel instance. In your event handler, the function doesn’t return anything, so the :void suffix means just that: nothing.
casey g Says:
November 7th, 2007 at 7:58 pm
great, thanks again, I did get this to work but in a different approach after much reading through the help manual. here is what I came up with that worked properly:

stop();

function startMovie(event:MouseEvent):void
{
this.play();
}

mcClick.addEventListener(MouseEvent.CLICK, startMovie);
casey g Says:
November 7th, 2007 at 8:02 pm
I tried the fix you suggested….it amazes me how one wrong letter can screw stuff up like that. It worked with the capital P just as you said. Awesome blogs david, very very helpful. just for others, here is the final code that allowed me to jump to frame 2.

stop();

mcClick.addEventListener(
MouseEvent.MOUSE_DOWN,
function(evt:MouseEvent):void {
evt.target.parent.gotoAndPlay(2);
}
);
David Stiller Says:
November 7th, 2007 at 8:11 pm
casey,

Good on ya! Reading the docs is definitely a good way to go. Seriously, I read the ActionScript 2.0 and 3.0 Language Reference daily. The really helpful thing is, both references are closely organized around that classes that comprise each version of the language. If you’re dealing with a movie clip, look up the MovieClip class; if you’re dealing with a text field, look up the TextField class, and so on. Each class entry will have one or more of (at least) these three categories: properties (characteristics), methods (things the object can do), and events (things the object can react to).
casey g Says:
November 8th, 2007 at 11:06 am
Hey David, I found this blog very helpful, I just purchased your book “foundation Flash CS3″ I appreciate the tips on here and look forward to reading the book. I am currently using flash to work on a cartoon idea. It’s in its beginnning stages, but I will need this book to help me work through the animation ideas. If you have any extra tips or solutions that apply to cartoon animation, please let me know, feel free to shoot me an e-mail.
David Stiller Says:
November 9th, 2007 at 12:15 am
casey,

Hey, thanks so much! As it turns out, I know just the Flash animation book to recommend! A good friend of mine, Chris Georgenes, recently wrote How to Cheat in Adobe Flash CS3 (Focal Press), which covers a boat load of cartooning- and animation-specific workflows, tips, and tricks. (I happened to write the interactivity chapter for it, so I got to see Chris pour out and assemble his best stuff from scratch.) Chris’s convention sessions (Flashforward and the like) tend to be standing room only, and he managed to essentially put to paper the magic he does in person.
casey g Says:
November 9th, 2007 at 5:40 pm
David I have already began to play around with some of your actionscript 3 examples..learning quickly. I worked on the star and moon tutorial, and I toyed with it until I could make the star a regular cursor without clicking it as a button. Then I used the mouseMoveHandler function to do the alpha trick. It worked great, here is the code I used:

star.addEventListener(Event.ENTER_FRAME, customCursor);

function customCursor(Event)

{

Mouse.hide();

star.x = mouseX;
star.y = mouseY;

}

star.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function mouseMoveHandler(evt:Object):void{
if (star.x>moon.x){
star.alpha = .2;
}
else{
star.alpha = 1;}
}

I plan on reading the rest of the book and using some concepts on my companies site. I am slowly but surely conquering my actionscript 3 frustrations.
David Stiller Says:
November 10th, 2007 at 12:54 pm
casey,

Glad to hear that! To me, using Flash is one of the funnest things I can do with my time — I’m just glad I’ve been able to make a career out of it!

Looking over your code real quick, I can see an easier way to hide the mouse cursor, and I’m hoping my explanation will give you a bit more insight into event handling. Your custom function, customCursor(), accepts the obligatory parameter expected by all AS3 event handlers. Even though you’re not making use of it in this context — which is fine with customCursor(); you don’t need it — it’s a good idea to adhere to a particular syntx of paramName:paramType, the way you’re using in the mouseMoveHandler() function. Sometimes, that incoming parameter (here, evt) is something you can actually make use of. It carries with it various data about the object that dispatched the event, so when that time comes — and there are examples later in the book — you’ll use that parameter by name (evt) in order to access its properties.

In the mouseMoveHandler() function, evt’s type is more accurately MouseEvent, thought Object certainly isn’t incorrect. In your customCursor() function, you can re-use the same parameter name if you like, and set its type to Event:

evt:Event

Now, one more thing to think about it (this is what I mentioned earlier about a simpler approach) … the Event.ENTER_FRAME event handler executes its associated function every time the playhead ticks along the timeline (and even when it’s standing still). By default, Flash runs at 12fps, which means you’re executing customCursor() function approximately once every 83 milliseconds. As it turns out, you only need to execute the Mouse.hide() portion once, so you can move that one line outside the function. In addition to that, your mouseMoveHandler already executes when the mouse moves, so you should be able to stuff the next to lines into your other event handler. Check it out:
```
Mouse.hide();

star.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

function mouseMoveHandler(evt:MouseEvent):void{
  star.x = mouseX;
  star.y = mouseY;
  if (star.x > moon.x) {
    star.alpha = .2;
  } else{
    star.alpha = 1;
  }
}
```
It sounds like you’re really having fun with this, which I always love to hear.
Richard W Says:
November 13th, 2007 at 3:57 pm
Hi David,

Firstly, cool blog!

Secondly, I’ved created a map of the UK (for a franchise company) with buttons and links to different pages:

http://www.isleofwight.com/mapdemo/

I need to create a 2nd map that pops-up a map of London when you roll-over the London area, and then allows the user to click on the area they want - as per the main map.

I’ve tried importing a new movie, and creating a button within a button - and am not really getting anywhere.

Before I give up and go back to the day job (php developer), have you any sample code on how best to proceed please?

Many thanks, Richard
David Stiller Says:
November 15th, 2007 at 3:49 pm
Richard,

Ah, that’s a more complex beast than a quick example of how event handling works in AS3. I would probably avoid buttons within buttons and stick to movie clips instead — they share all the import mouse-related events, after all — plus, you can control the timelines of movie clips, which you might use for animation on those pop-ups.

What you’re describing is pretty much the sort of consultation I do for a living. I would certainly be cool with writing a tutorial on it, but it would definitely take an article or two of its own.
rick Says:
November 16th, 2007 at 3:34 am
addEventListener is really awesome for creating buttons from just about anything in flash, i.e. txt, iamges, swf etc

But I’ve been unable to turn an flv playing video into a button. The video plays fine, and I can attach the addEventListener script to the flvstream,

flvsteam0.addEventListener(MouseEvent.ROLL_OVER etc

but it doesn’t do anything - I’m still searching the net for someone that’s done this, but not having much luck, I was hopeing to get rid of all my “invisible buttons” alpha=0, that I had to use in AS3

- any ideas anyone
David Stiller Says:
November 16th, 2007 at 10:46 am
rick,

The reason Video objects don’t respond to MouseEvent events is because none of those appear in the Video class’s event summary, even if you click the Show Inherited Events hyperlink in the ActionScript 3.0 Language Reference. In order to get those, you could simply select your video and convert it to a movie clip symbol — making sure to give both the video and your movie clip their own instance names. Best of both worlds!
Tim Says:
November 16th, 2007 at 3:14 pm
Thanks David, you’re a life saver.
rick Says:
November 16th, 2007 at 11:42 pm
Hi, thanks for the fast reply, I understand what you say, however, it seems impractical to convert all my videos to movie clip symbols,

I’m using progressive download and and don’t know (until I decide) which flv video I want to watch, when clicked I can edit video attributes - e.g. size, alpha, rotation etc by pressing a letter e.g. s,m,r and just moving the mouse.

I guess for flvs I have to go back to what worked before - invisible placeholders (buttons)
rick Says:
November 17th, 2007 at 12:02 am
thanks learned to use the help better. From the help

Unlike other ActionScript 3.0 components, the FLVPlayback component does not extend UIComponent; therefore, it does not support the methods and properties of that class.

Cheers for your help
David Stiller Says:
November 20th, 2007 at 5:06 pm
To Tim …

Thanks!

To rick,

Glad I could help somewhat, and wish I could have given you an easier/better answer! Certainly, you’ll be most comfortable going with the approach that works best or makes the most sense to you. If invisible buttons feel like less effort than wrapping Video objects in movie clips, then that’s your ticket. You may want to check out the MouseEvent class to check into monitoring mouse events regardless what object is beneath the mouse.
rick Says:
November 23rd, 2007 at 12:54 am
Thanks for the great idea Dave!!! I love actionscript 3, but there are so many commands, it’s like you can’t so the woods for the trees, so I end you doing what works, not necessarily the best or easiest way.

If it’s OK, I have one more question.

When loading bitmaps I usually use:

var img:Loader = new Loader();

then in some function

some_function()
{
var request:URLRequest = new URLRequest(filename);

img.load(request);
addChild(img);

etc

and that works and it’s ok, but what if I don’t know how many images I may be loading. I could do…

var img:Loader = new Loader();
var img1:Loader = new Loader();
var img2:Loader = new Loader();
etc

but there should be a dynamic way of adding loaders when I need them (and killing them when I don’t)

Thanks for all your help
Lamar Says:
December 4th, 2007 at 3:37 pm
Dave,
I’m currently trying to have a button that, once clicked, will lead to Scene 2, but I am having a hard time. Here’s my current code:

link1.addEventListener(MouseEvent.CLICK, playLink1);

function playLink1 (e:MouseEvent):void
{
gotoAndStop(”main2″,”Scene 2″);
}

I named the button link1. I labeled the first frame “main2″ on Scene 2. No luck. Any suggestions? Thanks.
David Stiller Says:
December 4th, 2007 at 9:17 pm
To rick …

Well, you could certainly reuse a given Loader instance, but only to display one image at a time (change the Loader.url property to load a new image). You could also use BitmapData to copy the pixels of each loaded image, but generally speaking, it makes most sense to simply instantiate a new Loader object for each new bitmap. I hear ya on the monotony! If you don’t know how many images you’ll need — such as for a dynamic slideshow, say — you could use the array access operator and a for loop:
```
var urls:Array = ["a.jpg", "b.gif", "c.png"];

for (var i:int = 0; i < urls.length; i++) {
  this["img" + i] = new Loader();
  this["img" + i].load(new URLRequest(urls[i]));
  addChild(this["img" + i]);
}
```
The array access operator ([]) translates strings into object references. The only trick is that you need a parent object to act as a prefix to the expression (hence, the this). Later on, you could reference img0, img1, etc. and delete them. Does that help a bit?

To Lamar …

I set up a quick FLA with exactly your situation, and the button worked fine. Do you really have two Scenes? Is the second one named “Scene 2″?
Lamar Says:
December 5th, 2007 at 3:38 pm
Dave,
To create Scene 2, I went “Insert Scene” and i see a “Scene 2.” I then name the first frame “main2″ and put a stop(); at the first frame. Is this correct? I receive this error:

ArgumentError: Error #2108: Scene Scene 2 was not found.
at flash.display::MovieClip/gotoAndStop()
at Untitled_fla::MainTimeline/playLink1()

Your help is much appreciated. Thanks!

Lamar
David Stiller Says:
December 14th, 2007 at 10:57 am
[Note: Lamar wrote me later to indicate a solution had been found.]
rick Says:
December 19th, 2007 at 9:30 pm
Thanks so much Dave, you have been so helpful. Just one more challenge for you. I have a fix, but it is not so elegant

addEventListener is used to detect when something has happened for example timerevent, lodcomplete etc

So we setup a timer, or a load complete etc
//
/////////////////////////////////////////////////////
//
tim0:Timer = new Timer(800, 1) // set a timer 800ms, one-shot
tim0.addEventListener(TimerEvent.TIMER, tevent_0);

static function tevent_0(event:TimerEvent)
{
// do something here
}
//
/////////////////////////////////////////////////////
//
no problem with the above code, it just works, the problem at least for me comes when I have multiple timers, all going to the same event complete function e.g.
//
/////////////////////////////////////////////////////
//
tim0:Timer = new Timer(800, 1) // set a timer 800ms, one-shot
tim0.addEventListener(TimerEvent.TIMER, tevent_0);

tim1:Timer = new Timer(800, 1) // set a timer 800ms, one-shot
tim1.addEventListener(TimerEvent.TIMER, tevent_0);

static function tevent_0(event:TimerEvent)
{
// do something here
}
//
/////////////////////////////////////////////////////
//
Now, my challenge is I’d prefer to to find out which timer has caused the timer event - in one event listener function

at the moment, I just copy the listener tevent_0, a number of times, changing the name to tevent0, tevent1 etc

It’s ok with 2 timers, but with 32 which is what I am using, it’s annoying - there must be an easier way.

The same applies for all kinds to listener objects, most, if not all of the examples on the web show you how to handle one listener, but never multiple listeners pointing to the same place, that need to handled almost in the same way, and there doesn’t seem to be any way that a listener function can know exactly who called it

Best Regards,
Rick
David Stiller Says:
December 19th, 2007 at 10:13 pm
Rick,

It sounds like you’re talking about the Event.target and Event.currentTarget properties in AS3. Have you checked those out? Event subclasses, such as TimerEvent, inherit those properties, and they tell you which object is involved in the handling of the event.
rick Says:
December 22nd, 2007 at 12:38 am
ok tanks Dave,
Will have a go, tell you what I figure out

Also, just messing around generally with timers, I found that timers can be influenced by moving your mouse around your desktop, especially above the close/minimize buttons in windows.

In addition, my timer tends to lose a second or more over the course of a minutes.

var timr:Timer;
timr = new Timer(100, 0);
timr.addEventListener(TimerEvent.TIMER, player);
timr.start();

Is this normal? Or am I doing something wrong???

By the way, thanks so much for your help, if you’re ever in Tokyo, drop me mail and I7ll take you out for a few beers on me.

Have a happy chistmas/holidays (choose one) and a great new year!

Best Regards,
Rick
Aaron Says:
December 29th, 2007 at 6:09 pm
I’ve been using flash since flash 8, 9, MX, then I’m working on CS3…I’m trying to make a pop-up menu on the bottom of a page, I initially started it as a button on the OVER state without actionscripting [3.0] it (and once the mouse was over, it would play a 15 frame animation of the menu rolling up), but then I read it’s better not to embed a button in a button (I WAS going to have the button once rolled out have different clickable buttons/menu options on it).

Anyways, I have the menu as a movie clip, 15 frames long and I used ASC3.0 to gotoandplay that clip when the mouse moves over it, it works fine when I move the mouse over the HIT area and then away, but if I leave the mouse on the HIT area it’ll keep looping, I know I have to write a snippet to specify the stop and how based on mouse position I think, but am looking for some help–I’m trying to figure out how to write the code so when the mouse goes over, it’ll play the POP-UP movie clip animation once and then go to the wait state (a while loop perhaps? but I wouldn’t know how to write and intergrate into what I have) if you will till the user clicks on a menu option but then to reset the animation when they move their mouse away, here’s the code I have currently:

import flash.events.MouseEvent;

firstmenutab.addEventListener(MouseEvent.MOUSE_OVER, rolloutClick);
function rolloutClick(event:MouseEvent):void {
firstmenutab.gotoAndPlay(1);
}

I found this above structure at adobe.com’s flash site.

Finally, I bought Colin Moock’s book but like you said it’s like 1000 pages, a lot to cover, I did find some usefulness from actionscriptcheatsheet.com which shows what’s new in ASC3.0 and what from ASC2.0 has been removed, if you can point me in the right direction at least what to do to accomplish my mouse issue on the roll-out menu I’m developing, I’d appreciate it David, ty
Aaron Says:
December 29th, 2007 at 7:13 pm
I got it working, I decided to work on the animated rollout later, here’s my working code! ASC3.0 kicks ass:

firstmenutab.stop();

firstmenutab.addEventListener(MouseEvent.CLICK, clickHandler);
firstmenutab.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
firstmenutab.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

firstmenutab.buttonMode = true;

function clickHandler(evt:Object):void {
trace(”menu clicked”);
}
function mouseOverHandler(evt:Object):void {
firstmenutab.gotoAndStop(30);
}
function mouseOutHandler(evt:Object):void {
firstmenutab.gotoAndStop(1);
}
David Stiller Says:
December 31st, 2007 at 12:38 pm
To Rick …

It doesn’t surprise me that your timers occasionally lose a bit of time, though that would probably annoy me if I saw it myself (depends on the goal of the application, I’m sure). Flash Player isn’t designed to take priority on a user’s system, and my hunch is that Flash is willing to give up 100% accuracy to keep from bogging down the OS.

As it happens, I do plan to be in Tokyo for a couple weeks this year! Maybe we’ll meet.

To Aaron …

Hey, glad you got it! And thanks for the link to the cheat sheets site. Pretty neat PDFs!
Leigh Rochow Says:
January 2nd, 2008 at 10:08 pm
G’day David!

As an Illustratior in education I purchased the Adobe CS3 suite. I’m completely new to flash’s scripting.

I was reading over your blog, it really helped me get my buttons working and my next step is to get them to display an image. I’ve aligned the images to frames 5, 10, 15, 20 etc in my main timeline so I’d like the buttons to point to these frames in the timeline.

I was reading over your extremely helpful conversation with Casey G about gotoAndPlay(). The code Casey used works for me, but the main timeline wont shift to that frame.

I think my problem is the fact that my buttons are contained within a ScrollPane and my buttons are merged as a movie called “thumbnails_mc”. The code I have does not work if I include it on a base “scene 1″ layer. It only works if I place the code on a layer within thumbnails_mc.

This leads me to believe that the code I have isn’t pointing towards scene 1 but towards the movie clip?

Here is what I have in the “thumbnails_mc” movie clip

portrait_btn.addEventListener( MouseEvent.MOUSE_UP, function(evt:MouseEvent):void { trace("PORTRAIT_BTN CLICK!"); evt.target.parent.gotoAndPlay(5) } );

I receive no errors and the trace works fine. But the main timeline in Scene 1 remains stationary.

I have stop() in a layer on scene 1. Maybe this is preventing anything changing the current frame?

Sorry, I’m sure thats confusing to read as a professional. Thank you for any help you can provide!

:D
Leigh Rochow Says:
January 3rd, 2008 at 12:03 am
I found something which works for me!

After smooshing through forums and blogs I finally found a snippet of code which I thought I should try.

After all it was a heirachical problem. Geeze this scripting stuff has a tough learning curve.

evt.target.parent.gotoAndPlay(5) evt.target.root.gotoAndPlay(5)

Thank you for offering such a great blog David!

I hope my learning helps others! If you see anything wrong with what I’ve done please let me know. I’m a happy camper otherwise
Leigh Rochow Says:
January 3rd, 2008 at 12:39 am
Very sorry to flood the blog but I tested the flash on multiple explorers.

www.adam.com.au/zeal/illustration.html

Iexplorer and Firefox both work, but safari on OSX doesn’t seem to run the scrollpane at all..

Any ideas?
David Stiller Says:
January 3rd, 2008 at 9:52 am
Leigh,

haha Don’t worry about the flood! I enjoy the interaction with people, and most of these conversations end up helping others.

In your first two posts, you discovered a fundamental principle in programming: object references. Objects have a hierarchy in Flash, very much like the files on your hard drive — they’re stored inside folders, which can be nested inside each other.

You could stick your head out the window and shout, “David!” but since I’m in the US and you’re in Australia, I wouldn’t hear you. You might have a neighbor named David, in which case he might respond — but that wouldn’t be right either (assuming you really did mean me). You would have to correctly reference the “object” that represents me, which from your point of view is in the US, then Virginia, then Virginia Beach, then my street, my house, my office, and finally me.

In this expression …

evt.target.root.gotoAndPlay(5)

… you’re referencing the DisplayObject.root property of the object that raised the event you’re handling (that’s the button, as referenced by the expression evt.target). In this context, root points to the display list for the whole SWF, whose hightest level is the main timeline. Since the main timeline is an instance of MovieClip, you have access to MovieClip methods, such as gotoAndPlay() (though you might want to try gotoAndStop()).

As for the Safari issue … that’s interesting. The scrollpane you’re using is definitely the AS3 version. Has your Flash Player plugin for Safari been updated to version 9? Flash Player 9 is the first version capable of interpreting ActionScript 3.0.
Leigh Rochow Says:
January 6th, 2008 at 7:39 am
Thank you for your response, I love your writing style, your first few words cleared things up for me and the rest just added clarity!

I took a stab and changed parent to root. I wanted to change the frame number in the stages timeline. Luckily it worked, otherwise I’m sure I would have produced yet another trail and error compile error.

Can I ask a question for future reference and maybe of interest to other readers?

Say I have 2 container objects, MovieA and MovieB. I now know how to reference the root timeline, but how would I referense from object A to object B?

Inside MovieA would I include something like the following code?

evt.target.MovieB.gotoAndPlay(5)

Also, how would I reference something deeper in hierarchy? I’m sorry for the fundamental question.

Thank you for your response. I’m considering entirely redoing my webpage in flash, which is extremely daunting but i’m sure i’ll learn a mountain in the process. Once again, thank you for such a wonderful resource! You’ve helped me take a positive first step into AC3.

P.S. Yes, the mac later had a popup alerting me to update flash. Woops!
David Stiller Says:
January 6th, 2008 at 8:49 pm
Leigh,

Thank you for your response, I love your writing style, your first few words cleared things up for me and the rest just added clarity!

Sweet! Well, if it’s worth your while, you might find some benefit from Foundation Flash CS3 for Designers (friends of ED). The Amazon.com price is low; just enough, in fact, to get you free shipping (actually, that’s for US addresses; not sure how that would pan out for you). I co-wrote that one with Tom Green in the middle of 2007, and the reviews have been good. It may help you get introduced to other ActionScript concepts.

Say I have 2 container objects, MovieA and MovieB. I now know how to reference the root timeline, but how would I referense from object A to object B?

It all depends on where those objects in relation to each other. If MovieA is in the root, then evt.target.root.MovieA should do it. Alternatively parent could prove useful. Remember, evt.target (in this context) gives you a reference to the object that dispatched the event. If that object happens to be — and I’m making this up — MovieA, and if MovieB is in the same timeline as MovieA, then the parent of both of those objects is the same (doesn’t matter if that parent is root or not). So evt.target.parent.MovieB might very well work from MovieA’s point of view.

You’ve helped me take a positive first step into A[S]3.

Glad to hear that, Leigh!
Bob Says:
January 16th, 2008 at 5:31 am
Hey david,

I am trying to make my button jump from Scene 1 to Scene 2.
Here is the line of code I put in

about.addEventListener
(MouseEvent.MOUSE_DOWN,
function(MouseEvent)
{(gotoAndPlay(”1”,”Scene 2″))});

When I test the movie I get a syntax error, what am I doing wrong

thanks
Bob
David Stiller Says:
January 16th, 2008 at 8:44 am
Bob,

I noticed a couple things. Here’s my take on the same snippet:
```
about.addEventListener(
  MouseEvent.MOUSE_DOWN,
  function(evt:MouseEvent):void {
    gotoAndPlay(1, "Scene 2");
  }
);
```
Notice that the function now receives an arbitrarily named parameter, evt, which is typed as MouseEvent (yours was missing evt, or some other name for the same parameter). I also typed the return value of this function as void, because it doesn’t return a value. Then, in the gotoAndPlay(), I notice you had the 1 in quotes, but unless you have a frame label named “1,” this parameter should be a number.
Jared Says:
January 20th, 2008 at 10:36 am
Hello, I’ve got a question of hierarchy.

MovieClip rhino1 is embedded inside btn3dSub, therefore the event listener is

btn3dSub.rhino1.addEventListener(MouseEvent.MOUSE_OVER, btnSubOver);

and the function would be

private function btnSubOver(evt:Event):void
{
this[evt.target.parent.parent.name.evt.target.parent.name].gotoAndPlay(”over”);
}

The code above does not work. My question is how can I combine evt.target.parent.parent . evt.target.parent . gotoAndPlay(”over”) to achieve btn3dSub.rhino1.gotoAndPlay(”over”);

Have been scratching my head for days. Thanks for your help.
David Stiller Says:
January 20th, 2008 at 8:23 pm
Jared,

As it turns out, you don’t need the array access operator here. A direct object reference will do. If btn3dSub happens to be in the same scope as the event handler function, you could simply reference it by instance name:
```
function btnSubOver(evt:MouseEvent):void {
  btn3dSub.gotoAndPlay("over");
}
```
Otherwise, you could use this:
```
function btnSubOver(evt:MouseEvent):void {
  evt.target.parent.gotoAndPlay("over");
}
```
From the point of view of rhino1, btn3dSub is its immediate parent. Therefore, evt.target.parent points to btn3dSub. Note, the name property isn’t included, because that returns a string. What you want is a reference to the object itself.
Covali Ioana Says:
February 6th, 2008 at 10:17 am
“evt.target.root.gotoAndPlay(5)” this line saved my life. i spent 2 day surfing the net in search of an answer. hope was almost lost . u are great. really the best blog. thank you very much and keep it up
David Stiller Says:
February 6th, 2008 at 11:24 am
Covali,

Glad to hear that!
Emily Says:
February 22nd, 2008 at 5:45 am
Hi David,

Sorry to bother u. I have a flash intro and after playing, it will jump to another swf file.

//I added these code at the last frame and works fine//

stop();
var swf2:String=’general.swf’;
var requestSWF2:URLRequest=new URLRequest(swf2);
var loader2:Loader=new Loader();
loader2.load(requestSWF2);
addChild(loader2);

And now, I want to add a “Skip Intro” button to avoid playing the boring intro everytime. So, I added a “Skip Intro” button which I want to jump to another swf file after clicking it.

myButton.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {

var swf2:String=’general.swf’;
var requestSWF2:URLRequest=new URLRequest(swf2);
var loader2:Loader=new Loader();
loader2.load(requestSWF2);
addChild(loader2);

}
);

….and I failed. Could you help me on this? Thx!
David Stiller Says:
February 22nd, 2008 at 9:00 pm
Emily,

You didn’t say what failed, but I see from what you’ve typed so far that your problem might be the duplicated variable declarations. In ActionScript 3.0, variables can only be declared once per scope, and if the above code all appears in frame scripts in the main timeline (which is my hunch), then you’re using var to make multiple declarations.

Give the following a try, and let me know if it it doesn’t work for you:
```
// First frame
var swf2:String = "general.swf";
var requestSWF2:URLRequest = new URLRequest(swf2);
var loader2:Loader = new Loader();
addChild(loader2);

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    loader2.load(requestSWF2);
  }
);

// Last frame
stop();
loader2.load(requestSWF2);
```
Note that each of the necessary variables is only declared once. Once they’re set up in the first frame (or wherever your button appears), all the button handler needs to do is invoke that load() — and that’s all that needs to happen on the last frame, too.

Does that make sense?
Emily Says:
February 22nd, 2008 at 9:36 pm
Thank you so much David!

It does jump to next swf file “general.swf”, but the intro flash still playing at the back while the “general.swf” is loaded and overlapping on the intro flash… Now 2 swf files playing (overlapping) at the same time, but I just want the general.swf file playing after clicking the “Skip Intro” button.

Would you help me again on this issue??? Thx!
David Stiller Says:
February 22nd, 2008 at 9:41 pm
Emily,

Gotcha. Well, the revision I just suggested doesn’t actually stop the main timeline, which it probably should. You could either change the MOUSE_UP handler to this:
```
myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    stop();
    loader2.load(requestSWF2);
  }
);
```
… or maybe replace it altogether with this:
```
myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    gotoAndStop(250);
  }
);
```
… where the number 250 represents the last frame of your SWF — which means the playhead will jump straight there and execute the load() on that last frame. The first approach might be better, though, because the playhead won’t be able to jump to the last frame if your SWF hasn’t fully loaded (if it hasn’t, the last frame won’t exist yet, y’know?).
Emily Says:
February 22nd, 2008 at 10:35 pm
Thank you so much and it works with 2 approach. Thanks a lot!

1 approach did stop stop the intro but not the bg sound(sorry, forgot to mention at the beginning.) So, I took the 2nd approach, and works fine, thank you so much for your quick and helpful response!!!
Molly Says:
March 3rd, 2008 at 9:49 am
HELP!!! I’ve just been rudely introduced to actionscript 3.0. i was using the older versions and now cannot make a button get a URL! The instance name of my button is btnInv. What code should I use? Thanks a million. Molly
David Stiller Says:
March 3rd, 2008 at 9:55 am
Molly,

See my answer to Tomek on September 18, 2007. The only difference for you is that the instance name will be btnInv instead of myButton.
la Swear Says:
March 6th, 2008 at 5:18 pm
hello,

I am having a hard time figuring out why a student’s .FLA keeps giving me this error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at nelson03_fla::MainTimeline/resumeA_mcRollOut()

when you’ve clicked into the About Me scene and click his resume MC (to go to the resume scene)

here is the actionscript:

resumeA_mc.buttonMode = true;
resumeA_mc.addEventListener(MouseEvent.MOUSE_UP , scrollText1 );
function scrollText1(event:MouseEvent):void {
gotoAndPlay(”scrollbar” , “Resume”);
}
resumeA_mc.addEventListener(MouseEvent.ROLL_OVER , resumeA_mcRollOver );
function resumeA_mcRollOver(event:MouseEvent):void {
resumeA_mc.gotoAndPlay(”overResume”);
}
resumeA_mc.addEventListener(MouseEvent.ROLL_OUT,resumeA_mcRollOut);
function resumeA_mcRollOut(event:MouseEvent):void {
resumeA_mc.gotoAndPlay(”upResume”);
}

thank you!
David Stiller Says:
March 6th, 2008 at 8:45 pm
la Swear,

Well … I have to say, that code looks just fine. The error seems to be indicating that there’s an issue specifically in the resumeA_mcRollOut() function — but from what I’m seeing, all your student’s “i”s are dotted and “t”s crossed.
la Swear Says:
March 7th, 2008 at 6:52 am
Thank you for looking at that, someone else suggested putting everything in one scene, but
it’s frustrating not to be able to help the kid or explain WHY he’s getting that error.

Awesome blog and great, clear explanations, thanks so much for your help!

~la Swear
Alex Says:
March 8th, 2008 at 2:16 pm
Hey David (or anyone that can help). This’ll be a dumb question for you guys but I’m new with flash.

Problem: Have a button with a movie clip in the OVER state set to play once and then stop. When the button is pressed it always goes back to the OVER state and plays the movie again. I only want the movie to play once and the user can press the button a zillion times and always go back to the DOWN state so that the movie won’t replay again until he takes his mouse off the clip.
If I recall this didn’t happen in Flash 8 and now with CS3 it does. Any thoughts and thanks for the help!

AlexW
David Stiller Says:
March 8th, 2008 at 10:11 pm
To la Swear …

Thanks for the kind words! I wish I could have answered your question.

To Alex …

Honestly, I’m getting the same response from Flash 8 as I am from Flash CS3. In either authoring tool, button symbols behave like this: the Down state defines the visuals when the mouse is clicked over the symbol; the Over state defines the visuals when the mouse is over the symbol, but not clicked — and that includes when the mouse button has been released from a clicked state.

In other words, the Up state is default. When you roll over the symbol, the Over state is displayed. When you click, the Down state is displayed. When you release again, the Over state is displayed. Finally, when you move the mouse away, the Up state is displayed.
Alex Says:
March 8th, 2008 at 11:05 pm
Hey David thanks for the reply! I’m clear on all the states of the button. I’ll try to rephrase my question:

Up State: No Problems here
Over State: I have a short movie clip here of a cloud exploding and text appearing
Down State:The text changes colour (exciting!)
Hit State: No problems here.

What I am trying to do is have the cloud explode and text appear (over state) and after clicked the movie NOT to be replayed while the mouse is still over the button symbol. Basically the cloud has remained exploded even after the button has been pressed. Any ideas?
Petra Says:
March 11th, 2008 at 6:54 am
I noticed that this blog is really good. I am new to flash and I can’t find the answer to my question online.
I have a movie clip playing within the main movie and at the end I want this movie clip to stop and then go to main movie timeline. basically I want then my main movie to play. How do I make that happen? to refer to maintimeline within a movie clip?
I hope you can help me with that. Or at least tell me where I could find the answer.
Æli Manouchehri Says:
March 13th, 2008 at 4:41 pm
Hi David,
I have truble showing my flash movies in ie7, they work perfektly in Safari and Opera.

Pulling my hair out over this
David Stiller Says:
March 15th, 2008 at 7:39 pm
Æli Manouchehri,

I wonder if your HTML is incorrectly formatted? Are you using both <object> and <embed> tags?
Kevin Says:
March 17th, 2008 at 10:04 pm
Hi David,

I’m trying to get a vertical popup menu that will have four menu items that will cause a change of an item on the stage being controlled by the clicking of one of the menu options. I just went to Flash and ActionScript 3.0 class last week and know just enough to give myself a headache. Do you have any suggestions on the best way to go about this?
Akaliza Says:
March 18th, 2008 at 4:56 pm
Thanks man, I’ve been trying to work this out for days!
God bless you!
Kenzie Says:
March 19th, 2008 at 3:32 pm
David;

I need your help. BTW your site has been very helpful!!

I am using Action Script 3.0
I have a music file in a frame and I am using a buttom that allows the user to skip forward to another frame. I have that working but the music still plays. I can’t get it to stop!! I want the button to stop the music and move forward to another frame. Here is the code I have to go forward to another frame but I can’t get the stop music to work for me.

skipto.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
evt.target.parent.gotoAndPlay(1135);
}
);

THANK YOU!!!!
David Stiller Says:
March 20th, 2008 at 12:41 pm
To Alex …

What I am trying to do is have the cloud explode and text appear (over state) and after clicked the movie NOT to be replayed while the mouse is still over the button symbol.

In ActionScript 3.0, button symbols are defined by the SimpleButton class, which is not a dynamic class. That means it can’t have properties added to it an runtime, which (I think) is the reason you can’t refer to a button symbol’s movie clip children by instance name.

I tried a few approaches in which I put code into a nested movie clip’s own timeline, refering to its parent (the button), but things started getting pretty dicey. You’ve posed an interesting puzzle, and I’ll probably keep grappling with this one for a while, but in the mean time, I was able to work toward a solution — not an especially simple one — by replacing the button symbol with a movie clip instead. Inside this movie clip, I nested a second movie clip symbol, which was my version of your explosion. The outer movie clip only has one frame.

Assuming the instance names myButton and myClip, even though myButton is actually a movie clip symbol, here’s a bit of code that gave me — I believe — what you’re after:
```
myButton.mouseChildren = false;
myButton.myClip.visible = false;
myButton.myClip.stop();
myButton.myClip.ready = true;

myButton.addEventListener(
  MouseEvent.MOUSE_OVER,
  function(evt:MouseEvent):void {
    myButton.myClip.visible = true;
    myButton.myClip.play();
  }
);

myButton.addEventListener(
  MouseEvent.MOUSE_OUT,
  function(evt:MouseEvent):void {
    myButton.myClip.visible = false;
    myButton.myClip.gotoAndStop(1);
    myButton.myClip.ready = true;
  }
);

myButton.addEventListener(
  MouseEvent.MOUSE_DOWN,
  function(evt:MouseEvent):void {
    myButton.myClip.visible = false;
    myButton.myClip.gotoAndStop(1);
    myButton.myClip.ready = false;
  }
);

myButton.addEventListener(
  MouseEvent.MOUSE_UP,
  function(evt:MouseEvent):void {
    myButton.myClip.visible = false;
    myButton.myClip.gotoAndStop(1);
  }
);
```
That first line, addressing myButton’s mouseChildren, keeps myClip from responding to mouse events. That ready variable in myClip’s timeline is used by later code to decide when and when not to play myClip’s animation.

To Petra …

How do I make that happen? to refer to maintimeline within a movie clip?

All you really need is to put a frame script in the last keyframe of your movie clip’s timeline, referencing the MovieClip.parent property of the movie clip:
```
// Last frame of movie clip ...
this.parent.play();
```
However, given the way AS3 handles this particular reference, you’ll need to let ActionScript know that the timeline reference by this.parent is actually a MovieClip instance. You can do that by casting the reference as MovieClip:
```
// Last frame of movie clip ...
MovieClip(this.parent).play();
```
To Kevin …

I’m trying to get a vertical popup menu that will have four menu items that will cause a change of an item on the stage being controlled by the clicking of one of the menu options.

There are a number of ways you might approach this, depending on the complexity of your goal (should the menu animate into place, or just suddenly snap into visibility? etc.). One simple approach could be to put your menu buttons inside a movie clip symbol. Give the movie clip symbol an instance name, and do the same for the nested buttons.

In your main timeline frame script, wire up the buttons by referencing the movie clip’s instance name first, then each button in turn …
```
myClip.myButtonA.addEventListener(...);
myClip.myButtonB.addEventListener(...);
myClip.myButtonC.addEventListener(...);
```
… and also set the visibility of the movie clip to false.

Wire up another button, also on the main timeline, to set the visibility of the movie clip to true when clicked.

It gets more complicated, of course, because you’ll want the movie clip to disappear again when you mouse away from it. You could write a MOUSE_OUT event handler for that movie clip that would set itself back to invisible. Also bear in mind, the movie clip and its buttons will be active, even when they’re not visible, so you’ll want to introduce InteractiveObject.mouseEnabled — inherited by buttons and movie clips — and DisplayObjectContainer.mouseChildren — inherited by movie clips — into the equation (see my reply to Alex).

To Akaliza …

Thanks man, I’ve been trying to work this out for days!

Glad to help!

To Kenzie …

I have a music file in a frame and I am using a buttom that allows the user to skip forward to another frame. I have that working but the music still plays. I can’t get it to stop!!

My hunch is that your audio is attached directly to the main timeline (in a keyframe) and that it’s configured as an Event sound, which means the whole thing is triggered at once and plays all the way through. Select that keyframe and change it to Stream. Let me know if that helps, or if my hunch is totally off.
Billy Says:
March 20th, 2008 at 2:39 pm
hi there, wondering if you could help me? i recently started a job as a web designer, i’m 19 but taught myself html and graphics using photoshop etc from the age of 11. upon getting this job i was told i needed to learn flash (actionscript3.0), CSS, using DIVS and learning to write pages from raw HTML all over again rather than use dreamweaver or frontpage.

The problem is I have made a layout in photoshop, cut up the images, lined them up in HTML using divs perfectly fine, but the layout has 2 flash elements. the first is a simple picture fader which is working fine, the second is the nav bar. I am using an IFrame for the pages, but can’t get my flash nav bar buttons to target the IFrame.

In the flash file I have a layer for the background and a layer for each of the 3 nav buttons, this is the AS3.0 i have applied to each button…

contact.addEventListener(MouseEvent.CLICK, bClick);
function bClick(event:MouseEvent):void {
navigateToURL(new URLRequest(”contact.html”), (”iframe”);
trace(”I’m Clicked”);
}

It doesn’t work no matter what I try, please help!

Regards
Billy
David Stiller Says:
March 20th, 2008 at 2:47 pm
Billy,

What’s the value of the name attribute of your <iframe> element? Whatever you use to target that <iframe> in your ActionScript — looks like you’re using “iframe” — that’s what you need to actually name that element in your HTML code (that second parameter doesn’t need to be in parentheses, by the way).
Billy Says:
March 24th, 2008 at 3:24 pm
the name of the iframe is actually just iframe but cheers for the help ill try it out shortly and get back to you
cheers
Billy
David Stiller Says:
March 24th, 2008 at 3:30 pm
Billy,

I don’t know for sure, but my hunch is that naming an element the name of that element potentially confuses matters. How about naming it “externalContent”?
billy Says:
March 24th, 2008 at 6:55 pm
right i really am not getting anywhere with this, could you possibly re-write the AS3 for me with what you think will solve the problem? i don’t know if i need to use variables or anything. and also, am i right in having a seperate code for each button putting the actions on the keyframe of each button layer?
David Stiller Says:
March 24th, 2008 at 7:53 pm
Billy,

You don’t really need any variables. Just a click handler and the proper parameters in your navigateToURL() call. Since your button seems to have the instance name contact, I used that in my own test of your endeavor. Here’s my ActionScript 3.0:
```
contact.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(evt:MouseEvent):void {
    navigateToURL(new URLRequest("http://www.adobe.com"), "externalContent");
};
```
am i right in having a seperate code for each button putting the actions on the keyframe of each button layer?

Personally, I would put all three buttons in one layer (though a separate layer for each would be fine) and I’d put all my ActionScript in its own layer named “scripts.” In order for the above example to work, an <iframe> tag needs to be added to the HTML document — an <iframe> tag whose name attribute matches the second parameter of the navigateToURL() call:
```
<iframe src="http://www.quip.net/" name="externalContent"></iframe>
```
Kevin Says:
March 24th, 2008 at 8:09 pm
Thanks David
David Stiller Says:
March 24th, 2008 at 8:32 pm
Kevin,

Sure thing!
billy Says:
March 24th, 2008 at 8:58 pm
still no joy david. don’t know whats going wrong. my iframe is now called externalContent but it’s still not working. when i test movie or export movie i get the error “duplicate function definition” (twice) on the function clickhandler part.
David Stiller Says:
March 24th, 2008 at 11:17 pm
Billy,

Ah! Then you’re defining your function more than once — whether you’re calling it bClick() or clickHandler(), something else.

Does each of your separate functions send the <iframe> to a unique URL? If so, the easiest thing is to write three separate functions, such as clickHandlerA(), clickHandlerB(), and clickHandlerC() (or name them something more descriptive, like contactHandler(), aboutUsHandler(), etc.).

If, instead, all three buttons are using the same function, then you only need to define the function once, and supply that same function as the second parameter to all three buttons’ addEventListener() call.
Luke Says:
March 25th, 2008 at 2:15 am
Great tips!! however I am having a different difficulty I believe that others may also be having.

I am working in Actionscipt3 and have flash document with a number of key frames each having different content. Buttons to click back and forth between different pages are repeated across these pages so that the user can navigate between the sections of the site. My difficulty is that I must be missing something in the transition from actionscript2. I wanted not to have to repeat the same code over and over to enable the button instances to function that are reused throughout the site to take the user to the appropriate section on release of the mouse. Sounds simple but it’s been a headache. I get compiler errors stating properties, methods & accessibility Properties are not defined.

Please help!! Thank you…

HERE IS PART OF THE PACKAGE CODE: (Only defines & listens for two buttons at moment)

package

{

//IMPORT AC3 CLASSES NEEDED
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;

//DEFINE MAIN CLASS
public class evulonMain extends MovieClip
{

//DEFINE FUNCTION & EVENT LISTENER

//GENERAL NAVIGATION DEFINED & LISTENER

//profilePage event handler, function name “clickProfile”
function clickProfile(event:MouseEvent):void {
//goto “profile” label
gotoAndStop(”profile”);
}
//profilePage event listener: instance name “profilePage” & handler name “clickProfile”
profilePage.addEventListener(MouseEvent.CLICK, clickProfile);
//output text
trace(”profile page button clicked”);

//tutoringPage event handler, function name “clickTutoring”
function clickTutoring(event:MouseEvent):void {
//goto “tutoring” label
gotoAndStop(”tutoring”);
}
//tutoringPage event listener: instance name “tutoringPage” & handler name “clickTutoring”
tutoringPage.addEventListener(MouseEvent.CLICK, clickTutoring);
//output text
trace(”tutoring page button clicked”);
}
}
Æli Manouchehri Says:
March 25th, 2008 at 4:33 am
So here is how my code looks:
Billy Says:
March 25th, 2008 at 9:11 am
aha! progess! not quite there yet tho, but the links now work, only problem is theyre opening the page in a new window rather than the Iframe, which I named “externalContent” same as the parameter of the URLRequest in the AS3. any thoughts?
cheers
Billy Says:
March 25th, 2008 at 9:45 am
this is the current code

home.addEventListener(MouseEvent.CLICK, clickHandlerA);

function clickHandlerA(evt:MouseEvent):void {
navigateToURL(new URLRequest(”index2.html”), “externalContent”);
};

prices.addEventListener(MouseEvent.CLICK, clickHandlerB);

function clickHandlerB(evt:MouseEvent):void {
navigateToURL(new URLRequest(”prices.html”), “externalContent”);
};

contact.addEventListener(MouseEvent.CLICK, clickHandlerC);

function clickHandlerC(evt:MouseEvent):void {
navigateToURL(new URLRequest(”contact.html”), “externalContent”);
};
David Stiller Says:
March 25th, 2008 at 11:24 pm
To Luke …

Off the top of my head, I see references to profilePage and tutoringPage that aren’t defined in this class, so that may be a good place to start troubleshooting. Is this a document class? Should you be declaring these button instances?

To Æli …

Your code didn’t come through, so I followed up with you via email. Fire back, and I’ll post your code.

To Billy …

At this point your AS3 looks fine. What’s the URL to this page? Maybe I can see something in the HTML.
Luke Says:
March 27th, 2008 at 3:28 am
thank you for your feedback.

with the following code below I am now getting 2 errors and cannot find help on the topic that makes sense to me.

-error 1120 undefined property for applyPage & clickApply??
-& error 5000 the class “applyForQuote” must subclass flash.display.SimpleButton??

Secondly can you explain the purpose of the document class??

Thankyou..

package {

//IMPORT AC3 CLASSES NEEDED
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.SimpleButton;
import flash.events.Event;
//import flash.accessibility;

//DEFINE APPLY FOR QUOTE BUTTON CLASS, FUNCTION, LISTENER
public class applyForQuote extends MovieClip {
//applyPage event handler, function name “clickApply”
public function clickApply(event:MouseEvent):void {
//goto “apply” label
gotoAndStop(”apply”);
}
//applyPage event listener: instance name “applyPage” & handler name “clickApply”
applyPage.addEventListener(MouseEvent.CLICK, clickApply);
//output text
trace(”apply page button clicked”);
}
}
Anita Says:
March 30th, 2008 at 5:33 am
I’m having a problem with buttons (big surprice ). Two buttons (first image alpha out and the next in, and vice versa) are placed in separate layers, and both buttons keep directing to the first URL (big mystery to me!).

The code:

maria.addEventListener(MouseEvent.CLICK, gotomaria);
function gotomaria(event:MouseEvent):void {
//navigateToURL(new URLRequest(”http://www.fef-aalborg.dk/testsite/sider/rapport/indien2008maria.html”), “_self”);
}
lisser.addEventListener(MouseEvent.CLICK, gotoingerlise);
function gotoingerlise(event:MouseEvent):void {
//navigateToURL(new URLRequest(”http://www.fef-aalborg.dk/testsite/sider/rapport/indien2008ingerlise.html”), “_self”);
}

I checked instance names, etc., but nothing has helped. They should be able to work, although they’re placed on top of each other (fading out/in), shouldn’t they?

Anita
Kenzie Says:
March 31st, 2008 at 11:33 am
David.
Just wanted to let you know that the fix you gave me for my music worked. thank you so much!!
eli Says:
March 31st, 2008 at 7:37 pm
So I found your page and used this code to write my menu successfully! Thank you! But a question: I have an event listener for MOUSE_OVER OUT and UP for such a small menu/submenu rollouts it just seems like so much code… Is there a shorter way to write the code?

check it out here

What do you think?
Shane Says:
April 1st, 2008 at 12:25 am
Billy,

I was having the exact same issue as you.

It turns out your code is most likely perfect - try uploading it and testing it fromt he actual website.

When I was testing the HTML pages locally I was having the issue where clicking the link didn’t open in the iframe, but in a new window. After uploading it to the live site the buttons opened the content correctly within the iframe.

I hope that helps

-Shane
David Stiller Says:
April 1st, 2008 at 9:36 am
To Luke …

-error 1120 undefined property for applyPage & clickApply??
-& error 5000 the class "applyForQuote" must subclass flash.display.SimpleButton??

The mention of “must subclass flash.display.SimpleButton” leads me to believe you’re using a linkage class, and that you’re adding linkage to a button symbol. If that’s the case, then you will indeed need to make your classs extend SimpleButton rather than MovieClip:
```
public class applyForQuote extends Simplebutton { ... }
```
I’m not sure (so far) why you’re using a custom class — not that there’s anything wrong with a custom class; it’s just that doing so adds a layer of complexity to your goal, which means you have more steps to troubleshoot. The “undefined” applyPage property, in particular, suggests to me that you haven’t given a button symbol the instance name applyPage, but if this class truly needs to extend SimpleButton, then all of this takes place inside a button symbol, and you wouldn’t have a nested button anyway.

can you explain the purpose of the document class??

Sure. Essentially, a document class is the FLA version of a linkage class. In AS3 documents, you can associate an external class file with the main timeline of the FLA. In affect, you can re-write the behavior of the main timeline — by extending MovieClip or Sprite — in the same way that you can re-write the behavior of a Library asset with a linkage class.

These are all cool ideas, for sure, but none are necessary for wiring up buttons in AS3. I think it may help you, at this point, to save your current work and start a fresh set of files — very simple files, just enough to act as proofs of concept — and work your way through the various mechanics involved in a) wiring up a button from a frame script, b) attaching a button symbol at runtime from the library (both with and without an actual class file), c) using a linkage class to affect event handling for a button symbol.

This is only a hunch, mind you, but it seems to me like you’re using a linkage class to handle a button’s events.

To Anita …

It sounds to me like one of these buttons is stacked on top of the other. When the top one is alpha-ed out, it should be removed from the timeline, otherwise it will continue to be present (even if invisible). Does that make sense?

To Kenzie …

Glad to hear that!

To eli …

In its simplest form, what you’ve shown is fine. Yes, it’s a lot of code, but coding is a complex discipline and often takes a lot of work. You could certainly reduce the sheer number of lines by writing a single function and using, say, a switch statement to evaluate the current button’s instance name, then make your decisions based on that.

To Shane …

Thanks for that insight. I was able to test locally, but that may have been due to the so-called “mark of the web” statement in my HTML document (I wouldn’t swear by that, but it’s a thought).
Brandon Says:
April 10th, 2008 at 6:36 am
Hi,

I’ve read through and tried to follow along with these problems, I’m still missing something. In my movie clip I want to stop and goto frame 2 in my Scene labled “Main Content”. So I have the following script:

import flash.display.MovieClip;
gotoAndPlay(2,”Main Content”);
stop();

When it does to do the “gotoAndPlay(2, “Main Content”);” I get this error:

ArgumentError: Error #2108: Scene Main Content was not found.
at flash.display::MovieClip/gotoAndPlay()
at Untitled_fla::Background_1/Untitled_fla::frame76()

I saw that somone else had the same error, but found a soultion. I need some help! Thanks a lot!
Tristan Says:
April 10th, 2008 at 6:53 am
Hello there! Just trying flash cs3 for the first time. Just wandered if you wouldn’t mind setting me straight on something,….

All I need is two buttons in the main timeline to navigate back and forward ( I’m putting together a presentation ) I searched through the flash help files and found this code..

import flash.events.MouseEvent;

mc1.stop();
prevBtn.addEventListener(MouseEvent.CLICK, goBack);
nextBtn.addEventListener(MouseEvent.CLICK, goForward);

function goBack(event:MouseEvent):void {
mc1.prevFrame();
}

function goForward(event:MouseEvent):void {
mc1.nextFrame();
}

I’ve made two buttons and given them the instance names prevBtn and nextBtn but I think the main problem I’m having is defining where mc1 is? The movie doesn’t stop which is the first part of the code. How can I change the code to react to the main timeline? Any help would be appreciated! Many thanks

Tristan
David Stiller Says:
April 10th, 2008 at 2:23 pm
To Brandon …

Movie clips technically support scenes, but in actual practice, you can only create scenes in the main timeline (scenes are ultimately just sections of the same timeline anyway).

When you say this:

In my movie clip I want to stop and goto frame 2 in my Scene labled “Main Content”.

… it almost sounds to me like you’re trying to send a particular movie clip symbol to another scene in the main timeline. I’m not sure that’s what you’re saying, but that wouldn’t work if so. Have you double-checked that you really created a scene in your main timeline named “Main Content”? Maybe you misspelled it or accidentally put a space character at the end?

To Tristan …

In the sample code shown, mc1 refers to the instance name of a movie clip in the same location as your buttons — some movie clip needs an instance name, just like you’ve given your buttons. If you want the main timeline to stop, instead of some movie clip, just drop that prefix reference:
```
stop();
prevBtn.addEventListener(MouseEvent.CLICK, goBack);
nextBtn.addEventListener(MouseEvent.CLICK, goForward);

function goBack(event:MouseEvent):void {
  prevFrame();
}

function goForward(event:MouseEvent):void {
  nextFrame();
}
```
Brandon Says:
April 10th, 2008 at 9:46 pm
I see what you’re talking about. I’m just trying to return from the movie clip to the main timeline which I renamed from “Scene 1″ to “Main Content”. I opened a new .fla file and didn’t rename anything, and tried to put my actionscript back in. So the first frame actionscript in my main timline is:

background_mc.play(); //for my Movie Clip on that frame to play
stop(); //to keep the main timeline from advancing from frame 1

So i told it to goto my Movie Clip and play and stop on that first frame. So my moive clip plays and at the end of the Movie Clip I have for my actionscript:

import flash.display.MovieClip; //Script Assist put this here
stop(); //stops the Movie Clip from replaying
gotoAndPlay(2,”Scene 1″); //Telling flash to goto the main timeline and now play frame 2

So now the movie stops right where I want it and now I get this error:

ArgumentError: Error #2108: Scene Scene 1 was not found.
at flash.display::MovieClip/gotoAndPlay()
at Untitled_fla::Background_1/Untitled_fla::frame76()

So that’s where I’m stuck. I don’t see what’s causing the error and I tried:

_root.gotoAndPlay(2);

To try and get the main timeline, then I get this:

1120: Access of undefined property _root.
Luke Says:
April 14th, 2008 at 1:10 am
thankyou for your tips & feedback. much appreciated. I’ll keep pluging away. I think I’m getting there now.
Erika Says:
April 15th, 2008 at 10:15 am
Hello David,
This is a great blog and it seems that you are very quick on answering questions. I am new to flash. I just created an .fla file with images that are on the loop. I would like to add buttons that after clicked would take a person to a next picture. I tried to use the code that was posted by you earlier in and answer to Tristan, but it doesn’t do anything.
I created my own buttons, gave them proper instance names according to the code. I left the hit frame empty, i just defined the up, over and down frames. In the .fla file, I put my pictures in the different layers, and I extended the timeline, so it is long, but the picture stays still for awhile. Where should I add the actionscrip? should I create a new layer, or can I do on the first frame? I would love to know what I am doing wrong. Thanks
David Stiller Says:
April 16th, 2008 at 12:33 am
To Brandon …

I see what’s going on (I think!). You’re putting code in the timeline of background_mc, and because that movie clip doesn’t have a scene named “Scene 1,” you’re seeing the error. Scene 1 is in the main timeline, so that’s the timeline (aka the movie clip) you need to reference from the code inside background_mc. If the main timeline is already in Scene 1, so you can leave that parameter off, but you do need to reference the proper movie clip.

From inside background_mc, use:
```
stop();
MovieClip(this.parent).gotoAndPlay(2);
```
The expression this.parent refers to the parent of the movie clip in which this code resides — that is, in this case, the main timeline — and the MovieClip() part lets ActionScript know that the reference points to a MovieClip instance (in other words, a movie clip). After that, the gotoAndPlay() method is invoked on the reference, and frame 2 is passed as a parameter.

So that’s where I’m stuck. I don’t see what’s causing the error and I tried:

_root.gotoAndPlay(2);

To try and get the main timeline, then I get this:

1120: Access of undefined property _root.

In ActionScript 3.0, there is no _root property. It’s root (no underscore), but it’s not exactly the same thing it used to mean in AS2.

To Luke …

You’re welcome!

To Erika …

I tried to use the code that was posted by you earlier in and answer to Tristan, but it doesn’t do anything.

You said you’ve provided the relevant instance names, so your issue may just be the placement of your code. You certainly can put your code in the same layer as your assets, but I personally find my FLAs easier to manage when code has its own dedicated layer (I usually name it “scripts”).

should I create a new layer, or can I do on the first frame?

I would create a new layer, yes. And then … the frame you use depends on the frame that introduces the buttons. If the buttons don’t appear until frame 5, then you’ll want to create a keyframe in your scripts layer at frame 5 and put the code there. Does that make sense?
Steve Says:
April 17th, 2008 at 8:50 pm
Billy,

Did you solve that problem with navigateToURL() not targeting a named ifame? I am having the exact same problem! I had already found out that it has to be run on a server to work and I have in fact got it working .. but only in IE. In Firefox the same code loads the new html page into a new tab.
Erika Says:
April 23rd, 2008 at 3:27 pm
David,

Thanks for your answers. I created different layers for action script, buttons and images. I copied different image into each keyframe in images layer. Doing this way and using the same action code, my buttons worked (by the way buttons show up it the first keyframe and last during the whole timeline).
There is one thing that I wanted to do: have each image playing for 5seconds and then switching to the next image. But a person can press pause button to pause it, also the next and back buttons would work too. I can’t figure out how to do that. Every time I press next button, the same picture stays, but after pressing it 5 times, I get the next image. I figured that happens because I have 5 frames, till I get into the other picture. How could I solve this problem. Thanks again.
David Stiller Says:
April 24th, 2008 at 2:54 pm
To Steve …

Here’s the a quick bit of test-case HTML:
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>iframe test</title>
  </head>
  <body>
  <p><a href="http://www.google.com/" target="externalContent">Click me</a></p>
  <iframe src="http://www.quip.net/" name="externalContent"></iframe>
</body>
</html>
```
No Flash yet, just a hyperlink that says “Click me.” Note that the href attribute points to a URL and the target attribute points to externalContent, which is just an arbitrary name I gave to the name attribute of the <iframe> element.

Testing that in IE and Firefox, I find they both behave the same. In both cases, the <iframe> content updates from my own website to Google’s.

So far, so good. That’s my basic setup. Now, I add a SWF to the same HTML page whose button handler looks like this:
```
myButton.addEventListener(
  MouseEvent.CLICK,
  function():void {
    navigateToURL(new URLRequest("http://www.google.com/"), "externalContent");
  }
);
```
In my testing, that does the same thing as the original HTML hyperlink: the <iframe> content changes from quip.net to google.com.

To Erika …

I’m afraid we’re getting beyond the topic of how to make buttons work in AS3! What you’re describing can be accomplished with frame scripts and numerous timeline tweens or with ActionScript alone, but in either case, the pausing and previous/next functionality can potentially get somewhat complex.

This comment intrigues me:

I press next button, the same picture stays, but after pressing it 5 times, I get the next image

I can imagine programming a button to behave that way — in fact, I’ve done it — but I can’t readily imagine a button behaving that way by accident … unless you’re still dealing with an issue of overlapped symbols. Could that be it? Do your buttons overlap each other?
Logan Says:
April 24th, 2008 at 4:19 pm
David-

I’ve been reading your blog as well as combing the internet for Flash tidbits. I’ve been using Flash for a total of 1 week. I’m a designer, not a programmer. But, I’ve found myself building a website for the production company I work for.

To my problem:

I have a movie object (featured.mc) with 8 small images that act as thumbnail buttons. This movie object is inside a scrollPane component. The movies the thumbnails are supposed to link to are further down the main timeline, starting on frame 20. I learned real fast that I can’t simply right AS code on the “featured.mc” timeline to gotoAndStop at frame 20 since that frame is not on that timeline.

So, after combing the internet for 2 solid days I’ve come up with several *possible* solutions but none have worked. Currently, on the action layer in the “featured_mc” timeline I have written:

button2_btn.addEventListener(MouseEvent.MOUSE_UP,function(evt:MouseEvent):void{
evt.target.parent.gotoAndPlay(20);
}
);

I get the following error:

ReferenceError: Error #1069: Property gotoAndPlay not found on flash.display.Sprite and there is no default value. at MethodInfo-813()

Any insight you could provide would be great. I’ve had it go from do some funky looping across multiple frames to do absolutely nothing. If I can get one of these buttons to work, I can get them all to work and I’ll be well on my way.

Thanks in advance!

Logan
Logan Says:
April 24th, 2008 at 4:25 pm
Update, I can’t believe right after I posted this, I reread waaaayyy up your blog about keep adding .parent to the evt.target.parent string. I kept adding .parent until finally, it got me to where I needed to go!

Sorry for the bother!

Logan
Logan Says:
April 25th, 2008 at 1:18 pm
I actually have another issue that’s cropped up that I’m struggling with. So, I have flash encoded movies playing inside the site. Once I hit a link that takes me to the frame, the movie loads and plays. Here’s my catch: Once I click on any other button to take me to any other part of the site, the movie audio can still be heard, so obviously the movie is still playing/loading in the background. Now, I fooled around with creating a function that would stop a list of movie files that are in the site if any of a list of buttons are pressed. This gives me null errors back when movies that aren’t being accessed are triggered to stop. Also, this is an extremely clunky way to tackle this.

My question is this: Is there a way I can create a function attached to the page the movie is on or the movie itself to tell it to stop playing when the user leaves the page. A function independent of any particular button or movie so that it can be used universally on additional pages with various movies without having a great deal of editing of the ActionScript?

Thanks so much in advance!

Logan
David Stiller Says:
April 25th, 2008 at 3:07 pm
Logan,

Regarding parent, good on ya! Objects in ActionScript are often stacked hierarchically like that, so enough parents often gets you where you’re going. That said, be aware that not every class features a parent property, so always head to the docs when in doubt.

In answer to your Apr 25 post:

Once I click on any other button to take me to any other part of the site, the movie audio can still be heard, so obviously the movie is still playing/loading in the background.

I’m not sure, actually, what you mean by “take me to another part of the site” … are you still inside the same SWF file, but in a difference position on the timeline? If you’re literally moving to another HTML page, then the SWF in the previous page will be obliterated when the new page loads. If the new page loads into a tab, then the original page still exists — and so will the SWF (and its audio).

I think what you’re asking can be answered by the use of a variable to store a reference to your last loading container. You don’t have to cycle through all the possibilities — which will hiccup, as you described, if those references are null —, all really need is to halt whatever the last choice was. That variable will only be null once (before the user ever employs the nav), and you can test for that.

Like Erika’s question, though, this one goes a tad afield of what I originally had in mind for this blog post. I’ve been behind on blog replies for months now, so I may have to (reluctantly) reign my replies until I get caught up.
Logan Says:
April 25th, 2008 at 3:38 pm
The navigation to “other part of the site” is within the same SWF file. Just another place on the timeline. I understand this is probably getting a little off topic from the original blog post. I’m trying to digest what info you’ve given me and see where I can go from there. Thanks for the help!
David Stiller Says:
April 25th, 2008 at 4:02 pm
Logan,

The basic idea would be something like this: some button takes the user to frame 25, where you have a frame script that loads content. If you’re loading content into a container object of some kind, then you have a reference to that container. Now that the user is on frame 25, another button might take him/her to frame 50, where a different frame script loads something else.

When the user clicks the first button, there is no previous container reference. When he/she clicks the second button, there is — if your button code makes note of it (e.g., in a variable declared on frame 1, so that it’s available to any frame that comes after it). Each of your button handlers needs to check the value of that variable, to see if it’s null. If it isn’t, then you invoke your stopping/closing/unloading code on that object reference, which should silence the loaded content.

Does that make sense? I know I’m only giving you a vague concept, but I don’t know what code you’re using to load your content. I hope that helps, though!
Joe Says:
May 17th, 2008 at 3:14 pm
I am having an issue in using AS2 actually. I have buttons, but the can only be hit if you move around it to find a sweet spot that works. No Idea why this is happening. it’s really annoying. How would I make a larger Hit area for a button?
It’s a Flash site, so the buttons are in a _alpha movie clip. that tweens to _alpha 100% when you scroll over it’s parent. But the buttons in the alpha movie clip are just super hard to hit.

there is a set of four different alpha movie clips. in one of the alpha movie clips, all the buttons work Great! But the rest are just standing in the wind.

I have tried a few things, like make a shape, then make it into a graphic then a movie clip then I used the hit area code. But that does not seem to work. I am wondering should I put the AS code in the Movieclip itself or in the site AS with all of the button functions. I have tried both but still nothing. here is a sample of what I am dealing with.

Here is the Code from my site that I am having the issue, It’s done by easing into another movie clip that has the buttons.

[code]
portfolio_btn.onRollOver = function () {
if(portfolioSub_mc._alpha == 0) {
portfolioSub_mc.pdesigns_btn.enabled = true;
portfolioSub_mc.pvideos_btn.enabled = true;
portfolioSub_mc.pwebsites_btn.enabled = true;
portfolioTween = new Tween (portfolioSub_mc,”_alpha”,Regular.easeOut,0,100,12,false);
portfolioTween2 = new Tween (portfolioSub_mc,”_x”,Regular.easeOut,startX,startX+40,12,false);

}

[/code]

Then the code for the buttons, this only the code for one of the two buttons from the movie clip with the buttons, but they are basically identical.

[code]
portfolioSub_mc.pdesigns_btn.onRelease = function() {
loader._visible = true;
mcl.loadClip(”carousel3_CDATA.swf”,Gholder);
unloadMovie(holder);
unloadMovie(vholder);

if(hometxt_mc._alpha > 0) {
hometxt_mc._alpha = 0;

}

}

[/code]

Then the code i have in the movie clip to try and get the buttons to hit.

[code]
circle_mc.hitArea = portfolioSub_mc.pdesigns_btn;
circle_mc.onRelease = function() {
trace(”hit! “+this._name);
}
circle_mc._visible = false;

tangle_mc.hitArea = portfolioSub_mc.pvideos_btn;
tangle_mc.onRelease = function() {
trace(”hit! “+this._name);
}
tangle_mc._visible = false;
[/code]

and I also tried it this way too for the hit area.
[code]
pdesigns_btn.onRelease = function() {
trace(”hit! “+this._name);
}
tangle_mc.hitArea = portfolioSub_mc.pvideos_btn;

pvideos_btn.onRelease = function() {
trace(”hit! “+this._name);
}
[/code]

But still nothing.
PLEASE HELP!!!!!
Paul Says:
June 29th, 2008 at 11:38 pm
I am making a roll out menu. I created the rollout menu in a movie clip in Scene 1. I have a button that is a movie clip also in the rollout menu and I am trying to get it to link back to a labeled frame in scene 1.

This is the code I am using but it is not working.

contactBtn_mc.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
gotpAndPlay(”contact”,”Scene 1″);
}
);

I keep getting an error message that says

ArgumentError: Error #2108: Scene Scene 1 was not found.
at flash.display::MovieClip/gotoAndPlay()
at MethodInfo-26()

Scene 1 is my main timeline
Stephanie Says:
August 7th, 2008 at 2:19 pm
Hi. I have an issue I’m hoping you could help me solve. I am using this code:

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

that you gave previously in this blog. I changed the button’s name in the code to the instance name of my button and changed the url to where i want the button to navigate to. It works. The problem I am having is that I am using this swf file (with the buttons) as the header for my webpage. Instead of opening a new window with the url i want the button to navigate to, I want the button to open the url in the window that is already open. Is this possible?

This website:

http://www.alphachisdsu.com/

shows a swf file at the top with the buttons included in the swf, yet when the buttons are clicked on, are navigating to another page in the same window.–this is what I would like to do.
Stephanie Says:
August 7th, 2008 at 2:23 pm
nevermind! i figured out i just needed to change “_blank” to “_parent”
David Stiller Says:
August 9th, 2008 at 9:16 pm
To Joe …

Apologies for my late reply! I’ve been woefully behing on blog replies while working on two books at nearly the same time (just not a good idea!) … but I’m starting to make the rounds again. Hope I can still help you here.

How would I make a larger Hit area for a button?

The easiest way to handle that with a button symbol is to increase the size of your artwork in the Hit frame. Content in the Hit frame is invisible when the SWF is published, but what it does is define the clickable surface area of the button symbol.

I have tried a few things, like make a shape, then make it into a graphic then a movie clip then I used the hit area code. But that does not seem to work.

If I understand this right, you’re using button symbols, so you really don’t need code to define your hit area. Again, it’s all in the Hit frame, so let me know if what’s what you’re using — and possibly if your Hit frame is different conceptually in the buttons that do work.

Then the code for the buttons, this only the code for one of the two buttons from the movie clip with the buttons, but they are basically identical.

[code]
portfolioSub_mc.pdesigns_btn.onRelease = function() {
// …

You’ll have issues in AS2 if the parent of pdesigns_btn — meaning, — portfolioSub_mc — also has mouse-related event handlers, so that might possibly be the problem.

Then the code i have in the movie clip to try and get the buttons to hit.

[code]
circle_mc.hitArea = portfolioSub_mc.pdesigns_btn;
circle_mc.onRelease = function() {

Here, it looks like you’re setting the circle_mc.hitArea property to a button symbol (again, I keep assuming pdesigns_btn is a button). If so, then that explains why this code isn’t working: the hitArea property needs to be set to a MovieClip instancen, not a Button instance.

I’m curious, too, if you might be thinking about this from the wrong angle (?). If pdesigns_btn is the button you want people to click, then you would have to reference that as the object whose hitArea you were going to set.

There’s nothing technically wrong with the code as you’re showing it — outside of the possibility that pdesigns_btn is a button symbol — but what it means is that circle_mc’s clickable area will be determined by pdesigns_btn, which may not be what you’re aiming for. Does that help?

To Paul …

I keep getting an error message that says

ArgumentError: Error #2108: Scene Scene 1 was not found.
at flash.display::MovieClip/gotoAndPlay()
at MethodInfo-26()

Scene 1 is my main timeline

My hunch here is that you might be dealing with a scope issue. Wherever this code is written, its position may not be able to “see” the “Scene 1″ scene from where it is. Try adding trace(this); inside that MouseEvent.MOUSE_UP handler … what do you see in the Output panel? Do you see the main timeline?

To Stephanie …

nevermind! i figured out i just needed to change "_blank" to "_parent"

Cool! Glad to hear that worked for you!
Heather Says:
August 13th, 2008 at 10:15 am
Hi David. I feel as though I’ve read every blog/forum/tutorial imaginable, and I can’t figure this out. It’s got to be so easy for someone who understands, but it’s driving me nuts!

I’m just trying to make a simple rotating banner that goes to different URLs as the different pictures come up. I’ve made an invisible button and used your code

mybutton2.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
navigateToURL(new URLRequest(”http://www.google.com/”), “_blank”);
}
);

to make it work. Once I add the second button I get this error.

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at testbuttons_fla::MainTimeline/frame1()

Can you tell me what that means? If I keep both instances of the same button in the same frames it works, but if I try to split them up, it doesn’t.

Does that make any sense?
David Stiller Says:
August 13th, 2008 at 10:51 am
Heather,

It sounds like you might be referencing your button’s instance name when it isn’t (yet) available. The error message says, for example, that the problem is a null object reference in frame 1. Is your mybutton2 instance present in that frame?
Heather Says:
August 13th, 2008 at 12:03 pm
Ha! That worked. Thanks. I knew it had to be something easy. Now the real test..to try it in my actual banner ad. Thank you so much for your quick response. )
Heather Says:
August 13th, 2008 at 12:18 pm
I won’t take up any more space after this, but it worked!! HUGE thank you. You just made my week. Month maybe.
David Stiller Says:
August 13th, 2008 at 12:19 pm
Heather,

haha No worries! Glad you got it.
Joe Says:
August 14th, 2008 at 6:25 pm
Dave,

I’ve tried to read though as many post as possible to see if you’ve all ready answered this question, but I didn’t have much luck.

Anyways, I’m still sort of new to web stuff, I’m a high-school student studying web design in 2/4 classes, I’ve become pretty well rounded in most the languages. Now it’s time for flash.. lol..

But my specific question is this: in html you can set a link’s target attribute to open in the same tab, window, ect. How do you do this in AS3? I Have all ready gotten used to making a button and applying it to the frame ect, but what should the code look like with a parallel to the “target” attribute?

thanks for your time
J5
David Stiller Says:
August 14th, 2008 at 7:19 pm
Joe,

The navigateToURL(); function accepts at least two parameters, the first of which is a URLRequest instance that specifies the URL:
```
new URLRequest("http://www.domain.com/")
```
The second parameter is a string, and it specifies how the URL should open, using the same options you have in HTML: "_blank", "_parent", and so on.

If you’re in a frameset or <iframe> and you give either sort of frame a custom name, you could reference that custom name as your “target” parameter.
```
navigateToURL(new URLRequest("http://www.url.com"), "customFrame");
```
or optionally
```
var req:URLRequest = new URLRequest("http://www.url.com");
navigateToURL(req, "customFrame");
```
Joe Says:
August 15th, 2008 at 10:03 am
Ok, I got that, it works now

So, let me get this straight, “var” defines a variable and the word after that names the variable. So then you refrenced that variable when you defined the function you want to happen. This is what I came up with… is this the correct ‘form’ for AS3 ? Any improvements?

var link:URLRequest = new URLRequest(”http://www.j5webdesign.com”);
home2.addEventListener(MouseEvent.CLICK, onClick);
function onClick(MouseEvent) :void
{
navigateToURL(link,”_self”);
}

thanks
J5
Joe Says:
August 15th, 2008 at 10:10 am
Also, in your origional post… what is the “trace” element for?

thanks
David Stiller Says:
August 15th, 2008 at 10:17 am
Joe,

Looks like you got it! 99%. Should be this:
```
var link:URLRequest = new URLRequest("http://www.j5webdesign.com");
home2.addEventListener(MouseEvent.CLICK, onClick);
function onClick(evt:MouseEvent):void {
  navigateToURL(link, "_self");
}
```
Yes, “var” says “Okay compiler, here’s a variable.” After that is the arbitrary name of the variable, by which it will be referenced later. After that comes a colon (:) and the name of the variable’s type; that is, what sort of object it is. Finally, the right side of the equals sign provides a value of some sort. In this case, the value is an actual class instance — a URLRequest object.

You can think of function declarations in pretty much the same way. The word “function” says, “Okay compiler, here’s a custom function.” After that is the arbitrary name of the function, why which it will be referenced later. Then come the parentheses, which may optionally contain a special sort of variable called parameters. Because your onClick() is an event handler, it must accept a parameter that gets sent to it automatically when the event it’s handling occurs. You’ll see that as evt in my corrected code. Like the name of your variable and function, that parameter can be called whatever you like … I tend to use “evt” because it reminds me of the word “event,” which is what this parameter is. Note that parameters don’t need the var keyword, but they are indeed variables, in the sense that they can be referenced inside the event handler function if desired. (To see what properties this MouseEvent instance has, look up that class in the ActionScript 3.0 Language Reference.)

After the parentheses, you have a colon and then the return value of this function. In this case, the function doesn’t return anything, so it gets typed as void. By way of illustration, the Math.round() method — methods are just functions associated with a class — returns a number.

trace() is a global function that sends values to the Output panel of the authoring tool. People generally use it for troubleshooting or testing.
Joe Says:
August 15th, 2008 at 11:20 am
Okay, thanks for your help. What book would you recomed to learn AS3? I have allready done the basic flash stuff (Adobe classroom in a book)
Joe Says:
August 15th, 2008 at 2:03 pm
Check this link out, this guy is a Flash Designer and he was my inspiration I looked at it one day and was like “hey I want to do that”

http://www.andreaswannerstedt.se/
David Stiller Says:
August 15th, 2008 at 2:54 pm
Joe,

With practice, you can!

As for AS3-specific books, consider Learning ActionScript 3.0: A Beginner’s Guide, by a good friend of mine, Rich Shupe, and Zevan Rosser. Also, check out Object-Oriented ActionScript 3.0, by Todd Yard, Peter Elst, and Sas Jacobs.
Joe Says:
August 15th, 2008 at 3:30 pm
Okay, thanks for your help Dave! I’m sure I’ll end up contacting you again.

many thanks,
J5
Rick Says:
August 20th, 2008 at 9:27 pm
Hi Dave,

I’m having a problem with a project that sounds really simple to do, but I can’t seem to figure it out. I have a PSD file with 2 layers, a background and a small overlay graphic. The images are of a storybook, and the large 1024 x 1606 layer is the background. The smaller overlay image is in the bottom right corner. This is going to be a webpage and the background graphic has the word “back” in the bottom right corner as well as in the overlay. The overlay graphic is changed a bit. I need to make it so when you click the word “back” it shows the overlay image for a few seconds and then goes to another webpage. Gosh that sounds confusing. I would really appreciate some help. If you need any further info, feel free to email me. Thanks for your time.
SminRana Says:
September 24th, 2008 at 7:47 pm
Dear Dave.

I want to ask you few question if you reply within short time that would be great for i am in middle of project, in the stage i got “viewport” movieclip,
in viewport suppose i got 100 keyframe each keyframe hold different object ,

question is, how can i add those keyframe into another movie/components like Tile List components in cs3 , working in cs3. basically it pdf2swf tool project , i want to get all viewport keyframe into a tilelist components,when user click a button.
N.B. viewport keyframe and object generated by java script engine from outside, i mean after deploying the swf file .
Jeannie Says:
October 8th, 2008 at 3:50 pm
Question about toggling a button.
I have a little demo. On the first frame I have a “PLAY” graphic, which (obviously) begins the demo playing. I would like to add a “PAUSE” graphic when I mouse over the demo that would change to a “PLAY” graphic if the demo is paused. There is animation as well as sound in this demo, but NO video playback. I see lots of info for the FLVPlayer… but that is NOT what I want.

Simply… a “PLAY” graphic in center screen starts the animation/movie. Animation/movie plays normal unless you mouse over it, then a “PAUSE” graphic show up. If you choose this it becomes a “PLAY” graphic (while in the ‘paused state’). In either case, rolling off the screen (hit area) makes it invisible… i.e. there is nothing in the “UP” state).

Need a sample and some AS3 code… i see a bunch of AS2 stuff…but I need AS3.
Can you help?
Your assistance is greatly appreciated.
Jeannie Says:
October 8th, 2008 at 5:05 pm
OKay, KINDA got it working.
Here is what I have on the first frame
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
import flash.events.EventDispatcher;
import flash.display.MovieClip;
this.stop();

function gotoFirstFrame(event:Event):void {
this.gotoAndPlay(”StartFrame”);
}
btnPlay.addEventListener(MouseEvent.CLICK,gotoFirstFrame);

!!!!!!!!!!!!!!!!!
where “StartFrame” is the label on Frame#2
Here is what i put on the mouseover play/pause buttons.
No, these don’t toggle, but sit side-by-side.
(I would prefer the toggle, but can’t seem to make that happen )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
import flash.events.MouseEvent;
btnPause.addEventListener(MouseEvent.CLICK,pauseDemo);
btnPlay2.addEventListener(MouseEvent.CLICK,playOn);

function playOn(event:Event):void {
this.play();
}

function pauseDemo(event:Event):void {
this.stop();
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The problem is… I have two sources of audio on the timeline that do not stop with the pause button. They just keep going until the next clip. How can I get EVERYTHING to stop?

Your assistance is greatly appreciated.
jeannie
Rioz Says:
October 15th, 2008 at 6:46 am
Please please please help…. this can’t be difficult….. still, not a single simple answer online for the following actionscript in a cs3 animation:

one single button (myButton) onPress > pauses and onPress > plays …

1) myAnimation is playing…

2) onPress myButton pauses the animation

3) onPress myButton (same button) resumes/continues to play the animation

many thanks in advance
David Stiller Says:
October 15th, 2008 at 10:17 am
To Rick …

need to make it so when you click the word “back” it shows the overlay image for a few seconds and then goes to another webpage. Gosh that sounds confusing. I would really appreciate some help.

There are often half a dozen ways to get anything done in Flash, but based on your description, I would convert the word “back” into a button or movie clip symbol, to make it something you can address with ActionScript. With that prep work in place, your symbol would need an instance name, and so would the overlay image (which should be a movie clip symbol). Your “back” button would set the visible property of the overlay to true (it would have previously been set to false), then initiate a timer to trigger the code that goes to another web page. It might look something like this:
```
overlaySymbol.visible = false;

var overlayTimer:Timer = new Timer(2000, 1);
overlayTimer.addEventListener(TimerEvent.TIMER, timerHandler);
function timerHandler(evt:TimerEvent):void {
  navigateToURL(new URLRequest("http://domain.com/"));
};

backSymbol.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent):void {
  overlaySymbol.visible = true;
  overlayTimer.start();
};
```
Notice that the Timer constructor accepts two parameters. The first one (2000) indicates how long to wait (here, 2,000 milliseconds [aka 2 seconds]), and the second one (1) tells how often to repeat the timer.

To SminRana …

I’m trying to understand what you’re asking, but I’m not 100% sure I get it yet. It sounds like you have a movie clip with numerous keyframes, and you want each keyframe’s content to appear individually in the separate tiles of a tilelist component.

If that’s it, it sounds like all you have to do is add the same movie clip to each tile as often as there are tiles. While doing so, use the MovieClip.gotoAndStop() method to send that same movie clip to the appropriate frame, according to its association with a given tile. You could probably do this with a for loop.

Does that make sense?

To Jeannie …

[I need] Simply… a “PLAY” graphic in center screen starts the animation/movie. Animation/movie plays normal unless you mouse over it, then a “PAUSE” graphic show up. If you choose this it becomes a “PLAY” graphic (while in the ‘paused state’). In either case, rolling off the screen (hit area) makes it invisible… i.e. there is nothing in the “UP” state).

I think I understand what you’re after, but I missed something, just write back and I’ll try to clarify. It sounds like you want a toggle button that pauses and plays timeline animation (as opposed to video content). Playing and pausing timeline animation is as simply as invoking the relevant MovieClip methods (play() or stop(), for example) on a given movie clip, including the main timeline (or some symbol).

If you want a toggle button, your best bet is to use a movie clip symbol instead of a button symbol. Why? Because movie clips let you control their timelines (gotoAndStop(), for example), whereas buttons are pre-wired to respond visually to mouseovers, and they simply don’t give you overriding control over which frame displays.

In frame 1 of this symbol, put your “PLAY” graphic or text. In frame 2, put your “PAUSE” graphic or text. Let’s assume this symbol’s instance name is pausePlay:
```
pausePlay.stop();

pausePlay.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent):void {
  if (pausePlay.currentFrame == 1) {
    pausePlay.gotoAndStop(2);
  } else {
    pausePlay.gotoAndStop(1);
  }
};
```
So far, so good, right? That first line stops the movie clip’s timeline, so that it displays “PLAY” by default. The clickHandler() function checks what frame the movie clip is on. If it’s only frame 1 (showing “PLAY”), the code sends that movie clip to frame 2; if it’s on frame 2, the code sends it to frame 1. That effectively makes this symbol a “toggle button.” Now you can introduce the code for whatever the “button” is supposed to do:
```
pausePlay.stop();

pausePlay.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent):void {
  if (pausePlay.currentFrame == 1) {
    pausePlay.gotoAndStop(2);
    someOtherClip.play();
  } else {
    pausePlay.gotoAndStop(1);
    someOtherClip.stop();
  }
};
```
The problem is… I have two sources of audio on the timeline that do not stop with the pause button. They just keep going until the next clip. How can I get EVERYTHING to stop?

That’s almost certainly because you’re using audio whose Sync option is set to Event rather than Stream (I’m talking about Property inspector settings in keyframe that associates a sound with the timeline). Event sounds load fully into memory before playing, while Stream sounds do not … which is why Event sounds keep playing even if the timeline they’re in has stopped.

In ActionScript 3.0, you use the AS3-equivalent of the stopAllSounds() function:
```
function clickHandler(evt:MouseEvent):void {
  if (pausePlay.currentFrame == 1) {
    pausePlay.gotoAndStop(2);
    someOtherClip.play();
  } else {
    pausePlay.gotoAndStop(1);
    someOtherClip.stop();
    SoundMixer.stopAll();
  }
};
```
… bear in mind, when you start the timeline again, that Event sound won’t resume where it left off. The only way to get that sound playing again is to send the playhead back to the keyframe that introduced the sound. This might be reason enough to use the Stream setting for all the sounds in that particular timeline.

To Rioz …

See if my answer to Jeannie gets you started. Don’t hesitate to write back if you need additional help.
Janysa Says:
October 28th, 2008 at 10:57 am
Please …. this can’t be difficult…… I’m having problems with the following actionscript in a cs3 animation:

1. my buttons forward and backward are working perfect!!

2. I want to add the buttons play, pause and stop… but I’m having problems…

Could you help with this?

Thanks!!

Here is my actionscript!!

stop();
function handleClick (pEvent:MouseEvent):void

{
if (pEvent.target == back_btn)
{
prevFrame();
}
else if (pEvent.target == forward_btn )
{
nextFrame();
}

}
back_btn.addEventListener(MouseEvent.CLICK, handleClick);
forward_btn.addEventListener(MouseEvent.CLICK, handleClick);

play_btn.addEventListener(MouseEvent.CLICK, handleClick);
pause_btn.addEventListener(MouseEvent.CLICK, handleClick);
stop_btn.addEventListener(MouseEvent.CLICK, handleClick);

// if (pEvent.target == play_btn){
// play();

// }else if (pEvent.target == pause_btn){
// pause();
// }
// }

David Stiller Says:
October 29th, 2008 at 9:17 am

Janysa,

The only thing wrong with your code, as shown, is that the pause and play portions aren’t inside your handleClick() function. This should work:

stop();
function handleClick (pEvent:MouseEvent):void {
  if (pEvent.target == back_btn) {
    prevFrame();
  }
  if (pEvent.target == forward_btn ) {
    nextFrame();
  }
  if (pEvent.target == play_btn ) {
    play();
  }
  if (pEvent.target == pause_btn ) {
    stop();
  }
}
back_btn.addEventListener(MouseEvent.CLICK, handleClick);
forward_btn.addEventListener(MouseEvent.CLICK, handleClick);
play_btn.addEventListener(MouseEvent.CLICK, handleClick);
pause_btn.addEventListener(MouseEvent.CLICK, handleClick);

See the difference? All the appropriate code is wrapped inside that function declaration (plus, I got rid of the else occurrences. They didn’t hurt anything, but they weren’t needed in this case. Also, I omitted stop, because in this context, stop and pause are pretty much the same thing.

Janysa Says:
October 29th, 2008 at 10:16 pm
Waooo… you are awesome!!!… Thank you very much!!! It really works!!!
Janysa Says:
December 14th, 2008 at 5:16 pm
Hi Ben:
It’s me again, sorry but I’m doing my website using flash and Dreamweaver, but I dont know what hapens. this code dont work!! It’s a rollover.. It has to open my other pages already made in dreamweaver but it doesn’t, but when I press Crt+enter it doesnt show me any mistake! Where in the error? Please help me!! Thanks

btn1_mc.buttonMode = true;
btn2_mc.buttonMode = true;
btn3_mc.buttonMode = true;
btn4_mc.buttonMode = true;
btn1_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn1_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn2_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn2_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn3_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn3_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);
btn4_mc.addEventListener(MouseEvent.ROLL_OVER, onButtonOver);
btn4_mc.addEventListener(MouseEvent.ROLL_OUT, onButtonOut);

function onButtonOver(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay(”over”);
}

function onButtonOut(e:MouseEvent):void
{
e.currentTarget.gotoAndPlay(”out”);
}

function handleLink (pEvent:MouseEvent):void {
if(pEvent.target == btn1_mc){
var request:URLRequest = new URLRequest(”SlidePhotoshop.htm”);
navigateToURL(request, “_self”);
}

function handleLink (pEvent:MouseEvent):void {
if(pEvent.target == photo_btn){
var request:URLRequest = new URLRequest(”Rollover_Portfolio.htm”);
navigateToURL(request, “_self”);
}
}
else(pEvent.target == photo_btn){
var request:URLRequest = new URLRequest(”Slide_Illustrator.html”);
navigateToURL(request, “_self”);
}
}
if(pEvent.target == photo_btn){
var request:URLRequest = new URLRequest(”navigation.html”);
navigateToURL(request, “_self”);
}

}
else(pEvent.target == photo_btn){
var request:URLRequest = new URLRequest(”flash.html”);
navigateToURL(request, “_self”);
}

btn2-mc.addEventListener(MouseEvent.CLICK, handleLink);
btn3_mc.addEventListener(MouseEvent.CLICK, handleLink);
btn1_mc.addEventListener(MouseEvent.CLICK, handleLink);
btn1_mc.addEventListener(MouseEvent.CLICK, handleLink);
Chris Says:
December 15th, 2008 at 10:15 am
Hi Dave,

I am creating a new website in Flash CS 4. I created an intro page with a ENTER button on the intro page that when clicked on takes you to my homepage.

The AS3 for the enter button is as follows:

enter_btn.addEventListener(MouseEvent.CLICK,buttonClicked);

function buttonClicked(event:MouseEvent):void
{
gotoAndStop(11);
}

stop();

Now on my homepage I created another button that is a button called INTRO that takes you back to the intro page but the website keeps looping and doesn’t
work.

I used the same AS for the intro button and the enter button but changed the frames and instance for the intro button

Here is the As for back to intro button from homepage

intro_btn.addEventListener(MouseEvent.CLICK,buttonClicked);

function buttonClicked(event:MouseEvent):void
{
gotoAndStop(2);
}

stop();

Frame 2 is the my intro page and frame 11 is my homepage.

Please let me know what I need to change. Thanks Chris
Dale Griffiths Says:
January 2nd, 2009 at 11:51 am
Sorry but I’m tearing my hair out (if I had any).

I have dragged a combobox onto the stage (named instance comboBox1, flash file MyGame.fla).
I can’t seem to access this from a separate MyGame.as, I just want to populate it using the separate MyGame.as file that I have put into a project with the MyGame.fla file. If I put the as 3.0 code in the timeline in a new layer it works perfect.

Is it not possible to access component objects dragged onto the stage and then accessed from a separate actionscript 3.0 file that is targetting the .fla file.

I would so appreciate a bit of help, two days of trying stuff and looking on the internet and I’m still stumped. I also have a couple of books but no look.

kind regards,
Dale.
Silenc3d Says:
January 5th, 2009 at 12:27 pm
David,

It seems you’ve been away from this forum for awhile now, but hopefully you’ll get to it. =D

Okay, so here’s my code:

myButton_btn.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
gotoAndPlay(1);
}
);

I’ve gone over and over it, but I haven’t been able to get past the “Error 1120″
“1120: Access of undefined property myButton_btn”

I have my button labeled, and to my knowledge I don’t have any of this script wrong, but then again, I am new to AS3.

Thanks,

Silenc3d–
George Hoffos
commbot Says:
January 16th, 2009 at 4:03 am
Hi David,

Thanks for all the tips, you’ve been a lifesaver. However, I have a problem I can’t seem to work out. I have an AS3 slideshow which is loading individual swf files from an xml file. I want to put buttons in the swf files and make them work from the main movie. I used the code provided to make the buttons work in the child swf files but nothing happens when I click on the buttons from the parent.

Sure there must be a problem with heirarchy or something but I’m stumped. Hope you can help
Bensonfive Says:
January 23rd, 2009 at 4:51 pm
Hi David

I have a simple problem, but i for the life of me cannot solve.
I have a 3 page website. all i want to is link the buttons.

it loads fine. when i go to click on 2nd page fine. when i click back it opens in a new page. finally the 3rd page does not open at all!! heres the code I’m using

home_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler1);
function mouseDownHandler1(event:MouseEvent):void {
navigateToURL(new URLRequest(”http://www.humper.pwp.blueyonder.co.uk/index.html”) , “_self”);
}

serv_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler2);
function mouseDownHandler2(event:MouseEvent):void {
navigateToURL(new URLRequest(”http://www.humper.pwp.blueyonder.co.uk/services.html”) , “_self”);
}

contac_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler3);
function mouseDownHandler3(event:MouseEvent):void {
navigateToURL(new URLRequest(”http://www.humper.pwp.blueyonder.co.uk/contact.html”) , “_self”);
}

mail_btn.addEventListener(MouseEvent.MOUSE_DOWN, contact);

function contact(event:MouseEvent):void
{
var contact_req:URLRequest = new
URLRequest(”mailto:face@btinternet.com”);
navigateToURL(contact_req, “_self”);
}

Thanks
gerygery Says:
January 28th, 2009 at 4:25 pm
hello i have a error 1009 when i add a scene as a preloader over my scene
i have buttons wich play diferent movie clip in the timeline using frame labels,
pleasae help.
Erica Says:
February 23rd, 2009 at 4:31 pm
I’m really confused. I’m using a component that requires me to use AS3. All I want to do is have a button that when clicked will take me to the frame that I designate it to. AS2 I use to be able to click on the object and add the action. I know in AS3 you can’t do that, but is there an easier way to do this. I’m really new to AS3, but I have to use it. PLEASE PLEASE HELP
Angela Says:
March 1st, 2009 at 11:00 pm
I’ve been trying to figure out how to make a button within a dropdown menu movieclip link to a scene. Adding a label in scene 2 doesn’t make a difference. Any ideas?

function gotoAScene(event:MouseEvent):void
{
gotoAndPlay(”Scene 2″);
}
btn1sub1.addEventListener(MouseEvent.CLICK, gotoAScene);
Erica Says:
March 26th, 2009 at 4:03 pm
Hey Dave!

I’m really stuck on this peace of code I have. I’m trying to get my button to open another browser. I have read the above post and still can’t get this thing to work. Here is the following code I have:

DialSoapImg_btn.addEventListener(MouseEvent.CLICK, soapimgClick);

function soapimgClick(event:MouseEvent):void
{
var url: String = “http://www.dialsoap.com”;
var request:URLRequest = new URLRequest(”www.dialsoap.com”);

navigateToURL(request, ‘_blank’);

}

However, I keep getting this error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at AtchleyDesign_fla::MainTimeline/frame190()

I’m not sure what I’m doing wrong. Any help would be greatly appreciated!
Francis Says:
August 14th, 2009 at 6:38 am
How do I make plusmover work in actionscript 3? Thanks.
William V. Says:
November 5th, 2009 at 1:49 am
This is a great resource, and by pure coincidence I purchased your book today as well. I am having an issue that is kind of discussed earlier but I am not finding the answer.

I have a set of buttons inside of a movieclip on the main stage. From inside the movieclip on frame 1, I am trying to access a label on the main timeline. On this frame I have a video that I want to play when you arrive to the frame.
Here is my current code.

function getSpot(e:MouseEvent):void
{
e.target.parent.gotoAndPlay(cr);
trace(”Spot one here!!”);
}

spot1_btn.addEventListener(MouseEvent.CLICK, getSpot);

Here is the error I get:
1120: Access of undefined property cr.
Tom Cunningham Says:
November 14th, 2009 at 4:20 am
Hi, I have what seems to me to be a simple enough function, but I’ve tried a couple of solutions in AS2 and it still isn’t working.

I have a movie clip on my stage with two keyframes. Each keyframe has an identically sized graphic in one of two colors. I want to trigger a state change between the two colors with a button click (preferably a button that isn’t visible on the stage). The code I’ve been using is below.

buzzerL is the MC that holds the two state keyframed element. The button triggering is named buzzbuttonL

on(release){
clicked=!clicked;
if(clicked)
buzzerL.gotoAndStop(2);
else{
buzzerL.gotoAndStop(1);
}
}

Any ideas on an AS3 solution. Looking at your previous notes, I’m guessing this will be sorted with MouseEvent handlers, but since I never had the AS2 working, I’m at a bit of a loss as to where to start in AS3. This is driving me crazy! Thanks…
Somnath Dey Says:
July 24th, 2010 at 3:57 am
Hello David,

I just want to ask you a question that as we have done jump to any particular movie clip by using telltarget in actionscript 2.0 but in as3.0 telltarget is no longer existed so, instead of using telltarget how can we jump to any particular movieclip,if the movieclip exists only in the library palette.

Making Buttons Work in Flash CS3 (ActionScript 3.0)

ActionScript 3.0 is a new language

Enjoy ’em both

175 Responses to “Making Buttons Work in Flash CS3 (ActionScript 3.0)”

Leave a Reply