How to create HTML animations and interactive experiences on desktop and mobile browsers
After the bad news about Adobe Flash of november 2011, as Flash/Flex developer I thought a lot about the (my) future.
Here in Italy nobody is asking me anymore Flash applications and although Adobe AIR is now a really good solution to develop native mobile applications often you can not please the customer because they don’t really need an App but they just want a better web experience on mobile devices.
In fact a lot of my customers/partners is asking me: “I have an idea! But it must work on web browser, IPad and, if you can, on Android devices too”.
Usually they are fashion companies, furnishing, manufactures and so on.
A native application for Apple store and Android market could seems a good solution but App Store Review Guidelines don’t allow to publish all types of applications: i.e. marketing materials (2.13), advertisements (2.13), silly games (2.11), “useless” or duplicated apps (2.12), and so on.
Furthermore, many clients only needs to improve the web experience of their websites because they don’t want users from leaving their websites.
Lastly, the development costs for a native application is usually higher.
So, in recent months I have tried to find the best solution to meet this demand studying and testing a lot of HTML/JS technologies.
The first idea: propose mobile Web-Apps
After using Sencha Touch 2 for 3 weeks (a wonderful Ext-JS framework which reminds me very much Flex), JQueryMobile and testing other HTML5 frameworks I showed them some demos and I have realize an important thing: nobody is asking me or wants mobile HTML web apps.
Clients and partners do not like them or do not understand the true meaning.
Naturally it doesn’t mean they are not useful but now I’m looking for another stuff.
Here some quick tests I did to check performance, compatibility, flexibility and just to understand what I can do and what not with these frameworks.
Sencha Touch test:
JQuery Mobile test:
As Flash Developer I need/want to create custom components, different user experiences, animations and so on. I want to have fun!
Greensock TweenMax JS test:
Adobe Edge and Html 5 Canvas
So I have started to learn Adobe Edge. It’s a nice tools. A mix between Adobe Flash 5 and After Effect.
You can use it to create HTML interactive content just like you did with Flash 5: you have a timelines, symbols, a library, a property panel, you can import assets and you can add your scripts in the timeline or inside the symbol instances.
It works quite well, but now it’s still in beta, limited and it’s very hard to customize if you need to add not supported stuff.
Disappointed and discouraged, I started reading a few books on HTML5 canvas.
After some days of excitement I realized it was more or less a nightmare: the saving and restoring process, the coordinate system and the way to redraw part of the screen are simply absurd (or prehistoric).
At this point I stopped and I decided to dedicate myself to my real job, back on my beloved Flex.
Html5 Canvas, EaselJS and TweenMax: the perfect mix
After some weeks a friend showed me some simple HTML5 canvas prototypes he created using EaselJS, telling me about how it’s easy and similar to Flash. And he was right. It was amazing.
You can create and move containers, Sprite and Shape just like Flash:
var container = new Container(); container.x = 100; container.alpha = 0.5 container.onClick = functionName stage.addChild (container)
Or use drawing api:
var target = new Shape(); target.graphics.beginFill("#F00").drawRect(-10,-10,300,60).beginFill("#FFF"); container.addChild(target);
and you also have a lot of utilities to create animations, SpriteSheets and much more.
Furthermore, EaselJS is part of the CreateJS Suite that also includes:
- PreloadJS: a wonderful way to create a preloader of all your assets
- SoundJS: to easily add sounds to your HTML application/game
- TweenJS: a tween engine that works with CSS or Canvas properties.
- EaselJS: a new way to work with HTML5 canvas providing an API very familiar to Flash developers.
Even if I love all 4 products I have decided to use TweenMax instead of TweenJS, because I have always used it and it’s very flexible and powerful.
The result is that I love this mix.
Using these libraries and organizing my code using a bit of OOP is as if I’m using pure AS3.
Furthermore it works very well on different devices and resolutions, sharing the same code.
Ok, it doesn’t work on IE and it’s not as fast as Flash but it works very well on the other web browsers (Chrome, Firefox, Safari), on IOS and Android devices, Blackberry Playbook and in many HTML5 browsers.
I know the web is full of wonderful examples that use canvas or webGL but often many developers (and their clients) only needs more interactions and a better user experience on their websites with new and cool components, a lot of creativity, galleries, games, animated stuff and so on.
So as I do with Starling, I have started to study this technology creating some quick prototypes simulating different scenarios.
Even if these samples are very very simple , in my opinion they show the potential of this technology:
HTML5 Canvas / Easel JS test:
and Flash? :°(
I’m not saying I won’t use As3 anymore. I love Flash, Flex, Air, Starling and all related stuff and I can use them to create mobile native apps, touchscreen and Kinect apps, enterprise Flex RiA and so on. They always have their own market.
I’m only exploring some new web technologies.
I’m really curious to know what you think about this topic.