package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

public class Main extends MovieClip
{

public function Main()
{
// Instantiate a new play button:
var myPlayButton:MovieClip = new MyButton(“Play”,0,89);
addChild(myPlayButton);

// Instantiate a new instructions button:
var myInstructionsButton:MovieClip = new MyButton(“Instructions”,200,89);
addChild(myInstructionsButton);

// Instantiate a new credits button:
var myCreditsButton:MovieClip = new MyButton(“Credits”,400,89);
addChild(myCreditsButton);

}
}
}

//MyButton Class
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

public class MyButton extends MovieClip
{
public function MyButton(labelName:String, xPosition:int, yPosition:int)
{
label_txt.text = labelName; // Grab that parameter and label myself!
x = xPosition;
y = yPosition;

addEventListener(MouseEvent.MOUSE_OVER, rollOverMyButton);
addEventListener(MouseEvent.MOUSE_OUT, rollOutMyButton);
this.name = labelName;

if (name == “Play”) {
addEventListener(MouseEvent.CLICK, clickBtnPlay);
}
else if (name == “Instructions”) {
addEventListener(MouseEvent.CLICK, clickBtnInstructions);
}
else {
addEventListener(MouseEvent.CLICK, clickBtnCredits);
}

}

public function rollOverMyButton(e:Event = null):void
{
gotoAndStop(“highlight”);
}

public function rollOutMyButton(e:Event = null):void
{
gotoAndStop(“unhighlight”);
}
public function clickBtnPlay(e:Event):void
{
// Play the game
trace(“Play the game”);
}

public function clickBtnInstructions(e:Event):void
{
// Show the instructions
trace(“Show the instructions”);
}

public function clickBtnCredits(e:Event):void
{
// Show the credits
trace(“Show the credits”);
}

}
}

Tried to make it more generic by adding the function as a 4th parameter, failed though. Tried to pass it as String and then converting the received String to a function….
Something like this in myButton class…
var myStringConvertedToFunction:Function = function(clickFunction);
But couldnt get that working…

Regards,
Malono

When you set the value of a parameter, you’re creating an “optional argument”. It’s a way of setting a param to a default value if nothing gets passed in. Say, for example, you had this method:

private function eatSomeWieners(numberOfWieners:int = 2)
{
}

Both of these calls will now work:

eatSomeWieners(57);
eatSomeWieners();

Normally, if a method wants an argument, you gotta pass it an argument. But note that if we have an optional argument, you don’t have to. Keep in mind that if you use these optional arguments, ALL of your optional arguments have to be listed in the method signature AFTER all of the compulsory arguments.

So e:Event=null enables us to just fire the button click function without having to pass it an event. Maybe you want to do what the button does, but it’s not in response to a user’s click? That’s what that’s all about.

//in Main function
myPlayButton.addEventListener(MouseEvent.CLICK, clickBtn);
myInstructionsButton.addEventListener(MouseEvent.CLICK, clickBtn);
myCreditsButton.addEventListener(MouseEvent.CLICK, clickBtn);
 
//clickBtn function checks for event target
public function clickBtn(event:Event):void
{
	switch (event.target)
	{
		case myPlayButton:
                          //play game stuff
                          break;
                case myInstructionsButton:
                          //etc...
	}
 
}

A question – why do you use e:Event = null? I am not familiar with this concept, I’ve always used the technique I posted above (event:Event… without the = null).
(Side note, not familiar with how to format my code on this site, sorry if it’s hard to read)

You’re getting that error because you don’t have a MovieClip class in your library called MyButton with a dynamic text field inside it with the instance name “label_txt”. i copy/pasted the code and ironed out a few type-os, then added “myButton.mouseChildren = false” to prevent an error in that initial block of code. Everything should work now.

i’ve set this up by copying and pasting your code straight into flash – sorted out a couple of errors within it – yet when i Test the Movie it says access of undefined property label_txt which is just a pain in the arse tbh lol any ideas? Bearing in mind my code is pretty much EXACTLY the same as yours lol – thanks for any help bro

