NEWS


Make a soup with ZIM Physics! BASIC and ADVANCED Examples 

Scroll Parallax effect for Gorgolon underwater civilization 
ZIM Bits 40th - falling bombs and coins - how to! 

Introducing ZIM WINDOW for swipeable, scrollable content! 

How ZIM and CreateJS save you time! 

Make custom minified JavaScript files based on your app. 

Micro track user interactions for UX considerations. 

Visit the ZIM js Blog for details of the latest news! 

Send and get data from server without page reload. 
Archives

New ZIM Bit to Scrub Animation. 

Added gradient and gloss to buttons! 

DIALS and INDICATORS in a new ZIM Bit demo. 

TABS demo - ZIM - the IKEA of code! 

ZIM DUO parameters (a,null,null,d) or ({prop1:a, prop2:d}) 

SCROLLBAR demo - using ZIM Slider and the new "inside" parameter. 

The COLOR PICKER component is here as part of the Build Module. 

Now, control both mouse and scroll PARALLAX and try out the HOLIDAY example. 

Tell us your news in the FACEBOOK Fan CreateJS Group 

BASICS

- or see DISTILL for less!
GET ZIM

ZIM TRI (3) is a feature-rich library for general Interactive Media on the HTML Canvas using JavaScript and CreateJS
Frame Docs
START with the ZIM Frame flexible choice of templates. DOCS describe over 80 functions and classes!
Features
    Interactive Media Features:
  • One-line drag and drop
  • Multiple types of hit tests
  • Buttons, Panes and Tabs
  • Windows and Wrapable Text
  • Shapes, Sliders and Steppers
  • Waiters and ColorPickers
  • Indicators, Dials and Pads
  • Scalable Template Framework
  • Easy asset loading
  • Page and Layout Control
  • Mobile Optimization
  • Swipes and HotSpots
  • Guides, Grids and Outlines
  • Parallax, Scroll and Tiling
  • Animation, Damping and more!
Applications
    ZIM Applications:
  • Mobile Apps and Sites
  • E-learning Applications
  • Games and Puzzles
  • Collages and Generative Art
  • Simulations and Visualizations
  • Interactive Logos and Infographics
  • Gadgets and Tools
  • Configurators and Comics
  • Teaching and Learning Code
  • Parallax and Sliding Sites
  • Interfaces and Components
  • Fullscreen or Embedded
Examples

The old ZIM site and the ZIM Socket Multiuser JavaScript site for avatars and chats. 

DAN ZEN creator of ZIM is an Inventor who has been making interactive works for twenty years. 
About
    ABOUT ZIM:

    ZIM was started in 2014 as interactive developers moved to the Canvas and JavaScript world from Adobe Flash and Flex. Dan Zen consolidated 190 custom classes built over ten years for Flash into the new ZIM library. Props to CreateJS for making this possible and to Flash for leading the way!

    ABOUT DAN ZEN:

    Dan Zen is an inventor from Dundas, Canada - surrounded by waterfalls on the edge of Hamilton. He is a two-time Canadian New Media Awards winner for his pioneering work in Interactive Media. Zen's Museum of Interactive Works spans the existence of the Web with early works in Director, Flash, HTML and JavaScript.


ZIM is free but worth a lot in saving you time and effort. SHARING is wonderbar! 

LEARN


Video introductions with ZIM CAPTURE - a great place to start! 

ZIM LEARN is a workshop tutorial for anyone with a text editor and browser! 

ZIM Bits is a growing collection of interactive techniques we use all the time like dragging, snapping, damping, scaling, swiping - see all 

Any questions you have we'll answer in the FACEBOOK Fan CreateJS Group or GitHub 

ZIM creator Dan Zen giving an INTRODUCTION talk at CreateInTO followed by an UPDATE talk with new features.
INTERACTIVE EXAMPLE: Drag the head around and check out the commented code below. Interactive coding is tricky - that is what makes it such a wonderful puzzle!
INTRODUCTION

Z  I  M
ZIM has about 100 functions and classes
These are mostly stored in a zim namespace so
zim code does not get mixed up with other code
In this example we use:
zim.Frame(), zim.drag(), etc.
We also use the createjs namespace for CreateJS
createjs.Container(), etc.
ZIM uses and wraps many CreateJS functions and classes
to help you do common tasks in Interactive Media
ZIM is somewhat similar to jQuery on the DOM
but ZIM and CreateJS work on the Canvas
with a BitMap Object Model - the BOM
(Display List - Flash, Scene Graph - Gaming)

Just quickly, we will go through some basics
See the ZIM Learn section for more details
Skip ahead to EVENTS if you have coded before

