MAIN PAGE FOR ZIM FREE JAVASCRIPT INTERACTIVE MODULES

APR 10, 2016 SCROLLBAR WITH SLIDER Here is a ZIM Bit showing scrollbars made with the ZIM Slider component. New in ZIM 2.6.1 you can set the inside parameter to true.

APR 10, 2016 ZIM BITS now has 26 examples and tutorials of basic building blocks for interactive media on the HTML 5 Canvas with JavaScript, CreateJS and ZIMjs. We launched with 8 Bits and aim for 64 Bits by the end of 2016!

APR 6, 2016 ZIM 2.6.1 DUO has launched to help you code interactive media faster with JavaScript and CreateJS. With DUO you can pass parameters traditionally or with a single object. ZIM provides 90 functions and classes for 90K. See the tabs for info on the modules and scroll down the page for the latest news, tutorials and examples. Coding the HTML 5 Canvas has never been easier!

Interactive Media Features:
• One-line drag and drop
• Multiple types of hit tests
• Buttons, Panes and Tabs
• Shapes, Sliders and Steppers
• Waiters and ColorPickers
• Indicators, Dials and Pads
• Scalable Template Framework
• Easy asset loading
• Page and Layout Control
• Mobile Optimization
• Swipes and HotSpots
• Guides, Grids and Outlines
• Parallax, Scroll and Tiling
• Proportional Damping
• And more! See the tabs

Create example

Build example

Pages example

Visit the ZIM js Blog for concise articles to share and help people find ZIM.

MAR 30, 2016 DIALS AND INDICATORS! ZIM 2.6 has launched with new Dial, Indicator and Pad components plus updates to sliders and tabs. ZIM Frame 2.6 wraps PreloadJS for easy access to image and sound assets.

MAR 16, 2016 TICKING, SEQUENCING & SLIDING! ZIM 2.5 has launched with sequenced animations, new drag functionality, new zim.Ticker architecture and more! Check out the two new ZIM Bits.

JAN 19, 2016 ZIM ColorPicker is here with full Web 256 colors or custom settings. Optionally add greys and an alpha picker. The ColorPicker has been added to ZIM 2.4 and the Zim Build module. Try it out!

JAN 09, 2016 The ZIM Pixels example demonstrates improved mobile performance with the new zim.hitTestGrid() as we can create grid like interactivity with one Shape.

JAN 07, 2016 ZIM Tabs have arrived to start the new year! We are kind of feeling like the IKEA of code ;-) Tabs are part of ZIM 2.3 which also features mobile optimization!

DEC 16, 2015 ZIM PARALLAX now animates to the window scroll as well as mouse movements. So cool it gets its own sub-module but of course remains part of ZIM Build. See the CDN and here is a Holiday Example.

DEC 09, 2015 ZIM REMOTE uses ZIM Socket to remotely control an application. Introduces the new Slider component in ZIM Build. Open the remote and enter a code. Open TERMINAL and enter the same code. Control the circle from the remote.

JUL 24, 2015 Mobile demo of PIECES was created in one hour using ZIM. App was uploaded with GitHub and PhoneGap Build in one minute to iOS, Android and Windows devices. Full app is coded and awaiting approval.

JUN 19, 2015 Learn how to code with the ZIM Learn tutorial workshop to program games and apps with ZIM, CreateJS and JavaScript!

APR 14, 2015 Dan Zen gives TALK at CreateInTO User Group. The talk provides a fifteen minute overview of ZIM features - well worth the watch!

APR 11, 2015 ZIM saves over 100 lines of code on Nanora the motion puzzle game built with CreateJS demonstrating preloading.

JAN 31, 2015 The Swipe Test page lets you test and tweak swipe speeds on mobile. The ZIM default is 30px in 80ms. Tell us your best settings. The Swipe class is part of the new Pages module.

About the Creator

Examples of JavaScript JavaScript wrapper code for easy console logs, etc

Wrap Features:
• zog() // for console.log()
• zid() // for document.getElementById()
• zss() // for setting a style
• zgo() // quick link
• zum() // turn px into a number
• zot() // handle default parameters
• zop() // stop event propagation
• zil() // still page from arrows, etc.
• zob() // pass params as an object!

About the Creator

Examples of JavaScript code to make things easier

Code Features:
• shuffle(a) // randomizes array
• rand(a,b) // random between
• copy(o) // copy array or object
• arraysEqual(a,b) // well, are they?
• decimals(n) // rounds to decimal
• Damp() // eases numbers
• Proportion() // maps numbers
• ProportionDamp() // Wow!
DOM Features:
• scrollX() // read and set
• scrollY() // read and set
• windowWidth() // read
• windowHeight() // read
• urlencode() // matches PHP
• urldecode() // matches PHP
• setCookie(name, value, days)
• getCookie(name)
• deleteCookie(name)
• mobile() // test for device

About the Creator

Examples of JavaScript Drag and Drop, Hit Tests with CreateJS and EaselJS

Create Features:
• drag(obj, rect) // nest transforms ok
• noDrag(obj) // removes drag code
• hitTestPoint() // with transformation
• hitTestReg() // shape hitting reg
• hitTestRect() // shape hitting rect
• hitTestCircle() // shape and circle
• hitTestBounds() // two bounds test
• boundsToGlobal() // handles transforms
• hitTestGrid() // fast grid check
• scale() // goodbye scaleX, scaleY
• scaleTo() // in relative percentage
• move() // Tween wrapper for moving
• animate() // Tween wrapper for all
• fit() // fit object to bounds
• outline() // bounds, reg and origin
• place() // move and record position
• centerReg() // save a line every time
• expand() // add hitArea with padding

ZIM Create example

About the Creator

Examples of components and interactivity with CreateJS and EaselJS

Build Features:
• OPTIMIZE // consolidate updates
• ACTIONEVENT // mousedown or press
• Circle() // With dynamic coloring
• Rectangle() // Quick plus coloring
• Triangle() // Three lengths doth make
• Label() // text used by interfaces
• CheckBox() // traditional
• RadioButton() // traditional
• Button() // button with rollovers
• Pane() // pop windows and alerts
• Waiter() // loading animation
• Indicator() // row of status lights
• Stepper() // for numbers and strings
• Slider() // min, max, steps, ticks
• Dial() // crank them to 11
• Tabs() // a row of cute buttons
• Pad() // a grid of cute buttons
• ColorPicker() // 256 or custom
• Parallax() // for that 3D effect!
• Scroller() // animate backgrounds

ZIM Build example

About the Creator

Examples of Laying out pages for mobile with CreateJS and EaselJS

PAGES Features:
• Swipe() // capture swipes
• Pages() // manage pages (plus swipes)
• HotSpots() // all nav in one place!
• HotSpot() // supply rect or obj
• Guide() // measure distances to guides
• GuideManager() // for multiple guides
• Grid() // pixels or percents
• GridManager() // handle multiple grids
• Layout() // with flexive regions
• LayoutManager() // control layouts

ZIM Pages example

About the Creator

About the Creator

About the Creator

About the Creator