ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM 6.5.0 Launches with AudioSprite Support for #Canvas, #JavaScript, #CreateJS and #ZIMjs

audiosprite

ZIM 6.5.0 at http://zimjs.com has launched with support for AudioSprites.  Here is an example: http://zimjs.com/audiosprite/

AudioSprites let you load a single audio file with multiple sounds inside.  There is an accompanying data object that says what the sounds are, what time they start and when they end (or their duration, depending on the format).   ZIM loads the AudioSprite in the the familiar loadAssets() method of the Frame.  The loading is handled behind the scene with CreateJS AudioSprite technology – so again, big thanks to CreateJS.

var zimAudioSpriteData = {
  src:"audiosprite.mp3",
  audioSprite:[
    // [id, startime(s), endtime(s)]
    ['blackball', 1, 2.5],
    ['bounce', 3.5, 4]
  ]
}
frame.loadAssets(zimAudioSpriteData, "assets/");
frame.on("load", function() {
  frame.asset("bounce").play();
});

ZIM supports three formats for the data.

  1. The ZIM AudioSprite format above.
  2. The CreateJS AudioSprite format from their docs.
  3. The Tonistiigi format from their AudioSprite tool.

Here is an example of loading in a Tonistiigi JSON file: http://zimjs.com/audiosprite/import.html  See the ZIM DOCS for more information (scroll to loadAssets()).

BITMAP AND GRADIENT FILLS

Bitmap, linear gradient and radial gradient fills have been added to all ZIM shapes – Rectangle, Circle, Triangle and Blob on both the fill and the stroke of the shapes using the colorCommand and the borderColorCommand properties after creation of the shape.

gradient

Bitmap Fill:

frame.loadAssets("icon.png");
frame.on("complete", function() {
  var rect = new zim.Rectangle(200,  100).center(stage);
  rect.colorCommand.bitmap(frame.asset("icon.png").image);
  stage.update();
});

Gradient Fills:

var blob = new Blob().center(stage);
 blob.colorCommand.linearGradient(
  [frame.green, frame.blue ,frame.green],
  [.2, .5, .8], -blob.width/2, 0, blob.width/2, 0
);

var circle = new Circle(100).addTo(stage).pos(800,200);
 circle.colorCommand.radialGradient(
  [frame.yellow,frame.green], [0, .7], 0, 0, 50, 0, 0, 100
);

See the ZIM Docs under the various shapes in the DISPLAY module.  Also see the UPDATES at http://zimjs.com/updates.html for more changes!

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

 

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

Information

This entry was posted on November 5, 2017 by in design, interactive media, javascript, launch and tagged , , , , , , , , .
Advertisements

Categories

%d bloggers like this: