AS3 button walkthrough - help

[phadam]

Could someone help me out some if you have time. I wanted to get a little walkthrough on setting up my buttons on my navigation bar, but done correctly. I have seen tutorials all over the web but none of them are really working for the as3 that I have and would like to use. Im not planning on using any kind of button base, just the word.

Below is what I have for my code. Now I would just like to set the button up properly to function with this.

Thanks


stop();

var frameNum:Number;
var btnLabels:Array =
[
"HOME",
"ABOUT",
"SERVICES",
"PORTFOLIO",
"LOCATION",
];

for (var i:Number = 0; i < btnGroup.numChildren; i++)
{
var btn:MovieClip = MovieClip(btnGroup.getChildAt(i));
btn.id = i;
btn.buttonMode = true;
btn.mouseChildren = false;
btn.btnLabel.text = String(btnLabels);
btn.addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);
}

function btnClick(e:MouseEvent):void
{
frameNum = e.target.id + 1;
gotoAndStop(frameNum)
}

 

[Ride9650]

Well, with what you have here, its really only a good way of adding labels, rather than making a whole set of buttons.

Also, not sure where you got the code from but there are a few lines that I'm pretty sure are incorrect, namely

-var btn:MovieClip = MovieClip(btnGroup.getChildAt(i)); : I'm pretty sure the MovieClip constructor doesn't take any arguments.

-btn.addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);:
I'am also fairly certain the addEventListener method only takes 2 arguments, the type of listener and the function that fires when the event happens

-frameNum = e.target.id + 1;
I think "e.target.id" ought to be " currentFrame"


-btn.btnLabel.text = String(btnLabels);
In your code, "btnLabel" never gets associated with "btn" before this call; it also doesn't seem to be mentioned in the code you provided, so this would throw an error right away.

---------------------------------------------
I'm guessing something got lost in translation as you were pasting this so assuming the code is mostly right and you just need to go back and look at the original.

One important thing you didn't specify is if you were attempting to do all this with just code, or were going using the IDE in conjunction with a outside class, or just using the IDE; it won't necessarily affect your workflow that much but it will change the structure of how you have to write the code.

Since we're missing a couple important details, these next few steps are more like a rough outline of what has to happen.

What you'll need to do is make:

- 5 movie clips representing your Home, Portfolio, etc buttons.

- 1 main movieClip, in this case called, "btnGroup"

After that, write out this line for each of the buttons you want(for the sake of example lets say I've already declared a movieClip for one of the child buttons called "home")

btnGroup.addChild(home);

After you do all that, then paste in the rest of your code.

You'll need to also look into text styling as the code you provided does not style the text in any way.

------------------------------------------

 

[snickelfritz]

Each button is a MovieClip that contains a dynamic textfield, instance name "btnLabel".
All of the buttons are nested within a MovieClip on the stage, instance name "btnGroup".
ie: arrange the buttons on the stage, select them all, and press F8 to create the MovieClip. Give the MovieClip an instance name of btnGroup.
The code iterates through the children within btnGroup and assigns the properties and listeners to each of the buttons.

-var btn:MovieClip = MovieClip(btnGroup.getChildAt(i)); : I'm pretty sure the MovieClip constructor doesn't take any arguments.

Incorrect.
The object defined within the (parens) is cast as a MovieClip.
This tells Flash Player what type of object is being referenced, and therefore, which methods and properties are valid.
Improves error reporting and runtime performance, and is considered a best practice in AS3.
​

-btn.addEventListener(MouseEvent.CLICK, btnClick, false, 0, true);:
I'am also fairly certain the addEventListener method only takes 2 arguments, the type of listener and the function that fires when the event happens.

Incorrect.
Event Listeners take 5 arguments, 3 of which are optional; the last argument (true) is for weak reference, and is generally considered a best practice for memory management.
It's safe to exclude the last three parameters if you are diligent in removing unused listeners and nullifying objects.
​

-frameNum = e.target.id + 1;
I think "e.target.id" ought to be " currentFrame"

Incorrect.
e.target.id refers to the numeric id property assigned to the button that called the handler.
This id number can be used to associate the button with a specific array index, xml node, or in this case, a frame number in a sequence.
For example, you have content on frames 1-5, and buttons with id numbers, 0-4; add 1 to the id numbers and you have a direct correlation between the button id numbers and their respective content frame numbers.
​

-btn.btnLabel.text = String(btnLabels);
In your code, "btnLabel" never gets associated with "btn" before this call; it also doesn't seem to be mentioned in the code you provided, so this would throw an error right away.

"btnLabel is a dynamic textfield nested within the button (the buttons are actually MovieClips).
If this textfield is missing or named incorrectly you'll get a null reference error, and the code will not complete.​

 

[Ride9650]

I see I stand corrected! haha
Well like I said I wasn't entirely certain about that points, good to see someone cleared that up.

Incorrect.
The object defined within the (parens) is cast as a MovieClip.
This tells Flash Player what type of object is being referenced, and therefore, which methods and properties are valid.
Improves error reporting and runtime performance, and is considered a best practice in AS3.
​

Ah...it didn't occur to me he/she might be trying to use casting, just thought OP was missing the "new" statement and trying to make a new Movieclip.

Incorrect.
Event Listeners take 5 arguments, 3 of which are optional; the last argument (true) is for weak reference, and is generally considered a best practice for memory management.
It's safe to exclude the last three parameters if you are diligent in removing unused listeners and nullifying objects.
​

I stand corrected again! I was always taught to make sure and remove unused listeners, which is probably why I only thought there were supposed to be 2 arguments.

Incorrect.
e.target.id refers to the numeric id property assigned to the button that called the handler.
This id number can be used to associate the button with a specific array index, xml node, or in this case, a frame number in a sequence.
For example, you have content on frames 1-5, and buttons with id numbers, 0-4; add 1 to the id numbers and you have a direct correlation between the button id numbers and their respective content frame numbers.
​

ah, I somehow didn't comprehend the relation between btn.id and e.target.id

Thanks snickelfritz for enlightening me on some uncertain points and I apologize for the slight amount of misinformation phadam

 

[phadam]

Thanks guys. Cleared up a lot for me and the descriptions really help a ton

 

[phadam]

excuse the newbie question here but I was thinking of adding a color change that slowly fades in on the over and down functions for the buttons with a sound clip when clicked and a fade out for the color back to the original when the mouse is not over the button. where and what would i have to change in the as3 that I have above to get this done if I have the sound clip in my library?

 

[snickelfritz]

Include an event listener for over and out event, then in the handlers use a tweening class, such as TweenLite, to change the tint or color matrix.