ActionScript 3 - using a button to navigate Scene's

Ewan,

> Thank you so much for your precise and detailed instructions!!
> My head only self-imploded a handful of times, and even then,
> the excitement of having a tangible solution so close kept me
> going! (and all that talk of ice cream and oatmeal helped too)

Food is good!

As for the head-imploding sensation, it does eventually go away. Like
anything else, it just takes practice. Chin up!

> I tried to write script referring to a button already present within
> the scenes' setup, but for some reason, the tested movie said there
> were errors referring to the script.

I can try to help you make sense of that, if you post the actual
error(s). They're not always easy to decipher, but usually helpful enough.

> Saying this, I decided to create a quick and simple button using
> your guidelines and work from the bottom up.
>
> ...SUCCESS!!

Woo hoo! Well, that's a start, then. And honestly, that's often how it
works. Start small, make yourself a proof of concept, then build on that.
Too many steps, and it becomes harder to determine what small piece has
caused the problem. Eat the elephant one bite at a time.

> Either way David, thank you so much for your help!

Sure thing, Ewan.

> I don't suppose they sell the Foundation Flash CS3 for Designers
> book over here in the UK?

They do. :)

http://www.amazon.co.uk/Foundation-Flash-CS3-Designers/dp/159059861X/

No one on your side of the pond seems to have left a review yet, but the
reviews on the US side have been good.

> If its more advice of the same standard shown above, then I think
> I at least owe you one sale ;)

The publisher, friends of ED, was very comfortable to work with. The
style I used in the book (along with co-author and friend Tom Green) is
similar to what I generally use in these forums, give or take. We had lots
of fun writing Foundation Flash CS3 and tried to make the sample files
interesting. It's always hard to gauge how well a book will help someone
unless you know him or her well, but this one is nearly 600 pages, so I hope
you find it useful, if you decide to buy.


David Stiller
Contributor, How to Cheat in Flash CS3
http://tinyurl.com/2cp6na
"Luck is the residue of good design."

David!

You are a gentleman, and a modern-day genius!

Thank you so much for your precise and detailed instructions!!
My head only self-imploded a handful of times, and even then, the excitement of having a tangible solution so close kept me going! (and all that talk of ice cream and oatmeal helped too)

I tried to write script referring to a button already present within the scenes' setup, but for some reason, the tested movie said there were errors referring to the script. (I cannot remember what the Output window said to me - as my head was far to busy self-imploding! I think it may have been due to the instance name being used within numerous scenes'?)

Saying this, I decided to create a quick and simple button using your guidelines and work from the bottom up.

...SUCCESS!!

Its late here now, so I shall try to resolve the problems I encountered with the original button tomorrow. If I encounter anymore problems, I shall post them up for all to see (and laugh at).

Either way David, thank you so much for your help!
I don't suppose they sell the Foundation Flash CS3 for Designers book over here in the UK?
If its more advice of the same standard shown above, then I think I at least owe you one sale ;)

Again, cheers David

Ewan,

> but cannot find a simple script that will allow me to send people
> back and forth from scene to scene (or a nice easy explanation -
> that won't cause my head to self-implode).

That's not too much to ask. ;)

> I know its asking a lot, and you could argue there is sufficient
> information already on the Forums to piece it together... but I
> would call you a liar!

Liar? Nah, that's awfully harsh (and, ironically, not true!). Here's
the thing. What you're after is a goal comprised of two sub-goals, so it
may be that you have to search the forums for two existing answers: a) how
to program a button in ActionScript 3.0 and b) how to navigate to a scene.
To make things easy, though, I'll do my best to answer both parts here.


Programming a button

The first thing you need, of course, is a button in the starting scene.
Let's say there are two scenes ("Scene 1" and "Scene 2") and your button
exists in frame 1 of Scene 2. To make the timeline stop on Scene 2's first
frame, you'll want to invoke the MovieClip.stop() method in that frame.
What's a method? Think of methods as the verbs of ActionScript: they're
things that can be done, such as stop(), play(), gotoAndPlay(), etc. You
can usually spot a method right away because it ends in a pair of
parentheses, which are the "trigger" that tells the method to do its thing.

ActionScript is populated entirely by entities called objects, and
objects are defined by entities called classes. Think of a class as a blue
print that defines how to make one or more objects of its own type. The
main timeline, for example, is a MovieClip object -- aka "instance" (as in,
the main timeline is an instance of the MovieClip class). Movie clip
symbols are also instances of the MovieClip class. In ActionScript 3.0,
button symbols are instances of the SimpleButton class. Text fields are
instance of the TextField class, and so on. Each type of object has its own
characteristics, which are called properties. Each type of object has its
own set of things it can do, called methods. Objects can also react to
things, and this category is called events. If you consult the Help panel
for the class entry at hand, you'll find these three categories listed for
each class. (Not all objects have all three categories, and some have a few
more, but those are the main ones.)

