Using setTransform to Change Color and Opacity
To learn how to use setTransform, to start with we’ll need something to use it on. To start off, create a simple shape – doesn’t matter what unless you have a specific purpose – and convert it to a symbol (F8). Make sure it’s a movie clip.
As always, assign an instance name to the movie clip so we can reference it from our ActionScripts. I named mine…buttonything.
Make sure the button is selected and select Actions to open the Actions Panel for that object.
In the Actions Panel, we’re going to define a variable named select whose value (true or false) will determine whether the button is highlighted or not. We’ll use an onClipEvent to set a starting value of the variable when the clip loads:
onClipEvent (load) {
var select=false;
}
We’re starting off with the variable set to false – so the button isn’t highlighted. We could set it to true if we wanted; it doesn’t matter, as long as the value changes when the button’s clicked. And speaking of that…
Since we mentioned changing the value of select when the button is clicked, let’s add an on (release) to do that:
on (release){
select=!select;
}
Now, every time the button’s clicked, the value of select will become the opposite of what it was before. If it was true, it becomes false. If it was false, it becomes true. We’ll use that in our last step to determine when the button highlight is turned on or off.
Let’s forget the
select variable for a moment, and look at the setTransform: what does the actual work of changing the button color. Let’s look at the script, first, then break it down:
highlighting = new Color(_root.buttonything);
buttonhighlight = new Object();
buttonhighlight = { ra: '40', rb: '44', ga: '50', gb: '112', ba: '100', bb: '90', aa: '100', ab: '55'};
highlighting.setTransform(buttonhighlight);
Pretty confusing chunk of code, isn’t it? It might seem a bit less confusing if I tell you that it’s actually a great deal like
setRGB. I’ve set a new Color object named
highlighting, and then created a new generic object named
buttonhighlight to hold the following values:
ra: Percentage (-100 to 100) of the red value in an RGB spectrum.
rb: Offset (-255 to 255) for red.
ga: Percentage of the green value.
gb: Offset of the green.
ba: Percentage of the blue value.
bb: Offset of the blue.
aa: Percentage for alpha/opacity.
ab: Offset for alpha.
Tweaking these values allows you to adjust how much the hue of the object is shifted in each color that forms the overall blend (red, green, blue) to adjust the tint, as well as the brightness and opacity. You’ll have play around with them a little to get the hang of it.
Once those values are defined, they can be assigned to the movie clip with the setTransform command – the last line of code above, by using the two objects created to link them back to the instance of the movie clip.
The last thing to do is adjust the setTransform and do a little rearranging so that the tint on the button flips back and forth as it’s pressed. For that we’re going to use the value of select and an if statement to determine which values of the setTransform are used to affect (or not affect) the clip. You should be able to work out how it works from the full script:
onClipEvent (load) {
var select=false;
}
on (release) {
select=!select;
highlighting = new Color(_root.buttonything);
buttonhighlight = new Object();
if (select==true){
buttonhighlight = { ra: '40', rb: '44', ga: '50', gb: '112', ba: '100', bb: '90', aa:
'100', ab: '55'};
highlighting.setTransform(buttonhighlight);
}
if (select==false){
buttonhighlight = { ra: '100', rb: '0', ga: '100', gb: '0', ba: '100', bb: '0', aa:
'100', ab: '255'};
highlighting.setTransform(buttonhighlight);
}
}
And there you have it. This is a simple way to use setTransform, but you can apply it in more advanced ways.
