ZIM is “Better than Nothing” ??

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.

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

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 —

Flash is Finished (but not how you have been brainwashed to believe)

Flash Authoring Tool with Asset Tools and Management

I admire the human instinct to explore – to want to do new things.  So… perhaps it is no wonder that the interactive development world has embraced this challenge of HCJ – HTML, CSS and JavaScript under the popular guise of HTML 5 and proudly open source for all to contribute.   Flash on the other hand has been honed for roughly 15 years into a tool with synergy of parts organized by a hired team of brilliant people with the focused purpose to make an application for building advanced interactivity.

In my mind, Flash is finished – as in COMPLETE.  In recent years, the improvements that the Adobe engineering team were telling us, we could not even really understand.  Concurrency… and other really high level tweaks to make it run as fast as possible has been the focus.   Developer conferences were becoming stale – there was nothing really new and exciting – new ended at getting access to the GPU and mobile devices through AIR.  One final wish for Flash would be to integrate the GPU so we do not have to think about it – like the Starling framework.

So… can we perhaps get it in our head that the lack of excitement for Flash is not because it is dead but because it no longer needs to be changed.  Flash is a mature system.  As such, can we please show it some respect – the whole world seems to want to kill it – is that what you do with adults after they stop growing?

On the HTML side, we are still adding new things.  We got three important tags – canvas, audio and video.  When Flash got bitmap access (canvas) in 2003 – yes, ten years ago, we developers felt the amazing excitement.  It was followed shortly with a dramatic upgrade to ActionScript – moving to AS3 a generation beyond the current JavaScript.  These were exciting changes.  The changes we are excited about on the HTML side are for things that Flash had years and years ago – I can’t even remember Flash without sound and video.

While HTML is still changing, so too is the culture of Web developers.  Hopefully they will advance past the mindset of just presenting information – and this whole adaptive design hoopla – we have been doing adaptive design in Flash forever.  That is what vector is about – that is a main strength of Flash.  Flash has always been able to scale in multiple ways – I have made many projects that implement adaptable design.  Anyway… hopefully developers will look past this to building applications where users can do things and create things.  This does not mean a form.  This often involves several elements that Web developers are still getting used to.

1. Hit Tests
2. Dragging and dropping
3. Resizing and rotating
4. Drawing with shapes and curves

If you ask any Web developer how many times they have done any of these you would probably get that they have dragged and dropped a few times.  I, being an interactive developer, have done all of these things hundreds if not thousands of times.

In Flash, we have been given 67 packages holding 757 classes although we do not use all of them and many just hold constants.  Perhaps we use about 50-100 classes regularly. Our main interactive container class, the Sprite has 68 events available, 53 properties and 39 methods.  You can see them here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Sprite.html  Some might say that this is bloat.  Well… there have been many things pruned from Flash as well over the years – including the current way that JavaScript handles classes.  Flash is so well organized that any excess does not really get in the way.  You import the classes you need – and it is nice to have what you need.

AS3 Packages, Classes and Sprite Example.

I will continue to develop my Web and Mobile apps in Flash.  If I need a Web app for mobile browser then I will use HCJ.  I encourage all former Flash developers to use and recommend the right tool for the job.  I also encourage you to help develop HCJ into a right tool.  But I certainly do not encourage you to say Flash is dead or to recommend to co-workers, clients and upcoming developers not to use Flash.  Because I can guarantee you that in Flash we can build faster and more concisely than HTML 5 developers when it comes to advanced interaction.

Dan.

PS.

View the source of what I needed to do to get dragging to work in HTML.  I looked for almost a day to get a drag and drop script that worked across all platforms.  In the end, I chose an older script and modified it with the help of an expert in HTML 5 to handle mobile.  http://www.danzen.com/realmstar/drag-drop-custom.js – is 789 lines long to drag and drop.  Well… Flash is startDrag() and stopDrag().

This brings us to the topic of Libraries and Frameworks. JQuery and JQuery Mobile have have drag and drop solutions – I could not get them to work but I don’t currently do jQuery so that could be why.  CreateJS has a solution and I have since gotten it to work.  SentiaTouch probably does as well, etc.  All these different frameworks provide their solution with their syntax.  HTML is trying to implement drag and drop if they have not already – I think I read something about it.  Well… I tell you, it is time consuming to keep up with all this stuff and be swapping frameworks every month.  Perhaps it will settle but how will this look?  Do Web developers want all the solutions to go into HCJ?  Are the framework developers going to be happy with this as they see their framework implemented “natively” and become poly-fill for old browsers – hopefully.  And will this end version – converging to perfection be called bloated.  Will it take the same resources Flash?  Most likely – that is if it ever gets there.