In this case, for example, you'll look up the SimpleButton class, so
that you can see what events are available to buttons. Make sure to always
click the "Show Inherited Events/Methods/Properties" hyperlink if a
particular category looks empty. Objects usually have complex family trees,
in which at least some functionality is inherited from other objects. In
the case of SimpleButton's Events section, you'll find an event called click
(inherited from the InteractiveObject class, just for interest's sake).
Click on the "click" entry, and you'll see that it leads to the ancestor
InteractiveObject class, which tells you the click event itself belongs to
the MouseEvent class. This sort of branching can seem overwhelming at
first, but my intention isn't to confuse. I'm hoping to show you a broad
overview on how to navigate the Help panel, and to introduce the idea of how
these various classes interact.

Okay, so ... we've discovered that the SimpleButton class -- which
represents button symbols -- features a click event. Good. This click
event is inherited from InteractiveObject and ultimately leads to the
MouseEvent class. The MouseEvent class lists the click event as the
uppercase property CLICK. Now we're ready to wire up your button.

In order for the button symbol to interact with ActionScript, it needs
something called an instance name. The instance name is just an arbitrary
unique identifier. You could name your button Alfred, if you like, but for
this dicussion let's call it myButton. Select your button and look at the
Property inspector to see where to add the instance name. Assuming your
button exists on a layer in frame 1 of Scene 2, you'll create a new layer
just for ActionScript -- call it "scripts" if you like -- and select frame 1
of your scripts layer. If you think of the timeline as a grid, you're
putting your code into the same "column" (frame 1) as the button itself.
This way, the code and the button match up. Open the Actions panel (Window
> Actions) and type:

myButton.addEventListener(MouseEvent.CLICK, clickHandler);

Here, you're calling myButton by its instance name. Because that
instance name represents a SimpleButton object, you can invoke on it the
addEventListener() method, as shown. (Look up SimpleButton again, and look
in the Methods section, and you'll see addEventListener().) The
addEventListener() method accepts at least two parameters, the first two of
which are: a) event to listen for and b) action to perform when the event
happens. For a), you're supplying MouseEvent.CLICK; for b), you're suppling
a custom function arbitrarily named clickHandler. Functions are basically
methods, except they're not associated with a particular class. They're
free agents. Normally, you'd put a pair of parentheses after the name of
the function -- just like a method -- but you don't want the function
triggered just yet: you want that to happen when the CLICK event occurs.

Make sense so far? Head self-implosions are painful, so if this is
getting too crazy, let me know.

So the wiring-up is done. At this point, you just need to define your
clickHandler() function. Here's how to do that:

function clickHandler(evt:MouseEvent):void {
}

The function keyword lets ActionScript know you're defining your own
function. You could call this function scoopMeSomeIceCream() if you wanted
to, but clickHandler() makes a lot more sense. The expression
evt:MouseEvent, between the parenteses, just means that this function
accepts an incoming parameter -- just like addEventListener() does -- and
you're choosing to provide the arbitrary name "evt" to represent that
parameter, which happens to be the MouseEvent object (the click, in this
case) created when someone clicks on your button. The :void part just means
that this parameter doesn't return a value of its own. Some functions or
methods do return values, such as Math.round(), which rounds decimal numbers
to integers. In that case, Math.round() returns an int (integer) value. In
your case, clickHandler() doesn't return anything.

The lines inside the function define what it does. In this case, you
want the main timeline to travel to Scene 1. Remember, the main timeline is
an instance of the MovieClip class, so you'll look up the MovieClip class
entry's Methods section to see what movie clips are capable of doing.
You'll find a gotoAndStop() method, which allows you to specify a couple
parameters: a) a frame number or name (that is, a frame label) and b) a
scene name.

Because you're writing code *in* a frame of the movie clip (the
timeline) you're controlling, you don't need an instance name to refer to
the main timeline. You can just invoke the method on its own. Think of
this like "telling" yourself to do soomething. If you want another bowl of
oatmeal, you don't say, "Ewan, get yourself another bowl of oatmeal," you
just think, "Get another bowl." If you want someone else to get that bowl,
you mention that person's name, then ask that person to do the task. In the
code so far, since the point of view is the main timeline's, you're asking
myButton by name to do something. Now you'll be asking the main timeline
itself to go to frame 1 of Scene 1.

function clickHandler(evt:MouseEvent):void {
gotoAndStop(1, "Scene 1");
}

The first parameter is a number; the second is a string (the name of the
Scene), so it's put in quotes.

At the very beginning of this reply, I mentioned that you would probably
want to stop the timeline in the first place, so give the user a chance to
click on the button. So here's a roundup of the whole code in frame 1 of
Scene 2:

stop();
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler(evt:MouseEvent):void {
gotoAndStop(1, "Scene 1");
}

And that's it. Repeat this process for other scenes and other buttons.
You might, for example, have two buttons -- each with their own instance
names -- in Scene 2:

stop();

kitchenButton.addEventListener(MouseEvent.CLICK, headToKitchen);
cellarButton.addEventListener(MouseEvent.CLICK, headToCellar);

function headToKitchen(evt:MouseEvent):void {
gotoAndStop(1, "Scene 1");
}
function headToCellar(evt:MouseEvent):void {
gotoAndStop(1, "Scene 3");
}

Note that I've changed the button instance names to reflect a more
descriptive name. I've also renamed the functions to be just as
descriptive.


David Stiller
Co-author, Foundation Flash CS3 for Designers
http://tinyurl.com/2k29mj
"Luck is the residue of good design."