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)
 
						

// 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