[MX] Changing btn properties using one function

Hey!
I have a mc (menu) with 9 btns:

  • bnt01
  • bnt02
  • bnt03
  • bnt04
  • bnt05
  • bnt06
  • bnt07
  • bnt08
  • bnt09

All the buttons are inicially #999999 (dark gray)
On roll over, each btn displays the red color # FF0000
On roll out, they go back to their original color #999999 (dark gray)
On release, the clicked btn displays the red color # FF0000 and when another btn is clicked, this btn displays the red color # FF0000 and the color of the other 8 btns are set to #999999 (dark gray).

My code for this is working fine but I`ll have to repeat it for all the buttons.
Here it is:

// onRelease
_root.A.btn01.onRelease = function () {

// visited color
visitedcolor = new Color(this);
visitedcolor.setRGB(0xFF0000);
visitedcolor = new Color(_root.A.btn02);
visitedcolor.setRGB(0x999999);
visitedcolor = new Color(_root.A.btn03);
visitedcolor.setRGB(0x999999);
visitedcolor = new Color(_root.A.btn04);
visitedcolor.setRGB(0x999999);
visitedcolor = new Color(_root.A.btn05);
visitedcolor.setRGB(0x999999);
visitedcolor = new Color(_root.A.btn06);
visitedcolor.setRGB(0x999999);
visitedcolor = new Color(_root.A.btn07);
visitedcolor.setRGB(0x999999);
visitedcolor = new Color(_root.A.btn08);
visitedcolor.setRGB(0x999999);
visitedcolor = new Color(_root.A.btn09);
visitedcolor.setRGB(0x999999);

}

For each btn I would have to change set.RGB

Can some help me creating a function so that I would have to repeat this lines for each btn???

Thanks
:slight_smile:

try this:

// Define the btnRelease function
function btnRelease() {
for (var i=1; i<10; i++) { // loop through all buttons
  var btn = _root.A.["btn0"+i];
  if (btn == this) { // if the button is the one that was clicked
    var visitedcolor = new Color(this);
    visitedcolor.setRGB(0xFF0000); // set it to its "on" color
  } else { // otherwise
    var visitedcolor = new Color(btn);
    visitedcolor.setRGB(0x999999); // set it to its "off" color
  }
}
// Set it up for all buttons.
for (var i=1; i<10; i++) { // loop through all buttons
  _root.A.["btn0"+i].onRelease = btnRelease; // set the button's onRelease handler to btnRelease.
}

Dunno if this is of any help, but couldnt you try nesting the functions?

I’d try Brainy’s suggestion, it’s very compact (nice work Brainy :)).

Tiny little typo in Brainy’s code:

var btn = _root.A.["btn0"+i];

should be

var btn = _root.A["btn0"+i];

and

_root.A.["btn0"+i].onRelease = btnRelease; // set the etc . . . 

should be

_root.A["btn0"+i].onRelease = btnRelease; // set the etc . . . 

Just for kicks, here’s why.

The reason you leave out the period when using brackets is because these targets are tracked as if they were arrays (if you look at the bytecode with flasm [http://flasm.sourceforge.net], you’ll see that these objects are all tracked just like the elements of arrays).

With normal arrays, you use brackets and no period:


var myArray = new Array();
myArray[0] = "This is the first element";

var index = 1;
myArray[index] = "This is the second element";

but you can also use associative names with a period:


var myArray = new Array();
myArray.firstName = "JT";
myArray.lastName = "Paasch";
myArray.alias1 = "retrotron";
myArray.alias2 = "aurelius";
etc..

Tracking targets in actionscript works with both of these ways.

One other tidbit: associative arrays can also be referenced with brackets and no period:


var myArray = new Array();
myArray["firstName"] = "JT";
myArray["lastName"] = "Paasch";
myArray["alias1"] = "retrotron";
myArray["alias2"] = "aurelius";
etc..

And, surprise, surprise, you can reference targets like this too:


// this:
_root.A.Btn01._target;

// is the same as this:
_root["A"].Btn01._target;

// and the same as this:
_root["A"]["Btn0" + "1"]._target;

Okay, that was fun, I’ll stop now. :slight_smile:

Thanks a lot.
Appreciate!!!
I`ll try it later.

See u soon!

hmm, **** dots just slipped in there on their own! i swear i didnt put it there.

**** dots
Ha ha, yes, **** dots. I do that all the time. These dots seem to have a mind of their own. Sometimes I catch myself reprimanding them out loud, but then I realize everyone is staring at me . . .

dont you hate it when other people dont understand you when you evaluate associative arrays?

:slight_smile:

Hey everyone!
I was testing the code and found an error.
Here it is with the correction:

function btnRelease() {
for (var i=1; i<10; i++) {
var btn = _root.A[“btnA0”+i];
if (btn == this) {
var visitedcolor = new Color(this);
visitedcolor.setRGB(0xFF0000);
} else {
var visitedcolor = new Color(btn);
visitedcolor.setRGB(0x333333);
}
}
} // this one was missing
for (var i=1; i<10; i++) {
_root.A[“btnA0”+i].onRelease = btnRelease;
}

(I was wrong about the color.
0x999999 is light gray and not dark gray)

thanks so much!
:slight_smile: :slight_smile: :slight_smile:

If you use the actionscript syntax highlighting, code is easier to read. Check out this link: http://www.kirupaforum.com/forums/misc.php?action=bbcode#buttons

Towards the bottom of the list they mention how you can mark code with the “code” and “php” tags. They don’t mention it there, but if you use “as” instead of “php” it will indent your code, color it, etc. (actually, the php one will work too).