In my mind, we need both open source and closed source.  You cannot design by committee – it gives you grey – committees and open source are similar.  Agile groups or even individuals are where ideas and advancement come from.  It helps for there to be a reward – such as money to spur such innovation.  Of course many innovators will donate their work to open source, it is just that for the most part, I see innovation coming from closed source – so do not try and kill it by smearing it and making it taboo – or, for instance, taking away browser plug ins.  It is most ridiculous for an open source community to say the only scripting in Web browsers will be JavaScript.  Can you hear yourselves?

Processing is Dead! All Hail JavaScript!

Processing is Dead!  All Hail JavaScript and HTML5!

ActionScript is Dead!  All Hail JavaScript and HTML5!

Java is Dead!  All Hail JavaScript and HTML5!

Objective C is Dead! All Hail JavaScript and HTML5!

C++ is Dead! All Hail JavaScript and HTML5!

C# is Dead! All Hail JavaScript and HTML5!

Ruby is Dead! All Hail JavaScript and HTML5!

Python is Dead! All Hail JavaScript and HTML5!

PHP is Dead! All Hail JavaScript and HTML5!

Hopefully you detect my bitterness and disappointment with the open source world, the tech media and the marketing industry in their frenzy to adopt HTML5 as supreme leader and shun perfectly good programming environments.

My experience is with ActionScript and Flash – a mature authoring environment which allows developers to make once and publish anywhere.  Anywhere that is until Apple came along an banned it from the mobile Web with lame self-serving excuses.  What followed was nothing short of persecution.  https://danzen.wordpress.com/2013/02/22/apple-should-be-punished-for-attempting-to-kill-browser-plugins/

Processing is a spin-off of Java with a wonderful artist following to make cool things.  Well… watch out… once people realize that you can do this in JavaScript and HTML5 – maybe you will have the horde against you too.

Most of these languages are server side languages and back-end coders may think they are safe because JavaScript is a front end programming language… but there is server-side JavaScript too.

My point is – there does not have to be nor should there be one programming language or development stack.  Why we are letting the Web be controlled by one system is beyond me.  Countless Marketing folks, Developers and Designers I have talked to in the field are saying Flash is dead – Plugins are dead.  Stop trying to kill Flash with your words and start trying to support it.

My apologies for the harsh metaphor (not as harsh now that I have taken out the swastika from the picture).  Of course, nothing is worse than human persecution.  But what some of you with power of influence are doing when declaring Flash dead or accepting the demise of the Plugin is unjust and truly not good for our culture.  Please read https://danzen.wordpress.com/2013/02/22/apple-should-be-punished-for-attempting-to-kill-browser-plugins/.

Flash and HCJ (HTML, CSS and JavaScript)

In this post, I will compare Adobe Flash and HCJ (a handy acronym for HTML, CSS and JavaScript).

QUICK CREDENTIAL CHECK

I have built hundreds of features and sites in Flash and HCJ over 15 years of creation at http://danzen.com for which I received the Canadian New Media Awards Programmer of the Year.  I coordinate the Sheridan Interactive Multimedia Post Grad Program http://imm.sheridanc.on.ca for which I received the Canadian New Media Educator of the Year.  I also explore the philosophical side of coding at http://nodism.org.

PURPOSE OF POST

The purpose of this post is to help clarify what these technologies do to better guide our direction.  In a more specific context, there are a lot of people bashing Flash and I would like to put this in perspective.

  HCJ SUMMARY

HTML, CSS and JavaScript is an open source system to display Web pages and mobile Web apps

• HTML is a tagging language that identifies and organizes the elements of the page.
• CSS defines styles (look and position) that can be applied to the elements of the page.
  
• JavaScript is a programming language based on ECMA Script that can work with HTML elements and styles.

  FLASH SUMMARY

Flash is an application to make features that run in a browser plugin or in the AIR environment for desktop and mobile Apps

• The application has tools to build visual assets like vector illustrations, animations, text, images, sound and video.
• Flash has the ActionScript programming language which is based on ECMA Script (latest Object Oriented).
• Flash also supports CSS for styling.