VARIABLES
Variables hold values (numbers, strings, etc.)
You use the var keyword to declare a variable
You assign the value with the assignment operator
var name = "Dan Zen";

FUNCTIONS
A function is a block of code that does something
You can call a function any number of times
zim.drag() calls the zim.drag function

CLASSES
A class is a special function
that is a template for making objects
We use the new keyword to make an object
Classes by convention start with uppercase
zim.Frame() is a class

OBJECTS
Objects are made from a class
and generally are like Nouns
We might have a Monster class
and we can make any number of monsters
var m1 = new Monster();
var m2 = new Monster();

PROPERTIES
Objects have properties
which describe the object (Adjectives)
or are things the object has (more objects)
We use the dot syntax to access properties:
m1.color = "blue";
m2.color = "red";
Objects are independent so can have
different values for these properties

METHODS
Objects can also have methods (Verbs)
things that the object can do or
things that can be done to the object
m1.growl(), m1.clone()

EVENTS
Events are things that happen
like a click, mousedown, load, complete
We use the on() method to capture events
and run a function when the event happens
m1.on("click", gargle);
or quite often we call a function literal:
m1.on("click", function(){
  // code to run when clicked
});

CONTAINERS
We can put objects in a container:
var monsters = new createjs.Container()
and put a single event on the container
instead of an event on each object
monsters.on("click", gargle);
We can collect an event object e
that tells us extra info about the event
function gargle(e) {
  // the monster that is clicked on
  var m = e.target;
  m.growl();
  // the object with the event (container)
  var c = e.currentTarget; // monsters
}

VOCABULARY
Then there are all the functions and classes
in ZIM and CreateJS libraries
These are listed in the Docs
and there are many examples in ZIM Bits
There are all the JavaScript functions and classes

SYNTAX & LOGIC
And there is the syntax and logic of programming
This is discussed in the ZIM Learn section
It takes practice and you get better and better!

CREATIVITY
What about what to make?
Please visit the Creativity Framework
based on the philosophy of Nodism
as all coders are logical people modeling life
and therefore Philosophers

PHILOSOPHY
Visit the Dan Zen Coding and Philosophy
Exhibits for more https://danzen.com
(Coding 1, Coding 2, Coding 3. Philosophy)
 
						
EXAMPLE CODE

// FRAMEWORK
// ZIM Frame creates a canvas and a CreateJS stage
// the stage is where we put things for the user
// we create a new zim.Frame object
// that points to an existing HTML tag of id=dragExample
// see FRAME Templates for other options
// store our frame object in a variable called f
var f = new zim.Frame("dragExample");

// we use the on() method of the frame f
// to capture the "ready" event
// on() is like addEventListener() in JavaScript
// the first parameter is the type of event
// the second parameter is the function to run
// in this case, a function literal or anonymous function
f.on("ready", function() {

  // frame gives us a stage and dimensions
  // local variables are easier to use later on
  var stage = f.stage;
  var sW = f.width;
  var sH = f.height;

  // ASSETS
  // load graphics in with Frame's loadAssets()
  // this wraps CreateJS's PreloadJS code
  // pass in a list of assets and optional path
  // could load in sound this way too
  // put on multiple lines to read in narrow column ;-)
  f.loadAssets([
    "face1.png", "face2.png",
    "face3.png", "zim3.png"], "tri/");

  // call this function object when complete
  f.on("complete", function() {

    // put the graphics in local variables
    // we get the CreateJS Bitmap with asset()
    var face1 = f.asset("face1.png");
    var face2 = f.asset("face2.png");
    var face3 = f.asset("face3.png");
    var logo  = f.asset("zim3.png");

    // REGISTRATION POINT
    // objects like Bitmaps and Shapes
    // have a registration point, regX and regY
    // when we position an object in a container
    // the registration point is placed at x and y
    // rectangles default to top left corner
    // and circles default to the middle
    // Bitmaps like these graphics are rectangles
    // zim.centerReg() centers the registration point
    // and if we also pass a container like stage
    // then the object is added to the container
    // and then centered in the container
    // there is also zim.center(obj, container)
    // which centers without changing registration
    // either would work here
    // note: we normally would have to add to stage
    // like stage.addChild(logo)
    // but centerReg and center do this automatically
    // (unless you set a third parameter to false)
    zim.centerReg(logo, stage);

    // PROPERTIES
    // here we change the alpha of the logo
    // alpha is the transparency or opacity
    // this helps blend it in with the sky
    // alpha is a property as are x, y, rotation
    // scaleX, scaleY (or use zim.scale()), etc.
    // all these properties take numbers as values
    // alpha is 0 for invisible and 1 for full
    // note, alpha = 0 can't be interacted with
    // alpha = .01 can be interacted with
    // working with numbers is easier than with strings
    // styles in CSS are all strings - annoying!
    logo.alpha = .8;

    // HEAD WITH FACES
    // make a container for our head
    // this will hold our face graphics
    // but act as one thing to drag and animate
    var head = new createjs.Container();

    // add the first face to the head
    // and then center the head (and add) on stage
    head.addChild(face1);
    zim.centerReg(head, stage);

    // DRAGGING
    // zim.drag() drags objects
    // by default it drags any object in a container
    // this is handy - for instance:
    // if we have pieces in a puzzle container
    // zim.drag(puzzle);
    // will drag any piece that is pressed on
    // we do NOT have to say:
    // zim.drag(piece1);
    // zim.drag(piece2); etc.
    // BUT we have a face object in a head container
    // when we drag the head with zim.drag(head)
    // we do not want to drag the face inside!
    // we want to drag the container head
    // with events, this is the difference between
    // the target of the event (what was clicked)
    // and the currentTarget of the event
    // which is the object the event was placed on
    // (currentTarget is a dreadful property name)
    // so - in our case, target is the face
    // as it is the object that was pressed on
    // and currentTarget is the head
    // because it is the object we put the drag on
    // If we set the currentTarget parameter
    // of zim.Drag() to true it drags the head
    // An alternative (native) way is to
    // tell container to ignore children
    head.mouseChildren = false;
    zim.drag(head);
    // or zim.drag({obj:head, currentTarget:true});

    // CHANGING FACES
    // we change faces a lot in this example
    // so we will put the steps in a function
    // which we can call over and over ;-)
    // we do not want to change the face
    // if the face is the same as current face
    // so we remember what face is the lastFace
    // we use a variable to remember something
    var lastFace = face1;

    // when we call the function below
    // we will pass the face we want to change to
    // Here, where we define the function
    // we collect that face in the face parameter
    // this is like a variable that the function can use
    function show(face) {

      // leave the function if the face is the last face
      if (face == lastFace) return;

      // now that we know the face is different
      // record the face in the lastFace variable
      lastFace = face;

      // this removes all display objects from the head
      // or head.removeChild(lastFace);
      head.removeAllChildren();

      // and then we add the desired face
      // based on the face parameter
      head.addChild(face);

      // CreateJS requires a stage update
      // to make any changes to the stage
      stage.update();
    }

    // TESTING FOR FACE CHANGE
    // the pressmove event fires constantly
    // as we drag the head
    // If the head is on the logo (hitting)
    // we want to set the head to happy (face1)
    // and if it is off the logo (not hitting)
    // then we want to set the head to sad (face3)
    head.on("pressmove", function() {

      // hitTestCircle returns true
      // if the shape of the logo hits a
      // a circle defined by the bounds of the head
      // read the DOCS fro more about the six different
      // types of hit tests available in ZIM
      if (zim.hitTestCircle(logo, head)) {
        show(face1); // happy
      } else {
        show(face3); // sad
      }
    });

    // ANIMATING HEAD BACK
    // when we release the head this event fires
    // our function changes the head to the warbly face
    head.on("pressup", function() {
      show(face2); // warbly

      // animate the head back to the middle of the stage
      // take 1.8 seconds to do this (note time in ms)
      // and apply an elastic ease as the motion ends
      zim.move(head, sW/2, sH/2, 1800, "elasticOut");

      // we could have changed the face back to happy
      // when the animation ends by setting a call function
      // pass a function as the next parameter after the ease
      // but elastic takes a while to settle
      // and the face should be happy sooner
      // so set a JavaScript timeOut to change earlier
      setTimeout(function() {show(face1);}, 900);
    });

    // RESIZING
    // frame gives us a resize event (and orientation event)
    // we reset the stage width and stage height variables
    // and position the logo and head in the center
    // don't forget to update the stage!
    f.on("resize", function() {
      sW = f.width;
      sH = f.height;
      logo.x = head.x = sW/2;
      logo.y = head.y = sH/2;
      stage.update();
    });

    // initial stage update when all is on stage
    stage.update();

  }); // end of assets loading function
}); // end of frame ready
 
					
CJS JS
ZIM uses CreateJS and JavaScript. Here are docs.

Object Oriented Programming (OOP) is used to model life in simulations and games. Logical people modeling life are called Philosophers - you are an honorary member of the Nodist Colony. Welcome to NODISM 

Wondering what to build? Learn how to create!
CREATIVITY EXPO 
CREATIVITY FRAMEWORK 
<script src="https://d309knd7es5f10.cloudfront.net/zim_3.js"></script>

CHAT
X