ZIM - Code and Learn Coding with ZIM for JavaScript and HTML Canvas with CreateJS


Practice with ZIM CODE see the Learn Page for tutorials


Lesson 08 - Controls


In ZIM, Controls are generally objects without a body as opposed to components such as Buttons, Sliders and Dials which do have a body. Many controls act on bodies that already exist.

Controls help you layout pages, go from page to page, control motion with keys, swipes, gamepads and mouse, make parallax, scroll backgrounds and much more!

Let's take a look at REFERENCE and PRACTICE sections for controls!


ZIM has THREE constants at the start of the Controls module.

1. Set the ANIMATE constant to false at the start of your code to turn off all animations. See VID. This can be handy when building to not have to wait for animations as you are testing. Use this along with the from:true parameter in animate() for better results.

// ZIM ANIMATE ANIMATE = false; // this turns off the animations new Circle().center().animate({obj:{scale:0}, from:true});

2. Set the OPTIMIZE constant to true to stop components from updating stage. On mobile, multiple stage updates can slow the app down. For us to see components work - like a slider sliding - the component itself updates the stage. However, we must also add a stage update in the component event to see our changes. That makes TWO updates. A solution is, when you are done coding set OPTIMIZE to true at the start of your code.

// ZIM OPTIMIZE OPTIMIZE = true; // components will not update stage var circle = new Circle().center().mov(0,-100); var slider = new Slider(1,0).center(); slider.on("change", function() { circle.alpha = slider.currentValue; stage.update(); // we update the stage });

3. Set the ACTIONEVENT constant to click or mousedown at the start of your code. The default is mousedown which responds better on mobile.

// ZIM ACTIONEVENT ACTIONEVENT = "click"; var tabs = new Tabs().center(); tabs.on("change", function() { zog("change is registered on click"); });

Ticker ► ZIM Bits - Ticker Engine
The ZIM Ticker lets you run code at the framerate (default 60fps desktop and 30fps mobile). This is different than a loop. A loop runs so fast that the display cannot be changed. The Ticker, on the other hand, will update the stage.

The ZIM Ticker is used internally by zim functions like animate(), drag(), Scroller() and Parallax(). There will only ever be a single stage.update() after all ticker functions (including functions you add) have run. This ensures that we are not running unecessary updates.

Uses for Ticker

// Ticker var circle = new Circle().center(); Ticker.add(function() { circle.x += 2; // animate circle to right });

// Removing Ticker function var circle = new Circle().center(); var moveCircle = Ticker.add(function() { circle.x += 2; // animate circle to right }); timeout(1000, function() { Ticker.remove(moveCircle); });

Main Controls ► ZIM Docs - Controls
See the Docs for examples and instructions. We will provide some links to references below and practice some of the controls in the next section.

ZIM Control Examples

Let's practice some control!


Controls are often more complicated to set up than previous examples. The example links above are commented for further guidance. There are also the Docs for intructions and examples.

1 Constants and Ticker Show
2 Controls Show


We have examined all that is needed to make an app, game, puzzle, art and more. We have been using JavaScript for the HTML Canvas - along with the ZIM framework powered by CreateJS.

We have been building on the CreateJS BOM which is more suitable for Interactive Media but the programming basics can be also be used with the HTML DOM for traditional Web Development such as Web pages.

We hope that you have enjoyed using ZIM and you continue to do so. There are all sorts of tutorials in the Learn section and sample code in the Examples section. Do not forget the Tips for the latest way to code! All the best!

LESSON 07 - Templates and Building