zim.

     ZIM DOCS

    Here is a video Intro to the docs.
    See ZIM zim_6.7.4 for code, updates for changes and text for raw docs.

    The main ZIM Canvas modules are DISPLAY, METHODS, CONTROLS and FRAME.

    ZIM WRAPEXPAND 00014 ▶︎ zog(item1, item2, etc.)         ~ log
    CLOSE ▲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 ▤BITS EXPAND 00040 ▶︎ zid(string)                     ~ id
    CLOSE ▲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 ▤EXPAND 00064 ▶︎ zss(string)                     ~ css
    CLOSE ▲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
    CLOSE ▲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
    CLOSE ▲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
    CLOSE ▲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 ▤BITS EXPAND 00190 ▶︎ zop(e)                          ~ stop
    CLOSE ▲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
    CLOSE ▲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 = zil();
    // 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
    CLOSE ▲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
    CLOSE ▲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(test, 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

    function test(a,b,c){
       var sig = "a,b,c";
       var duo; if (duo = zob(test, 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 EXPAND 00440 ▶︎ zik(Array|function|object)      ~ pick
    CLOSE ▲zik(Array|function|object)      ~ pick
    zik

    global function

    DESCRIPTION

    Receives what is called a ZIM VEE value which is a way of providing options.
    zik() will then randomly pick from the options and return a value.
    The ZIM VEE value can be the following:
    1. an Array of values to pick from - eg. ["red", "green", "blue"]
    2. a Function that returns a value - eg. function(){return Date.now();}
    3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required
    4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive
    5. a single value such as a Number, String, zim.Rectangle(), etc. this just passes through unchanged
    6. an object literal with a property of noZik and a value such as an Array or Function that zik will not process
    NOTE the ZIM RAND object gets passed to zim.rand() directly so read about params there - integer defaults to false for zik()

    Think of zik() as a random option filter for a parameter that can be passed and then picked later with zik()
    This is different than executing right away although you can use zik() directly for that
    Used by zim.interval, zim.move, zim.animate and zim.Emitter
    zik() is recursive so it will zik() the answer from an Array or Function

    EXAMPLE

    var loopCount = [1,2,3];
    loopCount = zik(loopCount); // loopCount is 1, 2, or 3
    // if just simple like this, could use loopCount = zim.shuffle(loopCount)[0];
    // but then would have to check first if loopCount is an array rather than single value

    var rotation = {min:10, max:20, integer:false, negative:true};
    // an example of a RAND object - this will give values between -20 and -10 or 10 and 20
    // rotation now holds an object as to how to pick its value
    // this can be passed into a zim.Emitter() for instance
    // which will make multiple copies and rotate them based on zik()
    // or this can be passed into an animation object
    // and then into zim.Emitter() for the animate parameter

    var emitter = new zim.Emitter({
       obj:new zim.Rectangle(),
       random:[rotation:rotation] // the emitter will use zik() to pick a rotation each particle
    });

    function age() {
       // assuming user.age is some input value that exists
       if (user.age >= 18) return ["a", "b", ["c","d"]];
       else return ["e", "f"];
    }
    // below will be a, b, c or d if user is 18+ with a and b having more of a chance
    // or e or f if not over 18
    var show = zik(age);

    // here we pass an array through without processing the array with zik:
    zik({noZik:[1,2,3,4,5]}); // result is [1,2,3,4,5]

    PARAMETERS

    value - an Array to randomly pick from or a Function yielding a return value
       or an Object literal to pick a random number as follows:
       {min:0, max:20, integer:false, negative:false} - this RAND object is passes through to zim.rand()
       See zim.rand() for defaults and parameter descriptions
       NOTE: one change in defaults: the RAND object integer parameter defaults to false where zim.rand() defaults to true
       if you just want an array or function to pass through unprocessed, use {noZik:value} where the value is the array or function

    RETURNS a random element from the Array or a Function result if a function is passed in
    or a Number from Object instructions or the value that was given
    and the value from an Array or Function is passed through zik() again, etc. until a single value is returned

    CLOSE ▲VIEW ▤
    ZIM CODEEXPAND 00538 ▶︎ shuffle(array)
    CLOSE ▲shuffle(array)
    shuffle

    zim function

    DESCRIPTION

    Randomly shuffles elements of an array.
    Actually changes the original array (and also returns it).

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var array = ["happy", "sad", "spooked"];
    var randomFromArray = shuffle(array)[0];
    // this will be randomized each time it is run

    EXAMPLE

    var array = 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 00581 ▶︎ rand(a, b, integer, negative)
    CLOSE ▲rand(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().

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var speed = rand(10,20); // 10, 11, 12... 18, 19 or 20

    var colors = ["blue", "yellow", "green"];
    var color = colors[rand(colors.length-1)]; // note the length-1

    // the equivalent of:
    var color = colors[Math.floor(Math.random()*colors.length)];

    // OR a technique often used without using rand():
    var color = shuffle(colors)[0];

    // here we get a speed that is either from 5 to 10 or -5 to -10
    var speed = rand(5,10,null,true);

    PARAMETERS

    a - the first Number for the range
       if a and b are not provided, 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 00649 ▶︎ loop(obj, call, reverse, step, start, end)
    CLOSE ▲loop(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)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var container = new Container();
    loop(1000, function(i) { // gets passed an index i, totalLoops 1000, startIndex 0, endIndex 999, obj 1000
       // make 1000 rectangles
       container.addChild(new Rectangle());
    });
    stage.addChild(container);

    // to continue or break from loop have the function return the string "continue" or "break"
    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];
    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 = 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 00789 ▶︎ timeout(time, call)
    CLOSE ▲timeout(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, timeout has it first
    so that it is consistent with loop() and the CreateJS on() method

    NOTE to clear a timeout you use returnID.clear() - different than window.clearTimeout(returnID)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    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 = timeout(1000, function() {
       zog("you lose!");
       button.enabled = false;
    });
    var button = new Button().center(stage);
    button.on("click", function() {
       zog("you win!");
       timeout.clear();
    });

    PARAMETERS

    time - |ZIM VEE| milliseconds to wait until function is called
       or pass in a ZIM VEE value and zik() will pick a time
       ZIM VEE value is an Array of choices or a Function or an Object literal with min, max, integer properties (RAND object)
    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
    done - true if finished

    CLOSE ▲VIEW ▤BITS EXPAND 00887 ▶︎ interval(time, call, total, immediate)
    CLOSE ▲interval(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, interval has it first
    so that it is consistent with loop() and the CreateJS on() method

    NOTE to clear a interval you use intervalObj.clear() - different than window.clearInterval(returnID)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    interval(1000, function(){
       circle.x += 100;
       stage.upate();
    });
    // every second the circle will move 100 pixels
    // if you want smooth movement, use:

    Ticker.add(function() {
       circle.x += 100; // no need for stage.update()
    });

    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:
    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:
    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 = interval(1000, function() {
       zog("counting " + interval.count); // starts counting at 1
    });
    var button = new Button({label:"STOP", toggle:"START"}).center(stage);
    button.on("click", function(){interval.pause(button.toggled);});

    RANDOM intervals with zik()
    interval({min:200, max:800}, dropBombs); // bombs will fall at different rates between 200ms and 800ms
    interval([1000, 2000], dropBombs); // bombs will fall at either 1000 or 2000 ms
    var count = 1;
    function increase() {return ++count*1000}
    interval(increase, dropBombs); // bombs will fall at 1000, then again after 2000 more ms and 3000 ms more after that, etc.

    PARAMETERS

    time - |ZIM VEE| (default 1000) milliseconds for the interval (delay until the function runs - again and again)
       or pass in a ZIM VEE value and zik() will pick a time
       ZIM VEE value is an Array of choices or a Function or an Object literal with min, max, integer properties (RAND object)
    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 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, immediate) - (default true) will pause the interval - set to false to unpause the interval
       immediate will make the interval function run right away when unpausing (no effect when pausing)
    clear() - will clear the interval

    PROPERTIES - of ZIM intervalObject

    time - |ZIM VEE| get or set the time for the interval (see time parameter)
    count - get the number of times the interval has run (if immediate is true, the first count is 0)
    total - get or set the number of times the interval will run if the total parameter is set - otherwise -1 for infinite
    paused - get the paused state of the interval (see pause() method)
    pauseTimeLeft - if paused, get how much time is left once unpaused

    CLOSE ▲VIEW ▤BITS EXPAND 01047 ▶︎ copy(obj)
    CLOSE ▲copy(obj)
    copy

    zim function

    DESCRIPTION

    Copies arrays and basic objects:
    modified 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".
    copy(obj) returns a new object so both will work independently
    and after obj.prop = "new"; obj2.prop would still be "val".

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var obj = {hair:blue, cars:["audi", "honda"]};
    var cop = 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

    // copy with clone for cloneable objects
    // without the second parameter as true these obj[0] and obj2[0] would be the same
    // and when we do the second addTo it would just move the circle to the second position
    var obj = [
       new Circle(20,frame.green),
       new Rectangle(30,30,frame.green),
       new Triangle(40,40,40,frame.green)
    ];
    var obj2 = copy(obj, true); // copy and clone
    obj[0].addTo(stage).pos(100, 200);
    obj2[0].addTo(stage).pos(300, 400);

    PARAMETERS

    obj - the object to copy
    clone - (default false) set to true to clone any cloneable object while copying

    RETURNS a new Object

    CLOSE ▲VIEW ▤EXPAND 01113 ▶︎ arraysEqual(a, b, strict)
    CLOSE ▲arraysEqual(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)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var one = [1,2,"wow",[3,4]];
    var two = [1,2,"wow",[3,4]];
    zog(arraysEqual(one, two)); // true
    one[3][1] = 5;
    zog(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 01160 ▶︎ isEmpty(obj)
    CLOSE ▲isEmpty(obj)
    isEmpty

    zim function

    DESCRIPTION

    returns whether an object literal is empty

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var o = {};
    zog( isEmpty(o) ); // true
    o.test = 9;
    zog( isEmpty(o) ); // false

    PARAMETERS

    obj - the object literal to test

    RETURNS a Boolean

    CLOSE ▲VIEW ▤EXPAND 01193 ▶︎ isJSON(str)
    CLOSE ▲isJSON(str)
    isJSON

    zim function

    DESCRIPTION

    returns whether a string is a JSON string

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var s = '{"age":7,"name":"Dan Zen"}';
    zog( isJSON(s) ); // true
    var b = "hello";
    zog( isJSON(b) ); // false

    PARAMETERS

    str - the string to test

    RETURNS a Boolean

    CLOSE ▲VIEW ▤EXPAND 01225 ▶︎ merge(objects)
    CLOSE ▲merge(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var one = {food:"chocolate"};
    var two = {drink:"milk"};
    var tri = 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 01263 ▶︎ decimals(num, places, addZeros, includeZero, time)
    CLOSE ▲decimals(num, places, addZeros, includeZero, time)
    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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var score = 1.234;
    score = decimals(score);
    zog(score); // 1.2
    zog(decimals(1.8345, 2)); // 1.83
    zog(decimals(123,-1)); // 120
    zog(decimals(2.3,2,true)); // 2.30
    zog(decimals(3,-2,true)); // 03
    zog(decimals(11,-2,true)); // 11
    zog(decimals(11,-3,true)); // 011
    zog(decimals(12,-1,true,time)); // 0:12

    PARAMETERS

    num - the Number to operate on
    places - (default 1) how many decimals to include (negative for left of decimal place)
    addZeros - (default 0) set to number of places to fill in zeros after decimal (and return String)
    addZerosBefore - (default 0) set to number of places to fill in zeros before decimal (and return String)
    includeZero - (default true) set to false to always have zero just be 0 without any extra zeros
    time - (default false) just a quick swap of : for . to handle minutes and seconds (not hours)

    RETURNS a rounded Number or a String if addZeros, addZerosBefore or time is true

    CLOSE ▲VIEW ▤EXPAND 01348 ▶︎ sign(num)
    CLOSE ▲sign(num)
    sign

    zim function

    DESCRIPTION

    returns -1, 0 or 1 depending on whether the number is less than, equal to or greater than 0

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var speed = 20;
    zog(sign(speed)); // 1

    var speed = 0;
    zog(sign(speed)); // 0

    var speed = -20;
    zog(sSign(speed)); // -1

    PARAMETERS

    num - the Number to operate on

    RETURNS -1, 0 or 1

    CLOSE ▲VIEW ▤EXPAND 01381 ▶︎ constrain(num, min, max, negative)
    CLOSE ▲constrain(num, min, max, negative)
    constrain

    zim function

    DESCRIPTION

    returns a number constrained to min and max

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var cirle.x = constrain(circle.radius, stageW-circle.radius);
    // circle.x will not be smaller than the radius or bigger than stageW-radius

    var speed = 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 01424 ▶︎ dist(x1, y1, x2, y2)
    CLOSE ▲dist(x1, y1, x2, y2)
    dist

    zim function

    DESCRIPTION

    Calculates the distance between two points.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var distance = 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 01454 ▶︎ angle(x1, y1, x2, y2)
    CLOSE ▲angle(x1, y1, x2, y2)
    angle

    zim function

    DESCRIPTION

    Calculates the angle between two points relative to the positive x axis

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var angle = angle(stageW/2, stageH/2, stageW/2+100, stageH/2+100); // 45
    // angle from center of stage to 100, 100 to the right and down from the center of the stage

    var angle2 = angle(stageW/2, stageH/2, stageW/2-100, stageH/2+100); // 135

    var angle3 = angle(stageW/2, stageH/2, stageW/2+100, stageH/2-100); // 315

    PARAMETERS

    x1, y1 - first point x and y
       unless no second point in which case x1, y1 will be second point and first point will be 0, 0
    x2, y2 - second point x and y

    RETURNS a positive Number that is the angle between first and second point relative to positive x axis

    CLOSE ▲VIEW ▤EXPAND 01489 ▶︎ makeID(length, type, letterCase)
    CLOSE ▲makeID(length, type, letterCase)
    makeID

    zim function

    DESCRIPTION

    makes a random letter, number or mixed id of specified length

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var id1 = makeID(); // five random letters and numbers (starts with letter)
    var id2 = makeID(null, "string"); // five random uppercase letters
    var id3 = makeID(10, "number"); // ten random numbers
    var id4 = 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 01549 ▶︎ smoothStep(min, max, value)
    CLOSE ▲smoothStep(min, max, value)
    smoothStep

    zim function

    DESCRIPTION

    smoothStep takes an input value and outputs a value between 0 and 1
    that represents a transition between the min and max with easing at both ends.
    If you want the easing to be more pronounced, then reduce difference between min and max.
    If the value falls outside the min or max then it is set to the min or max.
    Remember the return value is between 0 and 1 so you can multiply by max-min and add it to min
    to get a value at the original scale.
    Used to make blobs with Noise(): http://zimjs.com/code/noise/blobs.html

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // here we use smoothStep to make a gradient between black and white
    // not an even one right across but a gradient across a transition zone of 40-100

    // create an empty Bitmap size 200, 200 and center it on the stage
    var bmp = new Bitmap(null, 200, 200).center(stage);

    // we need to loop and get a value for each pixel
    // normally we loop across the rows and then do each column
    // but here we are making a horizontal gradient
    // so we will loop across the x and get the desired value
    // then when we loop across the y in the inner loop, we just use that same value
    for (var x = 0; x < bmp.width; x++) {
       // making gradient in x only so calculate smoothStep here
       // x will be from 0 to the width of 200
       // we pass in a min of 40 and a max of 100
       // the result of smoothStep is between 0 and 1
       // so from 0 to 40 the return of smoothStep will be 0
       // and from 100 to 200 the return of smoothStep will be 1
       // In between, the return value starts off close to 0, then speeds up
       // and then slows down to 1 in a curve that is somewhat like the letter f
       // When we multiply by 255 and apply that result to each color,
       // we get black and then a range of greys and then white
       var value = smoothStep(40, 100, x)*255;

       // now we loop down the column for the x position
       for (var y = 0; y < bmp.height; y++) {
          // imageData is four values per pixel
          // the red, green, blue and alpha
          // in one big long array - each value will be constrained to between 0 and 255
          // this i value will increase by 4 each time
          // then we write the same value for red, green, blue to get a shade of grey
          var i = (x + y * bmp.width) * 4;
          bmp.imageData.data[i] = value; // red (0-255)
          bmp.imageData.data[i + 1] = value; // green (0-255)
          bmp.imageData.data[i + 2] = value; // blue (0-255)
          bmp.imageData.data[i + 3] = 255; // alpha (0-255)
       }
    }
    bmp.drawImageData(); // draw the imageData to the Bitmap

    PARAMETERS

    min - the lower edge for smoothStep (often termed edge0) - anything smaller will be set to min
    max - the upper edge for smoothStep (often termed edge1) - anything bigger will be set to max
    input - the input value with respect to min and max

    RETURNS a number between 0 and 1 that represents a transition factor

    CLOSE ▲VIEW ▤EXPAND 01621 ▶︎ Noise(seed)
    CLOSE ▲Noise(seed)
    Noise

    zim class

    DESCRIPTION

    Noise creates OpenSimplex Noise: https://en.wikipedia.org/wiki/OpenSimplex_noise
    Converted from https://www.npmjs.com/package/open-simplex-noise
    See examples at http://zimjs.com/code/noise/
    In general, this is special noise where the pixels relate to one another in a complex way.
    This connection, lets us do things like create terrains or blobs, etc. that look organic.
    There is 1D, 2D, 3D, and 4D noise where we pass in one value, two values, three values and four values.
    We always get back a number between -1 and 1 and this result relates to the results around it.

    1D - we can plot 1D by drawing line segments across the stage (x) and setting the y value to the result of simplex1D(x)
    This makes a 2D mountain-like terrain across the stage

    2D - if we keep the plot from the 1D but use 2D and change the second parameter, we can animate the line.
    We just need to adjust the second parameter by a very small amount each time such as .005.
    Or we can plot put the return value of simplex2D onto its x,y matching location in a Bitmap
    mapping it to a greyscale to make a traditional noise pattern.
    We can adjust the "size" of the noise by dividing the x and y values (frequency).
    If we use the ZIM smoothStep() function we can smoothen these to make blobs.
    We can also use the return value as height for 3D terrain.

    3D - if we keep the traditional noise/blob pattern from the 2D but use simplex3D and animate the third parameter,
    we can animate the 2D noise in time which looks great when we animate blobs!
    This plotting is thousands of computations and will bog the computer if too big.

    4D - will allow us to animate 3D values, etc.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // 1D Noise to make a jagged line across the stage
    var noise = new Noise();
    var shape = new Shape(stageW, stageH).addTo(stage);
    shape.graphics.s("black").ss(2).mt(0, stageH/2);
    loop(stageW/50, function(i) {
       shape.graphics.lt((i+1)*50, stageH/2 + noise.simplex1D(i)*200);
    });
    // the above can be animated by using simplex2D and animating the second number by small amounts

    EXAMPLE

    // 2D noise
    // create a Noise object:
    var noise = new Noise();

    // create an empty Bitmap size 200, 200 into which to draw the noise
    var bmp = new Bitmap(null, 200, 200).center(stage);

    // we fill the bitmap starting from top left going across in the inner loop,
    // then down, then across, etc. until we get to bottom right.
    for (var y = 0; y < bmp.height; y++) {
       for (var x = 0; x < bmp.width; x++) {
          // the noise methods return a number from -1 to 1
          // by adding 1 we get a number between 0 and 2 and we divide by 2 to get 0-1
          // and we multiply this by 255 to get a number between 0 and 255
          var value = (noise.simplex2D(x,y)+1)/2 * 255;
          // imageData is one big array with four values per pixel
          // the red, green, blue and alpha
          // each value will constrained to between 0 and 255
          // the i value is how many on the current row plus the columns from the previous rows
          // and we set it to increase by 4 each time giving us a place for each color and alpha
          // We write the same value for red, green, blue to get a shade of grey
          var i = (x + y * bmp.width) * 4;
          bmp.imageData.data[i] = value; // red (0-255)
          bmp.imageData.data[i + 1] = value; // green (0-255)
          bmp.imageData.data[i + 2] = value; // blue (0-255)
          bmp.imageData.data[i + 3] = 255; // alpha (0-255)
       }
    }
    bmp.drawImageData(); // this draws the imageData to the Bitmap

    // Here is the same example to get blobs using smoothStep:

    var f = 25; // try changing this number around
    for (var y = 0; y < bmp.height; y++) {
       for (var x = 0; x < bmp.width; x++) {
          var value = noise.simplex2D(x/f, y/f)+1)/2; // 0-1
          // smoothStep sets less than .3 to 0 and greater than .35 to 1
          // and transitions between using an easing formula in the shape of an f
          var value = smoothStep(.3, .35, value) * 255;
          var i = (x + y * bmp.width) * 4;
          bmp.imageData.data[i] = value; // red (0-255)
          bmp.imageData.data[i + 1] = value; // green (0-255)
          bmp.imageData.data[i + 2] = value; // blue (0-255)
          bmp.imageData.data[i + 3] = 255; // alpha (0-255)
       }
    }
    bmp.drawImageData();

    PARAMETERS

    seed - (default Math.random()*1000000) keeping the same seed can remake a pattern the same

    METHODS

    simplex1D(x) - returns a noise value between -1 and 1
       In each method, the noise value relates to its neighbor rather than a completely random value
    simplex2D(x,y) - returns a noise value between -1 and 1
    simplex3D(x,y,z) - returns a noise value between -1 and 1
    simplex4D(x,y,z,w) - returns a noise value between -1 and 1

    PROPERTIES

    seed - read only - the seed that was used for the Noise object

    CLOSE ▲VIEW ▤EXPAND 02149 ▶︎ Damp(startValue, damp)
    CLOSE ▲Damp(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var d = new 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 Circle();
    circle.center(stage);
    var dampX = new Damp(circle.x);
    var dampY = new 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() {
       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 02218 ▶︎ Proportion(baseMin, baseMax, targetMin, targetMax, factor, targetRound)
    CLOSE ▲Proportion(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    frame.loadAssets("mySound.mp3");
    frame.on("complete", function() {
       var sound = frame.asset("mySound.mp3").play();
       var p = new Proportion(0, 10, 0, 1);
       var dial = new 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 02296 ▶︎ ProportionDamp(baseMin, baseMax, targetMin, targetMax, damp, factor, targetRound)
    CLOSE ▲ProportionDamp(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage); // center method added in ZIM 4TH
    var pd = new ProportionDamp(0, stageH, 0, 5, .2);
    Ticker.add(function() {
       circle.sca(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 02418 ▶︎ Dictionary(unique)
    CLOSE ▲Dictionary(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var o = {test:"test"};
    var f = function(w) {zog(w)};
    var c = new Circle();
    var d = new 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 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; i++) {
       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 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; i++) {
       if (d.objects[i] == circle) zog(d.values[i]); // two
    }
    // note, now d.remove(key) removes that unique entry for the key

    PARAMETERS

    unique (default false) - set to true to only accept a single entry (the last added) for a 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 02526 ▶︎ swapProperties(property, objA, objB)
    CLOSE ▲swapProperties(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // exchanges the x position of two ZIM circles
    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 02560 ▶︎ swapHTML(idA, idB)
    CLOSE ▲swapHTML(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // exchanges the content of two divs called question and answer
    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 02587 ▶︎ scrollX(num, time)
    CLOSE ▲scrollX(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // hide the logo if the page is scrolled left more than 200 pixels
    if (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 02617 ▶︎ scrollY(num, time)
    CLOSE ▲scrollY(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // animate the scroll position down 100 pixels in half a second
    scrollY(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 02681 ▶︎ windowWidth()
    CLOSE ▲windowWidth()
    windowWidth

    zim function

    DESCRIPTION

    Returns the width of a window.
    (window.clientWidth or window.innerWidth)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    if (windowWidth() < 500) zss("related").display = "none";

    RETURNS a Number

    CLOSE ▲VIEW ▤EXPAND 02704 ▶︎ windowHeight()
    CLOSE ▲windowHeight()
    windowHeight

    zim function

    DESCRIPTION

    Returns the height of a window.
    (window.clientHeight or window.innerHeight)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    if (windowHeight() > 1000) zgo("big.html");

    RETURNS a Number

    CLOSE ▲VIEW ▤EXPAND 02727 ▶︎ getQueryString(string)
    CLOSE ▲getQueryString(string)
    getQueryString

    zim function

    DESCRIPTION

    Turns the HTML query string into a object.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // currentHTML page myPage.html?party=true&toys=many
    var details = getQueryString();
    zog(details.party); // "true"
    zog(details.toys); // "many"
    loop(details, function(key, val, i) {
       zog(key, val, i);
    });
    // outputs:
    // party true 0
    // toys many 1

    EXAMPLE

    // an array of values is created if a query string has multiple properties with the same name:
    var collection = getQueryString("type=dog&age=10&age=20&age=30");
    zog(collection.age); // [10,20,30]

    PARAMETERS

    string - (default null) null will get string from end of HTML page after ?
       set the key value pairs (without question mark) to parse a custom string
       eg. party=true&toys=many

    RETURNS an object literal with properties matching the keys and values matching the values (or undefined if no query string)

    CLOSE ▲VIEW ▤EXPAND 02783 ▶︎ urlEncode(string)
    CLOSE ▲urlEncode(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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var motto = "good = life & life = now";
    zgo("submit.php?motto="+urlEncode(motto));

    PARAMETERS

    string - a value to URL encode (space to plus, etc.)

    RETURNS a String

    CLOSE ▲VIEW ▤EXPAND 02814 ▶︎ urlDecode(string)
    CLOSE ▲urlDecode(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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var pairs = command.split("&");
    var motto = urlDecode(pairs[0].split("=")[1]);

    PARAMETERS

    string - a URLencoded String to decode

    RETURNS a String

    CLOSE ▲VIEW ▤EXPAND 02842 ▶︎ setCookie(name, value, days)
    CLOSE ▲setCookie(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).

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var visits = getCookie("visits");
    if (zot(visits)) visits = 0;
    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 getCookie and deleteCookie

    RETURNS a Boolean indicating success

    CLOSE ▲VIEW ▤EXPAND 02883 ▶︎ getCookie(name)
    CLOSE ▲getCookie(name)
    getCookie

    zim function

    DESCRIPTION

    Gets an HTML cookie that you have previously set.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var visits = getCookie("visits");
    if (zot(visits)) visits = 0;
    setCookie("visits", ++visits);

    PARAMETERS

    name - the String name of your stored cookie

    ALSO see setCookie and deleteCookie

    RETURNS a String or undefined if not found

    CLOSE ▲VIEW ▤EXPAND 02920 ▶︎ deleteCookie(name)
    CLOSE ▲deleteCookie(name)
    deleteCookie

    zim function

    DESCRIPTION

    Deletes an HTML cookie.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    deleteCookie("visits"); // clears the cookie

    PARAMETERS

    name - the String name of your stored cookie to delete

    ALSO see setCookie and getCookie

    RETURNS a Boolean indicating success

    CLOSE ▲VIEW ▤EXPAND 02949 ▶︎ convertColor(color, hexToWord)
    CLOSE ▲convertColor(color, hexToWord)
    convertColor

    zim function

    DESCRIPTION

    Converts HTML String colors to hex numbers or hex numbers to HTML String colors (if it matches) else black

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var color = convertColor("red"); // color is "#ff0000"
    var color = convertColor("#ff0000", true); // color is "red"
    var color = convertColor("f00", true); // color is "red" - note missing # okay and can use three digits

    PARAMETERS

    color - (default black) the HTML string or hex color (case insensitive) (does not work with "rgba()")
    hexToWord - (default false) set to true to convert a hex value to the HMTL string

    RETURNS a String with the converted color or black or #000000 if a match is not found

    CLOSE ▲VIEW ▤EXPAND 02992 ▶︎ mobile(orientation)
    CLOSE ▲mobile(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    if (mobile()) {
       var pane = new Pane(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 03037 ▶︎ async(url, callback)
    CLOSE ▲async(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).
    async will automatically add a random number to the end of your script call to defeat cache.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // existing service:
    // assuming that we have a callback function called test as shown below
    async("http://ip-api.com/json?callback=async.test",test);
    function test(data) {zog(data.country);}
    // note that the callback we pass the service is 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
    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:
    // "async.myFunction(somedata)"
    // in the php file we would use:
    echo "async.myFunction('success')";
    // to return an object literal with nodejs express for example, you would use:
    res.send('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 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 EXPAND 03117 ▶︎ extend(subclass, superclass, override, prefix, prototype)
    CLOSE ▲extend(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.
    For example, a ZIM Container() extends a CreateJS Container 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 as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    function Person() {
       this.talk = function() {
          zog("I am a person");
       }
    }
    function Woman() {
       this.super_constructor();
    }
    extend(Woman, Person);
    var woman = new Woman();
    woman.talk();

    NOTE CreateJS display objects require their constructor to be called otherwise it is like quantum entanglement (seriously)
    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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // make a Collection class that will extend a Container
    // the Collection class will call the 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 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 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 Container()
    // it will receive all the properties and methods of the Container plus its own
    extend(Collection, Container, "center"); // or pass an array of overridden methods

    // use the Collection
    var c = new Collection();
    c.addChild(new 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.
       You can override any function by just defining that function in the subclass
       the override parameter gives you access to the overridden function in the superclass prototype
       only methods on the superclass prototype can be accessed once overridden - not methods in the superclass body
       if there is only one method being overridden then a single string is fine ("test" or ["test"] is fine)
       any methods passed to this parameter 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)
       this list is only needed for methods in the subclass body
       methods assigned to the prototype of the subclass that override are automatically given prefixes
    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:

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // if we already had the Collection example above and we want to extend that
    // then we must use a new prefix when using extend()

    var Records = function() {
       this.Collection_constructor();
    }
    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 Circle(20, 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();
    }
    extend(Jazz, Records, null, "Records");

    NOTE extend() is included in Distill if DISPLAY, METHODS or FRAME Module classes are used (otherwise NOT included)

    RETURNS the subclass

    CLOSE ▲VIEW ▤BITS
    ZIM DISPLAYEXPAND 03296 ▶︎ Container(width||boundsX, height||boundsY, null||width, null||height)
    CLOSE ▲Container(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 Container set bounds
    Manually set bounds will not update automatically unless you setBounds(null).

    NOTE All the ZIM shapes and components extend the Container.
    This means all shapes and components inherit the methods and properties below
    and indeed, the Container inherits all the createjs.Container methods and properties.
    See the CreateJS documentation for x, y, alpha, rotation, on(), addChild(), etc.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var container = new Container();
    stage.addChild(container);
    container.x = 100; container.y = 100;

    var rect = new Rectangle(100, 100, "blue");
    container.addChild(rect); // add rectangle to container
    var circle = new 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 can use container.setBounds(null) to go back to auto calculation

    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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle();
    circle.center(stage); // add circle to stage and center
    circle.drag();

    // alternatively, we can still use the traditional ZIM functions:
    center(circle, stage);
    drag(circle);

    // ZIM DUO works the same way as before - eg.
    circle.drag({slide:true});

    METHODS

    * This class has all the DISPLAY METHODS introduced in ZIM 4TH
    * the methods are available to all ZIM Display objects that extend a ZIM Container
    * such as ZIM Rectangle, Circle, Triangle, BLob
    * 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
    cache(width||x, height||y, null||width, null||height, scale, options) - overrides CreateJS cache() and returns object for chaining
       If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
       width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
       height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
       width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
       height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
       scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
       options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
    clone() - clones the container, its properties and all its children

    ALSO See the CreateJS Easel Docs for Container methods, such as:
    on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 03459 ▶︎ Shape(width||boundsX, height||boundsY, null||width, null||height, graphics)
    CLOSE ▲Shape(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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var shape = new Shape();
    shape.graphics.fill("red").drawRect(0,0,200,100);
    // similar to 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);

    graphics - (default null) a CreateJS Graphics instance (see CreateJS docs)
       or just use the graphics property of the shape object (like usual)

    METHODS

    cache(width||x, height||y, null||width, null||height, scale, options) - overrides CreateJS cache() and returns object for chaining
       If you do not provide the first four parameters, then the cache dimensions will be set to the bounds of the object
       width||x - (default getBounds().x) the width of the chache - or the x if first four parameters are provided
       height||y - (default getBounds().y) the height of the chache - or the y if first four parameters are provided
       width - (default getBounds().width) the width of the chache - or null if first two parameters are provided
       height - (default getBounds().height) the height of the chache - or null if first two parameters are provided
       scale - (default 1) set to 2 to cache with twice the fidelity if later scaling up
       options - (default null) additional parameters for cache logic - see CreateJS somewhere for details
    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), center(), centerReg(),
    addTo(), removeFrom(), loop(), outline(), place(), placeReg(), pos(), alp(), rot(), setMask(), etc.
    ALSO See the CreateJS Easel Docs for Container methods, such as:
    on(), off(), getBounds(), setBounds(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 03597 ▶︎ Bitmap(image, width, height, id)
    CLOSE ▲Bitmap(image, width, height, 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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var frame = new 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 Bitmap
          logo.center(stage);
          stage.update();
       });
    });

    EXAMPLE

    // fill a Bitmap with noise:
    var noise = new Noise();
    // empty Bitmap size 200, 200
    var bmp = new Bitmap(null,200,200).center(stage);
    // we fill the bitmap starting from top left going across in the inner loop,
    // then down, then across, etc. until we get to bottom right.
    var f = 50; // used to make noise bigger or smaller - see the blob comment below
    for (var y = 0; y < bmp.height; y++) {
       for (var x = 0; x < bmp.width; x++) {
          // the noise methods return a number from -1 to 1
          // by adding 1 we get a number between 0 and 2 then divide by 2
          // and we multiply this by 255 to get a number between 0 and 255
          value = (noise.simplex2D(x, y)+1)/2 * 255;
          // or get blobs by smoothing and adjusting frequency:
          // var value = smoothStep(.3,.35, (noise.simplex2D(x/f, y/f)+1)/2) * 255;
          // imageData is four values per pixel
          // the red, green, blue and alpha
          // in one big long array - each value will be constrained to between 0 and 255
          // this i value will increase by 4 each time
          // then we write the same value for red, green, blue to get a shade of grey
          var i = (x + y * bmp.width) * 4;
          bmp.imageData.data[i] = value; // red (0-255)
          bmp.imageData.data[i + 1] = value; // green (0-255)
          bmp.imageData.data[i + 2] = value; // blue (0-255)
          bmp.imageData.data[i + 3] = 255; // alpha (0-255)
       }
    }
    bmp.drawImageData();

    PARAMETERS

    image - an HTML image URL (may not load right away - see Frame loadAssets)
    width - (default 100) used with putImageData to draw a Bitmap otherwise ignored
    height - (default 100) used with putImageData to draw a Bitmap otherwise ignored
    id - an optional id

    METHODS

    drawImageData(x, y, sourceX ,srcY, srcWidth, srcHeight) - draws the Bitmap's imageData data to the Bitmap
       NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture
       See the imageData property which should be set before using the drawImageData() method
       ZIM calls a putImageData method for the HTML Canvas and then transfers this to the Bitmap
       See also https://www.w3schools.com/tags/canvas_putimagedata.asp - but let ZIM do the work...
    clone() - makes a copy with properties such as x, y, etc. also copied

    ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    imageData - data for the pixels stored in a data property of an ImageData object
       NOTE: This is only used when dynamically drawing a Bitmap with data - not for your normal picture
       The data property is an one dimensional Array with consecutive red, green, blue, alpha values (0-255) for each pixels
       eg. 0,0,0,255,255,255,255,255 is a white pixel with 1 alpha and a black pixel with 1 alpha
       You set this before calling the Bitmap drawImageData() method
       See also https://developer.mozilla.org/en-US/docs/Web/API/ImageData - but let ZIM do the 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
    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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    ALSO See the CreateJS Easel Docs for Bitmap properties, such as:
    x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
    alpha, cursor, shadow, mouseEnabled, 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 03740 ▶︎ Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet)
    CLOSE ▲Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet)
    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 both an evenly tiled spritesheet - use cols and rows
    and an un-evenly tiled spritesheet - use the json parameter.
    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 an existing 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 as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // inside 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 Sprite({
          image:spriteImage,
          cols:8,
          rows:6,
          animations:{mid:[10,20], end:[30,40]} // optional animations with labels
          // see CreateJS SpriteSheet docs for the various animation format as there are a few different ones!
       });
       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 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 Sprite({json:frame.asset("robot.json")});
    // ... same as before

    // see CreateJS SpriteSheet docs for the format of the JSON file
    // including various animation formats

    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
       {unordered:{frames:[1,2,3,22,23,24,"anotherLabel",5,6], next:prevLabel}}
       There are also ways to set speeds - but would recommend dividing into simple labels
       and using the label series technique available with the run() method
    json - (default null) a JSON string for a CreateJS SpriteSheet
       If you pass in a json parameter, all other parameters are ignored
       NOTE: remember that JSON needs quotes around the animation properties above:
       {"label":3, "another":[4,10]}
    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
    spriteSheet - (default null) pass in a CreateJS SpriteSheet to build a Sprite from that

    METHODS

    run(time, label, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, startFrame, endFrame, tweek, id, globalControl)
       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 pauseAnimate(true) or unpaused with pauseAnimate(false)
       Can be stopped with stopAnimate() on the Sprite
       supports DUO - parameters or single object with properties below
       time (default 1000) - 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
          rewind is not available on the outside series but is available on an inside series
       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
       waitedCall - (default null) call the function after a wait time if there is one
       waitedParams - (default null) parameters to pass to the waitedCall function
       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 and loopWait (not including last loop)
       loopParams - (default target) parameters to send loopCall function
       loopWaitCall - (default null) calls function after at the start of loopWait
       loopWaitParams - (default target) parameters to send loopWaitCall function
       rewind - (default false) set to true to rewind (reverse) animation (doubles animation time) (not available on label series)
       rewindWait (default 0) milliseconds to wait in the middle of the rewind
       rewindCall (default null) calls function at middle of rewind after rewindWait
       rewindParams - (default target) parameters to send rewindCall function
       rewindWaitCall (default null) calls function at middle of rewind before rewindWait
       rewindWaitParams - (default target) parameters to send rewindCall 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
       tweek - (default 1) a factor for extra time on rewind and loops if needed
       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
       returns object for chaining
    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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
    normalizedFrame - if animations have CreateJS speeds applied, zim handles these by making extra frames
       for example, if a speed is given of .5 then two frames are made (min resulution is .1)
    normalizedFrames - an array of total frames after being normalized - really for internal usage
    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 pauseAnimate() and stopAnimate()
       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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 04279 ▶︎ MovieClip()
    CLOSE ▲MovieClip()
    MovieClip

    zim class - extends a createjs.MovieClip

    DESCRIPTION

    A MovieClip adds timelines to a Container.
    The timelines are move() or 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...

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var movieClip = new MovieClip();
    var circle = new Circle(20, frame.blue);
    // circle needs to be on stage for 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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 04363 ▶︎ Circle(radius, color, borderColor, borderWidth, dashed)
    CLOSE ▲Circle(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage);

    // or with 10 pixel grey stroke
    var circle = new Circle(50, "red", "#666", 10);

    // fill the circle with a radial gradient fill
    circle.colorCommand.radialGradient([frame.yellow,frame.green], [0, .7], 0, 0, 20, 0, 0, 50);

    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
    cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
       Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
    clone() - makes a copy of the shape

    ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    shape - gives access to the circle shape
    color - get and set the fill color
    colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
       eg. shape.colorCommand.linearGradient([frame.green, frame.blue ,frame.green], [.2, .5, .8], 0, 0, shape.width, 0)
       See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
    borderColor - get and set the stroke color
    borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
    borderWidth - get and set the stroke size in pixels
    radius - gets or sets the radius.
       The radius is independent of scaling and can be different than the width/2
       Setting the radius redraws the circle but any current scaling is kept
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 04539 ▶︎ Rectangle(width, height, color, borderColor, borderWidth, corner, flatBottom, dashed)
    CLOSE ▲Rectangle(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var rect = new Rectangle(200, 100, "blue");
    rect.center(stage);

    // or with rounded corners:
    var rect = new Rectangle({width:200, height:100, color:"blue", corner:20});

    // or with 2 pixel white stroke
    var rect = new Rectangle(200, 100, "blue", "white", 2);

    // fill the rectangle with a Bitmap fill assuming icon has been loaded - not the image property
    rect.colorCommand.bitmap(frame.asset("icon.png").image);

    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
    cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
       Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
    clone() - makes a copy of the shape

    ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    shape - gives access to the rectangle shape
    color - get and set the fill color
    colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
       eg. shape.colorCommand.linearGradient([frame.green, frame.blue ,frame.green], [.2, .5, .8], 0, 0, shape.width, 0)
       See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
    borderColor - get and set the stroke color
    borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
    borderWidth - get and set the stroke size in pixels
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 04716 ▶︎ Triangle(a, b, c, color, borderColor, borderWidth, center, adjust, dashed)
    CLOSE ▲Triangle(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var tri = new Triangle(200, null, null, "green");
    tri.center(stage);

    // all three sides specified - tall pointy triangle with yellow stroke of 10 pixels
    var tri = new Triangle(100, 200, 200, "green", "yellow", 10);

    // here we adjust so rotation looks better
    var tri = new Triangle({a:200, color:"green", adjust:30});
    tri.center(stage);
    tri.animate({obj:{rotation:360}, time:3000, ease:"linear", loop:true});

    // here we fill the triangle with a linear gradient fill
    triangle.colorCommand.linearGradient([frame.green, frame.blue ,frame.green], [.2, .5, .8], 0, 0, triangle.width, 0);

    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
    cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
       Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
    clone() - makes a copy of the shape

    ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    shape - gives access to the triangle shape
    color - get and set the fill color
    colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
       eg. shape.colorCommand.linearGradient([frame.green, frame.blue ,frame.green], [.2, .5, .8], 0, 0, shape.width, 0)
       See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
    borderColor - get and set the stroke color
    borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
    borderWidth - get and set the stroke size in pixels
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 04948 ▶︎ Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, toggle, move, ctrlclick, dashed, onTop)
    CLOSE ▲Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, toggle, move, ctrlclick, dashed, onTop)
    Squiggle

    zim class - extends a zim.Container which extends a createjs.Container

    DESCRIPTION

    Makes a squiggly line with a number of points.
    The points have Bezier controls - little handles that change the shape of the line.
    The type of control can be specified overall and individually - and can be hidden or shown
    The type of control can be changed by double clicking the point - colors of the handles will change
    The shape of the line can be recorded with the recordData() method and recreated with the setData() method
    The Squiggle is set by default to show and hide controls when clicked
    It is also draggable by default when the controls are showing
    It can be set to copy with a shift click
    NOTE mouseChildren is turned to false for all zim Shape containers.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var line = new Squiggle(); // makes a line with default 4 points with Bezier controls
    line.center(stage);

    PARAMETERS supports DUO - parameters or single object with properties below

    color - (default frame.green) the line color as any CSS color including "rgba()" for alpha
    thickness - (default 2) the thickness of the line in pixels
    points - (default 4) a number of points to start with on the line OR an array of points as follows:
       [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
       controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles
       rect1X, rect1Y, rect2X, rect2Y - (default 0) the x and y location of the control rectangles relative to the control location
       circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)
       controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"
    length - (default 300) the default length of line used to create the squiggle (also specifies the squiggle's bounds(0, 0, length, thickness))
    controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default
       or pass in a ZIM VEE value and zik will assign a random option for each controlLength of the squiggle
    controlType - (default "straight") one of four String values as follows:
       none - there are no control rectangles (they are actually set at 0,0).  This makes a corner at the circle point.
       mirror - the control rectangles reflect one another about the point circle - lengths are kept even
       straight - the control rectangles keep a straight line through the point circle but length is independent
       free - the control rectangle moves independently from the other control rectangle
       ** The controlType can be specified for each point - see the points parameter
       ** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true
    lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType
    showControls - (default true) set to false to start with controls not showing - can change this after with controlsVisible property or showControls() and hideControls() methods
    lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true
    handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally
    toggle - (default true) set false to let turn off clicks showing and hiding controls
    move - (default true) set to false to disable dragging when controls are showing
    ctrlclick - (default false) set to true to let ctrl click copy the Squiggle with its current shape (adds to same holder container - use holder.getChildAt(holder.numChildren-1) to access)
    dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
    onTop - (default true) set to false to not bring shape to top of container when dragging

    METHODS

    recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method
       if toJSON (default false) is set to true, the return value is a JSON string
       the points data comes from the points property
    setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
       if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
       the points data is parsed with the set setPoints() so the number of points should be the same
       returns object for chaining
    recordPoints(popup) - returns an array with the same format as the points parameter - or can just use points property
       popup - (default false) set to true to open a zim Pane with the points in a zim TextArea (click off to close)
       NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Squiggle use JSON.parse(output);
       NOTE: using zog(JSON.stringify(squiggle.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work
    setPoints(data) - sets the Squiggle points to the data from recordPoints
       This does not remake the Squiggle but rather shifts the controls so the number of points should be the same
    changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index
       accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
       passing in null as the index will change all points to the specified properties
       the update parameter defaults to false so set to true to show update or call update() below
       this is so multiple changes can be batched before calling update - for instance when animating blobs.
    update() - update the Squiggle if animating control points, etc. would do this in a Ticker
    showControls() - shows the controls (and returns squiggle) also see controlsVisible property
    hideControls() - hides the controls (and returns squiggle) also see controlsVisible property
    cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
       Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
    clone() - makes a copy of the shape
    dispose() - remove event listeners

    ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    shape - gives access to the shape of the squiggle
    color - get and set the fill color
    colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
       eg. shape.colorCommand.linearGradient([frame.green, frame.blue ,frame.green], [.2, .5, .8], shape.width/2, 0, shape.width/2, 0)
       See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
    borderColor - get and set the stroke color
    borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
    borderWidth - get and set the stroke size in pixels
    num - get the number of points - to set, use the points property
    points - get or set the points array of the Squiggle in the same format as the points parameter:
       [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
    pointObjects - get an array of point objects for each point in the following format:
       [[control, circle, rect1, rect2, controlType], [etc.]]
       control - the container for the control that holds the circle and rectangles
       circle - the control point circle
       rect1 - the first control point rectangle
       rect2 - the second control point rectangle
       controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"
       NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed
       NOTE: the update() method must be called if manually changing the control positions or type
       NOTE: if constantly animating the controls then use a Ticker.add(function(){squiggle.update();})
       NOTE: also see recordData(), setData(), recordPoints(), setPoints() methods for further options
    controls - access to the container that holds the sets of controls
    sticks - access to the container that holds the control sticks
    controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls()
    types - get or set the general array for the types ["mirror", "straight", "free", "none"]
       changing this or removing a type will adjust the order when the user double clicks the points to change their type
       this is not an array of types for each point - see the points property to access the types of each point
    lockControls - Boolean to lock controls from being adjusted or not
    lockControlType - Boolean to lock the type of the controls in their current state or not
    toggle - Boolean to get or set clicking to show and hide controls
    move - Boolean to drag or not drag Squiggle when controls are showing
    ctrlclick - Boolean to let users ctrl click the Squiggle to duplicate it (clone) or not
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    EVENTS

    dispatches a "change" event for when the bezier controls are adjusted (pressup only)
       if monitoring constant change is needed add a pressmove event to Squiggle.controls
       the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch"
    dispatches controlsshow and controlshide events when clicked off and on and toggle is true
    See the CreateJS Easel Docs for Container events, such as:
    added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

    MORE

    http://zimjs.com/code/squiggle
    https://www.youtube.com/watch?v=BA1bGBU4itI&list=PLCIzupgRt1pYtMlYPtNTKCtztFBeOtyc0
    Note the points property has been split into points and pointObjects (and there have been a few property changes) since the time of the video

    CLOSE ▲VIEW ▤EXPAND 05885 ▶︎ Blob(color, borderColor, borderWidth, points, radius, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, toggle, move, ctrlclick, dashed, onTop)
    CLOSE ▲Blob(color, borderColor, borderWidth, points, radius, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, toggle, move, ctrlclick, dashed, onTop)
    Blob

    zim class - extends a zim.Container which extends a createjs.Container

    DESCRIPTION

    Makes a blob shape inside a container using a number of points.
    The points have Bezier controls - little handles that change the shape of the Blob.
    The type of control can be specified overall and individually - and can be hidden or shown
    The type of control can be changed by double clicking the point - colors of the handles will change
    The shape of the Blob can be recorded with the recordData() method and recreated with the setData() method
    The Blob is set by default to show and hide controls when clicked
    It is also draggable by default when the controls are showing
    It can be set to copy with a shift click
    NOTE mouseChildren is turned to false for all zim Shape containers.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var blob = new Blob(); // makes a circle with default 4 points with Bezier controls
    blob.center(stage);

    var moreBlob = new Blob({
       points:12, // 12 points for more complex shape
       ctrlclick:true // ctrl click to make a copy of the current blob shape
    }).center(stage);

    var specifiedBlob = new Blob({
       color:frame.purple,
       controlType:"free", // free will be default control type (rather than "straight")
       points:[
          // the control position x, y
          // then three point positions inside the control - so relative to the control position
          // 1. circle position x, y (usually the same as the control position - so 0,0)
          // 2. the location of the first control rectangle x and y
          // 3. the location of the second control rectangle x and y
          // then an optional specific type of control that overrides the controlType parameter (or the default type of "straight")
          [-100,-100,-100,100,100,-100,0,0,"mirror"], // this will be type "mirror"
          [100,-100,100,0,-50,0], // this will be type "free" because controlType parameter
          [100,100], // these will be type "none" because no dimensions (or dimensions 0) specified for controls
          [-100,100]
       ]
    }).centerReg(stage).drag();

    PARAMETERS supports DUO - parameters or single object with properties below

    color - (default frame.green) 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
    num - get the number of points - to set, use the points property
    points - (default 4) a number of points to start with on the line OR an array of points as follows:
       [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
       controlX and controlY - the x and y location of the control Container which holds the point circle and the two control rectangles
       rect1X, rect1Y, rect2X, rect2Y - (default 0) the x and y location of the control rectangles relative to the control location
       circleX and circleY - (default 0) the x and y location of the circle relative to the control location (usually 0, 0)
       controlType - (default main controlType parameter or "straight" if not controlType parameter) the point's controlType "none", "mirror", "straight" or "free"
    radius - (default 100) the default radius of the circle used to create the blob (also specifies the blob's bounds(-radius, -radius, radius*2, radius*2))
    controlLength - |ZIM VEE| (default radius*numPoints/4) specify a Number to override the calculated default
       or pass in a ZIM VEE value and zik will assign a random option for each controlLength of the blob
    controlType - (default "straight") one of four String values as follows:
       none - there are no control rectangles (they are actually set at 0,0).  This makes a corner at the circle point.
       mirror - the control rectangles reflect one another about the point circle - lengths are kept even
       straight - the control rectangles keep a straight line through the point circle but length is independent
       free - the control rectangle moves independently from the other control rectangle
       ** The controlType can be specified for each point - see the points parameter
       ** The controlType can be changed by doubleClicking the point circle to cycle through the controls in the order above - unless the lockControlType is set to true
    lockControlType - (default false) set to true to disable doubleClicking of point circles to change controlType
    showControls - (default true) set to false to start with controls not showing - can change this after with control property or showControls() method
    lockControls - (default false) set to true to lock the editing of controls - can't move the points or handles - but can see them if showControls is set to true
    handleSize - (default 20 mobile 10 for non-mobile) the size of control boxes and affects the circles too proportionally
    toggle - (default true) set false to let turn off clicks showing and hiding controls
    move - (default true) set to false to disable dragging when controls are showing
    ctrlclick - (default false) set to true to let ctrl click copy the Blob with its current shape (adds to same holder container - use holder.getChildAt(holder.numChildren-1) to access)
    dashed - (default false) set to true for dashed border (if borderWidth or borderColor set)
    onTop - (default true) set to false to not bring shape to top of container when dragging

    METHODS

    recordData(toJSON) - returns an object with x, y, points, color, borderColor, borderWidth, move, toggle, controls PROPERTIES to be used with setData() method
       if toJSON (default false) is set to true, the return value is a JSON string
       the points data comes from the points property
    setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
       if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
       the points data is parsed with the set setPoints() so the number of points should be the same
       returns object for chaining
    recordPoints(popup) - returns an array with the same format as the points parameter - or can just use points property
       popup - (default false) set to true to open a zim Pane with the points in a zim TextArea (click off to close)
       NOTE: the TextArea output uses JSON.stringify() - to add the points to the points parameter of the Blob use JSON.parse(output);
       NOTE: using zog(JSON.stringify(blob.recordData()))... the console will remove the quotes from the controlTypes so those would have to be manually put back in before parse() will work
    setPoints(data) - sets the Blob points to the data from recordPoints
       This does not remake the Blob but rather shifts the controls so the number of points should be the same
    changeControl(index, type, rect1X, rect1Y, rect2X, rect2Y, circleX, circleY, update) - change a control type and properties at an index
       accepts ZIM DUO normal parameters or configuration object literal with parameter names as propterties
       passing in null as the index will change all points to the specified properties
       the update parameter defaults to false so set to true to show update or call update() below
       this is so multiple changes can be batched before calling update - for instance when animating blobs.
    update() - update the Blob if animating control points, etc. would do this in a Ticker
    showControls() - shows the controls (and returns blob) - or use blob.controls = true property
    hideControls() - hides the controls (and returns blob) - or use blob.controls = false property
    cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
       Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
    clone() - makes a copy of the shape
    dispose() - remove event listeners

    ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    shape - gives access to the shape of the blob
    color - get and set the fill color
    colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills
       eg. shape.colorCommand.linearGradient([frame.green, frame.blue ,frame.green], [.2, .5, .8], shape.width/2, 0, shape.width/2, 0)
       See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html
    borderColor - get and set the stroke color
    borderColorCommand - access to the CreateJS stroke command for bitmap, linearGradient and radialGradient strokes
    borderWidth - get and set the stroke size in pixels
    points - get or set the points array of the Blob in the same format as the points parameter:
       [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]]
    pointObjects - get an array of point objects for each point in the following format:
       [[control, circle, rect1, rect2, controlType], [etc.]]
       control - the container for the control that holds the circle and rectangles
       circle - the control point circle
       rect1 - the first control point rectangle
       rect2 - the second control point rectangle
       controlType - the control type: default is "straight" (or null) and there is also "mirror", "free" and "none"
       NOTE: control, circle, rect1, rect2 can be positioned or animated and controlType can be changed
       NOTE: the update() method must be called if manually changing the control positions or type
       NOTE: if constantly animating the controls then use a Ticker.add(function(){blob.update();})
       NOTE: also see recordData(), setData(), recordPoints(), setPoints() methods for further options
    controls - access to the container that holds the sets of controls
    sticks - access to the container that holds the control sticks
    controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls()
    types - get or set the general array for the types ["mirror", "straight", "free", "none"]
       changing this or removing a type will adjust the order when the user double clicks the points to change their type
       this is not an array of types for each point - see the points property to access the types of each point
    lockControls - Boolean to lock controls from being adjusted or not
    toggle - Boolean to get or set clicking to show and hide controls
    move - Boolean to drag or not drag Blob when controls are showing
    lockControlType - Boolean to lock the type of the controls in their current state or not
    ctrlclick - Boolean to let users ctrl click the Blob to duplicate it (clone) or not
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    EVENTS

    dispatches a "change" event for when the bezier controls are adjusted (pressup only)
       if monitoring constant change is needed add a pressmove event to Blob.sets
       the change event object has a transformType property with values of "move", "bezierPoint", "bezierHandle", "bezierSwitch"
    dispatches controlsshow and controlshide events when clicked off and on and toggle is true
    See the CreateJS Easel Docs for Container events, such as:
    added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover

    CLOSE ▲VIEW ▤EXPAND 06827 ▶︎ Label(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, fontOptions, backing, outlineColor, outlineWidth)
    CLOSE ▲Label(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var label = new Label("Hello");
    label.center(stage); // adds label to and centers on the stage

    var label = new 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)
    cache(see Container docs for parameter description) - overrides CreateJS cache() and returns object for chaining
       Leave parameters blank to cache bounds of shape (plus outer edge of border if borderWidth > 0)
    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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(), uncache(), updateCache(), dispatchEvent(),
    addChild(), removeChild(), addChildAt(), getChildAt(), contains(), removeAllChildren(), etc.

    PROPERTIES

    type - holds the class name as a String
    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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 07091 ▶︎ Button(width, height, label, color, rollColor, borderColor, borderRollColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal, waitEnabled)
    CLOSE ▲Button(width, height, label, color, rollColor, borderColor, borderRollColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal, waitEnabled)
    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 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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var button = new 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 Label({
       text:"POWER OPTION",
       size:40,
       color:"violet",
       fontOptions:"bold"
    });
    var button = new 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
    borderRollColor - (default borderColor) the rollover 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)
       Note that if the button alpha is 0 the button will still be active if hitPadding is not equal to 0
       Set the hitPadding property to 0 in this case - thanks Frank Los for the notice
    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)
    dashed - (default false) set to true to turn the border to dashed - if the borderColor or borderWidth is provided
    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
    wait - (default null) - String word for button to show when button is pressed and a wait state is desired
       LOADING: this can be used as a loading message - so change the button to "LOADING"
       When the asset has loaded, use the clearWait() method to return to the normal button or toggled button state
       CONFIRMING: this can also be used to confirm user action rather than a full new confirm panel
       Set wait:"CONFIRM", set the waitColor parameter to frame.red and the waitTime parameter to 4000
       In the button action event (mousedown or click) check if the waiting property is true to test for confirmation
       The waiting property will not be true for the first button press but will be true during the wait period
       Perhaps set the waitModal parameter to true to clearWait() if the user clicks off the button
       Use the clearConfirm() method to clear or cancel the confirm status - for instance, if the pane the button is in is closed
       Use the setBackings() and setIcons() methods to show objects instead and the waited event to set back to normal
    waitColor - (default frame.red) color to make button during wait time if wait is set
    rollWaitColor - (default rollColor) color for button when waiting and rolled over
    waitTextColor - (default label's color) color to make text during wait time if wait is set
    rollWaitTextColor - (default label's roll color) color for text when waiting and rolled over
    waitTime - (default 30000 - 30 seconds) milliseconds (ms) to show wait state before reverting to normal button
    waitModal - (default false) set to true to clearWait() if the user clicks off the button
    waitEnabled - (default true) set to false to disable button while wait is in progress

    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
    clearWait() - clears a wait state of the button - sets it back to normal
    removeWait() - removes (and clears) a wait state of the button so it will not trigger again
    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    ** 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
    hitPadding - extra padding for interactivity - see hitPadding parameter for extra notes
    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
    waiting - true if button is in the waiting state within wait time
    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
    borderRollColor - get or set the border rolled color
    focus - get or set the focus property of the Button used for tabOrder
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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

    dispatches a "waited" event if button is in wait state and the wait time has completed
    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 07662 ▶︎ CheckBox(size, label, startChecked, color, margin, indicatorType)
    CLOSE ▲CheckBox(size, label, startChecked, color, margin, indicatorType)
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var checkBox = new 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
    indicatorType - (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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 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 07893 ▶︎ RadioButtons(size, buttons, vertical, color, spacing, margin, always)
    CLOSE ▲RadioButtons(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var radioButtons = new 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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    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
    buttons - an array of button Container objects holding the shape and label (note - different than buttons parameter)
    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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 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 08205 ▶︎ Pane(width, height, label, color, drag, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, bar, barColor, barHeight, close, closeColor)
    CLOSE ▲Pane(width, height, label, color, drag, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, bar, barColor, barHeight, close, closeColor)
    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).

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var pane = new Pane(300, 200, "Watch out!", "#CCC");
    pane.show(); // pressing anywhere will close pane (see parameters for options)

    EXAMPLE

    var pane = new Pane({width:600, height:250, modal:false, displayClose:false});
    var cancel = new Button(220, 100, "CANCEL", "red").center(pane).mov(-130);
    var confirm = new Button(220, 100, "CONFIRM", "green").center(pane).mov(130);
    cancel.on("click", function() {pane.hide();});
    confirm.on("click", function() {zgo("http://zimjs.com")});
    pane.show(); // pressing anywhere will close pane (see parameters for options)

    PARAMETERS supports DUO - parameters or single object with properties below

    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)
    color - (default "white") a css color for the background of the Pane
    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
    backdropColor - (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
    backdropClose - (default true) closes the Pane if backdrop is pressed
    backing - (default null) a Display object for the backing of the pane (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
    container - (default - the default stage) container for the pane
    bar - (default null - no bar) a String or ZIM Label title for the pane that will be presented on a bar across the top
    barColor - (default "rgba(0,0,0,.2)") the background color of the bar if a bar is requested
    barHeight - (default fit label) the height of the bar if a bar is requested
    close - (default false) - a close X for the top right corner that closes the pane when pressed
    closeColor - (default #555) - the color of the close X if close is requested

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    ** 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
    bar - access to the ZIM Container for the bar if there is a bar
    barTitle - access to the ZIM Label of the bar if there is a bar
    barBacking - access to the ZIM Rectangle of the bar if there is a bar
    close - access to the ZIM Shape if there is a close X
    backdrop - reference to the backdrop that covers the stage
    resetX - if reset is true you can dynamically adjust the position if needed
    resetY
    enabled - set to false to disable component
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 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, display, close, etc. when applicable

    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 08587 ▶︎ Window(width, height, color, borderColor, borderWidth, padding, corner, swipe, indicatorActive, indicatorDrag, indicatorColor, indicatorAlpha, indicatorFade, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp)
    CLOSE ▲Window(width, height, color, borderColor, borderWidth, padding, corner, swipe, indicatorActive, indicatorDrag, indicatorColor, indicatorAlpha, indicatorFade, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp)
    Window

    zim class - extends a zim.Container which extends a createjs.Container

    DESCRIPTION

    Adds a window for content that can be swiped and scrolled.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var win = new Window({
       height:300,
       interactive:false,
       padding:0,
       slideDamp:.2
    });
    var container = new 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
    scrollWheel - (default true) scroll vertically with scrollWheel
    damp - (default null) set to .1 for instance to damp the scrolling

    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()
       returns obj for chaining
    resize(width, height) - resizes the Window without scaling the content (also calls update() for scroll update)
       width and height are optional
    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
    ** see also the resize(width, height) method to resize the window without resizing the content
    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; // the width if vertical or the height if horizontal
       indicator.minSize = 12; // for the height if vertical or the width if horizontal
       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)
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 09145 ▶︎ Waiter(container, speed, color, circleColor, corner, shadowColor, shadowBlur, fadeTime)
    CLOSE ▲Waiter(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).

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var waiter = new 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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    ** 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 09353 ▶︎ Indicator(width, height, num, color, offColor, borderColor, backingColor, indicatorType, fill, scale, lightScale, press, shadowColor, shadowBlur)
    CLOSE ▲Indicator(width, height, num, color, offColor, borderColor, backingColor, indicatorType, 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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var lights = new 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
    indicatorType - (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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    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 Rectangle
    lights - an array of the light objects (zim Circle or Rectangle objects)
    lightsContainer - gives access to the lights createjs.Container with its Circle or Rectangle children
    enabled - set to false to disable component
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 09568 ▶︎ Stepper(list, width, color, borderColor, label, vertical, arrows, corner, shadowColor, shadowBlur, loop, display, press, hold, holdDelay, holdSpeed, drag, dragSensitivity, dragRange, stepperType, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward)
    CLOSE ▲Stepper(list, width, color, borderColor, label, vertical, arrows, corner, shadowColor, shadowBlur, loop, display, press, hold, holdDelay, holdSpeed, drag, dragSensitivity, dragRange, stepperType, 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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var stepper = new Stepper();
    stepper.on("change", function() {
       zog(stepper.selectedIndex);
       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
    stepperType - (default "list") list draws values from list parameters
       also stepperType "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 stepperType)
    max - (default 100 for number and "Z" for letter) the maximum value (can make max smaller than min) (not for list stepperType)
    step - (default 1) the step value each time - can be decimal (only positive, only for number stepperType)
    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 stepperType)
    arrows2 - (default true if step2 different than step and stepperType number - else false) secondary arrows perpendicular to main horizontal or vertical direction
       arrows2 will activate step2 above (only for number stepperType)
    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 stepperType 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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    selectedIndex - gets or sets the current index of the array and display
    currentValue - gets or sets the current value of the array and display
    currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
    ** 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 Label
    textBox - access to the text box backing shape
    loop - does the stepper loop
    enabled - default is true - set to false to disable
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 selectedIndex 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 10388 ▶︎ Slider(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, inside, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV)
    CLOSE ▲Slider(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, inside, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV)
    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).

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var slider = new 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 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)
    keyArrows - (default true) set to false to disable keyboard arrows
    keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used
       if step is set, then this value is ignored and set to step
    keyArrowsH - (default true) use left and right arrows when keyArrows is true
    keyArrowsV - (default true) use up and down arrows when keyArrows is true

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), center(), centerReg(),drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    currentValue - gets or sets the current value of the slider
    currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
    ** 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 Rectangle
    button - gives access to the Button
    ticks - gives access to the ticks (to position these for example)
    keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning)
    enabled - default is true - set to false to disable
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 10792 ▶︎ Dial(min, max, step, width, color, indicatorColor, indicatorScale, indicatorType, innerCircle, innerScale, useTicks, innerTicks, tickColor, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax);
    CLOSE ▲Dial(min, max, step, width, color, indicatorColor, indicatorScale, indicatorType, innerCircle, innerScale, useTicks, innerTicks, tickColor, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax);
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var dial = new 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 1) 1 provides steps of 1, 0 is continuous decimal, 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
    indicatorType - (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
    keyArrows - (default true) set to false to disable keyboard arrows
    keyArrowsStep - (default 1% of max-min) number to increase or decrease value when arrow is used
       if step is set, then this value is ignored and set to step
    keyArrowsH - (default true) use left and right arrows when keyArrows is true
    keyArrowsV - (default true) use up and down arrows when keyArrows is true
    continuous - (default false) this turns the dial into a continuous dial from the min at the top
       The (max-min)/360 give a delta value per degree
       and as the dial goes clockwise it adds the delta and as it goes counterclockwise it subtracts the delta
       The steps are still used or not if set to zero
       The min and max are no longer a real min and max - see the continuousMin and continuousMax below
       limit is ignored or set to false when continuous is true
    continuousMin - (default null) set to Number to limit the minimum total value of the dial when continuous is true
    continuousMax - (default null) set to Number to limit the maximum total value of the dial when continuous is true

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    currentValue - gets or sets the current value of the dial
    currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
    ** 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 - read only assigned values unless continuous is true - then write enabled
    step - read only - the assigned values
    continuous - gets a boolean as to whether the continuous is true (read only)
    continuousMin - get or set the continuousMin if continuous is set to true
    continuousMax - get or set the continuousMax if continuous is set to true
    backing - gives access to the dial backing 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)
    keyArrowsH, keyArrowsV - get or set the type of arrow keys to use (helpful for when cloning)
    enabled - default is true - set to false to disable
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 11298 ▶︎ Tabs(width, height, tabs, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor, flatBottom, keyEnabled, gradient, gloss, wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal, waitEnabled)
    CLOSE ▲Tabs(width, height, tabs, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor, flatBottom, keyEnabled, gradient, gloss, wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal, waitEnabled)
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var tabs = new 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 Label object - default text color is white
       Tab objects can also include wait properties for individual buttons.
       See wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal and waitEnabled parameters below
       wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel
       also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done
       wait will primarily be applicable when the tabs are used as a set of buttons rather than traditional tabbing
    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
    wait - (default null) String text for tab to say when pressed to enter a wait mode
       The wait parameters can be (and probably will be) set as properties for each individual tab in the tabs array
    waitTime - (default 20000) milliseconds to stay in wait state before returning to normal tab
    waitColor - (default color) the color of the tab during wait period
    rollWaitColor - (default color) the color of the tab during wait period
    waitColor - (default frame.red) color to make button during wait time if wait is set
    rollWaitColor - (default rollColor) color for button when waiting and rolled over
    waitTextColor - (default label's color) color to make text during wait time if wait is set
    rollWaitTextColor - (default label's roll color) color for text when waiting and rolled over
    waitModal - (default false) set to true to exit wait state if user clicks off tabs or to another tab
    waitEnabled - (default true) set to false to disable tabs while in wait mode

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    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 (does not affect accessibility)
    enabled - default is true - set to false to disable
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 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 11684 ▶︎ Pad(width, cols, rows, keys, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor, gradient, gloss, wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal, waitEnabled)
    CLOSE ▲Pad(width, cols, rows, keys, color, rollColor, offColor, spacing, currentEnabled, corner, labelColor, gradient, gloss, wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal, waitEnabled)
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var pad = new 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 an Array for cols x rows) 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 Label object - default text color is white
       Key objects can also include wait properties for individual buttons.
       See wait, waitTime, waitColor, rollWaitColor, waitTextColor, rollWaitTextColor, waitModal and waitEnabled parameters below
       wait can be used with button's waiting property to offer an alternative to a loading screen or confirmation panel
       also see the button's clearWait() method to cancel the wait state and waited event that triggers when the wait is done
    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
    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
    wait - (default null) String text for button to say when pressed to enter a wait mode
       The wait parameters can be (and probably will be) set as properties for each individual button in the pads array
    waitTime - (default 20000) milliseconds to stay in wait state before returning to normal button
    waitColor - (default color) the color of the button during wait period
    rollWaitColor - (default color) the color of the button during wait period
    waitColor - (default frame.red) color to make button during wait time if wait is set
    rollWaitColor - (default rollColor) color for button when waiting and rolled over
    waitTextColor - (default label's color) color to make text during wait time if wait is set
    rollWaitTextColor - (default label's roll color) color for text when waiting and rolled over
    waitModal - (default false) set to true to exit wait state if user clicks off the pad or to another button
    waitEnabled - (default true) set to false to disable pad while in wait mode

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    selectedIndex - gets or sets the selected index of the pad
    text - gets current selected label text
    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
    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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    OPTIMIZED

    This component is affected by the general 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 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 11912 ▶︎ Tile(obj, cols, rows, count, spacingH, spacingV, mirrorH, mirrorV, snapToPixel)
    CLOSE ▲Tile(obj, cols, rows, count, spacingH, spacingV, mirrorH, mirrorV, snapToPixel)
    Tile

    zim class - extends a zim.Container which extends a createjs.Container

    DESCRIPTION

    Creates a tile using clones of the object specified for the columns and rows specified.
    All tiled objects are cloned so no need to add original obj to the stage as it will be left there
    Was intended to tile a single object but you can pass in a ZIM VEE value to tile multiple objects.
    Can also mirror alternate tiles.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle();
    var tile = new Tile(circle, 20, 10).center(stage);

    PARAMETERS supports DUO - parameters or single object with properties below

    obj - |ZIM VEE| the display object to tile
       The ZIM VEE value can be the following:
       1. an Array of values to pick from - eg. ["red", "green", "blue"]
       2. a Function that returns a value - eg. function(){return Date.now();}
       3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required
       4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive
       5. a single value such as a Number, String, Rectangle(), etc. this just passes through unchanged
    cols - (default 1) the columns to tile
    rows - (default 1) the rows to tile
    count - (default cols*rows) optional total number of items to tile
       if count is set to 0 then count is ignored and a warning message is provided in console
       this is somewhat due to ZIM changing the parameter order
       which can lead to unexpected tile disappearance if spacingH was set to 0 in the count's  parameter position
    spacingH - (default 0) a spacing between columns
    spacingV - (default 0) a spacing between rows
    mirrorH - (default false) flip alternating objects horizontally
    mirrorV - (default false) flip alternating objects vertically
    snapToPixel - (default true) sets the stage to snapToPixelEnabled and snaps to pixels to avoid small gaps when Tile is repositioned

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    ** 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 Container properties, such as:
    x, y, rotation, scaleX, scaleY, regX, regY, skewX, skewY,
    alpha, cursor, shadow, mouseChildren, mouseEnabled, parent, numChildren, etc.

    CLOSE ▲VIEW ▤EXPAND 12030 ▶︎ ColorPicker(width, colors, cols, spacing, greyPicker, alphaPicker, startColor, drag, shadowColor, shadowBlur, buttonBar, circles, indicator, backingColor, keyArrows)
    CLOSE ▲ColorPicker(width, colors, cols, spacing, greyPicker, alphaPicker, startColor, drag, shadowColor, shadowBlur, buttonBar, circles, indicator, backingColor, keyArrows)
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var cp = new 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 (false if no buttonBar)) 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
    keyArrows - (default true) set to false to disable keyboard arrows

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    selectedColor - gets or sets the selected color swatch
    currentValue - same as selectedColor but consistent with other components
    currentValueEvent - gets or sets the current value and dispatches a "change" event if set and changed
    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 Rectangle that is the color swatch
    swatchBacking - gets the createjs.Shape that is under the swatch (seen if alpha set low)
    swatchText - gets the Label that shows the color text
    grip - gets the createjs.Shape for the grip if the panel is dragable
    backing - gets the Rectangle that is the backing (cp.backing.color = "white" - now a backingColor parameter)
    okBut - references the OK Button
    closeBut - references the X Button
    indicator - gets the zim shape that is the indicator (if indicator is true)
    NOTE alphaPicker is true:
    alpaBacking - gets reference to the Rectangle that makes the backing for the alpha slider
    alphaBut - the Button on the alpha slider
    alphaSlider - the Slider for the alpha
    alphaText - the Label for the alpha
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    ACTIONEVENT

    This component is affected by the general 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 12598 ▶︎ Loader(width, height, drop, label, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, frame)
    CLOSE ▲Loader(width, height, drop, label, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, flatBottom, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, rollToggle, toggleEvent, frame)
    Loader

    zim class - extends a zim.Button which extends a createjs.Container

    DESCRIPTION

    Loader lets you upload images and acces them as a 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 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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var loader = new Loader({
       frame:frame,
       label:"UPLOAD PIC OR DROP PICS HERE",
       width:700,
       height:400,
       corner:50
    }).center(stage);
    loader.on("loaded", function(e) {
       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

    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
    frame - (default the zimDefaultFrame) a reference to the Frame (to scale and position the HTML tag)

    PROPERTIES

    type - holds the class name as a String
    tag - the HTML input tag of type file - used for uploading

    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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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, type) - 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
       type - (default "png") set to "jpeg" for jpeg

    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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 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 Bitmap objects of the loaded images
       e.bitmap - the first Bitmap to be created from the loaded images
       e.lastBitmap - the last Bitmap to be created from the loaded images
       e.total - the total 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 12933 ▶︎ TextArea(width, height, size, padding, color, backingColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly, spellCheck, frame)
    CLOSE ▲TextArea(width, height, size, padding, color, backingColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly, spellCheck, frame)
    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)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var textArea = new TextArea(frame, 300, 200);
    textArea.center(stage);

    var label = new 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

    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 "#666") text color (any CSS color)
    backingColor - (default "rgba(256,256,256,.1)") backing color of box
    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)
    spellCheck - (default true) set to false to turn Browser spell check off
    frame - (default the zimDefaultFrame) a reference to the Frame (to scale and position the HTML tag)

    PROPERTIES

    type - holds the class name as a String
    currentValue - get or set the text content of the TextArea
    text - the same as currentValue - for convenience...
    hasFocus - get or set if the TextArea tag has focus or use focus() to set
    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 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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    METHODS

    focus(type) - sets the focus of the TextArea tag (thanks Armin for the prompting)
       type is a Boolean that defaults to true - set to false to make the TextArea blur (loose focus)
       see also hasFocus property
    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 Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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 ▤BITS
    ZIM METHODSEXPAND 13195 ▶︎ obj.drag(rect, overCursor, dragCursor, currentTarget, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds)
    CLOSE ▲obj.drag(rect, overCursor, dragCursor, currentTarget, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds)
    drag

    zim DisplayObject method

    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 Circle(radius, "red");
    circle.center(stage);
    circle.drag();

    // OR with chaining
    var circle = new Circle(radius, "red").center(stage).drag();

    // OR with ZIM DUO
    circle.drag({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

    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 OPTIMIZE is set to true
    unless Ticker.update is set to true or you run Ticker.always(stage) see Ticker

    EVENTS

    Adds a "slidestop" event to the drag object that is dispatched when the object comes to rest after sliding

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 13594 ▶︎ obj.noDrag()
    CLOSE ▲obj.noDrag()
    noDrag

    zim DisplayObject method

    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();

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 13627 ▶︎ obj.dragRect(rect)
    CLOSE ▲obj.dragRect(rect)
    dragRect

    zim DisplayObject method

    DESCRIPTION

    Dynamically changes or adds a bounds rectangle to the object being dragged with drag().

    EXAMPLE

    var dragBounds = new createjs.Rectangle(100,100,500,400);
    circle.dragRect(dragBounds);

    PARAMETERS

    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 13656 ▶︎ obj.transform(obj, move, stretchX, stretchY, scale, rotate, toggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache)
    CLOSE ▲obj.transform(obj, move, stretchX, stretchY, scale, rotate, toggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache)
    transform

    zim DisplayObject method

    DESCRIPTION

    The transform method adds transform controls to a display object.
    The controls allow the user to move, scale, stretch, rotate and change the registration point.
    Parameters are available to choose which of these transformations are available.
    By default, all the transformations are available to use but
    only the scale and registration point controls are showing.
    The others work as the user rolls over the edges or the outer corners.
    You can optionally set these to be visible as boxes on the sides and circles on the outer corners.

    NOTE works with the ZIM TransformManager() class to handle multiple transforms and saving data for persistence.
    NOTE the transformed object will have its mouseChildren set to false.

    CLICK turns off and on the controls if toggle parameter is set to true (default is true)
    If you use the TransformManager for multiple objects, the toggle is automatically set to true
    SHIFT rotate snaps to 45
    Dropping the registration point will snap to corners or center if close enough - unless CTRL is down
    CTRL scale will scale about the registration point
    CTRL DBLCLICK will reset scale to 1 and rotation to 0

    EXAMPLE

    rectangle.transform(); // shows handles for tranformations

    EXAMPLE

    rect.transform({ // scale and stretch only
       move:false,
       rotate:false
    });

    // hide the rectangle's bottom stretch control so only can stretch from top
    // note - transform() expects there to be a control so do not remove a control
    // also, the controls have a hitArea so setting alpha to 0 will not work
    rect.transformControls.stretchYControls.getChildAt(1).sca(0);
    // or set its visible to false
    rect.transformControls.stretchYControls.getChildAt(1).visible = false;

    // Record the transforms and remake transforms when page reloads
    // Or see the TransformManager
    if (localStorage && localStorage.data) rect.transformControls.setData(localStorage.data, true);
    rect.on("transformed", function() {
       if (localStorage) localStorage.data = rect.transformControls.recordData(true);
    });

    PARAMETERS supports DUO - parameters or single object with properties below

    move - (default true) let user move object
    stretchX - (default true) let user stretch object from left and right sides
    stretchY - (default true) let user stretch object from top and bottom
    scale - (default true) let user scale object from corners
    rotate - (default true) let user rotate object
    toggle - (default true) let user hide and show controls with click - set to false not to let user hide controls
    visible - (default true) show the controls to start
    onTop - (default true) set to false to not move the selected shape to the top of its container
    showStretch - (default false - true on mobile) show side boxes for stretching - a cursor will always show if stretchX or stretchY is true
    showRotate - (default false - true on mobile) show circles at corners for rotation - a cursor will always show if rotation is true
    showScale - (default true) show corner boxes for scaling - a cursor will always show if scale is set to true
    showReg - (default true) show round circle for draggable registration point - rotates around registration point
    showBorder - (default true) show rectangle border
    borderColor - (default brown) any border color (CSS)
    borderWidth - (default 1) the width of the border
    dashed - (default false) set to true for dashed border
    customCursors - (default true - false on mobile) set to false for system cursors (system cursors will not be rotated)
    handleSize - (default 20 mobile - 10 desktop) the size of the control squares and circles
    regSize - (default 16) the size of the registration point circle
    snapDistance - (default 10) registration point will snap to corners and center if within this distance (and CTRL key not down)
    snapRotation - (default 5) rotation will snap to angles divisible by this value
       holding CTRL will avoid snapping
       holding SHIFT will rotate only multiples of 45 degrees
    cache (default true) - set to false to not cache the controls and cursors

    TRANSFORM CONTROL OBJECT
    When tranform() is set on an object, the object receives a transformControls property
    This holds the following:

    PROPERTIES:

    visible - read only whether the controls are visible
    scaleControls - reference to the Container that holds the corner boxes for scaling
    stretchXControls - reference to the Container that holds the left and right boxes for stretching
    stretchYControls - reference to the Container that holds the top and bottom boxes for stretching
    rotateControls - reference to the Container that holds the outer circles for rotating

    METHODS:

    hide() - hides the controls - returns object for chaining
    show() - shows the controls - returns object for chaining
    recordData(toJSON) - returns an object with type, x, y, scaleX, scaleY, rotation, skewX, skewY, visible PROPERTIES
       if toJSON (default false) is set to true, the return value is a JSON string
    setData(data, fromJSON) - sets the properties to match the data object passed in - this should come from recordData()
       if fromJSON (default false) is set to true, it will assume a JSON string is passed in as data
       returns object for chaining
    remove() - removes the controls and turns off the dblclick
    add() - adds the controls back if then have been removed and sets the dblclick to its starting value
    toggleOn() - sets the show / hide controls on with click
    toggleOff() - removes the show / hide controls on with click
    disable() - may show the controls if visible but cannot use them
    enable() - turns the using of the controls back on
    resize() - call resize if the object is transformed in ways other than with the controls

    EVENTS

    Adds a transformed event to obj that is dispatched when pressup on any of the controls or on click
       the transformed event object has a transformType property
       the transformType property has values of "size", "move", "rotate", "stretch", "reg" "reset"
    Adds transformshow and transformhide events for when click to hide or show controls

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 14599 ▶︎ obj.setSwipe(swipe)
    CLOSE ▲obj.setSwipe(swipe)
    setSwipe

    zim DisplayObject method

    DESCRIPTION

    Sets whether we want to swipe an object or not using ZIM Swipe.
    Recursively sets children to same setting.

    EXAMPLE

    circle.swipe(false);

    PARAMETERS

    swipe - (default true) set to false to not swipe object

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 14638 ▶︎ obj.gesture(move, scale, rotate, rect, minScale, maxScale, snapRotate, localBounds, slide, slideEffect, regControl)
    CLOSE ▲obj.gesture(move, scale, rotate, rect, minScale, maxScale, snapRotate, localBounds, slide, slideEffect, regControl)
    gesture

    zim DisplayObject method

    DESCRIPTION

    Sets multi-touch pan, pinch and rotate for position, scale and rotation
    Handles scaled and rotated containers
    Scale and rotation occur from the pinch point (with optional regControl for about the registration point)
    Note - gesture() only works on the currentTarget - not a container's children (like drag() can)
    ZIM Frame should have touch set to true (which is the default for mobile)
    ALSO see the noGesture() method to remove some or all gestures
    ALSO see the gestureRect() method to set or reset the bound rectangle dynamically

    EXAMPLE

    rectangle.gesture(); // move, scale and rotate with no bounds

    EXAMPLE

    rect.gesture({
       rotate:false,
       rect:new createjs.Rectangle(0,0,stageW,stageH),
       minScale:.5,
       maxScale:3,
       slide:true
    });

    PARAMETERS supports DUO - parameters or single object with properties below

    move - (default true) move the object with average of fingers
    scale - (default true) scale the object with first two fingers' pinch
    rotate - (default true) rotate the object with first two fingers' rotation
    rect - (default null) bounding CreateJS Rectangle(x,y,w,h) to contain registration point
    minScale - (default null) a minimum scale
    maxScale - (default null) a maximum scale
    snapRotate - (default 1) degrees to snap rotation to after rotation is finished
    localBounds - (default false) set to true to make rect for bounds local rather than global
    slide - (default false) will let you throw the object and dispatch a slidestop event when done
    slideEffect - (default 5) how much slide with 0 being no slide and then longer slide times and distance like 10, etc.
    regControl (default false) set to true to rotate and scale around registration point rather than pinch point

    EVENTS

    Adds move, scale and rotate events to obj (when associated gesture parameters are set to true)
    If slide is true, obj dispatches a "slidestop" event when sliding stops

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 15026 ▶︎ obj.noGesture(move, scale, rotate)
    CLOSE ▲obj.noGesture(move, scale, rotate)
    noGesture

    zim DisplayObject method

    DESCRIPTION

    Removes multi-touch pan, pinch and rotation gestures from an object.
    If all three are removed then deletes the zimTouch object and touch events from obj

    EXAMPLE

    rectangle.noGesture(); // removes all gestures
    // or
    rectangle.noGesture(true, true, false); // would leave rotation
    // or with ZIM DUO
    rectangle.noGesture({rotation:false}); // would leave rotation

    PARAMETERS supports DUO - parameters or single object with properties below

    move - (default true) - set to false not to remove move gesture
    scale - (default true) - set to false not to remove scale gesture
    rotate - (default true) - set to false not to remove rotate gesture

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 15074 ▶︎ obj.gestureRect(rect)
    CLOSE ▲obj.gestureRect(rect)
    gestureRect

    zim DisplayObject method

    DESCRIPTION

    Dynamically changes or adds a bounds rectangle to the object being dragged with gesture().

    EXAMPLE

    var dragBounds = new createjs.Rectangle(100,100,500,400); // x,y,w,h
    circle.gestureRect(dragBounds);

    OR pre ZIM 4TH
    gestureRect(circle, dragBounds);

    PARAMETERS

    rect - is a createjs.Rectangle for the bounds - the local / global does not change from the original gesture setting

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 15107 ▶︎ obj.hitTestPoint(x, y, boundsCheck)
    CLOSE ▲obj.hitTestPoint(x, y, boundsCheck)
    hitTestPoint

    zim DisplayObject method

    DESCRIPTION

    See if shape of obj is hitting the global point x and y on the stage.

    EXAMPLE

    var circle = new 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();
          }
       }
    });

    PARAMETERS

    x and y - the point we are testing to see if it hits the shape of the object
    boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

    RETURNS a Boolean true if hitting, false if not

    CLOSE ▲VIEW ▤EXPAND 15155 ▶︎ obj.hitTestReg(other)
    CLOSE ▲obj.hitTestReg(other)
    hitTestReg

    zim DisplayObject method

    DESCRIPTION

    See if the shape shape of an object is hitting the registration point of object (other).

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage);
    circle.drag();
    var rect = new Rectangle(100, 100, "blue");
    stage.addChild(rect);
    circle.on("pressmove", function() {
       if (circle.hitTestReg(rect)) {
          stage.removeChild(rect);
          stage.update();
       }
    })

    PARAMETERS

    other - the object whose registration point we are checking against
    boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

    RETURNS a Boolean true if hitting, false if not

    CLOSE ▲VIEW ▤BITS EXPAND 15198 ▶︎ obj.hitTestRect(other, num, boundsCheck)
    CLOSE ▲obj.hitTestRect(other, num, boundsCheck)
    hitTestRect

    zim DisplayObject method

    DESCRIPTION

    See if a shape of an object is hitting points on a rectangle of another object.
    The rectangle is based on the position, registration and bounds of object (other).
    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 Circle(50, "red");
    circle.center(stage);
    circle.drag();
    var rect = new Rectangle(100, 100, "blue");
    stage.addChild(rect);
    circle.on("pressmove", function() {
       if (circle.hitTestRect(rect)) {
          stage.removeChild(rect);
          stage.update();
       }
    });

    PARAMETERS

    other - 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
    boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

    RETURNS a Boolean true if hitting, false if not

    CLOSE ▲VIEW ▤BITS EXPAND 15275 ▶︎ obj.hitTestCircle(other, num, boundsCheck)
    CLOSE ▲obj.hitTestCircle(other, num, boundsCheck)
    hitTestCircle

    zim DisplayObject method

    DESCRIPTION

    See if the shape of an object is hitting points on a circle of another object.
    The circle is based on the position, registration and bounds of object (other).
    num is how many points around the circle we test - default is 8
    Also checks center of circle hitting.

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage);
    circle.drag();
    var triangle = new Triangle(100, 100, 100, "blue");
    stage.addChild(triangle);
    circle.on("pressmove", function() {
       if (triangle.hitTestCircle(circle)) {
          stage.removeChild(triangle);
          stage.update();
       }
    });

    PARAMETERS

    other - 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
    boundsCheck (default true) do a bounds check first (faster) but if bounds are wrong - might not work

    RETURNS a Boolean true if hitting, false if not

    CLOSE ▲VIEW ▤BITS EXPAND 15339 ▶︎ obj.hitTestCircles(other, margin)
    CLOSE ▲obj.hitTestCircles(other, margin)
    hitTestCircles

    zim DisplayObject method

    DESCRIPTION

    Uses an equation to see if two circles are intersecting.
    This is faster than hitTests on shapes - so will have the speed of hitTestBounds and hitTestGrid.
    The circles are based on the bounds of the two objects - it does not matter on which object the method is placed.
    If the bounds are not square then half the average length of the sides is used as the radius.
    A margin parameter is provided to tweak the hitTest

    EXAMPLE

    var ball = new Circle(50, "red");
    ball.center(stage);
    ball.drag();
    var basket = new Circle(100, "blue");
    stage.addChild(basket);
    ball.on("pressmove", function() {
       if (ball.hitTestCircles(basket)) {
          zog("points!");
       }
    });

    PARAMETERS

    other - the object whose circle based on the bounding rect we are using
    margin (default 0) pixels the distance between circles is increased or decreased to effect the hit

    RETURNS a Boolean true if hitting, false if not

    CLOSE ▲VIEW ▤EXPAND 15396 ▶︎ obj.hitTestBounds(other, margin, boundsShape)
    CLOSE ▲obj.hitTestBounds(other, margin, boundsShape)
    hitTestBounds

    zim DisplayObject method

    DESCRIPTION

    See if obj.getBounds() is hitting other.getBounds().
    Margin can be adjusted to tweak the hitTest.
    Pass in a boundsShape shape if you want a demonstration of where the bounds are.

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage);
    circle.drag();
    var rect = new Rectangle(100, 100, "blue");
    stage.addChild(rect);
    circle.on("pressmove", function() {
       if (circle.hitTestBounds(rect)) {
          stage.removeChild(rect);
          stage.update();
       }
    });

    PARAMETERS

    other - another object whose rectanglular bounds we are testing
    margin (default 0) shifted distance in pixels before hit is counted - can be positive or negative
    boundsShape - (default null) an empty 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 15468 ▶︎ obj.boundsToGlobal(rect, flip)
    CLOSE ▲obj.boundsToGlobal(rect, flip)
    boundsToGlobal

    zim DisplayObject method

    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

    PARAMETERS

    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 15529 ▶︎ obj.hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
    CLOSE ▲obj.hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
    hitTestGrid

    zim DisplayObject method

    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

    Ticker.add(function() {
       var index = stage.hitTestGrid(200, 200, 10, 10, stage.mouseX, stage.mouseY);
       if (index) zog(index);
    });

    offsetX, offsetY, spacingX, spacingY, local, type

    PARAMETERS

    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 15596 ▶︎ obj.move(x, y, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, protect, override, from, set, id)
    CLOSE ▲obj.move(x, y, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, protect, override, from, set, id)
    move

    zim DisplayObject method
    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 animate()
    (which this function calls after consolidating x an y into an object).

    NOTE to temporarily prevent animations from starting set ANIMATE to false
    NOTE see pauseAnimate(state, ids) and stopAnimate(ids) for controlling tweens when running

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage);
    circle.move(100, 100, 700, "backOut");

    // see animate for more complex examples

    PARAMETERS - supports DUO - parameters or single object with properties below

    ** some parameters below support ZIM VEE values that use zik() to pick a random option
    The ZIM VEE value can be the following:
    1. an Array of values to pick from - eg. ["red", "green", "blue"]
    2. a Function that returns a value - eg. function(){return Date.now();}
    3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required
    4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive
    5. a single value such as a Number, String, Rectangle(), etc. this just passes through unchanged

    NOTE if using move as a zim function the first parameter is:
    target - |ZIM VEE| the target object to tween

    x and y - |ZIM VEE| the absolute positions to tween to
       RELATIVE VALUES: you can pass in relative values by putting the numbers as strings
       x:"100" will animate the object 100 pixels to the right of the current x position
       x:100 will animate the oject to an x position of 100
    time - |ZIM VEE| the time for the tween in milliseconds 1000 ms = 1 second
    ease - |ZIM VEE| (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 - |ZIM VEE| (default 0) milliseconds to wait before doing animation
    loop - (default false) set to true to loop animation
    loopCount - |ZIM VEE| (default 0) if loop is true how many times it will loop (0 is forever)
    loopWait - |ZIM VEE| (default 0) milliseconds to wait before looping (post animation wait)
    loopCall - (default null) calls function after loop and loopWait (not including last loop)
    loopParams - (default target) parameters to send loopCall function
    loopWaitCall - (default null) calls function after at the start of loopWait
    loopWaitParams - (default target) parameters to send loopWaitCall function
    rewind - |ZIM VEE| (default false) set to true to rewind (reverse) animation (doubles animation time)
    rewindWait - |ZIM VEE| (default 0) milliseconds to wait in the middle of the rewind
    rewindCall - (default null) calls function at middle of rewind after rewindWait
    rewindParams - (default target) parameters to send rewindCall function
    rewindWaitCall (default null) calls function at middle of rewind before rewindWait
    rewindWaitParams - (default target) parameters to send rewindCall 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 - |ZIM VEE| (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 stopAnimate()
       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 - |ZIM VEE| (default false) set to true to animate from obj properties to the current properties set on target
    set - |ZIM VEE| (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 ▤EXPAND 15689 ▶︎ obj.animate(obj, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, css, protect, override, from, set, id)
    CLOSE ▲obj.animate(obj, time, ease, call, params, wait, waitedCall, waitedParams, loop, loopCount, loopWait, loopCall, loopParams, loopWaitCall, loopWaitParams, rewind, rewindWait, rewindCall, rewindParams, rewindWaitCall, rewindWaitParams, sequence, sequenceCall, sequenceParams, sequenceReverse, ticker, props, css, protect, override, from, set, id)
    animate

    zim DisplayObject method
    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 move() to animate position x, y
    although you can animate x an y just fine with animate.

    NOTE to temporarily prevent animations from starting set ANIMATE to false
    NOTE see pauseAnimate(state, ids) and stopAnimate(ids) for controlling tweens when running

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage);
    circle.alpha = 0;
    circle.sca(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 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 ANIMATE constant to skip animations while building
    // See the http://zimjs.com/code/ornamate.html example

    // RELATIVE animation
    // rotate the rectangle 360 degrees from its current rotation
    rectangle.animate({rotation:"360"}, 1000);

    // pulse circle
    var circle = new 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

    EXAMPLE

    // using ZIM VEE value:
    // this will animate the alpha to between .5 and 1 in either 1000ms or 2000ms
    circle.animate({alpha:{min:.5, max:1}}, [1000, 2000]);

    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 Rectangle({color:frame.pink})
       .centerReg(stage)
       .sca(0); // hiding it to start

    var circle = new 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;
             pauseAnimate(paused, "square");
       });

    EXAMPLE

    // sequence example to pulse two circles
    var circles = new Container(stageW, stageH).addTo(stage);
    var circle1 = new Circle(50, "red").center(circles);
    var circle2 = new Circle(50, "blue").center(circles).mov(70);
    circles.animate({
       obj:{scale:1},
       time:500,
       loop:true,
       rewind:true,
       from:true,
       sequence:500
    });

    PARAMETERS - supports DUO - parameters or single object with properties below

    ** some parameters below support ZIM VEE values that use zik() to pick a random option
    The ZIM VEE value can be the following:
    1. an Array of values to pick from - eg. ["red", "green", "blue"]
    2. a Function that returns a value - eg. function(){return Date.now();}
    3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required
    4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive
    5. a single value such as a Number, String, Rectangle(), etc. this just passes through unchanged

    NOTE if using move as a zim function the first parameter is:
    target - |ZIM VEE| the target object to tween

    obj - the object literal holding properties and values to animate (includes a scale - convenience property for scaleX and scaleY)
       |ZIM VEE| - each obj property value optionally accepts a ZIM VEE value for zik() to pick randomly from (except calls and params)
       RELATIVE VALUES: you can pass in relative values by putting the numbers as strings
          rotation:"360" will animate the rotation of the object 360 degrees from its current rotation
          whereas rotation:360 will animate the rotation of the object to 360 degrees
       ANIMATION SERIES: if you pass in an array for the obj value, 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 - |ZIM VEE| the time for the tween in milliseconds 1000 ms = 1 second
    ease - |ZIM VEE| (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 - |ZIM VEE| (default 0) milliseconds to wait before doing animation
    waitedCall - (default null) calls function after wait is done if there is a wait
    waitedParams - (default target) parameters to send waitedCall function
    loop - (default false) set to true to loop animation
    loopCount - |ZIM VEE| (default 0) if loop is true how many times it will loop (0 is forever)
    loopWait - |ZIM VEE| (default 0) milliseconds to wait before looping
    loopCall - (default null) calls function after loop and loopWait (not including last loop)
    loopParams - (default target) parameters to send loopCall function
    loopWaitCall - (default null) calls function after at the start of loopWait
    loopWaitParams - (default target) parameters to send loopWaitCall function
    rewind - |ZIM VEE| (default false) set to true to rewind (reverse) animation (doubles animation time)
    rewindWait - |ZIM VEE| (default 0) milliseconds to wait in the middle of the rewind
    rewindCall - (default null) calls function at middle of rewind after rewindWait
    rewindParams - (default target) parameters to send rewindCall function
    rewindWaitCall - (default null) calls function at middle of rewind before rewindWait
    rewindWaitParams - (default target) parameters to send rewindCall function
    sequence - (default 0) the delay time in milliseconds to run on children of a container or an array of target animations
       with the addition of ZIM VEE object to the target, you must noZik the array
       for example, target = container or target = {noZik:[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 - |ZIM VEE| (default false) set to true to sequence through container or array backwards
    ticker - (default true) set to false to not use an automatic 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="</script> target=_blank class=links>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
          animate(zid("tagID"), {opacity:0}, 2000); // etc.
       </script>
    protect - (default false) protects animation from being interrupted before finishing
       unless manually interrupted with stopAnimate()
       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 - |ZIM VEE| (default false) set to true to animate from obj properties to the current properties set on target
    set - |ZIM VEE| (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 16570 ▶︎ obj.stopAnimate(ids)
    CLOSE ▲obj.stopAnimate(ids)
    stopAnimate

    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 animate, move, Sprite parameter
    An animation series will have the same id for all the animations inside.
    See also pauseAnimate

    NOTE formerly stopZimAnimate - which still works but is depreciated

    NOTE calling stopAnimate(id) stops tweens with this id on all objects
    calling object.stopAnimate(id) stops tweens with this id on the target object

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 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.stopAnimate()}); // will stop all tweens on rect
    // OR
    rect.on("click", function() {rect.stopAnimate("scale");}); // will stop scaling tween

    stopAnimate("scale") // will stop tweens with the scale id on all objects

    stopAnimate(); // will stop all animations

    PARAMETERS

    ids - (default null) pass in an id or an array of ids specified in animate, move and Sprite

    RETURNS null if run as stopAnimate() or the obj if run as obj.stopAnimate()

    CLOSE ▲VIEW ▤BITS EXPAND 16648 ▶︎ obj.pauseAnimate(state, ids)
    CLOSE ▲obj.pauseAnimate(state, ids)
    pauseAnimate

    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 animate, move, Sprite parameter.
    An animation series will have the same id for all the animations inside.
    See also stopAnimate

    NOTE formerly pauseZimAnimate - which still works but is depreciated

    NOTE calling pauseAnimate(true, id) pauses tweens with this id on all objects
    calling object.pauseAnimate(true, id) pauses tweens with this id on the target object

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 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.pauseAnimate()}); // will pause all tweens on rect
    // OR
    var paused = false;
    rect.on("click", function() {
       paused = !paused;
       rect.pauseAnimate(paused, "scale");
    }); // will toggle the pausing of the scaling tween

    pauseAnimate(false, "scale") // will unpause tweens with the scale id on all objects

    pauseAnimate(); // 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 animate, move and Sprite

    RETURNS null if run as pauseAnimate() or the obj if run as obj.pauseAnimate()

    CLOSE ▲VIEW ▤EXPAND 16731 ▶︎ obj.wiggle(property, baseAmount, minAmount, maxAmount, minTime, maxTime, totalTime, type, ease, integer, id, startType)
    CLOSE ▲obj.wiggle(property, baseAmount, minAmount, maxAmount, minTime, maxTime, totalTime, type, ease, integer, id, startType)
    wiggle

    zim DisplayObject method

    DESCRIPTION

    Wiggles the property of the target object between a min and max amount to either side of the base amount
    in a time between the min and max time.
    Uses animate() so to pause or stop the wiggle use pauseAnimate and stopAnimate
    either on the object or using an id that you pass in as a parameter

    NOTE calling pauseAnimate(true, id) pauses tweens with this id on all objects
    calling target.pauseAnimate(true, id) pauses tweens with this id on the target object

    EXAMPLE

    var ball = new Circle().centerReg(stage);
    ball.wiggle("x", ball.x, 10, 30, 300, 1000);
    // wiggles the ball 10-30 pixels to the left and right of center taking 300-1000 ms each time

    ball.pauseAnimate(); // will pause the wiggle

    PARAMETERS - supports DUO - parameters or single object with properties below

    NOTE if using wiggle as a zim function the first parameter is:
    target - the object to wiggle

    property - the property name as a String that will be width-indicatorLength-edgeLeft-edgeRight
    baseAmount - the center amount for the wiggle - wiggle will go to each side of this center
    minAmount - the min amount to change to a side of center
    maxAmount - (default minAmount) the max amount to change to a side of center
    minTime - (default 1000 ms) the min time in milliseconds to go from one side to the other
    maxTime - (default minTime) the max time in milliseconds to go from one side to the other
    totalTime - (default forever) the total time in milliseconds until a stopAnimate is called on wiggle
       adds a wiggleTimeout property to the wiggle target that holds the setTimeout id for cancelation of totalTime
    type - (default "both") set to "positive" to wiggle only the positive side of the base or "negative" for negative side (or "both" for both)
    ease - (default "quadInOut") the ease to apply to the animation
    integer - (default false) tween to an integer value between min and max amounts
    id - (default random id) the id to use for pauseAnimate() or stopAnimate()
    startType - (default "both") set to "positive" to start wiggle in the positive side of the base or "negative" for negative side (or "both" for either)

    EVENTS

    if totalTime is set, target will dispatch a wigglestop event when the wiggle stops

    RETURNS target for chaining

    CLOSE ▲VIEW ▤EXPAND 16829 ▶︎ obj.loop(call, reverse, step, start, end)
    CLOSE ▲obj.loop(call, reverse, step, start, end)
    loop

    zim DisplayObject method
    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 Container();
    loop(1000, function(i) { // gets passed an index i, total 1000, start 0, end 999, obj 1000
       // make 1000 rectangles
       container.addChild(new Rectangle());
    });
    stage.addChild(container);

    // to continue or break from loop have the function return the string "continue" or "break"
    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];
    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 = 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
    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

    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 17001 ▶︎ obj.copyMatrix(source)
    CLOSE ▲obj.copyMatrix(source)
    copyMatrix

    zim DisplayObject method

    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

    PARAMETERS

    source - object from which the transform properties are being copied

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 17039 ▶︎ obj.cur(type)
    CLOSE ▲obj.cur(type)
    cur

    zim DisplayObject method

    DESCRIPTION

    Chainable function that sets the object's cursor to the type provided - same as CSS cursors

    EXAMPLE

    var circle = new Circle(10, "red").center(stage).cur(); // "pointer"
    circle.on("click", function(){zog("yes");});

    PARAMETERS

    type - (default "pointer") the CSS cursor to set
       https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
       Common cursors are "default", "pointer", "Wait", "move", "grab", "grabbing", "zoom-in", "zoom-out", and various resize like "ew-resize"

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 17068 ▶︎ obj.sha(color||Shadow, offsetX, offsetY, blur)
    CLOSE ▲obj.sha(color||Shadow, offsetX, offsetY, blur)
    sha

    zim DisplayObject method

    DESCRIPTION

    Chainable function that sets the object's drop shadow to a CreateJS Shadow indirectly or directly

    EXAMPLE

    // indirectly set the CreateJS Shadow
    // with sha(color, offsetX, offsetY, blur)
    var circle = new Circle(10, "red").center(stage).sha("rgba(0,0,0,.2)", 10, 5, 5);

    // directly set the CreateJS Shadow
    // with sha(new createjs.Shadow())
    var shadow = new createjs.Shadow("rgba(0,0,0,.2)", 10, 5, 5);
    var circle1 = new Circle(10, "pink").center(stage).mov(-30).sha(shadow);
    var circle2 = new Circle(10, "yellow").center(stage).mov(30).sha(shadow);

    PARAMETERS

    color||Shadow (default "rgba(0,0,0,.3)") the CSS color for the shadow - "red", frame.dark, etc.
       or pass a single parameter that is a CreateJS Shadow object https://www.createjs.com/docs/easeljs/classes/Shadow.html
    offsetX (default .08 the width or 5 if no width) the distance in the x that the shadow is moved over - can be negatitve
    offsetY (default .08 the height or 5 if no height) the distance in the y that the shadow is moved over - can be negatitve
    blur (default .16 the width or 10 if no width) the distance the shadow is blurred

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤EXPAND 17110 ▶︎ obj.pos(x, y)
    CLOSE ▲obj.pos(x, y)
    pos

    zim DisplayObject method

    DESCRIPTION

    Chainable convenience function to position x and y
    See also the CreateJS set({prop:val, prop2:val}) method;

    EXAMPLE

    circle.pos(100, 100);

    PARAMETERS

    x - (default null) the x position
    y - (default null) the y position

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17138 ▶︎ obj.mov(x, y)
    CLOSE ▲obj.mov(x, y)
    mov

    zim DisplayObject method

    DESCRIPTION

    Move the object over in the x and/or y
    Equivalant 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 Circle().center(stage).mov(50); // move to right 50

    PARAMETERS

    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 ▤BITS EXPAND 17170 ▶︎ obj.alp(alpha)
    CLOSE ▲obj.alp(alpha)
    alp

    zim DisplayObject method

    DESCRIPTION

    Chainable convenience function to set the alpha
    See also the CreateJS set({prop:val, prop2:val}) method;

    EXAMPLE

    circle.alp(.5);

    PARAMETERS

    alpha - default(null) the alpha between 0 and 1

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17196 ▶︎ obj.rot(rotation)
    CLOSE ▲obj.rot(rotation)
    rot

    zim DisplayObject method

    DESCRIPTION

    Chainable convenience function to set the rotation
    See also the CreateJS set({prop:val, prop2:val}) method;

    EXAMPLE

    rect.rot(180);

    PARAMETERS

    rotation - (default null) the rotation in degrees

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17222 ▶︎ obj.siz(width, height, only)
    CLOSE ▲obj.siz(width, height, only)
    siz

    zim DisplayObject method

    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 width, height, widthOnly, heightOnly.

    EXAMPLE

    var rect = new 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

    PARAMETERS

    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 17269 ▶︎ obj.ske(skewX, skewY)
    CLOSE ▲obj.ske(skewX, skewY)
    ske

    zim DisplayObject method

    DESCRIPTION

    Chainable convenience function to skewX and skewY (slant)
    See also the CreateJS set({prop:val, prop2:val}) method;

    EXAMPLE

    circle.ske(20);

    PARAMETERS

    skewX - (default null) the x skew
    skewY - (default null) the y skew

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17297 ▶︎ obj.reg(regX, regY)
    CLOSE ▲obj.reg(regX, regY)
    reg

    zim DisplayObject method

    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 centerReg()

    EXAMPLE

    circle.reg(200, 200);

    PARAMETERS

    regX - (default null) the x registration
    regY - (default null) the y registration

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17328 ▶︎ obj.sca(scale, scaleY)
    CLOSE ▲obj.sca(scale, scaleY)
    sca

    zim DisplayObject method

    DESCRIPTION

    Chainable convenience function to do scaleX and scaleY in one call.
    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 scaleTo(), fit() and Layout().

    EXAMPLE

    circle.sca(.5); // x and y scale to .5
    circle.sca(.5, 2); // x scale to .5 and y scale to 2

    PARAMETERS

    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 17360 ▶︎ obj.scaleTo(boundObj, percentX, percentY, type, boundsOnly)
    CLOSE ▲obj.scaleTo(boundObj, percentX, percentY, type, boundsOnly)
    scaleTo

    zim DisplayObject method

    DESCRIPTION

    Scales object to a percentage of another object's bounds and scale
    Percentage is from 0 - 100 (not 0-1).
    Also see sca(), fit() and Layout().

    EXAMPLE

    circle.scaleTo(stage, 50); // scale to half the stageW
    circle.scaleTo(stage, 10, 20); // fit within these scalings of the stage

    PARAMETERS - supports DUO - parameters or single object with properties below

    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)
    boundsOnly - (default false) set to true to scale to the boundObj's bounds only - ignoring current boundObj scale

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17424 ▶︎ obj.fit(left, top, width, height, inside)
    CLOSE ▲obj.fit(left, top, width, height, inside)
    fit

    zim DisplayObject method

    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

    PARAMETERS supports DUO - parameters or single object with properties below

    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 17511 ▶︎ obj.outline(color, size)
    CLOSE ▲obj.outline(color, size)
    outline

    zim DisplayObject method

    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 Circle(50, "red");
    circle.center(stage);
    // show registration and origin at center and bounding box around outside
    circle.outline();

    PARAMETERS supports DUO - parameters or single object with properties below

    color - (default brown) the color of the outline
    size - (default 2) the stroke size of the outline

    RETURNS the obj for chaining;

    CLOSE ▲VIEW ▤BITS EXPAND 17598 ▶︎ obj.addTo(container, index)
    CLOSE ▲obj.addTo(container, index)
    addTo

    zim DisplayObject method

    DESCRIPTION

    A wrapper function for addChild() / addChildAt() to add the obj to the container.
    This allows us to chain more effectively:
    var circle = new 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 Circle(50, "red");
    circle.addTo(stage);
    // with chaining - and dragging:
    var circle = new Circle(50, "red").addTo(stage).drag();

    var rect = new Rectangle(100, 100, "blue");
    rect.addTo(stage, 0); // place on bottom

    PARAMETERS

    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 ▤BITS EXPAND 17644 ▶︎ obj.removeFrom(container)
    CLOSE ▲obj.removeFrom(container)
    removeFrom

    zim DisplayObject method

    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 Circle(50, "red");
    circle.addTo(stage);
    // later
    circle.removeFrom(stage);

    PARAMETERS

    container - the container to remove the object from

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17676 ▶︎ obj.added(call, interval, maxTime)
    CLOSE ▲obj.added(call, interval, maxTime)
    added

    zim DisplayObject method

    DESCRIPTION

    Calls callback function when object is added to the stage
    CreateJS has an "added" event that triggers when an object is added to another container
    but this container may not be on the stage.
    added polls several times quickly and then every 100ms to see if the object has a stage property
    Once it does then it calls the callback and removes the interval

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.added(function() {zog("has stage");});

    PARAMETERS

    call - the function to call when added - will call right away if object is already added
       call will receive a reference to the stage and the object as parameters
    interval - (default 100) time in ms to check - keeps repeating until stage is there or maxTime is reached
    maxTime - (default null) time in ms to keep checking or forever if not provided

    RETURNS id of interval so clearInterval(id) will stop added() from checking for stage

    CLOSE ▲VIEW ▤EXPAND 17731 ▶︎ obj.centerReg(container, index, add)
    CLOSE ▲obj.centerReg(container, index, add)
    centerReg

    zim DisplayObject method

    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 center() for centering without changing the registration point.

    EXAMPLE

    var rect = new 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});

    PARAMETERS supports DUO - parameters or single object with properties below

    container - (default null) centers the object on and adds to the container
    index - (default null) if provided will addChildAt the object at the index (0 being bottom)
    add - (default true) set to false to only center the object on the container

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17769 ▶︎ obj.center(container, index, add)
    CLOSE ▲obj.center(container, index, add)
    center

    zim DisplayObject method

    DESCRIPTION

    Centers the object on the container.
    Will default to adding the object to the container.
    Also see centerReg() for centering registration point at same time.

    EXAMPLE

    var rect = new 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 centerReg() when rotating and scaling
    rect.animate({obj:{rotation:360}, time:1000, ease:"linear", loop:true});

    PARAMETERS supports DUO - parameters or single object with properties below

    container - centers the object on and adds to the container
    index - (default null) if provided will addChildAt the object at the index (0 being bottom)
    add - (default true) set to false to only center and not add the object to the container

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17846 ▶︎ obj.place(id)
    CLOSE ▲obj.place(id)
    place

    zim DisplayObject method

    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

    PARAMETERS

    id - (default null) the name of the object so that the log gives you complete code

    RETURNS obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 17881 ▶︎ obj.placeReg(id)
    CLOSE ▲obj.placeReg(id)
    placeReg

    zim DisplayObject method

    DESCRIPTION

    Gives draggable indicator to position a registration point in an object
    This is for when building and when positioned, look at the console
    for registration code and delete the placeReg call.

    EXAMPLE

    myContainer.placeReg("myContainer"); // lets you drag an indicator around - then see console

    PARAMETERS

    id - (default null) the name of the object so that the log gives you complete code

    RETURNS undefined

    CLOSE ▲VIEW ▤EXPAND 17922 ▶︎ obj.expand(padding, paddingVertical)
    CLOSE ▲obj.expand(padding, paddingVertical)
    expand

    zim DisplayObject method

    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 Circle(10, "red");
    circle.center(stage);
    circle.expand(); // makes hit area bigger
    circle.on("click", function(){zog("yes");});

    PARAMETERS

    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 17957 ▶︎ obj.setMask(mask)
    CLOSE ▲obj.setMask(mask)
    setMask

    zim DisplayObject method

    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, Triangle or Blob.
    Masking must be done with a Shape and the ZIM shapes are actually containers with Shape objects in them.
    So setMask() takes care of all the arrangements and updates the mask when using the following ZIM features:
    drag(), animate(), move(), gesture(), transform() and using the Bezier curves, etc. with Blob.

    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 expand() for instance (use 0 for padding)
    You can also set the alpha to .01

    NOTE before ZIM 6.7.1, setMask could not be chained - but now it can

    EXAMPLE

    var label = new Label("BIG", 200, null, "white");
    label.center(stage);
    var rect = new Rectangle(200,100,"black");
    rect.center(stage).alpha = 0;
    var label = new Label("BIG", 200, null, "white")
       .center(stage)
       .drag()
       .setMask(rect);

    NOTE to drag something, the alpha cannot be 0
    so we can use 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 Label("BIG", 200, null, "white").center(stage);
    var rect = new Rectangle(200,100,"black")
       .expand(0)
       .center(stage)
       .alp(0)
       .drag();
    label.setMask(rect);

    NOTE move(), animate(), drag(), gesture() and transform() work specially with zim shapes to make this work
    otherwise, if you want to reposition your mask then set the dynamic parameter to true
    or use a zim.Shape() or createjs.Shape directly to avoid this issue

    EXAMPLE

    // masking with a Blob
    var image = frame.asset("pic.jpg").centerReg(stage);
    var blob = new Blob({color:frame.faint}).center(stage); // this is draggable by default
    image.setMask(blob);

    PARAMETERS supports DUO - parameters or single object with properties below

    mask - the object whose shape will be the mask
    dynamic - (default false) set to true if mask is being moved
       Blobs and shapes with drag(), transform(), gesture() and animate() will auto set dynamic to true if dynamic parameter is left empty
       Setting dynamic to false for these will remain with a setting of dynamic false and the mask will not move once set

    NOTE use obj.setMask(null) to clear the mask

    RETURNS the object for chaining
    Older versions returned the mask shape - the mask shape can now be accessed by obj.zimMask or mask.zimMask

    CLOSE ▲VIEW ▤BITS
    ZIM CONTROLSEXPAND 18079 ▶︎ ANIMATE
    CLOSE ▲ANIMATE
    ANIMATE

    zim constant

    DESCRIPTION

    Set to false to stop move() and 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 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 ANIMATE to true.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    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 Circle(200, frame.green);
    circle1.center(stage);
    circle1.x -= 110;
    circle1.animate({obj:{alpha:0, scale:0}, time:700, from:true});

    var circle2 = new 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 18120 ▶︎ OPTIMIZE
    CLOSE ▲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 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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // add this to the top of your script
    OPTIMIZE = true;
    var slider = new 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 Ticker as you may have to set Ticker.update = true;

    CLOSE ▲VIEW ▤EXPAND 18166 ▶︎ ACTIONEVENT
    CLOSE ▲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

    NOTE ACTIONEVENT requires the zim namespace regardless of zns settings

    EXAMPLE

    // put this at the top of your code
    ACTIONEVENT = "click";

    var checkBox = new CheckBox();
    checkBox.center(stage);
    // note it now operates on mouseup (click)
    // the default ACTIONEVENT is mousedown

    CLOSE ▲VIEW ▤EXPAND 18194 ▶︎ Ticker = {}
    CLOSE ▲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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle(50, "red");
    circle.center(stage);
    Ticker.add(function(){
       circle.x++;
    }, stage); // stage is optional - will be the first stage made if left out

    // to be able to remove the function:
    Ticker.add(tryMe, stage);
    function tryMe() {circle.x++;}
    Ticker.remove(tryMe);

    // OR with function literal, use the return value
    var tickerFunction = Ticker.add(function(){circle.x++;}, stage);
    Ticker.remove(tickerFunction);

    // Check to see if a function is in the Ticker for that stage:
    zog(Ticker.has(stage, tickerFunction)); // false at the moment until added again

    USAGE

    if 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)

    ** As of ZIM 5.1.0, stage is optional and will default to the stage of first Frame object made
    Ticker.always(stage) - overrides OPTIMIZE and always runs an update for the stage even with no function in queue
    Ticker.alwaysOff(stage) - stops an always Ticker for a stage
    Ticker.add(function, stage) - adds the function to the Ticker queue for a given stage and returns the function that was added
    Ticker.remove(function) - removes the function from the Ticker queue
    Ticker.removeAll([stage]) - removes all functions from the Ticker queue (optionally per stage)
    Ticker.has(function, stage) - returns a Boolean true if function is currently added to the Ticker for the stage - or false if not currently added
    Ticker.setFPS(30, 60) - (mobile, pc) default is set at natural requestAnimationFrame speed - this seems to be the smoothest
    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
    Ticker.raw(function) - a stand-alone direct call to RequestAnimationFrame for maximum speed
       Example: http://zimjs.com/code/raw/
       Does not use Dictionary lookup that the add() uses so provides ultimate speed for generative art, etc.
       Returns function as id so can use Ticker.removeRaw(id)
       raw() does not automatically update the stage so put a stage.update() in the function
       raw() is for when you want to run one function much like the draw() in Processing, the animate() renderer in ThreeJS, etc.
       add() is for when you want to run multiple functions with a single globally coordinated stage.update()
    Ticker.removeRaw(id) - remove the raw function based on the return value of the var id = Ticker.raw(function)
    Ticker.dispose([stage]) - removes all functions from the queue removes and removes the list (optionally per stage)

    PROPERTIES (static)

    Ticker.update = true - overrides OPTIMIZE and forces an update if a function is in the queue
    Ticker.update = false - forces no update regardless of OPTIMIZE
    Ticker.update = null (default) - only updates if there is a function in queue and OPTIMIZE is false
    Ticker.list - a ZIM Dictionary holding arrays with the functions in the Ticker queue for each stage
    Ticker.list.objects - the array of stages in the Ticker
    Ticker.list.values - the array holding an array of functions for each stage in the Ticker
    Ticker.framerate - read only - use setFPS() to set

    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 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 OPTIMIZE = true and set 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 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 OPTIMIZE = false and then set Ticker.update = false
    5. if you want maximum speed use Ticker.raw(function) which flows directly through to a RequestAnimationFrame

    CLOSE ▲VIEW ▤EXPAND 18428 ▶︎ Accessibility(appName, tabOrder, tabIndex, cycle, frame, decimals, alwaysHighlight, AHTime, AHColor, AHBorderWidth, AHBorderPadding, AHAlpha, AHObject, AHObjectScale)
    CLOSE ▲Accessibility(appName, tabOrder, tabIndex, cycle, frame, decimals, alwaysHighlight, AHTime, AHColor, AHBorderWidth, AHBorderPadding, AHAlpha, AHObject, AHObjectScale)
    Accessibility

    zim class - extends a createjs.EventDispatcher

    DESCRIPTION

    Adds Screen Reader accessibility to the canvas for TAB key or Swipe (mobile) highlighting of ZIM objects
    Some objects can be activated using the ENTER key and adjusted using the ARROW keys
    Default or custom titles can be set to be read by the Screen Reader
    The objects and the order in which the objects recieve focus can be set with a tabOrder array
    A text message can be passed to the talk() method and it will be read by a Screen Reader

    NOTE Instructions to activate a screen reader on desktop or laptop computers
    On Windows, you can type Narrator into Cortana and run it - it is really easily
    On Mac, under Accessibility choose Voice Over
    On Android, under Accesibility choose Voice and turn on TalkBack
    Windows worked at ZIM 6, Apple worked at 6.1.0, Android worked at 6.1.0 aside from Slider, Dial, Stepper and ColorPicker
    Custom readers were not tested

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var button = new Button().center(stage)
    button.on("mousedown", function() {
       zgo("http://zimjs.com");
    });
    var dial = new Dial().center(stage).mov(200);

    var accessibility = new Accessibility();
    // this will automatically read in all objects on the stage and give default messages for the Screen Reader
    // ENTER key events will be added to objects that will translate to mousedown and click events on the object
    // Tab (swipe on mobile) to focus on the Button and press enter (double tap on mobile) to go to the ZIM site
    // The Dial can use arrows to increase and decrease its value (up and right increase, down and left decrease)
    // On mobile, double tapping the Dial brings up a select box with options (as does Slider, Stepper, and ColorPicker)

    // OR

    var accessibility = new Accessibility("Second Example");
    accessibility.tabOrder = [
       dial,
       {obj:button, title:"Press ENTER to go to ZIM site"}
    ];
    // this will start and end the app with "Second Example" being read (rather than default, "application")
    // the dial will be the first item to tab to
    // the button has a tabOrder object so it will have the title read rather than the default button message
    // You could also provide a tabOrder object for the dial as well

    NOTE Please see http://zimjs.com/code/screenreader for a detailed example

    PARAMETERS supports DUO - parameters or single object with properties below

    appName - (default "application") read in screen reader when application receives or loses focus
    tabOrder - (default an array of all ZIM Display Objects on stage) an array of zim Display Objects
       These will be given TAB key control (and ENTER and ARROWS) and will work with Screen Readers
       Or given swipe left/right and double tap on mobile
       *** Alternatively, an array of tabOrder objects with an obj property and a title property can be used
       The obj is the Dispay Object and the title is what is read by the Screen Reader
       eg. {obj:button, title:"Press Enter Key to start game"}
       Can also specify tabOrder as a property of Accessibility
       *** The tabOrder may change compared to the array that is initially provided
       *** as RadioButtons, Picker, Tabs, and Pad components are split into separate items
    tabIndex - (default -1) - a starting index for focus - or can set tabIndex property after object is made
    cycle - (default false) set to true to keep tab order inside application rather than leaving application when an end is reached
    decimals - (default 2) number of decimals max to read for screen reader
    frame - (default currentFrame) the frame
    alwaysHighlight - (default false) screen readers will add their own highlights - but this will set highlight to true even if there is no screen reader
       Set to true to place a rectangle around the object being put into focus by pressing the tab key or swipe on mobile
       This will replace screen reader highlights (eg. for Windows Narrator) except for when aria is true (eg. Apple Voice Over)
       The rest of the parameters relate to the alwaysHighlight - meaning highlight even if there is no screen reader
    AHTime - (default 700ms) milliseconds to show the alwaysHighlight
    AHColor - (default brown) - the color of the alwaysHighlight rectangle
    AHBorderWidth - (default 3) thickness of border
    AHBorderPadding - (default 5) distance from object bounds outward towards border
    AHAlpha - (default .8) alpha of the alwaysHighlight
    AHObject - (default null) set to a display object - including animated objects - to override the rectangle as a alwaysHighlight object
    AHObjectScale - (default .8) scale the AHObject relative to the object with tab focus

    PROPERTIES

    tabOrder - get or set an array with the order in which display objects will receive focus with tab and shift tab (swipe on mobile)
    tabIndex - get or set the index of the tabOrder (also see currentObject)
       Setting works only if object at the index is on the stage
       Returns -1 if no tabOrder object has the focus
    currentObject - get or set the object in the tabOrder that has focus
       Objects have the following Accessibility properties added:
          zimAccessibility - the accessibility object
          zimTabIndex - the index in the tabOrder
          zimTabTag - the HTML tag that is used to represent the object to the screen reader
          zimTabParent - the parent of an object for RadioButtons, Tabs, and Pads (for others, the zimTabParent is the object)
          tabIndex - the index of the tag in tabParent (if there is a parent)
          type - the type of object. If there is a zimTabParent (that is not itself), the type is RadioButton, TabsButton or PadButton
    activatedObject - get the object in the tabOrder that was last clicked or had the ENTER key pressed on
    startAppTag - get the HTML tag that announces application start
    endAppTag - get the HTML tag that announces application end
    cycle - (default false) set to true to keep tab order inside application rather than leaving application when an end is reached
    decimals - (default 2) number of decimals max to read for screen reader
    frame - (default currentFrame) the frame
    alwaysHighlight - Boolean to use a alwaysHighlight rectangle
    AHTime - milliseconds to show the hightlight
    AHColor - the color of the alwaysHighlight rectangle
    AHBorderWidth - thickness of border
    AHBorderPadding - (default 5)distance from object bounds outward towards border
    AHAlpha - alpha of the alwaysHighlight
    AHObject - set to a display object - including animated objects - to override the rectangle as a alwaysHighlight object
    AHObjectScale - scale the AHObject relative to the object with tab focus
    enabled - default is true - set to false to disable

    METHODS

    tab(dir) - set dir to 1 (default) to emulate tab forward or -1 to emulate shift tab
    changeTitle(target, title, activate) - change a title for the Screen Reader
       target - the tabObject (eg. button) or the tabIndex of the item in the tabOrder to change
          *** The tabOrder may change compared to the array that is initially provided
          *** as RadioButtons, Picker, Tabs, and Pad components are split into separate items
       title - the new title that will be read to the screen reader
          If no title is provided any component passed will just update to its currentValue or selectedIndex
       activate (default false) - set to true to set focus of item at index and send to Screen Reader
    talk(words) - tell the Screen Reader to read the words provided (does not affect focus)
    resize(target) - target is the object or index of the object to update - or do not pass a target to update all
       This needs to be done if the object is moved, scaled, or removed from / re-added to the stage
       Accessibility works by placing HTML tags behind the canvas where the ZIM objects exist - so resize() handles this
       Use the Frame resize event and optionally, the ResizeManager()
    dispose() - removes listeners and sets tabOrder to []

    EVENTS

    Dispatches a "change" event when the screen reader is about to talk
       This is when the talk() method runs or the tabIndex is changed (from click, swipe, tab, changeTitle - with activate true)
       The event object has a title property that holds the words the screen reader will say
       Several change events can happen at the same time so what is said is usually the last
       but the talk() method takes priority as it runs in alert mode so focus is not lost
    The Enter key dispatches mousedown and click events from object with focus
       The event object has a fromEnter property which is true if from an enter key on the object
       This could trigger a button press for instance

    CLOSE ▲VIEW ▤EXPAND 19376 ▶︎ Swipe(obj, distance, duration)
    CLOSE ▲Swipe(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var rect = new Rectangle(200, 200, "blue");
    rect.center(stage);
    var swipe = 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
       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 19528 ▶︎ Pages(pages, transition, speed, transitionTable, holder)
    CLOSE ▲Pages(pages, transition, speed, transitionTable, holder)
    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 HotSpots() to efficiently handle multiple buttons.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // make pages (these would be containers with content)
    var home = new Rectangle(stageW, stageH, "blue");
    var hide = new Rectangle(stageW, stageH, "green");
    var find = new Rectangle(stageW, stageH, "yellow");

    var pages = new Pages({
       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 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

    pages - (default null) an array of pages or page objects - for example:
       [home, hide] assuming home and hide Containers are made OR if swipe data is desired then use page object format:
       [{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", "clear", "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.]
    holder - (default the default stage) where are we putting the pages (used for setting transition properties)

    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
       newPage can be a reference to the page or an index matching the pages array order
       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

    type - holds the class name as a String
    speed - of transitions in ms
    transitionTable - [[fromPage, toPage, "transition", ms(optional)], etc.] overrides default transition
    page - the current page object (read)
    pages - the page array initially passed as a parameter including any updates if using addPage or removePage methods
    lastPage - the last page before transition (read)
    direction - direction of transition (read)
    transitioning - read only Boolean as to whether the pages are transitioning
    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)
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, 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 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 19975 ▶︎ HotSpots(spots, local, mouseDowns)
    CLOSE ▲HotSpots(spots, local, mouseDowns)
    HotSpots

    zim class - extends a zim.Container which extends a createjs.Container

    DESCRIPTION

    HotSpots allow you to create multiple hotSpot objects on multiple pages.
    A 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.
    HotSpots lets you control many or all of your interactions in one place.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 Circle(60, "red");
    circle.center(stage);

    var button = new 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 Pages
    var hs = new 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 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 HotSpot objects - see the class underneath this one

    CLOSE ▲VIEW ▤EXPAND 20181 ▶︎ HotSpot(obj, x, y, width, height, call, local)
    CLOSE ▲HotSpot(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".

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var hs = new 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

    type - holds the class name as a String
    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 ACTIONEVENT setting
    The default is "mousedown" - if set to something else the component will act on click (press)

    CLOSE ▲VIEW ▤EXPAND 20288 ▶︎ Manager()
    CLOSE ▲Manager()
    Manager

    zim class

    DESCRIPTION

    used internally to make ResizeManager, GridManager and GuideManager
    and in future perhaps OutlineManager

    CLOSE ▲VIEW ▤EXPAND 20333 ▶︎ ResizeManager()
    CLOSE ▲ResizeManager()
    ResizeManager

    zim class extends zim.Manager abstract class

    DESCRIPTION

    Add objects with a resize() method to a ResizeManager object and call a single resize() on the ResizeManager object
    This will most likely go in a resize event on the Frame
    Works with objects such as Layout, Pages, Grid, Guide, Accessibility, Loader and TextArea

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var resizeManager = new ResizeManager();
    resizeManager.add([pages, layout, accessibility]);
    // where these three objects have already been made
    // *** Note that the Loader and TextArea are already resized if added to an Accessibility object that is resized
    frame.on("resize", function() {
       resizeManager.resize(); // without ResizeManager you would make three different resize() calls
    })

    METHODS

    add(obj) - adds object or an array of objects to the ResizeManager
       *** Note that the Loader and TextArea are already resized if added to an Accessibility object that is resized
    remove(obj) - removes object or an array of objects from the ResizeManager
    resize() - calls the resize() method of any object in the ResizeManager
    dispose() - disposes the objects in the ResizeManager and the ResizeManager itself

    PROPERTIES

    items - get or set an array of objects currently in the Manager

    CLOSE ▲VIEW ▤EXPAND 20375 ▶︎ TransformManager(objects, persistID)
    CLOSE ▲TransformManager(objects, persistID)
    TransformManager

    zim class extends CreateJS EventDispatcher

    DESCRIPTION

    Manages multiple objects with transform() methods set.
    Can use to show, hide, hideAll, add, remove and resize transform controls.
    Can be used to automatically save any transforms and reload them again on refresh of Browser / App.
    This uses localStorage.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var rect = new Rectangle(300, 200, frame.green)
       .centerReg(stage)
       .mov(-200)
       .transform();

    var circ = new Circle(100, frame.red)
       .centerReg(stage)
       .mov(200)
       .transform();

    var tm = new TransformManager([rect, circ], sample);
    // or use methods:
    // tm.add([rect, circ]);
    // tm.persist("sample"); // now when a user comes back to page the transforms will be saved

    PARAMETERS

    objects - (default null) adds the object(s) to the Transform Manager
       pass in a single object or an array of multiple objects
    persistID - (default null) String id to make ZIM remember transforms of objects (uses localStorage)

    METHODS

    add(obj) - adds object or an array of objects to the TransformManager
    remove(obj) - removes object or an array of objects to the TransformManager
    show(obj) - show controls for an object that has a transform() set
    hide(obj) - hides controls for an object that has a transform() set - still available with click
    hideAll() - hides all controls - still available with click
    resize() - calls the resize() method of any object in the ResizeManager
    persist(id) - save data after every change and reload transforms when done - must provide an id
    clearPersist(id) - clear persisting data - do this before adding shapes - must provide an id
    savePersist() - with persist() already set, this will force a saving even without a transform event being captured
       if resize() after non-transform movement is called, then this is not needed
    stopPersist() - no longer save data
    dispose(removePersist, removeControls) - default just removes manager - keeps the data
       set removePersist to true to remove the persist data
       set removeControls to true to remove the transforms and beziers of all the items

    PROPERTIES

    items - get or set (set not recommended) an array of objects currently in the TransformManager
    currentObject - the last item to get transform tools if it still has the transform tools active
    persistData - gets the persist data if it exists

    EVENTS

    Dispatches a "transformed" event when pressup on any of the controls or on click
       transformed event object has transformObject and transformType properties
       the transformType property has values of:
           FOR TRANSFORM: "size", "move", "rotate", "stretch", "reg" "reset"
           FOR BLOB, SQUIGGLE: "move", "bezierPoint", "bezierHandle", "bezierSwitch"
    Adds transformshow and transformhide events for when click to hide or show controls
       these have a transformObject property to indicate what was shown or hidden

    CLOSE ▲VIEW ▤EXPAND 20686 ▶︎ Guide(obj, vertical, percent, hideKey, pixelKey)
    CLOSE ▲Guide(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).

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 Guide();

    // better to add guides to a GuideManager
    var manager = new GuideManager();
    manager.add(new Guide(stage));
    manager.add(new Guide(stage, false));

    // or with pixels
    // manager.add(new Guide(stage, true, false));
    // manager.add(new Guide(stage, false, false));

    // then you can remove all guides with
    // manager.dispose();
    // handy with guides on multiple 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 - (default the default stage) object to add guide to for example a Container
    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

    type - holds the class name as a String
    pixels - boolean - set to true to change to pixels, false to go to percent

    CLOSE ▲VIEW ▤EXPAND 20969 ▶︎ GuideManager()
    CLOSE ▲GuideManager()
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var manager = new GuideManager();
    manager.add(new Guide());
    manager.add(new Guide(false));

    // or with pixels
    // manager.add(new Guide(true, false));
    // manager.add(new Guide(false, false));

    // then you can remove all guides with
    // manager.dispose();
    // handy with guides on multiple 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
    remove(guide) - removes guide from register
    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 21021 ▶︎ Grid(obj, color, percent, hideKey, pixelKey)
    CLOSE ▲Grid(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).

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var grid = new Grid();

    // better to add grids to a GridManager
    var manager = new GridManager();
    manager.add(new Grid());

    // or with pixels
    // manager.add(new Grid(null, false));

    // then you can remove all grids with
    // grid.dispose();
    // handy with guides on multiple 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 - (default the default stage) the object to add grid to (for example a Container)
    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

    type - holds the class name as a String
    pixels - boolean - set to true to change to pixels, false to go to percent

    CLOSE ▲VIEW ▤BITS EXPAND 21334 ▶︎ GridManager()
    CLOSE ▲GridManager()
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var manager = new GridManager();
    manager.add(new Grid());

    // or with pixels
    // manager.add(new Grid(null, false));

    // then you can remove all grids with
    // grid.dispose();
    // handy with guides on multiple 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
    remove(grid) - removes grid from the register
    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 21384 ▶︎ Layout(holder, regions, lastMargin, backgroundColor, vertical, regionShape, scalingObject, hideKey)
    CLOSE ▲Layout(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 LayoutManager to scale all at once.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 Rectangle(500, 200, "blue");
    var content = new Rectangle(600, 500, "green");
    var footer = new Rectangle(500, 200, "blue");
    stage.addChild(header, content, footer);

    // make the Layout - more useful for FULL scale mode
    var layout = new 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 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 21855 ▶︎ LayoutManager()
    CLOSE ▲LayoutManager()
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 Rectangle(500, 200, "blue");
    var content = new Rectangle(600, 500, "green");
    var footer = new Rectangle(500, 200, "blue");
    stage.addChild(header, content, footer);

    // make the Layout - more useful for FULL scale mode
    var layout = new 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 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 21947 ▶︎ Parallax(layers, damp, auto, stage)
    CLOSE ▲Parallax(layers, damp, auto, stage)
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // make assets to move around
    // these could be pictures, shapes, containers, etc.
    var backing = new Rectangle(800, 200, "yellow");
    backing.center(stage);
    var mid = new Rectangle(400, 200, "green");
    mid.center(stage).y += 20;
    var front = new Circle(60, "red");
    front.center(stage).y += 80;

    // make Parallax object - here we move with stage mouseX and mouseY
    var parallax = new Parallax([
       {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"}
    ], .1);

    stage.update();

    PARAMETERS supports DUO - parameters or single object with properties below

    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
       split - (default true for mouseX, false for others) centers input so half output is on one side and half on the other
       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});
    damp - (default .1) the damp value with 1 being no damping and 0 being no movement
    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
    stage - (default the default frame's stage) the stage - specify this if multiple stages
    NOTE ticker and fps parameters have been removed - see 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 22165 ▶︎ Scroller(backing, speed, direction, horizontal, gapFix, stage, container)
    CLOSE ▲Scroller(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 Accelerator object
    this will allow the percentSpeed to be synched with other Scroller and Dynamo objects
    See http://zimjs.com/code/zide/

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var one = new Rectangle(1200, 400, "red");
    frame.makeCircles().center(one);
    stage.addChild(one);

    var scroller = new 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 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 22395 ▶︎ Dynamo(sprite, speed, label, startFrame, endFrame, update, reversible, flip, flipVertical)
    CLOSE ▲Dynamo(sprite, speed, label, startFrame, endFrame, update, reversible, flip, flipVertical)
    Dynamo

    zim class - extends a createjs EventDispatcher

    DESCRIPTION

    A Dynamo can run any 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 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 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 Ticker.add() function,
    then make sure to remove() the Ticker function when the Dynamo is paused

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 Dynamo({sprite:sprite, speed:30, label:"walk", reversible:false});
    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 Dynamo(sprite, 30, "walk");
    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
       // reversible false means it will not walk backwards
       // but rather it will flip and walk in the left direction when the speed is negative
       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 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!)
    reversible - (default true) will allow percentSpeed to be negative and reverse the animation.  Set to false to use absolute value.
    flip - (default true if reversible is false) will flip the scaleX of the sprite if speed is negative and reversible is set to false.
       the pairing of reversible false and flip true will make a Sprite turn and walk the other way if the speed is negaitive
       Note: also see the scaleX property
    flipVertical - (default false) flip the Sprite in the vertical if the speed is negative (note also see the scaleY property)

    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)
    scaleX - starts with the original scaleX of the Sprite
       if you flip the sprite and are scaling the Sprite manually, then also set the scaleX of the dynamo to match
    scaleY - starts with the original scaleY of the Sprite
       if you flip the sprite and are scaling the Sprite manually, then also set the scaleY of the dynamo to match

    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 22633 ▶︎ Accelerator(objects)
    CLOSE ▲Accelerator(objects)
    Accelerator

    zim class extends a createjs.EventDispatcher

    DESCRIPTION

    An Accelerator lets you set percentSpeed properties of multiple objects
    such as Scroller and Dynamo objects
    A Dynamo object is a dynamic controller for a 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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 Accelerator([scroller1, scroller2, sprite]);

    // here we increase the speed then decrease the speed of the whole scene:
    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 Damp(accelerator.percentSpeed);
    Ticker.add(function() {
       var newSpeed = (stage.mouseX-stageW/2)/(stageW/2)*100*2;
       accelerator.percentSpeed = damp.convert(newSpeed);
    }, stage);

    PARAMETERS

    objects - (default null) registers Scroller or Dynamo objects the Accelerator
       pass in a single object or an array of multiple objects

    METHODS

    add(objects) - registers Scroller or 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 Scroller or 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 22787 ▶︎ Swiper(swipeOn, target, property, sensitivity, horizontal, min, max, damp, integer, factor)
    CLOSE ▲Swiper(swipeOn, target, property, sensitivity, horizontal, min, max, damp, integer, factor)
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle(100, frame.green).center(stage);
    // will move circle twice as fast as swipe
    var swiper = new Swiper(stage, circle, "x", 2);

    var man = new Rectangle(50, 100, frame.brown).center(stage);
    // will move man up an down slowly within vertical bounds of stage
    var swiper = new 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
    factor - (default 1) is going the same direction and -1 is going in opposite direction

    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
    dispatches a "swipestop" event when swipeup has happened and value has stopped changing (delay is due to damp)

    CLOSE ▲VIEW ▤EXPAND 22987 ▶︎ MotionController(container, target, type, speed, axis, rect, map, diagonal, damp, flip, moveThreshold, stickThreshold)
    CLOSE ▲MotionController(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

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle(40, frame.green).center(stage);
    var controller = new MotionController(stage, circle); // circle moves to mouse press position with damping

    var rect = new Rectangle(50, 30, frame.green).centerReg(stage);
    var controller = new 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
       if you only want data from the MotionController you can leave the target parameter as null (don't include it)
    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
    rotation - read only rotation of the player in degrees
    scaleX - read only scaleX of player (to get flip data if only using controller for data)
    scaleY - read only scaleY of player (to get flip data if only using controller for data)
    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 23525 ▶︎ GamePad()
    CLOSE ▲GamePad()
    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)

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var gamepad = new 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 == 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[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[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
       GamePad.A == 0
       GamePad.B == 1, etc. up to
       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
       GamePad.LSX == 0
       GamePad.LSY == 1
       GamePad.RSX == 2
       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 ▤EXPAND 23689 ▶︎ Emitter(obj, width, height, interval, num, life, fade, shrink, decayTime, decayStart, trace, traceFadeTime, traceShiftX, traceShiftY, angle, force, gravity, wind, layers, animation, random, horizontal, vertical, sink, sinkForce, cache, events, startPaused, pool, poolMin)
    CLOSE ▲Emitter(obj, width, height, interval, num, life, fade, shrink, decayTime, decayStart, trace, traceFadeTime, traceShiftX, traceShiftY, angle, force, gravity, wind, layers, animation, random, horizontal, vertical, sink, sinkForce, cache, events, startPaused, pool, poolMin)
    Emitter

    zim class - extends a zim.Container which extends a createjs.Container

    DESCRIPTION

    A particle emitter - so this makes and animates display objects like shapes or bitmaps
    Particle emitters are often used for things like fireworks, fire, smoke, sparks, falling objects, etc.
    The Emitter is filled with options so have a look at the doc parameters
    Here are some examples:
    http://zimjs.com/code/particles/

    NOTE consider the Emitter as somewhat experimental and pushing the bounds of the canvas
    In future versions we will look into addin CreateJS StageGL (WebGL) examples / support (it might work already)
    The Emitter certainly can make excellent and workable effects
    But it can also bog the browser if pushed to extremes or sometimes if left going
    This possibly means there are memory leaks - we have been doing our best to track things down
    The Emitter is reporting an expected number of children so any leaks might be beyond ZIM control

    NOTE each particle starts at the center of the container width and height
    If the trace parameter is true then the particle is put in a container that does not move
    and the particle moves inside that container as the container is cached with the source-over composite operation
    The currentParticle property and all the event objects' particle parameter is the moving particle
    However, the children of the Emitter, will be slightly different in each case:
    when trace is false, the children of the Emitter container are any active particles
    when trace is true, the children of the Emitter container are the containers that hold the active particles
    If you have moved, scaled or rotated the Emitter or its container,
    then you will want to use var point = myEmitter.localToGlobal(particle.x, particle.y)
    and get point.x and point.y to find the location of the particle relative to the stage coordinates

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // eg.1 make a bunch of spewing pink circles affected by gravity
    var emitter = new Emitter(new Circle(5, frame.pink))
       .centerReg(stage);

    // eg.2 use a sink to attract the particles
    var sink = new Circle(10, frame.pink).centerReg(stage).alp(0);
    // make one of three types of particles and randomize the colors
    var particles = new Emitter({
       obj:[
          new Circle(20,null,frame.darker,2),
          new Rectangle(30,30,null,frame.darker,2),
          new Triangle(40,40,40,null,frame.darker,2)
       ],
       random:{color:[frame.blue, frame.green, frame.pink, frame.yellow, frame.orange]},
       interval:20, // default
       life:5000,
       decayTime:1000, // default
       sink:sink,
       sinkForce:.5,
       gravity:0,
       force:1,
       cache:mobile(), // default
    })
       .centerReg(stage)
       .sca(2);

    // eg. 3 use a StageGL Frame and createjs.SpriteSheetBuilder for circles:
    var frame = new Frame({scale:"fit", width:1024, height:768, gpu:true});
    frame.on("ready", function() {
       var stage = frame.stage;
       // if we pass in just a Circle then we would have to turn on cache
       // and cache on WebGL counts as an image for each one
       // whereas a SpriteSheet just counts as an image for all of the particles
       // so build a SpriteSheet from the Circle
       var builder = new createjs.SpriteSheetBuilder();
       builder.addFrame(new Circle(50, frame.purple));
       builder.build();
       var emitter = new Emitter({
          obj:new Sprite({spriteSheet:builder.spriteSheet}),
          num:10, // ten Sprites made every 20 ms for about 1000 particles
          life:2000,
          interval:20,
          gravity:0,
          force:2
       }).centerReg(stage);
    });

    // see more examples at http://zimjs.com/code/particles

    PARAMETERS supports DUO - parameters or single object with properties below

    ** some parameters below support ZIM VEE values that use zik() to pick a random option
    The ZIM VEE value can be the following:
    1. an Array of values to pick from - eg. ["red", "green", "blue"]
    2. a Function that returns a value - eg. function(){return Date.now();}
    3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required
    4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive
    5. a single value such as a Number, String, Rectangle(), etc. this just passes through unchanged

    obj - |ZIM VEE| a display object to clone - eg. new Circle(10, frame.green);
       can also specify a shape config object with the following properties to draw inside a shape as an alternative to the trace property
       {type:"shape", s:"white", ss:1, f:"red", sd:[20, 10], offset:3}
       the parameters accept ZIM VEE values except the type and sd as it requires an array as a final value
       type:"shape" is required.  s is setStroke, ss is setStrokeStyle, sd and offset are setStrokeDash in CreateJS
       line thickness (ss) is currently not staying in the latest CDN CreateJS - this is working in the NEXT build
    width - (default 300) the width of the Emitter container - used as cache bounds for trace if trace is true
    height - (default 300) the height of the Emitter container - used as cache bounds for trace if trace is true
       these dimensions will affect performance if the trace parameter is true so use carefully
       also see the traceShiftX and traceShiftY to specify the caching rectangle position
    interval - |ZIM VEE| (default 300) the time in ms between imitting particles
    num - |ZIM VEE| (default 1) the number of particles emitted each interval
    life - (default 1000) the time in ms the particle will exist
    fade - (default true) Boolean to fade the particle (alpha 0) - set to false to not fade out the particle over the decayTime
    shrink - (default true unless trace is true) Boolean to shrink the particle (scale 0) - set to false to not shrink the particle over the decayTime
    decayTime - (default 1000) time in ms to fade and / or shrink the particle - ends animation at the life time unless decayStart is set
    decayStart - (default null) time in ms to start the decayTime otherwise decay (fade and shrink) ends at the end of life time
    trace - (default false) Boolean set to true to leave trails by caching each particle with source-over composite operation
    traceFadeTime - (default decayTime) time in ms to fade out traced particle to 0 alpha at the end of the particle life time
    traceShiftX - (default 0) x amount to shift the cache rectangle for the traced particle
    traceShiftY - (default 0) y amount to shift the cache rectangle for the traced particle
       the particle starts centered in the width and height of the Emitter container
       if you have particles falling - for instance fireworks, you can shift the cache rectangle down to see more trails
       and then place the Emitter up higher on the stage
    angle - |ZIM VEE| (default {min:0, max:360}) the angle the particle will emit (0 is along the positive x axis)
       if you want to shoot particles in one direction just use angle = 20
       if you want something shooting up on either side of the y axis you can use:
       angle = {min:-90-20, max:-90+20}; this may be easier to visualize
       if you want to emit at 45 or 90 then use [45, 90]
    force - |ZIM VEE| (default 5) the force for the emitter to shoot the partice at an angle
       if you want to shoot a variety use force = {min:2, max:10} etc.
    gravity - (default 9.8) the force of gravity going down - can be negative to make particles float up
    wind - (default 0) a force you can apply in the horizontal direction either negaitive for left or positive for right
    layers - (default "top") where to place the current particle being emitted - values are "top", "bottom", "random"
    animation - |ZIM VEE| (default null) a zim animate config object to apply to the particle
       This is the whole zim DUO object to pass to animate - including an obj parameter that holds the animation object (different than the animate object)
    random - (default null) an object holding properties to animate, each property holding a ZIM VEE Value object for zik to pick from per particle
       eg: {color:["red", "white", "green"], scale:{min:1, max:2}} // scale is a convienence property for both scaleX and scaleY
    horizontal - (default false) start the particles across the emitter's width at the top of the emitter (unless vertical is set to true)
    vertical - (default false) start the particles across the emitter's height at the left of the emitter (unless horizontal is set to true)
    sink - (default null) an object with x and y properties (can be a display object) that the particles will be pulled to (or pushed if sinkForce is negative)
    sinkForce - (default 10 if sink) the force particles are moved towards the sink location
    cache - (default mobile() or false if gpu) Boolean to cache each particle - helpful if complex shape or text (do not use for Bitmap or SpriteSheet)
    events - (default false) Boolean - set to true to receive events from Emitter
    startPaused - (default false) Boolean - set to true to start the Emitter in the paused state
    pool - (default true) Boolean if true, makes as many particles as it needs before recycling particles
       this improves performance as new particles do not need to be made and old ones remove
       see also the clearPool() method to start collecting a new type of particle, etc.
    poolMin - (default 0) a minimum number of pooled particles before new particles are no longer made (if pool is true)
       eg. setting poolMin to 100 would make 100 particles and then start reusing these particles for performance
       if you set pool to true and do not specify a poolMin then ZIM will calculate the needed number to properly recycle
       but you can override this number if you want a larger pool for more selection

    METHODS

    spurt(num, time, restart) - shoots particles (usually would pause Emitter before doing this)
       supports ZIM DUO config object
       num - |ZIM VEE| (default null) number of particles to emit according to Emitter settings
       time - |ZIM VEE| (default null) alternatively, time to emit particles according to Emitter settings
          if both num and time are provided the faster one will stop the emitting
          dispatches three different spurt events - see events
       restart (default false) set to true to restart the particles when spurted (removes old particles)
    pause(state, restart, freeze, immediate) - pause or unpause the Emitter
       state (default true) will pause the emitter or set to false to unpause the emitter
          this will set the read only paused property to true or false accordingly
       restart (default false) set to true to restart the particles when unpaused
          otherwise continues the particles from where they were
       freeze (default false) set to true to freeze the particles
          othewise pause just stops emitting and existing particles continue their life
       immediate (default false) set to true to emit right away after unpausing
          otherwise just emits on normal schedule
    clearPool() - clear the pool of particles - use if you change the obj or its properties (no effect if pool parameter is false)
    resize(width, height) - resizes the Emitter container and any cache bounds for new particles
    clone() - makes a copy with properties such as x, y, etc. also copied
       all current properties will be cloned except for startPaused for which the initial paramter value is cloned
    dispose() - removes event listeners from Window and content and removes any Ticker functions

    ALSO ZIM 4TH adds all the methods listed under Container (see above), such as:
    drag(), hitTestRect(), move(), animate(), sca(), reg(), mov(), 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

    type - holds the class name as a String
    ** All the PARAMETERS are available as PROPERTIES to get and set (except for the cache parameter - and width and height act differently)
    paused - read only Boolean as to whether the Emitter is paused or not - see also pause() method
    currentParticle - the latest particle emitted
       if trace is false then this is myEmitter.getChildAt(myEmitter.numChildren-1);
       if trace is true then this is myEmitter.getChildAt(myEmitter.numChildren-1).getChildAt(0);
    particlesEmitted - the number of particles that have been made / emitted
    spurtNum - total number of particles to spurt (when spurt() is called)
    spurtCount - number of particles spurted so far (when spurt() is called)
    zimInterval - the interval used to create particles
    zimTicker - the ticker used to animate particles
    ** CHILD PROPERTIES - each child has a particle (if trace is true) or is a particle (if trace is false)
    particle -  a reference to the particle for the child (could be to itself)
    particleNormal - true or false if particle is not decaying or fizzing
    particleDecaying - true or false if decaying - particle is currently animating to either scale 0 or alpha 0
    particleFizzing - true or false if fizzing - trace container is currently animating to alpha 0
    ** setting widths and heights adjusts scale not bounds and getting these uses the bounds dimension times the scale
    ** these will not remake the cache bounds, etc. - they just scale the Emitter - see resize()
    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
    blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation

    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, etc.

    EVENTS

    ** the below events all have a particle property that gives access to the particle (not the particle container for a traced particle - ask for the particle.parent for that)
    dispatches a "spurted" event once the spurt() method is finished emitting particles
    dispatches a "spurtdecayed" event once the last spurted particle decays (fade / shrink)
    dispatches a "spurtfizzed" event once the last spurted particle's life ends
    ** the below events only trigger if the events parameter is set to true (default is false for slight performance edge)
    dispatches an "emitted" event when a particle is made
    dispatches a "decayed" event when the particle's decayStart + decayTime ms has elapsed
    dispatches a "fizzed" event when the particle's life ms has elapsed

    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 24443 ▶︎ SoundWave(num, input, include, smoothing, min, max, operation, baseline, magnify, reduce)
    CLOSE ▲SoundWave(num, input, include, smoothing, min, max, operation, baseline, magnify, reduce)
    SoundWave

    zim class - extends a CreateJS EventDispatcher

    DESCRIPTION

    Receives a sound input and calculates frequency data using HTML AudioContext createAnalyser()
    The input can be the mic or the result of a asset("someSound").play() or an <audio> tag
    You can specify the number of data points and then use the calculate() method to animate to sound

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var soundWave = new SoundWave(50, "mic");
    soundWave.on("ready", function() {
       Ticker.add(function() {
          var data = soundWave.calculate();
          // data is an array with 50 frequency amplitudes from low to high based on Microphone input
       })
    });

    // or pass in a sound instance:

    // before loading the sound with frame.loadAssets() use the following:
    // this forces CreateJS to use an <audio> tag format
    // we are trying to get things to work with WebAudio and will remove this message when we do!
    createjs.Sound.registerPlugins([createjs.HTMLAudioPlugin]);

    // later when we the loading is complete:
    var soundWave = new SoundWave(50, frame.asset("mySound.mp3").play());

    // or pass in an <audio> tag reference:
    var soundWave = new SoundWave(50, zid("tagID"));
    zid("tagID").play();

    // see more examples at
    // http://zimjs.com/code/soundwave/bars.html
    // http://zimjs.com/code/soundwave/circles.html
    // http://zimjs.com/code/soundwave/mouth.html

    PARAMETERS supports DUO - parameters or single object with properties below

    num - (default 120) Number of data points returned by the calculate() method
    input - (default "mic") or can set to the results of a asset("someSound").play()
       or can set to an <audio> tag reference zid("tagID") make sure to zid("tagID").play()
    include - (default 120/1024 = .117) a decimal range to include (0-1) - the full range (1) includes 90% very high frequencies
    smoothing - (default .85) a decimal range for smoothing with 0 being choppy and .9 being slow to respond, etc.
    min - (default -80 mic -100 song) minimum decibel number to pick up
    max - (default -40 mic -10 song) maximum decibel number to pick up
    operation - (default function below) a function that is applied to each result in the original bufferLength (1024)
       the natural results are very bass heavy with roughly a straight line heading down as frequency gets higher
       the default function reduces the bass by half and slowly rises towards the original values for higher frequency
          function(amplitude, i) {
             return amplitude * (.5+i*1/Math.pow(SoundWave.bufferLength, .95));
          })
       you can pass in a different function to take the place of the default function
       the function receives the original amplitude and index as parameters
       you can use SoundWave.bufferLength to get the total number of values in the original data (1024)
       Note: the data returned by the calculate() method will be only the included range - eg. .117 of the total original values (starting at low frequency)
    baseline - (default 0 for mic and 30 for sound) removes this amount of amplitude from each data point (after operation is applied)
    magnify - (default 1 for mic and 10 for sound) multiplies the data point by this much (after the baseline is removed)
       by removing the baseline amount and multiplying what's left the difference in wave data is increased
    reduce - (default 0) subtracts this amount from each data point (after magnified)

    METHODS

    calculate() - returns an array of amplitudes at various frequencies from low to high
       the array will have a length that matches the num parameter
       the range of frequencies used will be 1024 multiplied by the include factor - eg. .117 = 120
       this 120 will be divided by the num parameter and average results over the range will be used
       this means the num parameter must be less than the 1024 times the range otherwise there is a warning

    PROPERTIES

    num - read only num of frequency data
    smoothing - a decimal range for smoothing with 0 being choppy and .9 being slow to respond, etc.
    analyser - the HTML analyser object https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
       with minDecibels, maxDecibels, smoothingTimeConstant and some others - see link
    baseline - removes this amount of amplitude from each data point (after operation is applied)
    magnify - multiplies the data point by this much (after the baseline is removed)
    reduce - subtracts this amount from each data point (after magnified)

    EVENTS

    dispatches a "ready" event when the sound source is connectedc and the calculate() method is ready

    CLOSE ▲VIEW ▤EXPAND 24670 ▶︎ Portal(obj, lands)
    CLOSE ▲Portal(obj, lands)
    Portal

    zim class - extends a CreateJS EventDispatcher

    DESCRIPTION

    Turn an object into a portal that lets the user enter the portal to change lands, etc.
    The portal works based on mouseover (or press for mobile)
    The lands need to be stacked in a Container with the first land at the top.
    Portal will pass users throught the lands and loop at the end back to the first land.
    Alternatively, if loop is turned to false, Portal will backtrack the user through the lands
    Pass the container of lands into the lands parameter - most often you will have two lands, but more are fine too!
    Alternatively, the portal can be used without lands - and you can customize what you want to happen with portal events.

    The object will be used as a mask to show the next land.
    You can set the alpha of the object to any value above .01 to hide the object and show the land (do not use 0)
    If your object is a ZIM shape, you can use rgba(0,0,0,.01) as the color and still have an opaque borderColor

    SEE: http://zimjs.com/code/portal/

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    frame.loadAssets(["researchbuilding.jpg", "jungle.jpg"]);
    frame.on("complete", function() {
       var lands = new Container(stageW, stageH).addTo(stage);
       var jungle = frame.asset("jungle.jpg")
          .scaleTo({boundObj:lands, type:"biggest"})
          .center(lands);
       var researchBuilding = frame.asset("researchbuilding.jpg")
          .scaleTo({boundObj:lands, type:"biggest"})
          .center(lands);
       var portalObject = new Circle(118, frame.faint, frame.pink, 16, true)
          .addTo(stage)
          .pos(580, 470)
          .animate({obj:{rotation:"360"}, time:70000, ease:"linear", loop:true});
       var portal = new Portal(portalObject, lands);
       portal.on("enter", function() {
          // play a sound here!
       });

       // use enabled to turn on and off portal
       timeout(1000, function() {portal.enabled = false; portalObject.pauseAnimate(true);});
       timeout(5000, function() {portal.enabled = true; portalObject.pauseAnimate(false);});

       stage.update();
    }); // assets loaded

    PARAMETERS supports DUO - parameters or single object with properties below

    obj - the Display Object that will be the portal
    lands - (default null) optional container of "lands" or display objects to portal through
       The Display Objects in the lands container (lands) should be on the stage
       The lands are adjusted by Portal so the currentLand is the second child and the nextLand is the first child.
       This is due to how the masking works.
       Inserting new lands or removing lands below an index of lands.numChildren-2 is okay
       Use addTo(lands, index) or removeFrom(lands).
       If you adjust either of the top two lands in the container, this will affect what is see on stage.

    METHODS

    dispose() - remove the events - the obj and lands will be left as is - manually remove these if needed

    PROPERTIES

    portal - a reference to the portal obj
    enabled - Boolean as to whether the portal is active or not
    currentLand - get or set the active land if lands is provided
    nextLand - get (read only) the next land to go to if lands is provided

    EVENTS

    dispatches an enter event on mouseover of the portal and an exit event on mouseout

    CLOSE ▲VIEW ▤
    ZIM FRAMEEXPAND 24836 ▶︎ Frame(scaling, width, height, color, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, outerColor, loadFailObj)
    CLOSE ▲Frame(scaling, width, height, color, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, outerColor, loadFailObj)
    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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var frame = new 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 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

    EXAMPLE

       // With multiple loadAsset() calls you can assign the results to a variable
       // and use that variable for the events independently
       // Warning, each of these will still call a frame complete event
       // so usually you would use one or the other but not both

       var first = frame.loadAssets("image.png");
       first.on("complete", function() {
          var image = frame.asset("image.png").center(stage);
       }

       var second = frame.loadAssets("sound.mp3");
       second.on("complete", function() {
          var sound = frame.asset("sound.mp3").play();
       }

    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
       will be see-through if not specified
    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" or if subsequent frame, myCanvas+randomID) 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
    canvasCheck - (default true) check to see if there is canvas support - uses !!window.HTMLCanvasElement
    gpu - (default false) set to true to use a CreateJS StageGL stage for GPU renderer
       See: http://blog.createjs.com/stagegl-faster-better-stronger-webgl-update-easeljs/ (written before version 1 release)
       Use CreateJS 1.0.0 or later to get StageGL.
       https://github.com/CreateJS/Combined/tree/master/builds/1.0.0
       Can use http://d309knd7es5f10.cloudfront.net/createjs.min.js (CreateJS 1.0.0 until they host it on their CDN)
    gpuObj - (default null) object with following properties (with defaults) See CreateJS docs on GITHUB:
       preserveBuffer (false), antialias (false), transparent (false), premultiply (false), autoPurge (1200)
    nextFrame - (default null) set to zim Frame object of Frame underneath current Frame to pass events to nextFrame
    nextStage - (default null) alternative to nextFrame if the stage beneath current Frame is not a ZIM Frame but just a CreateJS Stage
    allowDefault - (default false) set to true to allow default mouse, key and scrollwheel events on canvas
       See also the zil property of frame that allows you to add and remove these events dynamically (except for mouse swipe scroll and zoom on mobile)
    outerColor - (default null) the body color of the HTML page - null will not adjust it
    loadFailObj - (default result of frame.makeCircles) object that shows if asset() does not exist or did not load withing loadTimeout
       This will be given a type property of "EmptyAsset"
       Set the loadFailObj property below to null to set no object - but this will yield errors unless each resulting asset() is tested
       Set to new Container() to show nothing (but avoid errors) - or new Rectangle(10, 10) to show little black square, etc.

    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
    canvasID - a reference to the frame's canvas ID
    color - the color of the frame background - any css color
    outerColor - the color of the body of the HTML page - set with styles
    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 (also, each queue has an isLoading property)
    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)
    zil - reference to zil events that stop canvas from shifting or scrolling - also see allowDefaults parameter
       can set allowDefault property to false then allow specific defaults by removing zil events - see zil global function
       example: window.removeEventListener("keydown", listenersArray[0]); removes keydown preventions (for page up, page down, home, end, etc)
    colors: orange, green, pink, blue, brown, yellow, red, purple, silver, tin, grey, lighter, light, dark, darker, white, black, clear (0 alpha), faint (.01 alpha)
    altKey - true if the alt key is being pressed otherwise false
    ctrlKey - true if the ctrl key is being pressed otherwise false
    metaKey - true if the meta key (⌘ command on Mac or ⊞ windows key) is being pressed otherwise false
    shiftKey - true if the shift key is being pressed otherwise false
    loadFailObj - the object that shows if images are broken - will be given a type property of "EmptyAsset"

    METHODS

    loadAssets(assets, path, xhr, time, loadTimeout) // also accepts ZIM DUO configuration object as single parameter
       assets - a file (url String) or files in an Array
          each asset String is how you then access the asset with the asset() method of Frame
          asset types (from CreateJS PreloadJS): Image, JSON, Sound, SVG, Text, XML
          asset can also be a font object:
             {font:name, src:url, type:string, weight:string, style:string} // with last three properties being optional
             eg.
             {font: "wildwood", src:"ChurchintheWildwood-Regular.ttf", type:"OpenType"} // type is not needed
             {font: "regu", src:"regul-bold.woff", weight:"bold"}
             {src:"https://fonts.googleapis.com/css?family=Roboto"}
             For google fonts you add extra information to the url so the font (family), type, weight and style are ignored
             If absolute src is used, path parameter is ignored - otherwise path is added to start of src
             After loading, can just use:
                var label = new Label("hello", 30, "wildwood") // or whatever the font property is
          asset can be an AudioSprite - which is a single sound file and data for sounds within the sound file:
             ZIM has a format for the data and so does CreateJS - there is also the parseAudioSprite() method for importing formats
             See the parseAudioSound parameter to pre-parse the ZIM format then use the resulting CreateJS format to avoid live parsing (maybe save a millisecond)
             ZIM FORMAT:
                {src:"audiosprite.mp3", audioSprite:[
                       // [id, startime(s), endtime(s)]
                       // prefer this when making audioSprites by hand in Premiere or Audition
                       ['blackball', 1.041, 2.475],
                       ['bounce', 3.567, 4.232]
                ]}
             CREATEJS FORMAT:
                {src: "audiosprite.mp3", data:{ // extra data property
                    audioSprite: [
                        {id:"sound1", startTime:0, duration:500}, // time in ms
                        {id:"sound2", startTime:1000, duration:400},
                        {id:"sound3", startTime:1700, duration: 1000}
                    ]
                }}
       path - pass in an optional path String that gets prepended to the asset
          when accessing the asset with the asset() method you do NOT include the path
       xhr (default false) set to true to load text and WebAdio (not needed for normal sound mp3, wav, etc.)
       time (default 0) 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
       loadTimeout (default 8000) is how many ms to wait for asset before error and a complete fires even though asset not loaded
       outputAudioSprite (default false) set to true when passing in a ZIM AudioSprite format to output to the console a CreateJS AudioSprite JSON object
           JSON.parse() this object before passing in to loadAssets() - and add single quotes around console output as those are stripped by console
       RETURNS: a Queue object that can be used for control with multiple loadAssets calls
       Each Queue will trigger progress, assetload and complete events
       Each 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 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 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 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
    "failed" - fired if no canvas support (and canvasCheck parameter is set to true - which is the default)
    "progress" - fires constantly as assets are loaded with loadAssets() to represent overall load progress (fonts not included)
    "assetload" - fired when an asset loaded with loadAssets() has loaded (use asset property of event object - with type and id properties) (fonts not included)
    "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" - fired on keydown - just like the window keydown event with eventObject.keyCode, etc.
       also stores frame.altKey, frame.ctrlKey, frame.metaKey, frame.shiftKey
    "keyup" - fired on keyup - just like the window keyup event with eventObject.keyCode, etc.
    "devicemotion" - fired on moving mobile device - like a tilt or shake - eventObject.accelleration holds x, y and z properties of motion
       eg. frame.on("devicemotion", function(e) {zog(e.acceleration.x, e.acceleration.y, e.acceleration.z)});

    CLOSE ▲VIEW ▤BITS
    ZIM METAEXPAND 25690 ▶︎ DISTILL
    CLOSE ▲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 DISTILL to true to record which functions your are using in your app -
    default is false.  While running your app, call the distill() function
    take the results to http://zimjs.com/code/distill to create a minified distilled file.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // at the start of your code
    DISTILL = true;

    // at the end of your code (once everything has run)
    // this means we may have to wait for events to happen, etc.
    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 ▤BITS EXPAND 25730 ▶︎ distill()
    CLOSE ▲distill()
    distill

    zim function

    DESCRIPTION

    Call the distill function to display which zim functions you are using in your app.
    You must set DISTILL constant to true before using (set at the start of your app).
    After running through your app, call 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 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 distill() will not be available from your distilled file.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // at the start of your code
    DISTILL = true;

    // at the end of your code (once everything has run)
    // this means we may have to wait for events to happen, etc.
    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 ▤BITS EXPAND 25779 ▶︎ parseAudioSprite(audioSpriteData, outputAudioSprite)
    CLOSE ▲parseAudioSprite(audioSpriteData, outputAudioSprite)
    parseAudioSprite

    zim function

    DESCRIPTION

    Converts an AudioSprite data file from a popular AudioSprite Creation Tool: https://github.com/tonistiigi/audiosprite
    To a CreateJS AudioSprite data format to use with Frame loadAssets().

    NOTE only gets the first file from the output and ignores loop and autoplay properties
    To loop a sound, use frame.asset(id).play({loop:-1});

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    // loading JSON data for audio is two step process.
    // load the JSON then load the Audio with the converted loaded JSON data
    // NOTE - do not have two frame complete events active at the same time!
    // unless you assign the loadAssets() to a variable (ZIM Queue) and put the complete events on the variable
    frame.loadAssets("audioSprite.json", "assets/");
    frame.on("complete", init, null, true); // run this complete event only once (the true)

    function init() {
       // convert imported data to CreateJS AudioSprite data:
       var audioSpriteData = parseAudioSprite(frame.asset("audioSprite.json"));

       // load the audio using the converted data
       frame.loadAssets(audioSpriteData, "assets/");
       frame.on("complete", function() {

          // now all the AudioSprite ids are available
          frame.asset("start").play();

       });
    }

    PARAMETERS

    audioSpriteData - an object (not JSON) made from parsed JSON data from https://github.com/tonistiigi/audiosprite example:
       {"resources": ["audiosprite.mp3"],
    "spritemap": {
    "blackball": {"start": 1.041, "end": 2.475, "loop": false},
           "bounce": {"start": 3.567, "end": 4.232, "loop": false}
       }}
    outputAudioSprite - (default false) output to the console the converted CreateJS AudioSprite data
       NOTE: this is in JSON format so will have to JSON.parse() the console text - wrap it in single quotes as they are stripped by the console

    RETURNS - either a CreateJS AudioSprite data object

    CLOSE ▲VIEW ▤EXPAND 25848 ▶︎ previewAudioSprite(audioSpriteData, numLetters, frame)
    CLOSE ▲previewAudioSprite(audioSpriteData, numLetters, frame)
    previewAudioSprite

    zim function

    DESCRIPTION

    Creates a ZIM Tabs object with all the audioSprite sounds in each tab sound names are shortened to numLetters
    Assumes that the AudioSprite is loaded - see docs on Frame.loadAssets()

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var zimAudioSpriteData = {
       src:"audiosprite.mp3",
       audioSprite:[
          // [id, startime(s), endtime(s)]
          // prefer this when making audioSprites by hand in Premiere or Audition
          ['noStar', 1.041, 2.475],
          ['bounce', 3.567, 4.232],
          ['deleted', 5.396, 9.315],
          ['click', 10.373, 10.499],
          ['noLove', 11.607, 14.254],
          ['happy', 15.672, 17.081],
          ['draw', 18.354, 19.163],
          ['heart', 20.151, 23.594],
          ['star', 24.931, 27.673],
          ['warning', 28.632, 29.351],
          ['navChange', 30.640, 32.323]
       ]
    }
    frame.loadAssets(zimAudioSpriteData, "assets/");
    frame.on("complete", function() {
       // will show tabs at top of stage - press to play audio
       previewAudioSprite(zimAudioSpriteData, 2);
    }

    PARAMETERS

    audioSpriteData - an AudioSprite object of ZIM, CreateJS or from JSON parsed https://github.com/tonistiigi/audiosprite format
    numLetters - (default 3) how many letters from the sound name to put on each tab
    frame - (default zimDefaultFrame) the frame into which the AudioFile is loaded

    RETURNS - a ZIM Tab which is automatically added to the frame's stage

    CLOSE ▲VIEW ▤EXPAND 25941 ▶︎ zimify(obj, list)
    CLOSE ▲zimify(obj, list)
    zimify

    global 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 zimify() to add these members to a CreateJS Shape, Container, etc.

    NOTE this was formerly zim.addDisplayMembers (which has been replaced by zimify)

    ZIM uses zimify 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 object parameter as the first parameter
    or if DUO is being used then adds the object to the configuration object.

    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.

    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 be able to center
    zimify(shape); // add methods like center, drag, etc.
    shape.center(stage); // ZIM 4TH method format
    stage.update();

    // note: even without using zimify()
    // 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 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 Rectangle ;-)
    var shape = new 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)
    list - used internally by zimplify to exclude zim methods (makes zimify return list of methods)

    RETURNS - obj for chaining

    CLOSE ▲VIEW ▤BITS EXPAND 26272 ▶︎ zimplify(exclude)
    CLOSE ▲zimplify(exclude)
    zimplify

    global function

    DESCRIPTION

    Removes requirement to use the zim namespace in code
    Puts the ZIM code, display and controls into the global namespace
    Does not put methods in the namespace as using methods as functions is discouraged
    With the exception of loop, stopAnimate, pauseAnimate, animate, wiggle

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    EXAMPLE

    var circle = new Circle(50, frame.green);
    // was:
    var circle = new zim.Circle(50, frame.green);

    var random = rand(500);

    // note - do not use:
    var rand = rand(500); // as you will overwrite the rand() reference

    PARAMETERS

    exclude - (default null) a String command or an array of command strings to not remove the zim namespace

    CLOSE ▲VIEW ▤EXPAND 26319 ▶︎ Wonder(wid, client, app, notes, server)
    CLOSE ▲Wonder(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.

    NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim)

    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 Wonder("wonderID", "client", "app");

    // COUNT EXAMPLE
    // for this example we count times a button is pressed
    var button = new 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 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 Rectangle(100, "yellow");
    stage.addChild(square);
    square.x = rand(stageW-square.width);
    square.y = 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 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 ▤