Enabling buttons through MovieClip.Prototype

[aam]

I'm trying to make this script work which has a function to enable buttons.

// This script is on a seperate layer frame:
// webnav, iden, adv, mult are instances of MCs

btns = [webnav, iden, adv, mult];
MovieClip.prototype.enableBtns = function(btns) {
for (i=0; i<btns.length; i++) {
btns[i].enabled = true;
}
}

// This is on the MC itself
//partial code ...within onClipEvent handler

_root.navbtns_mc.webnav.onRelease = function() {
_root.navbtns_mc.webnav.enabled = false;
enableBtns(_root.btns);
}

The buttons disable but just don't enable again when other buttons are clicked.

The button instances are on the path: _root.navbtns_mc.

[lunatic]

check the original thread. If it still doesn't work, post the fla again and I'll check it tomorrow.

:hr:

[aam]

OK. Thanks. The fla is uploaded at www.auctionexcel.com/flash/page4mx.fla (http://www.auctionexcel.com/flash/page4mx.fla)

[scotty]

It's a prototype, so you need a mc to call it, in your case that should be

_root.navbtns_mc.enableBtns()
then if it should work, you disable one button and after that enable all buttons.
Since you have the array you can do it with less coding. Skip all code on frame 2 and the code you have in clipEvent(enterframe). Then put this code on the timeline in _root.navbtns_mc

stop();
btns = new Array();
var cur;
btns = ["webnav", "iden", "adv", "mult"];
for (var i = 0; i<btns.length; i++) {
var but = this[btns[i]];
but.id = i;
but.onRollOver = function() {
this.gotoAndPlay("fadein");
};
but.onRollOut = function() {
this.gotoAndPlay("fadeout");
};
but.onRelease = function() {
setButtons(this.id);
};
}
function setButtons(q) {
for (var i = 0; i<btns.length; i++) {
var but = this[btns[i]];
if (i != q) {
but.enabled = 1;
this[btns[cur]].gotoAndPlay("fadeout");
} else {
but.enabled = 0;
}
}
cur = q;
}


scotty(-:

[lunatic]

*shakes fist* Darn you Scotty! You are too good!

I was working on this last night and couldn't figure out how to get the one that was disabled to fade out when another was pressed. I knew I needed another function and a !something but I got stuck.

Thanks, you can stalk me anytime. :thumb:

[scotty]

:lol: anytime, lunatic:love:

scotty(-:

[aam]

Man this works just as it's supposed to. *Big Hug*..but the code is so good that it's beyond me....trying to figure out how it's working. Will really appreciate if you could comment it a bit so I can grasp it a bit.

Thanks

[lunatic]

Here's my take though Scotty might modify it . . . ;)



stop();
//create a new array called btns
btns = new Array();
//create a variable called cur
var cur;
/*fill the btns array with instance names.
No additional paths are needed because we are
on the timeline that contains the objects*/
btns = ["webnav", "iden", "adv", "mult"];
//begin for loop to cycle through array
for (var i = 0; i<btns.length; i++) {
//create variable called but and set it to the path of the array
var but = this[btns[i]];
//create a variable in the timeline of but and set it to i
but.id = i;
/*the variable (which is the entire array remember)
now gets btn functions - rollover, rollout, release*/
but.onRollOver = function() {
this.gotoAndPlay("fadein");
};
but.onRollOut = function() {
this.gotoAndPlay("fadeout");
};
but.onRelease = function() {
//call function setButtons and send
//id variable
setButtons(this.id);
};
}
//function setButtons definition - receives a parameter
//here called q
function setButtons(q) {
//begin for loop to cycle through array
for (var i = 0; i<btns.length; i++) {
//create variable called but and set it to path of array
var but = this[btns[i]];
/*IF i does not equal the number sent to the function
from the onRelease statement in the form of but.id)*/
if (i != q) {
//THEN enable all the buttons in the array
but.enabled = 1;
/*set the current button to play the fadeout
animation - see last line of code for cur*/
this[btns[cur]].gotoAndPlay("fadeout");
//OTHERWISE
} else {
//disable the buttons
but.enabled = 0;
}
}
/*set a variable called cur to the number sent to the function
from the onRelease statement*/
cur = q;
}

[aam]

thanks...the comments helped.

cheers.

[scotty]

Thank you, lunatic:thumb:

scotty(-:

[lunatic]

:!: was I right?

:party:

[aam]

about the comments? they look right..bieng a newbie, I'll have to go over them again again to really digest them. Unless you asked the question to scotty??

[scotty]

That was a good job, lunatic, I couldn't have done it better;)

scotty(-:

[lunatic]

lol, yes you could have. You could have done it with a sexy belgian accent.:love:

[scotty]

:lol: You're mistaking me with Voets, I'm Dutch:cool:

scotty(-:

[lunatic]

Ahh dang, you're right. :( I was thinking you were the one from Ghent. :blush:

But you're so good, I bet you could do it with a sexy Belgian accent anyway. :D

[scotty]

Next time I will do that :lol:

scotty(-:

[brdhouse]

Hi there,

Newbie here. I have been trying for the life of me to understand what is going on here, despite Lunatics explanation. Where does the onRelease statement go? what is the complete code for frame 2, or should it have been removed? I've downloaded the fla in question and have been trying to fix it with the provided code... but the problem is I just don't understand enough about the fundamentals here to know what to do with it. Do you think you could boil this down, perhaps like some of the tutorials as to what, why, how and where to put these lines of code? or possibly point me into a direction to find out more about what this is doing and why? btw, I'm on mx, not mx 2004... does this matter?

Thanks!

[lunatic]

Hi brdhouse, welcome to the forums! =)

If you are following the fla posted here, erase all the code on frame 2 and all the array and prototype stuff from frame 1. Also get rid of the code in the clipEvent(enterframe). Then put ALL the code I commented on the timeline in _root.navbtns_mc, in an empty layer (so there is nothing in the frame but a blank keyframe. A little 'a' will appear after you paste the code into the actions panel).

If you have any other questions please feel free to ask!

:hr:

[brdhouse]

OK, I'll give this a shot later on tonight. I think I was adding the code to the clip instance itself, not on a separate "A" layer inside of it. Care to explain why this doesn't work... can "on ClipEvent" or prototypes only work when it's on a blank keyframe? not on a clip instance? in general when do you add actions to clips vs. frames... or is that too loaded of a question? ;)

see, it's these fundamentals I just don't have a firm grasp on yet...

Thanks for the welcome, this place is great!
/b

[lunatic]

The code with the comments that Scotty provided has no onClipEvent. He told aam to remove the onClipEvent that aam had on the movieclip with the buttons inside (the navigation clip). :) In general, clipEvents only work on clips, as you thought. Prototypes are function definitions that are available from anywhere. It makes sense to define them on the maintimeline so you always know where they are and they don't get lost. Also, then everything can reference them. But you can call them from anywhere without too much trouble.

The code Scotty gave can go by itself because it addresses movieclips by their instance names. This code is a bit advanced as it uses an array to store all the instance names of the buttons so that actions (like rollovers, releases, etc.) can be applied to all the buttons at once, simply by referencing the array with the appropriate action.


Thanks for the welcome, this place is great!

lol, welcome to your new addiction! :beam:

[brdhouse]

Thanks Lunatic! What you wrote makes a lot of sense... simple and concise.

I had a bit of a brain-lapse there on the clipevent thing... I was getting an error back when I tested the movie because I was adding all Scotty's code to the clip... and it was telling me I needed the handler. At least that's what I think was happening. At this point I'm not very sure anymore, my brain is pretty racked. The important thing is now I think that I understand a little more about what's going on.

Thanks again for your help. I'm sure I'll have more ?'s in 3,2,...

/b (addicted)





lol, welcome to your new addiction! :beam:

[brdhouse]

UPDATE: I'm happy to report that I've achieved the desired affect by applying Scotty's code to my fla. All thanks to Scotty for the code and Lunatic for the coaching!

Now I've discovered one more thing which would be nice to employ, but again, I'm not certain where (or how) in the code to go about doing it. Here is what I'd like to do:

Set the first button (movie) in the set to load in it's disabled state when the clip loads, yet still function like the code says it's supposed to (a.k.a. enable), when other buttons are pressed.

I've used this prototype code as nav buttons for a slideshow, which naturally begins on slide 1... the problem is that slide 1's button sits in the "up" state, despite the image for slide 1 being visible... it's a subtle detail, I know, but in my opinion it lacks the visual cue that would otherwise provoke the user to click through to other slides when the button doesn't look active.

Any chance someone could point me in the right direction?

Thanks,
/b

[lunatic]

Put this code under the stop();


_root.navbtns_mc.webnav.enabled = false;

where webnav is the name of the button to be disable on load (as an example).

:hr:

[brdhouse]

I tried this and it still doesn't work. does it matter that I have other actions assigned to the button movie clips themselves? fwiw, I'm making a "slider" type slideshow (just like the one in the flash 5 tutorial section)... so I tried adding this to the other bits of code used for the slides & buttons, but to no avail.

Thanks for seeing this through with me!
/b


Put this code under the stop();


_root.navbtns_mc.webnav.enabled = false;

where webnav is the name of the button to be disable on load (as an example).

:hr:

[brdhouse]

FOLLOWUP: Ok, by removing the _root.[mc name] from the path in the "enable = false" statement (since I put everything inside a movie clip) the button will now load as disabled. The problem now is that I want it to go to the "fadein" (or active state) frame label of the button whilst disabled... but it's stuck in the upstate... ahhh. any ideas?

/b


I tried this and it still doesn't work. does it matter that I have other actions assigned to the button movie clips themselves? fwiw, I'm making a "slider" type slideshow (just like the one in the flash 5 tutorial section)... so I tried adding this to the other bits of code used for the slides & buttons, but to no avail.

Thanks for seeing this through with me!
/b

[lunatic]

so you want it to be disabled, but play one of the animations? well just direct it to go to that animation when it loads and then disable it. Because of the way the code is set up you might have to use setInterval or something to give it time to run through the animation before disabling.

:hr:

[brdhouse]

Lunatic,

I added a simple gotoAndStop(10) (frame label didn't work for some reason, but frame # did) as you suggested, and it worked! However, it left me with button 1 stuck on frame 10 ("active" state), even after you clicked on other buttons. It wasn't until you rolled over button 1 that it would reset to the normal behavior defined by the code.

To get around it I added a buttonname.enabled = true and a gotoandStop(1) to the prototype code in the but.onRelease function. It effectively sends button 1 back to frame 1, but if you decide to go back and click on button 1, it doesn't stay on Frame 10 anymore. To say it another way, there is no "active" state when button 1 is clicked.

it's not ideal, but I can live with it since the slideshow still functions normally and the users will have already seen the content on slide 1 and are less likely to go back to it, etc.

I'd love to hear if you have any comments or suggestions. thanks for your time, again.
/b

[scotty]

Not sure but you want something like this

stop();
btns = new Array();
btns = ["webnav", "iden", "adv", "mult"];
for (var i = 0; i<btns.length; i++) {
var but = this[btns[i]];
but.id = i;
//set var clicked
but.clicked = 0;
but.onRollOver = function() {
//if clicked is false, so unvisited
if (!this.clicked) {
this.gotoAndPlay("fadein");
}
};
but.onRollOut = function() {
//if clicked is false, so unvisited
if (!this.clicked) {
this.gotoAndPlay("fadeout");
}
};
but.onRelease = function() {
//set clicked true, so the rollover/rollout states know the button is visited
//and keep the button in the fadein state
this.clicked = 1;
setButtons(this.id);
};
}
//I took the cur thing out in the next function
function setButtons(q) {
for (var i = 0; i<btns.length; i++) {
var but = this[btns[i]];
if (i != q) {
but.enabled = 1;
} else {
but.enabled = 0;
}
}
}
Not tested...

scotty(-:

[dyren]

looks good in theory.

btw, scotty check your PMs

[lunatic]

Scotty - why remove the cur variable in the last function? Does but.clicked essentially replace it?

:hr:

[scotty]

The cur variable was there to get the current button out of the hitstate and goto frame "fadeout". If I understood brdhouse right, he/she wanted a visited state so I've used the fadein state. You could let cur in and change the setButtons function like this

function setButtons(q) {
for (var i = 0; i<btns.length; i++) {
var but = this[btns[i]];
if (i != q) {
but.enabled = 1;
this[btns[cur]]._alpha=50;
} else {
but.enabled = 0;
}
}
cur = q;
}
And your visited buttons will have an alpha 50;)
Again, not tested...

scotty(-:

[brdhouse]

Thanks for jumping in Scotty! This actually creates another level of interactivity I hadn't thought about before. Instead of shutting the buttons off when you click on another button, it essentially creates a "visited" state for each button. an improvement, imo.

A confusing little problem was created by the rollout function... it was resetting the visited links to a visually "off" state, so I added a 2-frame animation in the button up state (visually from on to off), therefore I can tell button 1 to stop on frame 1 (on), and the rest of the buttons to go to frame 2 (off). Then, setting a [button 1 mc name].gotoAndStop(1) (tell button 1 only to go to the "on" state) under the rollout function in your prototype code. This eliminated any wierdness from rolling out. I'm still having a hard time getting why this worked... was it the right way to do it? I have no idea, but it worked!

I hope that description made sense, I rewrote it about 10 times, and it's still a little confusing.

Here is the as, just keep in mind that I changed the initial button movie animation. also, my button clip instance names are different from the original example.


stop();
slideButtonOne.enabled = false;
slideButtonOne.gotoAndStop(1);
btns = new Array();
btns = ["slideButtonOne", "slideButtonTwo", "slideButtonThree", "slideButtonFour", "slideButtonFive"];
for (var i = 0; i<btns.length; i++) {
var but = this[btns[i]];
but.id = i;
//set var clicked
but.clicked = 0;
but.onRollOver = function() {
//if clicked is false, so unvisited
if (!this.clicked) {
this.gotoAndPlay("fadein");
}
};
but.onRollOut = function() {
//if clicked is false, so unvisited
if (!this.clicked) {
this.gotoAndPlay("fadeout");
slideButtonOne.gotoAndStop(1);

}
}
but.onRelease = function() {
//set clicked true, so the rollover/rollout states know the button is visited
//and keep the button in the fadein state
this.clicked = 1;
setButtons(this.id);
};
}
//I took the cur thing out in the next function
function setButtons(q) {
for (var i = 0; i<btns.length; i++) {
var but = this[btns[i]];
if (i != q) {
but.enabled = 1;
} else {
but.enabled = 0;
}
}
}

I really appreciate all the help I've been getting from you guys, I feel like I owe you all a beverage or something :)

cheers!
/b