function build() {
	
	zog("____ ZIM Build Examples ____"); 
	
	makeTitle("ZIM Build");
	
	// BUTTON
	// use the zim.Button() class to make a button with rollovers
	// requires stage.enableMouseOver(10); // for rollover
	// requires createjs.Touch.enable(stage,true); // for mobile
	// the following parameters are available (all are optional)
	
	// width, height, 
	// label, fontSize, font, 
	// backingColor, backingRollColor, textColor, textRollColor, borderColor, 
	// corner, shadow
	
	// label is the text on the button
	// corner is the corner radius (default 20)
	// shadow is a blur of the drop shadow (default 16)
	
	var button = new zim.Button(300, 80, "See Parallax");	
	button.x = -400, button.y = 450;	
	stage.addChild(button);
	button.on("click", function() {zog("Button Pressed");});
	
	
	// WAITER
	// extends a createjs.Container
	// adds a little animated three dot wait widget
	// var waiter = new zim.Waiter(parameters);
	// you need to call the waiter.show() to show the waiter and waiter.hide() to hide it
	// you do not need to add it to the stage - it adds itself centered
	// you can change the x and y (with origin and registration point in middle)
	// pass in the stage and speed in ms for the cycle time (default 600ms)
	// pass in backing color and dot color
	// corner is the corner radius default 14
	// color and value for shadow blur - 0 for no shadow
	
	var waiter = new zim.Waiter(stage);
	// we will waiter.show() and waiter.hide() below as we open the pane
	
		
	// PANE
	// use the zim.Pane() class to make a pop panel
	// Pane extends createjs container so you can add objects to it
	// the following are parameters:
	// stage, width, height, color, drag, resets, modal, corner
	// we center on the stage by default
	// the panel is also added to the stage with the show() method
	// and removed from the stage with the hide() method
	// although the pane is 
	// drag is a boolean that defaults to false - set to true to drag
	// drag is limited to the stage
	// resets is a boolean defaulting to false that if set to true
	// makes it so the pane always starts at the start position on opening
	// the modal parameter defaults to true so you can't click off the pane
	// without the pane closing. if you set the modal to false
	// then you must close the pane manually with hide()
	// corner is the corner radius (default 20)
	// backingAlpha defaults to .14 - you can set it to 0 if you want
	
	
	var pane = new zim.Pane(stage, 600, 200, null, "white", true, true, true, 20, .3);
	button.on("click", function() {
		// demonstrate the waiter
		waiter.show();
		setTimeout(function() {
			waiter.hide();
			pane.show();
		}, 1500);
	}); // clicking off pane will close it
	

	
	
	// PARALLAX
	// use the zim.Parallax() class to set up a parallax scene with layers
	// the parameters are stage, damp, x, y, layers
	// Parallax automatically uses the mouse position on the stage to shift layers
	// layers are specified as an array with an object and x and y distances
	// if you do not want motion in y then set the distanceY to 0
	// then as you move the mouse from x=0 to x=stageW the object
	// moves from -distanceX/2 to +distanceX/2 based on a center point
	// things closer should move more so provide a larger layer distance
	// things farther should move less so provide a smaller layer distance
	// use the dispose() method to stop the inner parallax events
	// any objects you need to add to the stage to start or remove afterwards
	// Parallax uses the zim.ProportionDamp() class 
	// and automatically adds damping (default=.1) 
	// you can also specify the center point to shift around
	
	
	var lax = new createjs.Container();
	
	var circles = zimCircle();
	circles.x = 100; circles.y = 0;	
		
	var circles2 = zimCircle();
	circles2.x = 200; circles2.y = 160;	
	zim.scale(circles2, .3);
	
	var circles3 = zimCircle();
	circles3.x = 400; circles3.y = 120;	
	zim.scale(circles3, .5);
	
	var circles4 = zimCircle();	
	circles4.x = 500; circles4.y = 50;	
	zim.scale(circles4, .8);
	
	lax.addChild(circles2,circles3,circles4,circles);
	
	lax.x = -stageW/4;	
	lax.y = -stageH/6;	
	pane.addChild(lax);
	lax.mask = pane.display;	
	
	var layers = [[circles, 200, 100],[circles2, 40, 10],[circles3, 80, 20]];
	var parallax = new zim.Parallax(stage, .05, layers);
	
	// alternatively, you can use the addLayer() method:
	
	parallax.addLayer(circles4, 150, 40);
	

	// SCROLLER
	// use the zim.Scroller() class to 
	// create a horizontal or vertical animated looping background
	// dynamically set the speed and direction 
	// that is, if the scroller is horizontal you can set left or right
	// if the scroller is vertical you can set up or down
	// the parameters are backing1, backing2, speed, direction, horizontal
	// backing1 and backing2 are copies of the same background object
	// horizontal is a boolean that defaults to true 
	// once you create a Scroller you cannot change its orientation
	// but you can use the dispose() method and make a new one
	
	var backing1 = zimBacking();
	var backing2 = zimBacking();
	
	stage.addChildAt(backing1,0);
	stage.addChildAt(backing2,0);
	
	var scene = new zim.Scroller(backing1, backing2, 5, -1, false);
	scene.speed = .4; // scroller goes faster (should ease - version 2 ;-)
	scene.direction = 1 // scene reverses direction 
	
	
	
	// MOVE (from ZIM Create)
	// use the zim.move(obj, x, y, milliseconds, ease); function to move an object
	// just a little wrapper function for the createjs.Tween
	// ease is optional and defaults to "quad" - use "elastic", "back", "bounce", etc.
	// handles removing the Ticker when the tween is done
	// use for the occasional movement as it makes a Ticker each time
	
	zim.move(button, 70, 450, 450, "backOut");
	
		
	
	// DAMPING (from ZIM Code)
	// use the zim.Damp() class to handle damping 
	// damping looks more natural - things slow down and ease to a stop
	// rather than make something follow the cursor directly, apply damping
	// the equation is not long but can be tricky to remember
	// Damp works in two steps:
	// 1. set up a Damp object with a start value and damping value
	// 2. convert a desired number to the dampened number in a Ticker or Interval
	// damping works by continuously going part of the way to a desired value
	// because of the continuous manner, you can't use it with a pressmove event
	// if you want to damp in x and y you need two Damp objects
	// note: Damp just works with values - you then apply the values to your objects
	
	/* // just so distracting, I turned it off
	
	var curse = zimCircle();
	stage.addChild(curse);
	curse.y = 600;
	zim.scale(curse, .2);
		
	var dampX = new zim.Damp(curse.x, .08);
	//var dampY = new zim.Damp(curse.y, .08);

	var ticker = createjs.Ticker.on("tick", function() {
		curse.x = dampX.convert(stage.mouseX);
		//curse.y = dampY.convert(stage.mouseY);
		stage.update();	
	});
	
	*/
	
	
	
	// PROPORTION (from ZIM Code)
	// use the zim.Proportion() class to convert an input value (base)
	// to a proportional value on another scale (target)
	// for instance convert the position of a slider to a volume or a scale
	// proportion requires a straight forward but lengthy equation 
	// so the Proportion class makes it a little easier on us!
	// Proportion has a two step process:
	// 1. set up a Proportion object with its parameters
	// 2. convert a base amount to a target amount 
	// (usually in a Ticker or pressmove event)
	
	// the parameters are: 
	// baseMin, baseMax, targetMin, targetMax, factor, targetRound
	// for a horizontal slider, baseMin is the left of the bar

	// baseMax would be the right of the bar
	// to handle scale, targetMin would be the minimum scale
	// targetMax would be the maximum scale
	// factor is 1 (default) for direct proportion (both increasing)
	// factor is -1 for indirect proportion (one increasing the other decreasing)
	// if you want to round the target amount
	// then set the last parameter to true (default is false)
	// then you adjust the slider knob (base amount) in a pressmove event 
	// and use the convert() method to find the new scale (target amount)
	
	var slider = new createjs.Container();
	slider.x = 900; slider.y = 100;
	stage.addChild(slider);		
	
	var bar = new createjs.Shape();
	bar.height = 300;
	bar.graphics.f("#444").dr(0,0,3,bar.height);				
	slider.addChild(bar);
	
	// width, height, label, backingColor, backingRollColor, borderColor, borderThickness,corner, shadowColor, shadowBlur		
	var knob = new zim.Button(70,44,"S",null,null,null,null,14,"#aaa",5);
	knob.regX = 35;
	knob.regY = 22;
	slider.addChild(knob);
	
	var bounds = new createjs.Rectangle(slider.x,slider.y,0,bar.height);
	zim.drag(knob, bounds, "pointer", "pointer");
	
	// locate the knob starting position based on the current speed of the scene
	var minSpeed = -4;
	var maxSpeed = 4;
	var pStart = new zim.Proportion(minSpeed,maxSpeed,0,bar.height,1.-1);
	knob.y = pStart.convert(scene.speed);
	
	/*
	// use this or use proportion damp below
	
	// now set up the slider to change the scene speed
	var proportion = new zim.Proportion(0,bar.height,minSpeed,maxSpeed,-1);	
	knob.on("pressmove", function() {
		scene.speed = proportion.convert(knob.y);
		stage.update();
	});
	
	*/
	

	
	// PROPORTION DAMP (from ZIM Code)
	// use the zim.ProportionDamp() class to convert an input value (base)
	// to a proportional value on another scale (target) with damping!
	// for instance convert the position of a slider to a scale
	// but as you slide the slider, the scale eases to the right scale
	// this is very fluid and the height of interface elegance
	// combining the two techniques gets fairly complex
	// but ProportionDamp makes it easy!
	
	// ProportionDamp has a two step process:
	// 1. set up a ProportionDamp object with its parameters
	// 2. convert a base amount to an eased target amount 
	// use a Ticker or Interval - NOT a pressmove event (because of easing) 
	
	// the parameters are: 
	// baseMin, baseMax, targetMin, targetMax, damp, factor, targetRound
	// for a horizontal slider, baseMin is the left of the bar
	// baseMax would be the right of the bar
	// to handle scale, targetMin would be the minimum scale
	// targetMax would be the maximum scale
	// damp is the easing with a default of .1
	// factor is 1 (default) for direct proportion (both increasing)
	// factor is -1 for indirect proportion (one increasing the other decreasing)
	// if you want to round the target amount
	// then set the last parameter to true (default is false)
	// then you adjust the slider knob (base amount) in a Ticker event 
	// and use the convert() method to find the new scale (target amount)
	// this process will include damping and look very smooth
	
	// now set up the slider to change the scene speed
	var pd = new zim.ProportionDamp(0,bar.height,minSpeed,maxSpeed,.08,-1);	
	pd.immediate(knob.y);
	var ticker = createjs.Ticker.on("tick", function() {
		scene.speed = pd.convert(knob.y);
		stage.update();
	});


	// amazing!   
	
	
	
	// RADIO BUTTON	
	// A horizontal or vertical set of radio buttons
	// size, buttonData, vertical, color, spacing, margin
	// buttonData can also have more information:
	// [{label:ZIM Label or text, id:optional id, selected:optional Boolean}, {etc...}]
	
	var radio = new zim.RadioButtons(40, ["OFF", "MID", "MAX"], false, "#222222");
	radio.x = 450; radio.y = 540;	
	radio.on("change", function(e) {
		// zog(e.target.text, e.target.selectedIndex, e.target.selected, e.target.label);
		// can use text or selectedIndex to figure out what to do
		
		var mid = (knob.y > bounds.height/2) ? bounds.height*2/3 : bounds.height/3;
		var max = (knob.y > bounds.height/2) ? bounds.height : 0;
		
		if (e.target.text == "MAX") knob.y = max;
		else if (e.target.text == "MID") knob.y = mid;
		else if (e.target.text == "OFF") knob.y = bounds.height/2;
	});
	knob.on("mousedown", function() {radio.setSelected(); stage.update();}); // clear
	// zim.outline(radio);	
	// new zim.Grid(stage,null,false);	
	
	
	// CHECKBOX & LABEL
	// a traditional CheckBox ;-)
	// size, label, startChecked, color, margin
	// label can just be text or can supply a ZIM Label
	// ZIM Label object lets you customize labels of buttons, panes, checkboxes and radio buttons
	// labelText, fontSize, font, textColor, textRollColor, shadowColor, shadowBlur
	var label = new zim.Label("OPTIONS", 32, "verdana", "#222", "#C60");
	
	var checkBox = new zim.CheckBox(40, label, false, "#222222");
	checkBox.x = 450; checkBox.y = 470;
	stage.addChild(checkBox);
	checkBox.on("change", function(e) {
		// zog(e.target.label.text, e.target.checked, e.target.label);
		// can use text or checked to figure out what to do
		if (e.target.checked) {
			stage.addChild(radio);
		} else {
			stage.removeChild(radio);
		}
	});
	checkBox.alpha = 0;
	
	
	// ANIMATE (from ZIM Create)
	// a wrapper for the createjs Tween class that makes and removes a Ticker
	// target, obj, t, ease, callBack, params, wait
	zim.animate(checkBox, {alpha:1}, 1000, null, null, null,700);
	
	
	
	// some helper functions	
	
	function zimCircle(alpha) {
		if (zot(alpha)) alpha = 1;
		var colors = ["#f58e25","#acd241", "#e472c4", "#50c4b7 ", "#d1a170", "#222222"];	
		var c = new createjs.Shape();
		var g = c.graphics;
		c.radius = 100;
		for (var i=0; i<colors.length; i++) {
			g.f(colors[i]).dc(0,0,(c.radius/colors.length)*(colors.length-i));
		}	
		c.setBounds(-c.radius, -c.radius, c.radius*2, c.radius*2);
		c.cache(-c.radius, -c.radius, c.radius*2, c.radius*2);
		c.alpha = alpha;
		return c;
	}	
	
	function zimBacking() {
		var positions = [[200,200], [800,300], [500,400], [600,800], [300,600]];	
		var backing = new createjs.Container();		
		var circle;
		for (var i=0; i<positions.length; i++) {
			circle = zimCircle(.2);
			circle.x = positions[i][0];
			circle.y = positions[i][1];
			backing.addChild(circle);			
		}	
		backing.setBounds(0, 0, 800+circle.getBounds().width/2, 800+circle.getBounds().height/2);
		backing.cache(0, 0, 800+circle.getBounds().width/2, 800+circle.getBounds().height/2);
		return backing;
	}		
	
	
	function makeTitle(t) {			
		var logo = new createjs.Bitmap(preload.getResult("logo"));		
		logo.x = 20; logo.y = 20;		
		logo.alpha = .8;
		logo.cursor = "pointer";
		logo.on("mouseover", function(){logo.alpha = 1; stage.update();});
		logo.on("mouseout", function(){logo.alpha = .8; stage.update();});
		logo.on("click", function(){zgo("../examples.html?build");});
		stage.addChild(logo);	
		zim.scale(logo,.5);
	
		var title = new createjs.Text(t, "26px Verdana", "#933");		
		title.textBaseline = "alphabetic";
		title.alpha = .9;
		title.x = 148; 
		title.y = 69;	
		stage.addChild(title);
		stage.update();
		return title;	
	}		
	

	
	
	stage.update();	
}