ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM Learn Launches Three Workshops for HTML Canvas, JavaScript and CreateJS

ZIM has launched the first set of three-hour workshops for learning to code on the HTML Canvas in JavaScript.  Each workshops has a ZIP file for teachers with all the code and instructions as well as a ZIP file for students with the steps to follow.

C A N V A S – Create on the HTML Canvas – learn the basics of Interactive Media.

workshopcanvas

Add shapes, images and text to a stage and set properties like position, rotation, scale and alpha.  Nest objects in Containers. Drag content and apply mouse interactivity. Use components like buttons and sliders to control a small application including sound and animation.

TECHNIQUES:
  • Canvas Template with Stage
  • Shapes and Registration Points
  • Properties like x, y, rotation, scale and alpha
  • Containers and Nesting
  • Dragging and Dropping
  • Events and Targets
  • Images and Sounds
  • Components like Buttons and Sliders

C O D I N G – Learn the basics of coding with JavaScript and the Canvas.

workshopcoding

JavaScript is the popular and powerful programming language of the Web and Apps. We will learn the basics of coding such as variables, conditionals, functions, random numbers, loops, arrays, objects, events and more as time permits. These techniques are common across many languages giving you transferable skills.

TECHNIQUES
  • Script Tags in HTML
  • Programming Syntax
  • Expressions, Operators and Statements
  • Variables and Concatenation
  • Objects, Properties and Methods
  • Random Numbers
  • Conditionals and Loops
  • Arrays and Object Literals

G A M E – Make a game to stop circles from hitting one another as they grow.

workshopgame

The player sees colored circles growing randomly on the stage. They have to click the circles to make them smaller. If the circles touch they stop growing. If all the circles have stopped growing then the game is over. The score is how long the player has played.

TECHNIQUES

  • Shapes (with random colors)
  • Tiling (looping)
  • Timers (intervals)
  • Animation
  • HitTests
  • Interaction (click / mousedown)
  • Sound
  • Scoring (text fields)
  • Toggle Buttons

ZIM

ZIM at http://zimjs.com is a free JavaScript library for making Interactive Media on the HTML Canvas with easy shapes, drag and drop, hit tests, components like buttons, sliders, dials and more powered by the robust CreateJS.

NOTE: The workshops are set up for Teachers – if you would like to learn ZIM then please see the many Tutorials including the What IZ? series, ZIM Capture and ZIM Bits – totaling over 150 tutorials broken into Basic, Mid and Advanced at ZIM Learn.

All the best,

Dan Zen

-2016-

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