ZIM js JavaScript Framework

Canvas Components, Controls and more!

CREATEJS POWERS THE ZIM INTERACTIVE MEDIA MODULES

screen

ZIMjs at http://zimjs.com is a library of interactive media modules built for and with CreateJS.  ZIM provides one-line drag and drop, multiple hitTests, over a dozen components, parallax, responsive design, and much more to help you build with CreateJS.

ZIM was created by Inventor Dan Zen who is a Canadian New Media Awards Programmer and Educator of the Year.  Zen has been coding Interactive Media since the critically acclaimed CD Rom, Understanding McLuhan, built in 1995 with Macromedia Director.  He then moved on to Flash, building many dozens of Flash apps found in the extensive Dan Zen Museum at http://danzen.com.

Here are Zen’s thoughts on using CreateJS to build ZIM:

For over twenty years, tool-makers and developers have been honing Interactive Media so I was delighted and relieved to find all the necessities in CreateJS.  Subtle but important features like mouseChildren, localToGlobal, etc. are all there.  We even got some nice improvements like using on() instead of the notoriously lengthy addEventListener().  The CreateJS team also looks out for us with respect to performance by separating out stage updates and bounds settings.

I should point out that CreateJS was built for Interactive Media whereas HTML and CSS are built primarily for displaying content.  As such, CreateJS works with numbers for properties where CSS is string based which causes complications and extra work.  For example, here is rotating an object in CSS using JavaScript:

document.getElementById('rect').style.transform="rotate(" + num + "deg)";

here is rotating an object in CreateJS:

rect.rotation = num;

CreateJS and in particular, EaselJS gives us a Display List which is the foundation for Interactive Media like we had in Flash (or a Scene Graph in gaming, Document Object Model (DOM) in HTML).  Since CreateJS works on the Canvas, I have taken to calling it the Bitmap Object Model or BOM.  Containers, Bitmaps, Text, Shapes, etc. along with a robust Event model are all provided.  However, we are missing the components found in Flash.  Not only that, I had built up a library of 190 custom classes in Flash before moving over to CreateJS.

ZIM is an integrated and documented repackaging of these custom classes (such as Damping, Scaling and Parallax) as well as a growing list of components (Buttons, Panes, Sliders, Tabs).  ZIM also wraps some of the common CreateJS tasks (dragging, hitTests, animation, shapes, loading).  ZIM was made specifically with developers and designers in mind and could possibly be the easiest way to code Interactive Media in JavaScript.

TEACHING

I have been teaching Interactive Media for over a dozen years in the Sheridan one-year post-grad Interactive Media program.  I am quite sensitive to simplicity in coding as I need to explain the code to dozens of people who have not seen it before.  In general, getting started with CreateJS is easier than the Flash ActionScript environment in the past where you had document class, importing, packages, typed variables, etc.  This is even more so if the students already know JavaScript.  With CreateJS being JavaScript based,  it saves us time as we use JavaScript for front-end Web development – and perhaps soon for server side with NodeJS.

imm

The students like having their script control visual elements like shapes, text, bitmaps and sound.  They enjoy doing animated art works , games and e-learning apps and liked drag and drop, hit tests, and the ease of applying rotation and transparencies.  It is a very visual way to learn and practice the basics of programming like variables, conditionals, functions, loops and arrays.  The types of basics we look at can be seen on ZIM Bits.

bitspromo2

CreateJS gives us the flexibility that we need to make Interactive Media projects so we teach CreateJS from the ground up.  When making interactive media, we see patterns or steps that we do over and over.  We can abstract (take out) the steps and put them in functions and classes of code that we use over and over.  That is what ZIM does – it is a library of common Interactive Media tasks.  You can have a look at these functions and classes to get a better idea here: http://zimjs.com/code/docs.html.  For instance, we are often dragging and dropping, and making buttons, etc. so look closely at the Create, Build and Pages modules that relate directly to CreateJS.

I teach the students how to see these patterns and collect them into their own libraries.  I use ZIM as an example of how we can extend CreateJS which itself is extending JavaScript.  It is good for them to know how drag-and-drop and buttons are made but then going forward, it is more efficient to use a library like ZIM to make projects more quickly.

FLEXIBILITY

Providing flexibility is empowering but can some times lead to more code.  CreateJS, for example, gives us TweenJS to animate properties.  We are also given a Ticker in which we can update the stage as we animate.  This separation is important because it gives us the flexibility to animate several things and yet just use one Ticker for updating the stage. If CreateJS automatically updated the stage for each animation, then that would lead to extra stage updates which can be costly for performance, especially on mobile.

Still, we then have to remember to add a Ticker event and remove the event when the animation is done.  So I wrapped TweenJS in an ZIM animate() function that automatically adds and removes the Ticker event.  This would then cause multiple updates if they animated more than one object.  So I adjusted ZIM to use a global Ticker event that updating the components can also share.  The global Ticker only updates the stage if there are functions added to it and it is fine-tuned by a few constants and properties.

b_sequence

The flexibility of CreateJS also shows up in PreloadJS where we can load all sorts of media in several ways.  This is a bit tricky to memorize – not that you have to memorize it, but it is always more comfortable to code when you can.  So recently, I added asset loading to the framework of ZIM – that being zim.Frame().  Frame is responsible for abstracting almost 100 lines of code to give you a template that makes your canvas tag and stage, handles various scaling modes and requirements for mobile.  Asset loading is now two lines along with the event.

To some degree, ZIM is like jQuery but for CreateJS and the Canvas.  If you would like to read more about how ZIM works with CreateJS then please have a look at this article:  ZIM loves CreateJS on the ZIM blog.

CONCLUSION

examples

The CreateJS team have done a fantastic job moving our interactive legacy into the HTML Canvas / JavaScript world.  The library is very robust and stable with excellent support.  Care has been taken to provide some handy shortcuts as well as the flexibility needed for optimization.  It has been a joy to develop a dozen apps with CreateJS.  CreateJS has been comparatively easy to teach and well received by the students.  I have found it very rewarding to create the ZIM library of Interactive Media modules with CreateJS.  I would hazard a guess that I have spent more time building in CreateJS than anyone outside the CreateJS team.  I have enjoyed every minute of it and hope that the ZIM library will be a useful tool for the community.  There are all sorts of resources on the ZIM site and you are welcome to join me to discuss CreateJS and ZIM on the CreateJS Facebook group.  Get creating!

%d bloggers like this: