Setting an RGB Color Channel of an Object

This lesson shows you how to individually control the red, green and blue color channels of an object.

Creating the UI

Creating the UI

In this example the UI consists of 3 sliders, for the values of the color channels, 3 label fields and an opaque graphic whose color changes.

You can download the stack associated with this lesson from

redChannel setProp handlers

When you set the custom property in any script or the Message Box, it triggers a setProp handler, which increases or decreases the amount of red in the object's backgroundColor. For example, if you set an object's redChannel to 255, it becomes as red as possible. If you set its redChannel to zero, the object's backgroundColor has no red at all.

set the redChannel of graphic "Example" to 255

set the redChannel of the target to myResult

set the redChannel of me to the thumbPosition of scrollbar 1

The handler works by getting the object's backgroundColor and replacing the first item in the RGB triplet, the amount of red, with the "redChannel" value.

Checking the value

The first thing the handler does is check the newValue parameter to make sure it's between zero and 255, the allowable range of values in an RGB triplet:

put max(min(pValue,255),zero) into pValue

It's easiest to understand this statement by taking it one part at a time, starting with the innermost part of the expression. The expression min(pValue,255) evaluates to either 255 or pValue, whichever is smaller. In other words, if pValue is too big, evaluating this part of the statement sets it to 255, and leaves it alone otherwise. Then, the expression max(min(pValue,255),zero) evaluates to either the value we just found, or zero, whichever is larger. The expression, therefore, evaluates to zero if pValue is less than zero, 255 if pValue is greater than 255, or to pValue itself if it's within the range 0–255. We put this value back into pValue, and now we're sure we're dealing with a legal value.

The demo stack doesn't need this check, because it uses a scale bar to set the channel value, so the user can't enter an illegal pValue. But it's good practice to put it into the handler anyway, because you may use this handler in other settings, for example, asking the user to type a number, where the newValue might be out of range.

Setting the backgroundColor

Next, the handler gets the backgroundColor of the target object. The target function refers to the object whose custom property is being set. For example, if you trigger this handler with the statement

set the redChannel of graphic "Hexagon" to 127

then the graphic "Hexagon" is the target. The use of the target function means you can place this handler in a stack script to apply to all the objects in that stack, or in your application's main stack script to apply to all objects throughout your application's stacks.

To get the backgroundColor of an object

put the backgroundColor of the target into tColor

The first item in an RGB triplet is the intensity level of the red channel in the color. Now that we have the RGB triplet as well as the new red value, we can simply put the pValue into item 1 of the RGB triplet, and then set the object's backgroundColor to the modified triplet.

put pValue into item 1 of tColor

set the backgroundColor of the target to tColor

An obvious variation on this handler is to set the green or blue channel instead. This is done simply by changing the item number in the following line:

put pValue into item 1 of tColor

Item 2 is the amount of green, and item 3 is the amount of blue.

The redChannel setProp code

setProp redChannel pValue

  local tColor

  ## make sure pValue is between zero and 255:

  put max(min(pValue,255),zero) into pValue


  put the backgroundColor of the target into tColor


  ## change the first item - red - to new value:

  put pValue into item 1 of tColor

  set the backgroundColor of the target to tColor

end redChannel

Repeat this handler for greenChannel and blueChannel changing the item number.

The slider code

on scrollbarDrag

  ## Use the round function to ensure we pass a whole number

  set the redChannel of graphic "hexagon" to round(the thumbPosition of me)

end scrollbarDrag

Repeat this handler for greenChannel and blueChannel slider changing the custom property name to greenChannel or blueChannel.


Add your comment

E-Mail me when someone replies to this comment