The Canvas is your World – HTML 5 Canvas

I have been making interactive media for twenty years and now I hope to convince you to try.  If you already code then I hope to convince you to try a new system.  ZIM.

In 1995, I worked in Director to make CD Roms.  In 2000, I moved to Flash to make Web games and apps.  In 2015, I moved fully to HTML 5 and in particular the canvas and JavaScript to make anything.  http://danzen.com/museum/tour.html

The HTML canvas tag allows you to dynamically manipulate pixels to draw and animate shapes.  It was the early 2000s that we got this ability in Flash and it was very exciting.  It is now very exciting in HTML where we can use free tools and publish just about everywhere.  We can also bring our experience to a very large creative community.

HTML HISTORICALLY

HTML was initially conceived as a tagging language for showing people information in a Browser.  You could also provide information through forms with text fields, etc.  DHTML (dynamic HTML) came along in the 2000s and used iFrames and layers to show new information without reloading the page (as could JavaScript through AJAX).  Simple animation of page elements with JavaScript were introduced and continue on with libraries like jQuery.  CSS (cascading style sheets) came along to allow us to style the page more efficiently and completely.

INTERACTIVE MEDIA

While making Web pages for browsing does fall under the realm of interactive media, it can be more specifically called Web design.  Interactive media is much more – see the Interactivity Scale.  Interactive media allows us to create, communicate and play – not just consume.  To make interactive media takes more than just tagging or animating – you have to code (program).  This means capturing events and using logic to determine and create what comes next.  It means providing a variety of interfaces so people can create things (applications).  It means dragging, dropping, rotating and hit tests so people can re-enact the world but in a virtual space.  These are things that were not done in traditional Web design and development (aside from maybe dragging items into a shopping cart).

ZIM

Short for Zen Interactive Modules, ZIM is a free JavaScript framework specifically for making Interactive Media. http://zimjs.com

Much of the ground work is found in a library called CreateJS written by Grant Skinner and crew.  Grant has transported years of interactive media knowledge with Flash to the HTML canvas / JavaScript world.

Remember, the Flash community (and the Director community before hand) has spent over twenty years honing the commands needed to accomplish interactive media.  There are dozens and dozens of commands that go beyond traditional HTML and JavaScript.  These have been shifted and tweaked to perfection.  Without any one of these commands, we could not easily make what we make.  I know, I have created hundreds of applications with millions of lines of award winning code – trust me.  We all owe a HUGE debt to Grant and his team for the phenomenal job they have done preserving our heritage. – Dan Zen

In a sense, CreateJS lets us code in JavaScript as we did in Flash and has even added or simplified nicely in places.  The backbone of CreateJS is EaselJS which provides us with proper object oriented display hierarchy – we can nest objects within objects (containers, shapes, bitmaps, text) and manipulate properties such as position, rotation, alpha, scale and these properties are transferred to their children.  So CreateJS takes us roughly to ground zero of Flash.

Enter ZIM.  When I was coding in Flash, I made over one hundred helper classes (a class is a bunch of code that does something and we can use it over and over).  These were created over ten years and put into packages but otherwise were a touch hodgepodge.  This time, I got to start fresh and planned from the start to let others use and understand these classes.  Half of them are now in ZIM version 1.  The other half, which are for advanced interfaces like gesture and multiuser will be launched as ZIM version 2.  Certainly, there is a lot that can be done with ZIM version 1.

USING ZIM

You can code with any text editor but it is best if you have syntax coloring so you can see the different parts of the code.  Sublime, TextPad, NotePad++, DreamWeaver, etc.

Start with a ZIM Template – perhaps the basic template.  Copy the source code into a file and name it sample.html.  Now drop the file onto a Web browser – Firefox, Chrome, IE, Safari.  You should see a big button and if you click it, it will go to ZIMjs.  Look at the code and see if you can make sense of it.

On ZIMjs, there is information about the functions and classes that are available.  There is example code and you can try out the examples.  There is also a Docs section that tells you what is available, what parameters you can provide, and what properties, methods and events are available.

You can start cutting and pasting bits of the examples at a time into your sample.html and see if you can make things work.

You will also need to know how CreateJS works so you can draw circles, rectangles, lines, and use bitmaps (images), sound and animation.  You can use tutorials, etc.

You will also need to know JavaScript for the programming logic parts such as variables, functions, conditionals, loops, arrays and objects.  Also basic number and string manipulations.  Eventually, you will want to make your own classes as well.

Read about coding here: Dan Zen Museum Coding Tour.

Please try out ZIM and if you need a hand, there is the CreateJS Facebook Group where we answer questions about CreateJS and ZIM.

I can tell you now, you are as close as you have ever come to making being able to make interactive media.  You need no huge application, no instals, etc.  And you can package your code up into a mobile app in less than an hour once you know what you are doing – all free (aside from the $100 dev cost on Apple, the $25 dev cost on Android and $20 for Windows – free for BB).  Just copy that template file and start poking around.

If you want formal training, I teach at Sheridan College in the one-year post grad diploma program http://imm.sheridanc.on.ca – we have a great learning environment.  Here are some open house photos.

— 15 —

Tags: coding, CraeteJS, danzen, interactive, interactive media, javascript, programming, ZIM