Canvas Components, Controls and more!
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.
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.
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.
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.
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.
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.