NOTE:
Both systems access server side scripting just fine to store and retrieve data or to accomplish asynchronous loading like AJAX.  This was a hallmark of Flash ten years ago.  Flash also has Flash Builder and the Flex framework which is a tag based approach that publishes a Flash file.  The Flash compile code is open source as is the Flash code that people make if they choose.  For instance, my http://flashfeathers.com series of advanced interfaces is open source. Regardless, open source should not kill closed source.

COMPARISON

Both systems have the same potential.  The main difference is in culture and in tooling.

Over the last ten plus years, creators of Flash and creators using Flash have been in a symbiotic relationship to hone the tooling of Flash specifically for making enhanced interactive features (see INTERACTIVITY SCALE post). This means that there are  hundreds of media specific classes (code) with thousands of properties, methods and events tailored to interacting with the media.  Everything we need has been carefully catered to (or filtered out), organized, tested and applied.

HCJ, on the other hand, has been used primarily for display and collection of information.  So culturally, there is a ten year gap – even in basic functionality like rotation, let alone the culture of dragging, collision, keyboard commands, bitmap control, sound and video manipulation, filters, 3D, etc.  I say culturally, because some of these things were possible, just not really sought after.  There might be hundreds of hit tests done in HCJ and millions done in Flash.

Culturally, over the last few years (and particularly since the iOS no-Flash-in-Browser “NFIB” situation) there have been steps to move HCJ in the direction of enhanced interactive features. As mentioned, the potential is there.  People are building  libraries – a famous one being JQuery, and media is getting tag support with HTML 5, etc.

Tools are being built – even by Adobe, especially by Adobe, to support enhanced interactive features in the HCJ system.  Tool makers have the benefit of seeing Flash grow and will no doubt catch up to where Flash is now in a few years.  Of course, in a few years, Flash will have continued to progress as it is doing in the direction of 3D.

ANALYSIS

We are again at a time where Consumption and Creation have been separated.  In the 90’s we consumed online and created on our desktop.  In the 00’s, we did both on the Web although the creation pattern has always lagged far behind the consumption pattern. In the 10’s, with the arrival of mobile devices and in particular the success and arrangement of the iOS devices, we have the Web for consuming stuff and the Apps for creating stuff.  Communication sits between or can be done on both sides.

Consumption with browsers and creation with apps is a natural split as indicated by the names – browser and apps. As an application builder, I do not mind the the split because we have a way to get paid for the apps!  Try getting paid for a Web app – I have tried for 15 years with little success.

Marketing loves the split too – because they get to show authoritative content to the viewer.  Unfortunately, there has been a throw-back to authoritative content and I think they have forgotten the power of user created content – rotating a picture of a car in 3D is not user created content and only scratches at the surface of engagement.

PREDICTION

The split between consumption on the Web and creation with Apps will hang around for a while **.  There will be some enhanced interactive sites with the HCJ system but for the most part, people will think that fancy animation is enhanced interactivity and they will be satisfied consuming. The HCJ system will also be used to make apps.  Most of these apps will be information apps – as in, “it is on the Web but we wanted a presence in the App store”.  Other HCJ apps may rival Flash and Native apps in enhanced interactivity but if the Adobe Flash team and community does its job, Flash will keep ahead of the curve – the curve that they created in enhanced interactivity.  Props to Flash.

NOTE:
Flash now uses hardware acceleration to help with issues of slowness on macs, etc. in video playing and 3D and more mobile functionality is available so there has been (and will be) improvements in speed and functionality.

CONCERNS AND CONCLUSION

The Flash community is very open and creative – some have gone on to help HCJ with their experience.  What has not been very helpful is calling Flash (or letting Flash be called) taboo because clients can’t get their message on iOS Web.  Marketing agencies should offer (or continue to offer) engaging mobile APPS as a further opportunity to build brand experience.  Right now, for the most part, there is no better and efficient way to create enhanced interactive experiences across the mobile platforms than Flash and Flash Builder – I guarantee it.  Adobe is doing a wonderful job with the tools – just perhaps not as good a job as Apple with the hype.

Dan Zen – 2011

** It is possible that we will sway away from the Web as an all encompassing place for everything.  The Web will act like a promotional place for offline and online products. More and more products will access the Internet directly like multiuser game “clients”.  This will happen more so if we kill plugin architecture – either that or everyone will have their own browser (Google has already started with Chrome and its custom extensions).   If you are thinking of going this way – Adobe AIR allows you to make your own Web browser – similar to Steam for instance.

FINAL NOTE:
There have been generalizations made in this post – to go through all the specifics would have been lengthy.

-11-