Posts Tagged ‘ZIM’

ZIM is “Better than Nothing” ??

April 10, 2015

ZIM js - free JavaScript Library of Interactive Media Modules

Had a fun time presenting ZIM (http://zimjs.com) last night at the Software Hamilton Demo Camp to an audience of 100 developers, designers, entrepreneurs, etc. in the Art Gallery of Hamilton’s Tanenbaum Pavilion.

It was one of the sweetest (in the old-fashioned sense) welcomes I’ve had where a few shouts of Dan Zen led to a growing round of applause as I was taking the stage.  It is nice to have a history of talks, the last being Droner http://droner.mobi where the audience controlled me with the multiuser app from their phones.  I still had people coming up to me thinking that my essence of being is Kitty Tartan – http://kittytartan.com – I would much prefer they take note of Tilty http://tilty.mobi and Touchy http://touchy.mobi both of which I presented at different times with the audience playing with business cards and coins with their neighbors. So from the first Demo Camp where I presented Optartic Tunnel http://opartica.com – the app that I made my spinning pleasure card with to the Keynote on Creativity and New Forms of Mobile Games http://wp.me/p9ja-8Z, Demo Camp has been a very rewarding experience.

So on taking the stage, I explained that I did not wear my turquoise fun-fur cape (or was it a bib) as I wanted the audience to take me seriously.  I was presenting ZIM which lets us build more easily on the Canvas side of HTML where we are free to dynamically draw for artistic purposes, drag, drop and hit test to make puzzles, e-learning apps and games – the traditional realm of Interactive Media.  I presented the live examples and finished with the fact that since ZIM Frame has launched… ZIM is now officially a framework.

Questions and comments were fast a fun as always!  One asked about avoiding the pitfalls of Flash interface – I claimed that I did not believe in one interface fits all of the ultra efficient consistency principle and we need room to explore as variety is the spice of life.  Other answers had me saying if security ever became an issue, we could blame HTML and another answer had me poking fun at the HTML components which are in dire need of some design love and extension.

HTML components could use an updating

My favourite part was the last question where an eccentric character in the back shouted, “How is ZIM better than WHAT?”  I asked what was what?  The audience and I puzzled and then realized we were looking for a comparison with the competition.  I hesitated a little – then said that the reason I made ZIM is that I needed what it provided and there were no other solutions that I knew of – so… I guess… ZIM is better than… nothing.  I did not realize what I was saying… just came to that conclusion from my logic. So – ZIM is better than nothing!

http://zimjs.com/ try it out and then see the HELP section for community help and discussion.

The Canvas is your World – HTML 5 Canvas

March 7, 2015

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.

ZIM Interactive Media JavaScript Modules

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

Dan Zen - Interactivity Scale

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.

zim1.2

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.

ZIMjs Documentation

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.

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 —


%d bloggers like this: