Hi Forum. I am a newbie, but I'm learning a heck of a lot!
I have created a series of thumbnail buttons that load their full-sized images. Everything is working quite nicely, but at the moment, I don't know of a way to make the thumbnail button stay highlighted once it is clicked. I am using ActionScript and this is the code I use to make the thumbnail go from its 50% opacity (alpha) state to 100% (alpha) when the mouse rolls over, and then return to 50% when the mouse rolls out.
There must be a simple way to have the button remain at 100% opacity (alpha) once it has been clicked until another button is clicked. Could somebody help please?
You have to redefine the rollOver / rollOut states because they were deleted.
Depending on why you want it to stay lit, you might be better off NOT deleting the rollOver/rollOut states and having a quick if statement to check if it should stay lit or not. e.g.
The code above, should do the normal rollOver/out 'highlighting' but then once clicked the button should stay lit until you roll over the OTHER button.
Thanks again Chris. You are really helping me out here. However, I don't think this will do quite what I want.
Basically, I have 21 of these thumbnail buttons ('thumb01' through to 'thumb21'), and the code I gave you is only for 'thumb01' and 'thumb02'.
When one button is clicked, I want it to stay highlighted (ie alpha at 100). When another button is clicked, I want the new button to be highlighted, but all the other buttons to drop back to 50% alpha. At the same time, I still want the RollOver and RollOut actions to work, so rolling your cursor over all the other buttons will make them highlight so that the user knows they are buttons and can be clicked.
Here's the code, just post it into layer1 of a new file.
Code:
// my quick way of making 84 buttons
for (i=1; i<=84; i++) {
// create new movieClips called thumb1, thumb2, thumb3 etc...
_root.createEmptyMovieClip("thumb"+i,i);
// short reference for the new movieClip
mc = _root["thumb"+i];
// make a red box to represent the button graphic
mc.beginFill(0xFF0000,100);
mc.lineTo(60,0);
mc.lineTo(60,20);
mc.lineTo(0,20);
mc.endFill();
// some code to space out the buttons, you can skip this
k = i-1;
j = Math.floor(k/7);
mc._y = j*30;
mc._x = (k-(7*j))*70;
mc._x += 20;
mc._y += 20;
// set buttons to 50 alpha by default
mc._alpha = 50;
// rollOver rollOut and release states
mc.onRollOver = function() {
// make its alpha 100
this._alpha = 100;
};
mc.onRollOut = function() {
// when rolling out, only change its alpha if it's
// not the currently clicked button
if (currentClicked != this) {
// change alpha back to normal (50)
this._alpha = 50;
}
};
mc.onRelease = function() {
// if this isn't the currently clicked button..
if (currentClicked != this) {
// reset it's alpha
currentClicked._alpha = 50;
}
// set the currentlyClicked button to this one
currentClicked = this;
};
}
Should have just posted it instead of providing a file lol
Blimey, this is going to take some thought to work all this out. Thanks for your time: I will try and work out how to extract elements of your code for use in my project.
Hi Chris.
I've been spending some time on trying to work through your code, but I just can't get it to work in my scene. Id I were to save my file and send it to you, would you be able to take a quick look?
Cheers in advance.
Sometimes it easier to just make the button invisible [_visible=0;] when clicked and make another instance of the button visible [_visible=1;], which isn't clickable and is lit.
Then just do the opposite of that if you click on any other buttons so it goes back to its "off" state. This has always works perfectly for me and is a lot easier with little code.
If you'd like a more detailed explanation (tutorial) of this, let me know.
Thanks for your reply. It sounds like an interesting idea, but I really am coming unstuck with the coding. I am very new to AS. There is probably a more optimised way of doing what I am after, but essentially, I have a set of 21 thumbnail buttons appear one by one as in the graphic I uploaded above. I then have two other layers: one is to have all the fade/highlight functionality, and includes the following AS:
this approach might help
it uses movieclips rather than buttons as movieclip timelines are controllable
with actionscript, button timelines are primitive and are not controllable.