thanks for the tips
i always wanted to learn that.

Next time I`ll do it.
The code is working fine!!!

Thanks again!
:slight_smile:

speaking of buttons me wonders if there is any way to convert a movie clip instance to a button instance. I thought the Button.trackAsMenu would work but it doesnt.

I have loaded jpg’s using the createEmptyMovieClip method. Now I would like to use these jpg’s as buttons to view the enlarged image. I have tried
[AS]
this[“movies”+i].trackAsMenu = true;
this.trackAsMenu = true;
this.Button.trackAsMenu = true;
[/AS]

but nothing seems to work. Am I doing the right thing? or is there any other way? or am i asking for a feature that doesnt exist?

hmmm…that’s a fascinating endeavor…why do you want to convert a clip to a button (now my curiosity is up :))?

ok … i got it to work as a button. at least I can see the cursor change to a hand from the arrow. Dunno if that is significant. :wistle: I have uploaded it here. You have to click on the photo gallary button to see what I am talking about.

It seems to be a bit buggy when loaded into the remote server. and you have to wait for a few loops until it starts the infinite menu. I am still constructing the site. Still am a long way from what I want to achieve. So there!

What I did was to load the jpg’s using the createEmptyMovieClip and loadMovie features. Once they are loaded, I put in the infinite menu concept to make it scroll across the screen.

Now, I want to be able to click on these loaded thumbnail jpg’s to view the larger picture. So I have to give them a button instance. I was stuck until last night and I got it in the morning today. For some reason, when I run that said file independently, it does not change the cursor to a hand, but when I loaded the swf from the main swf it does. Figure that out!

Now what I am working on is to link these buttons to an URL. And so far I have had no success. I am trying to use the switch/case initially and c if it works. Having come this far within one month of starting out with Flash, i’m upbeat though. :bounce:

Of course, I would not take the credit to myself. Thanks to kirupa website and its helpful members.

It works… the bloody thing works. (Sorry about the language) But I am elated… now comes the combersome part of creating thumbnails and associated jpg’s.

Opps…forgot one last thing … array’s. A totally new domain for me in flash.

The effect is

here . It wont show any pics right now but will open a new window to yahoo. :wink: and not all buttons have links. (Hope you click on the right button) lol.

cheers

Cool! It’s great to see something finally coming together.

This may not be what you were after, but if you want to make a movieclip act like a button, you simply have to give it a button event. If I have an mc called “myClip_mc”, then this turns it into a button:


myClip_mc.onPress = function() {
  trace("myClip_mc has been clicked");
  getURL("http://www.yahoo.com", "_blank");
} // end myClip_mc.onPress()

It’s not really a button, it’s a movieClip (trace(typeof myClip_mc); returns “movieClip” but if it were a button it would return “button”), but the fun of MX is that all movieClips have all the properties and methods/events that buttons do, so movieClips have in many ways replaced the button.

MovieClips also have a property called “useHandCursor” that lets you allow or disallow the cursor turning into a hand when it passes over your clip buttons.

ok … this code might needs a bit of tweeking and a lot of customizing to suit ones needs. This is something of giving back what i have learnt. Its just actually putting together various tuts on this site. The objective here is if you want your dynamically loaded movies to act as buttons and to create infinite menu, blah blah. the code is self explanatory.

[AS]
stop();

/* create and load the jpg image thumbnails and convert them as buttons /
movieWidth = 60;
for (i=0;i<=19;i++) {
this.createEmptyMovieClip(“movies”+i,i);
loadMovie(“image1.jpg”,“movies”+i);
setProperty(“movies”+i, _x, (i
movieWidth));
this[“movies”+i].trackAsMenu = true; /* this changes the movie instance to button instance*/
}

/* Create the infinite loop parameters and image to load on key press*/
centerPosition = 300;
speed = 1/20;
moveDetails = function(){
var distance = (_root._xmouse - centerPosition);
_x += (distance * speed);
if (_x > 0 ) _x = -600;
if (_x < -600) _x = 0;
switch (i) {
case 0:
this.onRelease = movie0; break;
case 1:
this.onRelease = movie0; break;
case 2:
this.onRelease = movie0; break;
case 3:
this.onRelease = movie0; break;
case 4:
this.onRelease = movie0; break;
case 5:
this.onRelease = movie0; break;
case 6:
this.onRelease = movie0; break;
case 7:
this.onRelease = movie0; break;
case 8:
this.onRelease = movie0; break;
case 9:
this.onRelease = movie0; break;
default:
this.onRelease = movie0; break;
}
}

/* Run the infinite loop function */
this.onEnterFrame = moveDetails;

/* what you want to load on button press */

movie0 = function() {
getURL(“http://yahoo.com”, “_blank”);
}
[/AS]
Of course this is just the basic idea. I am planning of putting arrays to load the images, etc. Theres a tut out here that explains arrays for those interested.
And you need to add functions to define what each button is going to do (i.e. add additional functions like movie0 and change what they are going to be doing, etc.) you get the drift! The beauty of this is I have not added a single symbol or image into the main time line. every thing is dynamic.

I wonder how it will perform once all different images are loaded. Guess will just have to try it out, eh! I did notice one thing though. A couple of images just drop out and there is a blank space. wonder if that has anything to do with the quantity of images loaded.

It can be seen in action here

Cheers!

forgot to mention… you have to look at Photo Gallary! in the above site :wink:

Cool script. :slight_smile: