In another post, I shared a fun little game that challenged your eyes to try and match up one color with another. This was done using three different sliders for each of the RGB values associated with color. Once you thought you had a good match – you could submit your guess and see how close you were.
In case you missed that one – you can check it out here.

Fun With Color and Sliders

So how did you do?

In this post, I will go over the code that I used to make this possible. The focus here will be on the RGB elements rather than the slider elements. For a more detailed write up on how to implement sliders – please see the first of my five part series on sliders here.

Slider Series Part 1

Let’s take a look at this project.

The Elements

This project is made up of several components.

1. An HTML5 Animation containing three sliders colored red, green, and blue to correspond with each of the RGB elements. These each have a range of 0 to 255.
2. Three variables named varRed, varGreen, and varBlue to track the RGB value for each of the three colors as the slider is moved.
3. Two colored squares – one that is static to be matched and one that is dynamic which will adjust in real time as you move the sliders.
4. Two buttons – one to submit your settings and one to reset the game to try again.
5. Six rectangles to store the RGB values of the two colored squares. Three for the static square and three for the dynamic square.
6. A box that comes up over the location of the HTML5 animation after the submit button is pressed.

There are actions associated with the submit button and the reset button as well as onEnter of the slide. Let’s look at each one.

The onEnter Code

This block of code is the most complex as it is pretty much the bulk of how this works.

setTimeout(function() {
var frame =$(‘#myFrame_web1c’);
var frameRange = frame.contents().find(‘#blueRange’);

frameRange.on(‘input’,function(event)
{
varBlue = frameRange.val();
document.getElementById(“box”).style.backgroundColor=”rgb(” + varRed + “,” + varGreen + “,” + varBlue + “)”;
});

},1000);

In essence, there are three timeout functions – one for each of the color sliders – red, green, and blue. All three blocks are the same except for the color they address so I will just post one of them and talk through it.

The timeout, as you see at the end of the code, has a value of 1000. This is in milliseconds which means a value of one second. Basically the code, onEnter, waits for one second before firing. This is to allow adequate time for all of the elements on the page to finish loading. If we did not allow for time – things would not function properly.

There are three things that execute as a part of the timeout.

1. We go and grab the HTML5 animation (myFrame_web1c) and set that to a variable so that we can work with it.
2. We hunt for the blue slider (blueRange) within the HTML5 animation and set that to a variable so that we can work with it.
3. We run another function that takes the value of the slider and assigns it to our Captivate variable varBlue and then updates the color of the dynamic box.

The Submit Button

This code would be real easy to make with advanced actions but when I have so many things for one button to do – it is faster for me to type it out.

cp.hide(“web1”);

cp.show(“r1”);
cp.show(“g1”);
cp.show(“b1”);

cp.show(“r2”);
cp.show(“g2”);
cp.show(“b2”);

cp.show(“results”);

So we basically hide the HTML5 animation, show the six rectangles with the RGB values, and show the box in the center. That is all.

The Reset Button

The reset button does what you might expect. It resets everything to the starting values.

cp.show(“web1”);

cp.hide(“r1”);
cp.hide(“g1”);
cp.hide(“b1”);

cp.hide(“r2”);
cp.hide(“g2”);
cp.hide(“b2”);

cp.hide(“results”);

varRed=0;
varGreen=0;
varBlue=0;

document.getElementById(“box”).style.backgroundColor=”rgb(0, 0, 0)”;
$(‘#myFrame_web1c’).contents().find(‘#redRange’).val(0);
$(‘#myFrame_web1c’).contents().find(‘#greenRange’).val(0);
$(‘#myFrame_web1c’).contents().find(‘#blueRange’).val(0);

Naturally, you see the opposite effects for most things. We hide the six rectangles and the center box while we show the HTML5 animation again. You also see the three Captivate variables being reset to zero and some code to reset the sliders and dynamic box color to the default black which is RGB(0,0,0).

So – keep having fun with this one and make it a challenge with your friends to see who can get the closest on the first try.

Until next time – keep brainstorming awesome ideas for your projects!