ZIM js JavaScript Framework

Canvas Components, Controls and more!

The Easy Way to Build In JavaScript – for artists, designers, beginners, newbies, kids, teens, and even experienced coders!

examples

ZIMjs at http://zimjs.com is an open source framework for making interactive media pizzazz in JavaScript!  ZIM uses the free-form, draw-optimized HTML CANVAS so it is a little different than traditional HTML, CSS and JavaScript but it runs on all current browsers and mobile devices just like HTML – because… it is HTML.

FEATURES

ZIM gives us an easy environment to start coding.  Things you need to create with are all provided:

  • Containers, Bitmaps, Sounds, Sprites (animations)
  • Shapes (circles, rectangles, triangles, custom)
  • Components (labels, buttons, windows, sliders, dials, etc.)
  • Commands (drag, hitTests, animate, center, scale, etc.)
  • Properties (x, y, scale, alpha, rotation, registration, etc.)
  • Events (ready, click, mousedown, keydown, etc.)

examples2

BACKGROUND

JavaScript and the DOM (Document Object Model) are not really a pleasant place to make things.  You have VERBOSE commands like document.getElementByID() and very powerful but sometimes ridiculously FINICKY CSS manipulations to position and nest things.  All numbers are strings, which is not optimal for dynamic code.

With ZIM, a lot of the difficult parts of traditional HTML, CSS and JavaScript have been abstracted or sidestepped by using the Canvas with a consistent and powerful set of commands for drawing free-form, animated and interactive content.  The basis of these commands makes up CreateJS, the library which ZIM runs on. The commands have been HONED by years of interactive media in Flash.  This learning and experience should not be taken lightly.  It is what gives ZIM its ultimate usability.  The learning has been updated to blend seamlessly into the JavaScript modern mobile world.

HOW TO USE

ZIM has been coded specifically to be IMMEDIATELY useful for everyone.  ZIM relies on the basics of JavaScript:

  • Variables – memory: var x = 10
  • Conditionals – logic:  if (x == 10) {win}
  • Loops – repeat: for () {loop}
  • Functions – organization: function() {code}
  • Arrays – a list of elements: var a = [1,2,3]
  • Objects – properties: var o = {color:”red”, size:20}

So when you code with ZIM you are using one of the most POPULAR computer languages in history.  This is good if you already have JavaScript skills and it is good if you are just developing skills because what you learn with ZIM will be useful with other libraries.

ZIM provides a very simple TEMPLATE.  In the code example below we add a circle to the center of the stage and make it draggable:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ZIM Template</title>
        https://d309knd7es5f10.cloudfront.net/zim_4.1.1.js
        https://code.createjs.com/createjs-2015.11.26.min.js
        
            var frame = new zim.Frame();
            frame.on("ready", function(){
                var stage = frame.stage;
                var circle = new zim.Circle(50, "red");
                circle.center(stage);
                circle.drag();
                stage.update();
            });
        
    </head>
    <body>
    </body>
</html>

TEMPLATE BREAKDOWN

The template starts with traditional HTML.  For instance, if you use ATOM as a text editor and type HTML and enter, it gives you this template HTML code. The ZIM parts are in the script tags:

  1. First we load the two libraries that are needed:  ZIM and CreateJS.  This is what gives us all the commands we can use.
  2. The third script tag is where we start using ZIM.  We first make a zim.Frame() which makes our stage (on an HTML Canvas).  You can make the frame scale in various ways, have dimensions and color, etc.  See the Template Page or Docs for more.
  3. We use the on() method to capture events.  Traditional JavaScript uses the addEventListener() – hopefully, you can see the immediate advantage of on().  When the frame is ready we run a function  which does the statements inside the parentheses {}.
  4. The first statement just stores a local variable called stage which will allow us to access the stage of the frame.  The stage is where we put things we want to see and possibly interact with.
  5. The second statement makes a zim.Circle object with a radius of 50 pixels and a color of red and stores it in a variable called circle.  There are all sorts of objects we can make.  See the ZIM Docs under the Build Module.
  6. The third statement centers the circle on the stage.  Traditionally, we use stage.addChild(circle) but the center method both adds and centers – yay! See the ZIM Docs under the Create Module for many more commands.
  7. The fourth statement makes the circle draggable.  There are all sorts of other things we can do with drag() like set the bounds, make it so you can throw the object, snap, etc.
  8. The last statement updates the stage so the changes that we made are shown.  This is helpful in keeping ZIM as efficient as possible especially for mobile.  But it does take a little getting used to.  Many of the features of ZIM will update the stage for you such as when animating or dragging.  The components, such as a dial, slider, etc., update the stage too so you can see the component work.  ZIM provides an OPTIMIZE setting for when you get a little better at all this and want to fully optimize for mobile.

PATTERNS

ZIM is Object Oriented.  This means that anything we see or can use are called OBJECTS that are made from CLASSES (like templates).  Examples of objects are the stage, buttons, label, sound, etc. These objects have PROPERTIES that describe them such as x and y position, text, volume, etc.  They also have METHODS that do things or do things to them like animate, center, clone, play, etc.

It is very common to create an object from a class and pass PARAMETERS to the class as we make the object.  This allows us to create a more specific object with properties that we want.

var button = new zim.Button(200, 60, "press");

There are over a dozen such parameters for the Button class.  ZIM has many classes such as all the shapes and components.  These have many, many parameters.  ZIM provides two ways (DUO) to set parameters:  the traditional way above which requires order to be kept but we can just use the values; and a second way where we pass a single parameter that is a CONFIGURATION OBJECT with both the parameter name and its value.

Button({width:200, height:60, label:"press", corner:0});

The second way we can access parameters in any order and can avoid putting in placeholder nulls to keep the order of the traditional parameters.  For example, traditionally we would have to use the following to set the corner to 0 where we have to put placeholder nulls for color, rollColor, borderColor and borderThickness to use their default values:

Button(200, 60, "press", null, null, null, null, 0);

The ZIM DUO technique really helps the framework be more manageable when coding.  If you are specifying most parameters or just the first bunch then use the traditional way.  If you need a parameter near the end or just like seeing what your parameters are then use the second way with the  configuration object.

In JavaScript, FUNCTIONS are objects too.  This means that we can pass functions  in as parameters.  We often do this and we often use a FUNCTION LITERAL (anonymous function).  This can be a bit confusing to start but we use it all the time, so you need to get used to it.  Here is an example for the on() method – the first case we pass a reference to an animate function and the second case we pass a function literal:

button.on("click", animate);
function animate() {
    // do code
}

And now with the same thing with the function literal where the function object is passed in as the second parameter.  Do not forget the closing round bracket:

button.on("click", function() {
    // do code
});

Either technique is fine, but we tend to use the second one as it is shorter.  New JavaScript 6 ways of doing functions are here too (but more on those one day!)

RESOURCES

The ZIM Site has all the resources listed – you can use the “hamburger” menu at top right to see them all as they may have been updated after this post date.  Here is a list at the time of this posting:

  • ZIM Capture – video captures of ZIM features
  • ZIM Bits – a series of small tutorial examples
  • ZIM Docs – docs including examples of each entry
  • ZIM Learn – many video and code tutorials and workshops
  • Facebook – a CreateJS forum with ZIM support

CONCLUSION

Please let us know if you are INTERESTED in using ZIM to teach or to learn and we would be happy to discuss with you.  Really – just contact us dan [@] zimjs.com – we’d absolutely love to hear from you.

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Information

This entry was posted on October 25, 2016 by in design, interactive media, javascript, library, tutorials and tagged , , , , , , , , , , , , , , .

Categories

%d bloggers like this: