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.
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.
3. Set the ACTIONEVENT constant to click or mousedown at the start of your code. The default is mousedown which responds better on mobile.
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
- Manually animate objects
- Perform hit tests
- Resize Squiggles and Blobs
- Control a custom cursor
ZIM Control Examples
- Accessibility - Screen Reader access to components EXAMPLE
- Swipe - an event for touch screens EXAMPLE
- Pages, Layout, HotSpots, Grids and Guides EXAMPLE
- TransformManager - save multiple transforms EXAMPLE
- Parallax - 3D effect with mouse or scroll EXAMPLE
- Scroller, Dynamo and Accellerator EXAMPLE
- Swiper - control properties with swiping EXAMPLE
- MotionController - Keyboard, GamePad and Mouse controls EXAMPLE
- Emitter - particle emitter EXAMPLE
- SoundWave - animate to sound frequency EXAMPLE
- Portal - travel in style! EXAMPLE
- VR - side-by-side virtual reality EXAMPLE
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.
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!