ZIM DOCS
Here is a video Intro to the docs.
See ZIM_9.2.1 for code, updates for changes and text for raw docs. Customize docs with feature items. ZIM HELPER modules have docs in files (see LIBRARIES for examples) Code: SOCKET, GAME, PHYSICS, THREE, PIZZAZZ, PIZZAZZ 2, PIZZAZZ 3, PIZZAZZ 4. TypeScript Definitions (ZIP) for ZIM are available.
ZIM FRAME
EXPAND 34711 ▶︎ Frame(scaling, width, height, color, outerColor, assets, path, progress, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, loadFailObj, sensors)
Frame(scaling, width, height, color, outerColor, assets, path, progress, rollover, touch, scrollTop, align, valign, canvasID, rollPerSecond, delay, canvasCheck, gpu, gpuObj, nextFrame, nextStage, allowDefault, loadFailObj, sensors)
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 https://zimjs.com/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); frame.on("ready", function() {    var stage = frame.stage;    var stageW = frame.width;    var stageH = frame.height;    frame.outerColor = dark; // setting colors here lets you use frame colors    frame.color = light;    // 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();    });
EXAMPLE
// load assets right in Frame call // see the assets and path and progress are optional var frame = new Frame("fit", 1024, 768, "#ddd", "#333", "image.png", "assets/", new Waiter()); frame.on("ready", function() {    var stage = frame.stage;    var stageW = frame.width;    var stageH = frame.height;    frame.asset("image.png").center();    stage.update(); }); // end ready
PARAMETERS supports DUO - parameters or single object with properties below scaling - (default "full") can have values as follows    "fit" sets canvas and stage to dimensions and scales to fit inside window size    "outside" sets canvas and stage to dimensions and scales to fit outside window size    "full" sets stage to window size with no scaling    "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling FIT and OUTSIDE: width and height will set the stage width and height and the canvas is then scaled this is handy because all your dimensions are set to start FULL: width and height are ignored when scaling as these are set to the window width and height TAG: if width and height are provided then the canvas and stage will be these dimensions if width and height are not provided in tag mode, the canvas and stage will take the dimensions of the tag this means, the tag must have some sort of width and height dimensions set or it will be really big! width, height (default null for fit and tagID or 500, 500 for fit and outside) the width and height for the stage color - (default null) the background color of the frame (any CSS value) - or just set in styles    will be see-through if not specified outerColor - (default null) the body color of the HTML page - null will not adjust the background color assets - (default null) - 1. a string asset or 2. an array of assets or 3. an assets config object    1. "logo.png"    2. ["logo.png", "bounce.mp3"]    3. {asset:"logo.png", path:"assets/", loadTimeout:2000}    see the loadAssets() method for details    NOTE: "complete", "progress" and "fileLoaded" events are not dispatched       use loadAssets() for these if desired       the "ready" event will be dispatched when the canvas is ready and initial assets are loaded    NOTE: the loadAssets() method can still be used as desired path - (default null) - a string path for the assets    if an assets object is provide with a path then this parameter is ignored progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading 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 - true for tag mode) 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)    allowDefault of false also sets body overflow to hidden - which is good for full, fit and outside modes    also see allowDefault property 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. sensors - (default false) set to true to capture Frame devicemotion and deviceorientation events - see Events METHODS loadAssets(assets, path, xhr, time, loadTimeout, outputAudioSprite, crossOrigin, fileType, queueOnly) // also accepts ZIM DUO configuration object as single parameter    // see also assets and path parameters of Frame - which share the info below    assets - a file (url String or asset object) 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 an asset object:          {id:string, src:url or filename (if specify path with path parameter)}          then can use the id to access the asset in the asset() method of Frame       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    progress - (default null) - set to a Waiter() or ProgressBar() object to show while loading    xhr (default false or true if Progress is a ProgressBar) 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    crossOrigin (default "anonymous") - leave at default to load from Amazon S3, etc.       had to add <AllowedMethod>HEAD</AllowedMethod> in CORSRule of CORS configuration on Amazon S3 for fonts       https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors       https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors       and had to edit distribution behaviours for cache header > whitelist and move over Origin    fileType (default null) in cases where the file type cannot be parsed or is parsed incorrectly, this overrides       might have to split up loading as this fileType gets applied to all files loaded       Types are for CreateJS PreloadJS: https://www.createjs.com/docs/preloadjs/classes/LoadQueue.html        createjs.Types.BINARY: Raw binary data via XHR        createjs.Types.CSS: CSS files        createjs.Types.IMAGE: Common image formats        createjs.Types.JAVASCRIPT: JavaScript files        createjs.Types.JSON: JSON data        createjs.Types.JSONP: JSON files cross-domain        createjs.Types.MANIFEST: A list of files to load in JSON format, see AbstractLoader/loadManifest        createjs.Types.SOUND: Audio file formats        createjs.Types.SPRITESHEET: JSON SpriteSheet definitions. This will also load sub-images, and provide a SpriteSheet instance.        createjs.Types.SVG: SVG files        createjs.Types.TEXT: Text files - XHR only        createjs.Types.VIDEO: Video objects        createjs.Types.XML: XML data    queueOnly (default false) - set to true to send events only to the Queue object (see below) rather than the Frame       when using queues to accept events, remember that the frame also receives events       if you also have some general frame events for loading, set this parameter to true to avoid accident    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 - see the queueOnly parameter    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 uses an asset object with an id then you can use the id    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, loopCount, volume, pan, startTime, interrupt and duration       // note: ZIM has adjusted loop (Boolean) and added loopCount (number) to be consistent with animate() parameters       asset(file).play({volume:.5, pan:-1, loop:true}); // or loopCount:10 for a specific number of loops or loop:10 also works       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, multiple) - returns ZIM Circles (centered reg)    radius defaults to 100    multiple defaults to false which will return a ZIM Shape - set to true to return a ZIM Container of ZIM Circles 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 PROPERTIES type - holds the class name as a String stage - read only reference to the zim 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) visibleLeft, visibleTop, visibleRight, visibleBottom - in "outside" scale mode these give window edge locations relative to the stage    can be used to position items like navigation relative to window as the frame resize event is fired    in all scale modes other than "outside", the values are 0, stageW, 0, stageH 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", frame.zil[0]); removes keydown preventions (for page up, page down, home, end, etc) allowDefault - set to true to remove zil or false to set zil (see above) also affects body overflow colors: orange, green, pink, blue, brown, yellow, red, purple, silver, tin, grey, lighter, moon, 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" 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) "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. "wheel" - fired on mousewheel (Window wheel event)    can get eventObject.deltaX and eventObject.deltaY    these vary greatly in value based on Browser    may want to just ask for sign(eventObject.deltaY) and multiply it by a factor    and then perhaps constrain the value - here the scale is constrained between .5 and 5    note - when changing scale, it is better to multiply by a factor rather than add to the scale    eg. circle.scale = constrain(circle.scale*(sign(e.deltaY)>0?.75:1.25), .5, 5); "deviceorientation" - MUST SET Frame sensors parameter to true    fired as device orientation changes:    eventObject.rotation.x (beta in HTML specs) holds rotation about the x axis between -180 and 180 (tipped forward or backward)    eventObject.rotation.y (gamma in HTML specs) holds rotation about the y axis between -90 and 90 (tipped left or right)    eventObject.rotation.z (alpha in HTML specs) holds rotation about the z axis 0-360 clockwise (relative to orientation when app loads)       note rotation.z is 360-alpha compared to the HTML 5 specs       note also that beta, gamma and alpha from the HTML 5 specs are also provided    eg. frame.on("deviceorientation", function(e) {zog(e.rotation.x, e.rotation.y, e.rotation.z)}); "devicemotion" - MUST SET Frame sensors parameter to true    fired on moving mobile device - like a tilt or shake - eventObject.acceleration holds x, y and z properties of motion    eg. frame.on("devicemotion", function(e) {zog(e.acceleration.x, e.acceleration.y, e.acceleration.z)}); ASSET EVENTS loadAssets() will trigger these events on the Frame object and on the specific queue (eg. var queue = frame.loadAssets();) NOTE if loadAssets() queueOnly parameter is true, then only the queue receives the events - see queueOnly parameter "progress" - fires constantly as assets are loaded with loadAssets() to represent overall load progress (fonts not included)    the event object has a progress property between 0 and 1 "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() CLOSE ▲VIEW ▤BITS VIDS
ZIM DISPLAY
EXPAND 04013 ▶︎ Stage(canvasID)
Stage(canvasID)
Stage zim class - extends a createjs.Stage which extends a createjs.Container DESCRIPTION An extension of a createjs.Stage that includes read only type, width and height properties, loop and hitTestGrid methods. When using zim.Frame, there should be no reason to make a zim.Stage. This was put in place to match the ZIM TypeScript typings for stage width and height. Also see https://www.createjs.com/docs/easeljs/classes/Stage.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 stage = new Stage("canvasID");
PARAMETERS canvasID - (default null) string ID for canvas tag METHODS loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details     see the ZIM Display Methods loop() for details hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)    see the ZIM Display Methods hitTestGrid() for details See the CreateJS Easel Docs for Stage methods, such as: clear, update, toDataURL And all the Container methods such as: on, off, setBounds, getBounds, globalToLocal, etc. PROPERTIES type - holds the class name as a String width - read only width set by ZIM Frame height - read only height set by ZIM Frame ALSO See the CreateJS Easel Docs for Stage properties, such as: autoClear, canvas, nextStage, etc. and all the Container properties, such as: children, mouseChildren, filters, cacheCanvas, etc. EVENTS See the CreateJS Easel Docs for Stage events, such as: mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc. and all the Container events, such as: click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤
EXPAND 04096 ▶︎ StageGL(canvasID, options)
StageGL(canvasID, options)
StageGL zim class - extends a zim.Stage which extends a createjs.Stage DESCRIPTION An extension of a zim.Stage for WebGL support See ZIM Stage and https://www.createjs.com/docs/easeljs/classes/StageGL.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 stage = new StageGL("canvasID", {preserveBuffer:true, antialias:true});
PARAMETERS canvasID - (default null) string ID for canvas tag options - (default null) an object literal with the following properties    FROM https://www.createjs.com/docs/easeljs/classes/StageGL.html preserveBuffer (default false)    If true, the canvas is NOT auto-cleared by WebGL (the spec discourages setting this to true). This is useful if you want persistent draw effects.    antialias (default false)       Specifies whether or not the browser's WebGL implementation should try to perform anti-aliasing. This will also enable linear pixel sampling on power-of-two textures (smoother images).    transparent (default false)       If true, the canvas is transparent. This is very expensive, and should be used with caution.    premultiply (default false)       Alters color handling. If true, this assumes the shader must account for pre-multiplied alpha. This can help avoid visual halo effects with some assets, but may also cause problems with other assets.    autoPurge (default 1200)        How often the system should automatically dump unused textures with purgeTextures(autoPurge) every autoPurge/2 draws. See purgeTextures for more information. METHODS loop(call, reverse, step, start, end) - see the ZIM Display Methods loop() for details     see the ZIM Display Methods loop() for details hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)    see the ZIM Display Methods hitTestGrid() for details See the CreateJS Easel Docs for StageGL methods: https://www.createjs.com/docs/easeljs/classes/StageGL.html PROPERTIES type - holds the class name as a String width - read only width set by ZIM Frame height - read only height set by ZIM Frame See the CreateJS Easel Docs for Stage properties: https://www.createjs.com/docs/easeljs/classes/StageGL.html EVENTS See the CreateJS Easel Docs for StageGL events, such as: mouseenter, mouseleave, stagemousedown, stagemousemove, stagemouseup, drawstart, drawend, etc. and all the Container events, such as: click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤VIDS
EXPAND 04185 ▶︎ Container(a, b, c, d, style, group)
Container(a, b, c, d, style, group)
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; // demonstration of adding drag() to a Container 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 ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** Container supports three different sets of parameters as follows: a - (default null) - width and height equal to parameter a (x and y will be 0) a, b - (default null) - the width and height (x and y will be 0) a, b, c, d - (default null) - the x, y, width and height of the bounds    if parameter a is not set, then the Container will take bounds that grow with its content    the bounds of the Container can be set at any time with setBounds(a, b, c, d)    if the bounds are set, then the Container bounds will not change as content is added    the bounds can be removed with setBounds(null) and the Container will get auto bounds style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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 setBounds(width||x, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining    If you do not provide the any parameters, then the bounds will be reset to the calculated bounds    width||x - (default null) the width of the bounds - or the x if four parameters are provided    height||y - (default width) the height of the bounds - or the y if four parameters are provided    width - (default null) the width of the bounds - or null if only the first two parameters are provided    height - (default null) the height of the bounds - or null if only the first two parameters are provided clone() - clones the container, its properties and all its children dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation group - used when the object is made to add STYLE with the group selector (like a CSS class) ALSO See the CreateJS Easel Docs for Container properties, such as: x, y, rotation, scale, 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 VIDS
EXPAND 04395 ▶︎ Shape(a, b, c, d, graphics, style, group)
Shape(a, b, c, d, graphics, style, group)
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.beginFill("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.beginStroke("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 ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** Shape supports three different sets of parameters as follows: a - (default null) - width and height equal to parameter a (x and y will be 0) a, b - (default null) - the width and height (x and y will be 0) a, b, c, d - (default null) - the x, y, width and height of the bounds graphics - (default null) a CreateJS Graphics instance (see CreateJS docs)    or just use the graphics property of the shape object (like usual) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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 setBounds(width||x, height||y, null||width, null||height) - overrides CreateJS setBounds() and returns object for chaining    width||x - (default null) the width of the bounds - or the x if four parameters are provided    height||y - (default width) the height of the bounds - or the y if four parameters are provided    width - (default null) the width of the bounds - or null if only the first two parameters are provided    height - (default null) the height of the bounds - or null if only the first two parameters are provided 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 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 04564 ▶︎ Bitmap(image, width, height, id, style, group)
Bitmap(image, width, height, id, style, group)
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.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((noise.simplex2D(x/f, y/f)+1)/2, .3,.35) * 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();
EXAMPLE
// applying filters var bitmap = frame.asset("statue.jpg"); bitmap.filters = [new createjs.BlurFilter(25, 25, 1)]; bitmap.cache().center();
EXAMPLE
// getting the color at point(100, 100) on the Bitmap var bitmap = frame.asset("statue.jpg").cache(); var ctx = bitmap.cacheCanvas.getContext('2d'); var data = ctx.getImageData(100, 100, 1, 1).data; var color = "rgba("+data.join(", ")+")";
EXAMPLE
// a Base64 image: var image = "data:image/png;base64,longlistofcharacters"; var logo; Bitmap.fromData(image, function (bitmap) {    logo = bitmap.center();    stage.update(); });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS fromData(data, callback) - STATIC method so use the Bitmap class directly: Bitmap.fromData()    The callback will receive a reference to the Bitmap after 50ms or 100ms.    There is no event for making a Bitmap from base64 for instance - so this will have to do. 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... cache(width||x, height||y, null||width, null||height, scale, options) - overrides CreateJS cache() and returns object for chaining    ** Usually you do not want to cache a Bitmap as it is already a Bitmap ;-)    ** But for applying a filter or using a cacheCanvas to get a context, etc. then you might.    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() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method id (fileID in TypeScript) - 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 04809 ▶︎ Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet, style, group)
Sprite(image, cols, rows, count, offsetX, offsetY, spacingX, spacingY, width, height, animations, json, id, globalControl, spriteSheet, style, group)
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: https://zimjs.com/spritesheet/index.html AND: https://zimjs.com/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 external 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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 05385 ▶︎ MovieClip(mode, startPosition, loop, labels, style, group)
MovieClip(mode, startPosition, loop, labels, style, group)
MovieClip zim class - extends a createjs.MovieClip DESCRIPTION A MovieClip adds timelines to a Container. The timelines are 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, blue); // time is in frames NOT in ms - so 100 frames at the Ticker.framerate 60 fps by default is almost 2 seconds // note that to change the Ticker's framerate use setFPS(mobile, desktop) method // if you use one number then both mobile and desktop are set to that fps. // Note that the defaults are 30 fps mobile and 60 fps desktop 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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) // 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 (*did not seem to loop so use loop:true in zim.animate()) labels - (default null) declare label property with position value    eg. {explode:20} to use with gotoAndPlay("explode") rather than gotoAndPlay(20) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 ▤
-------------- ZIM SHAPES EXPAND 05490 ▶︎ Circle(radius, color, borderColor, borderWidth, dashed, style, group)
Circle(radius, color, borderColor, borderWidth, dashed, style, group)
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([yellow,green], [0, .7], 0, 0, 20, 0, 0, 50);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining    if one color is used, the current color is used and color1 is the second color in the range 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1000); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    eg. shape.colorCommand.linearGradient([green, blue ,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    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 05712 ▶︎ Rectangle(width, height, color, borderColor, borderWidth, corner, dashed, style, group)
Rectangle(width, height, color, borderColor, borderWidth, corner, dashed, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] dashed - (default false) set to true for dashed border (if borderWidth or borderColor set) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining    if one color is used, the current color is used and color1 is the second color in the range 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1000); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    eg. shape.colorCommand.linearGradient([green, blue ,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    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html ** 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 05935 ▶︎ Triangle(a, b, c, color, borderColor, borderWidth, center, adjust, dashed, style, group)
Triangle(a, b, c, color, borderColor, borderWidth, center, adjust, dashed, style, group)
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([green, blue ,green], [.2, .5, .8], 0, 0, triangle.width, 0);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining    if one color is used, the current color is used and color1 is the second color in the range 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1000); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    eg. shape.colorCommand.linearGradient([green, blue ,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    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html ** 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 06213 ▶︎ Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, ctrlclick, dashed, onTop, stickColor, selectColor, selectPoints, editPoints, interactive, style, group)
Squiggle(color, thickness, points, length, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, ctrlclick, dashed, onTop, stickColor, selectColor, selectPoints, editPoints, interactive, style, group)
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 Points can be added by clicking on the line or removed by SHIFT clicking a point. CTRL Z will undo adding or removing a point 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 MULTIPLE SELECT Multiple points can be selected and dragged or moved with the keyboard arrows (moves 10 pixels with shift key down) 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 squiggle = new Squiggle().center(); // makes a line with default 4 points with Bezier controls var line = new Squiggle({points:2, controlType:"none"}).pos(100,100); // makes a diagonal straight line that is editable
EXAMPLE
// Animate along a Squiggle // see https://zimjs.com/explore/squiggleAnimate.html for more var line = new Squiggle().center(); new Circle(10, red).addTo().animate({path:line}, 1000);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) color - (default 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 allowToggle - (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 stickColor - (default "#111") set the stick color of the controls selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control editPoints - (default true) set to false to not allow adding or removing points with click or ctrl click interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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 (squiggle.pane) with the points in a zim TextArea (squiggle.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. transformPoints(transformType, amount, x, y) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining    Note - does not adjust original Bounds    transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"    amount - the amount to transform    x, y - (default 0, 0) the x and y position to transform about 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 toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)    or pass in true to show controls or false to hide controls setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining    if one color is used, the current color is used and color1 is the second color in the range getPointAngle(index) - gets the angle made by the tangent at the index provided getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]    used internally for animating to path and adding removing Bezier points getAdjacentSegmentData(index) - returns an array of two arrays:    The first is an array of cubic Bezier points for segments adjacent and including the provided point index    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    The second is an array of starting point indexes for the segments that were tested    used internally to drag an animation along the path getCurvePoint(ratio, segmentRatios, segmentPoints) gets a point along whole curve at the ratio (0-1) provided    along with x and y values, the point has a z value that is the index of the squiggle point before the calculated point    ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment    segmentRatios and segmentPoints will be calculated if not provided    used internally for animating along the path - if lockControls is true, only animate will precalculate these values 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1000); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange stickColor - get or set the stickColor - requires an update() to see changes colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    eg. shape.colorCommand.linearGradient([green, blue ,green], [.2, .5, .8], 0, 0, shape.width, 0)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Fill.html thickness - get and set the stroke size in pixels thicknessCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html dashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html 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]] pointControls - get an array of controls (a container) - use this to animate controls pointCircles - get an array of control circles - use this to place some other obect at the point 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 (also see pointControls)    circle - the control point circle (also see pointCircles)    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 segmentPoints - a read-only array of cubic Bezier points for each segment    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    used internally to animate to the path and add and remove Bezier points segmentRatios - a read-only array of cumulative ratio lengths of segments    for instance the default five points (four segments) is [.25, .5, .75, 1]    used internally to animate to the path and attribute proportional time to each segment controls - access to the container that holds the sets of controls    each control is given a read-only num property sticks - access to the container that holds the control sticks controlsVisible - get or set the visibility of the controls - or use showControls() and hideControls() toggled - read-only Boolean property as to whether picker is showing 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 allowToggle - 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 onTop - get or set the onTop selectPoints - get or set whether points can be selected interactive - get or set whether the shape is interactive - toggle, move, change or add controls, 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 dispatches an "update" event if the points are changed or a point is added or removed    this removes all listeners on the old shape and controls    so any custom listeners on shape and controls will need to be re-applied - use the update event to do so See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover MORE https://zimjs.com/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 ▤VIDS
EXPAND 07773 ▶︎ Blob(color, borderColor, borderWidth, points, radius, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, ctrlclick, dashed, onTop, stickColor, selectColor, selectPoints, editPoints, interactive, style, group)
Blob(color, borderColor, borderWidth, points, radius, controlLength, controlType, lockControlType, showControls, lockControls, handleSize, allowToggle, move, ctrlclick, dashed, onTop, stickColor, selectColor, selectPoints, editPoints, interactive, style, group)
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 Points can be added by clicking on the shape or removed by SHIFT clicking a point. CTRL Z will undo adding or removing a point 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 MULTIPLE SELECT Multiple points can be selected and dragged or moved with the keyboard arrows (moves 10 pixels with shift key down) NOTE mouseChildren is turned to false for all zim Shape containers. NOTE with the ZIM namespace zns = false, this overwrites a JS Blob - so the JS Blob is stored as document.Blob 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: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();
EXAMPLE
// Transform the original points of a Blob // If you rotate or scale, this affects the control points - the little rectangles rotate or they scale // To avoid this, the points themselves can be transformed (scaleX, scaleY, scale, rotation, x, y) // This makes a square and scales it bigger without affecting control size or stroke size (if there were a stroke) // Note the default number of points is 4 but they are arranged at the top, bottom and sides - so would make a diamond with just controlType:"none" new Blob({controlType:"none"}).transformPoints("rotation", 45).transformPoints("scale", 2).center();
EXAMPLE
// Animate along a Blob // see https://zimjs.com/explore/blobAnimate.html for more // see https://zimjs.com/explore/blobAnimate2.html for more var path = new Blob().center(); new Circle(10, red).addTo().animate({path:path}, 1000);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) color - (default 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    If a handleSize of 0 is chosen, then the sticks will disappear too allowToggle - (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 stickColor - (default "#111") set the stick color of the controls selectColor - (default white) the color of the selected circle or rectangle of the controls if selectPoints is true selectPoints - (default true) set to false to not allow point controls to be selected for keyboard control editPoints - (default true) set to false to not allow adding or removing points with click or ctrl click interactive - (default true) set to false to turn off controls, move, toggle, select, edit - leaving just the shape style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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 (blob.pane) with the points in a zim TextArea (blob.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. transformPoints(transformType, amount, x, y) - scale, rotate, move points without affecting controls or borderWidth - returns object for chaining    Note - does not adjust original Bounds    transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y"    amount - the amount to transform    x, y - (default 0, 0) the x and y position to transform about 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.controlsVisible = true property hideControls() - hides the controls (and returns blob) - or use blob.controlsVisible = false property toggle(state - default null) - shows controls if hidden and hides controls if showing (returns the object for chaining)    or pass in true to show controls or false to hide controls setColorRange(color1, color2) - set a color range for shape - used by colorRange property - returns obj for chaining    if one color is used, the current color is used and color1 is the second color in the range getPointAngle(index) - gets the angle made by the tangent at the index provided getSegmentPoint(point1, point2) - returns an array of [point1, controlPoint1, controlPoint2, point2]    used internally for animating to path and adding removing Bezier points getAdjacentSegmentData(index) - returns an array of two arrays:    The first is an array of cubic Bezier points for segments adjacent and including the provided point index    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    The second is an array of starting point indexes for the segments that were tested    used internally to drag an animation along the path    will wrap around the blob if needed getCurvePoint(ratio, segmentRatios, segmentPoints) gets a point along whole curve at the ratio (0-1) provided    along with x and y values, the point has a z value that is the index of the blob point before the calculated point    the point also has an angle property which is the angle of the tangent at the point    ratio is 0-1 with 0 being at the first point and 1 being at the end of the last segment (the first point)    segmentRatios and segmentPoints will be calculated if not provided    used internally for animating along the path - if lockControls is true, only animate will precalculate these values 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the shape    for instance, shape.setColorRange(blue, pink) then shape.colorRange = .5    will set the color of the shape to half way between blue and pink    shape.animate({color:red}, 1000); is a shortcut to animate the colorRange    shape.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange colorCommand - access to the CreateJS fill command for bitmap, linearGradient and radialGradient fills    eg. shape.colorCommand.linearGradient([green, blue ,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    See: https://www.createjs.com/docs/easeljs/classes/Graphics.Stroke.html borderWidth - get and set the stroke size in pixels borderWidthCommand - access to the CreateJS stroke style command (width, caps, joints, miter, ignoreScale)    See: https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeStyle.html borderDashedCommand - access to the CreateJS stroke dashed command (segments, offset)    see https://www.createjs.com/docs/easeljs/classes/Graphics.StrokeDash.html stickColor - get or set the stick color of the controls - requires an update() to see changes 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]] pointControls - get an array of controls (a container) - use this to animate controls pointCircles - get an array of control circles - use this to place some other obect at the point 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 (also see pointControls)    circle - the control point circle (also see pointCircles)    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 segmentPoints - a read-only array of cubic Bezier points for each segment    each element is in the form of [point1, controlPoint1, controlPoint2, point2]    used internally to animate to the path and add and remove Bezier points segmentRatios - a read-only array of cumulative ratio lengths of segments    for instance the default four points is [.25, .5, .75, 1]    used internally to animate to the path and attribute proportional time to each segment controls - access to the container that holds the sets of controls    each control is given a read-only num property 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 allowToggle - 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 onTop - get or set the onTop property selectPoints - get or set whether points can be selected interactive - get or set whether the shape is interactive - toggle, move, change or add controls, 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation keyFocus - get or set the keyboard focus on the DisplayObject - see also zim.KEYFOCUS will be set to true if this DisplayObject is the first made or DisplayObject is the last to be used with keyboard group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 dispatches an "update" event if the points are changed or a point is added or removed    this removes all listeners on the old shape and controls    so any custom listeners on shape and controls will need to be re-applied - use the update event to do so See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤VIDS
-------------- COMPONENTS EXPAND 09356 ▶︎ Label(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, fontOptions, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, style, group)
Label(text, size, font, color, rollColor, shadowColor, shadowBlur, align, valign, lineWidth, lineHeight, fontOptions, backing, outlineColor, outlineWidth, backgroundColor, backgroundBorderColor, backgroundBorderWidth, corner, backgroundDashed, padding, paddingHorizontal, paddingVertical, shiftHorizontal, shiftVertical, rollPersist, labelWidth, labelHeight, maxSize, style, group)
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");});
EXAMPLE
STYLE = {font:"courier"}; new Label("Hi Courier").center(); // will be courier not arial STYLE = {text:"YAY!", color:"Red"}; new Label().center().mov(0,100); // will say YAY! in red arial font new Label("Hello").center().mov(0,200); // will say Hello in red arial
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 "center") 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 backgroundColor - (default null) set to CSS color to add a rectangular color around the label    The background color will change size to match the text of the label    Note: the backgroundColor is different than a backing which can be any Display Object    and background parameters are ignored if a backing parameter is set backgroundBorderColor - (default null) the background stroke color backgroundBorderWidth - (default null) thickness of the background border corner - (default 0) the round of corner of the background if there is one    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] backgroundDashed - (default null) set to true for dashed background border (if backgroundBorderColor or backgroundBorderWidth set) padding - (default 10 if backgroundColor set) places the border this amount from text (see paddingHorizontal and paddingVertical)    padding parameters are ignored if there is no backgroundColor set (also ignored if a backing parameter is set) paddingHorizontal - (default padding) places border out at top bottom paddingVertical - (default padding) places border out at left and right shiftHorizontal - (default 0) move the label (CreateJS Text) inside the Label container horizontally shiftVertical - (default 0) move the label (CreateJS Text) inside the Label container vertically rollPersist - (default false) set to true to maintain rollover stage as long as mousedown or press is activated (used by Buttons) labelWidth - (default null) the same as the lineWidth - the text will wrap at the labelWidth (added to match labelHeight) labelHeight - (default null) the height of the text - setting this will probably alter the font size - so the size parameter is overwritten    for labelHeight to work, the labelWidth must also be set    using labelWidth and labelHeight together allow you to fit as much text into specified width and height dimensions maxSize - (default null) set to limit the font size when using labelWidth and labelHeight style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS setColorRange(color1, color2) - set a color range for label - used by colorRange property - returns obj for chaining    if one color is used, the current color is used and color1 is the second color in the range showRollColor(visible) - default 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 text - references the text property of the text object size - the font size of the Label (without px) paddingHorizontal - read-only value for paddingHorizontal of label    note - no padding property - that gets split into paddingHorizontal and paddingVertical paddingVertical - read-only value for paddingVertical of label color - gets or sets the label text color colorRange - if setColorRange() is used, the colorRange is a ratio (0-1) between the colors    setting the colorRange will change the color property of the label    for instance, label.setColorRange(blue, pink) then label.colorRange = .5    will set the color of the label to half way between blue and pink    label.animate({color:red}, 1000); is a shortcut to animate the colorRange    label.wiggle("colorRange", .5, .2, .5, 1000, 5000) will wiggle the colorRange rollColor - gets or sets the label rollover color labelWidth - the width at which the text wraps labelHeight - setting this and labelWidth will change the font size to fit within the specified dimensions ** 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 depth - for ZIM VR - the depth used to shift left and right channel and for parallax in VR - also see dep() ZIM Display method backing - access to backing object background - access to background Rectangle if backgroundColor is set 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 09806 ▶︎ LabelOnPath(label, path, percentAngle, percents, showPath, allowToggle, interactive, onTop, style, group)
LabelOnPath(label, path, percentAngle, percents, showPath, allowToggle, interactive, onTop, style, group)
LabelOnPath zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Makes a label along a path of a Squiggle or Blob - which can be interactive, fixed, toggled or hidden A list of percentages for where the letters are can be provided to move around letters See: https://zimjs.com/explore/labelonpath.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 lop = new LabelOnPath({    label = "Hello World",    // label:new Label({text:"JELLO JIGGLES!", size:50}),    // path:new Blob(),    // path:new Squiggle({    // color:lighter,    // thickness:4,    // points:[[0,75,0,0,-100,200,100,-200],[300,75,0,0,-100,200,100,-200]]    // }).transformPoints("scaleX",2).transformPoints("rotation",0),    percentAngle:100, // default    showPath:false, // default    allowToggle:true, // default    interactive:true, // default    onTop:false // default }).center(); zog(lop.text) frame.on("keydown", function () {    // shows percent spacing of letters along path    // could pass [results] in as an array to percents parameter of LabelOnPath zog(lop.percents.toString());    // uncomment to record the path    // could pass this in as the points parameter to start with a given path // lop.path.recordPoints(true); });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) label - (default "Label on Path") a String or a ZIM Label    can set any label properties such as color, size, font, etc. on the label passed in path - (default new Squiggle()) a ZIM Squiggle or ZIM Blob    can set any properties such as color, points, etc. on the shape passed in percentAngle - (default 100) from 0-100 (or beyond in either direction) as to how much to tilt the letters percents - (default null) an array of percentage locations of the letters along the line - should match number of letters showPath - (default false) Boolean to show path at start allowToggle - (default true) Boolean to allow user to toggle path off and on interactive - (default true) Boolean to allow user to change path with controls, drag or add and remove points    can also set these individually on the path onTop - (default false) - Boolean to set path on top when dragged style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS toggle(state) - leave off state to toggle path to opposite state. Use true to hide and false to show - returns object for chaining hidePath() - hides path - returns object for chaining showPath() - shows path - returns object for chaining resize() - if not interactive, call this to update the text on the path - returns object for chaining 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 - the name of the class as a String text - get or set the text on the path path - read-only access to path - but can manipulate the path letters - access to ZIM Container of labels used for letters    for instance labels.loop(function (label) {label.color = red;});    or animate as a sequence labels.animate({props:{scale:1.5}, loop:true, rewind:true, sequence:200}); numLetters - how many letters - same as letters.numChildren percents - access to the array of percents for letter positioning - resize() after changing unless interactive which auto resizes allowToggle - get or set the Boolean to allow toggling the path interactive - get or set the Boolean to allow interaction with the path ** 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. EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤VIDS
EXPAND 10078 ▶︎ Button(width, height, label, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderRollColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, waitBacking, rollWaitBacking, waitIcon, rollWaitIcon, align, valign, indent, indentHorizontal, indentVertical, style, group)
Button(width, height, label, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderRollColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, waitBacking, rollWaitBacking, waitIcon, rollWaitIcon, align, valign, indent, indentHorizontal, indentVertical, style, group)
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, Pattern, 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, patterns and icons https://zimjs.com/bits/view/pizzazz.html https://zimjs.com/bits/view/icons.html https://zimjs.com/patterns.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,    backgroundColor:"violet",    fontOptions:"bold" }); var button = new Button({    label:label,    width:390,    height:110,    backgroundColor:"purple",    rollBackgroundColor:"MediumOrchid",    borderWidth:8,    borderColor:"violet",    gradient:.3,    corner:0 }); button.center(stage);
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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) backgroundColor - (default "orange") background color of button (any CSS color) rollBackgroundColor - (default "lightorange") rollover background color of button color - (default "white") label color of button (any CSS color) unless a custom Label is set rollColor - (default "white") rollover label 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)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 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)    assumed to be center registration for easy positioning *** as with all backings    see ZIM Pizzazz module for a fun set of Button Shapes like Boomerangs, Ovals, Lightning Bolts, etc.    https://zimjs.com/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 null) set to display object to add icon at the center of the button and remove label    assumed to be center registration for easy positioning *** as with all icons    https://zimjs.com/bits/view/icons.html rollIcon - (default null) set to display object to show icon on rollover toggle - (default null) set to string to toggle with label    the button will not toggle if there is a wait parameter set    see the backings and icons parameters below for custom toggle settings    there are no color settings for toggle - to do this, just make a second button and swap buttons toggleBacking - (default null) set to display object to set a different backing for toggled state rollToggleBacking - (default null) set to display object to set a backing for the rolled toggle state toggleIcon - (default null) set to display object to add icon at the center of the button and remove label in toggle state rollToggleIcon - (default null) set to display object to show icon on rollover in toggle state 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 waitBackgroundColor parameter to 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 clearWait() method to clear or cancel the wait status - for instance, if the pane the button is in is closed waitTime - (default 30000 - 30 seconds) milliseconds (ms) to show wait state before reverting to normal button waitBackgroundColor - (default red) color to make button during wait time if wait is set rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over waitColor - (default label's color) color to make text during wait time if wait is set rollWaitColor - (default label's roll color) color for text when waiting and rolled over 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 waitBacking - (default null) set to display object to set a different backing for wait state rollWaitBacking - (default null) set to display object to a different roll backing for wait state waitIcon - (default null) set to display object to add icon at the center of the button and remove label in wait state rollWaitIcon - (default null) set to display object to show icon on rollover in wait state align - (default "center") horizontal align of the label valign - (default "center") vertical align of the label indent - (default 10) indent of label when align or valign is set indentHorizontal - (default indent) horizontal indent of label when align or valign is set indentVertical - (default indent) vertical indent of label when align or valign is set style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)    Backing types are: "backing", "rollBacking", "toggleBacking", "rollToggleBacking", "waitBacking", "rollWaitBacking"    note - all backing will have a pattern property if a pattern is set as a backing setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)    Icon types are: "icon", "rollIcon", "toggleIcon", "rollToggleIcon", "waitIcon", "rollWaitIcon" toggle(state) - forces a toggle of label, backing and icon if set    state defaults to null so just toggles if left blank    pass in true to go to the toggled state and false to go to the original state    returns object for chaining wait() - forces a wait state - with wait text, backings and icons if set 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 color - get or set non-rolled on label color (if no icon specified) rollColor - get or set rolled on label color backgroundColor - get or set non-rolled on backing color (if no backing specified) rollBackgroundColor - get or set rolled on backing color rollPersist - default is false - set to true to keep rollover state when button is pressed even if rolling off borderColor - get or set non-rolled on border color borderRollColor - get or set the border rolled color hitPadding - extra padding for interactivity - see hitPadding parameter for extra notes backing - references the backing of the button    use setBacking() to change as with all backings    note - all backings will have a pattern property if a pattern is set as a backing rollBacking - references the rollBacking (if set) icon - references the icon of the button (if set)    use setIcon() to change as with all icons rollIcon - references the rollIcon (if set) rolled - read-only true if button is being rolled over else false toggled - read-only true if button is in toggled state, false if button is in original state toggleBacking - references the toggle backing (if set) rollToggleBacking - references the toggle roll backing (if set) toggleIcon - references the toggle icon (if set) rollToggleIcon - references the toggle roll icon (if set) waiting - read-only true if button is in the waiting state within wait time waitBacking - references the wait backing (if set) rollWaitBacking - references the wait roll backing (if set) waitIcon - references the wait icon (if set) rollWaitIcon - references the wait roll icon (if set) focus - get or set the focus property of the Button used for tabOrder 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 10854 ▶︎ CheckBox(size, label, startChecked, color, backgroundColor, margin, indicatorType, indicatorColor, style, group)
CheckBox(size, label, startChecked, color, backgroundColor, margin, indicatorType, indicatorColor, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 text color of the label backgroundColor - (default color) the stroke color of the box (consider the check to be the foreground) margin - (default 10) is on outside of box so clicking or pressing is easier indicatorType - (default check) could be square (box) or x indicatorColor - (default color) the color of the indicator style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 indicator - gives access to the check mark ie. indicator.sca(.8); indicatorColor - get or set the color of the indicator 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 11096 ▶︎ RadioButtons(size, buttons, vertical, color, backgroundColor, spacing, margin, always, indicatorColor, style, group)
RadioButtons(size, buttons, vertical, color, backgroundColor, spacing, margin, always, indicatorColor, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 text color of the label backgroundColor - (default color) the stroke color of the box (consider the check to be the foreground) 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 indicatorColor - (default color) the color of the indicator style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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 dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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; indicators - an array of the zim Shape dot objects. indicators[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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 11415 ▶︎ Toggle(width, height, label, startToggled, backgroundColor, margin, indicatorType, indicatorColor, toggleBackgroundColor, color, borderColor, borderWidth, corner, indicatorCorner, shadowColor, shadowBlur, time, labelLeft, style, group)
Toggle(width, height, label, startToggled, backgroundColor, margin, indicatorType, indicatorColor, toggleBackgroundColor, color, borderColor, borderWidth, corner, indicatorCorner, shadowColor, shadowBlur, time, labelLeft, style, group)
Toggle zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION A Toggle button that toggles off and on - with optional labels Thanks Andi Erni for the initial design and coding of the Toggle. See: https://zimjs.com/explore/toggle.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
new Toggle("ON").center().change(function (e) {    zog(e.target.toggled) });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 80) the width of the toggle (less labels) height - (default 50) the height of the toggle label - (default null) an optional ZIM Label (or text for default label properties)    also see labelLeft for left side text startToggled - (default false) set to true to start in the toggled position backgroundColor - (default "#C60") dark orange - set to any HTML color for background color margin - (default 10) the distance around and between the toggle and its parts indicatorType - (default "circle" or "round") set to "rectangle" or "square" for square indicator indicatorColor - (default "#111") toggleBackgroundColor - (default "#F93") orange - for toggled background color    try setting the borderColor to the same color as the background for inner color change effect color - (default "#111") the font color of the toggle borderColor - (default null) the color of the border borderWidth - (default null - or 1 if borderColor) the size of the border corner - (default half the height) a corner radius - or an array of corners [topLeft, topRight, bottomRight, bottomLeft] indicatorCorner - (default 0) change the corner radius of a rectangle toggleType - or an array of corners [topLeft, topRight, bottomRight, bottomLeft] shadowColor - (default "rgba(0,0,0,.3)" if shadowBlur) the shadow color - set to -1 for no shadow shadowBlur - (default 14 if shadowColor) the shadow blur - set to -1 for no shadow time - (default 200) time in milliseconds (ms) for toggle to animate labelLeft - (default null) an optional ZIM Label for the left side of the toggle (or text for default label properties) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS toggle(state) - toggle the toggle - state defaults to true - set to false to un-toggle clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 toggled - gets the toggled state of the toggle - same as selected selected - gets the selected object - selected.label, selected.id, etc. indicator - access to the indicator object background - access to background Rectangle label - access to the label if provided labelLeft - access to the label on the left if provided ** 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 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 when pressed but not when toggle() is used ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤VIDS
EXPAND 11662 ▶︎ Pane(width, height, label, backgroundColor, color, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarHeight, close, closeColor, style, group)
Pane(width, height, label, backgroundColor, color, draggable, resets, modal, corner, backdropColor, shadowColor, shadowBlur, center, displayClose, backdropClose, backing, fadeTime, container, titleBar, titleBarColor, titleBarHeight, close, closeColor, style, group)
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) // custom backing with ZIM Pizzazz 3 // up top link to https://d309knd7es5f10.cloudfront.net/pizzazz_03.js new Pane({    label:new Label({color:white, text:"STOP", size:50}),    backing:pizzazz.makePattern({       type:"stripes",       colors:series([red,black]),       rows:20    }).alp(.8) }).show();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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) backgroundColor - (default "white") a css color for the background of the Pane color - (default "black") a css color for the text color of the Pane draggable - (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    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] backdropColor - (default rgba(0,0,0,.2)) the color 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 draggable 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.    as well as patterned backings using Pizzazz 3 fadeTime - (default 0) milliseconds to fade in and out container - (default - the default stage) container for the pane titleBar - (default null - no titleBar) a String or ZIM Label title for the pane that will be presented on a titleBar across the top titleBarColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar 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 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS show() - shows the pane (returns the pane for chaining) hide() - hides the pane toggle(state - default null) - shows if hidden and hides if showing (returns the pane for chaining)    or pass in true to show pane or false to hide pane clone() - makes a copy with properties such as x, y, etc. also copied (returns the new pane for chaining) dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 titleBar - access to the ZIM Container for the titleBar if there is a titleBar titleBarLabel - access to the ZIM Label of the titleBar if there is a titleBar titleBarBacking - access to the ZIM Rectangle of the titleBar if there is a titleBar toggled - read-only Boolean property as to whether pane is showing close - access to the ZIM Shape if there is a close X backdrop - reference to the backdrop that covers the stage container - get or set the container the pane will be added to resetX - if reset is true you can dynamically adjust the position if needed resetY - and the y position for reset... 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 12077 ▶︎ Window(width, height, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, close, closeColor, style, group)
Window(width, height, backgroundColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, interactive, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, close, closeColor, style, group)
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 if zim namespace zns = true then this overwrites a JS Window - so the JS Window is stored as document.Window 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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 300) the width of the window height - (default 200) the height of window - including the titleBar if there is a titleBar backgroundColor - (default #333) background color (use clear - or "rbga(0,0,0,0)" for no background) borderColor - (default #999) border color borderWidth - (default 1) the thickness of the border padding - (default 0) places the content in from edges of border (see paddingHorizontal and paddingVertical)    padding is ignored if content x and y not 0 - and really only works on top left - so more like an indent corner - (default 0) is the rounded corner of the window (does not accept corner array - scrollBars are too complicated) swipe - (default auto/true) the direction for swiping set to none / false for no swiping    also can set swipe to just vertical or horizontal scrollBarActive - (default true) shows scrollBar (set to false to not) scrollBarDrag - (default false) set to true to be able to drag the scrollBar scrollBarColor - (default borderColor) the color of the scrollBar scrollBarAlpha - (default .3) the transparency of the scrollBar scrollBarFade - (default true) fades scrollBar unless being used scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar 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 (ignored if content x not 0) paddingVertical - (default padding) places content in from left and right (ignored if content y not 0) scrollWheel - (default true) scroll vertically with scrollWheel damp - (default null) set to .1 for instance to damp the scrolling titleBar - (default null - no titleBar) a String or ZIM Label title for the window that will be presented on a titleBar across the top titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag window boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle() close - (default false) - a close X for the top right corner that closes the window when pressed closeColor - (default #555) - the color of the close X if close is requested style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS add(obj, replace) - 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()    replace defaults to false and if set to true, removes all content then adds the obj.    returns window for chaining remove(obj) - removes object from content container of window and updates - returns window for chaining removeAll() - removes all objects from content container of window and updates - returns window for chaining resize(width, height) - resizes the Window without scaling the content (also calls update() for scroll update)    width and height are optional - returns window for chaining 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 from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 scrollBar - data object that holds the following properties (with defaults):    you can set after object is made...    scrollBar.horizontal = zim Shape // the horizontal scrollBar rectangle shape    scrollBar.vertical = zim Shape // the vertical scrollBar rectangle shape    scrollBar.color = borderColor; // the color of the scrollBar    scrollBar.size = 6; // the width if vertical or the height if horizontal    scrollBar.minSize = 12; // for the height if vertical or the width if horizontal    scrollBar.spacing = 3 + size + borderWidth / 2;    scrollBar.margin = 0; // adds extra space only at end by scrollBars    scrollBar.corner = scrollBar.size / 2;    scrollBar.showTime = 500; // ms to fade in    scrollBar.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) titleBar - access to the ZIM Container for the titleBar if there is a titleBar titleBarLabel - access to the ZIM Label of the titleBar if there is a titleBar titleBarBacking - access to the ZIM Rectangle of the titleBar if there is a titleBar close - access to the ZIM Shape if there is a close X blendMode - how the object blends with what is underneath - such as "difference", "multiply", etc. same as CreateJS compositeOperation group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 dispatches a "scrolling" event when the window scrolls dispatches a "close" event when the window is closed with the x on the titleBar if there is a titleBar 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 VIDS
EXPAND 12753 ▶︎ Waiter(container, speed, foregroundColor, backgroundColor, corner, shadowColor, shadowBlur, fadeTime, style, group)
Waiter(container, speed, foregroundColor, backgroundColor, corner, shadowColor, shadowBlur, fadeTime, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) container - (default first frame's stage) the container that holds the waiter speed - (default 600) cycle time in milliseconds backgroundColor - (default "orange") the background color foregroundColor - (default "white") the dot color corner - (default 14) the corner radius of the waiter box    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS show() - shows the waiter (returns the waiter for chaining) hide() - hides the waiter toggle(state - default null) - shows waiter if hidden and hides waiter if showing (returns the object for chaining)    or pass in true to show waiter or false to hide waiter clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining) dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 12979 ▶︎ ProgressBar(barType, foregroundColor, backgroundColor, borderColor, borderWidth, padding, label, color, labelPosition, percentage, corner, shadowColor, shadowBlur, backing, delay, fastClose, container, autoHide, style, group)
ProgressBar(barType, foregroundColor, backgroundColor, borderColor, borderWidth, padding, label, color, labelPosition, percentage, corner, shadowColor, shadowBlur, backing, delay, fastClose, container, autoHide, style, group)
ProgressBar zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Adds a little progress bar that can be scaled if desired Pass in to progress parameter of the Frame or LoadAssets call to operate or use on its own with the show(), hide() methods and percent 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 progressBar = new ProgressBar(); frame.loadAssets({assets:"greeting.mp3", progress:progressBar}); // a bar will be centered on the default stage (or specify a container) // the bar will show a percentage of asset bytes loaded frame.on("complete", function() {    // the bar will be removed when loading is complete    frame.asset("greeting.mp3").play(); });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) barType - (default "circle") set "rectangle" for rectangular progress bar foregroundColor - (default green) the color of the bar backgroundColor - (default dark) the color of the background borderColor - (default backgroundColor) the color of the border - for "rectangle" barType borderWidth - (default 10 "circle" or 0 "rectangle") the width of the border (or ring for "circle" barType) padding - (default 2 for "circle" or 0 for "rectangle") the space between the bar and the backing label - (null) set to a String or a ZIM Label to specifify label properties color - (default foregroundColor) the color of the label if there is one labelPosition - ("bottom" if label specified) also set to "top" to move label above progress bar percentage - (default false) set to true to show percentage after label (set label to "" for only percentage) corner - (default 15 for "rectangle" barType) set to 0 for square corners, etc.    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] shadowColor - (default rgba(0,0,0,.3)) set to -1 for no shadow shadowBlur - (default 14) the blur of the shadow if shadow is set backing - (default null) a Display object for the backing of the "rectangle" barType (eg. Shape, Bitmap, Container, Sprite) See ZIM Pizzazz 3 - for patterns - these have a type of "Pattern" which makes them special If a "pattern" is used then the normal backing will be used to mask the pattern delay - (default 100) milliseconds to delay view of progress bar - helps not flash progress bar when content is cached fastClose - (default true) hide as soon as progress is done    The complete event is delayed slightly after the progress bar is loaded    Set to false to wait until the complete event triggers before removing the progress bar container - (defaultFrame's stage) or specify a container to hold the progress bar autoHide - (default true) set to false so bar does not hide when reaching 100% style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS show() - shows the progress bar (returns the progress bar for chaining) hide() - hides the progress bar toggle(state - default null) - shows progress bar if hidden and hides progress bar if showing (returns the object for chaining)    or pass in true to show progress bar or false to hide progress bar setBacking(backing) - change the backing of the progress bar clone() - makes a copy with properties such as x, y, etc. also copied (returns the new waiter for chaining) dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 percent - get or set the percent (0-100) complete of the progress bar label - reference to the label if there is one backing - reference to the backing shape. This may be the backing DisplayObject if provided    the backing will have a pattern property if a pattern is set for the backing bar - reference to the bar shape toggled - read-only Boolean that is true if progress bar is showing otherwise false ** 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. group - used when the object is made to add STYLE with the group selector (like a CSS class) EVENTS See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤VIDS
EXPAND 13289 ▶︎ Indicator(width, height, num, foregroundColor, backgroundColor, borderColor, borderWidth, backdropColor, corner, indicatorType, fill, scale, lightScale, press, shadowColor, shadowBlur, style, group)
Indicator(width, height, num, foregroundColor, backgroundColor, borderColor, borderWidth, backdropColor, corner, indicatorType, fill, scale, lightScale, press, shadowColor, shadowBlur, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 100) width of indicator height - (default 50) height of indicator num - (default 6) the number of lights foregroundColor - (default "orange") color of the light(s) turned on backgroundColor - (default "grey") color of the light(s) turned off borderColor - (default -1 for no border) border color of lights and backdrop (if backdrop) borderWidth - (default 1 if stroke is set) the size of the stroke in pixels backdropColor - (default -1 for no backdrop) backdrop rectangle around lights corner - (default 0) the corner radius if there is a backdropColor provided    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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) backdrop - gives access to the backdrop 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 13512 ▶︎ List(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, indentHorizontal, indentVertical, spacing, backgroundColor, rollBackgroundColor, selectedBackgroundColor, backdropColor, color, selectedColor, rollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, close, closeColor, style, group)
List(width, height, list, viewNum, vertical, currentSelected, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, indentHorizontal, indentVertical, spacing, backgroundColor, rollBackgroundColor, selectedBackgroundColor, backdropColor, color, selectedColor, rollColor, borderColor, borderWidth, padding, corner, swipe, scrollBarActive, scrollBarDrag, scrollBarColor, scrollBarAlpha, scrollBarFade, scrollBarH, scrollBarV, slide, slideDamp, slideSnap, shadowColor, shadowBlur, paddingHorizontal, paddingVertical, scrollWheel, damp, titleBar, titleBarColor, titleBarBackgroundColor, titleBarHeight, draggable, boundary, close, closeColor, style, group)
List zim class - extends a zim.Window which extends a zim.Container which extends a createjs.Container DESCRIPTION A vertical or horizontal list of items. This is really a zim.Tabs object inside a zim.Window object. The list can be strings, numbers or Label objects and these are added to Tabs buttons. The list can also include any DisplayObject with bounds (which most ZIM objects have except a Shape needs bounds set manually with setBounds()). If the object is not a string, number or Label then selection will not highlight and currently animateTo() may not work if size is different. See: https://zimjs.com/explore/list.html See: https://zimjs.com/explore/listObjects.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 list = new List({    list:["Enormous", "Big", "Medium", "Small", "Puny"],    viewNum:3, // this number will change the size of the list elements (default is 5) }).center() stage.update();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) width - (default 300) width of list height - (default 200) height of list list - (default Options 1-30) an array of strings, numbers or zim Label objects - these will be added to zim Tabs Buttons    or include any DisplayObject with bounds - these will not get highlighted but will indicate a change event and selectedIndex    currently objects with different sizes may not animateTo() properly - this will be fixed soon. viewNum - (default 5) how many items to show in the width and height provided vertical - (default true) set to false to make a horizontal list currentSelected - (default true) set to false to not show the current selection as highlighted align - (default "center") horizontal align valign - (default "center") vertical align labelAlign - (default "center") horizontal align of the label only labelValign - (default "center") vertical align of the label only labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in list labelIndentHorizontal - (default indent) horizontal indent of label when align or valign is set labelIndentVertical - (default indent) vertical indent of label when align or valign is set indent - (default 10) indent of items when align or valign is set and there are custom objects in list indentHorizontal - (default indent) horizontal indent of items when align or valign is set and there are custom objects in list indentVertical - (default indent) vertical indent of items when align or valign is set and there are custom objects in list spacing - (default 2) is the pixels between tab buttons and at top and bottom backgroundColor - (default "#777") the background color of the list elements (unless custom object) rollBackgroundColor - (default "#555") the background color of the list element as rolled over selectedBackgroundColor - (default "#444") the background color of the list element when selected backdropColor - (default "#333") the background color of the list window (any CSS color) color - (default "white") the text color of a deselected list element when not rolled over selectedColor - (default color) the text color of the selected list element rollColor - (default color) the rollover color (selected list elements do not roll over) borderColor - (default #999) border color borderWidth - (default 1) the thickness of the border padding - (default 0) places the content in from edges of border (see paddingHorizontal and paddingVertical) corner - (default 0) is the rounded corner of the list (does not accept corner array - scrollBars are too complicated) swipe - (default auto/true) the direction for swiping set to none / false for no swiping    also can set swipe to just vertical or horizontal scrollBarActive - (default true) shows scrollBar (set to false to not) scrollBarDrag - (default false) set to true to be able to drag the scrollBar scrollBarColor - (default borderColor) the color of the scrollBar scrollBarAlpha - (default .3) the transparency of the scrollBar scrollBarFade - (default true) fades scrollBar unless being used scrollBarH - (default true) if scrolling in horizontal is needed then show scrollBar scrollBarV - (default true) if scrolling in vertical is needed then show scrollBar 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 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 titleBar - (default null - no titleBar) a String or ZIM Label title for the list that will be presented on a titleBar across the top titleBarColor - (default "black") the text color of the titleBar if a titleBar is requested titleBarBackgroundColor - (default "rgba(0,0,0,.2)") the background color of the titleBar if a titleBar is requested titleBarHeight - (default fit label) the height of the titleBar if a titleBar is requested draggable - (default true if titleBar) set to false to not allow dragging titleBar to drag list boundary - (default null) set to ZIM Boundary() object - or CreateJS.rectangle() close - (default false) - a close X for the top right corner that closes the list when pressed closeColor - (default #555) - the color of the close X if close is requested style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS animateTo(index, timePerItem) - animate list to index at given time per item (default 50ms) - returns object for chaining addAt(items, index) - an array of items to insert at an index in the list - returns object for chaining removeAt(number, index) - remove a number of elements (default 1) from the list starting at and including the index - returns object for chaining clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO All Window methods ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 - get or set the index of the selected list element selectedIndexPlusPosition set the index and scroll the index into view - might be broken for lists with custom objects of different heights text - get the text of the selected label - if there is a label list - read-only array of list button objects or objects in the list    this will change from the list entered as parameters as strings are turned into tab buttons, etc.    use addAt() and removeAt() methods to manipulate length - read-only length of the list tabs - a reference to the tabs object used in the list ** 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) ALSO All Window properties 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 - then use selectedIndex or text to find data ALSO All Window events ALSO See the CreateJS Easel Docs for Container events, such as: added, click, dblclick, mousedown, mouseout, mouseover, pressmove, pressup, removed, rollout, rollover CLOSE ▲VIEW ▤VIDS
EXPAND 13883 ▶︎ Stepper(list, width, backgroundColor, borderColor, borderWidth, label, color, vertical, arrows, corner, shadowColor, shadowBlur, continuous, display, press, hold, holdDelay, holdSpeed, draggable, dragSensitivity, dragRange, stepperType, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward, style, group)
Stepper(list, width, backgroundColor, borderColor, borderWidth, label, color, vertical, arrows, corner, shadowColor, shadowBlur, continuous, display, press, hold, holdDelay, holdSpeed, draggable, dragSensitivity, dragRange, stepperType, min, max, step, step2, arrows2, arrows2Scale, keyEnabled, keyArrows, rightForward, downForward, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 borderWidth - (default 1 if borderColor) stroke thickness 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    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 continuous - (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 draggable - (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 draggable 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 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS next() - goes to next prev() - goes to previous clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 containerPrev, containerNext - access to the zim Container that holds the arrows 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 continuous - 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 keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS    will be set to true if this component is the first made or component is the last to be used group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 ▤VIDS
EXPAND 14775 ▶︎ Slider(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, inside, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, damp, style, group)
Slider(min, max, step, button, barLength, barWidth, barColor, vertical, useTicks, inside, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, damp, style, group)
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); // 0-10 in steps of 1 }); stage.update();
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 damp - (default null) set to value such as .1 to damp the slider currentValue    use with Ticker rather than "change" event - eg:    Ticker.add(function () {circle.x = slider.currentValue;}); style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), animate(), sca(), reg(), mov(), center(), centerReg(),drag(), hitTestRect(), 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 keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS    will be set to true if this component is the first made or component is the last to be used group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 15229 ▶︎ Dial(min, max, step, width, backgroundColor, indicatorColor, indicatorScale, indicatorType, innerCircle, innerScale, useTicks, innerTicks, tickColor, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax, damp, style, group);
Dial(min, max, step, width, backgroundColor, indicatorColor, indicatorScale, indicatorType, innerCircle, innerScale, useTicks, innerTicks, tickColor, limit, keyArrows, keyArrowsStep, keyArrowsH, keyArrowsV, continuous, continuousMin, continuousMax, damp, style, group);
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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) backgroundColor - (default "#666") the background 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 damp - (default null) set to value such as .1 to damp the slider currentValue    IGNORED when limit set to false - otherwise may damp incorrectly    use with Ticker rather than "change" event - eg:    Ticker.add(function () {circle.x = slider.currentValue;}); style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS    will be set to true if this component is the first made or component is the last to be used group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 15776 ▶︎ Tabs(width, height, tabs, backgroundColor, rollBackgroundColor, selectedBackgroundColor, color, rollColor, selectedColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, indentHorizontal, indentVertical, useTap, style, group)
Tabs(width, height, tabs, backgroundColor, rollBackgroundColor, selectedBackgroundColor, color, rollColor, selectedColor, vertical, spacing, currentEnabled, currentSelected, corner, base, keyEnabled, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, backdropColor, align, valign, labelAlign, labelValign, labelIndent, labelIndentHorizontal, labelIndentVertical, indent, indentHorizontal, indentVertical, useTap, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 any String, Number, Label, Button, (or any DisplayObject)    OR tab objects with the following properties available:    any tab specific properties will override the default values from other parameters    [{label:"String", width:200, backgroundColor:"red", rollBackgroundColor:"pink", selectedBackgroundColor:"grey", color:"yellow", selectedColor:"lime"}, {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.    (this was put in place before Buttons were allowed in the tabs array - so you can just add a Button to the tab array instead)    See wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, 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    Warning - do not use the same array for multiple tabs as the array is turned into an array of objects used by the Tabs object. backgroundColor - (default "#777") the background color of a deselected tab when not rolled over rollBackgroundColor - (default "#555") the rollover background color (selected tabs do not roll over) selectedBackgroundColor - (default "#333") the background color of the selected tab (any CSS color) color - (default "white") the text color of a deselected tab when not rolled over selectedColor - (default color) the text color of the selected tab (any CSS color) rollColor - (default color) the rollover color (selected tabs do not roll over) vertical - (default false) set to true to make vertical tabs with text still horizontal spacing - (default 1) is the pixels between tab buttons currentEnabled - (default false) set to true to be able to press (a second time) the selected tab button currentSelected - (default true) set to false to not highlight the current button (good for button bars)    setting this to true will set currentEnabled to true corner - (default 0) the corner radius of the tabs    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] base - (default "none") specifiy a side for flat bottom when corner is set (but not set to an array)    other values are "bottom" (default when corner and not vertical), "left" (default when corner and vertical), "top", "right"    ** this was flatBottom - but then vertical tabs were added so it was changed in ZIM 9.2.0 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 waitBackgroundColor - (default color) the color of the tab during wait period rollWaitBackgroundColor - (default color) the color of the tab during wait period waitBackgroundColor - (default red) color to make button during wait time if wait is set rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over waitColor - (default label's color) color to make text during wait time if wait is set rollWaitColor - (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 backdropColor - (default null) set to a color to show behind the tabs (handy for when corner is not 0) align - (default "center") horizontal align valign - (default "center") vertical align labelAlign - (default "center") horizontal align of the label only labelValign - (default "center") vertical align of the label only labelIndent - (default indent) indent of label when align or valign is set - usually same as indent unless custom objects are in tabs labelIndentHorizontal - (default indent) horizontal indent of label when align or valign is set labelIndentVertical - (default indent) vertical indent of label when align or valign is set indent - (default 10) indent of items when align or valign is set and there are custom objects in tabs indentHorizontal - (default indent) horizontal indent of label when align or valign is set indentVertical - (default indent) vertical indent of label when align or valign is set useTap - (default false) set to true to use tap to activate otherwise uses ACTIONEVENT (mousedown or click) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS addAt(items, index) - an array of items to insert at an index in the tab - tabs will grow in size - returns the object for chaining    To keep the same size - run insertAt() and then remake the Tabs using the tabs.buttons array as the tabs parameter removeAt(index, number) - remove a tab index an number of items (default 1) - tabs will shrink in size - returns the object for chaining clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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) backgroundColor - gets or sets default unselected background color rollBackgroundColor - gets or sets default rolled over background color selectedBackgroundColor - gets or sets default selected background color color - gets or sets default unselected text color selectedColor - gets or sets default selected text color rollColor - gets or sets default rolled over text 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; backdrop - reference to backdrop Rectangle if backdropColor is provided 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 keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS    will be set to true if this component is the first made or component is the last to be used group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 16426 ▶︎ Pad(width, cols, rows, keys, backgroundColor, rollBackgroundColor, selectedBackgroundColor, color, rollColor, selectedColor, spacing, currentEnabled, corner, labelColor, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, style, group)
Pad(width, cols, rows, keys, backgroundColor, rollBackgroundColor, selectedBackgroundColor, color, rollColor, selectedColor, spacing, currentEnabled, corner, labelColor, gradient, gloss, backing, rollBacking, wait, waitTime, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, waitModal, waitEnabled, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) ** inherits STYLE from type selector for Pad, then general styles then type selector for Tabs 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, backgroundColor:"Red", rollBackgroundColor:"pink", selectedBackgroundColor:"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, waitBackgroundColor, rollWaitBackgroundColor, waitColor, rollWaitColor, 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 backgroundColor - (default "#777") the background color of a deselected key when not rolled over rollBackgroundColor - (default "#555") the rollover background color (selected keys do not roll over) selectedBackgroundColor - (default "#333") the background color of the selected key (any CSS color) color - (default "white") the text color of a deselected key when not rolled over selectedColor - (default color) the text color of the selected key (any CSS color) rollColor - (default color) the rollover color (selected keys do not roll 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    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 waitBackgroundColor - (default color) the color of the button during wait period rollWaitBackgroundColor - (default color) the color of the button during wait period waitBackgroundColor - (default red) color to make button during wait time if wait is set rollWaitBackgroundColor - (default rollColor) color for button when waiting and rolled over waitColor - (default label's color) color to make text during wait time if wait is set rollWaitColor - (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 style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 selectedBackgroundColor - gets or sets default selected background color backgroundColor - gets or sets default unselected background color rollBackgroundColor - gets or sets default rolled over background color color - gets or sets default unselected text color rollColor - gets or sets default rolled over text color selectedColor - gets or sets default selected text 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 Tabs 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 16672 ▶︎ ColorPicker(width, colors, cols, spacing, greyPicker, alphaPicker, startBackgroundColor, draggable, shadowColor, shadowBlur, buttonBar, circles, indicator, backgroundColor, keyArrows, container, style, group)
ColorPicker(width, colors, cols, spacing, greyPicker, alphaPicker, startBackgroundColor, draggable, shadowColor, shadowBlur, buttonBar, circles, indicator, backgroundColor, keyArrows, container, style, group)
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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 unless one row) 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 unless one row) 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 startBackgroundColor - (default the last color in color array) the starting color draggable - (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 unless one row) 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 currentBackgroundColor backgroundColor - (default black) the color of the background keyArrows - (default true) set to false to disable keyboard arrows container - (default frame.zimDefaultFrame) if using show(), hide(), toggle() can set which container to center on style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS show() - show the picker (returns the picker for chaining) hide() - hides the picker toggle(state - default null) - shows if hidden and hides if showing (returns the picker for chaining)    or pass in true to show picker or false to hide picker clone() - makes a copy with properties such as x, y, etc. also copied dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 colors - read only array of colors in picker - not including greys greys - read only array of greys in picker if the grey picker is set toggled - read-only Boolean property as to whether picker is showing ** 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 zim 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 background - gets the Rectangle that is the background (cp.background.color = "white" - now a backgroundColor 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 keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS    will be set to true if this component is the first made or component is the last to be used group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 VIDS
EXPAND 17342 ▶︎ Keyboard(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, special, rtl, style, group)
Keyboard(labels, backgroundColor, color, shiftBackgroundColor, shiftHoldBackgroundColor, placeBackgroundColor, placeColor, cursorColor, shadeAlpha, borderColor, borderWidth, margin, corner, draggable, placeClose, shadowColor, shadowBlur, container, data, place, special, rtl, style, group)
Keyboard zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION The Keyboard class makes a keyboard ideal for mobile or touch screens. Often, it seems the mobile keyboard can cause problems with layout. This in-canvas keyboard requires much less testing and concern. The Keyboard can work with ZIM Labels to give input text without a TextArea. Thanks Frank Los for the initial design and coding of the Keyboard. See https://zimjs.com/keyboard NOTE currently, multi-line Label input is not supported NOTE the width of the Label can be set by the Label's lineWidth paremeter NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// create Labels to capture the text from the keyboard var text1 = new Label({text:"", backgroundColor:white}).pos(100,100); var text2 = new Label({text:"", backgroundColor:white}).pos(100,200); // create a new Keyboard and pass in the labels as an array // or if just one label, then pass in the label var keyboard = new Keyboard([text1, text2]); // if just the letter is needed use the keydown event keyboard.on("keydown", function(e) {    zog(e.letter); }); // create events to capture a mousedown on the labels var text1Event = text1.on("mousedown", activate); var text2Event = text2.on("mousedown", activate); function activate(e) {    keyboard.show();    // remove the events when keyboard is active    text1.off("mousedown", text1Event);    text2.off("mousedown", text2Event); } keyboard.show(); // optionally show the keyboard to start // add back the events to show the keyboard keyboard.on("close", function() {    text1.on("mousedown", text1Event);    text2.on("mousedown", text2Event); });
PARAMETERS ** supports DUO - parameters or single object with properties below ** supports OCT - parameter defaults can be set with STYLE control (like CSS) labels - (default null) a ZIM Label to show letters in or an array of labels    Keyboard will add a cursor to the Labels    and provide management across multiple labels    currently, multiline labels are not supported    setting the label lineWidth will set the max width of the label backgroundColor - (default "#333") an css color for the background color of the keys color - (default "white") the color of the text shiftBackgroundColor - (default "orange") the color of the active shift key shiftHoldBackgroundColor - (default "red") the color of the active shift hold key placeBackgroundColor - (default "50c4b7") the color of the arrow backings when placing cursor in label placeColor - (default "50c4b7") the color of the arrow text when placing cursor in label cursorColor - (default "50c4b7") the cursor color shadeAlpha - (default .2) special keys are shaded darker by this alpha margin - (default 5) the margin around the keyboard from the container width corner - (default 30) the round of the corner (set to 0 for no corner)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] draggable - (default false) set to true to show the drag handle at top right placeClose - (default true) shows an x key to close the cursor placement menu shadowColor - (default "rgba(0,0,0,.2)") set to -1 for no shadow shadowBlur - (default 14) how blurred the shadow is if the shadow is set container - (default zimCurrentFrame stage) if placing Keyboard in different container or stage data - (default see below) pass in data for the letters on the three sets of keyboards    Below is the default data - change any of the keys to change keyboard    There must be three boards (you can request more)    There must be a button specified on the fourth row to toggle to the second screen and back    There must be a button on the second and third screen at the start of the third row    to toggle between the second and third screen    The "shift" and "delete" keys are optional and can be moved or removed    Where 10 keys can fit, there is a maximum of 10 keys but there can be less    Use the data property to get this array if desired:    var data = [       [          ["q","w","e","r","t","y","u","i","o","p"],          ["a","s","d","f","g","h","j","k","l"],          ["shift","z","x","c","v","b","n","m","backspace"],          ["?123"] // rest of bottom line automatically added       ],[          ["1","2","3","4","5","6","7","8","9","0"],          ["!","@","#","$","/","^","&","*","(",")"],          ["1/2","-","'", "\"",":",";",",","?","backspace"],          ["ABC"] // rest of bottom line automatically added       ],[          ["+","x","%","=","<",">","{","}","[","]"],          ["€","£","Â¥", "$", "₩", "~", "`","¤","♡","☆"],          ["2/2","_","\\","|","《","》","¡","¿","backspace"],          ["ABC"] // rest of bottom line automatically added       ]    ]; place (default true) - set to false to not add place arrows when selecting Label special (default null) - set to a string to add a special key to the left of the space bar rtl (default false) - CURRENTLY NOT WORKING set to true to use right-to-left text style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS show(index) - shows the Keyboard - use this rather than addTo(), etc.    index (default null) specify the index of the labels array to show cursor in hide() - hides the keyboard toggle(state - default null) - shows if hidden and hides if showing (returns the keyboard for chaining)    or pass in true to show keyboard or false to hide keyboard addLabels(labels) - add a ZIM Label or an array of Labels to the labels list for the Keyboard removeLabels(labels) - remove a ZIM Label or an array of Labels showPlace() - show the place menu for cursor hidePlace() - hide the place menu for cursor resize() - scales the keyboard to the stage with margin and places at bottom of screen clone() - makes a clone of the Keyboard dispose() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 data - get the data array for the keyboard - see the data parameter for details and to set value for data labels - get the labels array - use addLabels() and removeLabels() to set selectedLabel - the label with the cursor or -1 if no cursor selectedIndex - the index of the cursor in the selected label or -1 if no cursor type - holds the class name as a String toggled - read-only Boolean that is true if keyboard is visible and false if 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 group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 "keydown" event with an event object having a letter property    keyboard.on("keydown", function(e) {zog(e.letter);}); // logs letter pressed or "del" for delete Dispatches a "special" event if the special parameter is used and the special key is pressed Dispatches a "close" event when close keyboard icon at bottom right 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 ▤VIDS
EXPAND 18419 ▶︎ Loader(width, height, label, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, frame, style, group)
Loader(width, height, label, backgroundColor, rollBackgroundColor, color, rollColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, hitPadding, gradient, gloss, dashed, backing, rollBacking, rollPersist, icon, rollIcon, toggle, toggleBacking, rollToggleBacking, toggleIcon, rollToggleIcon, toggleEvent, frame, style, group)
Loader zim class - extends a zim.Button which extends a zim.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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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 backgroundColor - (default "rgba(0,0,0,.05)") background color of button (any CSS color) rollBackgroundColor - (default "rgba(0,0,0,.1)") rollover color of button backbground color - (default "rgba(0,0,0,.5)") text color of button (any CSS color) rollColor - (default color) rollover text 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)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 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.    https://zimjs.com/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    https://zimjs.com/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) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) 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: setBacking(type, newBacking) - dynamically set any type of backing for button (if null removes backing for that type)    Backing types are: "backing", "rollBacking", "toggleBacking", "rollToggleBacking", "waitBacking", "rollWaitBacking"    note - all backing will have a pattern property if a pattern is set as a backing setIcon(type, newIcon) - dynamically set any type of icon for button (if null removes icon for that type)    Icon types are: "icon", "rollIcon", "toggleIcon", "rollToggleIcon", "waitIcon", "rollWaitIcon" 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 tag - the HTML input tag of type file - used for uploading group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 backgroundColor - get or set non-rolled on backing color (if no backing specified) rollBackgroundColor - get or set rolled on backing color color - get or set non-rolled on text color (if no icon specified) rollColor - get or set rolled on text color 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 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. 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 ▤VIDS
EXPAND 18828 ▶︎ TextArea(width, height, size, padding, color, backgroundColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly, spellCheck, password, inputType, frame, style, group)
TextArea(width, height, size, padding, color, backgroundColor, borderColor, borderWidth, corner, shadowColor, shadowBlur, dashed, id, placeholder, readOnly, spellCheck, password, inputType, frame, style, group)
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 background property ie. myTextArea.background.alpha=0; or myTextArea.removeChild(myTextArea.background) 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(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(); }); // to set scrollBars on TextArea use CSS on the TextArea tag property: textArea.tag.style.overflow = "auto"; // etc. // 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 ** supports OCT - parameter defaults can be set with STYLE control (like CSS) 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)    Note: to set scrollBars use CSS: textArea.tag.style.overflow = "auto"; 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) backgroundColor - (default "rgba(256,256,256,.1)") background 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)    can also be an array of [topLeft, topRight, bottomRight, bottomLeft] 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 password - (default false) set to true to turn the field into a password field - single line only (uses input field type=password and not TextArea) frame - (default the zimDefaultFrame) a reference to the Frame (to scale and position the HTML tag) style - (default true) set to false to ignore styles set with the STYLE - will receive original parameter defaults group - (default null) set to String (or comma delimited String) so STYLE can set default styles to the group(s) (like a CSS class) METHODS setFocus(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)    might need timeout 100ms before setting    see also focus 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() - removes from parent, removes event listeners - must still set outside references to null for garbage collection ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 - get or set the text content of the TextArea text - the same as currentValue - for convenience... focus - get or set if the TextArea tag has focus or use setFocus() to set (might need timeout 100ms before setting) 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 background - access to the Rectangle() used for the background    you can remove this with yourTextArea.background.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 keyFocus - get or set the keyboard focus on the component - see also zim.KEYFOCUS    will be set to true if this component is the first made or component is the last to be used group - used when the object is made to add STYLE with the group selector (like a CSS class) 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 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 VIDS
ZIM METHODS
-------------- ADDING AND REMOVING EXPAND 19128 ▶︎ obj.addTo(container, index, localToLocal)
obj.addTo(container, index, localToLocal)
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 index parameter is similar to an addChildAt() We can also use obj.removeFrom() to automatically remove from the container EXAMPLE
var circle = new Circle(50, "red"); circle.addTo(stage); // or just circle.addTo(); // for the default frame's 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
EXAMPLE
// Changing Coordinates // An object may appear to change positions // when you add from one container to another (the stage is a container too). // This happens because the x and y origin inside the containers may be at different places // yet the x and y property of the object remains unchanged. // The localToLocal parameter converts between the coordinates and updates the x and y // so that the object does not appear to jump - this defaults to true var container = new Container().pos(100,100); var rectangle = new Rectangle(200, 200, yellow).addTo(container); // we want to drag the container and the circle // but when the circle is in the container we want to drag the circle independently // this leads to a tricky situation that can be solved as follows: rectangle.on("mousedown", function() {container.drag({currentTarget:true});}); rectangle.on("pressup", function() {container.noDrag();}); var circle = new Circle(50, blue).center().drag(); // check to see if the circle is over the container and if so then add the circle // try settin the third parameter to false to see what would normally happen circle.on("pressup", function() {    if (rectangle.hitTestReg(circle)) { // do not hitTest the container!       circle.addTo(container); // keep position with default true as third parameter    } else {       circle.addTo(stage);    }    stage.update(); });
PARAMETERS supports DUO - parameters or single object with properties below container - (default first frame's stage) the container to add to index - (default null) if provided will addChildAt the object at the index (0 being bottom) localToLocal - (default true) makes object not move when added from one coordinate space to another    this also may change the objects x and y properties - set to false not to do this    localToLocal is ignored if object currently does not have a parent RETURNS obj for chaining CLOSE ▲VIEW ▤BITS VIDS
EXPAND 19213 ▶︎ obj.removeFrom(container)
obj.removeFrom(container)
removeFrom zim DisplayObject method DESCRIPTION A chainable 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 - (default the object's parent) the container to remove the object from RETURNS obj for chaining CLOSE ▲VIEW ▤BITS
EXPAND 19246 ▶︎ obj.added(call, interval, maxTime)
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 callback - 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 19301 ▶︎ obj.centerReg(container, index, add)
obj.centerReg(container, index, add)
centerReg zim DisplayObject method DESCRIPTION Centers the registration point on the bounds - obj must have bounds set. Will default to adding the object to the container. If no container parameter is provided and the object is in a container, centerReg will center the object in the current container. Thanks Bracer Jack for the suggestion. If no container and the object is not in a container, centerReg will center the object on the default frame's stage. 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(); // centers registration, centers and adds to stage rect.animate({obj:{rotation:360}, time:1000, ease:"linear", loop:true}); // To just center the registration and not add it to a container // use rect.centerReg(null, null, false); // This is different than in the past where leaving out parameters would just center the registration // The change is to match the default behaviour of addTo() and center() to add to stage without parameters
PARAMETERS supports DUO - parameters or single object with properties below container - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container index - (default null) if provided will addChildAt the object at the index (0 being bottom)    will be ignored if the add parameter is false add - (default true) set to false to only center the object's registration    setting to false will not remove the object if already added to a container RETURNS obj for chaining CLOSE ▲VIEW ▤BITS VIDS
EXPAND 19358 ▶︎ obj.center(container, index, add)
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. If no container parameter is provided and the object is in a container, center will center the object in the current container. Thanks Bracer Jack for the suggestion. If no container and the object is not in a container, center will center the object on the default frame's stage. Also see centerReg() for centering registration point at same time. EXAMPLE
var rect = new Rectangle(100, 100, "blue"); rect.center(); // 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 - (default object's parent or if none, the first frame's stage) centers the object on and adds to the container index - (default null) if provided will addChildAt the object at the index (0 being bottom)    will be ignored if the add parameter is false add - (default true) set to false to only center and not add the object to the container    setting to false will not remove the object if already added to a container RETURNS obj for chaining CLOSE ▲VIEW ▤BITS VIDS
EXPAND 19444 ▶︎ obj.place(id)
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 VIDS
EXPAND 19479 ▶︎ obj.placeReg(id)
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 obj for chaining CLOSE ▲VIEW ▤
-------------- SHORT CHAINABLE EXPAND 19523 ▶︎ obj.pos(x, y, right, bottom, container, index, add, reg, regX, regY)
obj.pos(x, y, right, bottom, container, index, add, reg, regX, regY)
pos zim DisplayObject method DESCRIPTION Chainable convenience function to position an object and optionally add to a container ** previously positioned only registration point ** now positions based on sides, top or bottom unless reg is set to true By default, will position left and top of object - can also position right or bottom Setting reg (or regX, regY) to true will position to the registration point See: POSREG constant - set to true to change default pos() to reg=true EXAMPLE
// 1. adds circle to default stage moves left and top of circle to 100, 100 circle1.pos(100, 100); // 2. adds circle to box and positions right and bottom of circle 100 and 200 // from right and bottom of box bounds circle2.pos(100, 200, true, true, box); // 3. adds to stage and puts registration point at x=200 and y=0 circle3.pos({x:200, reg:true}); // 4. adds to stage and puts registration point at x=200 and y=radius (not y=0) circle4.pos({x:200, regX:true});
PARAMETERS supports DUO - parameters or single object with properties below x - (default null or 0 for right) the x distance in the container to the left or right side of the object    which side, depends on the right parameter    if reg or regX is true then it is the distance to the registration point not the side y - (default null or 0 for bottom) the y distance in the container to the top or bottom of the object    which one, depends on the bottom parameter    if reg or regY is true then it is the distance to the registration point not the top or bottom right - (default false) set to true to postion the right side from the right of the container bounds    if reg or regX is true then it is the distance to the registration point not the side bottom - (default false) set to true to postion the bottom of the object from the bottom of the container bounds    if reg or regY is true then it is the distance to the registration point not the bottom container - (default current container or zimDefaultFrame stage) the Container to add the obj to and position index - (default null) if provided will addChildAt the object at the index (0 being bottom) add - (default true) add to container - set to false to not add reg - (default false) set to true to position to the registration point rather than sides, top or bottom    See: POSREG contant - set POSREG=true; to change the default pos() to position the registration point    This is good to adjust legacy code - or if the original pos setting is preferred. regX - (default reg) set to true to position x to the registration point rather than the sides    will override reg if provided regY - (default reg) set to true to position y to the registration point rather than the top or bottom    will override reg if provided RETURNS obj for chaining CLOSE ▲VIEW ▤BITS VIDS
EXPAND 19673 ▶︎ obj.loc(target|x, y, container, index, add, localToLocal)
obj.loc(target|x, y, container, index, add, localToLocal)
loc zim DisplayObject method DESCRIPTION locates obj registration at registration of provided target or at x and y if numbers are provided This is like the original pos() where the registration is used But it a single object with x y properties can be passed as a parameter Will calculate localToLocal if target is provided Also can add to container at an index EXAMPLE
var circle1 = new Circle().pos(100,100); var circle2 = new Circle().loc(circle1); // adds on top of circle1
EXAMPLE
new Circle().loc(400, 400); // places reg of circle at 400, 400 // note, this is different than pos(400, 400) which would place left top of circle at 400, 400
PARAMETERS supports DUO - parameters or single object with properties below target | x - (default 0) an object with x and y properties such as any ZIM Display Object (Rectangle, Button, etc)    or a zim Point(100, 100) object or {x:100, y:300}, etc.    or can be a Number for an x value - in which case, a y value might be expected too y - (default null if target is provided or 0 if x is provided) an optional y value container - (default current container or zimDefaultFrame stage) the Container to add the obj to and position index - (default null) if provided will addChildAt the object at the index (0 being bottom) add - (default true) add to container - set to false to not add localToLocal - (default true) if target is provided, the obj will be placed on the target matching locations across coordiate spaces RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 19746 ▶︎ obj.mov(x, y)
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 EXAMPLE
var circle = new Circle().center(stage).mov(50); // move to right 50
PARAMETERS supports DUO - parameters or single object with properties below 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 VIDS
EXPAND 19778 ▶︎ obj.sca(scale, scaleY)
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 VIDS
EXPAND 19810 ▶︎ obj.alp(alpha)
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 VIDS
EXPAND 19836 ▶︎ obj.hov(value, prop)
obj.hov(value, prop)
hov zim DisplayObject method DESCRIPTION Chainable convenience function to set the rollover (hover) property of an object This defaults to alpha if a number and color if a string But the type of property can also be set - for multiple properties, use a Button This sets mouseover and mouseout events on the object EXAMPLE
circle.alp(.5).hov(.8); new Rectangle(100,100,blue).hov(green); triangle.hov(1.5, scale);
PARAMETERS value - (default 1) the hover value of the property    if a number, the default property is alpha    if a string, the default property is color    passing in -1 will remove the hover prop - (default alpha or color as stated above) the property to change to the value on hover RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 19890 ▶︎ obj.rot(rotation)
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 VIDS
EXPAND 19916 ▶︎ obj.siz(width, height, only)
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,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 ▤VIDS
EXPAND 19963 ▶︎ obj.ske(skewX, skewY)
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 VIDS
EXPAND 19991 ▶︎ obj.reg(regX, regY)
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 VIDS
EXPAND 20022 ▶︎ obj.top()
obj.top()
top zim DisplayObject method DESCRIPTION Places object on top layer in container - if in a container returns the object for chaining Can also just addTo(container) to re-add to top NOTE for some situations this will break code so a safer way is obj.parent.setChildIndex(obj, obj.parent.numChildren-1); which is what this method uses EXAMPLE
circle.top(); // brings circle to the top of parent container
RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 20049 ▶︎ obj.bot()
obj.bot()
bot zim DisplayObject method DESCRIPTION Places object on bottom layer in container - if in a container returns the object for chaining EXAMPLE
circle.bot(); // put circle on bottom layer (0) of parent container
RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 20072 ▶︎ obj.cur(type)
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 ▤VIDS
EXPAND 20101 ▶︎ obj.sha(color||Shadow, offsetX, offsetY, blur)
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", 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 ▤VIDS
EXPAND 20143 ▶︎ obj.dep(depth)
obj.dep(depth)
dep zim DisplayObject method DESCRIPTION A chainable method to set the depth property of a Display object for use with ZIM VR(). When the object is added to VR it will be cloned into two channels and shifted left and right based on its depth. A depth of 0 will not shift the object and this will appear flat on the screen. A depth of 20 will shift 20 pixels left and right and appear to come out of the screen. A depth of -20 will appear to go into the screen. Depending on the VR parallax settings, depth can also affect parallax. A negative depth does not unless negativeParallax is set to true in the VR parameters. EXAMPLE
var circle = new Circle().center(stage).dep(10);
PARAMETERS depth - (default 0) the apparent depth in ZIM VR - or set the depth property RETURNS obj for chaining CLOSE ▲VIEW ▤VIDS
-------------- TAP, CHANGE, DRAG, TRANSFORM, GESTURE EXPAND 20177 ▶︎ obj.tap(call, distance, time, once)
obj.tap(call, distance, time, once)
tap zim DisplayObject method DESCRIPTION Chainable convenience method that adds a mousedown and mouseup event to the object that requires the to move less than distance parameter This is more like a proper click - down up without dragging. This method works on desktop or mobile, etc. An optional time parameter is provided if a minimum time is desired. Note that a click event also works on mobile as a "tap" but click also allows dragging between down and up presses - so really is a mouseup. SEE: noTap() as well EXAMPLE
new Circle(50, "red").cur().tap(function (e) {    e.target.alpha = .5;    stage.update(); });
PARAMETERS call - the function to call when clicked    call will receive the event object as a parameter (with target, currentTarget, etc. properties) distance - (default 5) distance in pixels within which the mouseup must occur for a click to be counted time - (default 10000) time in ms within which the mouseup must occur for a click to be counted once - (default false) set to true to capture only one click then auto-remove listeners RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 20230 ▶︎ obj.noTap()
obj.noTap()
noTap zim DisplayObject method DESCRIPTION removes the mousedown and mouseup events added with tap() EXAMPLE
var circle = new Circle(50, "red").cur().tap(function (e) {    e.target.alpha = .5;    stage.update(); }); if (score > 10) circle.noTap();
RETURNS obj for chainging CLOSE ▲VIEW ▤
EXPAND 20258 ▶︎ obj.change(call, once)
obj.change(call, once)
change zim DisplayObject method DESCRIPTION Chainable convenience method that adds a change event to the object This only works for components that dispatch a change event ;-) SEE: noChange() as well EXAMPLE
new Tabs().change(function (e) {    zog(e.target.text); // the text of the selected tab });
PARAMETERS call - the function to call when changed    call will receive the event object as a parameter (with target, currentTarget, etc. properties) once - (default false) set to true to capture only one click then auto-remove listeners RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 20293 ▶︎ obj.noChange()
obj.noChange()
noChange zim DisplayObject method DESCRIPTION removes the change event added with change() EXAMPLE
var tabs = new Tabs().change(function (e) {    zog(e.target.text); }); if (score > 10) tabs.noChange(); // removes change event
RETURNS obj for chainging CLOSE ▲VIEW ▤
EXPAND 20318 ▶︎ obj.drag(boundary, overCursor, dragCursor, all, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds, rect, currentTarget)
obj.drag(boundary, overCursor, dragCursor, all, swipe, localBounds, onTop, surround, slide, slideDamp, slideSnap, reg, removeTweens, startBounds, rect, currentTarget)
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}); // BOUNDARY // 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 boundary = new Boundary(100,100,500,400); circle.drag(boundary); // or keep circle on the stage with the following var boundary = new Boundary(0,0,stageW,stageH).contract(radius); circle.drag(boundary); // drag within stage
PARAMETERS supports DUO - parameters or single object with properties below boundary - (default null) a ZIM Boundary object for the drag boundary    if surround is true then it will make sure the obj surrounds the boundary rather than stays within it    this boundary is relative to the stage (global)    if a boundary relative to the object's parent is desired then set the localBounds parameter to true overCursor - (default "pointer") the CSS cursor property as a string for rolling over the object dragCursor - (default "pointer") the CSS cursor property as a string for pressing and dragging the object all - (default false) set to true to drag a whole container rather than its parts (was called currentTarget)    eg. container.drag(); will drag any object within the container    container.drag({all:true}) will drag the whole container    See: DRAGALL contant - set DRAGALL=true; to change the default drag to drag a 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 - unless Keyboard at top.    // to drag on top of keyboard, set the type property of the keyboard to "LowerKeyboard" - or anything other than Keyboard surround - (default false) is for dragging a big object that always surrounds the boundary 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) rect - (depreciated) same as boundary - kept for backwards compatibility when using config object currentTarget - (default false) same as the all parameter - kept for backwards compatibility when using config object 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 VIDS
EXPAND 20759 ▶︎ obj.noDrag()
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 ▤VIDS
EXPAND 20792 ▶︎ obj.dragBoundary(boundary)
obj.dragBoundary(boundary)
dragBoundary zim DisplayObject method DESCRIPTION Dynamically changes or adds a boundary rectangle to the object being dragged with drag(). NOTE replaces old ZIM dragRect() method EXAMPLE
var boundary = new Boundary(100,100,500,400); circle.dragBoundary(boundary);
PARAMETERS boundary - is a ZIM Boundary object for the bounds - the local / global does not change from the original drag RETURNS obj for chaining CLOSE ▲VIEW ▤
EXPAND 20824 ▶︎ obj.transform(move, stretchX, stretchY, scale, rotate, allowToggle, visible, onTop, showStretch, showRotate, showScale, showReg, showBorder, borderColor, borderWidth, dashed, customCursors, handleSize, regSize, snapDistance, snapRotation, cache)
obj.transform(move, stretchX, stretchY, scale, rotate, allowToggle, 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 - might still be able to stretch from sides - see stretchX and stretchY rotate - (default true) let user rotate object allowToggle - (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 PROPERTIES toggled - adds a read-only Boolean to the object that is true if controls are showing otherwise false METHODS toggle(state - default null) - added to the object    shows controls if hidden and hides controls if showing (returns the object for chaining)    or pass in true to show controls or false to hide controls 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 allowToggleOn() - sets the show / hide controls on with click allowToggleOff() - 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 ▤VIDS
EXPAND 21824 ▶︎ obj.gesture(move, scale, rotate, boundary, minScale, maxScale, snapRotate, localBounds, slide, slideEffect, regControl, onTop, surround, circularBounds, rect)
obj.gesture(move, scale, rotate, boundary, minScale, maxScale, snapRotate, localBounds, slide, slideEffect, regControl, onTop, surround, circularBounds, rect)
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 gestureBoundary() method to set or reset the boundary 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 boundary - (default null) ZIM Boundary rectangle with (x,y,w,h) to contain bounds of the object    if surround is true then it will make sure the obj surrounds the boundary rather than stays within it    See circularBounds parameter to keep circular shapes with boundary 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 onTop - (default true) brings the object to the top of the container surround - (default false) is for dragging a big object that always surrounds the rect    must specify a rect and currently not supported unless rotate is false circularBounds - (default false) set to true if object is circular with center registration    set to true to use radius to calculate rotated object in boundary if boundary is set rect - (depreciated) same as boundary - kept for backwards compatibility 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 ▤VIDS
EXPAND 22275 ▶︎ obj.noGesture(move, scale, rotate)
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 ▤VIDS
EXPAND 22322 ▶︎ obj.gestureBoundary(boundary, new)
obj.gestureBoundary(boundary, new)
gestureBoundary zim DisplayObject method DESCRIPTION Dynamically changes or adds a boundary rectangle to the object being dragged with gesture(). EXAMPLE
var boundary = new Boundary(100,100,500,400); // x,y,w,h circle.gestureBoundary(boundary); OR pre ZIM 4TH gestureBoundary(circle, boundary);
PARAMETERS boundary - is a ZIM Boundary rectangle - the local / global does not change from the original gesture setting update - (default true) reset base drag boundary RETURNS obj for chaining CLOSE ▲VIEW ▤
-------------- HIT TESTS EXPAND 22369 ▶︎ obj.hitTestPoint(x, y, boundsCheck)
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 ▤VIDS
EXPAND 22417 ▶︎ obj.hitTestReg(other)
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 VIDS
EXPAND 22460 ▶︎ obj.hitTestRect(other, num, boundsCheck)
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 VIDS
EXPAND 22537 ▶︎ obj.hitTestCircle(other, num, boundsCheck)
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 VIDS
EXPAND 22601 ▶︎ obj.hitTestCircles(other, margin)
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 ▤VIDS
EXPAND 22658 ▶︎ obj.hitTestBounds(other, margin, boundsShape)
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 VIDS
EXPAND 22730 ▶︎ obj.hitTestGrid(width, height, cols, rows, x, y, offsetX, offsetY, spacingX, spacingY, local, type)
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); });
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. e.stageX and e.stageY) 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
-------------- ANIMATE, WIGGLE, LOOP EXPAND 22798 ▶︎ obj.animate(props, 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, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, obj)
obj.animate(props, 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, cjsProps, css, protect, override, from, set, id, events, sequenceTarget, dynamic, drag, clamp, startPaused, obj)
animate zim DisplayObject method powered by createjs.Tween (TweenJS) 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, relative, series and sequences of animations. SEE: https://zimjs.com/animation Advanced Animation ZIM animate() lets you animate along a path made with a zim Blob or Squiggle These paths can be edited by the user and the animation will still work The paths themselves can be animated or wiggled. Orient and Flipping are available. Dynamic speed can be set with percentSpeed and tied in to Accelerator and MotionController Scrubbing animation and path animation is also supported with percentComplete This can be used in Parallax with a Slider, Dial, MotionController, or general coding Dragging along a path is as easy as setting the drag parameter to true This can be done with while animating or with the animation paused ZIM EXTRA! provides animation based on animation. This allows for setting zoom, depth, speed, fade, etc. based on target y value while animating on a path but EXTRA! also opens up endless possibilities as the input and output does not have to be the target. This means that animation can also control properties of other objects. SEE: https://zimjs.com/nio.html NOTE to temporarily prevent animations from starting set ANIMATE to false NOTE see pauseAnimate(state, ids) and stopAnimate(ids) for controlling tweens when running NOTE set mouseEnabled of target before calling animate as animate itself sets mouseEnabled and then resets to original after a delay 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({props:{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 props {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 https://zimjs.com/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({props:{scale:0}, time:500, loop:true, rewind:true, from:true}); // toggle pause the circle when stage is pressed stage.on("stagemousedown", function() {    circle.pauseAnimate(!circle.paused); });
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
// Dynamic Animation var rect = new Rectangle(200,200,red)    .centerReg()    .animate({       props:{rotation:360},       loop:true,       time:2000,       ease:"linear",       dynamic:true,       set:{percentSpeed:0} // no speed to start    }); // example using a Slider to set speed from 0 to 5 times as fast var slider = new Slider(0,500).pos(100, 100); slider.on("change", function () {    rect.percentSpeed = slider.currentValue; }); // example using an Accelerator and MotionController // to set speed from -200 to 200 percent // depending on mouse position // multiple targets including Dynamo and Scroller objects can be added to Accelerator // if adding multiple objects, use an array new Accelerator([rect, otherObject, anotherObject]) new MotionController({ target:new Accelerator(rect), type:"mousemove", minPercentSpeed:-200, maxPercentSpeed:200 });
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:pink})    .centerReg(stage)    .sca(0); // hiding it to start var circle = new Circle({color:purple}) // chaining the rest    .addTo(stage)    .pos(400,300)    .animate({ // circle will be the default object for the inner animations       props:[          // an array of animate configuration objects          {props:{x:600, y:300, scale:2}},          {props:{x:600, y:500, scale:1}, call:function(){zog("part way");}},          {props:{x:400, y:500}, time:500, ease:"quadInOut"},          {target:rect, props:{scale:3}, time:1000, rewind:true, ease:"quadInOut"},          {props:{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({    props:{scale:1},    time:500,    loop:true,    rewind:true,    from:true,    sequence:500 });
EXAMPLE
// Animate along a Squiggle or Blob path // see https://zimjs.com/explore/squiggleAnimate.html for more // see https://zimjs.com/explore/blobAnimate.html for more // see https://zimjs.com/explore/blobAnimate2.html for more var line = new Squiggle().center(); new Circle(10, red).addTo().animate({path:line}, 1000);
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 randomly - eg. ["red", "green", "blue"] 2. a Function that returns a value - eg. function(){return Date.now();}    see also the series() function which returns a function that will execute a series in order    pass series(["red", "green", "blue"]) into a ZIM VEE parameter to select these in order then repeat, etc. 3. a ZIM RAND object literal for a range - 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 having a value such as an Array or Function that zik will not process props - the object literal holding properties and values to animate    Basic examples: {x:200} or {rotation:360, alpha:0} or {scale:4} or {x:300, y:300, scale:"2"} (relative scale)    There are custom options below including Convenience, ZIM VEE, Relative, and Series properties.    ** Before ZIM 7.1, this parameter was called obj - as to not conflict with CreateJS TweenJS props (now renamed cjsProps)     obj is still available as a parameter name for backwards compatibility when using a ZIM DUO configuration object    CONVENIENCE PROPERTIES       scale - for scaleX and scaleY       color - on ZIM shapes for setColorRange() and animate colorRange from 0-1           ** this property cannot be run in a series - rather animate in a call function to accomplish a series of color changes       path - pass in a Blob or Squiggle to animate along path          https://zimjs.com/nio/path.html          If the shape has lockControls set to false (the default) then the animation will be dynamic          and adjust as the shape is changed.          If a set animation path is desired then set the shape's lockControls to true       orient - an object with x and y to aim the target at          https://zimjs.com/nio/orient.html          when a path is used this will default to rotate to orient to path          can set to false for no rotation          can set to any object with an x, y point such as a circle on the stage - or {x:0, y:0} or a new zim Point, etc.       flip - setting flip to true will flip the object horizontally when its x direction goes negative          https://zimjs.com/nio/flip.html          this will also work with orient to make sure the target is not upside down       verticalFlip - setting verticalFlip to true will flip the object vertically when its y direction goes negative          this will also work with orient to make sure the target is not upside down       EXTRA! - the following convenience properties are available for ZIM EXTRA! (also see extra below)          https://zimjs.com/nio/extra.html          zoom - an array that represents scale proportions based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(defaunt stageH)] the outputs will be constrained to the provided values             zoom:[.5,1.5] scales the target based on its y position - animating y or along a path will show scaling             zoom:10 - is like zoom:[0,10]             zoom:true - is like zoom:[0,1]             zoom:[1,3,stageH/2-100,stageH/2+200] would scale from 1 to 3 in this region and stay at 1 or 3 outside this region          speed - an array that represents animation percentSpeed based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(defaunt stageH)] the outputs will be constrained to the provided values             speed:[20,100] sets percentSpeed based on target y position - animating y or along a path will have changing speed             speed:40 - is like speed:[0,40]             speed:true - is like speed:[0,100]             ** will set dynamic property to true - as percentSpeed needs dynamic property set to true          layer - an array that represents ratio of layer proportions based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(defaunt stageH)] the outputs will be constrained to the provided values             layer:[0,1] sets current layer based on target y position - animating y or along a path will have changing layers             layer:1 - is like layer:[0,1]             layer:true - is like layer:[0,target.parent.numChildren-1]          fade - an array that represents ratio of alpha based on target's y position             [inputMin, inputMax, outputMin(default 0), outputMax(defaunt stageH)] the outputs will be constrained to the provided values             fade:[.5,1] sets current alpha based on target y position - animating y or along a path will have changing alpha             fade:1 - is like fade:[0,1]             fade:true - is like fade:[0,1]             fade:[0,1,stageH/2-100,stageH/2+200] - would change alpha in this y region       extra - in addition to the convenience properties above, ZIM EXTRA! has a more general and complete format:          Pass in a single EXTRA! object or an array of EXTRA! objects: extra:{} or extra:[{},{},{}]          The object has the following properties - all are optional except the outputProp which is required:             |ZIM VEE| - each object below optionally accepts a ZIM VEE value for zik() to pick randomly from        inputObj - (default target) - the object with the input property - probably the animation target but could be any object        inputProp - (default "y") - a string of the property name for the input - "x", "rotation", etc.        inputMin - (default 0) - the minimum input value for the calculation - also see constrain        inputMax - (default stageW if x inputProp else stageH) - the maximum input value for the calculation - also see constrain        outputObj - (default target) - the object whose output property is being changed - probably the animation target but could be any object        outputProp - (default "scale") - a string of the property name of the output - "scale", "layer", "rotation", etc.        outputMin - (default 0) - the minimum output value for the calculation - also see constrain        outputMax - (default 1) - the maximum output value for the calculation - also see constrain        factor - (default 1) setting factor to -1 will reverse the direction of the animation        outputRound - (default false) set to true to receive rounded output values             constrain - (default true) constrain the output value to outputMin and outputMax                set to false to let values go beyond provided mins and maxes                this is quite usual when a proportion is easily figured at a certain range                and continued increase or decrease is desired outside the range - just turn constrain to false.          EXAMPLES:          extra:{outputProp:"scaleX"} would animate the scaleX of the target from 0-1 over the stage height          extra:{outputObj:circle, outputProp:"alpha"} would animate the alpha of circle based on the animated target's y position          extra:{inputObj:circle, inputProp:"x", inputMax:stageW, outputProp:"level"} would animate the target's child index as the circle's x goes across the screen          ** in the last two examples, circle is a different object than the target of the animation - circle might be animating independently or based on a Slider value, etc.    |ZIM VEE| - each props property value optionally accepts a ZIM VEE value for zik() to pick randomly from (except the EXTRA! properties which accept ZIM VEE values inside)    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 props value, then this will run an animation series       The array must hold animate configuration objects:       [{props:{scale:2}, time:1000, rewind:true}, {target:different, props:{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       Note: color cannot be animated in a series - rather animate in a call function to accomplish a series of color changes       Note: a sequence cannot be seriesed and a series cannot be sequenced time - |ZIM VEE| the time for the tween in milliseconds 1000 ms = 1 second ease - |ZIM VEE| (default "quadInOut") the equation type for easing ("bounceOut", "elasticIn", "backInOut", "linear", etc)    see CreateJS easing: https://www.createjs.com/docs/tweenjs/classes/Ease.html 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    Note: a sequence cannot be seriesed and a series cannot be sequenced 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 cjsProps - (default {override: true}) legacy - allows you to pass in CreateJS TweenJS configuration properties css - (default false) set to true to animate CSS properties in HTML    requires CreateJS CSSPlugin    ZIM has a copy here: https://d309knd7es5f10.cloudfront.net/CSSPlugin01.js    Add that at the top of your code in a script tag    <script>       // in your code at top after loading createjs       createjs.CSSPlugin.install();       // 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 pauseAnimate(state, id) and stopAnimate(id) - thanks Sean Berwick for typo catch events - (default false) set to true to receive an "animation" event on the target (or Container with a Container sequence) sequenceTarget - (default null) used internally for processing sequence animations dynamic - (default false) set to true to turn on dynamic speed animation via the percentSpeed property    setting perecentSpeed (default 100) will adjust the speed of the animation    to change speed with a Slider, Dial, MotionController, Accelerator, etc.    use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation drag - (default false) used with path in props to drag along path    This can be done while animating or while the animation is paused    Setting drag to true will set startPaused to true as well - set startPaused to false to animate and drag    With rewind set, drag lets you change the direction of an animation while animating clamp - (default true) used with dynamic and non-looping - set to false to let time pass beyond animation start and end startPaused - (default false - true if drag is true) Boolean - set to true to start the animation in the paused state    Good for animating manually with the percentComplete property obj - (depreciated) the old version of props - kept for backwards compatibility PROPERTIES - zim.animate() adds the following properties to any object it animates:    paused - read-only - when animating, paused is set to false       When paused with pauseAnimate() then paused is set to true       When stopped or before animation, paused is undefined or null       There is only one paused property per object so pausing a specific id       on an object with multiple animations will set paused to true       even if other animations are still running.       Pausing multiple objects should work fine.    percentSpeed - get or set the percent of the animation speed       100% is regular time, 50% is half as fast, 200% is twice as fast -100% is reverse normal speed, etc.       use target.animate({props:{rotation:360}, dynamic:true, set:{percentSpeed:0}}); to start off with no animation    percentComplete - get or set percent complete (0-100)       setting this will pause the animation as manual control is assumed       this allows you to scrub through an animation with a Slider, Dial, MotionController, etc.       should probably set startPaused parameter of animate() to true METHODS - see pauseAnimate() and stopAnimate() under the METHODS module    Also - zim.animate() adds a pause(state, time) method to the target IF dynamic is set to true    This matches the pause() of Dynamo and Scroller and is used by Accelerator     state - (default true) true pauses and setting the state to false will unpause the dynamic animation     time - (default 0) time in milliseconds to slow the animation down if pausing or speed it up if unpausing EVENTS - zim animate() will add an "animation" event to the target IF the events parameter is set to true (default is false)    or the "animation" event will be added to the Container for a sequence in a Container    or the "animation" event is added to the targets of an animation series    If dynamic is set to true, will dispatch a "pause" event when animate is paused - could be delayed but time passed in to pause() RETURNS the target for chaining (or null if no target is provided and run on zim with series) CLOSE ▲VIEW ▤BITS VIDS
EXPAND 24421 ▶︎ obj.stopAnimate(ids)
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, 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 PROPERTIES paused - zim.stopAnimate() will set paused property of stopped objects to null RETURNS null if run as stopAnimate() or the obj if run as obj.stopAnimate() CLOSE ▲VIEW ▤BITS VIDS
EXPAND 24502 ▶︎ obj.pauseAnimate(state, ids)
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
var circle = new Circle().center().animate({obj:{alpha:0}, repeat:true, rewind:true}); circle.on("mousedown", function() {    circle.pauseAnimate(!circle.paused); });
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, 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 PROPERTIES paused - zim.stopAnimate() will set paused property of paused objects to the value of the state parameter RETURNS null if run as pauseAnimate() or the obj if run as obj.pauseAnimate() CLOSE ▲VIEW ▤VIDS
EXPAND 24595 ▶︎ obj.wiggle(property, baseAmount, minAmount, maxAmount, minTime, maxTime, totalTime, type, ease, integer, id, startType)
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 ** 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 randomly - eg. ["red", "green", "blue"] 2. a Function that returns a value - eg. function(){return Date.now();}    see also the series() function which returns a function that will execute a series in order    pass series(["red", "green", "blue"]) into a ZIM VEE parameter to select these in order then repeat, etc. 3. a ZIM RAND object literal for a range - 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 having a value such as an Array or Function that zik will not process property - the property name as a String that will be width-indicatorLength-edgeLeft-edgeRight baseAmount - |ZIM VEE| the center amount for the wiggle - wiggle will go to each side of this center minAmount - |ZIM VEE| the min amount to change to a side of center maxAmount - |ZIM VEE| (default minAmount) the max amount to change to a side of center minTime - |ZIM VEE| (default 1000 ms) the min time in milliseconds to go from one side to the other maxTime - |ZIM VEE| (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) ticker - (default true) set to false if wiggling a value other than a Display object property EVENTS if totalTime is set, target will dispatch a wigglestop event when the wiggle stops RETURNS target for chaining CLOSE ▲VIEW ▤VIDS
EXPAND 24708 ▶︎ obj.loop(call, reverse, step, start, end)
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 The loop function (see the CODE module for loop) lets you loop through: 1. If you pass in a Number for obj then loop() does function call that many times 2. If you pass in an Array then loop() loops through the array 3. If you pass in an Object literal then loop() loops through the object 4. If you pass in an HTML NodeList then loop() loops through the tags in the list The loop method lets you loop through a Container NOTE you can also pass the container as the first parameter of the loop function 5. The loop method 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 FUNCTION - for more examples see the CODE Module loop() function 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); // LOOP METHOD // 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
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 VIDS
-------------- GENERAL EXPAND 24861 ▶︎ obj.scaleTo(boundObj, percentX, percentY, type, boundsOnly)
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 VIDS
EXPAND 24924 ▶︎ obj.fit(left, top, width, height, inside)
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 25010 ▶︎ obj.boundsToGlobal(rect, flip)
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 - (default null) 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 createjs Rectangle of the bounds of object projected onto the stage CLOSE ▲VIEW ▤
EXPAND 25072 ▶︎ obj.resetBounds(width||boundsX, height||boundsY, null||width, null||height)
obj.resetBounds(width||boundsX, height||boundsY, null||width, null||height)
resetBounds zim DisplayObject method DESCRIPTION Pass in no parameters to reset the bounds to calculated bounds Pass in width and height to set bounds to (0,0,width,height) Pass in x, y, width and height to set bounds to (0,0,width,height) NOTE a container made with new Container() has auto calculated bounds so the bounds (and width and height) adapt to surround any new children's bounds A container set with bounds to start: new Container(100, 200) has static bounds so the bounds (and width and height) will not change as new children are added Calling container.resetBounds() with no parameter sets dynamic calculated bounds Or you can reset the static bounds with parameters. EXAMPLE
var container = new Container(); var rect = new Rectangle(500,300).addTo(container); zog(container.width, container.height); // 500, 300 dynamic bounds var container = new Container(100, 100); var rect = new Rectangle(500,300).addTo(container); zog(container.width, container.height); // 100, 100 static bounds container.resetBounds(); zog(container.width, container.height); // 500, 300 dynamic bounds container.resetBounds(200, 200); rect.removeFrom(); zog(container.width, container.height); // 200, 200 static bounds
PARAMETERS width - (default null) null will set dynamic bounds and the object will take on bounds of children if a Container    setting a number for the width will set static bounds that do not change as objects are added height - (default width) the height of the bounds if there is a width supplied but no height then the height is set to the width setting these run obj.setBounds(boundsX,boundsY,width,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 bounds height - (default width) the height of the bounds if there is a width supplied but no height then the height is set to the width setting these run obj.setBounds(boundsX,boundsY,width,height); RETURNS object for chaining CLOSE ▲VIEW ▤
EXPAND 25143 ▶︎ obj.copyMatrix(source)
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 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 25181 ▶︎ obj.expand(padding, paddingVertical)
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 25216 ▶︎ obj.setSwipe(swipe)
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 25254 ▶︎ obj.setMask(mask, dynamic)
obj.setMask(mask, dynamic)
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(), 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 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: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 VIDS
EXPAND 25367 ▶︎ obj.outline(color, size)
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 warning - the outline is added to the object's container so this can affect the container's numChildren, etc. NOTE will not subsequently be resized unless called again in Ticker, pressmove event, etc. ZIM could update this outline automatically in drag and animate but since the outline() is used for testing, it is not a good idea to waste processing EXAMPLE
var circle = new Circle(50, "red"); circle.center(stage); // show registration and origin at center and bounding box around outside circle.outline();
EXAMPLE
Dynamic Examples var ball = new Circle().center().drag({removeTweens:false}); ball.on("mousedown", function(){    ball.outline(); }); ball.on("pressmove", function(){    ball.outline(); }); ball.animate({rotation:360}, 4000); Ticker.add(function() {ball.outline();});
EXAMPLE
// When applying outline() in a loop - loop in reverse // as outlines are added to the object's container var tile = new Tile(new Rectangle(), 5, 4, 10, 10).center(); tile.loop(function (item) {    item.outline(); }, true); // reverse loop
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 PROPERTIES adds a ZIMoutlineShape and ZIMoutlineShapeC to object adds an outlineToggled read only property that is true if showing and false if not showing outline METHODS adds an outlineToggle(state) method to the object that toggles the outline when called    or can pass in true to show outline or false to not show outline    note - method does not update the stage    returns object for chaining RETURNS the obj for chaining; CLOSE ▲VIEW ▤BITS VIDS
ZIM CONTROLS
EXPAND 25528 ▶︎ STYLE
STYLE zim constant DESCRIPTION STYLE can be used to set any parameter on a DisplayObject. For instance: Circle, Blob, Button, Pane, Bitmap, Sprite, etc. These are applied at the time the objects are made. They are cascading with each level overriding the previous level: 1. GENERAL: any style can be specified in general    corner:30 will make all corners default to 30 2. TYPE: styles for object type can be set to override the general styles    Button:{corner:0} will make all button corners default to 0 3. GROUP: styles for a group can be set to override the type styles    homePage:{corner:20} will make all objects of that group default to 20 4. OBJECT: styles applied as parameters to the object override all other styles    new Button({corner:40}) will make this button have a corner of 40 See: https://zimjs.com/style.html for an example EXAMPLE
STYLE = {    corner:20,    backgroundColor:pink,    type:{       Button:{width:{min:100, max:500}, corner:0, centerReg:true, move:{y:series([-150, -50, 50, 150])}},       Dial:{add:true, x:800, y:600, backgroundColor:red, scale:2, outline:true},       Pane:{corner:ignore, color:white, draggable:true, width:300, label:"HI!"},       ProgressBar:{add:true, x:200, y:600, barType:"rectangle", transform:true},       Tabs:{add:true, x:100, y:100}    },    group:{       homePage:{corner:30}    } } new Button(); // will have a corner of 0 and be pink new Button({group:"homePage"}); // will have a corner of 30 and be pink new Button({corner:10, group:"homePage"}); // will have a corner of 10 and be pink new Button({corner:"ignore"}) // will have a corner of its default 20 and be pink new Button({style:false}).pos(700,100); // will have original default styles new Dial(); // will be red and scaled twice as big and have an outline new Tabs(); // will have a corner of 20 and selection will be pink var p = new ProgressBar({corner:15}); // will be a bar with transform tools, corner 15 p.percent = 25; new Pane().show(); // will ignore corner 30 and use its original 20 - it will say HI! in white and be draggable
EXAMPLE
STYLE = {    borderColor:dark,    borderWidth:5,    type:{       Rectangle:{          // color:red,          color:[red, pink, purple], // pick a random color from here          centerReg:true,          animate:{props:{rotation:360}, time:500, ease:"linear", loop:true},          move:{x:series([-200, 0, 200])}       }    } } // make three spinning rectangles loop(3, function(){new Rectangle();});
TRANSFORM STYLES Transformations can also be applied (all are numbers - visible is a Boolean): x, y, rotation, alpha, scale, scaleX, scaleY, regX, regY, skewX, skewY, visible a bounds style has a value of {x:Number, y:Number, width:Number, height:Number} where x and y are optional RANDOM, RANGES, AND SERIES STYLES Any property value can be a ZIM VEE value to make use of ZIM zik (pick) color:[red, green, blue] will pick a random color for each object for which the style is applied x:series([100,200,300]) will place subsequent objects at these locations width:{min:100, max:500} will make objects with a width within this range corner:{noZik:[0,40,0,40]}; will set corners - note we have to noZik this otherwise it would pick a number from the array for the corner value See Docs on ZIM zik() and ZIM series() for more information FUNCTION STYLES The following functions have been added: addTo, pos, center, centerReg, transform, drag, gesture, outline, mov, animate, wiggle Values of true will give default functionality for all but mov, animate and wiggle ZIM DUO configuration objects can be set as a value for any of these example: drag:true; or drag:{onTop:false} For animate and wiggle, [] can be put around multiple configuration objects to wiggle in the x and y for instance or run multiple animate calls on the object CONVENIENCE STYLES add:true - has been provided to add to the stage (use addTo for other containers) move:{x:value, y:value} or move:x - mirrors the mov Function style (just adding the e) pos: has corner convenience values: "left", "right", "top", "bottom", "rightbottom" or "bottomright", "center" and "centerReg" style:false - will turn off all styles for the selector EXCLUSION A value of ignore can be used to exclude any earlier styles and return to the original default. ignore is a ZIM global variable - if zns is true then use zim.ignore or just "ignore". Setting style:false will exclude the object from all styles All DisplayObjects have a style parameter (default true). Set to false to ignore styles. GROUPS All DisplayObjects have a group parameter. This parameter accepts a string or a comma delimited string of multiple groups. The group of components can then be targeted in the Group section of STYLE. A group can contain just one component and act like an ID in CSS. NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) CLOSE ▲VIEW ▤VIDS
EXPAND 25773 ▶︎ ANIMATE
ANIMATE
ANIMATE zim constant DESCRIPTION Set to false to stop 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, green); circle1.center(stage); circle1.x -= 110; circle1.animate({props:{alpha:0, scale:0}, time:700, from:true}); var circle2 = new Circle(200, pink); circle2.center(stage); circle2.x += 110; circle2.animate({props:{alpha:0, scale:0}, time:700, wait:700, from:true});
CLOSE ▲VIEW ▤VIDS
EXPAND 25814 ▶︎ OPTIMIZE
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 animate, drag, Scroller, Parallax See Ticker as you may have to set Ticker.update = true; CLOSE ▲VIEW ▤
EXPAND 25860 ▶︎ ACTIONEVENT
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 as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) 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 25888 ▶︎ KEYFOCUS
KEYFOCUS
KEYFOCUS zim global variable (in guise of a constant) DESCRIPTION A global variable that stores the DisplayObjects that will receive keyboard focus. This is a system for all DisplayObjects with keyboard controls (set to active). Eligible DisplayObjects are:    Squiggle, Blob, Stepper, Slider, Dial, Tabs, ColorPicker, TextArea The first eligible DisplayObject made will set KEYFOCUS to itself. Anytime an eligible DisplayObject is used it sets KEYFOCUS to itself. Eligable DisplayObjects have a keyFocus property that can be manually set. There is only one DisplayObject with key focus so setting removes key focus from the last key focused component. NOTE if tabbing from one component to the next is needed, consider using ZIM Accessibility() 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().center().mov(0, -100); var stepper = new Stepper().center().mov(0, 100); // arrows will control the slider as it is the first component made // if the stepper is used then arrows will control the stepper // if stepper.keyFocus = true is set to start then the stepper would have key control // alternatively, KEYFOCUS = stepper; would give the stepper key control // setting KEYFOCUS = null; would make no component have key control (until the component is pressed)
CLOSE ▲VIEW ▤
EXPAND 25922 ▶︎ POSREG
POSREG
POSREG zim global variable (in guise of a constant) DESCRIPTION A global variable that stores the desired setting for the reg parameter of pos() pos() had traditionally positioned based on registration point Now it defaults to position to the sides or the top and bottom Setting POSREG = true; will make pos() default to positioning at the registration NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
POSREG = false; // default new Rectangle().pos({x:10, right:true}); // will position right side 10 pixels from right POSREG = true; new Rectangle().pos({x:10, right:true}); // will position registration point 10 pixels from right
CLOSE ▲VIEW ▤
EXPAND 25947 ▶︎ DRAGALL
DRAGALL
DRAGALL zim global variable (in guise of a constant) DESCRIPTION A global variable that stores the desired setting for the all parameter of drag() By default, drag() will drag individual items in a container (currentTarget = false) This is handy to quickly drag a bunch of things. But some developers are used to dragging the whole container by default. Setting DRAGALL=true will change drag calls to default to the whole container (currentTarget = 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
DRAGALL = false; // default containerOfMonsters.drag(); // will drag individual monsters DRAGALL = true; containerOfMonsters.drag(); // will drag all the monsters at once
CLOSE ▲VIEW ▤
EXPAND 25973 ▶︎ Ticker = {}
Ticker = {}
Ticker zim static class DESCRIPTION A static class to let ZIM use a requestAnimationFrame with a single stage update. Used by ZIM animate, parallax, scrollers, etc. but any function can be added. 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(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 ** WARNING - if you are in a second Frame you should pass stage as a paramter so it does not point to the first Frame's stage 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: https://zimjs.com/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 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 ▤VIDS
-------------- PAGES, LAYOUT, ACCESSIBILITY EXPAND 26212 ▶︎ Pages(pages, transition, speed, transitionTable, holder)
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(page, swipeArray) - lets you alternatively add pages after you create the object removePage(page) - lets you remove a page (if on this page, call a go() first and remove on the page event) setSwipeArray(page, swipeArray) - 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 VIDS
EXPAND 26688 ▶︎ HotSpots(spots, local, mouseDowns)
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 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,rect) - rect is optional - so can remove all spots on a page or by the rect dispose() - removes listeners PROPERTIES type - holds the class name as a String 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 ▤VIDS
EXPAND 26895 ▶︎ HotSpot(obj, x, y, width, height, call, local)
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 ▤VIDS
EXPAND 27001 ▶︎ Guide(obj, vertical, percent, hideKey, pixelKey)
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) toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing    alternatively, pass in true to show controls or false to hide controls    note - method does not update the stage dispose() - removes keyboard event listeners and guide PROPERTIES type - holds the class name as a String toggled - boolean - read only true if controls are showing or false if controls are hidden pixels - boolean - set to true to change to pixels, false to go to percent CLOSE ▲VIEW ▤
EXPAND 27298 ▶︎ Grid(obj, color, percent, hideKey, pixelKey)
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) toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing    alternatively, pass in true to show controls or false to hide controls    note - method does not update the stage    returns object for chaining dispose() - clears keyboard events and grid PROPERTIES type - holds the class name as a String toggled - boolean - read only true if controls are showing or false if controls are hidden pixels - boolean - set to true to change to pixels, false to go to percent CLOSE ▲VIEW ▤BITS VIDS
EXPAND 27626 ▶︎ Tile(obj, cols, rows, spacingH, spacingV, width, height, squeezeH, squeezeV, colSize, rowSize, align, valign, count, mirrorH, mirrorV, snapToPixel, clone)
Tile(obj, cols, rows, spacingH, spacingV, width, height, squeezeH, squeezeV, colSize, rowSize, align, valign, count, mirrorH, mirrorV, snapToPixel, clone)
Tile zim class - extends a zim.Container which extends a createjs.Container DESCRIPTION Tile has two main uses: 1. ART Creates a tile with an object for the columns and rows specified - a mirror effect is available too. By default the object is cloned. A ZIM VEE value can be passed to tile multiple types of objects 2. LAYOUT Pass in a series([obj1, obj2, obj3, etc.]) to tile unique objects These could be thumbnail pictures, interface bars, content sections on a page, etc. Setting the clone:false will make sure the unique objects are used (rather than clones) Horizontal and vertical spacings can be set Setting colSize and rowSize will override spacings and force grid dimensions align and valign parameters can be used setting a width or height will spread the items - and override the colSize and rowSize In both dimensioned and non dimensioned modes, the rows and columns can be squeezed together and aligned as a group So a variety of layouts can be accommodated See: https://zimjs.com/tile.html for a dynamic example NOTE ZIM Layout() is available to layout content that is scaled into regions Tile will NOT scale the content but of course, the Tile itself can be scaled. And items can be manually scaled before or after adding - but Tile does not do any scaling. 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();
EXAMPLE
// tile 10 rectangles spaced out across the stage var tile = new Tile({obj:new Recangle(), cols:10, spacingH:30, width:stageW*.9).center();
EXAMPLE
// tile two rows with a Dial and a Slider in each var tile = new Tile({    obj:series([new Dial(), new Slider(), new Dial(), new Slider]),    cols:2, rows:2,    spacingH:30, spacingV:30,    valign:"center" }).center(); // use tile.getChildAt(0) to access first Dial - or: tile.items[0].on("change", function () {zog("changing dial 1")}); // OR if previously specified with events - use clone:false var d1 = new Dial(); var d2 = new Dial(); var s1 = new Slider(); var s2 = new Slider(); var tile = new Tile({    obj:series([d1, s1, d2, s2]),    cols:2, rows:2,    spacingH:30, spacingV:30,    valign:"center",    clone:false // will use the original objects }).center(); d1.on("change", function () {zog("changing dial 1")});
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 randomly - eg. ["red", "green", "blue"] 2. a Function that returns a value - eg. function(){return Date.now();}    see also the series() function which returns a function that will execute a series in order    pass series(["red", "green", "blue"]) into a ZIM VEE parameter to select these in order then repeat, etc. 3. a ZIM RAND object literal for a range - 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 having a value such as an Array or Function that zik will not process obj - |ZIM VEE| the display object to tile cols - (default 1) the columns to tile rows - (default 1) the rows to tile spacingH - (default 0) a spacing between columns - ignored if colSize is set spacingV - (default 0) a spacing between rows - ignored if rowSize is set width - (default null) set to a width to spread items in rows evenly out to width (see resize() method)    colSize and mirrorH are ignored if width is set height - (default null) set to a height to spread items in columns evenly out to height (see resize() method)    rowSize and mirrorV are ignored if height is set squeezeH - (default false) how to handle positioning within rows    when width is not set:       false - will not compress tiles beyond max calculated width for column including spacingH       true - will treat all rows independently and fill spaces - align will align rows to widest row    when width is set:       false - will not compress past longest row including spacingH       true - will compress all rows - align will then align rows to widest row       "full" - will continue to compress always keeping each row to the width (may cause overlap) squeezeV - (default "none") how to handle positioning within columns    when height is not set:       false - will not compress tiles beyond max calculated height for column including spacingV       true - will treat all columns independently and fill spaces - valign will align columns to highest row    when height is set:       false - will not compress past longest column including spacingV       true - will compress all columns - valign will then align columns to longest column       "full" - will continue to compress always keeping each column to the height colSize - |ZIM VEE| (default item size) set to number to hard code column width (ignores spacing)    ignored if width is set    use a series([100, 200, 100, 400]) to set specific sizes rowSize - |ZIM VEE| (default item size) set to number to hard code row height (ignores spacing)    ignored if height is set    use a series([100, 200, 100, 400]) to set specific sizes align - (default "left") set to "center", "middle", "right"    this is a basic align and may not work with rotated objects    add these to a container perhaps for best results valign - (default "top") set to "center", "middle", "bottom" 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 mirrorH - (default false) flip alternating objects horizontally (works with top left registration point) mirrorV - (default false) flip alternating objects vertically (works with top left registration point) snapToPixel - (default true) sets the stage to snapToPixelEnabled and snaps to pixels to avoid small gaps when Tile is repositioned clone - (default true) set to false to prevent Tile from cloning objects - good for series METHODS remake(items) - pass in an array of items to tile - see items property for editing current list - returns tile for chaining    can also change rows and cols and remake() resize(width, height) - resize the tile with new width and/or height if the width and/or height parameters were set - returns tile for chaining 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(), 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 These properties can be changed by calling remake()    items - an array of items the tile uses       modify this and pass in to remake(items) to update the Tile with new items       cannot modify count - count will become the length of the array passed to remake()    cols - number of columns - can modify - need to call remake() to see changes    rows - number of rows - can modify - need to call remake() to see changes These properties can be changed by calling resize(width, height) - set width or height to 0 for no spreading    spacingH - horizontal spacing - can modify - need to call resize() to see changes    spacingV - vertical spacing - can modify - need to call resize() to see changes    squeezeH - horizontal compression - can modify - need to call resize() to see changes    squeezeV - vertical compression - can modify - need to call resize() to see changes    align - horizontal alignment - can modify - need to call resize() to see changes    valign - vertical alignment - can modify - need to call resize() to see changes    mirrorH - horizontal mirroring - can modify - need to call resize() to see changes    mirrorV - vertical mirroring - can modify - need to call resize() to see changes ** 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)    use resize(width, height) for resetting the width of the Tile without rescaling height - gets or sets the height. Setting the height will scale the width to keep proportion (see heightOnly below)    use resize(width, height) for resetting the height of the Tile without rescaling 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 ▤VIDS
EXPAND 28150 ▶︎ Layout(holder, regions, lastMargin, backgroundColor, vertical, regionShape, scalingObject, hideKey)
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 (scaling) 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 ZIM Tile is available to lay out non-scaled content 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 scalingObject - (default holder) an object used as the bounds of the region scaling    setting a scalingObject will also set the bounds of the holder to the scalingObject 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) toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing    alternatively, pass in true to show controls or false to hide controls    note - method does not update the stage 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 type - holds the class name as a String regions - the regions object - if changed will have to call resize() manually toggled - read-only Boolean as to whether the controls are showing or hidden 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 VIDS
EXPAND 28640 ▶︎ Accessibility(appName, tabOrder, tabIndex, cycle, frame, decimals, alwaysHighlight, AHTime, AHColor, AHBorderWidth, AHBorderPadding, AHAlpha, AHObject, AHObjectScale)
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 https://zimjs.com/screenreader for a detailed example NOTE Please see https://zimjs.com/accessibility for a more examples 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    *** For objects not on the stage including a Pane, Waiter, etc. do not rely on the auto adding, use the parameter specified array instead. 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 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 [] PROPERTIES type - holds the class name as a String 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 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 ▤VIDS
-------------- MANAGERS EXPAND 29595 ▶︎ Manager()
Manager()
Manager zim class DESCRIPTION used internally to make ResizeManager, GridManager and GuideManager and in future perhaps OutlineManager CLOSE ▲VIEW ▤
EXPAND 29648 ▶︎ ResizeManager()
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 type - holds the class name as a String items - get or set an array of objects currently in the Manager CLOSE ▲VIEW ▤
EXPAND 29691 ▶︎ TransformManager(objects, persistID)
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, green)    .centerReg(stage)    .mov(-200)    .transform(); var circ = new Circle(100, 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 type - holds the class name as a String 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 ▤VIDS
EXPAND 30014 ▶︎ GuideManager()
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 type - holds the class name as a String 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) toggle(state - default null) - toggle() will show controls if they are hidden or hide controls if they are showing    alternatively, pass in true to show controls or false to hide controls    note - method does not update the stage 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 ▤VIDS
EXPAND 30070 ▶︎ GridManager()
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 type - holds the class name as a String items - an array of all Grid objects added with add() CLOSE ▲VIEW ▤VIDS
EXPAND 30121 ▶︎ LayoutManager()
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 type - holds the class name as a String items - an array of all Layout objects added with add() CLOSE ▲VIEW ▤VIDS
EXPAND 30215 ▶︎ SelectionSet(selections)
SelectionSet(selections)
SelectionSet zim class DESCRIPTION Keeps track of selected objects or indexes, etc. Just a wrapper for array manipulation: Uses isSelected instead of indexOf()>=0 Uses remove() instead of splice(index, 1), etc. Handles multiple select, matching other SelectionSet objects for add and remove, etc. Use with a SelectionManager to control multiple Selection Set objects at once. See: https://zimjs.com/explore/selectionTest.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 selectedTriangles = new SelectionSet(); var triangles = new Tile(new Triangle(), 5, 1, 50).center().mov(0,-200).cur(); triangles.on("click", function (e) {    selectedTriangles.toggle(e.target, frame.ctrlKey); // multiple if ctrl down    // need to loop through all to update    triangles.loop(function (triangle) {       triangle.color = selectedTriangles.isSelected(triangle)?pink:black;    });    stage.update(); });
PARAMETERS selections - (default []) an array of selected items or indexes, etc. METHODS clear() - clear selections isSelected(item) - returns true if item is selected else false toggle(item, multiple, match, unmatch) - toggle the item which calls add or remove below    this is probably the most handy method - see parameter description below add(item, multiple, match, unmatch) - add an item    multiple will not remove other selected items    match - pass in another SelectionSet to add the same item or index    unMatch - pass in another SelectionSet to remove the same item or index if there remove(item, multiple, match, unmatch) - remove an item    multiple will not remove other selected items    match - pass in another SelectionSet to remove the same item or index    unMatch - pass in another SelectionSet to add the same item or index if there dispose() - clears list and sets to null PROPERTIES type - holds the class name as a String items - an array of all Layout objects added with add() CLOSE ▲VIEW ▤
EXPAND 30345 ▶︎ SelectionManager(sets, multipleKey, multipleSets)
SelectionManager(sets, multipleKey, multipleSets)
SelectionManager zim class extends a CreateJS EventDispatcher DESCRIPTION Add Zim SelectionSet objects to a SelectionManager object and control multiple selection sets. Used internally to control Squiggle and Blob point selections for multiple drags and mousemoves Also provides key events along with undo event See: https://zimjs.com/explore/selectionTest.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
// manage two sets of SelectionSet objects: var selectedCircles = new SelectionSet(); var selectedRects = new SelectionSet(); // add SelectionSet objects to manager and set ctrl to be multiple select var selectionManager = new SelectionManager([selectedCircles, selectedRects], "ctrl"); var circles = new Tile(new Circle(), 5, 1, 50).center().cur(); var rects = new Tile(new Rectangle(), 5, 1, 50).center().mov(0,100).cur(); circles.on("click", function (e) {    // toggle current selected - SelectionManager will handle multiple select    selectedCircles.toggle(e.target);    setColors(); }); rects.on("click", function (e) {    selectedRects.toggle(e.target);    setColors(); }); // need to loop through all objects to make sure their color did not change function setColors() {    circles.loop(function (circle) {       circle.color = selectedCircles.isSelected(circle)?red:black;    });    rects.loop(function (rect) {       rect.color = selectedRects.isSelected(rect)?red:black;    });    stage.update(); }
PARAMETERS sets - (default null) a ZIM SelectionSet object or an array of SelectionSet objects to manage multipleKey - (default null) a key ("shift", "ctrl", "meta", etc.) to use for multiple select (only within a SelectionSet) multipleSets - (default true) set to false to only allow one set at a time to be selected on METHODS clear() - clears all SelectionSet objects in the SelectionManager setCurrent(set) - sets the privided SelectionSet to the currentSet and clears the others dispose() - removes key events PROPERTIES type - holds the class name as a String sets - an array of all the SelectionSet objects multipleKey - the key provided for multiple select ("shift", "ctrl", etc) - do not add "Key" as in "shiftKey" multiple - true if the multipleSelect key is being pressed otherwise false ctrlKey - true if the ctrlKey key is being pressed otherwise false shiftKey - true if the shiftKey key is being pressed otherwise false metaKey - true if the metaKey key is being pressed otherwise false EVENTS dispatches an "undo" event if a CTRL or META plus the U key is pressed CLOSE ▲VIEW ▤
-------------- CONTROLLERS EXPAND 30470 ▶︎ Swipe(obj, distance, duration)
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 duration - (default 80) time in milliseconds to travel that distance    try https://zimjs.com/swipe.html for testing distance and time (speed) METHODS enable() - set swipe to active (by default it is) disable() - set swipe to inactive (sets active to false and does not dispatch) PROPERTIES type - holds the class name as a String 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 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 VIDS
EXPAND 30627 ▶︎ Swiper(swipeOn, target, property, sensitivity, horizontal, min, max, damp, integer, factor, pauseTime)
Swiper(swipeOn, target, property, sensitivity, horizontal, min, max, damp, integer, factor, pauseTime)
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, 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, 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 pauseTime - (default 200ms) time in ms to call swipepause event if no swipe motion and swipeOn is pressed METHODS immediate(val) - set the damping immediately to this value to avoid damping to value dispose() - remove listeners and Ticker PROPERTIES type - holds the class name as a String 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 "swipepause" event when finger is not swiping but still down - see pauseTime parameter dispatches a "swipestop" event when swipeup has happened and value has stopped changing (delay is due to damp) CLOSE ▲VIEW ▤
EXPAND 30847 ▶︎ MotionController(target, type, speed, axis, boundary, map, diagonal, damp, flip, rotate, constant, firstPerson, turnSpeed, moveThreshold, stickThreshold, container, localBounds, mouseMoveOutside, mousedownIncludes, minPercentSpeed, maxPercentSpeed)
MotionController(target, type, speed, axis, boundary, map, diagonal, damp, flip, rotate, constant, firstPerson, turnSpeed, moveThreshold, stickThreshold, container, localBounds, mouseMoveOutside, mousedownIncludes, minPercentSpeed, maxPercentSpeed)
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, green).center(stage); var controller = new MotionController(stage, circle); // circle moves to mouse press position with damping var rect = new Rectangle(50, 30, green).centerReg(stage); var controller = new MotionController({    container:stage,    target:rect,    type:"keydown",    diagonal:true,    damp:.1,    rotate:true }); SEE: https://zimjs.com/controller for more examples
PARAMETERS supports DUO - parameters or single object with properties below target (default null) - the object you want to control    example a circle to move across the stage    can also be an Accelerator() to control percentSpeed    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 "pressmove" to have target jump to mousedown position then follow while pressing    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" if target is Accelerator) or "horizontal" or "vertical" (see diagonal parameter) boundary - (default null) a ZIM Boundary object for the boundary    the registration point of the target will stay within this boundary    this boundary is relative to the stage (global)    if a boundary relative to the object's parent is desired then set the localBounds parameter to true    ignored when target is Accelerator - use minPercentSpeed and maxPercentSpeed instead 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 or .2 if type is pressmove) 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 container - (default zimDefauktFrame stage) the Container the target is in - the stage is most likely fine    if container is specified, it must be on the stage when the MotionController is made localBounds - (default false) which means the boundary is global - set to true for a boundary in the object parent frame mouseMoveOutside - (default true) set to false to not allow mouse movement outside the stage to affect motion mousedownIncludes - (default null) a single object or array of objects (aside from the stage) to activate with mousedown    For mousedown and pressmove types, the mousedown will activate on the stage only    The controller assumes everything in the container will not activate the mousedown    This lets you activate interface elements without moving to them ;-)    If for instance, a backing is used other than the stage, just pass in the backing to this parameter    See also the mousedownIncludes property minPercentSpeed - (default 0) if target is an Accelerator, the percentSpeed at the left or top of the stage (depending on axis) minPercentSpeed - (default 100) if target is an Accelerator, the percentSpeed at the right or bottom of the stage (depending on axis) METHODS immediate(x, y) - set the damping immediately to this value to avoid damping to value - returns object for chaining 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 type - holds the class name as a String target - the target that you are controlling    target.x and target.y will give you damped x and y x - the desired x position of the target before damping is applied (use this for manual input - or convert() method) y - the desired y position of the target before damping is applied (use this for manual input - 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) boundary - get or set the Boundary object 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 mousedownIncludes - an array of objects that the mousedown will work on - along with the stage enabled - set to false to disable or true to enable MotionController - can toggle with enabled = !enabled EVENTS dispatches a "change" event for changes in direction with dir as property of event object    that will hold "left", "right", "up", "down", null (no direction) dispatches a "mousedown" event if type is "mousedown" or "pressmove" dispatches a "pressing" event if type is "pressmove" - note, this dispatches even if not moving dispatches a "moving" event if target is moving and "startmoving" and "stopmoving" events CLOSE ▲VIEW ▤VIDS
EXPAND 31500 ▶︎ GamePad()
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 type - holds the class name as a String 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 ▤VIDS
EXPAND 31665 ▶︎ Portal(obj, lands)
Portal(obj, lands)
Portal zim class - extends a CreateJS EventDispatcher Dedicated to Stephen Hawkings - may he be portal on! 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: https://zimjs.com/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, faint, 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 type - holds the class name as a String 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 ▤VIDS
-------------- EFFECTS EXPAND 31829 ▶︎ Parallax(layers, damp, auto, stage)
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    immediate - (default null) set to a value to set property immediately take that value without damping from current property value    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 type - holds the class name as a String damp - allows you to dynamically change the damping CLOSE ▲VIEW ▤BITS VIDS
EXPAND 32054 ▶︎ Scroller(backing, speed, direction, horizontal, gapFix, stage, container)
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 https://zimjs.com/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 backing - 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 type - holds the class name as a String 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 - eg. 100 is at the baseSpeed    this allows you to animate multiple scrollers relative to one another    See ScrollerManager class direction - 0 for no direction, either left (-1) or right (1) if horizontal or up (-1) or down (1) if not horizontal paused - 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 VIDS
EXPAND 32286 ▶︎ Dynamo(sprite, speed, label, startFrame, endFrame, update, reversible, flip, flipVertical)
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 https://zimjs.com/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 // do not rely on stage.mouseX - does not work on touchscreen! var stageX; stage.on("stagemousemove", function (e) {stageX = e.stageX;}); 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 = stageX/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"); // do not rely on stage.mouseX - does not work on touchscreen! var stageX; stage.on("stagemousemove", function (e) {stageX = e.stageX;}); 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 = stageX/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 type - holds the class name as a String 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 - eg. 100 is a 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 ▤VIDS
EXPAND 32531 ▶︎ Accelerator(objects)
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 (Dynamic Sprite) objects or an object animating with animate() and the dynamic parameter set All these have a percentSpeed property which can be set by the Accelerator to operate the speeds. 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
var rect = new Rectangle()    .centerReg()    .animate({props:{rotation:360}, ease:"linear", dynamic:true}); var accel = new Accelerator(rect); // adjust speed of the animation by mousedown // 0% at left, 50% in middle, 100% at right, etc. new MotionController(accel); // or new MotionController({target:accel, type:"mousemove", min:-200, max:200}); // will change speed from -200% to 200% as cursor is moved across screen
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! // do not rely on stage.mouseX - does not work on touchscreen! var stageX; stage.on("stagemousemove", function (e) {stageX = e.stageX;}); var damp = new Damp(accelerator.percentSpeed); Ticker.add(function() {    var newSpeed = (stageX-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 type - holds the class name as a String percentSpeed - adjusts the speed relative to the baseSpeed of each items in the Accelerator - eg. 100 is at the baseSpeed    this can be dynamically changed to change all speeds relatively paused - (read only) 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 ▤VIDS
EXPAND 32704 ▶︎ 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(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: https://zimjs.com/particles/ NOTE consider the Emitter as somewhat experimental and pushing the bounds of the canvas In future versions we will look into adding 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, pink))    .centerReg(stage); // eg.2 use a sink to attract the particles var sink = new Circle(10, 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,darker,2),       new Rectangle(30,30,null,darker,2),       new Triangle(40,40,40,null,darker,2)    ],    random:{color:[blue, green, pink, yellow, 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, 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 https://zimjs.com/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 randomly - eg. ["red", "green", "blue"] 2. a Function that returns a value - eg. function(){return Date.now();}    see also the series() function which returns a function that will execute a series in order    pass series(["red", "green", "blue"]) into a ZIM VEE parameter to select these in order then repeat, etc. 3. a ZIM RAND object literal for a range - 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 having a value such as an Array or Function that zik will not process obj - |ZIM VEE| (default blue, green, pink Circles) a display object to clone - eg. new Circle(10, 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) pauseEmitter(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(), 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) emitterPaused - read only Boolean as to whether the Emitter is paused or not - see also pauseEmitter() 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 ▤VIDS
EXPAND 33465 ▶︎ Pen(size, color, penType, damp, spread, borderColor, borderWidth, end, shape, nib, cache, ctrlKey)
Pen(size, color, penType, damp, spread, borderColor, borderWidth, end, shape, nib, cache, ctrlKey)
Pen zim class - extends a ZIM Container which extends a CreateJS Container DESCRIPTION Handles dynamic drawing with a set of different penTypes You can drag() or gesture() pen, move it with a MotionController(), animate() it, animate() it along a Squiggle or Blob path, etc. Holding down the CTRL key will allow the pen to move without drawing SEE: https://zimjs.com/pen.html NOTE the pen adds either a Bitmap (if cache is true) or a Shape (if cache is false) to the container the pen is added to. This is layered directly under the pen. 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 pen = new Pen({penType:"kitetail", nib:new Circle(10,pink)}).center().drag();
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 randomly - eg. ["red", "green", "blue"] 2. a Function that returns a value - eg. function(){return Date.now();}    see also the series() function which returns a function that will execute a series in order    pass series(["red", "green", "blue"]) into a ZIM VEE parameter to select these in order then repeat, etc. 3. a ZIM RAND object literal for a range - 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 having a value such as an Array or Function that zik will not process size - |ZIM VEE| (default depends on penType) the pen size color - |ZIM VEE| (default depends on penType) the pen size damp - (default .1) the damping for the pen - 0 is no movement, 1 is no damping    usually, set to 1 or false for following animate paths penType - (default "line") a String of "line","kitetail","barbwire","grass","hair","city", or "splatter" spread - |ZIM VEE| (default depends on penType) some pens use this like the splatter to determine how much the circles spread borderColor - |ZIM VEE| (default depends on penType) a line down the middle of the pen drawing borderWidth - |ZIM VEE| (default depends on penType) the thickness of a line down the middle of the pen drawing end - (default "butt") the cap type as a String "butt", "square", "round" - from CreateJS shape - (default null) a ZIM Shape - or Pen will make a Shape to use nib - (default null) an optional DisplayObject that will be used as the pen - would suggest centerReg({add:false}) this cache - (default true) caches drawing in a Bitmap (improves performance) - set to false to not cache - the paper property point to the Bitmap or the Shape depending ctrlKey - (default true) set to false to not turn off drawing when the CTRL key is pressed METHODS setPen(newPen) - sets the pen and resets the default properties for the pen immediate(x, y) - set the pen to this location without damping clear() - clears the drawing dispose() - removes all listeners and clears the drawing ALSO ZIM 4TH adds all the methods listed under Container (see above), such as: drag(), hitTestRect(), 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 paper - the actual drawing - either a Bitmap if cache is true or a Shape if not nib - get a reference to the specified nib - often not used write - get or set whether the pen is writing to the paper drawing - read only Boolean as to if the pen is drawing as in moving size - |ZIM VEE| get or set the size of the pen spread - |ZIM VEE| get or set the spread of the pen color - |ZIM VEE| get or set the color of the pen borderColor - |ZIM VEE| get or set the borderColor of the pen borderWidth - |ZIM VEE| get or set the borderWidth of the pen penType - get or set the type of pen - this will NOT set default properties like setPen() shape - a reference to the Shape object being used - warning - if cache is true, this is manipulated by Pen 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 ▤VIDS
EXPAND 33874 ▶︎ SoundWave(num, input, include, smoothing, min, max, operation, baseline, magnify, reduce)
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 // https://zimjs.com/soundwave/bars.html // https://zimjs.com/soundwave/circles.html // https://zimjs.com/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 type - holds the class name as a String 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 connected and the calculate() method is ready CLOSE ▲VIEW ▤VIDS
EXPAND 34106 ▶︎ VR(content, angle, distance, parallax, parallaxAngle, damp, parallaxDamp, startAngle, negativeParallax, boundaryMarkers, swiper, holder)
VR(content, angle, distance, parallax, parallaxAngle, damp, parallaxDamp, startAngle, negativeParallax, boundaryMarkers, swiper, holder)
VR zim class - extends a ZIM Container which extends a CreateJS Container DESCRIPTION Copies the content and displays a left and right channel (side-by-side) to be viewed with a VR helmet. Content can be made to shift side to side as the head turns. Parallax is also an option. Works with Google Cardboard & Daydream, Samsung Gear VR, Carl Zeiss VR, Merge VR, View-Master VR And costing around $20-$30 these are fine: Utopia 360, VRIT VR, ETVR, etc. Provides a ZIM Swiper for testing on desktop to emulate turning the head. DETAILS Make a content Container (with registration point at 0,0) that holds all the content. Set a depth property on any children in the content container that you want to look 3D or use the chainable dep() method to apply the depth property. ZIM VR will copy the content and its depths into left and right containers and mask it. The content can be accessed via contentLeft and contentRight properties. The x values of the content that has depth properties set will be shifted according to the depth. This gives a sense of 3D coming out of the screen for positive depths and into the screen for negative depths. Device orientation can also be used to move the content as the head is turned and the headset and device moves. Currently the horizontal movement is built in as that is the trickiest with the 3D effect. Supply a motion angle (angle) and a motion distance (distance) about which the user will turn their head to see the content. Optional arrows are provided to map the boundaries of rotation and available as boundaryLeft and boundaryRight properties. You can manually apply vertical shift based on the ZIM Frame deviceOrientation event about the x axis Horizontal Parallax is provided if desired and will be based on the head rotation if no motion angle is provided or based on the distance of the object from the center of view if a motion angle is provided. You can set the parallax details as well like the magnitude, angle, damping, and negative parallax. Negative values of depth will not produce parallax unless negativeParallax is set to true (this looks funny). You can make your own vertical parallax if desired using ZIM Parallax and the deviceOrientation event about the x axis. NOTE moving content in the x direction should not be done manually. Rather, use the position() method of VR to properly place both channels and reset the vrStartX positions required. NOTE To add or remove content please use the register() and remove() methods. Any new content should be added to the initial content container. Do this first, then set the desired depths, then register the new content. This will clone the new content to the right side channel and set the shift in x based on depths for both channels. NOTE Any modifications afterwards to other properties like alpha, color, y, registration, etc. must be made manually to both channels - use the contentLeft and contentRight properties. The contentLeft is the original content (also available as the content property). You can use the vrMatch property of any content objects to get its other channel partner. So if you have a label variable for the Label in the original content, you can access the label in the right hand channel with label.vrMatch The right channel objects also have vrMatch properties so label.vrMatch.vrMatch is the label ;-) SEE: https://zimjs.com/vr/ NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// Prepare content inside one container var content = new Container(stageW/2, stageH); // This background tile has no depth or is at "screen" depth // There will be no depth shift and no parallax new Tile(new Rectangle(10,10,light), 20, 1, null, 10).center(content); // These rectangles are given depth using the dep() method - or set the depth property // The rectangles will be shifted in the x by VR // centerReg the objects for proper parallax var box = new Rectangle(50,50,green).centerReg(content).dep(10); new Rectangle(70,70,clear,blue,5).centerReg(content).dep(12); // 1. this just shows content in 3D with no motion: // var vr = new VR(content).addTo(stage); // 2. this will move when the head is turned (device is rotated) but with no parallax: // var vr = new VR(content, 160, 400).center(stage); // 3. this shows parallax when the head is turned but with no positional movement: // var vr = new VR(content, 0, 400, 2, 60).center(stage); // 4. this shows motion and parallax as the head is turned: var vr = new VR(content, 160, 400, 2, 60).center(stage); // this will change the color of the box after it has been added to VR: // box.color = pink; // the left side // box.vrMatch.color = pink; // the right side // this would fade in and out the outer rectangles: // var obj = {obj:{alpha:0}, loop:true, rewind:true}; // vr.contentLeft.getChildAt(2).animate(obj); // vr.contentRight.getChildAt(2).animate(obj); // this would remove the outer rectangle: // vr.remove(vr.content.getChildAt(2)); // this would remove the right hand boundary marker // which shows when angle is != 0 and boundaryMarkers is set to true (default) // vr.remove(vr.boundaryRight); // this shows an inter-ocular adjuster when the stage is pressed stage.on("stagemousedown", function() {    vr.showAdjuster(); }); // the above works fine, but really should remove the event when stage is pressed // because all presses using the adjuster would be calling showAdjuster // then add the event again when the adjuster is closed // but ZIM makes sure that adjuster does not re-open if it is already open. // Here is what that code would look like: // var adjusterEvent = stage.on("stagemousedown", function() { //    vr.showAdjuster(); // }, null, true); // run once // vr.on("close", function() { //    adjusterEvent = stage.on("stagemousedown", adjusterEvent); // }); // this code turns the stage yellow if device is rotated beyond the angle parameter value var adjusterEvent = vr.on("boundaryout", function(e) {    zog(e.boundary); // would be "left" or "right"    frame.color = yellow; }); // this code changes the stage color back to the original when rotated back in bounds of the angle parameter vr.on("boundaryin", function(e) {    zog(e.boundary); // would be "left" or "right"    frame.color = lighter; }); // this would load stereoscopic images to the left and right content (no need to registser) // frame.loadAssets(["stairsRight.jpg", "stairsLeft.jpg"]); // frame.on("complete", function() { //    frame.asset("stairsLeft.jpg").center(vr.contentLeft); //    frame.asset("stairsRight.jpg").center(vr.contentRight); // });
PARAMETERS supports DUO - parameters or single object with properties below content - a ZIM Container with registration point at the top left that holds the content    The content will be placed in the left VR Channel (Container) and cloned to the right VR Channel (Container)    Set the depth property (or use dep()) of any children (recursive) of the content to be viewed in 3D    The higher the depth, the more it comes out of the screen which is at 0 depth    A negative depth will go into the screen but will not have parallax (see negative parallax)    The left and right content are available as contentLeft and contentRight properties of VR    Each child of content has a vrMatch property that refers to itself in the other channel angle - (default 0) the angle in degrees the head can turn to see VR move (half to left, half to right)    Currently, there is a small glitch in the transition at 360 degrees as damping rewinds and reverses position    And there is no affordance for wrapping - so content at this location is not recommended    A fix for this might be provided some time in the future distance - (default 100) the pixels the content will move over the angle (half to left, half to right)    OR if there is no angle and there is parallax, the distance the parallax will move over the parallaxAngle parallax - (default 0) the percentage of the depth it will move for each degree of motion up to the parallaxAngle parallaxAngle - (default 60) the degree range that parallax will operate (half on one side and half on the other) damp - (default .5) the damping for motion if angle is provide - quicker than normal for more response turning parallaxDamp - (default .1) the damping for parallax - smaller number goes slower towards desired position startAngle - (default 0) the angle to start the viewing negativeParallax - (default false) set to true to make parallax work for negative depth (looks funny) boundaryMarkers - (default true) set to false to remove arrow markers at angle boundaries if angle is set swiper - (default false) set to true to use swiping if not on mobile device - for testing    If on mobile, swiper is set to false so it does not conflict with the rotation of the device    The swiper works from -330 to +330 and then stops    Currently, there is no wrapping system so the limits prevent a glitchy transition holder - (default zimCurrentFrame stage) set to a Container with bounds set if desired - usually, the stage (default) METHODS register(item) - content is usually passed in initially to the content parameter of VR    but an item (a display object) can be added at any time - to remove items, see remove().    Set the desired depth property for the item with 0 being the default for the screen depth.    Add the item to content (contentLeft) with addTo(), center(), centerReg() before registering.    Do not add the item to contentRight as register() will clone the new item and its children recursively    to the right side VR Channel and set its depth and parallax.    NOTE: to add stereoscopic images, one to the left chanel and one to the right channel,    just add the images using addTo(), center() or centerReg() to contentLeft and contentRight - no need to register()    returns the item remove(item) - removes item (and children) from the content of VR - do not manually remove from left and right channels    returns the item position(item, x, y) - positions item in VR in both left and right channels - do no manually position left and right    returns the item showAdjuster() - shows a pannel to set interocular distance - this is saved across app loads    The pannel container can be accessed with adjuster property of VR    The adjuster property has backing, label, strip, slider, close, zero and ok properties for formatting    The adjuster sets the regX property of the content to shift the two channels to the desired distance appart    Generally, this should be the distance between the eyes, but experimentation shows that a smaller distance works well    This is provided primarily for tablet or desktop where the distance may be too big for the cross-eyed viewing technique    returns the VR object hideAdjuster() - hides the adjuster - but the close and ok buttons will do this as well - also see VR events...    returns the VR object resize() - call the resize() method to resize VR if the holder size changes - VR can be added to the ResizeManager    returns the VR object PROPERTIES type - holds the class name as a String angle - read only - the angle provided to the VR parameters currentAngle - read only - the angle at which the device has been rotated since the start of the app content - the original content provided to the VR parameters contentLeft - the content - this shows in the left VR Channel    The following read-only property is provided on all children of the content:       vrMatch - a reference to the matching child in the other VR Channel    The following read-only properties are provided to children of the content that have a depth property    These are given for content passed in to the content parameter and also to items passed in to the register() mehtod:       vrChannel - "left" or "right"       vrStartX - the starting x position before depth effect or parallax is added (could be changed if manually setting x position)       vrParallaxDistance - the shift in x due to parallax       vrParallaxDamp - the ZIM Damp object to handle parallax if VR angle is != 0 contentRight - the cloned content - this shows in the right VR Channel (also see contentLeft info) left - the container that holds the left VR Channel right - the container that holds the right VR Channel adjuster - the adjuster pannel - see showAdjuster() method for details swiper - the ZIM Swiper if swiper parameter is set to true to test the motion if not on device boundaryLeft - the left boundary container if boundary parameter is true boundaryRight - the right boundary container if boundary parameter is true EVENTS boundaryout - dispatched when rotated past a boundary region - the event object provides a boundary property with "left" or "right" values boundaryin - dispatched when rotated into the boundary region - the event object provides a boundary property with "left" or "right" values saved - dispatch when OK button on adjuster pannel is pressed to set the interocular distance closed - dispatches when X and OK button is pressed to close the adjuster pannel CLOSE ▲VIEW ▤VIDS
ZIM CODE
-------------- FEATURED EXPAND 00600 ▶︎ shuffle(array)
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 00643 ▶︎ rand(a, b, integer, negative)
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 00711 ▶︎ series(array|item1, item2, item3)
series(array|item1, item2, item3)
series zim function DESCRIPTION Returns a function that will return each value passed as a parameter (or an Array) in order This goes in sequence each time the function is called Use this to pass a series in to any ZIM VEE (zik) value so a looping series is obtained NOTE was called makeSeries() which is now depreciated NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// note - do not call the variable name series var s = series(red, green, blue); s(); // red s(); // green s(); // blue s(); // red, etc. // or var colors = [red, green, blue]; var s = series(colors); s(); // red s(); // green s(); // blue s(); // red, etc. new Tile(new Rectangle(10,10,blue), new Rectangle(10,10,red)); would randomize colors new Tile(series(new Rectangle(10,10,blue), new Rectangle(10,10,red))); would alternate colors
EXAMPLE
STYLE = {color:series(pink, green, blue)} loop(9, function (i) {    new Circle(100).loc(110+i*100, 400) });
PARAMETERS array|item1 - the first item - or an array of results that will be called in order as the resulting function is called // when used with ZIM VEE - the values may be further ZIM VEE values (including more series values) item2 - the second item if the first is not an array item3 - the third item, etc. to as many items as needed PROPERTIES array - an array of items passed in to the function RETURNS a function that can be called many times - each time returning the next value in the series CLOSE ▲VIEW ▤
EXPAND 00793 ▶︎ loop(obj, call, reverse, step, start, end)
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];} 4. If you pass an HTML NodeList then loop() loops and gives each tag in the NodeList see ZIM zet() for an example of getting a NodeList (like the $() in JQuery) 5. See also the loop method under ZIM Methods to see how to loop through a ZIM Container 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 = [green, yellow, 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!"); var tags = zet(".heading").tags; // get an NodeList of tags styled with heading class loop(tags, function(tag, i) {    tag.innerHTML = i + ". " + tag.innerHTML; // add an index number in front });
PARAMETERS supports DUO - parameters or single object with properties below obj - a Number of times to loop or an Array or Object or NodeList 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 VIDS
EXPAND 00946 ▶︎ timeout(time, call)
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 01043 ▶︎ interval(time, call, total, immediate)
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 01203 ▶︎ async(url, callback)
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 01283 ▶︎ convertColor(color, toColorType, alpha)
convertColor(color, toColorType, alpha)
convertColor zim function DESCRIPTION Converts color to hex numbers - for example: "#333333" Or converts color to HTML string - for example: "red" Or converts color to RGB - for example: "rgb(0,0,0)" Or converts color to RGBA - for example: "rgba(0,0,0,.5)" 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"); // result is "#ff0000" var color = convertColor("#ff0000", "string"); // result is "red" var color = convertColor("f00", "string"); // result is "red" - note missing # okay and can use three digits var color = convertColor(blue, "rgba", .5); // result is "rgba(80,196,183,0.5)"
PARAMETERS color - (default black) the HTML string or hex color (case insensitive) (does not work with "rgba()" input) toColorType - (default "hex") or use "string", "rgb" or "rgba" alpha - (default 1) the alpha used for the "rgba" toColorType RETURNS a String with the converted color or black if a match is not found CLOSE ▲VIEW ▤
EXPAND 01363 ▶︎ colorRange(color1, color2, ratio)
colorRange(color1, color2, ratio)
colorRange zim function DESCRIPTION Gets the color in a range between two colors based on a ratio from 0-1 Used internally by setColorRange() method and colorRange property of ZIM shapes including animating color from current color to a new color NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
zog(colorRange(green, blue, .5)); // #7ecb7c var rect = new Rectangle(100,100,red).center().setColorRange(purple); rect.colorRange = .1; will change color to #f1455e (closer to red than purple) rect.animate({color:purple}, 1000); // will animate color to purple in one second rect.wiggle("colorRange", .5, .2, .5, 1000, 5000); // wiggles the color in the range
PARAMETERS color1 - (default null) the first color as an HTML string or hex color (case insensitive) color2 - (default black) the second color as an HTML string or hex color (case insensitive) ratio - (default .5) the ratio where 0 is the first color and 1 the second color RETURNS a hex color string CLOSE ▲VIEW ▤
EXPAND 01414 ▶︎ pointAlongCurve(points, ratio, getAngle)
pointAlongCurve(points, ratio, getAngle)
pointAlongCurve zim function DESCRIPTION Finds a point along a cubic Bezier curve - such as that used in Blob and Squiggle as well as the Shape.graphics.bezierCurveTo() or tiny api bt() Used internally for animating along Blob and Bezier curves NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// point1, control1, control2, point2 var points = [{x:100,y:100}, {x:200,y:100}, {x:200,y:100}, {x:200,y:200}] var shape = new Shape(); shape.graphics    .s("black").ss(2)    .mt(points[0].x,points[0].y)    .bt(points[1].x,points[1].y, points[2].x,points[2].y, points[3].x,points[3].y); new Circle(10,red).loc(points, .2);
PARAMETERS points - an array of point objects (or objects with an x and y property)    for a cubic Bezier - point1, control1, control2, point2 ratio - (default .5) the ratio where 0 is at the first point and 1 is at the second point getAngle - (default false) request a calculated angle of tangent at point RETURNS a point object with x and y properties on the curve at the ratio    as well as an angle property for the tangent if getAngle is true CLOSE ▲VIEW ▤
EXPAND 01482 ▶︎ distanceAlongCurve(points)
distanceAlongCurve(points)
distanceAlongCurve zim function DESCRIPTION Finds approximate distance along a cubic Bezier curve - such as that used in Blob and Squiggle as well as the Shape.graphics.bezierCurveTo() or tiny api bt() Used internally for animating along Blob and Bezier curves NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// point1, control1, control2, point2 var points = [{x:100,y:100}, {x:200,y:100}, {x:200,y:100}, {x:200,y:200}] var shape = new Shape(); shape.graphics    .s("black").ss(2)    .mt(points[0].x,points[0].y)    .bt(points[1].x,points[1].y, points[2].x,points[2].y, points[3].x,points[3].y); zog(distanceAlongCurve(points)); // 170.7
PARAMETERS points - an array of point objects (or objects with an x and y property)    for a cubic Bezier - point1, control1, control2, point2 RETURNS an approximate distance along the curve CLOSE ▲VIEW ▤
EXPAND 01521 ▶︎ closestPointAlongCurve(point, segmentPoints, num, interpolate, percentage)
closestPointAlongCurve(point, segmentPoints, num, interpolate, percentage)
closestPointAlongCurve zim function DESCRIPTION Finds the closest point along a cubic Bezier curve before the given point. Blob and Squiggle use cubic Bezier as does the Shape.graphics.bezierCurveTo() or tiny api bt() Used internally for adding points to a Blob and Bezier curves 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().center(); var points = blob.segmentPoints; stage.on("stagemousedown", function (e) {    var point = blob.globalToLocal(e.stageX, e.stageY)    zog(closestPointAlongCurve({x:point.x, y:point.y}, points))    // gives index of point on curve before mouse location });
PARAMETERS point - an object with an x and y property    this could be {x:100, y:140} or circle, etc.    the results tell which segment to add the point to    the segment starting with the returned index segmentPoints - an array of cubic Bezier point data    each being an array of points for a cubic Bezier    in the format of [point1, control1, control2, point2]    Note, this is not the same as Blob or Squiggle points    but rather use the segmentPoints property of Blob and Squiggle num - (default 10) the number of points per segment used to calculate answer interpolate - (default false) will return closest test point - not index of closest existing point percentage - (default false) will return percent (0-100) the nearest point is on the path (overrides interpolate) RETURNS the index of the closest point in segmentPoints before the given point    or if interpolate is true, will return the closest testPoint (use higher num for better result)    or if percentage is true, will return percent (0-100) the nearest point is on the path (overrides interpolate) CLOSE ▲VIEW ▤
EXPAND 01591 ▶︎ transformPoints(points, transformType, amount, x, y)
transformPoints(points, transformType, amount, x, y)
transformPoints zim function DESCRIPTION Scales, rotates, or moves points about provided x and y - or 0, 0 if x and y are not provided Used internally by Squiggle and Blob transformPoints 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
// from https://zimjs.com/nio/paths.html var points = [[0,75,0,0,-150,150,150,-150],[300,75,0,0,0,0,0,0,"none"]]; var newPoints = transformPoints(points, "scale", 2); // [[0,150,0,0,-300,300,300,-300],[600,150,0,0,0,0,0,0,"none"]]
EXAMPLE
// or used with Squiggle: var points = [[0,75,0,0,-150,150,150,-150],[300,75,0,0,0,0,0,0,"none"]]; var squiggle = new Squiggle({points:points}).transformPoints("scale", 2); // a squiggle with points twice as big as before
PARAMETERS points - an array of points in the Squiggle and Blob format (controlType is left as is)    [[controlX, controlY, circleX, circleY, rect1X, rect1Y, rect2X, rect2Y, controlType], [etc]] transformType - String any of: "scale", "scaleX", "scaleY", "rotation", "x", "y" amount - the amount to transform x, y - (default 0, 0) the x and y position to transform about RETURNS an array of points with numbers transformed CLOSE ▲VIEW ▤
EXPAND 01687 ▶︎ makeID(length, type, letterCase)
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 01747 ▶︎ swapProperties(property, objA, objB)
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 01779 ▶︎ mobile(orientation)
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 01824 ▶︎ extend(subclass, superclass, override, prefix, prototype)
extend(subclass, superclass, override, prefix, prototype)
extend zim function - modified CreateJS extend and promote utility methods DESCRIPTION For ES5 - 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. For ES6 - do not use zim.extend() but rather use the built in ES6 structures as follows: EXAMPLE
// ES6 - do NOT use zim.extend() class Person() {    constructor () {       zog("I am a person");    } } class Woman extends Person { // use JS6 extends keyword    constructor () {       super(); // use JS6 super() to call the Person constructor - will do the zog()       // Woman code    } } // ES6 to extend a zim Container for example (do NOT use zim.extend() in ES6) class ChineseCoin extends Container { // use JS6 extends keyword    constructor () {       super(); // must call the zim Container before using keyword this       new Circle(100, "gold").addTo(this); // this will be the zim Container       new Rectangle(100, 100, "brown").center(this);    } } var coin = new ChineseCoin().center(stage); // coin is a zim Container with Circle and Rectangle inside
NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// ES5 examples using functions to make classes // ES5 has no extends keyword and no super keyword so we use zim.extends() function Person() {    this.talk = function() {       zog("I am a person");    } } function Woman() {    this.super_constructor(); // part of the zim.extend() system } extend(Woman, Person); // here is the zim.extend() for ES5 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
// ES5 example - see the ES6 set of examples for ES6 ;-) // 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, 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 NOTE do NOT use zim.extend() with ES6 - see ES6 examples at top instead 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 VIDS
-------------- BASICS EXPAND 02025 ▶︎ copy(obj, clone, cloneContainers)
copy(obj, clone, cloneContainers)
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,green),    new Rectangle(30,30,green),    new Triangle(40,40,40,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 cloneContainers - (default true if clone true) set to false to not copy objects with type="Container" RETURNS a new Object CLOSE ▲VIEW ▤
EXPAND 02094 ▶︎ merge(objects)
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 02133 ▶︎ arraysEqual(a, b, strict)
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 02180 ▶︎ isEmpty(obj)
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 02213 ▶︎ isJSON(str)
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 02246 ▶︎ decimals(num, places, addZeros, includeZero, time)
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 set to a number it adds 0 in empty spaces up to that many places after the decimal If addZerosBefore is set to a number it adds 0 in empty spaces up to that many places before the decimal 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,null,2)); // 2.30 zog(decimals(3,null,null,2)); // 03 zog(decimals(.12,2,2,1,null,true)); // 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 02330 ▶︎ sign(num)
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 02365 ▶︎ constrain(num, min, max, negative)
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.x, circle.radius, stageW-circle.radius); // circle.x will not be smaller than the radius or bigger than stageW-radius var speed = constrain(speed, 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 02408 ▶︎ dist(a, b, c, d)
dist(a, b, c, d)
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
// using point values for each var p1 = new Point(100, 100); // or {x:100, y:100} var p2 = new Point(200, 200); zog(dist(p1, p2)); //
EXAMPLE
// using x and y values for each // do not rely on stage.mouseX, stage.mouseY - they do not work on touchscreen! var stageX; var stageY; stage.on("stagemousemove", function (e) {stageX = e.stageX; stageY = e.stageY}); var distance = dist(stageW/2, stageH/2, stageX, stageY); // distance of mouse from center of stage
PARAMETERS a - first Point - any object with x and y values - eg. a zim Container or zim Point or {x:10, y:30}    or if four parameter values, an x value of the first point b - second Point - any object with x and y values    or if four parameter values, a y value of the first point c - (default null) an x value of a second point - if using x and y values d - (default null) a y value of a second point - if using x and y values RETURNS a positive Number that is the distance (could be on an angle) CLOSE ▲VIEW ▤
EXPAND 02463 ▶︎ angle(x1, y1, x2, y2)
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 02498 ▶︎ smoothStep(num, min, max)
smoothStep(num, min, max)
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(): https://zimjs.com/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(x, 40, 100)*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 num - the input value with respect to min and max 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 RETURNS a number between 0 and 1 that represents a transition factor CLOSE ▲VIEW ▤
-------------- CLASSES EXPAND 02572 ▶︎ Noise(seed)
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 https://zimjs.com/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(value, .3, .35) * 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 03100 ▶︎ Point(x, y, z, w)
Point(x, y, z, w)
Point zim class DESCRIPTION Stores x, y, z and w properties. See also createjs.Point for a Point class with more features. 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 point = new Point(100, 100); zog(point.x, point.y); // 100, 100
PARAMETERS x - (default 0) the x value of the point y - (default 0) the y value of the point z - (default 0) the z value of the point - probably not used w - (default 0) the w value of the point - very probably not used PROPERTIES x - the x value of the point y - the y value of the point z - the z value of the point - probably not used w - the w value of the point - very probably not used CLOSE ▲VIEW ▤
EXPAND 03141 ▶︎ Boundary(x, y, width, height)
Boundary(x, y, width, height)
Boundary zim class DESCRIPTION Stores the data for a rectangle with x, y, width and height. Can be used with ZIM drag(), gesture() for boundaries and the Physics module for world boundary. NOTE A createjs.Rectangle or an object {} with x, y, width and height properties can also be used Boundary was introduced to reduce confusion over having a ZIM Rectangle (Shape) and a CreateJS Rectangle (data) NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
new Circle(100, blue)    .center()    .drag(new Boundary(0,0,stageW,stageH)); // note: drag and gesture used to have rect parameters // these have now been depreciated and replaced with boundary parameters // CONTRACT // the drag() boundary contains the registration point // note: the gesture() boundary contains the whole shape of the object // here, we keep the circle inside the stage by contracting the Boundary by the radius var radius = 100; new Circle(radius, red)    .center()    .drag(new Boundary(0,0,stageW,stageH).contract(radius));
PARAMETERS x - the x position of the Boundary y - the y position of the Boundary width - the width of the Boundary height - the height of the Boundary PROPERTIES x - the x position of the Boundary y - the y position of the Boundary width - the width of the Boundary height - the height of the Boundary METHODS contract(number|x, y, width, height) - number of pixels to make the Boundary smaller    passing in a single number will contract this on all sides    passing in two numbers will contract from horizontal and vertical accordingly    passing in four numbers will contract from the sides accordingly    note: to expand pass in a negative number    returns object for chaining CLOSE ▲VIEW ▤
EXPAND 03223 ▶︎ Damp(startValue, damp)
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(e) {    Ticker.add(function() {       circle.x = dampX.convert(e.stageX);       circle.y = dampY.convert(e.stageY);    }, 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 VIDS
EXPAND 03292 ▶︎ Proportion(baseMin, baseMax, targetMin, targetMax, factor, targetRound)
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 03369 ▶︎ ProportionDamp(baseMin, baseMax, targetMin, targetMax, damp, factor, targetRound)
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 03490 ▶︎ Dictionary(unique)
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 returns boolean success clear() - removes all objects from Dictionary - returns object for chaining 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 ▤
-------------- HTML FUNCTIONS EXPAND 03613 ▶︎ scrollX(num, time)
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 03643 ▶︎ scrollY(num, time)
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 03707 ▶︎ windowWidth()
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 03730 ▶︎ windowHeight()
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 03753 ▶︎ getQueryString(string)
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 03809 ▶︎ swapHTML(idA, idB)
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 03836 ▶︎ urlEncode(string)
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 03867 ▶︎ urlDecode(string)
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 03895 ▶︎ setCookie(name, value, days)
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 03936 ▶︎ getCookie(name)
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 03973 ▶︎ deleteCookie(name)
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 ▤
ZIM WRAP
EXPAND 00014 ▶︎ zog(item1, item2, etc.) ~ log
zog(item1, item2, etc.) ~ log
zog global function DESCRIPTION Short version of console.log() to log the item(s) to the console. Use F12 to open your Browser console. zog is dedicated to Pragma (Madeline Zen) who was coding with Dr Abstract (Dan Zen) from the start Note: If zon (comments on) is set to false before ZIM runs, then all zog() commands are turned off 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 00043 ▶︎ zid(string) ~ id
zid(string) ~ id
zid global function DESCRIPTION Short version of document.getElementById(string) to access an HTML tag by its id. EXAMPLE
zid("logo").addEventListener("click", function(){});
PARAMETERS string - the id of the tag you are wanting to access RETURNS HTML tag with id of string or null if not found CLOSE ▲VIEW ▤
EXPAND 00067 ▶︎ zss(string) ~ css
zss(string) ~ css
zss global function DESCRIPTION Short version of document.getElementById(string).style to access the style property of an HTML tag by the tag id. EXAMPLE
zss("logo").margin = "10px";
PARAMETERS string - the id of the tag whose style you are wanting to access RETURNS style property of HTML tag with id of string or undefined if not found CLOSE ▲VIEW ▤
EXPAND 00092 ▶︎ zgo(url, target, width, height, fullscreen, modal) ~ go
zgo(url, target, width, height, fullscreen, 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 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 width - (default null) width of window (use with fullscreen true) height - (default null) height of window (use with fullscreen true) fullscreen - (default null) not really full screen but rather opens in a new window not tab 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 00135 ▶︎ zum(string) ~ num
zum(string) ~ num
zum global function DESCRIPTION Takes the units off a string number. Converts "10px" string from styles to number 10, for instance. If there is no value then this will return 0. EXAMPLE
// in HTML <div id="logo" style="position:relative; left:10px">LOGO</div> // in JavaScript var left = zum(zss("logo").left); // converts 10px to the Number 10 left += 20; // adds 20 to 10 zss("logo").left = left + "px"; // assigns 30px to left style
PARAMETERS string - the string representation of a number eg. "10px" RETURNS a Number CLOSE ▲VIEW ▤
EXPAND 00167 ▶︎ zot(value) ~ not
zot(value) ~ not
zot global function DESCRIPTION Test to see if value has no value (value must exist as var or parameter) or if value has been set to null. Good for setting function defaults. Really just asking if the value == null. Often we forget exactly how to do this - it is tricky: value === null, value == undefined, value == 0, !value DO NOT WORK. EXAMPLE
if (zot(width)) width = 100; // equivalent to if (width == null) width = 100;
PARAMETERS value - a variable or parameter you want to see if there is no value assigned RETURNS Boolean true if value does not exist CLOSE ▲VIEW ▤BITS
EXPAND 00196 ▶︎ zop(e) ~ stop
zop(e) ~ stop
zop global function DESCRIPTION Stop event propagation to subsequently added existing listeners. Must pass it e || window.event from your event function. NOTE this is not canceling the default action - to cancel default action use e.preventDefault(); EXAMPLE
zid("button").addEventListener("click", function(e) {    // do something    zop(e||window.event); });
PARAMETERS e - the event object from your event function    collect the event object as e and then pass in e || window.event RETURNS null CLOSE ▲VIEW ▤
EXPAND 00228 ▶︎ zil() ~ still
zil() ~ still
zil global function DESCRIPTION Stop keys from moving content - arrows, spacebar, pgup, pgdown, home, end. Stop scroll wheel from moving content - scrolling the canvas for instance. ZIM Frame does this in the full, fit and outside scale modes. If not using Frame, then you can do this once at the start of your code. Returns an array of references to three listeners: [keydown, wheel 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 00264 ▶︎ zet(selector) ~ set
zet(selector) ~ set
zet global function DESCRIPTION Uses document.querySelectorAll() to get a list of tags. Returns a ZIM Zet object which can be used to add events or styles to the set. EXAMPLE
zet(".class").on("click", function(){}); // would add function event to all tags with the class zet("p").css("color", "goldenrod"); // would make the text of all paragraphs goldenrod zet("#test").css({color:"red", "backgound-color":"blue", paddingLeft:"20px"}); // set a custom open property on all section bars to false zet("section .bar").prop("open", false); // set the custom open property on all section bars to true and set the innerHTML to CLOSE zet("section .bar").prop({open: true, innerHTML: "CLOSE"});
PARAMETERS selector - a CSS query selector such as a class, id, tag, or multiple selectors separated by commands    can also be complex selectors suchs as ".class img" METHODS (on the returned Zet object) zet(selector).on(type, function) - a shortcut for addEventListener() and will be added to all tags matching the selector zet(selector).off(type, function) - a shortcut for removeEventListener() and will be remove from all tags matching the selector zet(selector).css(property, value) - gets and sets styles    - gets the first programmatic property if a single string property is passed    - sets the property to the value on each of the Zet's tags from the selector passed to zet()    - if an object of properties and values is passed as the single parameter then sets all these properties    - NOTE: style names do not need quotes unless the dash is used - so camelCase does not require quotes    - NOTE: remember that commas are used for objects - not the semi-colon as in CSS zet(selector).prop(property, value) - gets or sets a property on a set of tags    - if an object of properties and values is provided as a single parameter, then sets all these on the set    - else if no value is set then returns an array of the set tags values for the property    - else if value is a single value then sets the property of the tags in the set to the value PROPERTIES (on the returned Zet object) tags - an HTML NodeList tag list RETURNS Zet object with on(), off(), css() methods and tags property (NodeList tag list) CLOSE ▲VIEW ▤BITS
EXPAND 00377 ▶︎ zob(func, args, sig, scope) ~ object
zob(func, args, sig, scope) ~ object
zob global function DESCRIPTION A system to build functions or classes that allow traditional parameters or a configuration object passed in as a single parameter. The configuration object has property names that match the function arguments. To use zob on your own functions, pass in a function and the function's arguments and insert zob into first line of your function as shown below. Replace yourFunction with a reference to your function but keep arguments as is. EXAMPLE
function test(a,b,c){    var duo; if (duo = zob(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 00446 ▶︎ zik(Array|function|object) ~ pick
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 randomly - eg. ["red", "green", "blue"] 2. a Function that returns a value - eg. function(){return Date.now();}    see also the series() function which returns a function that will execute a series in order    pass series(["red", "green", "blue"]) into a ZIM VEE parameter to select these in order then repeat, etc. 3. a ZIM RAND object literal for a range - 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 having 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.animate, zim.Emitter, etc. 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); // below we randomize the tile colors in the first example // and make them in color order for the second example new Tile([new Rectangle(10,10,"blue"), new Rectangle(10,10,"red")]); would randomize colors new Tile(series([new Rectangle(10,10,"blue"), new Rectangle(10,10,"red")])); would alternate colors // 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 ▤VIDS
EXPAND 00540 ▶︎ zta(item1, item2, etc.) ~ table
zta(item1, item2, etc.) ~ table
zta global function DESCRIPTION Short version of console.table() to log the Arrays or Objects to the console as a table Use F12 to open your Browser console. Note: if zon (comments on) is set to false before ZIM runs then all zta() commands will be turned off EXAMPLE
zta(["will", "this", "wind"]); // logs as a table
PARAMETERS item1, item2 (optional), etc. - Arrays or Objects to log to the console RETURNS items it is logging CLOSE ▲VIEW ▤
ZIM META
EXPAND 35825 ▶︎ DISTILL
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 https://zimjs.com/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 35865 ▶︎ distill()
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 https://zimjs.com/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 35914 ▶︎ parseAudioSprite(audioSpriteData, outputAudioSprite)
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 - a CreateJS AudioSprite data object CLOSE ▲VIEW ▤VIDS
EXPAND 35983 ▶︎ previewAudioSprite(audioSpriteData, numLetters, frame)
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 36068 ▶︎ svgToBitmap(svg, callBack)
svgToBitmap(svg, callBack)
svgToBitmap zim function DESCRIPTION Function to convert SVG to ZIM Bitmap NOTE as of ZIM 5.5.0 the zim namespace is no longer required (unless zns is set to true before running zim) EXAMPLE
// svg can be a reference to an svg tag on the page zid("svgTagID") // or an svg string starting with for example: // var svg = '<svg id="vector" width="500" height="500" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 312 521" version="1.0"> // SEE: https://zimjs.com/svg for an example svgToBitmap(svg, function(bitmap) {    bitmap.center().transform();    stage.update() });
PARAMETERS svg - an SVG tag or SVG string callBack - function to call when creation is done RETURNS - null CLOSE ▲VIEW ▤VIDS
EXPAND 36123 ▶︎ zimify(obj, list)
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 VIDS
EXPAND 36511 ▶︎ zimplify(exclude)
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 JavaScript Window class is stored as document.Window and JavaScript Blob class is stored as document.Blob to provide access as these are overwritten by zimplify Alternatively, zns can be set to true then run zimplify(["Window", "Blob"]); at which point the zim namespace would be needed for a ZIM Window and ZIM Blob but the others would need no namespace and the JavaScript Window and Blob would be available as Window and Blob. 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, green); // was: var circle = new zim.Circle(50, 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 36571 ▶︎ Wonder(wid, client, app, notes, server)
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/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 notes - (default null) any extra notes like any user data (limit 256 characters as it is stored each record) 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 https://zimjs.com/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 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 ▤