ZIM DOCS http://zimjs.com/docs.html http://zimjs.com/updates.html http://zimjs.com/tips.html http://zimjs.com/bits.html A. ABOUT ZIM ZIM is an JavaScript Canvas Framework powered by CreateJS and adds many components, conveniences and controls for making general Interactive Media. The ZIM site at http://zimjs.com features the following sections: LEARN tutorials on how to start and code in ZIM CODE ZIM Frame template and code context DOCS the objects and commands all defined NEWS latest features and articles ABOUT features, applications, archives, reviews, etc. EXAMPLES sample projects created in ZIM GOLD BARS with online editor, sharing, tips and badges B. ABOUT THE DOCS The docs are divided into modules: FRAME, DISPLAY, METHODS, CONTROLS, CODE, WRAP, META, LIBRARIES Let's have a brief look at each... --------------------------------- 1. FRAME - the framework class that makes and scales the canvas and stage var frame = new Frame("fit"); // defaults to full screen no scaling frame.on("ready", function() { var stage = frame.stage; frame.loadAssets(["pic.png", "sound.mp3"]); // optional asset loading frame.on("complete", function() { var pic = frame.asset("pic.png").center(stage); frame.asset("sound.mp3").play(); stage.update(); }); // end asset loading complete }); // end ready also handles zim colors like frame.blue, tabs, keydown and keyup, etc. colors are now available on the zim namespace - blue, red, yellow... --------------------------------- 3. DISPLAY - classes for objects viewed on the stage like shapes and components var circle = new Circle(100, "red"); // also Rectangle, Triangle and Blob var button = new Button(200, 100, "GO!"); etc. and dozens more like Label, Slider, Dial, Tabs, ColorPicker... --------------------------------- 4. METHODS - methods for the display objects above circle.center(stage); // adds to and centers button on stage circle.drag(); // allows the circle to be dragged and dropped circle.animate(obj:{alpha:0}, 5000); // fades out circle over 5 seconds etc. and dozens more - also see PRINCIPLES sections below... --------------------------------- 5. CONTROLS - classes that affect Display objects new MotionController(stage, circle); // circle moves to mouse press new Pages(stage, {page:home}, {page:help}); // handle pages and swiping new Layout(stage,[{object:header},{object:content},{object:footer}]); responsive design with many more options (like css flex table) etc. including Parallax, Scroller, Guide, Grid, Emitter, SoundWave... --------------------------------- 5. CODE - non-Canvas code convienence functions var array = ["red", "yellow", "green", "blue"]; var color = shuffle(array)[0]; // shuffles array and picks first color var color = array[rand(array.length-1)]; // gets random element etc. many more including browser functions and asynchronus calls --------------------------------- 6. WRAP - a dozen three-letter global functions starting with z zog("hello world"); // short for console.log(); zid("tagID"); // short for document.getElementById(); etc. including selectors similar to $() in jQuery --------------------------------- 7. META - a few classes and functions operating on zim DISTILL = true; distill(); // writes to console all the commands used to reduce code zimify(createjsObj); // adds zim Methods to native createjs display objects wonder.count("wow"); // once set up records different types of stats --------------------------------- 8. LIBRARIES - other ZIM helper modules found here: http://zimjs.com/code.html#libraries Including: SOCKET, GAME, PHYSICS, THREE, PIZZAZZ 1, 2 and 3 modules The docs for these are found at the top of the code for each module C. THE DOCS