
ZIM WORKSHOPS - http://zimjs.com/learn/

Three Hour CORE Workshop


INTRODUCTION ---------------------------------

The goal of each workshop is to teach the core elements of the topic.
Each workshop contains:

0. This instruction.txt page for the workshop.
1. A workshop_topic.zip file to give to the students with all they need for the workshop.
2. A teacher folder with sample code (topic1.html, topic2.html, etc.) to build with students.
3. A more finished project (topic_final.html) that you can give learners at the end.
4. An assets folder for the projects - also in the student ZIP.
5. A resources folder with docs, libraries and zim templates - also in student ZIP.
6. An index.html page that points to teacher/steps.html - also in student ZIP.


TOPIC ----------------------------------------

A S T E R O I D S - Create a game of skill with image, sound, animation and score.

Add assets like images, spritesheets and sound
and control them with keyboard, mouse and touch events.
Animate objects in random directions, shoot and perform hit tests.
Make asteroids explode and keep score.
Make labels, indicators and panes for display interfaces
Keep track of time and lives and handle game end and restart


TECHNIQUES --------------------------------------

Canvas Template with Stage
Load assets like images, sounds and sprite sheets
Looping and timeouts for efficiency
Keyboard and mouse events
Animation, randomness, Tickers and hitTests
Line drawing and masking
Logic to control the flow of the game
Variables, Conditionals, Functions, Loops, Arrays, Objects
Components like labels, indicators and panes



PREREQUISITES AND REQUIREMENTS ---------------

1. This is a mid level workshops so at least one of the first three workshops is recommended.
These include Canvas, Coding and Game - Canvas will help with the ZIM environment

2. A computer with a browser and a text editor (syntax coloring helpful - Atom is good).
Internet is not required if the resources folder can be distributed by thumb drive, etc.

3. A projector and screen is probably necessary to show code if there are multiple students.
Make sure the code is large to easily see periods, commas, colons, semi-colons, etc.
And when students arrive make sure their code is big enough for them to see.  CTRL + -


PREPARATION -------------------------------------

Refer the students to the "What IZ" and "Capture" tutorials.
They can take a look through ZIM Bits as well to help prepare.

Post the index.html, the teacher/steps.html and the workshop_topic.zip.
The index page redirects to the steps page which has a link to the zip.
Test the links.  You can give the link to the index to the students.
Or prepare a Thumb Drive with the student ZIP to distribute.

In the teacher/topic folder are numbered project files representing stages of building.
There are comments in the code to say what and why we are doing things.
Read over the comments and practice building the app at least once before teaching.
Print the source and use a highlighter to help you keep track while teaching.

**** This will be a fairly tight workshop for three hours.
Try to get coding as soon as you can and keep setup and intro time to a minimum
Estimated times are (5-10 minute breaks included):
60 minutes canvas1.html
60 minutes canvas2.html
60 minutes canvas3.html


INSTRUCTIONS ------------------------------------

Introduce yourself and have the students briefly meet one another.

Introduce the workshop and topic.  Introduce ZIM.

ZIM is a JavaScript framework to make interactive media on the HTML canvas.
ZIM is powered by CreateJS which is a library to make coding on the canvas easier.

Show learners the steps page with a link to their workshop ZIP file.
Or distribute the zip with a thumb drive.

Follow the steps to build.

When the workshop is done, show learners the resources links.
You are also welcome to show / distribute the asteroids_final.html app.

All the best,


Inventor Dan Zen
http://danzen.com - Museum of Interactive Works
