ZIM 10.9.0 Launches with Bind and Flare for the JavaScript Canvas

ZIM 10.9.0 has launched – another huge launch just dying to be ZIM LEV (11). But we are doing our best to keep ZIM at TEN.

BIND

ZIM now supports binding on any Object. Binding lets you set a connection to localStorage, GET or POST and then bind properties to and/or from this connection. The bind object’s from(), to() or toLock() methods can be called to send or receive data. There are filters, callbacks, extra and master settings. See the ZIM Docs, the Learn JavaScript videos and the source for TOWER TALK.

FLARE

Flare is a handy shape inspired by car tail lights.  It lets you make flared rectangles joined together if desired.  There are also MultiFlare and FlareBox classes.  These overlap Flares and place them around a box to use on Button backgrounds for instance.  See the ROCKET example for ideas!

OTHER UPDATES

There are a slew of other important updates – see https://zimjs.com/updates.html – here is an excerpt:

AJAX
ZIM has an internal Ajax class with get(), post() and put() methods
This is very easy to use and examples are provided
ZIM async() can still be used to get around security/CORS issues

LEVEL
https://zimjs.com/ten/bind.html - note the level is stored as well
ZIM DisplayObjects now have a level property to get and set
This just returns the parent getChildIndex() and calls the parent setChildIndex()
A level of higher than numChildren-1 will be set to numChildren-1
A level of lower than 0 will be set to 0

SPECIAL COLORS - IMPROVEMENT
https://zimjs.com/ten/flare.html
ZIM now has GradientColor, RadialColor and BitmapColor available as colors
These can be used anywhere a color is applied to a ZIM shape or component.
new Circle(100, new RadialColor([blue,green],[0,1], 0,0,100, 0,0,0)).center();
and they can be assigned after as a color or borderColor property, etc.
ADDED mist and fog colors #bbb and #aaa - between light and silver

NOTE: for a ZIM Shape() apply these the old way with:
lf()	beginLinearGradientFill
rf()	beginRadialGradientFill
bf()	beginBitmapFill
ls()	beginLinearGradientStroke
rs()	beginRadialGradientStroke
bs()	beginBitmapStroke

SERIES - IMPROVEMENT
the series() function has been really handy so we have give it some more options.
for instance, start at 3, reverse and don't go past 0 (or length-1 if not reverse):
var colors = series(0, 1, 2, 3, 4).jump(3).reverse().constrain();
Here are the new chainable methods and there is also an index property (same as jump)
step(num) - num defaults to 1 - the number of items to move the index - or use index property
jump(index) - jump to an index but do not run it - the next call to the series will run here
reverse(boolean) - boolean defaults to true - reverses direction - or pass in false to cancel reverse
bounce(boolean) - boolean defaults to true - back and forth between 0 and length-1 - or pass in false to cancel bounce
constrain(boolean) - boolean defaults to true - keeps index between 0 and length-1 - or pass in false to cancel constrain

FAST FRAME
It is recommended to use a ZIM Frame or if using Adobe Animate to use the ZIM Shim
but if you are just wanting to use some ZIM features and are working primarily with CreateJS
or legacy CreateJS code - then just call fastFrame() before using ZIM code.
Pass the CreateJS namespace and the current stage into fastFrame().
fastFrame() will create and return a very light placeholder frame as a zimDefaultFrame
and will handle various scaling settings due to ZIM Retina.

WARNING COLORS
zogy() has been used for all ZIM warning colors
ZIM warnings can be turned off by setting zon = false before loading ZIM.

CREATEJS - IMPROVEMENT
CreateJS 1.3.0 is available on the ZIM CDN https://zimjs.org/cdn/1.3.0/createjs.js (and createjs_doc.js)
This has fairly deep adjustments to mouse position, localToGlobal, globalToLocal, hitArea, mask and cursor.
Generally the change relate to scaling the stage for the window devicePixelRatio
There is a createjs.stageTransformable property set to true - this means the adjustments have already been made
this allows us in ZIM to either make the adjustments or not - and avoid a double adjustment
This update is part of a larger directive to maintaining CreateJS
We have started a Slack team and are discussing a path forward with the CreateJS team.
Message Dan Zen on the ZIM Slack at https://zimjs.com/slack if you are interested in getting involved

GENERAL
bot() and top() fix to still return obj for chaining if not yet added to stage
Adjusted talk() on Accessibility to read message only once on NVDA - thanks Nathan IMPROVEMENT
Label outline has been adjusted to align properly - thanks Racheli Golan for the guidance IMPROVEMENT
Label outline property has been removed BREAK - there still is the outlineLabel property to the CreateJS Text outline
The outline property was a container for adjusting the outline - now that it is fixed, it is not in a container

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

• LEARN tutorials on how to start and code in ZIM
• CODE ZIM Frame template and code context
• DOCS the objects and commands all defined
• NEWS latest features and articles
• ABOUT features, applications, archives, reviews, etc.
• EXAMPLES sample projects created in ZIM
• CODEPEN Topic with over 100 example pens