ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM Loves CreateJS

heart

This is an addendum to the guest blogger post on the CreateJS blog.

ZIM is an open source JavaScript library for making Interactive Media on the HTML Canvas.  The main modules in ZIM are built with and built for CreateJS which provides a full hierarchical display list, a core interaction model as well as animation, sound and asset loading modules.

ZIM provides support for general JavaScript in its Wrap and Code modules but all the other modules are specifically for CreateJS.  Let’s take a look at the modules for CreateJS – you can refer to the ZIM Docs at http://zimjs.com/code/docs.html

ZIM CREATE MODULE

The Create module is a set of functions for CreateJS content like drag(), hitTestRect(), scale(), animate(), centerReg(), etc.  The subsequent Build, Pages and Frame modules hold classes for persistent objects. Dragging can be easily accomplished with a few lines of CreateJS but it gets more tricky as you nest objects and drag within boundaries, etc. zim.drag() provides a one-line drag and drop with 13 optional parameters.

zim.drag(circle);

ZIM functions may have many parameters so the ZIM DUO system lets you specify a configuration object as a single parameter.  For instance, here is a way to slide the object after releasing:

zim.drag({obj:circle, slide:true});

The Create module also provides six different types of hitTest functions.  zim.hitTestPoint() is like the CreateJS hitTest but it takes into account nested (scaled and rotated) containers as do all the ZIM hitTests.  There are also tests for circles, rects, registrations, bounds and grids.

b_sequence

TweenJS is amazing for animations but you have to remember to set up the Ticker and to remove the Ticker.  The zim.move() and zim.animate() functions add and remove a zim.Ticker for you.  zim.Ticker is a single createjs.Ticker that is turned on or off depending on various settings to ensure that only one Ticker is run for all zim functions or components.  The move and animate functions also include sequencing, rewinding, and a few shortcuts for animating scale and frame number.

The Create module has scaling functions to fit content into containers.  There are centering and registration functions that quickly center and add content to a container.  The place functions is a way arrange and record the location of content.  You then set the x and y to finalize position.  The expand function wraps the CreateJS hitArea to make any object have a bigger hit area for pressing on – especially important with mobile.

ZIM BUILD MODULE

The Build module provides easy Circle, Rectangle and Triangle classes built on the CreateJS Shapes.  These are given width, height and color properties.

b_dial

Build also includes components such as Label, Button, CheckBox, RadioButtons, Pane, Waiter, Indicator, Stepper, Slider, Dial, Tabs, Pad and ColorPicker.  These are built on top of one another.  For instance, the Button uses a Label.  The Tabs use Buttons, etc.  Most components provide a change event and various selectedIndex or currentValue properties.  They also support DUO so here is a button with a default corner radius and with no corner radius:

var but1 = new zim.Button(120, 40, "PRESS"); // normal parameters without DUO
var but2 = new zim.Button({width:120, height:40, label:"PRESS", corner:0});

Create defines zim.OPTIMIZE and zim.ACTIONEVENT general constants.  Optimize set to true will make sure that no components update the stage.  This is slightly odd because then the components do not change – for example, a slider does not slide.  But, the slider dispatches a change event and you are most likely updating the stage in that change event.  So why do two stage updates.  ACTIONEVENT defaults to “mousedown” for more immediate mobile action but can be set to “click”.

The last two classes in the Build module are Parallax and Scroller.  Parallax  will move CreateJS objects using a parallax effect based on mouse move or on page scroll (or custom data).  Parallax is really a combination of the zim Damping and Proportion classes from the Code module.  The Scroller makes a CreateJS object animate constantly across the stage.

ZIM PAGES MODULE

The Pages module provides swipe events, page control, hot spots (like image maps), grids and guides and a layout class.  These can be used to handle multiple page responsive and adaptive design layouts especially for mobile.

b_responsivedesign

In ZIM TRI, a new feature called Wonder has been added to the pages module. Wonder lets you track how many times something occurs like a button press.  Wonder also tracks how long it takes to do something like complete a level and the order in which things are done.  The reports are available on the Wonder site.

ZIM FRAME MODULE

Frame helps you create a canvas and CreateJS stage with various scalings.  You can fit a dimensioned stage to the window, or outside the window.  This is handy as you know the aspect ratio of your content.  You can make the stage full screen in which case you need to handle any scaling and positioning to match the screen aspect ratio.  You can also target a tag giving dimensions or not in which case the stage will size to the tag size.  Frame dispatches ready and resize events.  Frame also wraps PreloadJS to give  a single line loading of assets along with a complete event.

frames

ZIM Frame options

ZIM DISTILL MODULE

The Distill module is new with ZIM TRI.  Distill prepares custom minified js files based on the functions you use in your app.  You will still need to supply the CreateJS js code.  Set zim.DISTILL = true; at the top of your script and run your app making sure you go through all functionality.  Add a add the zim.distill() function somewhere like a reset button, etc.  This will output to the console a bunch of numbers representing ZIM functions used.  Paste this list into the Distill site and minified code will be provided for you to host along with your app.  Of course, you are welcome to just use the ZIM CDN link currently sitting at 95K.  But distilled files are often less than half this size.

CONCLUSION

This gives an overview of ZIM and how you can use it with the amazing CreateJS library.  The ZIM site provides a LEARN section of workshop and tutorials and a mini-site called ZIM Bits which features a growing number of commonly used Interactive Media techniques. Please contact us through the Facebook CreateJS fan page if you have any questions or comments!

Thank you to the CreateJS team for their excellent library and support.

%d bloggers like this: