ZIM Documentation
 ZIM DOCS

Expand for details. See ZIM 4.9.0 for code and updates for changes.

ZIM WRAP
EXPAND 00014 zog(item1, item2, etc.) ~ log
zog(item1, item2, etc.) ~ log
zog global function DESCRIPTION Short version of console.log() to log the item(s) to the console. Use F12 to open your Browser console. EXAMPLE
zog("hello", circle.x); // logs these values to the console
PARAMETERS item1, item2 (optional), etc. - items (expressions) to log to the console RETURNS items it is logging separated by a space if more than one CLOSE ▲VIEW ▤
EXPAND 00040 zid(string) ~ id
zid(string) ~ id
zid global function DESCRIPTION Short version of document.getElementById(string) to access an HTML tag by its id. EXAMPLE
zid("logo").addEventListener("click", function(){});
PARAMETERS string - the id of the tag you are wanting to access RETURNS HTML tag with id of string or null if not found CLOSE ▲VIEW ▤BITS
EXPAND 00064 zss(string) ~ css
zss(string) ~ css
zss global function DESCRIPTION Short version of document.getElementById(string).style to access the style property of an HTML tag by the tag id. EXAMPLE
zss("logo").margin = "10px";
PARAMETERS string - the id of the tag whose style you are wanting to access RETURNS style property of HTML tag with id of string or undefined if not found CLOSE ▲VIEW ▤
EXPAND 00089 zgo(url, target, modal) ~ go
zgo(url, target, modal) ~ go
zgo global function DESCRIPTION Short version of either window.location.href or window.open to open a link in the same window or a specified window. EXAMPLE
zid("logo").addEventListener("click", function(){zgo("http://zimjs.com");}); // with a ZIM object: var button = new zim.Button(); button.center(stage); button.on("click", function() {zgo("http://zimjs.com");});
PARAMETERS url - the link to use (Absolute, Relative or Virtual) target - (default null) the string name of a window (tab) _blank for new window each time modal - (default false) set to true to force user to close window RETURNS null if opening in same window or reference to the window otherwise CLOSE ▲VIEW ▤BITS
EXPAND 00129 zum(string) ~ num
zum(string) ~ num
zum global function DESCRIPTION Takes the units off a string number. Converts "10px" string from styles to number 10, for instance. If there is no value then this will return 0. EXAMPLE
// in HTML <div id="logo" style="position:relative; left:10px">LOGO</div> // in JavaScript var left = zum(zss("logo").left); // converts 10px to the Number 10 left += 20; // adds 20 to 10 zss("logo").left = left + "px"; // assigns 30px to left style
PARAMETERS string - the string representation of a number eg. "10px" RETURNS a Number CLOSE ▲VIEW ▤
EXPAND 00161 zot(value) ~ not
zot(value) ~ not
zot global function DESCRIPTION Test to see if value has no value (value must exist as var or parameter) or if value has been set to null. Good for setting function defaults. Really just asking if the value == null. Often we forget exactly how to do this - it is tricky: value === null, value == undefined, value == 0, !value DO NOT WORK. EXAMPLE
if (zot(width)) width = 100; // equivalent to if (width == null) width = 100;
PARAMETERS value - a variable or parameter you want to see if there is no value assigned RETURNS Boolean true if value does not exist CLOSE ▲VIEW ▤
EXPAND 00190 zop(e) ~ stop
zop(e) ~ stop
zop global function DESCRIPTION Stop event propagation to subsequently added existing listeners. Must pass it e || window.event from your event function. NOTE this is not canceling the default action - to cancel default action use e.preventDefault(); EXAMPLE
zid("button").addEventListener("click", function(e) {    // do something    zop(e||window.event); });
PARAMETERS e - the event object from your event function    collect the event object as e and then pass in e || window.event RETURNS null CLOSE ▲VIEW ▤
EXPAND 00222 zil() ~ still
zil() ~ still
zil global function DESCRIPTION Stop keys from moving content - arrows, spacebar, pgup, pgdown, home, end. Stop scroll wheel from moving content - scrolling the canvas for instance. ZIM Frame does this in the full, fit and outside scale modes. If not using Frame, then you can do this once at the start of your code. Returns an array of references to three listeners: [keydown, mousewheel and DOMMouseScroll]. Use these to removeEventListeners. The arrows, etc, still work but just not their default window behaviour. EXAMPLE
// at the top of your code var listenersArray = zill(); // key and mousewheel arrows, spacebar, etc. // will have their default actions stopped until you remove the listeners: // window.removeEventListener("keydown", listenersArray[0]); // etc.
RETURNS an Array CLOSE ▲VIEW ▤
EXPAND 00258 zet(selector) ~ set
zet(selector) ~ set
zet global function DESCRIPTION Uses document.querySelectorAll() to get a list of tags. Returns a ZIM Zet object which can be used to add events or styles to the set. EXAMPLE
zet(".class").on("click", function(){}); // would add function event to all tags with the class zet("p").css("color", "goldenrod"); // would make the text of all paragraphs goldenrod zet("#test").css({color:"red", "backgound-color":"blue", paddingLeft:"20px"}); // set a custom open property on all section bars to false zet("section .bar").prop("open", false); // set the custom open property on all section bars to true and set the innerHTML to CLOSE zet("section .bar").prop({open: true, innerHTML: "CLOSE"});
PARAMETERS selector - a CSS query selector such as a class, id, tag, or multiple selectors separated by commands    can also be complex selectors suchs as ".class img" METHODS (on the returned Zet object) zet(selector).on(type, function) - a shortcut for addEventListener() and will be added to all tags matching the selector zet(selector).off(type, function) - a shortcut for removeEventListener() and will be remove from all tags matching the selector zet(selector).css(property, value) - gets and sets styles    - gets the first programmatic property if a single string property is passed    - sets the property to the value on each of the Zet's tags from the selector passed to zet()    - if an object of properties and values is passed as the single parameter then sets all these properties    - NOTE: style names do not need quotes unless the dash is used - so camelCase does not require quotes    - NOTE: remember that commas are used for objects - not the semi-colon as in CSS zet(selector).prop(property, value) - gets or sets a property on a set of tags    - if an object of properties and values is provided as a single parameter, then sets all these on the set    - else if no value is set then returns an array of the set tags values for the property    - else if value is a single value then sets the property of the tags in the set to the value PROPERTIES (on the returned Zet object) tags - an HTML tag list RETURNS Zet object with on(), off(), css() methods and tags property (HTML tag list) CLOSE ▲VIEW ▤BITS
EXPAND 00371 zob(func, args, sig, scope) ~ object
zob(func, args, sig, scope) ~ object
zob global function DESCRIPTION A system to build functions or classes that allow traditional parameters or a configuration object passed in as a single parameter. The configuration object has property names that match the function arguments. To use zob on your own functions, pass in a function and the function's arguments and insert zob into first line of your function as shown below. Replace yourFunction with a reference to your function but keep arguments as is. EXAMPLE
function test(a,b,c){    var duo; if (duo = zob(yourFunction, arguments)) return duo; }; test(1,null,3); // traditional parameters in order test({a:1,c:3}); // configuration object with zob
NOTE if you are minifying the file then you need to do an extra step add a string version of the signature of your function above the duo call then pass the signature in as a parameter to zob() EXAMPLE
var sig = "a,b,c"; var duo; if (duo = zob(yourFunction, arguments, sig)) return duo;
NOTE if you are running the function as a constructor with the new keyword then you need to pass in this (keyword) as the last parameter (sig can be null) this allows zob() to test to see if we need to rerun the function as a constructor EXAMPLE
var duo; if (duo = zob(yourFunction, arguments, sig, this)) return duo;
many of the ZIM functions and classes use this "DUO" technique the documentation for parameters will tell you if they support DUO works also with JS6 default parameter values PARAMETERS func - reference to the function you want to use params or a config object with args - reference to the arguments property of the function (literally, use "arguments" with no quotes) sig - (default null) a string listing of the parameters just how they are in the () not including the ()    required if you are minifying the file as minifying changes the signature scope - (default null) reference to this (litterally, use "this" without the quotes)    required if the function is being run with the new keyword RETURNS um... a Boolean CLOSE ▲VIEW ▤BITS
ZIM CODE
EXPAND 00449 zim.shuffle = function(array)
zim.shuffle = function(array)
shuffle zim function DESCRIPTION Randomly shuffles elements of an array. Actually changes the original array (and also returns it). EXAMPLE
var array = ["happy", "sad", "spooked"]; var randomFromArray = zim.shuffle(array)[0]; // this will be randomized each time it is run
EXAMPLE
var array = zim.shuffle(["happy", "sad", "spooked"]); for (var i=0; i<array.length) zog(array[i]); // this will get random and unique elements of the array
PARAMETERS array - the Array to shuffle RETURNS the modified Array CLOSE ▲VIEW ▤BITS
EXPAND 00490 zim.rand = function(a, b, integer, negative)
zim.rand = function(a, b, integer, negative)
rand zim function DESCRIPTION Returns a random integer between and including a and b if integer is true. Returns a random number (with decimals) including a and up to b but not b if integer is false. b is optional and if left out will default to 0 (includes 0). integer is a boolean and defaults to true. If a and b are 0 then just returns Math.random(). EXAMPLE
var speed = zim.rand(10,20); // 10, 11, 12... 18, 19 or 20 var colors = ["blue", "yellow", "green"]; var color = colors[zim.rand(colors.length-1)]; // note the length-1 // the equivalent of: var color = colors[Math.floor(Math.random()*colors.length)]; // OR a technique I often use without using zim.rand(): // but zim.rand() is probably better var color = zim.shuffle(colors)[0]; // here we get a speed that is either from 5 to 10 or -5 to -10 var speed = zim.rand(5,10,null,true);
PARAMETERS a - the first Number for the range    if a and b are not provided, zim.rand() acts like Math.random()    if parameter b is not provided, rand will use range 0 to and including a b - (default 0) second Number for the range    it does not matter if a>b or a<b integer - (default true) set to false to include decimals in results    if false, range will include decimals up to but not including the highest number    if a or b have decimals this is set to false negative - (default false) includes the negative range as well as the positive RETURNS a Number CLOSE ▲VIEW ▤BITS
EXPAND 00556 zim.loop = function(obj, call, reverse, step, start, end)
zim.loop = function(obj, call, reverse, step, start, end)
loop zim function DESCRIPTION 1. If you pass in a Number for obj then loop() does function call that many times and passes function call the currentIndex, totalLoops, startIndex, endIndex, obj. By default, the index starts at 0 and counts up to one less than the number. So this is like: for (var i=0; i<obj; i++) {} 2. If you pass in an Array then loop() loops through the array and passes the function call the element in the array, currentIndex, totalLoops, startIndex, endIndex and the array. So this is like: for (var i=0; i<obj; i++) {element = array[i]} 3. If you pass in an Object literal then loop() loops through the object and passes the function call the property name, value, currentIndex, totalLoops, startIndex, endIndex, obj So this is like: for (var i in obj) {property = i; value = obj[i];} NOTE If you pass in true for reverse, the loop is run backwards counting to 0 (by default) NOTE use return to act like a continue in a loop and go to the next loop NOTE return a value to return out of the loop completely like a break (and return a result if desired) EXAMPLE
var container = new zim.Container(); zim.loop(1000, function(i) { // gets passed an index i, totalLoops 1000, startIndex 0, endIndex 999, obj 1000    // make 1000 rectangles    container.addChild(new zim.Rectangle()); }); stage.addChild(container); // to continue or break from loop have the function return the string "continue" or "break" zim.loop(10, function(i) {    if (i%2==0) return; // skip even    if (i>6) return "break"; // quit loop when > 6    zog(i); }); var colors = [frame.green, frame.yellow, frame.pink]; zim.loop(colors, function(color, index, start, end, array) { // do not have to collect all these    zog(color); // each color }); var person = {name:"Dan Zen", occupation:"Inventor", location:"Dundas"} var result = zim.loop(person, function(prop, val, index, total, start, end, object) { // do not have to collect all these    zog(prop, val); // each key value pair    if (val == "criminal") return "criminal"; // this would return out of the loop to the containing function }); if (result == "criminal") alert("oh no!");
PARAMETERS supports DUO - parameters or single object with properties below obj - a Number of times to loop or an Array or Object to loop through call - the function to call    the function will receive (as its final parameters) the index, total, start, end, obj       where the index is the current index, total is how many times the loop will run       start is the start index, end is the end index and obj is the object passed to the loop    the starting parameters vary depending on the type of obj:    if the obj is a number then the first parameter is the index (no extra starting parameters given)    if the obj is an array then the first parameter is the element at the current index    if the obj is an object literal then the first and second parameters are the property name and property value at the current index reverse - (default false) set to true to run the loop backwards to 0 step - (default 1) each step will increase by this amount (positive whole number - use reverse to go backwards) start - (default 0 or length-1 for reverse) index to start end - (default length-1 or 0 for reverse) index to end RETURNS any value returned from the loop - or undefined if no value is returned from a loop CLOSE ▲VIEW ▤BITS
EXPAND 00695 zim.timeout = function(time, call)
zim.timeout = function(time, call)
timeout zim function DESCRIPTION Calls a function after the time delay - like window.setTimeout() Uses window.requestAnimationFrame() that tends to rest when the window is not showing NOTE setTimeout has the time parameter last, zim.timeout has it first so that it is consistent with zim.loop() and the CreateJS on() method NOTE to clear a zim.timeout you use returnID.clear() - different than window.clearTimeout(returnID) EXAMPLE
zim.timeout(1000, function(){    circle.x += 100;    stage.upate(); }); // moves the circle 100 pixels after one second // GAME to press button within one second: var timeout = zim.timeout(1000, function() {    zog("you lose!");    button.enabled = false; }); var button = new zim.Button().center(stage); button.on("click", function() {    zog("you win!");    timeout.clear(); });
PARAMETERS time - milliseconds to wait until function is called call - function to call when the time passes - will receive the id object as a single parameter RETURNS a ZIM timeoutObject to pause and clear the timeout with the following methods and properties: METHODS - of ZIM timeoutObject pause(state) - (default true) will pause the timeout - set to false to unpause the timeout clear() - will clear the timeout PROPERTIES - of ZIM timeoutObject time - the time in milliseconds that has lapsed paused - the paused state of the timeout CLOSE ▲VIEW ▤
EXPAND 00782 zim.interval = function(time, call, total, immediate)
zim.interval = function(time, call, total, immediate)
interval zim function DESCRIPTION Calls a function after each time delay - like window.setInterval(). Can pass in an Array of two times to set random time delays each interval. Can pass in how many times you want to run the function and whether it runs right away. Uses window.requestAnimationFrame() that tends to rest when the window is not showing. NOTE setInterval has the time parameter last, zim.interval has it first so that it is consistent with zim.loop() and the CreateJS on() method NOTE to clear a zim.interval you use intervalObj.clear() - different than window.clearInterval(returnID) EXAMPLE
zim.interval(1000, function(){    circle.x += 100;    stage.upate(); }); // every second the circle will move 100 pixels // if you want smooth movement, use: zim.Ticker.add(function() {    circle.x += 100; // no need for stage.update() }); zim.interval(1000, function(obj) {    zog("counting " + obj.count); // starts counting at 1    if (obj.count == 10) obj.clear(); // will now log 1 to 10 }); OR better: zim.interval(1000, function(obj) {    zog("counting " + obj.count); // starts counting at 1 }, 10); // now will log 1 - 10 with total parameter set to 10 IMMEDIATE: zim.interval(1000, function(obj) {    zog("counting " + obj.count); // starts counting at 0 }, 10, true); // now will log 0 - 9 with immediate parameter set to true EXTERNAL control: var interval = zim.interval(1000, function() {    zog("counting " + interval.count); // starts counting at 1 }); var button = new zim.Button({label:"STOP", toggle:"START"}).center(stage); button.on("click", function(){interval.pause(button.toggled);}); RANDOM intervals zim.interval([200, 800], dropBombs); // bombs will fall at different rates between 200ms and 800ms
PARAMETERS time - (default 1000) milliseconds for the interval (delay until the function runs - again and again)    pass in an Array of two times to vary the interval randomly between the two numbers call - function to call when the interval passes    Will be passed a ZIM intervalObject as a single parameter    This is the same as the return object from zim.animate()    See the Returns section below for methods and properties of the intervalObject total - (default null - infinite) the number of times the function is called    note: the count property counts intervals but the total property is based on function calls.    The total will be equal to the end count with the immediate parameter set to false (default)    but the total will be one less than the count if the immediate parameter is true (like an Array index and length) immediate - (default false) set to true to call the function right away (and then still call every interval)    This will not increase the count in the intervalObject because count counts intervals not function calls    Use the provided parameter of the call function to access the intervalObject inside the call function RETURNS a ZIM intervalObject to pause and clear the interval with the following methods and properties: METHODS - of ZIM intervalObject pause(state) - (default true) will pause the interval - set to false to unpause the interval clear() - will clear the interval PROPERTIES - of ZIM intervalObject count - the number of times the interval has run (if immediate is true, the first count is 0) paused - the paused state of the interval pauseTimeLeft - if paused, how much time is left once unpaused CLOSE ▲VIEW ▤
EXPAND 00933 zim.copy = function(obj)
zim.copy = function(obj)
copy zim function DESCRIPTION Copies arrays and basic objects: http://stackoverflow.com/users/35881/a-levy If you have var obj = {prop:"val"}; and then try and copy obj to obj2 like so: obj2 = obj; then obj2 and obj refer to the same object. This means that after obj.prop = "new"; both obj.prop and obj2.prop would be "new". zim.copy(obj) returns a new object so both will work independently and after obj.prop = "new"; obj2.prop would still be "val". EXAMPLE
var obj = {hair:blue, cars:["audi", "honda"]}; var cop = zim.copy(obj); cop.hair = "green"; zog(obj.hair, obj.cop); // blue, green obj.cars.push("vw"); zog(obj.cars.length, cop.cars.length); // 3, 2
PARAMETERS obj - the object to copy RETURNS a new Object CLOSE ▲VIEW ▤
EXPAND 00978 zim.arraysEqual = function(a, b, strict)
zim.arraysEqual = function(a, b, strict)
arraysEqual zim function DESCRIPTION Finds out if arrays are same (including nested arrays). Works for arrays with strings and numbers (not necessarily other objects). (Slightly modified Evan Steinkerchnerv & Tomas Zato) EXAMPLE
var one = [1,2,"wow",[3,4]]; var two = [1,2,"wow",[3,4]]; zog(zim.arraysEqual(one, two)); // true one[3][1] = 5; zog(zim.arraysEqual(one, two)); // false
PARAMETERS a, b - the arrays to check to see if they are equal strict - (default true) set to false so order in arrays does not matter RETURNS a Boolean CLOSE ▲VIEW ▤
EXPAND 01023 zim.isEmpty = function(obj)
zim.isEmpty = function(obj)
isEmpty zim function DESCRIPTION returns whether an object literal is empty EXAMPLE
var o = {}; zog( zim.isEmpty(o) ); // true o.test = 9; zog( zim.isEmpty(o) ); // false
PARAMETERS obj - the object literal to test RETURNS a Boolean CLOSE ▲VIEW ▤
EXPAND 01054 zim.merge = function(objects)
zim.merge = function(objects)
merge zim function DESCRIPTION Merges any number of objects {} you pass in as parameters. Overwrites properties if they have the same name. Returns a merged object with original objects kept intact. EXAMPLE
var one = {food:"chocolate"}; var two = {drink:"milk"}; var tri = zim.merge(one, two); zog(tri.food, tri.drink); // chocolate, milk
PARAMETERS objects - a list of objects (any number) to merge together RETURNS a new Object CLOSE ▲VIEW ▤
EXPAND 01090 zim.decimals = function(num, places, addZeros)
zim.decimals = function(num, places, addZeros)
decimals zim function DESCRIPTION Rounds number to the number of decimal places specified by places. Negative number places round to tens, hundreds, etc. If addZeros is true it fills up ends with zeros - if the places is negative with addZeros then it fills up the start with zeros and does not round to tens, hundreds, etc. just adds zeros to start EXAMPLE
var score = 1.234; score = zim.decimals(score); zog(score); // 1.2 zog(zim.decimals(1.8345, 2)); // 1.83 zog(zim.decimals(123,-1)); // 120 zog(zim.decimals(2.3,2,true)); // 2.30 zog(zim.decimals(3,-2,true)); // 03 zog(zim.decimals(11,-2,true)); // 11 zog(zim.decimals(11,-3,true)); // 011
PARAMETERS num - the Number to operate on places - (default 1) how many decimals to include (negative for left of decimal place) addZeros - (default false) set to true to add zeros to number of decimal places (and return String)    will not round if places is negative but rather add zeros to front RETURNS a rounded Number or a String if addZeros is true CLOSE ▲VIEW ▤
EXPAND 01148 zim.sign = function(num)
zim.sign = function(num)
sign zim function DESCRIPTION returns -1, 0 or 1 depending on whether the number is less than, equal to or greater than 0 EXAMPLE
var speed = 20; zog(zim.sign(speed)); // 1 var speed = 0; zog(zim.sign(speed)); // 0 var speed = -20; zog(zim.sSign(speed)); // -1
PARAMETERS num - the Number to operate on RETURNS -1, 0 or 1 CLOSE ▲VIEW ▤
EXPAND 01179 zim.constrain = function(num, min, max, negative)
zim.constrain = function(num, min, max, negative)
constrain zim function DESCRIPTION returns a number constrained to min and max EXAMPLE
var cirle.x = zim.constrain(circle.radius, stageW-circle.radius); // circle.x will not be smaller than the radius or bigger than stageW-radius var speed = zim.constrain(minSpeed, maxSpeed, true); // will confine the speed between minSpeed and maxSpeed if speed is positive // and confine the speed between -maxSpeed and -minSpeed if the speed is negative
PARAMETERS num - the number to be constrained min - (default 0) the minimum value of the return number max - (default Number.MAX_VALUE) the maximum value of the return number negative - (default false) allow the negative range of min and max when num is negative RETURNS num if between min and max otherwise returns min if less or max if greater (inclusive) RETURNS num between -max and -min if num is negative and negative parameter is set to true CLOSE ▲VIEW ▤
EXPAND 01220 zim.dist = function(x1, y1, x2, y2)
zim.dist = function(x1, y1, x2, y2)
dist zim function DESCRIPTION calculates the distance between two points. EXAMPLE
var distance = zim.dist(stageW/2, stageH/2, stage.mouseX, stage.mouseY); // distance of mouse from center of stage
PARAMETERS x1, y1 - first point x and y x2, y2 - (default 0, 0) second point x and y RETURNS a positive Number that is the distance (could be on an angle) CLOSE ▲VIEW ▤
EXPAND 01248 zim.makeID = function(length, type, letterCase)
zim.makeID = function(length, type, letterCase)
makeID zim function DESCRIPTION makes a random letter, number or mixed id of specified length EXAMPLE
var id1 = zim.makeID(); // five random letters and numbers (starts with letter) var id2 = zim.makeID(null, "string"); // five random uppercase letters var id3 = zim.makeID(10, "number"); // ten random numbers var id4 = zim.makeID(5, ["Z", "I", "M", 1, 2, 3, 4, 5, "-"]); // random five characters from array (possibly repeating)
PARAMETERS length - (default 5) the length of the id type - (default "mixed") set to "letters" or "numbers" as well    note: no O, 0, 1, I or L due to identification problems    pass in an array of characters to make an id from only those characters letterCase - (default uppercase) - set to "lowercase" or "mixed" as well RETURNS a String id (even if type is number) CLOSE ▲VIEW ▤
EXPAND 01306 zim.Damp = function(startValue, damp)
zim.Damp = function(startValue, damp)
Damp zim class DESCRIPTION Damping emulates things slowing down due to friction. The movement heads towards the right value and looks organic. This is similar if not the same as easing out when tweening. Create your Damp object outside an interval or Ticker then inside an interval or ticker call the convert method. EXAMPLE
var d = new zim.Damp(parameters); setInterval(function() {    dampedValue = d.convert(desiredValue); }, 100);
you would then apply that desired value to a property such as x or y or scale if you want to do both x and y then you need two Damp objects and two convert calls (you can do both in one interval or ticker) EXAMPLE
var circle = new zim.Circle(); circle.center(stage); var dampX = new zim.Damp(circle.x); var dampY = new zim.Damp(circle.y); // start moving once mouse enters stage // this event will only run once (the last parameter is true) stage.on("stagemousemove", start, null, true); function start() {    zim.Ticker.add(function() {       circle.x = dampX.convert(stage.mouseX);       circle.y = dampY.convert(stage.mouseY);    }, stage); }
PARAMETERS supports DUO - parameters or single object with properties below startValue - (default 0) start object at this value and then start damping damp - (default .1) the damp value with 1 being no damping and 0 being no movement METHODS convert() - converts a value into a damped value immediate() - immediately goes to value and returns the Damp object PROPERTIES damp - can dynamically change the damping (usually just pass it in as a parameter to start) lastValue - setting this would go immediately to this value (would not normally use) CLOSE ▲VIEW ▤BITS
EXPAND 01373 zim.Proportion = function(baseMin, baseMax, targetMin, targetMax, factor, targetRound)
zim.Proportion = function(baseMin, baseMax, targetMin, targetMax, factor, targetRound)
Proportion zim class DESCRIPTION Proportion converts an input value to an output value on a different scale. (sometimes called a map() function) For instance, like a slider controlling the scale of an object or sound volume. Make a Proportion object and then in an interval, ticker or event, convert the base value to the target value using the convert method. EXAMPLE
frame.loadAssets("mySound.mp3"); frame.on("complete", function() {    var sound = frame.asset("mySound.mp3").play();    var p = new zim.Proportion(0, 10, 0, 1);    var dial = new zim.Dial(); // default range of 0 to 10    dial.currentValue = 10;    dial.on("change", function(){       sound.volume = p.convert(dial.currentValue);    }); // end of dial change }); // end sound loaded
PARAMETERS supports DUO - parameters or single object with properties below baseMin - min for the input scale (say x value) baseMax - max for the input scale (say x value) targetMin - (default 0) min for the output scale (say volume) targetMax - (default 1) max for the output scale (say volume) factor (default 1) is going the same direction and -1 is going in opposite direction targetRound (default false) set to true to round the converted number METHODS convert(input) - will return the output property (for instance, a volume) NOTE the object always starts by assuming baseMin as baseValue just call the convert method right away if you want it to start at a different baseValue for instance, if your slider went from 100 to 500 and you want to start at half way make the object and call p.convert(300); on the next line CLOSE ▲VIEW ▤BITS
EXPAND 01449 zim.ProportionDamp = function(baseMin, baseMax, targetMin, targetMax, damp, factor, targetRound)
zim.ProportionDamp = function(baseMin, baseMax, targetMin, targetMax, damp, factor, targetRound)
ProportionDamp zim class DESCRIPTION ProportionDamp converts an input value to an output value on a different scale with damping. Works like Proportion Class but with a damping parameter. Damping needs constant calculating so do not put in mousemove event. The below example scales the circle based on the mouse height. EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); // center method added in ZIM 4TH var pd = new zim.ProportionDamp(0, stageH, 0, 5, .2); zim.Ticker.add(function() {    circle.scale(pd.convert(stage.mouseH)); // scale method added in ZIM 4TH }, stage);
PARAMETERS supports DUO - parameters or single object with properties below baseMin - min for the input scale (say x value) baseMax - max for the input scale (say x value) targetMin - (default 0) min for the output scale (say volume) targetMax - (default 1) max for the output scale (say volume) damp - (default .1) the damp value with 1 being no damping and 0 being no movement factor (default 1) is going the same direction and -1 is going in opposite direction targetRound (default false) set to true to round the converted number METHODS convert(input) - converts a base value to a target value immediate(input) - immediately sets the target value (no damping) and returns the ProportionDamp object dispose() - clears interval PROPERTIES damp - can adjust this dynamically (usually just pass it in as a parameter to start) NOTE the object always starts by assuming baseMin as baseValue if you want to start or go to an immediate value without easing then call the pd.immediate(baseValue) method with your desired baseValue (not targetValue) CLOSE ▲VIEW ▤BITS
EXPAND 01569 zim.Dictionary = function(unique)
zim.Dictionary = function(unique)
Dictionary zim class DESCRIPTION An object that uses objects as keys to give values. Similar to an object literal with properties except the property names are objects instead of strings. JavaScript currently does not have a dictionary, but other languages do. EXAMPLE
var o = {test:"test"}; var f = function(w) {zog(w)}; var c = new zim.Circle(); var d = new zim.Dictionary(); d.add(o, 1); d.add(f, 2); d.add(c, f); zog(d.at(o)); // 1 zog(d.at(f)); // 2 d.at(c)("hello"); // hello d.remove(o); // to clear o zog(d.length); // 2
EXAMPLE
var d = new zim.Dictionary(); d.add(circle, "one"); d.add(circle, "two"); zog(d.at(circle)); // two - just the latest but "one" is still there for (var i=0; i<d.length) {    if (d.objects[i] == circle) zog(d.values[i]); // one then two } // note, loop backwards to clear values at a key
EXAMPLE
// with unique property add(key, val) removes the last val at that key var d = new zim.Dictionary(true); d.add(circle, "one"); d.add(circle, "two"); zog(d.at(circle)); // two - and now only two is there for (var i=0; i<d.length) {    if (d.objects[i] == circle) zog(d.values[i]); // two } // note, now d.remove(key) removes that unique entry for the key
METHODS add(object, value) - adds a value that can be retrieved by an object reference    if unique is false, this will not overwrite previous entries at the object key    if unique is true, this will overwrite previous entries at the object key    value is optional and will default to true at(object) - retrieves the last value stored at the object (or returns null if not there) remove(object) - removes the last value at the object from the Dictionary dispose() - deletes Dictionary object PROPERTIES length - the number of items in the Dictionary unique - whether the dictionary will overwrite values (going from false to true will not delete previous values) objects - array of keys values - array of values synched to keys CLOSE ▲VIEW ▤
EXPAND 01672 zim.swapProperties = function(property, objA, objB)
zim.swapProperties = function(property, objA, objB)
swapProperties zim function DESCRIPTION Pass in a property as a string and two object references and this function will swap the property values. EXAMPLE
// exchanges the x position of two ZIM circles zim.swapProperties("x", circle1, circle2); stage.update();
PARAMETERS property - a String of the property to swap values eg. "alpha" objA, objB - the objects on which to swap properties RETURNS Boolean indicating success CLOSE ▲VIEW ▤BITS
EXPAND 01704 zim.swapHTML = function(idA, idB)
zim.swapHTML = function(idA, idB)
swapHTML zim function DESCRIPTION Pass in two tag ids as strings and this function will swap their innerHTML content. The content (including nested tags) will be swapped. EXAMPLE
// exchanges the content of two divs called question and answer zim.swapHTML("question","answer");
PARAMETERS idA, idB - String names of the tag id with which to swap innerHTML values RETURNS Boolean indicating success CLOSE ▲VIEW ▤
EXPAND 01729 zim.scrollX = function(num, time)
zim.scrollX = function(num, time)
scrollX zim function DESCRIPTION This function gets or sets how many pixels from the left the browser window has been scrolled. If num is provided then the function scrolls the window to this x position. If num and time are provided it animates the window to the x position in time milliseconds. EXAMPLE
// hide the logo if the page is scrolled left more than 200 pixels if (zim.scrollX < -200) zss("logo").display = "none";
PARAMETERS num - (default null) optional scroll position to go to (probably negative) time - (default 0) time in milliseconds to take to go to the num position RETURNS a Number CLOSE ▲VIEW ▤
EXPAND 01757 zim.scrollY = function(num, time)
zim.scrollY = function(num, time)
scrollY zim function DESCRIPTION This function gets or sets how many pixels from the top the browser window has been scrolled. If num is provided then the function scrolls the window to this y position. If num and time are provided it animates the window to the y position in time milliseconds. EXAMPLE
// animate the scroll position down 100 pixels in half a second zim.scrollY(zim.scrollY()-100, 500);
PARAMETERS num - (default null) optional scroll position to go to (probably negative) time - (default 0) time in milliseconds to take to go to the num position RETURNS a Number CLOSE ▲VIEW ▤
EXPAND 01823 zim.windowWidth = function()
zim.windowWidth = function()
windowWidth zim function DESCRIPTION Returns the width of a window. (window.clientWidth or window.innerWidth) EXAMPLE
if (zim.windowWidth() < 500) zss("related").display = "none";
RETURNS a Number CLOSE ▲VIEW ▤
EXPAND 01844 zim.windowHeight = function()
zim.windowHeight = function()
windowHeight zim function DESCRIPTION Returns the height of a window. (window.clientHeight or window.innerHeight) EXAMPLE
if (zim.windowHeight() > 1000) zgo("big.html");
RETURNS a Number CLOSE ▲VIEW ▤
EXPAND 01865 zim.urlEncode = function(string)
zim.urlEncode = function(string)
urlEncode zim function DESCRIPTION Matches PHP urlencode and urldecode functions for passing data on end of URL. NOTE only encode values of key=value pairs (not keys and not both keys and values) NOTE JSON automatically encodes and decodes EXAMPLE
var motto = "good = life & life = now"; zgo("submit.php?motto="+zim.urlEncode(motto));
PARAMETERS string - a value to URL encode (space to plus, etc.) RETURNS a String CLOSE ▲VIEW ▤
EXPAND 01894 zim.urlDecode = function(string)
zim.urlDecode = function(string)
urlDecode zim function DESCRIPTION Matches PHP urlencode and urldecode functions for receiving raw data from a source that URLencodes. NOTE JSON automatically encodes and decodes EXAMPLE
var pairs = command.split("&"); var motto = zim.urlDecode(pairs[0].split("=")[1]);
PARAMETERS string - a URLencoded String to decode RETURNS a String CLOSE ▲VIEW ▤
EXPAND 01920 zim.setCookie = function(name, value, days)
zim.setCookie = function(name, value, days)
setCookie zim function DESCRIPTION Sets an HTML cookie to remember some user data your site has set over time. If no days, it will be a session cookie (while browser is open). EXAMPLE
var visits = zim.getCookie("visits"); if (zot(visits)) visits = 0; zim.setCookie("visits", ++visits);
PARAMETERS name - a String name for your cookie value - a String value that you want to store days - (default 0) for how many days do you want to store the cookie ALSO see zim.getCookie and zim.deleteCookie RETURNS a Boolean indicating success CLOSE ▲VIEW ▤BITS
EXPAND 01959 zim.getCookie = function(name)
zim.getCookie = function(name)
getCookie zim function DESCRIPTION Gets an HTML cookie that you have previously set. EXAMPLE
var visits = zim.getCookie("visits"); if (zot(visits)) visits = 0; zim.setCookie("visits", ++visits);
PARAMETERS name - the String name of your stored cookie ALSO see zim.setCookie and zim.deleteCookie RETURNS a String or undefined if not found CLOSE ▲VIEW ▤
EXPAND 01994 zim.deleteCookie = function(name)
zim.deleteCookie = function(name)
deleteCookie zim function DESCRIPTION Deletes an HTML cookie. EXAMPLE
zim.deleteCookie("visits"); // clears the cookie
PARAMETERS name - the String name of your stored cookie to delete ALSO see zim.setCookie and zim.getCookie RETURNS a Boolean indicating success CLOSE ▲VIEW ▤
EXPAND 02021 zim.mobile = function(orientation)
zim.mobile = function(orientation)
mobile zim function DESCRIPTION Detects if app is on a mobile device - if so, returns the mobile device type: android, ios, blackberry, windows, other (all which evaluate to true) else returns false. orientation defaults to true and if there is window.orientation then it assumes mobile BUT this may return true for some desktop and laptop touch screens so you can turn the orientation check off by setting orientation to false. If orientation is set to false the check may miss non-mainstream devices The check looks at the navigator.userAgent for the following regular expression: /ip(hone|od|ad)|android|blackberry|nokia|opera mini|mobile|phone|nexus|webos/i Microsoft mobile gets detected by nokia, mobile or phone. EXAMPLE
if (zim.mobile()) {    var pane = new zim.Pane(stage, 300, 200, "Desktop Only");    pane.show(); }
PARAMETERS orientation - (default true) uses window.orientation property to determine mobile    this may call certain touch screens mobile    but setting to false uses a test on mobile names which could be incomplete RETURNS a String or false CLOSE ▲VIEW ▤BITS
EXPAND 02064 zim.async = function(url, callback)
zim.async = function(url, callback)
async zim function DESCRIPTION A way to send data back and forth to a server script without reloading the HTML page. (like AJAX but without the bother) Uses a dynamic script call with an optional callback (cross domain calls are okay) also known as JSON-P pattern but JSON is unnecessary - note, no JSON in the examples below. Pass a url to the server script (ie. php or node page) and an optional callback function that you define in your code (cannot be an anonymous function). zim.async will automatically add a random number to the end of your script call to defeat cache. EXAMPLE
// existing service: // assuming that we have a callback function called test as shown below zim.async("http://ip-api.com/json?callback=zim.async.test",test); function test(data) {zog(data.country);} // note that the callback we pass the service is zim.async.test not just test // this allows zim to handle scope issues and garbage collect the dynamic script when done // if the service passes JSON you may need to JSON.decode() the data being returned // this service passes an object literal not JSON despite its file name
EXAMPLE
// CLIENT - your own server script: // assuming we have a callback function called myFunction as shown below zim.async("http://yourserver.com/script.php?id=72&name=dan", myFunction); function myFunction(data){zog(data);} // SERVER - your script must output the following format as a string: // "zim.async.myFunction(somedata)" // in the php file we would use: echo "zim.async.myFunction('success')"; // to return an object literal with nodejs express for example, you would use: res.send('zim.async.myFunction({list:[1,2,3], name:"whatever"})'); // the data parameter in the myFunction function defined earlier would be an object literal // we could then do zog(data.list[0]) to log the value 1, etc.
PARAMETERS url - url to the server script (ie. php or node page) callback - (default null) callback function that you define in your code (cannot be an anonymous function) calling the return function on zim.async does two things: 1. it handles scope issues so we can find your callback function 2. it handles garbage collection to remove the dynamic script tag that was used if you do not specify a callback function then just send "" back from your server script NOTE we have experienced duplicate script calls if nothing is sent back RETURNS undefined CLOSE ▲VIEW ▤BITS
ZIM CREATE
EXPAND 02150 zim.ANIMATE
zim.ANIMATE
ANIMATE zim constant DESCRIPTION Set to false to stop zim.move() and zim.animate() calls from working. Handy for testing your app so you do not have to wait for animations every time! To animate things in you can place everything in their final positions and then set the "from" parameter to true to animate from starting positions like x or y offstage, scale or alpha of 0, etc. Then to avoid waiting for animations to complete, you can just set zim.ANIMATE = false and all your objects will be in their final locations and you don't wait for animations When you are ready to run your animations for a final version, etc. just delete the line or set zim.ANIMATE to true. EXAMPLE
zim.ANIMATE = false; // without the line above, the circles will animate in // we would have to wait for them everytime we load the app // sometimes animations are even longer and this can waste development time // when we add the line above, the circles are on stage right away // this is easier and safer than commenting out all your animations var circle1 = new zim.Circle(200, frame.green); circle1.center(stage); circle1.x -= 110; circle1.animate({obj:{alpha:0, scale:0}, time:700, from:true}); var circle2 = new zim.Circle(200, frame.pink); circle2.center(stage); circle2.x += 110; circle2.animate({obj:{alpha:0, scale:0}, time:700, wait:700, from:true});
CLOSE ▲VIEW ▤
EXPAND 02189 zim.Ticker = {}
zim.Ticker = {}
Ticker zim static class DESCRIPTION A static class to let ZIM use one animation function with a requestAnimationFrame If a function has been added to the Ticker queue then it will run in the order added along with a single stage update after all functions in queue have run. There are settings that can adjust when the Ticker updates so see Usage notes below. EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); zim.Ticker.add(function(){    circle.x++; }, stage); // to be able to remove the function: zim.Ticker.add(tryMe, stage); function tryMe() {circle.x++;} zim.Ticker.remove(tryMe); // OR with function literal, use the return value var tickerFunction = zim.Ticker.add(function(){circle.x++;}, stage); zim.Ticker.remove(tickerFunction);
USAGE if zim.OPTIMIZE is true then the Ticker will not update the stage (it will still run functions) however, OPTIMIZE can be overridden as follows (or with the always() method): METHODS (static) zim.Ticker.always(stage) - overrides zim.OPTIMIZE and always runs an update for the stage even with no function in queue zim.Ticker.alwaysOff(stage) - stops an always Ticker for a stage zim.Ticker.add(function, stage) - adds the function to the Ticker queue for a given stage and returns the function that was added zim.Ticker.remove(function) - removes the function from the Ticker queue zim.Ticker.removeAll([stage]) - removes all functions from the Ticker queue (optionally per stage) zim.Ticker.setFPS(30, 60) - (mobile, pc) default is set at natural requestAnimationFrame speed - this seems to be the smoothest zim.Ticker.setTimingMode(mode) - (default "raf") RAF uses RequestAnimationFrame without framerate synching - gets screen synch (smooth) and background throttling    set to "synched" for framerate synching - but will add some variance between updates    set to "timeout" for setTimeout synching to framerate - no screen synch or background throttling (if RAF is not supported falls back to this mode)    see CreateJS docs: http://www.createjs.com/docs/tweenjs/classes/Ticker.html zim.Ticker.dispose([stage]) - removes all functions from the queue removes and removes the list (optionally per stage) PROPERTIES (static) zim.Ticker.update = true - overrides zim.OPTIMIZE and forces an update if a function is in the queue zim.Ticker.update = false - forces no update regardless of zim.OPTIMIZE zim.Ticker.update = null (default) - only updates if there is a function in queue and zim.OPTIMIZE is false zim.Ticker.list - a ZIM Dictionary holding arrays with the functions in the Ticker queue for each stage zim.Ticker.list.objects - the array of stages in the Ticker zim.Ticker.list.values - the array holding an array of functions for each stage in the Ticker the Ticker is used internally by zim functions like move(), animate(), drag(), Scroller(), Parallax() you are welcome to add functions - make sure to pass the stage in as a second parameter to the add() method USAGE 1. if you have your own ticker going, just set zim.OPTIMIZE = true and don't worry about a thing 2. if you do not have your own ticker going but still want OPTIMIZE true to avoid components updating automatically, then set zim.OPTIMIZE = true and set zim.Ticker.update = true this will run a single update only when needed in zim Ticker for any zim functions 3. if you want a ticker with a single update going all the time (with OPTIMIZE true or false) then run zim.Ticker.always(stage); 4. if for some reason (can't think of any) you want no ticker updates for zim but want component updates then set zim.OPTIMIZE = false and then set zim.Ticker.update = false CLOSE ▲VIEW ▤BITS
EXPAND 02391 zim.drag = function(obj, rect, overCursor, dragCursor, currentTarget, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds)
zim.drag = function(obj, rect, overCursor, dragCursor, currentTarget, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds)
drag zim function - and Display object method under ZIM 4TH DESCRIPTION Adds drag and drop to an object with a variety of options. Handles scaled, rotated nested objects. EXAMPLE
var radius = 50; var circle = new zim.Circle(radius, "red"); circle.center(stage); circle.drag(); // OR with chaining var circle = new zim.Circle(radius, "red").center(stage).drag(); // OR with ZIM DUO circle.drag({slide:true}); // OR with pre ZIM 4TH methods zim.center(circle, stage); zim.drag(circle); // OR with ZIM DUO zim.drag({obj:circle, slide:true}); // BOUNDS // circle has its registration point in the middle // keep registration point within rectangle starting at x=100, y=100 // and drag within a width of 500 and height of 400 // var dragBounds = new createjs.Rectangle(100,100,500,400); // or keep circle on the stage with the following var dragBounds = new createjs.Rectangle(radius,radius,stageW-radius,stageH-radius); circle.drag(dragBounds); // drag within stage
PARAMETERS supports DUO - parameters or single object with properties below obj - the object to drag rect - (default null) a createjs.Rectangle object for the bounds of dragging    if surround is true then it will make sure the obj surrounds the rect rather than stays within it    this rectangle is relative to the stage (global)    if a rectangle relative to the object's parent is desired then set the localBounds parameter to true overCursor, dragCursor - (default "pointer") the CSS cursor properties as strings currentTarget - (default false) allowing you to drag things within a container    eg. drag(container); will drag any object within a container    setting currentTarget to true will then drag the whole container swipe - (default false) which prevents a swipe from triggering when dragging localBounds - (default false) which means the rect is global - set to true for a rect in the object parent frame onTop - (default true) brings the dragged object to the top of the container surround - (default false) is for dragging a big object that always surrounds the rect slide - (default false) will let you throw the object and dispatch a slidestop event when done slideDamp - (default .3) is the damping setting for the slide (1 is no damping and .1 will slide more, etc.) slideSnap - (default true) lets the object go outside and snap back to bounds - also "vertical", "horizontal", and false reg - (default false) when set to true will snap the registration of the object to the mouse position removeTweens - (default true) will automatically remove tweens from dragged object unless set to false startBounds - (default true) set to false to ignore bound rect before dragging (sometimes handy when putting drag on container) note: will not update stage if zim.OPTIMIZE is set to true unless zim.Ticker.update is set to true or you run zim.Ticker.always(stage) see zim.Ticker RETURNS obj for chaining CLOSE ▲VIEW ▤BITS
EXPAND 02787 zim.noDrag = function(obj)
zim.noDrag = function(obj)
noDrag zim function - and Display object method under ZIM 4TH DESCRIPTION Removes drag function from an object. This is not a stopDrag function (as in the drop of a drag and drop). Dropping happens automatically with the drag() function. The noDrag function turns off the drag function so it is no longer draggable. EXAMPLE
circle.noDrag(); // OR with pre ZIM 4TH function zim.noDrag(circle);
PARAMETERS obj - the object to make not draggable RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 02826 zim.dragRect = function(obj, rect)
zim.dragRect = function(obj, rect)
dragRect zim function - and Display object method under ZIM 4TH DESCRIPTION Dynamically changes or adds a bounds rectangle to the object being dragged with zim.drag(). EXAMPLE
var dragBounds = new createjs.Rectangle(100,100,500,400); circle.dragRect(dragBounds); OR pre ZIM 4TH zim.dragRect(circle, dragBounds);
PARAMETERS obj - an object that currently has its zim.drag() set rect - is a createjs.Rectangle for the bounds - the local / global does not change from the original drag RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 02859 zim.setSwipe = function(obj, swipe)
zim.setSwipe = function(obj, swipe)
setSwipe zim function - and Display object method under ZIM 4TH DESCRIPTION Sets whether we want to swipe an object or not using ZIM Swipe. Recursively sets children to same setting. EXAMPLE
zim.swipe(circle, false); OR with pre ZIM 4TH function circle.swipe(false);
PARAMETERS obj - a display object swipe - (default true) set to false to not swipe object RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 02901 zim.hitTestPoint = function(obj, x, y)
zim.hitTestPoint = function(obj, x, y)
hitTestPoint zim function - and Display object method under ZIM 4TH DESCRIPTION See if shape of obj is hitting the global point x and y on the stage. EXAMPLE
var circle = new zim.Circle(); stage.addChild(circle); circle.drag(); circle.on("pressmove", function() {    if (circle.hitTestPoint(stageW/2, stageH/2)) {       if (circle.alpha == 1) {          circle.alpha = .5;          stage.update();       }    } else {       if (circle.alpha == .5) {          circle.alpha = 1;          stage.update();       }    } }); OR with pre ZIM 4TH functions zim.drag(circle); // etc. if (zim.hitTestPoint(circle, stageW/2, stageH/2)) {} // etc.
PARAMETERS obj - the obj whose shape we are testing x and y - the point we are testing to see if it hits the shape RETURNS a Boolean true if hitting, false if not CLOSE ▲VIEW ▤
EXPAND 02952 zim.hitTestReg = function(a, b)
zim.hitTestReg = function(a, b)
hitTestReg zim function - and Display object method under ZIM 4TH DESCRIPTION See if shape (a) is hitting the registration point of object (b). EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); circle.drag(); var rect = new zim.Rectangle(100, 100, "blue"); stage.addChild(rect); circle.on("pressmove", function() {    if (circle.hitTestReg(rect)) {       stage.removeChild(rect);       stage.update();    } }) OR with pre ZIM 4TH function zim.center(circle, stage); zim.drag(circle); etc. if (zim.hitTestReg(circle, rect)) {} // etc.
PARAMETERS a - the object whose shape we are testing b - the object whose registration point we are checking against RETURNS a Boolean true if hitting, false if not CLOSE ▲VIEW ▤BITS
EXPAND 02999 zim.hitTestRect = function(a, b, num)
zim.hitTestRect = function(a, b, num)
hitTestRect zim function - and Display object method under ZIM 4TH DESCRIPTION See if a shape (a) is hitting points on a rectangle. The rectangle is based on the position, registration and bounds of object (b). num is how many points on the edge of the rectangle we test - default is 0. The four corners are always tested as well as the very middle of the rectangle. EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); circle.drag(); var rect = new zim.Rectangle(100, 100, "blue"); stage.addChild(rect); circle.on("pressmove", function() {    if (circle.hitTestRect(rect)) {       stage.removeChild(rect);       stage.update();    } }); OR with pre ZIM 4TH function zim.center(circle, stage); zim.drag(circle); etc. if (zim.hitTestRect(circle, rect)) {} // etc.
PARAMETERS a - the object whose shape we are testing b - the object whose bounding rectangle we are checking against num - (default 0) the number of points along each edge to checking    1 would put a point at the middle of each edge    2 would put two points at 1/3 and 2/3 along the edge, etc.    there are always points at the corners    and one point in the middle of the rectangle RETURNS a Boolean true if hitting, false if not CLOSE ▲VIEW ▤BITS
EXPAND 03080 zim.hitTestCircle = function(a, b, num)
zim.hitTestCircle = function(a, b, num)
hitTestCircle zim function - and Display object method under ZIM 4TH DESCRIPTION See if a shape (a) is hitting points on a circle. The circle is based on the position, registration and bounds of object (b). num is how many points around the circle we test - default is 8 Also checks center of circle hitting. EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); circle.drag(); var triangle = new zim.Triangle(100, 100, 100, "blue"); stage.addChild(triangle); circle.on("pressmove", function() {    if (triangle.hitTestCircle(circle)) {       stage.removeChild(triangle);       stage.update();    } }); OR with pre ZIM 4TH function zim.center(circle, stage); zim.drag(circle); etc. if (zim.hitTestCircle(triangle, circle)) {} // etc.
PARAMETERS a - the object whose shape we are testing b - the object whose circle based on the bounding rect we are using num - (default 8) the number of points evenly distributed around the circle    and one point in the middle of the circle RETURNS a Boolean true if hitting, false if not CLOSE ▲VIEW ▤BITS
EXPAND 03148 zim.hitTestBounds = function(a, b, boundsShape)
zim.hitTestBounds = function(a, b, boundsShape)
hitTestBounds zim function - and Display object method under ZIM 4TH DESCRIPTION See if a.getBounds() is hitting b.getBounds(). Pass in a boundsShape shape if you want a demonstration of where the bounds are. EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); circle.drag(); var rect = new zim.Rectangle(100, 100, "blue"); stage.addChild(rect); circle.on("pressmove", function() {    if (circle.hitTestBounds(rect)) {       stage.removeChild(rect);       stage.update();    } }); OR with pre ZIM 4TH function zim.center(circle, stage); zim.drag(circle); etc. if (zim.hitTestBounds(circle, rect)) {} // etc.
PARAMETERS a - an object whose rectanglular bounds we are testing b - another object whose rectanglular bounds we are testing boundsShape - (default null) an empty zim.Shape or createjs.Shape    you would need to add the boundsShape to the stage RETURNS a Boolean true if hitting, false if not CLOSE ▲VIEW ▤BITS
EXPAND 03224 zim.boundsToGlobal = function(obj, rect, flip)
zim.boundsToGlobal = function(obj, rect, flip)
boundsToGlobal zim function - and Display object method under ZIM 4TH DESCRIPTION Returns a createjs Rectangle of the bounds of object projected onto the stage. Handles scaling and rotation. If a createjs rectangle is passed in then it converts this rectangle from within the frame of the obj to a global rectangle. If flip (default false) is set to true it goes from global to local rect. Used by drag() and hitTestBounds() above - probably you will not use this directly. EXAMPLE
zog(circle.boundsToGlobal().x); // global x of circle OR with pre ZIM 4TH function zog(zim.boundsToGlobal(circle).width); // global width of circle)
PARAMETERS obj - an object for which you would like global bounds projected rect - a rect inside an object which you would like mapped to global flip - (default false) make a global rect ported to local values RETURNS a Boolean true if hitting, false if not CLOSE ▲VIEW ▤
EXPAND 03289 zim.hitTestGrid = function(obj, width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
zim.hitTestGrid = function(obj, width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
hitTestGrid zim function - and Display object method under ZIM 4TH DESCRIPTION Converts an x and y point to an index in a grid. If you have a grid of rectangles, for instance, use this to find out which rectangle is beneath the cursor. This technique will work faster than any of the other hit tests. EXAMPLE
zim.Ticker.add(function() {    var index = stage.hitTestGrid(200, 200, 10, 10, stage.mouseX, stage.mouseY);    if (index) zog(index); }); OR with pre ZIM 4TH function var index = zim.hitTestGrid(stage, 200, 200, 10, 10, stage.mouseX, stage.mouseY);
offsetX, offsetY, spacingX, spacingY, local, type PARAMETERS obj - the object that contains the grid width and height - the overall dimensions cols and rows - how many of each (note it is cols and then rows) x and y - where you are in the grid (eg. stage.mouseX and stage.mouseY) offsetX and offsetY - (default 0) the distances the grid starts from the origin of the obj spacingX and spacingY - (default 0) spacing between grid cells (null will be returned if x and y within spacing)    spacing is only between the cells and is to be included in the width and height (but not outside the grid) local - (default false) set to true to convert x and y to local values type - (default index) which means the hitTestGrid returns the index of the cell beneath the x and y point    starting with 0 at top left corner and counting columns along the row and then to the next row, etc.    set type to "col" to return the column and "row" to return the row    set to "array" to return all three in an Array [index, col, row] RETURNS an index Number (or undefined) | col | row | an Array of [index, col, row] CLOSE ▲VIEW ▤BITS
EXPAND 03359 zim.move = function(target, x, y, time, ease, call, params, wait, loop, loopCount, loopWait, loopCall, loopParams, rewind, rewindWait, rewindCall, rewindParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, protect, override, from, set, id)
zim.move = function(target, x, y, time, ease, call, params, wait, loop, loopCount, loopWait, loopCall, loopParams, rewind, rewindWait, rewindCall, rewindParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, protect, override, from, set, id)
move zim function - and Display object method under ZIM 4TH wraps createjs.Tween DESCRIPTION Moves a target object to position x, y in time milliseconds. You can set various types of easing like bounce, elastic, back, linear, sine, etc. Handles callbacks, delays, loops, rewinds, sequences of move animations. Also see the more general zim.animate() (which this function calls after consolidating x an y into an object). NOTE to temporarily prevent animations from starting set zim.ANIMATE to false NOTE see zim.pauseZimAnimate(state, ids) and zim.stopZimAnimate(ids) for controlling tweens when running EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); circle.move(100, 100, 700, "backOut"); OR with pre ZIM 4TH function zim.center(circle, stage); zim.move(circle, 100, 100, 700, "backOut"); // see ZIM Bits for more move examples
PARAMETERS - supports DUO - parameters or single object with properties below target - the target object to tween x and y - the absolute positions to tween to time - the time for the tween in milliseconds 1000 ms = 1 second ease - (default "quadInOut") see CreateJS easing ("bounceOut", "elasticIn", "backInOut", "linearInOut", etc) call - (default null) the function to call when the animation is done params - (default target) a single parameter for the call function (eg. use object literal or array) wait - (default 0) milliseconds to wait before doing animation loop - (default false) set to true to loop animation loopCount - (default 0) if loop is true how many times it will loop (0 is forever) loopWait - (default 0) milliseconds to wait before looping (post animation wait) loopCall - (default null) calls function after loop is done (not including last loop) loopParams - (default target) parameters to send loop function rewind - (default false) set to true to rewind (reverse) animation (doubles animation time) rewindWait (default 0) milliseconds to wait in the middle of the rewind rewindCall (default null) calls function at middle of rewind animation rewindParams - (default target) parameters to send rewind function sequence - (default 0) the delay time in milliseconds to run on children of a container or an array of target animations    for example, target = container or target = [a,b,c] and sequence = 1000    would run the animation on the first child and then 1 second later, run the animation on the second child, etc.    or in the case of the array, on element a and then 1 second later, element b, etc.    If the loop prop is true then sequenceCall below would activate for each loop    For an array, you must use the zim function with a target parameter - otherwise you can use the ZIM 4TH method sequenceCall - (default null) the function that will be called when the sequence ends sequenceParams - (default null) a parameter sent to the sequenceCall function sequenceReverse - (default false) set to true to sequence through container or array backwards props - (default {override: true}) legacy - allows you to pass in TweenJS props protect - (default false) protects animation from being interrupted before finishing    unless manually interrupted with stopZimMove()    protect is always true (regardless of parameter setting) if loop or rewind parameters are set override - (default true) subesequent tweens of any type on object cancel all earlier tweens on object    set to false to allow multiple tweens of same object from - (default false) set to true to animate from obj properties to the current properties set on target set - (default null) an object of properties to set on the target to start (but after the wait time) id - (default randomly created) set to String for id to pause or stop Tween NOTE earlier versions of ZIM used props for loop and rewind - now these are direct parameters NOTE call is now triggered once after all loops and rewinds are done RETURNS the target for chaining CLOSE ▲VIEW ▤BITS
EXPAND 03438 zim.animate = function(target, obj, time, ease, call, params, wait, loop, loopCount, loopWait, loopCall, loopParams, rewind, rewindWait, rewindCall, rewindParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, css, protect, override, from, set, id)
zim.animate = function(target, obj, time, ease, call, params, wait, loop, loopCount, loopWait, loopCall, loopParams, rewind, rewindWait, rewindCall, rewindParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, css, protect, override, from, set, id)
animate zim function - and Display object method under ZIM 4TH wraps createjs.Tween DESCRIPTION Animate object obj properties in time milliseconds. You can set various types of easing like bounce, elastic, back, linear, sine, etc. Handles callbacks, delays, loops, rewinds, series and sequences of animations. Also see the more specific zim.move() to animate position x, y although you can animate x an y just fine with zim.animate. NOTE to temporarily prevent animations from starting set zim.ANIMATE to false NOTE see zim.pauseZimAnimate(state, ids) and zim.stopZimAnimate(ids) for controlling tweens when running EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); circle.alpha = 0; circle.scale(0); circle.animate({alpha:1, scale:1}, 700, null, done); function done(target) {    // target is circle if params is not set    target.drag(); } // or with ZIM DUO and from parameter: var circle = new zim.Circle(50, "red"); circle.center(stage); circle.animate({obj:{alpha:0, scale:0}, time:700, from:true}); // note: there was no need to set alpha and scale to 0 before the animation // because from will animate from property values in obj {alpha:0, scale:0} // to the present set values - which are 1 and 1 for the default scale and alpha. // This allows you to place everything how you want it to end up // and then easily animate to this state. // An extra advantage of this is that you can use the zim.ANIMATE constant to skip animations while building // See the http://zimjs.com/code/ornamate.html example // pulse circle var circle = new zim.Circle(50, "red"); circle.center(stage); // pulse circle from scale 0 - 1 every second (use ZIM DUO) circle.animate({obj:{scale:0}, time:500, loop:true, rewind:true, from:true}); // see ZIM Bits for more move examples OR with pre ZIM 4TH function and without from var circle = new zim.Circle(50, "red"); zim.center(circle, stage); circle.alpha = 0; zim.scale(circle, 0); zim.animate(circle, {alpha:1, scale:1}, 700, null, done); function done(target) {    // target is circle if params is not set    zim.drag(target); }
EXAMPLE
// Series example animating a circle in square formation // Also showing that the series can include multiple targets // Click on the stage to pause or unpause the animation var rect = new zim.Rectangle({color:frame.pink})    .centerReg(stage)    .scale(0); // hiding it to start var circle = new zim.Circle({color:frame.purple}) // chaining the rest    .addTo(stage)    .pos(400,300)    .animate({ // circle will be the default object for the inner animations       obj:[          // an array of animate configuration objects          {obj:{x:600, y:300, scale:2}},          {obj:{x:600, y:500, scale:1}, call:function(){zog("part way");}},          {obj:{x:400, y:500}, time:500, ease:"quadInOut"},          {target:rect, obj:{scale:3}, time:1000, rewind:true, ease:"quadInOut"},          {obj:{x:400, y:300}}       ],       time:1000, // will be the default time for the inner animations       ease:"backOut", // will be the default ease for the inner animations       id:"square", // will override any id set in the inner animations       loop:true,       loopCount:3,       // note - no rewind or from parameters       call:function(){zog("done");}    });    var paused = false;    stage.on("stagemousedown", function() {          paused = !paused;          zim.pauseZimAnimate(paused, "square");    });
EXAMPLE
// sequence example to pulse two circles var circle1 = new zim.Circle(50, "red"); var circle2 = new zim.Circle(50, "blue"); zim.center(circle1, stage); zim.center(circle2, stage); circle2.x += 70; zim.animate({    target:[circle1, circle2],    obj:{scale:1},    time:500,    loop:true,    rewind:true,    from:true,    sequence:500 });
PARAMETERS - supports DUO - parameters or single object with properties below target - the target object to tween obj - the object literal holding properties and values to animate (includes a scale - convenience property for scaleX and scaleY)    if you pass in an array, then this will run an animation series    The array must hold animate configuration objects:    [{obj:{scale:2}, time:1000, rewind:true}, {target:different, obj:{x:100}}, etc.]    If you run animate as a method on an object then this is the default object for the series    but you can specify a target to override the default    The default time and tween are as provided in the main parameters    but you can specify these to override the default    The id of the main parameters is used for the whole series and cannot be overridden    The override parameter is set to false and cannot be overridden    All other main parameters are available except rewind, sequence and from    (rewind and from are available on the inner tweens - for sequence: the initial animation is considered)    You currently cannot nest animimation series    Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)    then this will be the last of the series to run time - the time for the tween in milliseconds 1000 ms = 1 second ease - (default "quadInOut") see CreateJS easing ("bounceOut", "elasticIn", "backInOut", "linearInOut", etc) call - (default null) the function to call when the animation is done params - (default target) a single parameter for the call function (eg. use object literal or array) wait - (default 0) milliseconds to wait before doing animation loop - (default false) set to true to loop animation loopCount - (default 0) if loop is true how many times it will loop (0 is forever) loopWait - (default 0) milliseconds to wait before looping (post animation wait) loopCall - (default null) calls function after loop is done (not including last loop) loopParams - (default target) parameters to send loop function rewind - (default false) set to true to rewind (reverse) animation (doubles animation time) rewindWait (default 0) milliseconds to wait in the middle of the rewind rewindCall (default null) calls function at middle of rewind animation rewindParams - (default target) parameters to send rewind function sequence - (default 0) the delay time in milliseconds to run on children of a container or an array of target animations    for example, target = container or target = [a,b,c] and sequence = 1000    would run the animation on the first child and then 1 second later, run the animation on the second child, etc.    or in the case of the array, on element a and then 1 second later, element b, etc.    If the loop prop is true then sequenceCall below would activate for each loop    For an array, you must use the zim function with a target parameter - otherwise you can use the ZIM 4TH method sequenceCall - (default null) the function that will be called when the sequence ends sequenceParams - (default null) a parameter sent to the sequenceCall function sequenceReverse - (default false) set to true to sequence through container or array backwards ticker - (default true) set to false to not use an automatic zim.Ticker function props - (default {override: true}) legacy - allows you to pass in TweenJS props css - (default false) set to true to animate CSS properties in HTML    requires CreateJS CSSPlugin - ZIM has a copy here:    <script src="https://d309knd7es5f10.cloudfront.net/CSSPlugin.js"></script>    <script>       // in your code at top after loading createjs       createjs.CSSPlugin.install(createjs.Tween);       // the property must be set before you can animate       zss("tagID").opacity = 1; // set this even if it is default       zim.animate(zid("tagID"), {opacity:0}, 2000); // etc.    </script> protect - (default false) protects animation from being interrupted before finishing    unless manually interrupted with stopZimAnimate()    protect is always true (regardless of parameter setting) if loop or rewind parameters are set override - (default true) subesequent tweens of any type on object cancel all earlier tweens on object    set to false to allow multiple tweens of same object from - (default false) set to true to animate from obj properties to the current properties set on target set - (default null) an object of properties to set on the target to start (but after the wait time) id - (default null) set to String to use with zimPauseTween(state, id) and zimStopTween(id) NOTE earlier versions of ZIM used props for loop and rewind - now these are direct parameters NOTE call is now triggered once after all loops and rewinds are done RETURNS the target for chaining (or null if no target is provided and run on zim with series) CLOSE ▲VIEW ▤BITS
EXPAND 04229 zim.stopZimAnimate = function(ids)
zim.stopZimAnimate = function(ids)
stopZimAnimate zim function - and Display object function DESCRIPTION Stops tweens with the passed in id or array of ids. If no id is passed then this will stop all tweens. The id is set as a zim.animate, zim.move, zim.Sprite parameter An animation series will have the same id for all the animations inside. See also zim.pauseZimAnimate NOTE calling zim.stopZimAnimate(id) stops tweens with this id on all objects calling object.stopZimAnimate(id) stops tweens with this id on the target object EXAMPLE
// We have split the tween in two so we can control them individually // Set an id parameter to stop or pause // You can control multiple tweens at once by using the same id (the id is for a tween set) // Note the override:true parameter var rect = new zim.Rectangle(200, 200, frame.pink)    .centerReg(stage)    .animate({obj:{scale:2}, time:2000, loop:true, rewind:true, id:"scale"})    .animate({obj:{rotation:360}, time:4000, loop:true, ease:"linear", override:false}); rect.cursor = "pointer"; rect.on("click", function() {rect.stopZimAnimate()}); // will stop all tweens on rect // OR rect.on("click", function() {rect.stopZimAnimate("scale");}); // will stop scaling tween zim.stopZimAnimate("scale") // will stop tweens with the scale id on all objects zim.stopZimAnimate(); // will stop all animations
PARAMETERS ids - (default null) pass in an id or an array of ids specified in zim.animate, zim.move and zim.Sprite RETURNS null if run as zim.stopZimAnimate() or the obj if run as obj.stopZimAnimate() CLOSE ▲VIEW ▤
EXPAND 04291 zim.pauseZimAnimate = function(state, ids)
zim.pauseZimAnimate = function(state, ids)
pauseZimAnimate zim function - and Display object function DESCRIPTION Pauses or unpauses tweens with the passed in id or array of ids. If no id is passed then this will pause or unpause all tweens. The id is set as a zim.animate, zim.move, zim.Sprite parameter. An animation series will have the same id for all the animations inside. See also zim.stopZimAnimate NOTE calling zim.pauseZimAnimate(true, id) pauses tweens with this id on all objects calling object.pauseZimAnimate(true, id) pauses tweens with this id on the target object EXAMPLE
// We have split the tween in two so we can control them individually // Set an id parameter to stop or pause // You can control multiple tweens at once by using the same id (the id is for a tween set) // note the override:true parameter var rect = new zim.Rectangle(200, 200, frame.pink)    .centerReg(stage)    .animate({obj:{scale:2}, time:2000, loop:true, rewind:true, id:"scale"})    .animate({obj:{rotation:360}, time:4000, loop:true, ease:"linear", override:false}); rect.cursor = "pointer"; rect.on("click", function() {rect.pauseZimAnimate()}); // will pause all tweens on rect // OR var paused = false; rect.on("click", function() {    paused = !paused;    rect.pauseZimAnimate(paused, "scale"); }); // will toggle the pausing of the scaling tween zim.pauseZimAnimate(false, "scale") // will unpause tweens with the scale id on all objects zim.pauseZimAnimate(); // will pause all animations
PARAMETERS state - (default true) will pause tweens - set to false to unpause tweens ids - (default null) pass in an id or an array of ids specified in zim.animate, zim.move and zim.Sprite RETURNS null if run as zim.pauseZimAnimate() or the obj if run as obj.pauseZimAnimate() CLOSE ▲VIEW ▤
EXPAND 04359 zim.loop = function(obj, call, reverse, step, start, end)
zim.loop = function(obj, call, reverse, step, start, end)
loop zim function - and Display object method under ZIM 4TH NOTE overrides earlier loop function with added container loop so that we can use earlier loop function without createjs DESCRIPTION 1. If you pass in a Number for obj then loop() does function call that many times and passes function call the currentIndex, totalLoops, startIndex, endIndex, obj. By default, the index starts at 0 and counts up to one less than the number. So this is like: for (var i=0; i<obj; i++) {} 2. If you pass in an Array then loop() loops through the array and passes the function call the element in the array, currentIndex, totalLoops, startIndex, endIndex, array. So this is like: for (var i=0; i<obj; i++) {element = array[i]} 3. If you pass in an Object literal then loop() loops through the object and passes the function call the property name, value, currentIndex, totalLoops, startIndex, endIndex, obj. So this is like: for (var i in obj) {property = i; value = obj[i];} 4. If you pass in a container for obj then loop() loops through all the children of the container and does the function for each one passing the child, currentIndex, totalLoops, startIndex, endIndex, obj. So this is like for(i=0; i<obj; i++) {var child = obj.getChildAt(i);} loop or for (var i in container.children) {var child = container.children[i];} NOTE If you pass in true for reverse, the loop is run backwards counting to 0 (by default) NOTE use return to act like a continue in a loop and go to the next loop NOTE return a value to return out of the loop completely like a break (and return a result if desired) EXAMPLE
var container = new zim.Container(); zim.loop(1000, function(i) { // gets passed an index i, total 1000, start 0, end 999, obj 1000    // make 1000 rectangles    container.addChild(new zim.Rectangle()); }); stage.addChild(container); // to continue or break from loop have the function return the string "continue" or "break" zim.loop(10, function(i) {    if (i%2==0) return; // skip even    if (i>6) return "break"; // quit loop when > 6    zog(i); }); var colors = [frame.green, frame.yellow, frame.pink]; zim.loop(colors, function(color, index, total, start, end, array) { // do not have to collect all these    zog(color); // each color }); var person = {name:"Dan Zen", occupation:"Inventor", location:"Dundas"} var result = zim.loop(person, function(prop, val, index, total, start, end, obj) { // do not have to collect all these    zog(prop, val); // each key value pair    if (val == "criminal") return "criminal"; // this would return out of the loop to the containing function }); if (result == "criminal") alert("oh no!"); // loop through children of the container container.loop(function(child, i) { // gets passed the child, index, total, start, end and obj    child.x += i*2;    child.y += i*2; }, true); // true would reverse - so highest in stack to lowest, with i going from numChildren-1 to 0 // with pre ZIM 4TH function and without reverse zim.loop(container, function(child, i) { // gets passed the child, index, total, start, end and obj    child.x += i*2;    child.y += i*2; });
PARAMETERS supports DUO - parameters or single object with properties below obj - a Number of times to loop or an Array or a Container with children to loop through call - the function to call    the function will receive (as its final parameters) the index, total, start, end, obj       where the index is the current index, total is how many times the loop will run       start is the start index, end is the end index and obj is the object passed to the loop    the starting parameters vary depending on the type of obj:    if the obj is a number then the first parameter is the index (no extra starting parameters given)    if the obj is an array then the first parameter is the element at the current index    if the obj is an object literal then the first and second parameters are the property name and property value at the current index    if the obj is a container then the first parameter is the child of the container at the current index reverse - (default false) set to true to run the loop backwards to 0 step - (default 1) each step will increase by this amount (positive whole number - use reverse to go backwards) start - (default 0 or length-1 for reverse) index to start end - (default length-1 or 0 for reverse) index to end RETURNS any value returned from the loop - or undefined if no value is returned from a loop CLOSE ▲VIEW ▤BITS
EXPAND 04532 zim.copyMatrix = function(obj, source)
zim.copyMatrix = function(obj, source)
copyMatrix zim function - and Display object method under ZIM 4TH DESCRIPTION Copies the transformation properties from the source to the obj (x, y, rotation, scale and skew) Might need to still copy the regX and regY (not included in copyMatrix) NOTE used internally by move(), animate() and setMask() for copying transform of shapes to mask also used in addDisplayMembers for clone() method EXAMPLE
circle.copyMatrix(circle2); // circle will now match circle2 in x, y, rotation, scale and skew properties OR with pre ZIM 4TH function zim.copyMatrix(circle, circle2);
PARAMETERS obj - object to receive the new transform values source - object from which the transform properties are being copied RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04574 zim.pos = function(obj, x, y)
zim.pos = function(obj, x, y)
pos zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to position x and y See also the CreateJS set({prop:val, prop2:val}) method; EXAMPLE
circle.pos(100, 100); OR with pre ZIM 4TH function zim.pos(circle, 100, 100);
PARAMETERS obj - object to position x - (default null) the x position y - (default null) the y position RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04606 zim.mov = function(obj, x, y)
zim.mov = function(obj, x, y)
mov zim function - and Display object method under ZIM 4TH DESCRIPTION Move the object over in the x and/or y Equivilant to obj.x += x and obj.y += y Pass in 0 for no shift in x if you just want to shift y Gives chainable relative position NOTE might want to pronounce this "mawv" to differentiate from ZIM move() EXAMPLE
var circle = new zim.Circle().center(stage).mov(50); // move to right 50 OR with pre ZIM 4TH function zim.mov(circle, 50);
PARAMETERS obj - object to shift x - (default 0) the distance in x to move (can be negative) y - (default 0) the distance in y to move (can be negative) RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04642 zim.alp = function(obj, alpha)
zim.alp = function(obj, alpha)
alp zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to set the alpha See also the CreateJS set({prop:val, prop2:val}) method; EXAMPLE
circle.alp(.5); OR with pre ZIM 4TH function zim.alp(circle, .5);
PARAMETERS obj - object to scale alpha - default(null) the alpha between 0 and 1 RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04672 zim.rot = function(obj, rotation)
zim.rot = function(obj, rotation)
rot zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to set the rotation See also the CreateJS set({prop:val, prop2:val}) method; EXAMPLE
rect.rot(180); OR with pre ZIM 4TH function zim.rot(rect, 180);
PARAMETERS obj - object to scale rotation - (default null) the rotation in degrees RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04702 zim.siz = function(obj, width, height, only)
zim.siz = function(obj, width, height, only)
siz zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to set width and height in one call. If you pass in just the width or height parameter, it keeps the aspect ratio. If you want to set only the width or height, then set only to true. If you pass in both the width and height then it sets both. Note: that width and height will adjust the scaleX and scaleY of the object. Also see zim.width, zim.height, zim.widthOnly, zim.heightOnly. EXAMPLE
var rect = new zim.Rectangle(100,200,frame.blue).addTo(stage); rect.siz(200); // sets width to 200 and height to 400 rect.siz(200, null, true); // sets width to 200 and leaves height at 200 rect.siz(200, 100); // sets width to 200 and height to 100 OR with pre ZIM 4TH function zim.siz(rect, 200); // etc.
PARAMETERS obj - object to scale width - (default null) the width of the object    setting only the width will set the widht and keep the aspect ratio    unless the only parameter is set to true height - (default null) the height of the object    setting only the width will set the widht and keep the aspect ratio    unless the only parameter is set to true only - (default false) - defaults to keeping aspect ratio when one dimension set    set to true to scale only a single dimension (like widthOnly and heightOnly properties) RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04754 zim.ske = function(obj, skewX, skewY)
zim.ske = function(obj, skewX, skewY)
ske zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to skewX and skewY (slant) See also the CreateJS set({prop:val, prop2:val}) method; EXAMPLE
circle.ske(20); OR with pre ZIM 4TH function zim.ske(circle, 20);
PARAMETERS obj - object to position skewX - (default null) the x skew skewY - (default null) the y skew RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04786 zim.reg = function(obj, regX, regY)
zim.reg = function(obj, regX, regY)
reg zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to regX and regY (registration point) The registration point is the point the object is positioned with and the object scales and rotates around the registration point See also the CreateJS set({prop:val, prop2:val}) method; See also zim.centerReg() EXAMPLE
circle.reg(200, 200); OR with pre ZIM 4TH function zim.reg(circle, 200, 200);
PARAMETERS obj - object on which to set registration point regX - (default null) the x registration regY - (default null) the y registration RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04821 zim.sca = function(obj, scale, scaleY)
zim.sca = function(obj, scale, scaleY)
sca zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to do scaleX and scaleY in one call. Same as zim.scale() but with consistent three letter shortcut (helps with stacked alignment) If you pass in just the scale parameter, it scales both x and y to this value. If you pass in scale and scaleY then it scales x and y independently. Also see zim.scaleTo(), zim.fit() and zim.Layout(). EXAMPLE
circle.sca(.5); // x and y scale to .5 circle.sca(.5, 2); // x scale to .5 and y scale to 2 OR with pre ZIM 4TH function zim.sca(circle, .5); zim.sca(circle, .5, 2);
PARAMETERS obj - object to scale scale - the scale (1 being full scale, 2 being twice as big, etc.) scaleY - (default null) pass this in to scale x and y independently RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04859 zim.scale = function(obj, scale, scaleY)
zim.scale = function(obj, scale, scaleY)
scale zim function - and Display object method under ZIM 4TH DESCRIPTION Chainable convenience function to do scaleX and scaleY in one call. Same as zim.sca() but came first and full name was not taken. If you pass in just the scale parameter, it scales both x and y to this value. If you pass in scale and scaleY then it scales x and y independently. Also see zim.scaleTo(), zim.fit() and zim.Layout(). EXAMPLE
circle.scale(.5); // x and y scale to .5 circle.scale(.5, 2); // x scale to .5 and y scale to 2 OR with pre ZIM 4TH function zim.scale(circle, .5); zim.scale(circle, .5, 2);
PARAMETERS obj - object to scale scale - the scale (1 being full scale, 2 being twice as big, etc.) scaleY - (default null) pass this in to scale x and y independently RETURNS obj for chaining CLOSE ▲VIEW ▤BITS
EXPAND 04897 zim.scaleTo = function(obj, boundObj, percentX, percentY, type)
zim.scaleTo = function(obj, boundObj, percentX, percentY, type)
scaleTo zim function - and Display object method under ZIM 4TH DESCRIPTION Scales object to a percentage of another object's bounds. Percentage is from 0 - 100 (not 0-1). Also see zim.scale(), zim.fit() and zim.Layout(). EXAMPLE
circle.scaleTo(stage, 50); // scale to half the stageW circle.scaleTo(stage, 10, 20); // fit within these scalings of the stage OR with pre ZIM 4TH function zim.scaleTo(circle, stage, 100, 100, "both"); // make an oval touch all stage edges
PARAMETERS - supports DUO - parameters or single object with properties below obj - object to scale boundObj - the object that we are scaling to with percents below percentX - (default no scaling) the scale in the x percentY - (default no scaling) the scale in the y    if both percentX and percentY are missing then assumes 100, 100 for each type - (default "smallest") to fit inside or outside or stretch to bounds    smallest: uses the smallest scaling keeping proportion (fit)    biggest: uses the largest scaling keeping proportion (outside)    both: keeps both x and y scales - may stretch object (stretch) RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 04963 zim.fit = function(obj, left, top, width, height, inside)
zim.fit = function(obj, left, top, width, height, inside)
fit zim function - and Display object method under ZIM 4TH DESCRIPTION Scale an object to fit inside (or outside) a rectangle and center it. Actually scales and positions the object. Object must have bounds set (setBounds()). EXAMPLE
circle.fit(100, 100, 200, 300); // fits and centers in these dimensions OR with pre ZIM 4TH function zim.fit(circle); // fits circle and centers on stage
PARAMETERS supports DUO - parameters or single object with properties below obj - the object to fit to the rectangle left, top, width, height - (default stage dimensions) the rectangle to fit inside - (default true) fits the object inside the rectangle    if inside is false then it fits the object around the bounds    in both cases the object is centered RETURNS an Object literal with the new and old details (bX is rectangle x, etc.): {x:obj.x, y:obj.y, width:newW, height:newH, scale:scale, bX:left, bY:top, bWidth:width, bHeight:height} CLOSE ▲VIEW ▤BITS
EXPAND 05054 zim.outline = function(obj, color, size)
zim.outline = function(obj, color, size)
outline zim function - and Display object method under ZIM 4TH DESCRIPTION For testing purposes. Draws a rectangle around the bounds of obj (adds rectangle to the objects parent). Draws a cross at the origin of the object (0,0) where content will be placed. Draws a circle at the registration point of the object (where it will be placed in its container). These three things could be in completely different places ;-) NOTE will not subsequently be resized - really just to use while building and then comment it out or delete it EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); // show registration and origin at center and bounding box around outside circle.outline(); OR with pre ZIM 4TH function zim.center(circle, stage); zim.outline(circle);
PARAMETERS supports DUO - parameters or single object with properties below obj - the object to outline (can be transformed - scaled or rotated) color - (default brown) the color of the outline size - (default 2) the stroke size of the outline RETURNS the shape if you want to remove it: obj.parent.removeChild(returnedShape); CLOSE ▲VIEW ▤BITS
EXPAND 05143 zim.addTo = function(obj, container, index)
zim.addTo = function(obj, container, index)
addTo zim function - and Display object method under ZIM 4TH DESCRIPTION A wrapper function for addChild() / addChildAt() to add the obj to the container. This allows us to chain more effectively: var circle = new zim.Circle().addTo(stage).drag(); Also, ZIM has obj.center(container) and obj.centerReg(container) functions where the obj comes first followed by the container. So it is a pain to flip things and use container.addChild(obj) Now, we can use obj.addTo(container) and the object we are adding comes first. The last parameter is the index so similar to an addChildAt() We can also use obj.removeFrom(container) EXAMPLE
var circle = new zim.Circle(50, "red"); circle.addTo(stage); // with chaining - and dragging: var circle = new zim.Circle(50, "red").addTo(stage).drag(); var rect = new zim.Rectangle(100, 100, "blue"); rect.addTo(stage, 0); // place on bottom OR with pre ZIM 4TH function zim.addTo(circle, stage); // etc.
PARAMETERS obj - the object to add container - the container to add to index - (default null) if provided will addChildAt the object at the index (0 being bottom) RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 05193 zim.removeFrom = function(obj, container)
zim.removeFrom = function(obj, container)
removeFrom zim function - and Display object method under ZIM 4TH DESCRIPTION A wrapper function for removeChild() that removes the obj from the container Matches obj.addTo(container) We have obj.removeFrom(container) EXAMPLE
var circle = new zim.Circle(50, "red"); circle.addTo(stage); // later circle.removeFrom(stage); OR with pre ZIM 4TH function zim.removeFrom(circle, stage); // etc.
PARAMETERS obj - the object to remove container - the container to remove the object from RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 05229 zim.centerReg = function(obj, container, add, index)
zim.centerReg = function(obj, container, add, index)
centerReg zim function - and Display object method under ZIM 4TH DESCRIPTION Centers the registration point on the bounds - obj must have bounds set. If a container is provided it adds the object to the container. A convenience function for setting both registration points at once. Also see zim.center() for centering without changing the registration point. EXAMPLE
var rect = new zim.Rectangle(100, 100, "blue"); rect.centerReg(stage); // centers registration, centers and adds to stage rect.animate({obj:{rotation:360}, time:1000, ease:"linear", loop:true}); OR with pre ZIM 4TH function zim.centerReg(rect, stage); zim.animate({target:rect, obj:{rotation:360}, time:1000, ease:"linear", loop:true});
PARAMETERS supports DUO - parameters or single object with properties below obj - the object to set the regX and regY to the center container - (default null) centers the object on and adds to the container add - (default true) set to false to only center the object on the container index - (default null) if provided will addChildAt the object at the index (0 being bottom) RETURNS obj for chaining CLOSE ▲VIEW ▤BITS
EXPAND 05271 zim.center = function(obj, container, add, index)
zim.center = function(obj, container, add, index)
center zim function - and Display object method under ZIM 4TH DESCRIPTION Centers the object on the container. Will default to adding the object to the container. Also see zim.centerReg() for centering registration point at same time. EXAMPLE
var rect = new zim.Rectangle(100, 100, "blue"); rect.center(stage); // centers and adds to stage // the below animation will be around the registration point at the top left corner // this is usually not desired - see zim.centerReg() when rotating and scaling rect.animate({obj:{rotation:360}, time:1000, ease:"linear", loop:true}); OR with pre ZIM 4TH function zim.center(rect, stage); zim.animate({target:rect, obj:{rotation:360}, time:1000, ease:"linear", loop:true});
PARAMETERS supports DUO - parameters or single object with properties below obj - the object to center container - centers the object on and adds to the container add - (default true) set to false to only center and not add the object to the container index - (default null) if provided will addChildAt the object at the index (0 being bottom) RETURNS obj for chaining CLOSE ▲VIEW ▤BITS
EXPAND 05353 zim.place = function(obj, id)
zim.place = function(obj, id)
place zim function - and Display object method under ZIM 4TH DESCRIPTION Sets the object to drag and logs to the console the x and y. This is for when building you can move an object around to position it then when positioned, look at the console for the positioning code. In your code, set the reported x and y and delete the place call. EXAMPLE
circle.place("circle"); // lets you drag circle around - then see console OR with pre ZIM 4TH function zim.place(circle, "circle");
PARAMETERS obj - object to place id - (default null) the name of the object so that the log gives you complete code RETURNS undefined CLOSE ▲VIEW ▤BITS
EXPAND 05388 zim.expand = function(obj, padding, paddingVertical)
zim.expand = function(obj, padding, paddingVertical)
expand zim function - and Display object method under ZIM 4TH DESCRIPTION Adds a createjs hitArea to an object with an extra padding of padding. Good for making mobile interaction better on labels, buttons, etc. EXAMPLE
var circle = new zim.Circle(10, "red"); circle.center(stage); circle.expand(); // makes hit area bigger circle.on("click", function(){zog("yes");}); OR with pre ZIM 4TH function zim.center(circle, stage); zim.expand(circle);
PARAMETERS obj - object on which you wish to expand the hit area padding - (default 20) how many pixels to expand bounds paddingVertical - (default null) the vertical padding (making padding for horizontal) RETURNS obj for chaining CLOSE ▲VIEW ▤BITS
EXPAND 05428 zim.setMask = function(obj, mask)
zim.setMask = function(obj, mask)
setMask zim function - and Display object method under ZIM 4TH DESCRIPTION Specifies a mask for an object - the object can be any display object. The mask can be a ZIM (or CreateJS) Shape or a ZIM Rectangle, Circle or Triangle. Returns the mask which can then be animated using ZIM move() or animate(). This was added because it is nice to use positioned ZIM shapes (which are containers) as masks and yet, ony Shape objects can be used as masks and you often have to transform them properly which can be confusing. NOTE the mask you pass in can still be seen but you can set its alpha to 0 just watch, if you want to interact with the mask it cannot have 0 alpha unless you provide a hit area with zim.expand() for instance (use 0 for padding) NOTE this was just mask() but that conflicted with createjs.mask property so it would work to set the mask but then you could not use it again - so changed name EXAMPLE
var label = new zim.Label("BIG", 200, null, "white"); label.center(stage); var rect = new zim.Rectangle(200,100,"black"); rect.center(stage).alpha = 0; var label = new zim.Label("BIG", 200, null, "white"); label.center(stage).drag().setMask(rect); // not sure we really recommend such dramatic chaining... OR with pre ZIM 4TH function zim.center(label, stage); var rect = new zim.Rectangle(200,100,"black"); zim.center(rect, stage).alpha = 0; zim.setMask(label, rect); zim.drag(label);
NOTE to drag something, the alpha cannot be 0 so we can use zim.expand(rect, 0) to assign a hit area then we can drag even if the alpha is 0 (or set the alpha to .01) EXAMPLE
var label = new zim.Label("BIG", 200, null, "white"); label.center(stage); var rect = new zim.Rectangle(200,100,"black"); rect.expand(0); rect.center(stage).alpha = 0; label.setMask(rect); rect.drag(); OR with pre ZIM 4TH function zim.expand(rect, 0); // adds a hit area to rect so we can drag alpha 0 zim.center(rect, stage).alpha = 0; zim.setMask(label, rect); zim.drag(rect);
NOTE move(), animate() and drag() work specially with zim shapes to make this work otherwise, if you want to reposition your mask then save the return value of the setMask call in a variable and position, scale or rotate the mask object using that variable or use a zim.Shape or createjs.Shape directly to avoid this issue EXAMPLE
var mask = zim.setMask(label, rect); mask.x += 100; // note: rect.x += 100 will not work // because the mask is inside the rect and does not change its x // rect.move(rect.x+100, rect.y, 700); will work
PARAMETERS obj - the object to mask mask - the object whose shape will be the mask NOTE use setMask(obj, null) or obj.setMask(null) to clear the mask RETURNS the mask shape (different than the mask if using ZIM shapes) CLOSE ▲VIEW ▤BITS
ZIM BUILD
EXPAND 05535 zim.OPTIMIZE
zim.OPTIMIZE
OPTIMIZE zim constant DESCRIPTION A setting that relates to how stage.update() is used by the components. Default is false which means some components will update the stage automatically:    the Slider will update the stage so that you can see the knob slide;    the CheckBox and RadioButtons when checked will update the stage;    the Tabs change button colors and then update the stage;    closing of a Pane will update the stage    the Stepper also updates as does changing color of a button, label, etc. However, concurrent stage.update() calls can slow down mobile performance. So if you are making content for mobile you should set zim.OPTIMIZE = true; Then you will have to stage.update() in the change event handlers but you were probably doing things in these events and updating anyway! Just be careful - you might be testing a checkbox and it won't check... So it takes some getting used to running in optimized mode. EXAMPLE
// add this to the top of your script zim.OPTIMIZE = true; var slider = new zim.Slider(); slider.center(stage); // will not see the slider operate (aside from rolling over button) // unless you call stage.update() in the change event slider.on("change", function() {    // do your code    stage.update(); // now will see the slider operate });
components affected by OPTIMIZE: Label, Button, Checkbox, RadioButton, Pane, Stepper, Slider, Tabs OPTIMIZE set to true also affects the ZIM Ticker for functions like move, animate, drag, Scroller, Parallax See zim.Ticker as you may have to set zim.Ticker.update = true; CLOSE ▲VIEW ▤
EXPAND 05579 zim.ACTIONEVENT
zim.ACTIONEVENT
ACTIONEVENT zim constant DESCRIPTION a setting that specifies the event type to trigger many of the components default is "mousedown" which is more responsive on mobile setting the constant to anything else, will cause the components to use "click" for instance, with the default settings, the following components will act on mousedown CheckBox, RadioButtons, Pane, Stepper and Tabs EXAMPLE
// put this at the top of your code zim.ACTIONEVENT = "click"; var checkBox = new zim.CheckBox(); checkBox.center(stage); // note it now operates on mouseup (click) // the default ACTIONEVENT is mousedown
CLOSE ▲VIEW ▤
EXPAND 05605 zim.extend = function(subclass, superclass, override, prefix, prototype)
zim.extend = function(subclass, superclass, override, prefix, prototype)
extend zim function - modified CreateJS extend and promote utility methods DESCRIPTION Place after a sub class to extend a super class. Extending a super class means that the sub class receives all the properties and methods of the super class. ZIM Container() extends a CreateJS Container for instance and then adds more methods and properties but all the CreateJS Container methods and properties are still there too like x, y, addChild(), etc. NOTE CreateJS display objects require their constructor to be called otherwise it is like quantum entanglement (seriously) zim.extend() adds access to the super class constructor so it can be called in the subclass as follows: this.super_constructor(); It also provides access to super class methods that are overridden EXAMPLE
// make a Collection class that will extend a zim.Container // the Collection class will call the zim.Container constructor // and override the the ZIM Container center method in the class body // and override the CreateJS Container addChild method in the prototype // either method would work in either place - it is often a matter of preference // but you might need to use a method in the class body to access local variables // The ZIM extend() method parameter values need to change depending on where you override // see the comments inline for the instructions var Collection = function() {    // for CreateJS the super constructor must be run    this.super_constructor();    // override the zim center() method    // methods in the function call that override must be passed in as an array of strings    // to the override parameter of zim.extend() to be able to access the super_method    this.center = function(where) {       this.super_center(where);       this.y -= 50;    } } // override the super class addChild() that comes from the CreateJS Container // methods on the prototype that override are automatically provided a super_method // unless the prototype parameter of zim.extend() is set to false (default is true) Collection.prototype.addChild = function(c) {    this.super_addChild(c); // call the super class addChild    zog("added a child to Collection"); } // make the Collection extend a zim.Container() // it will receive all the properties and methods of the zim.Container plus its own zim.extend(Collection, zim.Container, "center"); // or pass an array of overridden methods // use the Collection var c = new Collection(); c.addChild(new zim.Rectangle(100, 100, frame.green)); // zogs "added a child to Collection" c.center(stage); // centers the collection but then offsets it 50 pixels up
PARAMETERS supports DUO - parameters or single object with properties below subclass - the class to extend superclass - the class to extend from (an existing class) override - (default null) an Array of methods (as Strings) to override.    if there is only one method being overridden then a single string is fine ("test" or ["test"] is fine)    this list is only needed for methods in the class body    any methods listed here will be given prefix_methodName() access on the sub class (this.prefix_methodName())    where the prefix is below (note, the prototype setting has no bearing on these manual overrides)    methods assigned to the prototype of a class and overridden are automatically found prefix - (default "super") a prefix that will be followed by "_" and then the overridden method name    by default this.super_constructor() would call the super class constructor    if prefix is set to "Person" then this.Person_constructor() would call the super class constructor    the same system is used to call overridden files in override or prototype prototype - (default true) will search the subclass prototype for overriding methods    the overridden methods are then available as this.prefix_methodName()    set to false to avoid searching the super class for methods overridden by the sub class prototype    just quickens the code minutely if there is no need NOTE the superclass constructor is always available as this.prefix_constructor() no matter the override or prototype settings NOTE this.prefix_constructor(); should be called at the top of the subclass to avoid problems when multiple copies of object NOTE to extend a class that already extends a ZIM class then change the prefix to a unique name: EXAMPLE
// if we already had the Collection example above and we want to extend that // then we must use a new prefix when using zim.extend() var Records = function() {    this.Collection_constructor(); } zim.extend(Records, Collection, null, "Collection"); // you will still have this.super_center(), this.super_addChild() if needed // plus any newly overridden methods available as this.Collection_methodName() etc. var r = new Records(); r.addChild(new zim.Circle(20, zim.pink)); r.super_center(stage); // call the original center (without vertical shift) // to extend again, use yet another prefix - for example: "Records" var Jazz = function() {    this.Records_constructor(); } zim.extend(Jazz, Records, null, "Records");
NOTE extend() is included in Distill if Build, Pages or Frame Module classes are used (otherwise NOT included) RETURNS the subclass CLOSE ▲VIEW ▤
EXPAND 05750 zim.addDisplayMembers = function(obj)
zim.addDisplayMembers = function(obj)
addDisplayMembers zim function DESCRIPTION Function to add display methods like drag, hitTests, move, animate, center, etc. to an object. Also adds width, height, widthOnly and heightOnly properties. The term "members" is used because we are adding both methods and properties. All the ZIM 4TH display objects come with these members BUT... the native CreateJS display objects do not. When we import assets from Adobe Animate, these are native CreateJS objects. So we can use addDisplayMembers to add these members to a CreateJS Shape, Container, etc. ZIM uses addDisplayMembers internally to add the members to the ZIM shapes and components (Rectangle, Circle, Triangle, Label, Button, etc.) as applied through the ZIM Container inheritance as well as to the ZIM wrappers for CreateJS Container, Shape, Sprite, MovieClip objects. The display methods call the original ZIM functions passing the extra object parameter as the first parameter or if DUO is being used then adds the object to the configuration object. EXAMPLE
var shape = new createjs.Shape(); shape.graphics.beginFill("red").drawRect(0,0,200,200); shape.setBounds(0,0,200,200); // need to set bounds to center zimify(shape); // add methods like center, drag, etc. // shorter version of zim.addDisplayMembers(shape); shape.center(stage); // ZIM 4TH method format stage.update(); // note: even without using zim.addDisplayMembers() // we can use the traditional zim.center() function var shape = new createjs.Shape(); shape.graphics.beginFill("red").drawRect(0,0,200,200); shape.setBounds(0,0,200,200); // need to set bounds to center zim.center(shape, stage); // use the zim function rather than the method stage.update(); // of course we can just use a zim.Shape // then the methods like center, drag, etc. are already added var shape = new zim.Shape(200, 200); // passing params sets bounds shape.graphics.beginFill("red").drawRect(0,0,200,200); shape.center(stage); stage.update(); // in this case, we may have well used a zim.Rectangle ;-) var shape = new zim.Rectangle(200, 200, "red"); shape.center(stage); stage.update();
PARAMETERS obj - the object to add the methods and properties to (probably a CreateJS display object) RETURNS the object for chaining CLOSE ▲VIEW ▤
EXPAND 06016 zim.Container = function(width||boundsX, height||boundsY, null||width, null||height)
zim.Container = function(width||boundsX, height||boundsY, null||width, null||height)
Container zim class - extends a createjs.Container DESCRIPTION A Container object is used to hold other display objects or other containers. You can then move or scale the container and all objects inside will move or scale. You can apply an event on a container and use the target property of the event object to access the object in the container that caused the event or use the currentTarget property of the event object to access the container itself. Containers do not have bounds unless some items in the container have bounds - at which point the bounds are the combination of the bounds of the objects with bounds. You can manually set the bounds with setBounds(x,y,w,h) - read the CreateJS docs. Or pass in width and height, or boundsX, boundsY, width, height to have zim.Container set bounds Manually set bounds will not update automatically unless you setBounds(null). NOTE All the ZIM shapes and components extend the zim.Container. This means all shapes and components inherit the methods and properties below and indeed, the zim.Container inherits all the createjs.Container methods and properties. See the CreateJS documentation for x, y, alpha, rotation, on(), addChild(), etc. EXAMPLE
var container = new zim.Container(); stage.addChild(container); container.x = 100; container.y = 100; var rect = new zim.Rectangle(100, 100, "blue"); container.addChild(rect); // add rectangle to container var circle = new zim.Circle(40, "red"); circle.center(container) // add the circle to the container and center container.drag(); // will drag either the rectangle or the circle container.drag({currentTarget:true}); // will drag both the rectangle and the circle // below will reduce the alpha of the object in the container that was clicked (target) container.on("click" function(e) {e.target.alpha = .5; stage.update();}) // below will reduce the alpha of all the objects in the container (currentTarget) container.on("click" function(e) {e.currentTarget.alpha = .5; stage.update();})
PARAMETERS width - (default null) the width of the container height - (default width) the height of the container    if there is a width supplied but no height then the height is set to the width    setting these run container.setBounds(boundsX,boundsY,width,height);    you should be able to container.setBounds(null) to go back to auto calculation    but there is currently a bug in CreateJS - it will be fixed    so for now, if you ever want to auto calculate, do not set width and height OR if four parameters are set: boundsX - (default 0) the x of the bounds boundsY - (default 0) the y of the bounds width - (default null) the width of the container height - (default width) the height of the container    if there is a width supplied but no height then the height is set to the width    setting these run container.setBounds(boundsX,boundsY,width,height);    you should be able to container.setBounds(null) to go back to auto calculation    but there is currently a bug in CreateJS - it will be fixed    so for now, if you ever want to auto calculate, do not set width and height **** this class has all the DISPLAY METHODS introduced in ZIM 4TH **** the methods below are available in ZIM Rectangle, Circle, Triangle **** as well as all components like: Label, Button, Slider, Dial, Tab, Pane, etc. **** as well as the ZIM display wrappers: Container, Shape, Sprite, MovieClip and Bitmap **** the addition of methods and display wrappers added 3.4K to the file size METHODS * see the ZIM Create Module functions for full documentation * see the USAGE section that follows this list of methods * most methods accept ZIM DUO (except for 0 or 1 parameter functions like the hitTests) drag(rect, overCursor, dragCursor, currentTarget, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens) noDrag() dragRect(rect) setSwipe(swipe) hitTestPoint(x, y) hitTestReg(b) hitTestRect(b, num) hitTestCircle(b, num) hitTestBounds(b, boundsShape) boundsToGlobal(rect, flip) hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type) move(target, x, y, time, ease, call, params, wait, loop, loopCount, loopWait, loopCall, loopParams, rewind, rewindWait, rewindCall, rewindParams, sequence, sequenceCall, sequenceParams, props, protect, override, from, id) animate(target, obj, time, ease, call, params, wait, loop, loopCount, loopWait, loopCall, loopParams, rewind, rewindWait, rewindCall, rewindParams, sequence, sequenceCall, sequenceParams, props, css, protect, override, from, id) loop(call, reverse, step, start, end) copyMatrix(source) pos(x, y) alp(alpha) rot(rotation) scale(scale) scaleTo(boundObj, percentX, percentY, type) fit(left, top, width, height, inside) outline(color, size) addTo(container, index) removeFrom(container) centerReg(container, add, index) center(container, add, index) place(id) expand(padding, paddingVertical) setMask(mask) USAGE the above list of methods work on all objects that extend zim.Container such as ZIM shapes and components (Label, Button, Slider, Dial, etc.) also other ZIM display objects can use these methods (Shape, Bitmap, MovieClip, Sprite) EXAMPLE
var circle = new zim.Circle(); circle.center(stage); // add circle to stage and center circle.drag(); // alternatively, we can still use the traditional ZIM functions: zim.center(circle, stage); zim.drag(circle); // ZIM DUO works the same way as before - eg. circle.drag({slide:true});
METHODS, CONT'D clone() - clones all the container, its properties and all its children ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES ** bounds must be set first (or width and height parameters set) for these to work ** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 06185 zim.Shape = function(width||boundsX, height||boundsY, null||width, null||height, graphics)
zim.Shape = function(width||boundsX, height||boundsY, null||width, null||height, graphics)
Shape zim class - extends a createjs.Shape DESCRIPTION ZIM Shape lets you draw dynamic shapes beyond the ZIM provided shapes. You make a new shape object and then draw in its graphics property using similar commands to the HTML Canvas commands (and Flash Bitmap drawing). See the CreateJS Easel Shapes and Graphics docs: http://www.createjs.com/docs/easeljs/classes/Graphics.html EXAMPLE
var shape = new zim.Shape(); shape.graphics.fill("red").drawRect(0,0,200,100); // similar to zim.Rectangle(200, 100, "Red"); // we can draw lines, etc. var g = shape.graphics; // shorter reference to graphics object g.stroke("blue").moveTo(200,200).lineTo(300,300); // we can continue to draw as much as we want in the same shape // there is also a tiny API with shortcuts: stroke, fill, etc. g.s("green").f("red").mt(500,500).qt(550,500,600,500);
PARAMETERS width - (default null) the width of the shape height - (default width) the height of the shape    if there is a width supplied but no height then the height is set to the width    setting these run container.setBounds(0,0,width,height);    you should be able to container.setBounds(null) to go back to auto calculation    but there is currently a bug in CreateJS - it will be fixed    so for now, if you ever want to auto calculate, do not set width and height OR if four parameters are set: boundsX - (default 0) the x of the bounds boundsY - (default 0) the y of the bounds width - (default null) the width of the shape height - (default width) the height of the shape    if there is a width supplied but no height then the height is set to the width    setting these run shape.setBounds(boundsX,boundsY,width,height);    you should be able to shape.setBounds(null) to go back to auto calculation    but there is currently a bug in CreateJS - it will be fixed    so for now, if you ever want to auto calculate, do not set width and height graphics - (default null) a CreateJS Graphics instance (see CreateJS docs)    or just use the graphics property of the shape object (like usual) METHODS clone(recursive) - makes a copy of the shape    recursive defaults to true so copy will have own copy of graphics    set recursive to false to have clone share graphic property ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES ** bounds must be set first (or width and height parameters set) for these to work ** setting these adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object ALSO See the CreateJS Easel Docs for Shape properties, such as: graphics, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Shape events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 06293 zim.Bitmap = function(image, id)
zim.Bitmap = function(image, id)
Bitmap zim class - extends a createjs.Bitmap DESCRIPTION Makes a Bitmap object from an image. It is best to use the loadAssets() method of ZIM Frame to preload the image and then use the asset() method to access the Bitmap. See the ZIM Frame class and asset example on the ZIM Frame page of templates. EXAMPLE
var frame = new zim.Frame(); frame.on("ready", function() {    var stage = frame.stage;    frame.loadAssets("logo.jpg");    frame.on("complete", function() {       var logo = frame.asset("logo.jpg"); // logo is a zim.Bitmap       logo.center(stage);       stage.update();    }); });
PARAMETERS image - an HTML image URL (may not load right away - see zim.Frame loadAssets) id - an optional id METHODS clone() - makes a copy with properties such as x, y, etc. also copied ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Bitmap methods, such as: on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. PROPERTIES ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object id - the filename used in the frame.loadAssets()    if you add the path the file name then it will be included with the id    if you add the path with the path parameter, it will not be included with the id ALSO See the CreateJS Easel Docs for Bitmap properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Bitmap events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 06361 zim.Sprite = function(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl)
zim.Sprite = function(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl)
Sprite zim class - extends a createjs.Sprite DESCRIPTION A Sprite plays an animation of a spritesheet which is a set of images layed out in one file. You play the Sprite with the run() method. This animates the Sprite over a given time with various features like playing a labelled animation, playing animation series, SEE: http://zimjs.com/code/spritesheet/index.html AND: http://zimjs.com/code/spritesheet/skateboard.html wait, loop, rewind and call functions. This actually runs a ZIM animation and animates the frames. NOTE A ZIM Sprite handles an evenly tiled spritesheet. For an un-evenly tiled spritesheet use the json parameter which loads a CreateJS SpriteSheet. The json can come from TexturePacker for instance exported for EaselJS/CreateJS CreateJS Easel Sprite and SpriteSheet docs: http://www.createjs.com/docs/easeljs/classes/Sprite.html http://www.createjs.com/docs/easeljs/classes/SpriteSheet.html You can optionally pass in JSON data for a createjs.SpriteSheet as a parameter. When you do so, all other parameters are ignored. NOTE You can use CreateJS gotoAndPlay(), play(), etc. but we found the framerate could not be kept with other animations or Ticker events running. So we recommend using the ZIM Sprite run() method. NOTE The run() method handles single frame and consecutive labels but does not handle non-consective frame labels or nested labels. run() can however play series of labels. EXAMPLE
// inside zim.Frame template // boom.png is a sprite sheet found online // It has 8 columns and 6 rows that we can visually count // We can enter a total parameter if it does not end evenly in the grid // A graphics editor (like Photoshop) could be used to see // if there is an offset or spacing, etc. and enter those as parameters // In this case, we do not need to do any of this - just enter the cols and rows frame.on("complete", function() {    var spriteImage = frame.asset("boom.png");    var animation = new zim.Sprite({       image:spriteImage,       cols:8,       rows:6,       animations:{mid:[10,20], end:[30,40]} // optional animations with labels    });    animation.center(stage);    animation.run(2000); // plays the frames of the Sprite over 2 seconds (master time)    // OR use the label to play the frames listed in animations parameter    animation.run(1000, "mid");    // OR run a series of animations    // by passing an array of label objects to the label parameter    // these each have a time so the master time is ignored    // they can also have any of the run() parameters    // if you provide an array of labels, you cannot rewind the overall animation    animation.run(null, [       {label:"mid", time:1000},       {label:"end", time:500, loop:true, loopCount:5, call:function(){zog("loops done");}},       {startFrame:10, endFrame:20, time:1000}    ]);    // OR can call a function when done    animation.run(1000, "mid", function(){       stage.removeChild(animation);       stage.update();    });    // OR can loop the animation    animation.run({time:2000, loop:true}); // see run() parameters for more });
EXAMPLE
// Here is an example with CreateJS SpriteSheet data // robot.png is a sprite sheet made by ZOE based on a Flash swf // you can also make your own with Photoshop or Texture Packer frame.loadAssets("robot.png"); frame.on("complete", function() {    // using ZOE to export swf animation to spritesheet data    // spritesheet data uses the image name, not the Bitmap itself    var image = frame.asset("robot.png").image;    var spriteData = {       "framerate":24,       "images":[image],       "frames":[[0, 0, 256, 256, 0, -54, -10], many more - etc.],       "animations":{}    };    var animation = new zim.Sprite({json:spriteData});    animation.center(stage);    animation.run(2000); // note, duration alternative to framerate }); OR // load in data from externa JSON frame.loadAssets(["robot.json", "robot.png"]); // ... same as before var animation = new zim.Sprite({json:frame.asset("robot.json")}); // ... same as before
PARAMETERS supports DUO - parameters or single object with properties below image - the ZIM Bitmap for the spritesheet cols - (default 1) - the columns in the spritesheet rows - (default 1) the rows in the spritesheet count - (default cols*rows) how many total frames in the spritesheet offsetX - (default 0) the pixels from the left edge to the frames offsetY - (default 0) the pixels from the top edge to the frames spacingX - (default 0) the horizontal spacing between the frames spacingY - (default 0) the vertical spacing between the frames width - (default image width) the width including offset and spacing for frames height - (default image height) the height including offset and spacing for frames animations - (default null) an object literal of labels holding frames to play    {label:3, another:[4,10]}    run(1000, "label") would play frame 3 for a second    run(1000, "another") would play frames 4 to 10 for a second    You can combine play with the wait parameter:    run(1000, "label").run({time:1000, label:"another", wait:1000}); json - (default null) a JSON string for a CreateJS SpriteSheet    If you pass in a json parameter, all other parameters are ignored id - (default randomly assigned) an id you can use in other animations - available as sprite.id    use this id in other animations for pauseRun and stopRun to act on these as well globalControl - (default true) pauseRun and stopRun will control other animations with same id METHODS run(time, label, call, params, wait, loop, loopCount, loopWait, loopCall, loopParams, rewind, rewindWait, rewindCall, rewindParams, startFrame, endFrame, spriteID)    The run() method animates the Sprite over an amount of time    Would recommend this method over the CreateJS play() and gotoAndPlay()    methods because the framerate for these get overwritten by other stage.update() calls    With run() you get other nice ZIM animate features as well as follows:    Returns the object for chaining    Can be paused with pauseZimAnimate(true) or unpaused with pauseZimAnimate(false)    Can be stopped with stopZimAnimate() on the Sprite    supports DUO - parameters or single object with properties below    time (default 1) - the time in milliseconds to run the animations (the master time)    label (default null) - a label specified in the Sprite animations parameter       if this is an array holding label objects for example:       [{label:"run", time:1000}, {label:"stand", time:2000}]       then the sprite will play the series with the times given and ignore the master time       Note: if any of the series has a loop and loops forever (a loopCount of 0 or no loopCount)       then this will be the last of the series to run    call - (default null) the function to call when the animation is done    params - (default target) a single parameter for the call function (eg. use object literal or array)    wait - (default 0) milliseconds to wait before doing animation    loop - (default false) set to true to loop animation    loopCount - (default 0) if loop is true how many times it will loop (0 is forever)    loopWait - (default 0) milliseconds to wait before looping (post animation wait)    loopCall - (default null) calls function after loop is done (including last loop)    loopParams - (default target) parameters to send loop function    rewind - (default false) set to true to rewind (reverse) animation (doubles animation time)    rewindWait - (default 0) milliseconds to wait in the middle of the rewind    rewindCall - (default null) calls function at middle of rewind animation    rewindParams - (default target) parameters to send rewind function    startFrame - (default null - or 0) the frame to start on - will be overridden by a label with frames    endFrame - (default null - or totalFrames) the frame to end on - will be overridden by a label with frames    id - (default randomly assigned) an id you can use in other animations - available as sprite.id       use this id in other animations for pauseRun and stopRun to act on these as well    globalControl - (default true) pauseRun and stopRun will control other animations with same id pauseRun(state) - pause or unpause the animation (including an animation series)    state - (default true) when true the animation is paused - set to false to unpause stopRun() - stop the sprite from animating clone() - makes a copy with properties such as x, y, etc. also copied ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Sprite methods, such as: play(), gotoAndPlay(), gotoAndStop(), stop(), advance(), on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. PROPERTIES id - an id that you can use in other animations to also be controlled by pauseRun() and stopRun() frame - get and set the current frame of the Sprite totalFrames - get the total frames of the Sprite - read only animations - the animations data with labels of frames to animate running - is the sprite animation being run (includes both paused and unpaused) - read only runPaused - is the sprite animation paused (also returns paused if not running) - read only    note: this only syncs to pauseRun() and stopRun() not pauseZimAnimate() and stopZimAnimate()    note: CreateJS has paused, etc. but use that only if running the CreateJS methods    such as gotoAndPlay(), gotoAndStop(), play(), stop() ** bounds must be set first for these to work ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object ALSO See the CreateJS Easel Docs for Sprite properties, such as: currentFrame, framerate, paused, currentAnimation, currentAnimationFrame, spriteSheet, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Sprite events, such as: animationend, change, added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 06857 zim.MovieClip = function()
zim.MovieClip = function()
MovieClip zim class - extends a createjs.MovieClip DESCRIPTION A MovieClip adds timelines to a Container. The timelines are zim.move() or zim.animate() zimTween properties. The zimTween property returns a CreateJS Tween object. Primarily made to support Adobe Animate MovieClip export. *Consider this experimental for the moment... EXAMPLE
var movieClip = new zim.MovieClip(); var circle = new zim.Circle(20, frame.blue); // circle needs to be on stage for zim.animate() // movieClip will add it to itself anyway stage.addChild(circle); // *not sure why time is messed up movieClip.timeline.addTween(circle.animate({obj:{scale:3}, time:100, rewind:true}).zimTween); movieClip.play(); movieClip.center(stage); stage.on("stagemousedown", function() {    movieClip.paused = !movieClip.paused; });
PARAMETERS supports DUO - parameters or single object with properties below // from the CreateJS MovieClip docs: http://www.createjs.com/docs/easeljs/classes/MovieClip.html mode - (default "independent") or single_frame (based on startPosition) or synched (syncs to parent) startPosition - (default 0) the start position of the MovieClip (*could not get to work) loop - (default true) set to false not to loop labels - (default null) declare label property with position value    eg. {explode:20} to use with gotoAndPlay("explode") rather than gotoAndPlay(20)    *could not get labels to work either METHODS clone() - makes a copy with properties such as x, y, etc. also copied ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for MovieClip methods, such as: play(), gotoAndPlay(), gotoAndStop(), stop(), advance(), on(), off(), getBounds(), setBounds(), dispatchEvent(), etc. PROPERTIES ** bounds must be set first for these to work ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object ALSO See the CreateJS Easel Docs for MovieClip properties, such as: currentFrame, totalFrames, currentLabel, duration, framerate, labels, loop, mode, paused, startPosition, timeline, x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseEnabled, parent, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for MovieClip events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤
EXPAND 06935 zim.Circle = function(radius, color, borderColor, borderWidth, dashed)
zim.Circle = function(radius, color, borderColor, borderWidth, dashed)
Circle zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a circle shape inside a container. The registration and origin will be the center. NOTE mouseChildren is turned to false for all zim Shape containers. EXAMPLE
var circle = new zim.Circle(50, "red"); circle.center(stage); // or with 10 pixel grey stroke var circle = new zim.Circle(50, "red", "#666", 10);
PARAMETERS supports DUO - parameters or single object with properties below radius - (default 50) the radius ;-) color - (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - (default null) the stroke color borderWidth - (default 1 if stroke is set) the size of the stroke in pixels dashed - (default false) set to true for dashed border (if borderWidth or borderColor set) METHODS ** the methods setFill(), setStroke(), setStrokeSize() - have been removed - see properties above clone() - makes a copy of the shape ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES shape - gives access to the circle shape color - get and set the fill color borderColor - get and set the stroke color borderWidth - get and set the stroke size in pixels radius - gets or sets the radius. Setting just sets width and height to twice the radius ** setting widths, heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object mouseChildren - set to false so you do not drag the shape inside the circle    if you nest things inside and want to drag them, will want to set to true ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 07095 zim.Rectangle = function(width, height, color, borderColor, borderWidth, corner, flatBottom, dashed)
zim.Rectangle = function(width, height, color, borderColor, borderWidth, corner, flatBottom, dashed)
Rectangle zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a rectangle shape inside a container. The registration and origin will be top left corner. NOTE mouseChildren is turned to false for all zim Shape containers. EXAMPLE
var rect = new zim.Rectangle(200, 100, "blue"); rect.center(stage); // or with rounded corners: var rect = new zim.Rectangle({width:200, height:100, color:"blue", corner:20}); // or with 2 pixel white stroke var rect = new zim.Rectangle(200, 100, "blue", "white", 2);
PARAMETERS supports DUO - parameters or single object with properties below width, height - (default 100) the width and height ;-) color - (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - (default null) the stroke color borderWidth - (default 1 if stroke is set) the size of the stroke in pixels corner - (default 0) the round of corner flatBottom - (default false) top corners can round and bottom stays flat (used for ZIM Tabs) dashed - (default false) set to true for dashed border (if borderWidth or borderColor set) METHODS ** the methods setFill(), setStroke(), setStrokeSize() - have been removed - see properties above clone() - makes a copy of the shape ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES shape - gives access to the rectangle shape color - get and set the fill color ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object mouseChildren - set to false so you do not drag the shape inside the rectangle if you nest things inside and want to drag them, will want to set to true ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 07257 zim.Triangle = function(a, b, c, color, borderColor, borderWidth, center, adjust, dashed)
zim.Triangle = function(a, b, c, color, borderColor, borderWidth, center, adjust, dashed)
Triangle zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a triangle shape inside a container using three line lengths. Passing one length parameter makes an equilateral triangle. Passing two length parameters makes an isosceles triangle. Passing -1 as the last length parameter makes a 90 degree triangle. NOTE mouseChildren is turned to false for all zim Shape containers. EXAMPLE
var tri = new zim.Triangle(200, null, null, "green"); tri.center(stage); // all three sides specified - tall pointy triangle with yellow stroke of 10 pixels var tri = new zim.Triangle(100, 200, 200, "green", "yellow", 10); // here we adjust so rotation looks better var tri = new zim.Triangle({a:200, color:"green", adjust:30}); tri.center(stage); tri.animate({obj:{rotation:360}, time:3000, ease:"linear", loop:true});
PARAMETERS supports DUO - parameters or single object with properties below a, b and c - (default 100) the lengths of the sides    a will run horizontally along the bottom    b is upwards and c is back to the origin    if c is set to -1 will assume a 90 angle color - (default "black") the fill color as any CSS color including "rgba()" for alpha fill (set a to 0 for tranparent fill) borderColor - (default null) the stroke color borderWidth - (default 1 if stroke is set) the size of the stroke in pixels center - (default true) puts the registration point to the center adjust - (default 0) pixels to bring center towards vertical base    the actual center is not really the weighted center dashed - (default false) set to true for dashed border (if borderWidth or borderColor set) METHODS ** the methods setFill(), setStroke(), setStrokeSize() - have been removed - see properties above clone() - makes a copy of the shape ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES shape - gives access to the triangle shape color - get and set the fill color ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object one, two, three - read only - points with x, y properties for bottom left, bottom right, top right angles - read only - Array of angles [bottom left, bottom right, top right] mouseChildren - set to false so you do not drag the shape inside the triangle if you nest things inside and want to drag them, will want to set to true ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 07469 zim.Label = function(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, fontOptions, backing, outlineColor, outlineWidth)
zim.Label = function(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, fontOptions, backing, outlineColor, outlineWidth)
Label zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a label - wraps the createjs Text object. Can use with Button, CheckBox, RadioButtons and Pane. Text seems to come in different sizes so we do our best. Have tended to find that left and alphabetic are most consistent across browsers. Custom fonts loaded through css can be used as well. NOTE can wrap text at given width using lineWidth parameter. EXAMPLE
var label = new zim.Label("Hello"); label.center(stage); // adds label to and centers on the stage var label = new zim.Label({    text:"CLICK",    size:100,    font:"courier",    color:"white",    rollColor:"red",    fontOptions:"italic bold" }); stage.addChild(label); label.x = label.y = 100; label.on("click", function(){zog("clicking");});
PARAMETERS - supports DUO - parameters or single object with properties below text - String for the the text of the label size - (default 36) the size of the font in pixels font - (default arial) the font or list of fonts for the text color - (default "black") color of font (any CSS color) rollColor - (default color) the rollover color of the font shadowColor - (default -1) for no shadow - set to any css color to see shadowBlur - (default 14) if shadow is present align - ((default "left") text registration point alignment also "center" and "right" valign - (default "top") vertical registration point alignment alse "middle / center", "bottom" lineWidth - (default false) for no wrapping (use \n) Can set to number for wrap lineHeight - (default getMeasuredLineHeight) set to number to adjust line height fontOptions - (default null) css VALUES as a single string for font-style font-variant font-weight    eg. "italic bold small-caps" or just "italic", etc. backing - (default null) a Display object for the backing of the label (eg. Shape, Bitmap, Container, Sprite)    see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc. outlineColor - (default null - or black if outlineWidth set) - the color of the outline of the text outlineWidth - (default null - or (size*.2) if outlineColor set) - the thickness of the outline of the text METHODS showRollColor(boolean) - true to show roll color (used internally) clone() - makes a copy with properties such as x, y, etc. also copied dispose() - to get rid of the button and listeners ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES label - references the text object of the label color - gets or sets the label text color rollColor - gets or sets the label rollover color text - references the text property of the text object ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object backing - access to backing object enabled - default is true - set to false to disable ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 07720 zim.Button = function(width, height, label, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, dashed)
zim.Button = function(width, height, label, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, dashed)
Button zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a button with rollover and many more features - see parameters. You will need to pass in a zim.Label to change the font properties of the button from the default. You will then need to add the button to the stage and add a mousedown or click event. Button rollover is done automatically. You can set a backing display object (Shape, Bitmap, etc.) in place of the standard rectangle. You can set an icon display object in place of the standard text You can set the Button to toggle between text, backings or icons SEE the ZIM Pizzazz series for a growing selection of backings and icons http://zimjs.com/code/bits/view/pizzazz.html http://zimjs.com/code/bits/view/icons.html EXAMPLE
var button = new zim.Button("CLICK"); button.center(stage); button.on("click", function(){zog("clicking");}); // OR add custom label (needed to change label color for instance) var label = new zim.Label({    text:"POWER OPTION",    size:40,    color:"violet",    fontOptions:"bold" }); var button = new zim.Button({    label:label,    width:390,    height:110,    color:"purple",    rollColor:"MediumOrchid",    borderWidth:8,    borderColor:"violet",    gradient:.3,    corner:0 }); button.center(stage);
PARAMETERS supports DUO - parameters or single object with properties below width - (default 200) the width of the button height - (default 60) the height of the button label - (default "CLICK") ZIM Label or plain text with default settings (white) color - (default "orange") backing color of button (any CSS color) rollColor - (default "lightorange") rollover color of button borderColor - (default null) the color of the border borderWidth - (default null) thickness of the border corner - (default 20) the round of the corner (set to 0 for no corner) shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 14) how blurred the shadow is if the shadow is set hitPadding - (default 0) adds extra hit area to the button (good for mobile) gradient - (default 0) 0 to 1 (try .3) adds a gradient to the button gloss - (default 0) 0 to 1 (try .1) adds a gloss to the button flatBottom - (default false) top corners can round and bottom stays flat (used for ZIM Tabs) backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)    see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.    http://zimjs.com/code/bits/view/pizzazz.html rollBacking - (default null) a Display object for the backing of the rolled-on button rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off icon - (default false) set to display object to add icon at the center of the button and remove label    http://zimjs.com/code/bits/view/icons.html rollIcon - (default false) set to display object to show icon on rollover toggle - (default null) set to string to toggle with label or display object to toggle with icon or if no icon, the backing rollToggle - (default null) set to display object to toggle with rollIcon or rollBacking if no icon    there is no rollToggle for a label - that is handled by rollColor on the label toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle dashed - (default false) set to true to turn the border to dashed - if the borderColor or borderWidth is provided METHODS setBackings(newBacking, newRollBacking) - dynamically set backing and rollBacking on button (both default to null and if empty, removes backings) setIcons(newIcon, newRollIcon) - dynamically set icon and rollIcon on button (both default to null and if empty, removes icons) toggle(state) - forces a toggle of label if toggle param is string, else toggles icon if icon is set or otherwise toggles backing    state defaults to null so just toggles    pass in true to go to the toggled state and false to go to the original state clone() - makes a copy with properties such as x, y, etc. also copied dispose() - to get rid of the button and listeners ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object text - references the text property of the Label object of the button label - gives access to the label backing - references the backing of the button rollBacking - references the rollBacking (if set) icon - references the icon of the button (if set) rollIcon - references the rollIcon (if set) toggleObj - references the toggle object (string or display object if set) rollToggle - references the rollToggle (if set) toggled - true if button is in toggled state, false if button is in original state enabled - default is true - set to false to disable rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off color - get or set non-rolled on backing color (if no backing specified) rollColor - get or set rolled on backing color focus - get or set the focus property of the Button used for tabOrder ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties for example seeing toggle take effect EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 08164 zim.CheckBox = function(size, label, startChecked, color, margin, type)
zim.CheckBox = function(size, label, startChecked, color, margin, type)
CheckBox zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A checkbox that when pressed toggles the check and a checked property. EXAMPLE
var checkBox = new zim.CheckBox(50, "TEST"); checkBox.center(stage); checkBox.on("change", function() {    zog(checkBox.checked); // will be true then false, etc. });
PARAMETERS supports DUO - parameters or single object with properties below size - (default 60) size in pixels (always square) label - (default null) ZIM Label object - or String to make a default label (black) startChecked - (default false) an initial parameter to set checked if true color - (default "#111") the stroke and text color - background is set to a .5 alpha white margin - (default 10) is on outside of box so clicking or pressing is easier type - (default check) could be square (box) or x METHODS setChecked(Boolean) - defaults to true to set button checked (or use checked property) clone() - makes a copy with properties such as x, y, etc. also copied ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES checked - gets or sets the check of the box ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object label - gives access to the label text - the text of the label check - gives access to the check mark ie. check.color = "blue"; color - gets or sets the color of the check enabled - default is true - set to false to disable ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when pressed on but not when the checked property is set ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 08390 zim.RadioButtons = function(size, buttons, vertical, color, spacing, margin, always)
zim.RadioButtons = function(size, buttons, vertical, color, spacing, margin, always)
RadioButtons zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A radio button set that lets you pick from choices. Radio buttons can display radio buttons vertically (default) or horizontally. EXAMPLE
var radioButtons = new zim.RadioButtons(50, ["ONE", "TWO", "THREE"]); radioButtons.center(stage); radioButtons.on("change", function() {    zog(radioButtons.text); // will be ONE, TWO or THREE    zog(radioButtons.selectedIndex); // will be 0, 1, or 2 });
PARAMETERS supports DUO - parameters or single object with properties below size - (default 60) in pixels buttons - an array of button data objects as follows:    [{label:ZIM Label or text, id:optional id, selected:optional Boolean}, {etc...}]    or just a list of labels for default labels ["hi", "bye", "what!"] vertical - (default true) displays radio buttons vertically - set to false to display horizontally color - (default "#111") the stroke and font color - background is set to a .5 alpha white spacing - (size*.2 for vertical and size for horizontal) the space between radio button objects margin - (size/5) the space around the radio button itself always - (default false) if set true, cannot click on selection to unselect it METHODS setSelected(num) - sets the selected index (or use selectedIndex) -1 is default (none) clone() - makes a copy with properties such as x, y, etc. also copied ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES selected - gets the selected object - selected.label, selected.id, etc. selectedIndex - gets or sets the selected index of the buttons ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object label - current selected label object text - current selected label text id - current selected id labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10; dots - an array of the zim Shape dot objects. dots[0].color = "yellow"; enabled - default is true - set to false to disable ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when pressed but not when selectedIndex is set then ask for the properties above for info ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 08680 zim.Pane = function(container, width, height, label, color, drag, resets, modal, corner, backingAlpha, shadowColor, shadowBlur, center, displayClose, backing, fadeTime)
zim.Pane = function(container, width, height, label, color, drag, resets, modal, corner, backingAlpha, shadowColor, shadowBlur, center, displayClose, backing, fadeTime)
Pane zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a window for alerts, etc. You need to call the pane.show() to show the pane and pane.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 (the origin and registration point are in the middle). EXAMPLE
var pane = new zim.Pane(stage, 300, 200, "Watch out!", "#CCC"); pane.show(); // pressing anywhere will close pane (see parameters for options)
PARAMETERS supports DUO - parameters or single object with properties below container - container for the pane (usually the stage) width - (default 200) width of pane height - (default 200) height of pane label - (default null) an optional ZIM Label (or text for default label properties) drag - (default false) pass in true to drag the pane resets - (default true) resets position to start on re-open - set to false to keep last position modal - (default true) pane will close when user clicks off the pane - set to false to keep pane open corner - (default 20) is the corner radius - set to 0 for no corner backingAlpha - (default .14) the darkness of the background that fills the stage shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 20) how blurred the shadow is if shadow is set center - (default true) centers the pane    if center is false you will have to set x and y for the pane    the registration point and the origin inside the pane is in the center    you can adjust the label placement by changing its x and y or registration point displayClose - (default true) closes the Pane if display backing is pressed    if drag is set to true, displayClose will automatically be set to false backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)    see ZIM Pizzazz module for a fun set of Shapes like Boomerangs, Ovals, Lightning Bolts, etc. fadeTime - (default 0) milliseconds to fade in and out METHODS show() - shows the pane (returns the pane for chaining) hide() - hides the pane toggle() - shows if hidden and hides if showing (returns the pane for chaining) clone() - makes a copy with properties such as x, y, etc. also copied (returns the new pane for chaining) dispose() - removes all events ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object display - reference to the pane box text - gives access to the label text label - gives access to the label backdrop - reference to the backdrop that covers the stage resetX - if reset is true you can dynamically adjust the position if needed resetY ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "close" event when closed by clicking on backing ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 08949 zim.Window = function(width, height, color, borderColor, borderWidth, padding, corner, swipe, indicatorActive, indicatorDrag, indicatorColor, indicatorAlpha, indicatorFade, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical)
zim.Window = function(width, height, color, borderColor, borderWidth, padding, corner, swipe, indicatorActive, indicatorDrag, indicatorColor, indicatorAlpha, indicatorFade, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical)
Window zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a window for content that can be swiped and scrolled. EXAMPLE
var win = new zim.Window({    height:300,    interactive:false,    padding:0,    slideDamp:.2 }); var container = new zim.Container(); // make some content var c; spacing = 10; for (var i=0; i<4; i++) {    c = frame.makeCircles();    c.x = win.width/2;    c.y = c.width/2 + (c.width+spacing)*i;    container.addChild(c); } win.add(container); // add the content to the window win.center(stage); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below width - (default 300) the width of the window height - (default 200) the heigth of window color - (default #333) background color (use "rbga(0,0,0,0)" for no background) borderColor - (default #999) border color borderWidth - (default 1) the thickness of the border padding - (default 10) places the content in from edges of border (see paddingHorizontal and paddingVertical) corner - (default 0) is the rounded corner of the window swipe - (default auto/true) the direction for swiping set to none / false for no swiping    also can set swipe to just vertical or horizontal indicatorActive - (default true) shows indicator (set to false to not) indicatorDrag - (default false) set to true to be able to drag the indicator indicatorColor - (default borderColor) the color of the indicator indicatorAlpha - (default .3) the transparency of the indicator indicatorFade - (default true) fades indicator unless being used slide - (default true) Boolean to throw the content when drag/swipe released slideDamp - (default .6) amount the slide damps when let go 1 for instant, .01 for long slide, etc. slideSnap - (default "vertical") "auto" / true, "none" / false, "horizontal"    slides past bounds and then snaps back to bounds when released    vertical snaps when dragging up and down but not if dragging horizontal interactive - (default true) allows interaction with content in window    set to false and whole window will be swipeable but not interactive inside shadowColor - (default rgba(0,0,0,.3)) the color of the shadow shadowBlur - (default 20) set shadowBlur to -1 for no drop shadow paddingHorizontal - (default padding) places content in from top bottom paddingVertical - (default padding) places content in from left and right METHODS add(obj) - adds obj to content container of window (at padding) must have bounds set    it is best to position and size obj first before adding    otherwise if adjusting to outside current content size then call update() update() - resets window scrolling if perhaps the content gets bigger or smaller clone(recursive) - makes a copy with properties such as x, y, etc. also copied    recursive (default true) clones the window content as well (set to false to not clone content) dispose() - removes event listeners from Window and content and removes any Ticker functions ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object backing - CreateJS Shape used for backing of Window content - ZIM Container used to hold added content indicator - data object that holds the following properties (with defaults):    you can set after object is made...    indicator.size = 6;    indicator.spacing = 3 + size + borderWidth / 2;    indicator.margin = 0; // adds extra space only at end by scrollbars    indicator.corner = indicator.size / 2;    indicator.showTime = 500; // ms to fade in    indicator.fadeTime = 3000; // ms to fade out scrollX - gets and sets the content x position in the window (this will be negative) scrollY - gets and sets the content y position in the window (this will be negative) scrollXMax - gets the max we can scroll in x based on content width - window width (plus padding and margin) scrollYMax - gets the max we can scroll in y based on content height - window height (plus padding and margin) ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS dispatches a "select" event when clicked on in a traditional manner (fast click with little movement) dispatches a "hoverover" event when rolled on without moving for 300 ms dispatches a "hoverout" event when not hovering due to movement or mouseout on the window ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 09400 zim.Waiter = function(container, speed, color, circleColor, corner, shadowColor, shadowBlur, fadeTime)
zim.Waiter = function(container, speed, color, circleColor, corner, shadowColor, shadowBlur, fadeTime)
Waiter zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a little animated three dot wait widget. You need to call 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). EXAMPLE
var waiter = new zim.Waiter(stage); waiter.show(); // show the waiter until assets load frame.loadAssets("greeting.mp3"); frame.on("complete", function() {    waiter.hide();    frame.asset("greeting.mp3").play(); });
PARAMETERS supports DUO - parameters or single object with properties below container - the container that holds the waiter (usually the stage) speed - (default 600) cycle time in milliseconds color - (default "orange") the backing color circleColor - (default "white") the dot color corner - (default 14) the corner radius of the waiter box shadowColor - (defaults rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 14) the blur of the shadow if shadow is set fadeTime - (default 0) milliseconds to fade in and out METHODS show() - shows the waiter (returns the waiter for chaining) hide() - hides the waiter clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining) dispose() - removes listeners and deletes object ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object display - reference to the waiter backing graphic ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 09574 zim.Indicator = function(width, height, num, color, offColor, borderColor, backingColor, type, fill, scale, lightScale, press, shadowColor, shadowBlur)
zim.Indicator = function(width, height, num, color, offColor, borderColor, backingColor, type, fill, scale, lightScale, press, shadowColor, shadowBlur)
Indicator zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A row of dots or squares that can be used to indicate a step, page, level, score, etc. The indicator can be used as an input as well but often these are small so may not be best to rely on. EXAMPLE
var lights = new zim.Indicator({fill:true}); lights.selectedIndex = 0; // set the first light on lights.center(stage); stage.on("stagemousedown", function() {    // increase the indicator lights each click (then start over)    lights.selectedIndex = (lights.selectedIndex+1) % lights.num; }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below width - (default 100) width of indicator height - (default 50) height of indicator num - (default 6) the number of lights color - (default "orange") color of the light(s) turned on offColor - (default "grey") color of the light(s) turned off borderColor - (default -1 for no border) border color of lights backingColor - (default -1 for no backing) backing rectangle around lights type - (default "dot" or "circle") can also be "box" or "square" fill - (default false) set to true to fill in lights to the left of the selectedIndex scale - (default 1) for all the lights including spacing lightScale - (default 1) scale for each light - keeping the spacing unchanged press - (default false) set to true to make lights clickable shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 5) the shadow blur if shadow is set METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes any listeners ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES selectedIndex - gets or sets the current index of the indicator ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object num - the assigned num value (how many light objects) (read only) backing - gives access to the backing if there is one zim.Rectangle lights - an array of the light objects (zim Circle or Rectangle objects) lightsContainer - gives access to the lights createjs.Container with its zim.Circle or zim.Rectangle children ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS dispatches a change event if press is true and indicator is pressed on and lights change ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 09770 zim.Stepper = function(list, width, color, borderColor, label, vertical, arrows, corner, shadowColor, shadowBlur, loop, display, press, hold, holdDelay, holdSpeed, drag, dragSensitivity, dragRange, type, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward)
zim.Stepper = function(list, width, color, borderColor, label, vertical, arrows, corner, shadowColor, shadowBlur, loop, display, press, hold, holdDelay, holdSpeed, drag, dragSensitivity, dragRange, type, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward)
Stepper zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Lets you step through a list of numbers or strings with arrows and keyboard arrows. Uses mousedown to activate and defaults to stepping while pressing down and going faster if you drag away from your press. EXAMPLE
var stepper = new zim.Stepper(); stepper.on("change", function() {    zog(stepper.currentIndex);    zog(stepper.currentValue); });
PARAMETERS supports DUO - parameters or single object with properties below list - (default 1-10) pass in an array of strings or numbers to display one at a time width - (default 100) is the width of the text box (you can scale the whole stepper if needed) color - (default "white") for the arrows and the text box borderColor - (default null) stroke color for the box label - (default null) which can be used to define custom text properties vertical - (default false) set to true if you want the arrows above and below the text arrows - (default true) - use graphical arrows (also see keyArrows to turn off keyboard arrows) corner - (default 10) is the radius of the text box corners - set to 0 for square corners shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow shadowBlur - (default 14) value for shadow blur if shadow is set loop - (default false) set to true to loop around or go back past 0 index display - (default true) set to false just to just show the arrows and not the value press - (default true) will advance on label mousedown - set to false to not advance on mousedown hold - (default true) set to false to not step with extended press down holdDelay - (default 400 ms) time (milliseconds) to wait for first step with hold holdSpeed - (default 200 ms) time (milliseconds) between steps as holding drag - (default true) set to false to not step when dragging dragSensitivity - (default .1) .01 changes really quickly - 1 changes at base rate dragRange - (default 200) absolute distance (pixels) from press the drag will reach maximum type - (default "list") list draws values from list parameters    also types "number", "letter" - these get ranges below min - (default 0 for number and "A" for letter) the minimum value (can make min bigger than max) (not for list type) max - (default 100 for number and "Z" for letter) the maximum value (can make max smaller than min) (not for list type) step - (default 1) the step value each time - can be decimal (only positive, only for number type) step2 - (default set to step) the step value when dragging perpendicular to main horizontal or vertical direction    step2 will run with drag set to true or with arrows2 set below (only positive, only for number type) arrows2 - (default true if step2 different than step and type number - else false) secondary arrows perpendicular to main horizontal or vertical direction    arrows2 will activate step2 above (only for number type) arrows2Scale - (default .5) the scale relative to the main arrows keyEnabled - (default true) set to false to disable keyboard search / number picker keyArrows - (default true) set to false to disable keyboard arrows rightForward - (default true) set to false to make left the forward direction in your list downForward - (default true except if type is "number" then default false) set to false to make up the forward direction in your list METHODS next() - goes to next prev() - goes to previous clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes listeners and deletes object ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES currentIndex - gets or sets the current index of the array and display currentValue - gets or sets the current value of the array and display ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object stepperArray - gets or sets the list prev, next - access to the zim Triangle objects (use to position) arrowPrev, arrowNext - access to the zim Triangle objects prev2, next2 - access to the arrows2 containers (use to position) arrowPrev2, arrowNext2 - access to the zim Triangle objects for arrows2 min, max - only for number mode at the monent - currently, do not change the max to be less than the min label - access to the zim.Label textBox - access to the text box backing shape loop - does the stepper loop enabled - default is true - set to false to disable focus - get or set the focus for keypress ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics EVENTS dispatches a "change" event when changed by pressing an arrow or a keyboard arrow (but not when setting currentIndex or currentValue properties) ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤
EXPAND 10552 zim.Slider = function(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, inside)
zim.Slider = function(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, inside)
Slider zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional slider - will give values back based on min and max and position of button (knob). EXAMPLE
var slider = new zim.Slider({step:1}); slider.center(stage); slider.on("change", function() {    zog(slider.currentValue); // 1-10 in steps of 1 }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below min - (default 0) the minimum value for the slider max - (default 10) the maximum value for the slider step - (default 0) 0 is continuous decimal - 1 would provide steps of 1, 2 would provide steps of 2, etc. button - (default small button with no label) - a zim.Button barLength - (default 300) the length of the bar (the slider slides along its length) barWidth - (default 3) the width of the bar (how fat the bar is) barColor - (default "#666") the color of the bar (any CSS color) vertical - (default false) set to true to make slider vertical useTicks - (default false) set to true to show small ticks for each step (step > 0) inside - (default false) set to true to fit button inside bar (need to manually adjust widths) METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes listeners and deletes object ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(),drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES currentValue - gets or sets the current value of the slider ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object min, max, step - read only - the assigned values bar - gives access to the bar zim.Rectangle button - gives access to the zim.Button ticks - gives access to the ticks (to position these for example) enabled - default is true - set to false to disable ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics EVENTS dispatches a "change" event when button is slid on slider (but not when setting currentValue property) ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 10850 zim.Dial = function(min, max, step, width, color, indicatorColor, indicatorScale, type, innerCircle, innerScale, useTicks, innerTicks, tickColor, limit)
zim.Dial = function(min, max, step, width, color, indicatorColor, indicatorScale, type, innerCircle, innerScale, useTicks, innerTicks, tickColor, limit)
Dial zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional dial - will give values back based on min and max and position of dial. EXAMPLE
var dial = new zim.Dial({step:1, color:"violet"}); dial.center(stage); dial.on("change", function() {    zog(dial.currentValue); // 1-10 in steps of 1 }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below min - (default 0) the minimum value for the dial max - (default 10) the maximum value for the dial step - (default 0) 0 is continuous decimal - 1 would provide steps of 1, 2 would provide steps of 2, etc. width - (default 100) the width of the dial (diameter) color - (default "#666") the backing color of the dial indicatorColor - (default "#222") the color of the indicator indicatorScale - (default 1) the scale of the indicator type - (default "arrow" or "triangle") can also be "dot" or "circle", and "line" or "rectangle" innerCircle - (default true) gives an inner knob look - set to false for flat innerScale - (default 1) can be adjusted along with indicatorScale to get a variety of looks useTicks - (default true) will show lines for ticks if step is set innerTicks (default false) set to true to put the ticks inside if step is set tickColor - (default indicatorColor) set the tick color if ticks are set limit - (default true) stops dial from spinning right around - set to false to not limit dial METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes listeners and deletes object ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES currentValue - gets or sets the current value of the dial ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object min, max, step - read only - the assigned values backing - gives access to the dial backing zim.Circle inner and inner2 give access to any inner circles ticks - gives access to the ticks (to scale these for example) indicator - gives access to the indicator container with registration point at the dial center indicatorShape - gives access to the shape on the end of the indicator (zim Triangle, Circle, Rectangle) enabled - default is true - set to false to disable ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics EVENTS dispatches a "change" event when dial changes value (but not when setting currentValue property) ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 11158 zim.Tabs = function(width, height, tabs, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor, flatBottom, keyEnabled, gradient, gloss)
zim.Tabs = function(width, height, tabs, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor, flatBottom, keyEnabled, gradient, gloss)
Tabs zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional tab layout for along the edge of content. Can also act as an independent button row or column. EXAMPLE
var tabs = new zim.Tabs({tabs:["A", "B", "C", "D"], spacing:5, corner:14}); tabs.center(stage); tabs.on("change", function() {    zog(tabs.selectedIndex);    zog(tabs.text); }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below width - (default 240) overall width of tab set (ZIM divides the width across tabs and spacing) height - (default 60) height of tabs tabs - (default ["1","2","3","4"]) an array of tab objects with the following properties available:    any tab specific properties will override the default values from other parameters    [{label:"String", width:200, color:"Red", rollColor:"pink", offColor:"grey"}, {etc.}]    label can be a String or a zim.Label object - default text color is white color - (default "#333") the color of the selected tab (any CSS color) rollColor - (default "#555") the rollover color (selected tabs do not roll over) offColor - (default "#777") the color of a deselected tab when not rolled over spacing - (default 1) is the pixels between tab buttons currentEnabled - (default false) set to true to be able to press the selected tab button corner - (default 0) the corner radius of the tabs (at the top when flatBottom is true) labelColor - (default "white") the color of the label flatBottom - (default true) flat bottom for tab shape set to false for button sets keyEnabled - (default true) so tab key cycles through tabs, shift tab backwards gradient - (default null) 0 to 1 (try .3) adds a gradient to the tabs gloss - (default null) 0 to 1 (try .1) adds a gloss to the tabs METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes listeners and deletes object ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES selectedIndex - gets or sets the selected index of the tabs selected - gets the selected button - selected.enabled = true, etc. ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object tabs - gets or sets tabs object (will have to manually change buttons as well as adjust props) color - gets or sets default selected tab color rollColor - gets or sets default rolled over color offColor - gets or sets default unselected tab color text - gets current selected label text label - gets current selected label object buttons - an array of the ZIM Button objects. buttons[0].enabled = false; labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10; keyEnabled - gets or sets whether the tab key and shift tab key cycles through tabs enabled - default is true - set to false to disable ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when a tab changes (but not when setting selectedIndex property) ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 11507 zim.Pad = function(width, cols, rows, keys, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor)
zim.Pad = function(width, cols, rows, keys, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor)
Pad zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A pad that has rows and cols made of square keys. When the keys are pressed the pad will dispatch a change event - get the selectedIndex or text property. EXAMPLE
var pad = new zim.Pad(); pad.center(stage); pad.on("change", function() {    zog(pad.selectedIndex); // 0-8    zog(pad.text); // 1-9 }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below width - (default 150) overall width of pad (ZIM divides the width across cols and spacing) cols - (default 3) the columns in the pad rows - (default cols) the rows in the pad keys - (default [1,2,3,4,5,6,7,8,9]) an array of key objects with the following properties available:    any key specific properties will override the default values from other parameters    [{label:"String", width:200, color:"Red", rollColor:"pink", offColor:"grey"}, {etc.}]    the label can be a String or a zim.Label object - default text color is white color - (default "#333") the color of the selected tab (any CSS color) rollColor - (default "#555") the rollover color (selected keys do not roll over) offColor - (default "#777") the color of a deselected key when not rolled over spacing - (default 1) is the pixels between key buttons currentEnabled - (default true) set to false to make selected key not pressable corner - (default 0) the corner radius of the keys labelColor - (default "white") the color of the label METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes listeners and deletes object ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES selectedIndex - gets or sets the selected index of the pad selected - gets the selected button - selected.enabled = true, etc. ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object text - gets current selected label text label - gets current selected label object color - gets or sets default selected tab color rollColor - gets or sets default rolled over color offColor - gets or sets default unselected tab color buttons - an array of the ZIM Button objects. buttons[0].enabled = false; labels - an array of the ZIM Label objects. labels[0].text = "YUM"; labels[2].y -= 10; tabs - an array of the zim Tab objects (one object per row) enabled - default is true - set to false to disable ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. OPTIMIZED This component is affected by the general zim.OPTIMIZE setting (default is false) if set to true, you will have to stage.update() after setting certain properties and stage.update() in change event to see component change its graphics ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "change" event when a pad changes (but not when setting selectedIndex property) ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 11690 zim.ColorPicker = function(width, colors, cols, spacing, greyPicker, alphaPicker, startColor, drag, shadowColor, shadowBlur, buttonBar, circles, indicator, backingColor)
zim.ColorPicker = function(width, colors, cols, spacing, greyPicker, alphaPicker, startColor, drag, shadowColor, shadowBlur, buttonBar, circles, indicator, backingColor)
ColorPicker zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A traditional color picker which shows 256 Web colors by default or custom colors. Can additionally show 16 greys and / or an alpha slider. Picking on a color sets the swatch color and the selectedColor property. OK dispatches a change event if the color changed or a close event if not. The X dispatches a close event. EXAMPLE
var cp = new zim.ColorPicker(); cp.center(stage); cp.on("change", function() {    zog(cp.selectedColor); // #ffcc99, etc. after pressing OK    zog(cp.selectedAlpha); // 0-1 }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below width - (default 500) the width of the color picker colors - (default 256 Web colors) an optional list of colors ["red", "#CCC", etc.] cols - (default 10) how many columns to use if you pass in custom colors spacing - (default 2) is the space between the color squares greyPicker - (default true) shows an extra 16 greys (set to false to hide these)    for the default colors it also includes 2 starting colors that record last picked colors alphaPicker - (default true) shows an alpha slider (set to false to hide this)    the swatch has a black, grey and white backing underneath to show multiple alpha effects startColor - (default the last color in color array) the starting color drag - (default true) whether you can drag the component - set to false to not drag    a small grip under the color text shows if draggable shadowColor - (default rgba(0,0,0,.3)) set to -1 for no drop shadow shadowBlur - (default 14) the blur of the shadow if shadow is set buttonBar - (default true) set to false to hide the button bar with OK and X (close) circles - (default false) set to true to show colors in circles rather than squares indicator - (default true) set to false to remove indicator from currentColor backingColor - (default black) the color of the backing METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes listeners and deletes object ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. PROPERTIES selectedColor - gets or sets the selected color swatch selectedAlpha - gets or sets the selected alpha (set does not work if alphaPicker is false) selectedIndex - get or sets the selected index of the colorPicker ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object swatch - gets the zim.Rectangle that is the color swatch swatchBacking - gets the createjs.Shape that is under the swatch (seen if alpha set low) swatchText - gets the zim.Label that shows the color text grip - gets the createjs.Shape for the grip if the panel is dragable backing - gets the zim.Rectangle that is the backing (cp.backing.color = "white" - now a backingColor parameter) okBut - references the OK zim.Button closeBut - references the X zim.Button indicator - gets the zim shape that is the indicator (if indicator is true) NOTE alphaPicker is true: alpaBacking - gets reference to the zim.Rectangle that makes the backing for the alpha slider alphaBut - the zim.Button on the alpha slider alphaSlider - the zim.Slider for the alpha alphaText - the zim.Label for the alpha ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS dispatches a "set" event when a different color or alpha is selected and updated in the picker if the buttonBar is showing dispatches a "change" event when the OK button is activated and the color or alpha is different than before    or if buttonBar is false dispatches "change" when a new color or alpha is selected dispatches a "close" event if the OK button is activated and the color has not changed or the X button is pressed ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤BITS
EXPAND 12183 zim.Loader = function(frame, width, height, drop, label, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, dashed)
zim.Loader = function(frame, width, height, drop, label, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, dashed)
Loader zim class - extends a zim.Button which extends a createjs.Container DESCRIPTION Loader lets you upload images and acces them as a zim.Bitmap (available in the loaded event function) Loader uses the HTML input type=file tag and overlays this with a createjs DOMElement. Loader is a zim.Button so can be displayed for the user to click on. It defaults to a dashed line region as you can also drag and drop files to the loader. You can also save an image using the save() method to a new browser window for the user to save EXAMPLE
var loader = new zim.Loader({    frame:frame,    label:"UPLOAD PIC OR DROP PICS HERE",    width:700,    height:400,    corner:50 }).center(stage); loader.on("loaded", function(e) {    zim.loop(e.bitmaps, function(bitmap){       bitmap.centerReg(stage).drag();    });    loader.removeFrom(stage);    stage.update(); }); // and to later save for instance in a button event: saveButton.on("click") {    loader.save(stage); // or some other container... can specify crop bounds too }
PARAMETERS supports DUO - parameters or single object with properties below frame - a reference to the zim.Frame (required to scale and position the HTML input tag) width - (default 250) the width of the button height - (default 70) the height of the button label - (default "UPLOAD PIC") ZIM Label or plain text with default settings (50% black) color - (default "rgba(0,0,0,.05)") backing color of button (any CSS color) rollColor - (default "rgba(0,0,0,.1)") rollover color of button borderColor - (default rgba(0,0,0,.3)) the color of the border borderWidth - (default 1) thickness of the border corner - (default 0) the round of the corner (set to 0 for no corner) shadowColor - (default "rgba(0,0,0,.3)") set to -1 for no shadow shadowBlur - (default 14) how blurred the shadow is if the shadow is set hitPadding - (default 0) adds extra hit area to the button (good for mobile) gradient - (default 0) 0 to 1 (try .3) adds a gradient to the button gloss - (default 0) 0 to 1 (try .1) adds a gloss to the button flatBottom - (default false) top corners can round and bottom stays flat (used for ZIM Tabs) backing - (default null) a Display object for the backing of the button (eg. Shape, Bitmap, Container, Sprite)    see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.    http://zimjs.com/code/bits/view/pizzazz.html rollBacking - (default null) a Display object for the backing of the rolled-on button rollPersist - (default false) set to true to keep rollover state when button is pressed even if rolling off icon - (default false) set to display object to add icon at the center of the button and remove label    http://zimjs.com/code/bits/view/icons.html rollIcon - (default false) set to display object to show icon on rollover toggle - (default null) set to string to toggle with label or display object to toggle with icon or if no icon, the backing rollToggle - (default null) set to display object to toggle with rollIcon or rollBacking if no icon    there is no rollToggle for a label - that is handled by rollColor on the label toggleEvent - (default mousedown for mobile and click for not mobile) what event causes the toggle dashed - (default true) set to false to turn off the dashed for the border PROPERTIES tag - the HTML input tag of type file - used for uploading zim.Button properties: ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale width - gets or sets the width. Setting the width will scale the height to keep proportion (see widthOnly below) height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below) widthOnly - gets or sets the width. This sets only the width and may change the aspect ratio of the object heightOnly - gets or sets the height. This sets only the height and may change the aspect ratio of the object text - references the text property of the Label object of the button label - gives access to the label backing - references the backing of the button rollBacking - references the rollBacking (if set) icon - references the icon of the button (if set) rollIcon - references the rollIcon (if set) toggleObj - references the toggle object (string or display object if set) rollToggle - references the rollToggle (if set) toggled - true if button is in toggled state, false if button is in original state enabled - default is true - set to false to disable rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off color - get or set non-rolled on backing color (if no backing specified) rollColor - get or set rolled on backing color focus - get or set the focus property of the Button used for tabOrder ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. METHODS resize() - call the resize event if the scale or position of the Loader is changed    this will sync the location of the HTML input tag    resize() is only needed if the scale or x, y of the Loader (or its container) is changed    it is not needed for general window resizing - the Loader handles this save(content, x, y, width, height, url, cached, cachedBounds) - save a picture (supports ZIM DUO)    content - the Display object to be saved such as a Container, Bitmap, etc.    x, y, width, height - the cropping bounds on that object otherwise defaults to 0,0,stageW,stageH    cached - (default false) set to true if the object is currently already cached    cachedBounds - if you are saving a different bounds than was previously cached       setting the bounds here (createjs.Rectangle) will restore the cache to the previous bounds zim.Button methods: setBackings(newBacking, newRollBacking) - dynamically set backing and rollBacking on button (both default to null and if empty, removes backings) setIcons(newIcon, newRollIcon) - dynamically set icon and rollIcon on button (both default to null and if empty, removes icons) toggle(state) - forces a toggle of label if toggle param is string, else toggles icon if icon is set or otherwise toggles backing    state defaults to null so just toggles    pass in true to go to the toggled state and false to go to the original state clone() - makes a copy with properties such as x, y, etc. also copied dispose() - to get rid of the button and listeners ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) EVENTS loaded - is dispatched when the image(s) are uploaded - the event object comes with the following properties:    e.bitmaps - an array of zim.Bitmap objects of the loaded images    e.bitmap - the first zim.Bitmap to be created from the loaded images    e.lastBitmap - the last zim.Bitmap to be created from the loaded images    e.total - the total zim.Bitmap objects to be created from the loaded images ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤
EXPAND 12475 zim.TextArea = function(frame, width, height, padding, color, backingColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly)
zim.TextArea = function(frame, width, height, padding, color, backingColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly)
TextArea zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION TextArea creates an input text field by overlaying an HTML TextArea. The TextArea is then overlayed with the createjs DOMElement and scaled and positioned with ZIM code. This can also be used if selectable text is required Access to the HTML tag is provided with the TextArea tag property. So CSS Styles can be applied to the HTML tag as with any HTML textarea tag The TextArea comes with a ZIM Rectangle in behind that you can adjust with parameters or remove completely if you so desire using the TextArea backing property ie. myTextArea.backing.alpha=0; or myTextArea.removeChild(myTextArea.backing) Due to the HTML tag being overlayed, the TextArea.resize() must be called if it is moved (This is called automatically when the stage is resized) EXAMPLE
var textArea = new zim.TextArea(frame, 300, 200); textArea.center(stage); var label = new zim.Label({text:""}).addTo(stage).pos(20,20); textArea.on("input", function() {    label.text = textArea.text;    stage.update(); }); // if manually scaled or positioned (or container is scaled or positioned) // then the TextArea must be resized with the resize method textArea.sca(.5).mov(200); textArea.resize();
PARAMETERS supports DUO - parameters or single object with properties below frame - a reference to the zim.Frame (required to scale and position the HTML input tag) width - (default 250) the width of the TextArea backing (the textarea field will be that less the padding*2) height - (default 70) the height of the TextArea backing (the textarea field will be that less the padding*2) size - (default 20) a Number for the font-size of the TextArea (do not use px on the end)    to change the font, use CSS on the tag property: textArea.tag.style.fontFamily = "courier"; padding - (default 5) the pixels between the backing border and the HTML textarea color - (default "rgba(0,0,0,.05)") backing color of button (any CSS color) backingColor - (default "rgba(0,0,0,.1)") rollover color of button borderColor - (default rgba(0,0,0,.1)) the color of the border borderWidth - (default 1) thickness of the border corner - (default 0) the round of the corner (set to 0 for no corner) shadowColor - (default null) the shadow color (css color) of a drop shadow shadowBlur - (default null) pixels of how blurred the shadow is if the shadow is set - eg. 10 dashed - (default true) set to false to turn off the dashed for the border id - (default null) a string id for the HTML textarea tag for CSS styling, etc. placeholder - (default null) a string that is used for the HTML textarea tag placeholder parameter readOnly - (default false) set to true to make TextArea read only (still selectable) PROPERTIES currentValue - get or set the text content of the TextArea text - the same as currentValue - for convenience... readOnly - set to true to not be able to edit or to false to be able to edit (always can select) tag - the HTML textarea tag - just a regular HMTL form tag which can be styled backing - access to the zim.Rectangle() used for the backing    you can remove this with yourTextArea.backing.removeFrom(yourTextArea);    or adjust it dynamically with any of the Rectangle properties like color ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. METHODS resize() - call the resize event if the scale or position of the TextArea is changed    this will sync the location of the HTML textarea tag    resize() is only needed if the scale or x, y of the TextArea (or its container) is changed    it is not needed for general window resizing - the TextArea handles this clone() - makes a copy with properties such as x, y, etc. also copied dispose() - to get rid of the textarea tag ALSO ZIM 4TH adds all the methods listed under zim.Container (see above), such as: drag(), hitTestRect(), move(), animate(), scale(), center(), centerReg(), addTo(), removeFrom(), loop(), outline(), place(), pos(), alp(), rot(), setMask(), etc. ALSO See the CreateJS Easel Docs for Container methods, such as: on(), off(), getBounds(), setBounds(), cache(), uncache(), updateCache(), dispatchEvent(), addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc. EVENTS focus, blur are dispatched when the text area gains and loses focus input is dispatched when the text area is typed or pasted into change is dispatched when the text area is different after losing focus These are just the html events passed on through - note the difference between input and change! ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤
ZIM PAGES
EXPAND 12701 zim.Swipe = function(obj, distance, duration)
zim.Swipe = function(obj, distance, duration)
Swipe zim class - extends a createjs.EventDispatcher DESCRIPTION Sets up capturing swipes on objects. Dispatches a "swipe" event on swipe left, right, up, down. EXAMPLE
var rect = new zim.Rectangle(200, 200, "blue"); rect.center(stage); var swipe = zim.Swipe(rect); var distance = 100; swipe.on("swipe", function(e) {    zog(e.swipeX); // -1, 0, 1 (for left, none and right)    zog(e.swipeY); // -1, 0, 1 (for up, none and down)    // move directly:    // rect.x += distance * e.swipeX;    // rect.y += distance * e.swipeY;    // stage.update();    // or animate    zim.move({       target:rect,       x:rect.x+distance*e.swipeX,       y:rect.y+distance*e.swipeY,       time:400,       ease:"quadOut"    }); }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below obj - the object you want to swipe on distance - (default 30) the distance in pixels to activate swipe    might want to pass in a pixel distance based on percentage of stage time - (default 80) time in milliseconds to travel that distance    try http://zimjs.com/code/swipe.html for testing distance and time (speed) PROPERTIES distance - the distance needed for swipe to activate duration - the time from mousedown a swipe is measured for distance direction - the direction of the last swipe (left, right, up, down or none) obj - the object that was last swiped active - Boolean true for dispatching swipes and false for not METHODS enable() - set swipe to active (by default it is) disable() - set swipe to inactive (sets active to false and does not dispatch) EVENTS dispatches a "swipe" event on every pressup (even if swipe failed and direction is none) when a swipe event triggers the Swipe event object has a swipeX and swipeY property that is -1,0, or 1 for left, none, or right OR up, none, down the event object has an obj property as well for what object was swiped also dispatches a "swipedown" event for convenience on a mousedown LEGACY the Swipe object provides a direction property of "left", "right", "up", or "down" the Swipe object provides an obj property of what object was swiped on for instance if e is the event object then e.target is the Swipe object so use e.target.direction did not dispatch a custom event due to lack of support in early IE Swipe also dispatches a direction of "none" if the mouse movement is not a swipe this can be used to snap back to an original location CLOSE ▲VIEW ▤BITS
EXPAND 12851 zim.Pages = function(holder, pages, transition, speed, transitionTable)
zim.Pages = function(holder, pages, transition, speed, transitionTable)
Pages zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Pages handle going between pages. Make a Pages object and add it to the stage. All your pages from then on are added to and manipulated inside the Pages object. Pages allows you to set the destination pages for swipe events. Other events like buttons can call the go(page, direction) method. Consider using zim.HotSpots() to efficiently handle multiple buttons. EXAMPLE
// make pages (these would be containers with content) var home = new zim.Rectangle(stageW, stageH, "blue"); var hide = new zim.Rectangle(stageW, stageH, "green"); var find = new zim.Rectangle(stageW, stageH, "yellow"); var pages = new zim.Pages({    holder:stage,    pages:[       // imagine pages to the left, right, up and down       // swipe:["to page on left", "to page on right", etc.s]       {page:home, swipe:[null,"info",hide,find]},       {page:hide, swipe:[null,null,null,home]},       {page:find, swipe:[null,null,home,null]}    ],    transition:"slide",    speed:1000 // slower than usual for demonstration }); stage.addChild(pages); // handle any events inserted into the swipe arrays pages.on("info", function(){zog("info requested")}); // handle any custom requirements when arriving at a page // the event gives you the page object // so add a name properties just make it easier to manage home.name = "home"; hide.name = "hide"; find.name = "find"; pages.on("page", function() {    zog(pages.page.name); // now we know which page we are on }) // you can manually go to pages as well // we will make a little triangle to click: var back = new zim.Triangle({color:"red"}); back.center(find); // add triangle to find page // not really supposed to add things to zim shapes // they default to mouseChildren false // we want to click on the back button // so we have to set the mouseChildren of find to true find.mouseChildren = true; back.cursor = "pointer"; back.on("click", function() {pages.go(home, "up")}); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below holder - where are we putting the pages (eg. stage) (used for setting transition properties) pages - (default null) an array of page objects - for example:    [{page:home, swipe:[null,"info",hide,find]},{page:hide, swipe:[null,null,null,home]}]    the pages should be containers - it helps to give them each a name property    the optional swipe array holds mappings to swipe events ["right", "left", "down", "up"]    in other words, these could be pages to the left, right, top and bottom of the current page    or they can call commands as strings transition - (default "none") the type of transition "none", "reveal", "slide", "fade", "black", "white" speed - (default 200) speed in milliseconds of the transition if set transitionTable - (default none) an array to override general transitions with following format:    [[fromPage, toPage, "transition", ms(optional)], etc.] METHODS addPage() - lets you alternatively add pages after you create the object removePage() - lets you remove a page (if on this page, call a go() first and remove on the page event) setSwipe() - lets you set the swipe array for a page go(newPage, direction, trans, ms) - lets you go to a page for events other than swipe events    direction is which way the pages is relative to the current page    trans and ms are optional and will override any previously set transitions (speed in ms) resize() - call to resize transitions - not the pages themselves (use layouts) pause() - pauses a transition before it starts (call from swipe event) unpause() - unpauses a paused transition (unless another go() command is called) puff(time) - adds all the pages behind the currentPage (adding time (ms) will auto calls settle) settle() - removes all pages except the currentPage disable() - stops swipe from activating and sets active = false enable() - enables swipe action and sets active = true dispose() - clears your listeners and pages PROPERTIES speed - of transitions in ms transitionTable - [[fromPage, toPage, "transition", ms(optional)], etc.] overrides default transition page - the current page object (read) lastPage - the last page before transition (read) direction - direction of transition (read) active - default true, boolean to have swipes active (good for layered Pages objects) swipe - the ZIM Swipe object used for pages (can tweak distance to percentage if rescaling) ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY, alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, compositeOperation, etc. EVENTS Pages dispatches a "page" event when the page changes (to a page in the swipe array) myPages.on("page",function(e){...}) with myPages.page being set to the new page (e.target.page) and myPages.lastPage being set to the old page (e.target.lastPage) myPages.direction gets the direction of the transition (e.target.direction) if there is a string in the swipe array like "info" then the zim.Pages() object dispatches an event equivalent to the string for the data example above, myPages.on("info",function(e){...}); would trigger when the home page is swiped to the left Pages dispatches a "swipe" event before changing pages if swiped you can then get pages.page, pages.nextPage and pages.direction you can pause() if needed the transition to handle data, etc. and then unpause() you do not need to handle going to another page when swiping - that is handled automatically so you probably will not use the swipe event unless handling data between pages Pages also dispatches a "pagetransitioned" event when a transition is complete you will have the same properties available as with the page event USAGE the first page object is the start page for the data above, swiping the home page down automatically goes to the hide page if the home page is swiped up it automatically goes to the find page you can add pages with the addPage() method it will not show until you swipe or go to it - unless it was the first page added 1. if the holder is the stage then add the pages object to the stage 2. if the holder is another container then add pages object to the holder and add the holder to the stage (read this twice to make sure you got it!) in the second case, you will have to mask the holder so you do not see transitions DO NOT add the pages to the stage or holder - let Pages do it for you sometimes you need a page to be on the stage to operate on it if this is the case, call puff() and make adjustments call settle() when done - or pass in a time in ms to puff to auto settle after that time you can define multiple pages objects add and remove pages objects as needed CLOSE ▲VIEW ▤BITS
EXPAND 13255 zim.HotSpots = function(spots, local, mouseDowns)
zim.HotSpots = function(spots, local, mouseDowns)
HotSpots zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION HotSpots allow you to create multiple zim.hotSpot objects on multiple pages. A zim.hotSpot is an invisible click area (like an image map in HTML). You can alternatively specify an object and it will turn that into a hotSpot. zim.HotSpots lets you control many or all of your interactions in one place. EXAMPLE
// our first hotSpot will be a 50 pixel square at 100, 100 // then we will add hotSpots to these items as well var circle = new zim.Circle(60, "red"); circle.center(stage); var button = new zim.Button(); stage.addChild(button); button.x = stageW - button.width - 100; button.y = stageH - button.height - 100; // make the hotSpots object // these are all on the same page // gets really handy when you have multiple pages with zim.Pages var hs = new zim.HotSpots([    {page:stage, rect:[100,100,50,50], call:function(){zog("hot!");}},    {page:stage, rect:circle, call:function(){zog("circle!");}},    {page:stage, rect:button, call:function(){zog("button!");}}, ]); // hs.show(); // uncomment this to see rectangle hotSpots stage.update();
PARAMETERS supports DUO - parameters or single object with properties below spots - an array of hotspot data objects with the following format:    [{page:home, rect:[190,50,260,260], call:someFunction},     {page:home, rect:[70,405,500,150], call:someOtherFunction}]    the page should be a createjs Container    the rect is the [left, right, width, height] of a rectangle relative to the stage    call is the callback function to call when a hotSpot is clicked    instead of a rect array you can pass an object that must have setBounds() set    [{page:home, rect:submitButton, call:function(){//code}}]    the hotSpot will then use the button position and bounds as the rectangle    note - in this case, HotSpots will actually add a mousedown or click event to the button local (default true) hotSpot rect is based on local coordinates of the container    use when the element scale independently from the stage    if set to false then you pass in global coordinates and hotSpot will convert them mouseDowns (default false) stops mousedown events on a button that is used as a hotSpot    prevents users from activating a swipe on a button (when using ZIM Swipe) METHODS show() - shows the hotspots for testing during authoring time hide() - hides the hotspots addHotSpot(page,rect,call) - can dynamically add hotSpots removeHotSpots(page,id) - id is optional - so can remove all spots on a page dispose() - removes listeners ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) NOTE the class does actually add rectangle shapes to your page the spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape this could have been done with "math" alone but rollover cursor would be a pain the class creates zim.HotSpot objects - see the class underneath this one CLOSE ▲VIEW ▤BITS
EXPAND 13458 zim.HotSpot = function(obj, x, y, width, height, call, local)
zim.HotSpot = function(obj, x, y, width, height, call, local)
HotSpot zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION HotSpot adds an invisible button to a container object (often think of this as the page). If you want multiple spots it is more efficient to use the HotSpots class above which manages multiple HotSpot objects (otherwise you end up with multiple event functions). The spot is a pixel rect with an alpha of .01 and then uses a hitArea of a backing shape. The spot will get a cursor of "pointer". EXAMPLE
var hs = new zim.HotSpot(stage, 100, 100, 50, 50, myFunction); function myFunction() {    zog("activation!"); } // hs.show(); // uncomment this to see rectangle hotSpot stage.update();
PARAMETERS supports DUO - parameters or single object with properties below holder - container object in which to place the hotspot (stage for instance) x, y, width and height - of the rectangle for the hotspot call - the function to call when the spot is pressed local (default true) hotSpot rect is based on local coordinates of the container    use when the element scale independently from the stage    if set to false then you pass in global coordinates and hotSpot will convert them METHODS show() - helps when creating the spot to see where it is hide() - hides the hotspot dispose() - removes the listener and the spot PROPERTIES spot - the actual hotSpot object that gets added to the container can be accessed with the spot property eg. hs.spot ACTIONEVENT This component is affected by the general zim.ACTIONEVENT setting The default is "mousedown" - if set to something else the component will act on click (press) CLOSE ▲VIEW ▤
EXPAND 13561 zim.Manager = function()
zim.Manager = function()
Manager zim class DESCRIPTION used internally to make GridManager and GuideManager and in future perhaps OutlineManager CLOSE ▲VIEW ▤
EXPAND 13596 zim.Guide = function(obj, vertical, percent, hideKey, pixelKey)
zim.Guide = function(obj, vertical, percent, hideKey, pixelKey)
Guide Class extends a zim.Container which extends a createjs.Container DESCRIPTION Guide shows a guideline to help layout assets with code. Cursor x and y in percentage or pixels are shown along edges as a distance from the guide. You only need one guide per axis because you measure from the guide to your cursor. Use the G key to toggle guide visibility. Use the P key to toggle percent and pixels. Make sure you remove the guide for your final version (dispose). EXAMPLE
// simple form for a vertical guide // use the distance from the guide to your cursor to measure // so you only need one vertical guide for horizontal measurement var guide = new zim.Guide(stage); // better to add guides to a GuideManager var manager = new zim.GuideManager(); manager.add(new zim.Guide(stage)); manager.add(new zim.Guide(stage, false)); // or with pixels // manager.add(new zim.Guide(stage, true, false)); // manager.add(new zim.Guide(stage, false, false)); // then you can remove all guides with // manager.dispose(); // handy with guides on multiple zim.Pages // and in frame resize event we can resize all guides: frame.on("resize", function() {manager.resize();})
PARAMETERS supports DUO - parameters or single object with properties below obj - object to add guide to for example the stage vertical - (default true) set to false for horizontal guide percent - (default true) set to false to show pixels hideKey - (default G) key to press to hide guide pixelKey - (default P) key to press to swap percent and pixels METHODS resize() - resizes the guide if the container size changes (put in frame resize event) dispose() - removes keyboard event listeners and guide PROPERTIES pixels - boolean - set to true to change to pixels, false to go to percent CLOSE ▲VIEW ▤
EXPAND 13884 zim.GuideManager = function()
zim.GuideManager = function()
GuideManager zim class - extends the ZIM Manager abstract class DESCRIPTION Add Zim Guide objects to a GuideManager object and update or remove all guides at once. Guides are handy to use but perhaps annoying to update and remove if you have many. GuideManager keeps track of the guides and lets you update or dispose of them on command. EXAMPLE
var manager = new zim.GuideManager(); manager.add(new zim.Guide(stage)); manager.add(new zim.Guide(stage, false)); // or with pixels // manager.add(new zim.Guide(stage, true, false)); // manager.add(new zim.Guide(stage, false, false)); // then you can remove all guides with // manager.dispose(); // handy with guides on multiple zim.Pages // and in frame resize event we can resize all guides: frame.on("resize", function() {manager.resize();})
PROPERTIES items - an array of all Guide objects added with add() METHODS add(guide) - registers a guide with the GuideManager resize() - resizes all the guides in the GuideManager (ie. if stage changes) dispose() - disposes all guides and the GuideManager NOTE to just hide guides, you use the G key and to toggle percent and pixels use the P key you can dispose guides individually or use this class to dispose all disposing will remove the G, P key listener and the guide CLOSE ▲VIEW ▤
EXPAND 13933 zim.Grid = function(obj, color, percent, hideKey, pixelKey)
zim.Grid = function(obj, color, percent, hideKey, pixelKey)
Grid zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A Grid shows gridlines to help layout assets with code (percent is default). Cursor x and y percentage or pixels are shown along edges. Use the G key to toggle grid visibility. Use the P key to toggle percent and pixels. Make sure you remove the grid for your final version (dispose). EXAMPLE
var grid = new zim.Grid(stage); // better to add grids to a GridManager var manager = new zim.GridManager(); manager.add(new zim.Grid(stage)); // or with pixels // manager.add(new zim.Grid(stage, null, false)); // then you can remove all grids with // grid.dispose(); // handy with guides on multiple zim.Pages // and in frame resize event we can resize all grids: frame.on("resize", function() {manager.resize();})
PARAMETERS supports DUO - parameters or single object with properties below obj - the object to add grid to (for example the stage) color - (default black) the color of the grid percent - (default true) set to false to show pixels hideKey - (default G) key to press to hide grid pixelKey - (default P) key to press to swap percent and pixels METHODS resize() - resize the grid if the container changes size (eg. put in frame resize event) dispose() - clears keyboard events and grid PROPERTIES pixels - boolean - set to true to change to pixels, false to go to percent CLOSE ▲VIEW ▤BITS
EXPAND 14254 zim.GridManager = function()
zim.GridManager = function()
GridManager zim class - extends a zim.Manager DESCRIPTION Add Zim Grid objects to a GridManager object and update or remove all grids at once. Grids are handy to use but perhaps annoying to update and remove if you have many. GridManager keeps track of the grids and lets you update or dispose of them on command. EXAMPLE
var manager = new zim.GridManager(); manager.add(new zim.Grid(stage)); // or with pixels // manager.add(new zim.Grid(stage, null, false)); // then you can remove all grids with // grid.dispose(); // handy with guides on multiple zim.Pages // and in frame resize event we can resize all grids: frame.on("resize", function() {manager.resize();})
METHODS add(grid) - registers a grid with the GridManager resize() - resizes all the grids in the GridManager (ie. if stage changes) dispose() - disposes all grids and the GridManager NOTE to just hide grids, you use the G key and to toggle percent and pixels use the P key you can dispose grids individually or use this class to dispose all disposing will remove the G key listener and the grid PROPERTIES items - an array of all Grid objects added with add() CLOSE ▲VIEW ▤
EXPAND 14301 zim.Layout = function(holder, regions, lastMargin, backgroundColor, vertical, regionShape, scalingObject, hideKey)
zim.Layout = function(holder, regions, lastMargin, backgroundColor, vertical, regionShape, scalingObject, hideKey)
Layout zim class - extends a createjs.EventDispatcher DESCRIPTION Layout arranges objects on the page by fitting them in regions. Make a layout object for each page if desired and even nest layout objects inside regions. Fixed aspect ratio content is fit into regions. Layout is good for flexive design where you anchor titles and navigation. Layout handles any number of regions vertically or horizontally. It is useful for full scale mode for different devices or browser window scale. You need to run the resize() method to update the layout. Put the all your layouts in zim.LayoutManager to scale all at once. EXAMPLE
// these would be containers with your content // make sure that bounds are set on containers // you may want to hard code bounds for clarity var header = new zim.Rectangle(500, 200, "blue"); var content = new zim.Rectangle(600, 500, "green"); var footer = new zim.Rectangle(500, 200, "blue"); stage.addChild(header, content, footer); // make the Layout - more useful for FULL scale mode var layout = new zim.Layout({    holder:stage,    regions:[       {object:header, marginTop:10, maxWidth:80, minHeight:10, valign:"top"},       {object:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight       {object:footer, marginTop:5, maxWidth:80, height:10}    ],    lastMargin:5 }); // add to LayoutManager to resize or dispose all layouts together // disposing only removes keyboard events to show boundaries var manager = new zim.LayoutManager(); manager.add(layout); frame.on("resize", function() {    manager.resize();    stage.update(); }); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below holder - object to hold layout (stage, container, etc) that must have bounds set regions - an array of region objects with specific properties for each    Example VERTICAL region objects - all dimensions are percents       [{object:title, marginTop:10, maxWidth:80, minHeight:20, align:"left", valign:"top"},       {object:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight       {object:nav, marginTop:5, maxWidth:80, height:20, backgroundColor:"red"}]    note: no minHeight for middle regions - but heights on any region    align defaults to middle for the regions    valign defaults to top and bottom for the top and bottom region and middle for the others    backgroundColor applies a backing color to the region    Example HORIZONTAL region objects       [{object:col1, marginLeft:10, maxHeight:80, width:20, valign:"bottom"},       {object:col2, marginLeft:5, maxHeight:90, align:"middle"}, // note, middle gets no minWidth       {object:col3, marginLeft:5, maxHeight:80, minWidth:20, align:"left", valign:"top"}]    align defaults to left and right for the outer regions and middle for the inside regions    valign defaults to top for all the regions lastMargin - (default 0) the margin at the bottom (vertical) or at the right (horizontal) backgroundColor - (default null) background color for the whole holder vertical - (default true) set to false for horizontal layout regionShape - (default null) a zim or createjs Shape object to show bounds (gets added to holder)    can toggle on and off with B key - but must pass in the Shape to use the B key scalingTarget - (default holder) an object used as the bounds of the region scaling    setting a scalingTarget will also set the bounds of the holder to the scalingTarget bounds    it does not scale the holder - only scales the region objects inside hideKey - (default B) is the hot key for hiding and showing the bounds METHODS resize() - resize based on new bounds of the holder (or scalingObject) dispose() - removes the B key listener (otherwise, nothing to dispose) addShape(shape) - adds a bounding shape dynamically removeShape() - permanently removes the bounding shape disable() - disables all the layout (shape and sizing) enable() - enables all the layout (shape and sizing) if you want to get rid of the objects then you need to do so in your app PROPERTIES regions - the regions object - if changed will have to call resize() manually DESCRIPTION OF FLEXIVE DESIGN here described with vertical layout - horizontal is similar but rotated 90 the content in the middle will try and expand against the top and bottom until it forces the top and bottom to their minimum percents if the content hits its maximum width percent first then the top and bottom will fill up the rest of the height until they reach their maximum widths CLOSE ▲VIEW ▤BITS
EXPAND 14770 zim.LayoutManager = function()
zim.LayoutManager = function()
LayoutManager zim class DESCRIPTION Add Zim Layout objects to a LayoutManager object and update them all at once. You can remove all layout region bound shapes at once as well as remove the B key to show the region bound shapes. For a final project, call the dispose(). This will remove all shapes and key events. The layouts will remain in place to handle multiple screen sizes. EXAMPLE
// these would be containers with your content // make sure that bounds are set on containers // you may want to hard code bounds for clarity var header = new zim.Rectangle(500, 200, "blue"); var content = new zim.Rectangle(600, 500, "green"); var footer = new zim.Rectangle(500, 200, "blue"); stage.addChild(header, content, footer); // make the Layout - more useful for FULL scale mode var layout = new zim.Layout({    holder:stage,    regions:[       {object:header, marginTop:10, maxWidth:80, minHeight:10, valign:"top"},       {object:content, marginTop:5, maxWidth:90}, // note, middle gets no minHeight       {object:footer, marginTop:5, maxWidth:80, height:10}    ],    lastMargin:5 }); // add to LayoutManager to resize or dispose all layouts together // disposing only removes keyboard events to show boundaries var manager = new zim.LayoutManager(); manager.add(layout); frame.on("resize", function() {    manager.resize();    stage.update(); }); stage.update();
METHODS add(layout) - registers a layout with the LayoutManager resize() - resizes all the layouts in the LayoutManager disable() - disables all the layouts in the LayoutManager (shapes and sizing) enable() - enables all the layouts in the LayoutManager (shapes and sizing) dispose() - only removes bounds shapes and keyboard events (does not really dispose) NOTE to just hide bounds, you use the B key PROPERTIES items - an array of all Layout objects added with add() CLOSE ▲VIEW ▤
EXPAND 14860 zim.Parallax = function(stage, damp, layers, auto)
zim.Parallax = function(stage, damp, layers, auto)
Parallax zim class DESCRIPTION Takes objects as layers and sets properties based on an input, for instance, each layer could move a different x based on position of mouseX or each layer could scale a different amount based on scroll of y. The types of input are mouseX, mouseY, scrollX, scrollY or custom. The types of properties to change could be x, y, scaleX, scaleY, rotation, alpha, frameNumber, etc. Parallax allows scale to be a property which scales scaleX and scaleY together. Parallax allows frame to be a property and calls gotoAndStop() on a Sprite frame. Parallax really just manages multiple ProportionDamp objects. For proper parallax, the objects closer move more than the objects farther back. EXAMPLE
// make assets to move around // these could be pictures, shapes, containers, etc. var backing = new zim.Rectangle(800, 200, "yellow"); backing.center(stage); var mid = new zim.Rectangle(400, 200, "green"); mid.center(stage).y += 20; var front = new zim.Circle(60, "red"); front.center(stage).y += 80; // make Parallax object - here we move with stage mouseX and mouseY var parallax = new zim.Parallax(stage, .1, [    {obj:backing, prop:"x", propChange:50}, {obj:backing, prop:"y", propChange:40, input:"mouseY"},    {obj:mid, prop:"x", propChange:100}, {obj:mid, prop:"y", propChange:80, input:"mouseY"},    {obj:front, prop:"x", propChange:150}, {obj:front, prop:"y", propChange:100, input:"mouseY"} ]); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below stage - the stage damp - (default .1) the damp value with 1 being no damping and 0 being no movement layers - (default null) an array of layer objects, the format as below    Example: to move an obj 200 px in the x as the window scrolls from 100 to 300 px in the y       [{obj:obj, prop:"x", propChange:200, input:"scrollY", inMin:100, inMax:300, factor:1, integer:false}, etc.]    obj - the object whose property is being changed    prop - the property that is being changed    propChange - how much you want the property to change    input - (default mouseX) but can also be mouseY, scrollX, scrollY    inMin - (default 0) minimum input range    inMax - (default stageW (for x prop) stageH (for y prop)) maximum input range    factor - (default 1) set factor to -1 to change in the opposite direction    integer - (default false) set to true to round the value to an integer    Example 2: a traditional mouse move parallax for one object       [{obj:obj, prop:"x", propChange:100}, {obj:obj, prop:"y", propChange:50, input:"mouseY"}, etc.]    you would probably have more objects to follow    or you can add these one at a time with the p.addLayer({layer object properties}); auto - (default true) uses the specified input    if auto is set to false, you must make your own Ticker and use the step(input) method NOTE ticker and fps parameters have been removed - see zim.Ticker to set METHODS addLayer({layer object properties}) - adds a layer removeLayer(index) - removes a layer based on order added step(input) - used when auto is false to send in custom input data immediate([]) - immediately sets the target value for each layer object (no damping) dispose() - removes listeners PROPERTIES damp - allows you to dynamically change the damping CLOSE ▲VIEW ▤BITS
EXPAND 15064 zim.Scroller = function(backing, speed, direction, horizontal, gapFix, stage, container)
zim.Scroller = function(backing, speed, direction, horizontal, gapFix, stage, container)
Scroller zim class extends a createjs.EventDispatcher DESCRIPTION Scroller animates a backing either horizontally or vertically (not both). The Scroller object will create a clone of the backing and animate and swap the backgrounds when needed. NOTE A scroller can be added to a zim.Accelerator object this will allow the percentSpeed to be synched with other Scroller and Dynamo objects See http://zimjs.com/code/zide/ EXAMPLE
var one = new zim.Rectangle(1200, 400, "red"); frame.makeCircles().center(one); stage.addChild(one); var scroller = new zim.Scroller(one); stage.update();
PARAMETERS supports DUO - parameters or single object with properties below background - an object to animate (make start and end edges match to be seemless) speed - (default 1) how fast in pixels per second the animation is going direction - (default 1) set to -1 for left or down horizontal - (default true) set to false to animate vertically    you can adjust the speed and direction properties dynamically    you cannot adjust the backings and horizontal dynamically    to change your animation, dispose() of the Scroller object and make a new one    disposing just removes the ticker - you have to remove the backings    NOTE: the gapFix and ticker parameters have been removed - see zim.Ticker gapFix - (default 0) if a thin line appears when changing speed - try setting to 1 or 2 stage - (default background.stage) if the backround is not on the stage then need to pass the stage it will be on container - (default stage) what bounds are used for wrapping the background METHODS pause(state) - state defaults to true and pauses the scroller (sets speed to 0)    set state to false to unpause the scroller (sets speed to speed before pausing) dispose() - get rid of the event listeners - you need to remove the backings (see backing properties) PROPERTIES backing1 - the original backing passed in backing2 - the cloned backing made from the original backing speed - how fast the animation is going in pixels per frame baseSpeed - the scroller speed when it was first made (or can override)    used to determine percentage speed for percentSpeed property percentSpeed - get or set the percentage of the baseSpeed    this allows you to animate multiple scrollers relative to one another    See ScrollerManager class direction - either left or right if horizontal or up or down if not horizontal pause - read only - true if paused and false if not - must be set with pause() method EVENTS Dispatches a pause event when paused is complete (sometimes a delay to slow to pause) CLOSE ▲VIEW ▤BITS
EXPAND 15288 zim.Dynamo = function(sprite, speed, label, startFrame, endFrame, update, reversable)
zim.Dynamo = function(sprite, speed, label, startFrame, endFrame, update, reversable)
Dynamo zim class - extends a createjs EventDispatcher DESCRIPTION A Dynamo can run any zim.Sprite animation at varying speeds You pass in an optional label, or start and end frames to define the animation frames You can animate a Dynamo using speed or percentSpeed percentSpeed is handy for animating at speeds relative to other animations and scrollers You can control Dynamo speeds with mouse position - or in a Parallax object A Dynamo loops automatically - you can pause it (with optional slowing or optional frame) and unpause it (with optional quickening) You can also get or set its frame property at which point, it will loop from there (unless paused) A Dynamo dispatches a change event everytime the frame changes and a loop event everytime it loops to the start and a paused event when paused NOTE A Dynamo can be added to a zim.Accelerator object this will allow the percentSpeed to be synched with other Scroller and Dynamo objects See http://zimjs.com/code/zide/ NOTE Dynamo is an alternative to a zim.Sprite.run() where you provide a set time for animation but you can pause a Dynamo and then use run() and then unpause the Dynamo when the run is done If you are controlling the Dynamo in a zim.Ticker.add() function, then make sure to remove() the Ticker function when the Dynamo is paused EXAMPLE
// we have a sprite of a guy and it has a "walk" animation // we can make this run faster and slower with an accelerator: // we pass in a speed of 30 fps and this becomes the baseSpeed var dynamo = new zim.Dynamo(sprite, 30, "walk"); zim.Ticker.add(function() {    // the sprite will run at 0 speed when the cursor is at the left of the stage    // and get faster as the cursor moves to the right    // at the middle it will be 30 fps and at the right it will be 60 fps    dynamo.percentSpeed = stage.MouseX/stageW*100*2; }, stage); Here we apply damping and make the sprite play backwards at the left of half stage var dynamo = new zim.Dynamo(sprite, 30, "walk"); zim.Ticker.add(function() {    // will play backwards at 30 fps at left and forwards at 30 fps at right    // it will stop at half the stage width    dynamo.percentSpeed = stage.mouseX/stageW*200 - 100; }, stage);
PARAMETERS supports DUO - parameters or single object with properties below sprite - the sprite to control speed - (default 30) the frames per second at which to animate the sprite label - (default null) the label of the sprite to play (see zim.Sprite) startFrame - (default 0) the frame to start the animation (ignored if a label is provided) endFrame - (default sprite.totalFrames) the frame to end the animation (ignored if a label is provided) update - (default false) set to true to update the stage (only do this if you are not already updating the stage!) reversable - (default true) will allow percentSpeed to be negative and reverse the animation. Set to false to use absolute value. METHODS pause(state, time, frame) - the way to pause or unpause a Dynamo affecting the sprite animating    state - (default true) true pauses and setting the state to false will unpause the animation    time - (default 0) time in milliseconds to slow the animation down if pausing or speed it up if unpausing    frame - (default null) which frame to pause on - overrides time (unless you want to do the calculation...) dispose() - cancels the requestAnimationFrame PROPERTIES frames - an array of frame numbers the Dynamo is acting on according to label, or startFrame, endFrame frame - the current frame of the Dynamo - this is sequential relative to frames    whereas the actual Sprite frame may be different as labels can specify non-consecutive frame numbers totalFrames - the total frames in frames (may be different than the Sprite's total frames) percentSpeed - get or set the percentage of the baseSpeed    this is what you should animate to speed up and slow down the sprite    this allows you to set the speed relative to other Sprites and Scrollers speed - get or set the speed of the sprite in frames per second baseSpeed - the start speed given in frames per second unless changed with this property    this affects the percentSpeed so usually it is not adjusted - but it can be paused - read only - whether the Dynamo is paused or not (by using the pause() method) EVENTS dispatches a change event when the Dynamo changes frame dispatches a loop event when the Dynamo loops (possibly in reverse) dispatches a pause event when the Dynamo is paused - could be delayed CLOSE ▲VIEW ▤
EXPAND 15503 zim.Accelerator = function(objects)
zim.Accelerator = function(objects)
Accelerator zim class extends a createjs.EventDispatcher DESCRIPTION An Accelerator lets you set percentSpeed properties of multiple objects such as zim.Scroller and zim.Dynamo objects A Dynamo object is a dynamic controller for a zim.Sprite object Both the Scroller and the Dynamo can be controlled with percentSpeed They can also be paused and paused over time An Accelerator object lets you control these from one place EXAMPLE
// assuming we have scroller1, scroller2 and a sprite // each of these would have a speed set so the scene animates nicely var accelerator = new zim.Accelerator([scroller1, scroller2, sprite]); // here we increase the speed then decrease the speed of the whole scene: zim.animate({target:accelerator, obj:{percentSpeed:200}, time:1000, rewind:true, ticker:false}); // here we change the speed of the whole scene based on the x position of the mouse // at the very left, the speed is -200 percent and at the right the speed is 200 percent // in the center, the speed is 0 - damping is optional but always looks better! var damp = new zim.Damp(accelerator.percentSpeed); zim.Ticker.add(function() {    var newSpeed = (stage.mouseX-stageW/2)/(stageW/2)*100*2;    accelerator.percentSpeed = damp.convert(newSpeed); }, stage);
PARAMETERS objects - (default null) registers zim.Scroller or zim.Dynamo objects the Accelerator    pass in a single object or an array of multiple objects METHODS add(objects) - registers zim.Scroller or zim.Dynamo objects with the Accelerator    pass in a single object or an array of multiple objects    returns the Accelerator object for chaining remove(objects) - unregisters a zim.Scroller or zim.Dynamo    pass in a single object or an array of multiple objects    returns the Accelerator object for chaining pause(state, time, frameNumber) - pause (default) or unpause all the objects added to the Accelerator    state - (default true) set to false to unpause the objects added to the Accelerator    time - (default 0) time in milliseconds to slow down to a speed of 0 and pause       the pause event and paused property will be set after the time has passed       time is ignored if a frameNumber is provided    frameNumber - (default null) get sprites to animate to the frameNumber (probably good for one sprite!)       setting this will make the scene ignore the time parameter above dispose() - calls dispose() on all the objects PROPERTIES percentSpeed - adjusts the speed relative to the baseSpeed of each items in the Accelerator    this can be dynamically changed to change all speeds relatively paused - whether the Accelerator is paused or not - only tracks if the pause() method is used items - an array of all objects added with add() CLOSE ▲VIEW ▤
EXPAND 15655 zim.Swiper = function(swipeOn, target, property, sensitivity, horizontal, min, max, damp, integer)
zim.Swiper = function(swipeOn, target, property, sensitivity, horizontal, min, max, damp, integer)
Swiper zim class - extends a createjs EventDispatcher DESCRIPTION Swiper lets you change a property of any object (with damping) by swiping. In a sense, it is like an invisible Slider. You pass in the DisplayObject to swipe on - stage, Container, Bitmap, etc. You pass in which object holds the property to animate and the property name. Then Swiper will change this property with damping based on a sensitivity you set. You can use horizontal or vertical but to do both, you need to make two Swiper objects. Originally made for controlling 3D objects like rotation and scale based on swiping a rectangle beneath the 3D object that is the same color as the stage. EXAMPLE
var circle = new zim.Circle(100, frame.green).center(stage); // will move circle twice as fast as swipe var swiper = new zim.Swiper(stage, circle, "x", 2); var man = new zim.Rectangle(50, 100, frame.brown).center(stage); // will move man up an down slowly within vertical bounds of stage var swiper = new zim.Swiper(man, man, "y", .5, false, 0, stageH-man.height);
PARAMETERS supports DUO - parameters or single object with properties below swipeOn - the DisplayObject to swipe on such as the stage or a Rectangle or Bitmap, etc. target - the object that holds the property that you want to change property - the property name as a String to change when swiping sensitivity - (default 1) the change in property is equal to the change in distance times the sensitivity    set to 2 to change the property twice as fast as the swipe    set to .5 to change the property half as fast as the swipe    set to .001 to change the property very little while swiping    set to -1 to go the opposite way (or -2, -.5, -.001, etc.) horizontal - default(true) set to false for vertical swiping (y) min - (default null) if specified, the property value will not go below this number max - (default null) if specified, the property value will not go above this number damp - (default .1) the damp value with 1 being no damping and 0 being no movement integer - (default false) set to true to round the property value METHODS immediate(val) - set the damping immediately to this value to avoid damping to value dispose() - remove listeners and Ticker PROPERTIES target - get or set the target for the property that you are changing property - get or set the String property name that is being damped desiredValue - the current value that the swiper is damping towards enabled (default true) - set to false to disable the Swiper and visa versa EVENTS dispatches a swipedown event when swipe is started dispatches a swipemove event when swipe is moving dispatches a swipeup event when swipe is ended CLOSE ▲VIEW ▤
EXPAND 15827 zim.MotionController = function(container, target, type, speed, axis, rect, map, diagonal, damp, flip, moveThreshold, stickThreshold)
zim.MotionController = function(container, target, type, speed, axis, rect, map, diagonal, damp, flip, moveThreshold, stickThreshold)
MotionController zim class - extends a createjs EventDispatcher DESCRIPTION MotionController lets you control an object (target) in a container (like the stage) with "mousedown", "mousemove", "keydown", "gamebutton", "gamestick" or "manual" modes (types) For instance, you can control a player in a game or a butterfly in field EXAMPLE
var circle = new zim.Circle(40, frame.green).center(stage); var controller = new zim.MotionController(stage, circle); // circle moves to mouse press position with damping var rect = new zim.Rectangle(50, 30, frame.green).centerReg(stage); var controller = new zim.MotionController({    container:stage,    target:rect,    type:"keydown",    diagonal:true,    damp:.1,    rotate:true }); SEE: http://zimjs.com/code/controller for more examples
PARAMETERS supports DUO - parameters or single object with properties below container - the Container the target is in - the stage is most likely fine    this must be on the stage (or be the stage) when the MotionController is made target - the object you want to control type - (default "mousedown") by default will move to where you press in the container    set to "mousemove" to have the target follow the mouse movement    set to "keydown" to use keys to control the target (see map parameter)    set to "gamebutton" to use gamepad buttons to control the target (see map parameter)    set to "gamestick" to use gamepad stick(s) to control the target (see map parameter)    set to "swipe" to use swipe to control the target    set to "manual" to set your own with myController.convert() or myController.x and myController.y properties speed - (default 7) pixels it will move each tick, keypress buttonpress, swipe, etc. axis - (default "both") or "horizontal" or "vertical" (see diagonal parameter) rect - (default null) a createjs.Rectangle or object with x, y, width and height properties    the registration point of the target will stay within these bounds map - (default null) an Array with left, right, up, down values (or array of values) as outlined below    - (default [[65,37], [68,39], [87,38], [83,40]] when type == "keydown") these are ADWS and arrows    - (default [14, 15, 12, 13] when type == "gamebutton") these are DPAD_LEFT, DPAD_RIGHT, DPAD_UP, DPAD_DOWN on a gamepad    - (default [14, 15, 7, 6] when type == "gamebutton" and firstPerson == true) these are DPAD_LEFT, DPAD_RIGHT, RT, LT on a gamepad    - (default [0, 0, 1, 1] when type == "gamestick") these are LSX, LSX, LSY, LSY on a gamepad    - (default [[0,2], [0,2], [1], [1]] when type == "gamestick" and firstPerson == true) turn with left or right stick X, advance with left stick Y       use [[0,2], [0,2], [1,3], [1,3]] for both sticks (first stick motion overrides second stick)       Note: MotionController will only use the 0 and the 2 index for speed as the sticks use -1 to 1 values       so you could not go only left with one stick and only right with another       Note: stick values may exceed -1 and 1 on occasion (see also stickThreshold) diagonal - (default true) set to false to lock movement to horizontal or vertical only damp - (default .1) the damp value with 1 being no damping and 0 being no movement flip - (default null) set to "horizontal", "vertical" or "both" to flip the target when in negative direction rotate - (default false) set to true to rotate - starts facing right and rotates in direction of movement constant - (default false) set to true to remove keyup or gamebutton up and always move in direction last key or button press firstPerson - (default false) set to true for keydown, gamebutton and gamecontroller to go to first person mode    in firstPerson, the direction starts facing up and by default up arrow is speed forward and left and right change rotation    speed will be damped by damp parameter - also, map parameter changes if in firstPerson mode - see map parameter turnSpeed - (default speed*.4) - the speed for turning in firstPerson mode - will be damped but damp parameter moveThreshold - (default 5) pixels negative or positive to treat damped motion as stopped stickThreshold - (default .2) gamepad stick axes values are from -1 to 1 but there is a lot of noise    so consider within +- stickThreshold as no motion 0 METHODS immediate(x, y) - set the damping immediately to this value to avoid damping to value convert(x, y) - for manual mode, pass in x and y and damping and rotation will be calculated dispose() - remove listeners and Ticker, Swiper and GamePad, where applicable PROPERTIES target - the target for the property that you are controlling x - the desired x position of the target before damping is applied (use this for manual imput - or convert() method) y - the desired y position of the target before damping is applied (use this for manual imput - or convert() method) dirX - the x direction the player is moving dirY - the x direction the player is moving dampX - reference to the horizonal Damp object dampY - reference to the vertical Damp object speed - the speed setting which will be multiplied by direction turnSpeed - the turn speed for firstPerson mode axis - the axis (horizontal, vertical or both); moving - get Boolean as to whether the target is moving (within moveThreshold) movingX - get Boolean as to whether the target is moving in x direction (within moveThreshold) movingY - get Boolean as to whether the target is moving in y direction (within moveThreshold) gamepad - reference to GamePad object if applicable - allows you to use this for more events like jumping, shooting, etc. moveThreshold - the maximum value (+-) within which movement is considered stopped stickThreshold - the maximum value (+-) within which the gamepad stick axes values are considered 0 enabled - set to false to disable or true to enable MotionController - can toggle with enabled = !enabled EVENTS dispatches a change event with dir as property of event object    that will hold "left", "right", "up", "down", null (no direction) CLOSE ▲VIEW ▤
EXPAND 16335 zim.GamePad = function()
zim.GamePad = function()
GamePad zim class - extends a createjs EventDispatcher DESCRIPTION GamePad connects to Game Controllers as inputs using the HTML navigator.getGamepads API Dispatches buttondown and buttonup events for the following common buttons: "A","B","X","Y", (or for Triangle, Circle, Cross and Square) "LB","RB","LT","RT", (for left bumper, right bumper, left trigger, right trigger) "BACK","START", "LS","RS", (for left stick press, right stick press) "DPAD_UP","DPAD_DOWN","DPAD_LEFT","DPAD_RIGHT" The event object will have a button property telling which button is pressed using the string values above Dispatches a data event constantly to get axes data for the sticks (and constant data for the buttons) The event object in this case will have axes and buttons properties The axes property is an array of four numbers for the left and right stick's x and y properies (-1 to 1) EXAMPLE
var gamepad = new zim.GamePad(); gamepad.on("buttondown", function(e) {    // only fires once per button press (unlike constant keydown event)    zog(e.button); // LT for instance for Left trigger    if (e.button == "LT") {       zog("left trigger is down");    }    zog(e.buttonCode); // 6    if (e.buttonCode == zim.GamePad.LT) {       zog("another way to do catch left trigger down");    } }); gamepad.on("buttonup", function(e) {    zog(e.button); // LT for instance for Left trigger } gamepad.on("data", function(e) {    // fires constantly in a requestAnimationFrame    zog(e.axes[0]); // left stick x or horizontal data from -1 to 1 (lots of decimal noise)    zog(e.axes[zim.GamePad.LTX]); // another way of accessing left stick x    zog(e.buttons[9]); // true or false depending on if the START button is pressed    zog(e.buttons[zim.GamePad.START]); another way to find if the START button is pressed });
METHODS dispose() - removes all listeners and cancels requestAnimationFrame PROPERTIES connected - Boolean true if connected and false if not connected (may need to press key, etc) currentIndex - get or set the index of the controller    gives multiple controller support - make two GameController objects and set different indexes data - object that holds buttons (raw data - slightly different than buttons below) and axes properties buttons - an array of Booleans as to whether the button is pressed    the order of the buttons match the order of the constants below constants: A,B,X,Y,LB,RB,LT,RT,BACK,START,LS,RS,DPAD_UP,DPAD_DOWN,DPAD_LEFT,DPAD_RIGHT    zim.GamePad.A == 0    zim.GamePad.B == 1, etc. up to    zim.GamePad.DPAD_RIGHT == 15 axes - an array of four stick values from -1 to 1    for left x and y and right x and y values (or horizontal and vertical values) constants: LSX,LSY,RSX,RSY    zim.GamePad.LSX == 0    zim.GamePad.LSY == 1    zim.GamePad.RSX == 2    zim.GamePad.RSY == 3 EVENTS dispatches a gamepadconnected and gamepaddisconnected when connected and disconnected    these have an event object with index and id properties - the index and id may not work in chrome dispatches a buttondown event with button and buttonCode properties dispatches a buttonup event with button and buttonCode properties dispatches a data event with axes and buttons array properties    these can be handled as outlined in the description and examples CLOSE ▲VIEW ▤
ZIM FRAME
EXPAND 16503 zim.Frame = function(scaling, width, height, color, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, handleTabs, tabHighlight, tabHighlightScale, tabHighlightAlpha, tabHighlightTime, tabHighlightObject)
zim.Frame = function(scaling, width, height, color, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, handleTabs, tabHighlight, tabHighlightScale, tabHighlightAlpha, tabHighlightTime, tabHighlightObject)
Frame zim class - extends a createjs EventDispatcher DESCRIPTION Frame creates a canvas and stage. Frame lets you decide how you want your stage to scale. It also provides events for ready, resizing and orientation change as well as a way to remake the canvas if necessary. Frame handles loading Bitmap and Sound assets by wrapping PreloadJS see http://zimjs.com/code/frame.html for sample templates using Frame. EXAMPLE
var frame = new zim.Frame("fit", 1024, 768, "#CCC"); frame.on("ready", function() {    var stage = frame.stage;    var stageW = frame.width;    var stageH = frame.height;    // code here - or optionally load assets    frame.loadAssets("image.png");    frame.on("complete", function() {       // app code goes here if waiting for assets       var image = frame.asset("image.png");       image.center(stage);       stage.update();    }); // end asset complete    // OR for multiple assets in an assets folder:    frame.loadAssets(["sound.mp3", "spriteData.json", "spriteImage.png"], "assets/");    frame.on("complete", function() {       // app code goes here if waiting for assets       var soundInstance = frame.asset("sound.mp3").play();       // later soundInstance.paused = true; // etc.       var sprite = new zim.Sprite({json:frame.asset("spriteData.json")});       sprite.center(stage).run(2000);       // the image for the sprite is specified in the JSON       // but we still want to load it so it is in the loadAssets()       // and the JSON data will take care of adding it to the sprite       stage.update();    }); // end asset complete }); // end of ready
PARAMETERS supports DUO - parameters or single object with properties below scaling - (default "full") can have values as follows    "fit" sets canvas and stage to dimensions and scales to fit inside window size    "outside" sets canvas and stage to dimensions and scales to fit outside window size    "full" sets stage to window size with no scaling    "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling FIT and OUTSIDE: width and height will set the stage width and height and the canvas is then scaled this is handy because all your dimensions are set to start FULL: width and height are ignored when scaling as these are set to the window width and height TAG: if width and height are provided then the canvas and stage will be these dimensions if width and height are not provided in tag mode, the canvas and stage will take the dimensions of the tag this means, the tag must have some sort of width and height dimensions set or it will be really big! NOTE in tag mode, the tag must exist before running Frame - so use a window DOMContentLoaded event color - (default null) the background color of the frame (any CSS value) - or just set in styles rollover - (default true) activates rollovers touch - (default true) activates touch on mobile scrollTop - (default true) activates scrolling on older apple devices to hide the url bar align - (default "center") for fit and outside, the horizontal alignment "left", "center/middle", "right" valign - (default "center") for fit and outside, the vertical alignment "top", "center/middle", "bottom" canvasID - (default "myCanvas") will be set to tagIDCanvas if a tagID is provided - eg. scaling=test, canvasID=testCanvas rollPerSecond - (default 20) times per second rollover is activated (if rollover parameter is true) delay - (default 500) time in milliseconds to resize ONCE MORE after a orientation change    unfortunately, some older devices may have a delay (after a window resize event) in reporting screen sizes    so a time of 500 or so might catch the dimension change then call the frame resize event with the proper dimensions    setting this may cause a flash on faster devices that do not need it - so it is a no win situation    this effects only full mode with the Layout class and they can always refresh a screen if it is not quite right in the changed orientation handleTabs - (default true) prevents default behaviour from the tab key so that frame.tabOrder overrides browser tabbing.    setting to false will still allow frame.tabOrder to work but will not prevent default tab action tabHighlight - (default true) highlights the object being put in focus by a tab if handleTabs is true or frame.tab() call    set to false to not highlight objects receiving tab focus tabHighlightScale - (default .8) scale the highlight relative to the object with tab focus if handleTabs is set tabHighlightAlpha - (default .3) alpha of the tabHighlightObject if handleTabs is set tabHighlightTime - (default 700ms) milliseconds to show tabHightlightObject if handleTabs is set tabHighlightObject - (default Circle(100, "white")) set to a display object - including animated objects PROPERTIES stage - read only reference to the createjs stage - to change run remakeCanvas()    frame gives the stage read only stage.width and stage.height properties canvas - a reference to the frame's canvas tag tag - the containing tag if scaling is set to an HTML tag id (else null) isLoading - a Boolean to indicate whether loadAssets() is currently loading assets width - read only reference to the stage width - to change run remakeCanvas() height - read only reference to the stage height - to change run remakeCanvas() scale - read only returns the scale of the canvas - will return 1 for full and tag scale modes orientation - "vertical" or "horizontal" (updated live with orientation change) tabOrder - get or set an array with the order in which components will receive focus if component uses keys    this is new and currently works with Steppers and Tabs    currently, there is no way to see that a component has focus - options for this may be added in the future    there is no screen reader support as of yet but is under consideration    apps made with ZIM are often very visual so support for visually impared is perhaps less needed zil - reference to zil events that stop canvas from shifting colors: orange, green, pink, blue, brown, yellow, silver, tin, grey, lighter, light, dark, darker, purple, white, black, clear (0 alpha), faint (.01 alpha) tabObject - the object for tab focus if handleTabs is true METHODS loadAssets(file||[file, file, etc.], path, xhr, time)    pass in an file (String) or an array of files to assets,    pass in an optional path to directory and XHR (default false)    asset types (from CreateJS PreloadJS): Image, JSON, Sound, SVG, Text, XML    time defaults to 0 and is the minimum number of milliseconds for the complete event to trigger    use this for testing or to always have time to show a loading message    RETURNS: a zim.Queue object that can be used for control with multiple loadAssets calls    Each zim.Queue will trigger progress, assetload and complete events    Each zim.Queue will have a preload property to the CreateJS LoadQueue and an isLoading property    The frame also has these events and properties but acts for all loading - so be careful!    It is recommended to use the zim.Queue any time you use multiple LoadAssets() calls at the same time    You still access assets with frame.asset() as outlined below whether you use the zim.Queue or not asset(file) - access a loaded asset based on file string (not including path)    if the asset is an image then this is a zim.Bitmap and you add it to the stage    if the asset is a sound then use asset(file).play();    or can pass in a configuration object in play    with the following properties (see CreateJS SoundJS docs)    delay, offset, loop, volume, pan, startTime, interrupt and duration    asset(file).play({volume:.5, pan:-1, loop:2});    this returns createjs sound instance which can also be manipulated    to stop the sound or set its volume dynamically, etc.    if the asset is anything else, then it is what it is! makeCircles(radius) - returns a createjs.Shape with the ZIM Circles (centered reg) remakeCanvas(width, height) - removes old canvas and makes a new one and a new stage    will have to set your local stage, stageW and stageH variables again dispose() - removes canvas, resize listener and stage EVENTS "ready" - fired when the stage is made "progress" - fires constantly as assets are loaded with loadAssets() to represent overall load progress "assetload" - fired when an asset loaded with loadAssets() has loaded (use asset property of event object - with type and id properties) "complete" - fired when all assets loaded with loadAssets() are loaded (then use frame.asset()) "error" - fired when there is a problem loading an asset with loadAssets() "resize" - fired on resize of screen "orientation" - fired on orientation change "keydown" - fires on keydown - just like the window keydown event with eventObject.keyCode, etc. "keyup" - fires on keyup - just like the window keyup event with eventObject.keyCode, etc. CLOSE ▲VIEW ▤BITS
ZIM META
EXPAND 17125 zim.DISTILL
zim.DISTILL
distill zim constant DESCRIPTION Distill allows you to track which functions you are using in your app and create a custom minified js file with just those functions. Set zim.DISTILL to true to record which functions your are using in your app - default is false. While running your app, call the zim.distill() function take the results to http://zimjs.com/code/distill to create a minified distilled file. EXAMPLE
// at the start of your code zim.DISTILL = true; // at the end of your code (once everything has run) // this means we may have to wait for events to happen, etc. zim.distill(); // this will log to the console a series of numbers // separated by spaces representing the functions used 1 6 81 81 79 75 77 75 55 54 52 53 55 54 52 53 55 54 52 53 42 80 74 46 46 46 80 74 46 46 46 55 54 52 53 55 54 52 53 55 54 52 53 42 80 74 // copy these into the zim DISTILL form field // to get the minified JavaScript for these functions // NOTE: Distill will not duplicate the functions // data duplication is left in for statistical purposes
CLOSE ▲VIEW ▤
EXPAND 17163 zim.distill = function()
zim.distill = function()
distill zim function DESCRIPTION Call the distill function to display which zim functions you are using in your app. You must set zim.DISTILL constant to true before using (set at the start of your app). After running through your app, call zim.distill() and see the console (F12). Take the results to http://zimjs.com/code/distill to create a minified distilled js file. You would then host this js file yourself or include it in your mobile files, etc. NOTE zim.distill() only records functions that have been used so you may have functions still to be used in your app. You will want to make sure you call distill() after you have used all your functions, for instance, on a restart event, etc. NOTE zim.distill() will not be available from your distilled file. EXAMPLE
// at the start of your code zim.DISTILL = true; // at the end of your code (once everything has run) // this means we may have to wait for events to happen, etc. zim.distill(); // this will log to the console a series of numbers // separated by spaces representing the functions used 1 6 81 81 79 75 77 75 55 54 52 53 55 54 52 53 55 54 52 53 42 80 74 46 46 46 80 74 46 46 46 55 54 52 53 55 54 52 53 55 54 52 53 42 80 74 // copy these into the zim DISTILL form field // to get the minified JavaScript for these functions // NOTE: Distill will not duplicate the functions // data duplication is left in for statistical purposes
CLOSE ▲VIEW ▤
EXPAND 17215 zimify = function(obj)
zimify = function(obj)
zimify global function DESCRIPTION Short-cut for zim.addDisplayMembers(obj). Used to add all the ZIM Create module functions to obj. Handy for adapting CreateJS objects that are exported from Adobe Animate like createjs.Shape(), createjs.Sprite(), createjs.MovieClip() EXAMPLE
var cjsShape = new lib.Shape1(); // include the js from Adobe Animate zimify(cjsShape); cjsShape.center(stage); cjsShape.drag(); // otherwise would have to use: zim.center(cjsShape, stage); zim.drag(cjsShape); // etc.
RETURNS - obj for chaining CLOSE ▲VIEW ▤
EXPAND 17249 zim.Wonder = function(wid, client, app, notes, server)
zim.Wonder = function(wid, client, app, notes, server)
Wonder zim class DESCRIPTION Wonder sends counts, times, and orders to a server for user testing or statistical purposes. Go to http://zimjs.com/code/wonder/ to get a Wonder ID (wid) and set up Wonder stats with ZIM or make up your own wid and use your own server script to collect data. See the zim Wonder site for a sample script to collect data. NOTE all records at ZIM are archived NEW YEARS DAY and kept for a year after that. Service is provided as is and ZIM and Dan Zen are not responsible for lost data. USAGE count will count things like app loads, button clicks within an app, how many monsters they killed time will tell you the time the user took to do something - like solve a puzzle, or locate the witch order will record the order items were done - which section did they go to first, second, third, etc. EXAMPLE
// make a Wonder object // wonderID is e-mailed to you when you sign up // client is your client's name that you provide // app is the app for which you are recording data // you can also pass an optional note var wonder = new zim.Wonder("wonderID", "client", "app"); // COUNT EXAMPLE // for this example we count times a button is pressed var button = new zim.Button("CLICK"); button.center(stage); button.on("click", function(){    // records an entry for this keyword in your stats    // along with date, time, session, etc.    wonder.count("wow"); }); // TIME EXAMPLE // assuming we have our Wonder object from above // (you only need one Wonder object) // start the timer counting for a keyword called "test" // this will record nothing until you timeEnd() // or you timeStart() again // you can also timePause() and timeUnpause() // see DOCS for more functionality and information wonder.timeStart("test"); // add the circle var circle = new zim.Circle(100, "red"); circle.center(stage); circle.drag(); circle.on("pressup", function(){    if (circle.hitTestRect(square)) {       // if the shapes are hitting then end the timer       // this will send data to your Wonder report       wonder.timeEnd("test");    } }); // add the square to a random location on stage var square = new zim.Rectangle(100, "yellow"); stage.addChild(square); square.x = zim.rand(stageW-square.width); square.y = zim.rand(stageH-square.height); // ORDER EXAMPLE // assuming we have our Wonder object from above // (you only need one Wonder object) // make tabs var tabs = new zim.Tabs(400, 40, ["MOUSE", "CAT", "MONKEY"]); tabs.selectedIndex = -1; // start with no selection tabs.center(stage); var count = 0; // perhaps get the first four presses tabs.on("change", function(){    // record which tab was pressed    // this gets stored under keyword animal    wonder.order("animal", tabs.text);    count++;    // turn the order recording off for "animal"    if (count == 4) wonder.orderOff("animal"); });
PARAMETERS supports DUO - parameters or single object with properties below wid - string with your company wonder ID for example z14i46m3z29     this is the ID you are e-mailed when you sign up or sign in with your company name     this is NOT your company name that you log into Wonder with     NOTE: recording to a non-registered wid on the ZIM server will not work and there is no error message client - the client the app is for - if it is for your company, just put your company app - the app or site the Wonder stats are for server - a server with zim Wonder running    Note: the default value for the server parameter has been removed as it risks being out-of-date    If you have signed up for ZIM Wonder at http://zimjs.com/code/wonder/ then    import http://d309knd7es5f10.cloudfront.net/zimserver_url.js in your code (script tag up top)    this gives a global zimWonderURL variable to pass into the server parameter    the zimserver_url.js script will always hold the latest domain:port for the zim server notes - (default null) any extra notes like any user data (limit 256 characters as it is stored each record) METHODS count(keyword) - sends a line to the server script with the given keyword as well as date and time timeStart(keyword) - starts timing for the specified keyword (nothing sent to server yet) timePause(keyword) - pauses the timing for this keyword timeUnpause(keyword) - unpauses the timing for this keyword timeEnd(keyword) - ends timing for the specific keyword and sends the time to the server    NOTE: if the user exits the app (or leaves page) nothing gets sent to the server        due to unreliable beforeUnload events in the HTML world (otherwise all this would be batched) order(keyword, item) - sends a line to the server for this item along with a unique order id for the keyword for the user countOff(keyword) - prevents counts from being sent for this keyword countOn(keyword) - allows counts from being sent for this keyword (default) timeOff(keyword) - prevents sending time to the server for this keyword timeOn(keyword) - allows sending time to the server for this keyword (default) orderOff(keyword) - prevents sending orders to the server for this keyword orderOn(keyword) - allows sending orders for this keyword (default) dispose() - clear any event listeners, etc. CLOSE ▲VIEW ▤