Simon-Townsend.com: The Making Of

If you’ve spent more than 90 seconds on this site (which might be a stretch) you’ve probably noticed the backgrounds’ ability to change colors on it own. What you might not notice is that the color’s aren’t random, and that I haven’t pre-chosen them either. Today I’m going to delve into the process I went through to make that happen.

I thought that it would be cool to have a theme that was never the same. But, I didn’t want it to become an annoyance to the viewer or be an eye sore due to a terrible color harmony. So how could I accomplish such a feat? KULER. For any of you who aren’t aware of Kuler and all of its splendor you need to hop over to kuler.adobe.com now (or after you finish reading this). Kuler is a color scheme website where designers submit wonderful color harmonies for everyone to use. I use it for every project but let’s not get too far off topic just yet. Kuler, I decided, was how I would ensure that color choices would always be good ones (for the most part). Luckily, there is an AS3 library called Color Munch from creator Ben Kanizay. Ben’s library makes it easy to connect to the existing Kuler API and get started grabbing your swatches. Here’s how I used ColorMunch to grab a random theme:

package {
	import beekay.colormunch.*;
	import flash.display.Sprite;
	import flash.events.*;
	import RandomKulerThemeEvent;

	public class RandomKulerTheme extends Sprite {
		private var myColorMunch:ColorMunch=new ColorMunch("YOUR API KEY");
		private var myRandomTheme:Theme;
		public var hexArray:Array = new Array();

		public function RandomKulerTheme() {
			myColorMunch.addEventListener(ColorMunchEvent.RESULT_READY, loaded);
			myColorMunch.addEventListener(ColorMunchEvent.RESULT_EMPTY, onResultEmpty);
			myColorMunch.addEventListener(ColorMunchEvent.ERROR, onError);
			myColorMunch.addEventListener(ColorMunchEvent.LOAD_ERROR, onLoadError);

			myColorMunch.loadThemes();
		}

		private function loaded(e:ColorMunchEvent):void {
			var swatch:Swatch;
			myRandomTheme= myColorMunch.getRandomTheme();

			for (var i:int = 0; i < myRandomTheme.getSwatchCount(); i++) {
				swatch=myRandomTheme.getSwatchByIndex(i);
				hexArray.push(swatch.getHexSring());
			}
			arrayReady();
		}

		private function onResultEmpty(event:ColorMunchEvent):void {
			// the search returned zero results
			trace(event.data);
		}

		private function onError(event:ColorMunchEvent):void {
			// There was an error with my searchThemes call
			// Although the second parameter accepts a string value,
			// because we have used the hex filter options it will check for a hex color in the format '0xFFFFFF' or 'FFFFFF'
			trace(event.data);
		}

		private function onLoadError(event:ColorMunchEvent):void {
			// There was a loading error
			// The data object will contain more info
			trace(event.data);
		}

		private function arrayReady():void {
			dispatchEvent(new RandomKulerThemeEvent(RandomKulerThemeEvent.THEME_READY, hexArray));
		}

	}
}

This class was called from my document class. With-in my document class is a Timer. Every time the Timer fires a TimerEvent.COMPLETE event that triggers the class you see above (RandomKulerTheme.as). After the class above is done grabbing the theme from Kuler it pushes each swatch in the theme to an array called hexArray and passes that array to a RandomKulerThemeEvent.THEME_READY event. The Main class hears that 'ready' event, accesses the swatches and applies them with a color transform to the MovieClips on stage. That magical function looks like this:

private function applyTheme(e:RandomKulerThemeEvent):void
		{
			TweenMax.to(loading,.5,{alpha:0});

			var c1 = e.themeArray[0];
			var c2 = e.themeArray[1];
			var c3 = e.themeArray[2];
			var c4 = e.themeArray[3];
			var c5 = e.themeArray[4];

			TweenMax.to(lamp.lampGraphic,1,{colorTransform:{tint:c1,tintAmount:1}});
			TweenMax.to(trees,1,{colorTransform:{tint:c2,tintAmount:1}});
			TweenMax.to(gradient,1,{colorTransform:{tint:c2,tintAmount:1}});
			TweenMax.to(dome,1,{colorTransform:{tint:c3,tintAmount:1}});
			TweenMax.to(buildingsFront,1,{colorTransform:{tint:c4,tintAmount:1}});
			TweenMax.to(buildingsBack,1,{colorTransform:{tint:c5,tintAmount:1}});
		}

The final piece of the puzzle was to make the background display fullscreen and maintain its aspect ratio. I went to the barrel of bookmarks once again to grab a class I've used many times NpFullBrowserBackground. Dale's blog is great and he's always posting very useful AS3 classes so a big thanks to him for making that class available. I used Dale's class as a wrapper, loaded my KulerBackground as an external .swf and voila! A dynamically themed site was born.