ZIM js JavaScript Framework

Canvas Components, Controls and more!

Interactive Media – Context and Metrics – HTML Canvas, JavaScript, CreateJS and ZIM


Interactive Media consists of sites, apps and games for information, social, artistic or educational purposes or to play or simulate life.  The diagram above divides how we make Interactive Media into two camps – 1. the text optimized DOM (Document Object Model) and 2. the draw optimized BOM (Bitmap Object Model).  A third camp could be considered game platforms like Unity.

The text optimized DOM with HTML, JavaScript, CSS and libraries like jQuery (React, Angular) are best suited to make brochure sites, service apps and text games where it is important to be able to flow text in documents that we tend to view or consume.

The draw optimized BOM with the HTML Canvas, JavaScript, CreateJS and libraries like ZIM are best suited to making: site features that are interactive beyond navigation; applications where a product is created (configuration, drawing and collage tools, etc.); and 2D games.  CreateJS and ZIM use classes, methods and properties that have been honed for twenty years to make Interactive Media that makes use of dynamic drawing, dragging and dropping, and hit tests.



On the traditional draw-optimized Interactive Media side the benchmark has been set by Macromedia Director and subsequently by Adobe Flash as to what features are available for the creator.  The diagram above shows the features or tasks inside the boxes that are used to make an Interactive Media project.  We should be spending our time on the tasks in the final box to be actually creating our app – and not building infrastructure (or plumbing).

The colored arrows beneath the boxes show that the time to build an app is reduced as we add the libraries.  This makes sense as you do not need to build your own hit tests, drags, components, etc. which are provided by ZIM.  And you do not need to organize your low level graphics calls, handle nesting and events because CreateJS does that for you.  Not only that, but the libraries have been professionally coded and tested.

There is a plus sign to the right of the arrows that indicates that the build time continues and is not to overall scale.  A test case shows that ZIM saved 200 lines of code on  a 1500 line project so roughly a 1/8 saving in code.  This may not directly translate to a 1/8 saving in time but gives an indication that build time can be reduced.

At the top of the Metrics diagram are some stats on the amount of code in ZIM.  This code is indeed doing many useful things that will save time.  Most likely you will not be using all the code so to be efficient, you may consider using ZIM Distill which will collect only the functions you are using in a remote JS file.  A minor drawback to this technique is that the  JS file cannot be cached across sites as a complete JS file could.  CreateJS is popular enough that the caching of its complete JS file has been accommodated in online advertising standards.


Having seen the context of ZIM within Interactive Media and its advantage in metrics please have a look at the ZIM site to get started.  A good place is the ZIM Capture series of video tutorials.  These introduce ZIM, the site, the resources and then on to examples of using ZIM.  As a matter of fact, we have inserted a Capture 00 that takes you through the diagrams above!

All the best,

Dan Zen



One comment on “Interactive Media – Context and Metrics – HTML Canvas, JavaScript, CreateJS and ZIM

  1. Dan Zen
    September 16, 2016

    Note, there is now a ZIM Capture that goes through these slides and more at https://www.youtube.com/playlist?list=PLfzKgAP3NhxBuY5nRZMJVNYzwxo2odq-X


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


This entry was posted on August 22, 2016 by in interactive media, javascript and tagged , , , , , , , , , .


%d bloggers like this: