Buttons in AS3??????

Question

I used to use a script like this in a frame on the timeline
to add functionality to my buttons.
btn_01.onRelease = function(){
_root.targ_Main.loadMovie("oranythingelseineededthebuttontodo");
Now in AS3 I have no clue!!!!!!!!!!
And apparently you have to be some sort of uber programmer
just to read the documentation. Can anyone tell me how to make a
simple button work?

Answer 1

leodsmith,
> Now in AS3 I have no clue!!!!!!!!!!
Yes, things have changed, but keep in mind, you don't *have*
to use AS3.
Your publish settings (File > Publish Settings) let you
configure any FLA
for ActionScript 3.0, 2.0, 1.0, and even older versions
(precursors, really)
of the language.
> And apparently you have to be some sort of uber
> programmer just to read the documentation.
I realize it can feel that way, but there's a trick to
figuring out the
documentation, and it call comes down to something called
classes. In a
nutshell, classes are like recipes, or blueprints, for the
objects you now
and use every day in Flash. If you're using a button symbol,
you're
actually dealing with a button object; that is, an instance
of the Button
class in AS2 or the SimpleButton class in AS3. If you're
using a movie
clip, you're dealing with an instance of the MovieClip class,
regardless of
the version of AS. Text fields are defined by the TextField
class. Sounds
are defined by the Sound class, and so on.
ActionScript 3.0 has a larger API (more classes) than
previous versions,
but it's structured the same way. For example, AS3 provides a
set of
companion classes for audio: Sound, SoundChannel,
SoundTransform, and
SoundMixer. AS2 only provides a Sound class. On the face of
it, that may
seem easier because it's less to deal with ... but every coin
has two sides.
In AS2, the concept of a sound channel is present (this is
the thing that
lets you differentiate between different "sound banks"), but
there is no
SoundChannel class. Instead, AS2 associates Sound instances
with a
particular timeline (that is, with a movie clip) ... so even
if AS2 is more
familiar, it isn't always as intuitive as it should be.
Okay, back to classes. So classes define objects, and as a
general
rule, classes are categorized into three headers: Properties,
Methods, and
Events. Sometimes you'll see a few more, but those three are
the main ones.
Properties refer to an object's characteristics (width,
height, number of
letters, volume, etc.). Methods refer to things the object
can do
(gotoAndPlay(), setTextFormat(), attachAudio(), etc.).
Finally, events
refer to things the object can react to (mouse ups, the end
of an audio
file, the passing of a timeline frame, and so on.)
So if you're looking up something about buttons, try the
SimpleButton
class in AS3, or the Button class in AS2 (usually, the class
names are the
same for both versions; this happens to be an oddball). Look
up events, to
see what sort of "can react to" opportunities exist for
buttons, then check
out the sample code. Granted, that may be easier said than
done -- new
stuff is always bewildering until you get familiar with it --
but I hope
that at least helps you get your bearings. Be aware that most
classes
inherit functionality from each other (just like genetics in
humans), so
when you see hyperlinks in the documentatoin for showing
inherited
properties, methods, or events, be sure to click them!
In this case, as NedWebs correctly pointed out, you're going
to use the
addEventListener() method to associate a particular
MouseEvent with a custom
function. In principle, this is the same way it happens in
AS2 (unless
you're attaching code directly, which AS3 doesn't support).
AS2:
btn_01.onRelease = function() {
// something to do
Here, you're using an anonymous function (meaning, the
function isn't
named). You could also do this:
btn_01.onRelease = clickHandler;
function clickHandler() {
// something to do
... which, on a certain level, is pretty much the same thing.
Giving your
function a name is arguably better, becuase if you ever need
to kill that
event handler, you can set it to null:
btn_01.onRelease = null;
... and then, if you ever need to re-enstate that event
handler, you can
simply re-associate it with the same previously named (and
already declared)
function:
btn_01.onRelease = clickHandler;
So in AS3, you're doing the same thing:
btn_01.addEventListener(
MouseEvent.CLICK,
function(evt:MouseEvent) {
// something to do
... or, for more control, use a named function:
btn_01.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent) {
// something to do
See the similarities? In AS3, the event actually sends
itself to the
receiving function, which is where there's a parameter inside
the function
(I used "evt", but you can use whatever variable name makes
sense for you).
This parameter is typed as an instance of the MouseEvent
class because, as
you can imagine, it's an instance of the MouseEvent class.
Like any other
class, MouseEvent has properties (listed in the MouseEvent
class), and one
of those properties lets you refer back to the object that
dispatched the
event in the first place.
It's all in there; you just have to dig a bit and see what
your options
are.
Here are some links that might give you a hand:
Colin Moock
http://www.insideria.com/2008/01/actionscript-30-is-it-hard-or.html
http://www.insideria.com/2008/07/the-charges-against-actionscri.html
One of my blog entries ...
http://www.quip.net/blog/2007/flash/making-buttons-work-in-flash-cs3
(written for Flash CS3, but it's about AS3, so it still
applies)
Obviously, these Web references are free, but you might also
get
something out of an AS2-to-AS3 migration book I recently
co-authored for
O'Reilly:
The ActionScript 3.0 Quick Reference Guide
http://tinyurl.com/2s28a5
(only two Amazon reviews so far, but they're both 5 out of
5)
David Stiller
Co-author, Foundation Flash CS4 for Designers
http://tinyurl.com/5j55cv
"Luck is the residue of good design."