Thumps up. This is good stuff. Bring us more of it, perhaps covering other areas of AS3 as well. Thanx.

sbliss

I guess it’s like Photoshop, where there are many ways to do the same thing but each has it’s own subtle purpose; easy to get confused for beginners, but it will slowly make sense :)

As a side note, may i ask you what you think of Flex Builder 3? Is it better to use Flash IDE for graphics and Flash Develop for AS3 OR do it all in Flex Builder, which seems a bit clunky and is a Visual Studio rip-off. BTW, VS is the best IDE on the market, simply superb for C#, VB, C++ development.

The SYMBOL NAME in the library. This is when you punch F8 or “Convert to MovieClip” and are asked to enter a name. This is how the symbol is identified in the Library. This name is FOR YOUR EYES ONLY. Actionscript cannot see this name or do anything with it. When i work with students, i like to use “monkey butt’ or something similarly ridiculous just to emphasize that this name is not important to your code.
The INSTANCE NAME. Since you can drag numerous copies of your monkey butt symbol out of the library and onto the stage, we need to give each one a name on the stage so that we can refer to them with code. A typical example is “ball0″, “ball1″, “ball2″ etc.
The LINKAGE NAME. We don’t have to “physically” drag an instance of a symbol out of the library – we can do it with code. But like we said, code can’t see our linkage name “monkey butt”. We have to give the symbol a special linkage name or tag so that we can refer to things in the library via code.

This is a very easy place to get tripped up when you’re just starting out. Be aware of these THREE ways of naming, and the difference between each, and you’ll be a big step ahead.

Go forth and code.

“As long as those button clips have instance names, you’re good to go.”

By giving movieClips an instance, they are accessible by the doc class WITHOUT declaring them using:

var mySquare:MySquare= new MySquare();

Instead you can just use MySquare.x=300; for example straight off the bat, because the stage already has an instance and the complier knows it’s alive and breathing OOP rocket fuel.

Hope i’m right, as i’m just learning AS3 myself and your tuts are EXCELLENT :))))))))))))))))))))))

Thank you.

When you say this:

// This is some code you'd write somewhere OUTSIDE the ControlPanel Class:
var myControlPanel:ControlPanel = new ControlPanel();
addChild(myControlPanel);

… you not only get an instance of your ControlPanel movieclip from the library on your stage, but it’s also being controlled by the ControlPanel Class that you wrote.

You DON’T have to give linkage names to btnPlay, btnStop and all the others. They’re nested inside the ControlPanel clip. The ControlPanel Class can just talk to them, because it’s sorta been glued to the ControlPanel clip.

// This is some code you'd write INSIDE the ControlPanel Class:
btnPlay.addEventListener(MouseEvent.CLICK, doPlay);
btnStop.visible = false;

As long as those button clips have instance names, you’re good to go.

Did that answer your question?

” Main.as should take care of positioning the button instance. ”

Why can’t you do something like this:

In the button class:
public function AppButton(LabelText:String,Xposition:Number,Yposition:Number)

and then in the Main function:
var stop_Button:MovieClip = new AppButton(“Stop”,150,50);

Is that wrong?

- Ryan

for example shouldn’t this:

	// Instantiate a new credits button:
	var myCreditsButton:MovieClip = new MyButton("Credits");
	myCreditsButton.addEventListener(MouseEvent.CLICK, clickBtnCredits); // new line!
	addChild(myCreditsButton);
	myButton.x = 340;
	myButton.y = 89;

actually be changed to this?:

	// Instantiate a new credits button:
	var myCreditsButton:MovieClip = new MyButton("Credits");
	myCreditsButton.addEventListener(MouseEvent.CLICK, clickBtnCredits); // new line!
	addChild(myCreditsButton);
	myCreditsButton.x = 340;
	myCreditsButton.y = 89;

Of course, when your project gets larger, it won’t do to have piles of Classes jammed together in a single folder. That’s why an upcoming Understanding Classes tutorial (probably part 5) will deal with import and package statements. They confused the Hell out of me at first, but i think i’m finally catching on.