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.
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.
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).
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.
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.
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 —