What Is This?

Fluid Colors was created to put a background with changing colors to a website. Not just simple changing, but cool changing. It was made quite configurable, so you can create a variety of color effects.

The screen of Fluid Colors can have several parts called spots, each of them changes continuously its color. It will be a randomly chosen color of a predefined color set. You can define several color sets, which will switch from time to time. Optionally there is a mouse effect, which changes the color of the spot under the mouse when moving it. Last but not least (I don't really know what this expression means) you can overlay the whole thing with a vignette mask.

By the way, Fluid Colors needs Flash Player.

How Does It Work?

Open the Fluid Colors Editor and you will see a strange text. This is the configuration! Sorry for not having a real interface, but I was too lazy to make one.

Anyway, just click on "Test it!" to see something (and move the mouse over what you see!). If you have seen enough, click wherever you want. Try all examples (click on an example button and then "Test it!")! So this is how it can look like.

The configuration text is in a format called JSON. It's quite simple to understand. Just be careful with the commas, for example every line with a color set needs a comma at the end except the last one! And "yes" and "no" in JSONish is "true" and "false". Colors are written as hex triplets, like in HTML/CSS. Look at the examples and try some changes! By the way, if you click again on an example, you will lose your changes.

You like your creation? Click on "Save" to save it somewhere under "colors_config.json".

How To Put It Into A Webpage?

Copy the file "FluidColors.swf" and your "colors_config.json" into the same folder where your HTML lives. Now you have to edit your HTML. If you want Fluid Colors as a background for the full page, insert the following text directly under "<body>":

<!-- fluid colors start -->
<div style="width:100%; height:100%; top:0; left:0; position: fixed;"><object id="colorsSwf" data="FluidColors.swf" type="application/x-shockwave-flash" width="100%" height="100%"><param name="allowScriptAccess" value="always" /></object></div>
<script type="text/javascript">document.getElementsByTagName("body")[0].onmousemove = function(e) {var colorsSwfObject = document.getElementById("colorsSwf"); if (colorsSwfObject.Colors_onMouseMove) {colorsSwfObject.Colors_onMouseMove(e.clientX / colorsSwfObject.clientWidth, e.clientY / colorsSwfObject.clientHeight);}};</script>
<!-- fluid colors end -->

That should it be!

Greets,
Timo