ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 4TH Launches with new Display Objects, Methods and Properties for HTML Canvas Coding in JavaScript and CreateJS

blog4

WHAT’S NEW

ZIM – at http://zimjs.com has launched version 4 called ZIM 4TH with a new site and dramatically updated docs. The new version introduces ZIM basic display objects that extend the matching CreateJS display objects:

  • ZIM Container(width, height)
  • ZIM Shape(width, height)
  • ZIM Bitmap()
  • ZIM Sprite(spritesheet)
  • ZIM MovieClip()

All these receive the ZIM Create Module functions as methods:

drag() noDrag() dragRect() setSwipe()
hitTestPoint() hitTestReg() hitTestRect()
hitTestCircle() hitTestBounds() hitTestGrid()
boundsToGlobal()
move() animate()
scale() scaleTo() fit()
centerReg() center()
outline() place() expand() mask()

They also receive read-only width and height properties as well as, of course, all the CreateJS methods, properties and events as outlined in the CreateJS Container Docs for example.

All the ZIM Build Module shapes and components now extend the ZIM Container.  So all the following objects also receive the above methods and properties:

Circle() Rectangle() Triangle()
Label() Button() CheckBox() RadioButtons()
Pane() Window() Waiter() Indicator()
Stepper() Slider() Dial() Tabs()
Pad() ColorPicker()

EXAMPLE

// traditional center and drag functions
var circle = new zim.Circle(50, "red");
zim.center(circle, stage);
zim.drag(circle);

// new ZIM 4TH center and drag methods
var circle = new zim.Circle(50, "red");
circle.center(stage);
circle.drag();

// ZIM DUO works as expected with ZIM 4TH
zim.drag({obj:circle, slide:true});  // becomes:
circle.drag({slide:true});

COMPATIBILITY

All the Create Module functions work still the same way but using the methods is shorter.  The launch is backwards compatible so all past actions with ZIM will work aside from the flattening of the move() and animate() functions as follows:  the loop and rewind properties have been taken out of the props parameter and added as regular parameters.  This has changed the move signature to the following (animate is same except there is an obj parameter rather than x and y):

obj.move(x, y, time, ease, call, params, wait,
loop, loopCount, loopWait,
rewind, rewindWait, rewindCall, rewindParams,
sequence, sequenceCall, sequenceParams,
props, css);

This is a long signature but with ZIM DUO it makes more sense.  Note that the props parameter is still there for backwards ZIM DUO compatibility but the traditional signature has changed.  A css parameter has been added that works in conjunction with the CreateJS CSS plugin to animate DOM tags via CSS (see ZIM docs).

EXAMPLE

// this will continually expand and contract the circle
circle.animate({obj:{scale:2}, loop:true, rewind:true});

One more small change to compatibility is that the Frame class now has a color parameter inserted after height to change the backing color of the canvas – see ZIM Docs.

ZIM SITE

There is a new ZIM 4TH site that features two interactive areas.  The first is the logo which animates and allows you to drag the corners of the words.  When pressing the play button it lets you make abstract art from the ZIM 4TH logo.

screens1

Down a bit is the code area with left and right arrows.  Pressing these causes an explosion – is it bigger than the 4TH of July?  Probably not – but does make use of the new ZIM Physics module (not included in the ZIM minified file).

blogexplode

The new ZIM 4TH site has a ZIM ZIP link that includes a readme.txt file to get started and each of the ZIM Frame Templates.

The ZIM TRI, ZIM DUO / ONE sites are linked to for the archives.  NEWS will be presented in the blog so check here often – and we will cross post on Twitter and Facebook.

ZIM DOCS

The ZIM Docs has been given a major overhaul.  Every entry is now consistently titled and given a description, parameter definitions, methods, properties, events and return values where applicable.  AND… there are EXAMPLES for every entry.

blogdocs

There is a new SEARCH bar where you type the name of a function or class and hit ENTER or the GO button.  Partial names (from the start of the function) are good and you can press ENTER (or use GO) multiple times to go to the next match.  For instance, typing “hit” (case insensitive) will let you progress to matching entries of all the hitTests.  This closes all entries and opens the current matching entry.

Each entry has a code VIEW button at the bottom so you can see the ZIM code for the entry.  This pops up a window which you can close when you are done reading.

CONCLUSION AND THE FUTURE

ZIM has settled.  There will be new components on the way – perhaps some menus.  There will be new advanced interactivity modules like the ZIM Sockets module -these could be in motion capture, sound animation, etc.

The main structure of ZIM is now seen with ZIM DUO really helping the efficiency and flexibility of object creation.  The addition of the basic display objects with the ZIM functions as methods has solidified framework almost completely abstracting the underlying CreateJS.

The documentation has come along way with respect to consistency.  Looking at it from someone who does not know CreateJS, there is still room for improvement as a great number of CreateJS methods, properties and events are not even mentioned.  Rather than repeating the CreateJS documentation, better cross-referencing should be put into place.

ZIM Bits is approaching the scheduled 64 Bits in a year.  This shows the breadth of ZIM and CreateJS.  Work blending with Physics will be on-going and proper launching and documentation of the Physics module will come along.

The Sultans of ZIM are a new group that will help create examples and provide outreach with perhaps KickStarter campaigns, etc. to get more people using ZIM.  The addition of ZIM to the official CreateJS page has been helpful with respect to traffic and credibility.

We leave you with a list of countries that have visited the ZIM site now averaging about 5000 views a month:  Argentina | Australia | Austria | Bangladesh | Belgium | Bolivia | Brazil | Bulgaria | Canada | Colombia | Denmark | Ecuador | France | Germany | Guatemala | Haiti | Hong Kong | Hungary | India | Italy | Japan | Kenya | Korea | Luxembourg | Mexico | Netherlands | Norway | Pakistan | Palestine | Peru | Poland | Portugal | Romania | Russia | Singapore | Slovenia | South Africa | Thailand | Turkey | Ukraine | United Kingdom | United States | Uzbekistan | Venezuela | Vietnam

Get creative!  We are here to help – TRI ZIM and go ZIM 4TH!

Dan Zen

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 12, 2016 by in design, interactive media, javascript, launch and tagged , , , , , , , , , , .
%d bloggers like this: