HTML5Canvas

From Flash to Javascript to Html5 Canvas and Easel JS

How to create HTML animations and interactive experiences on desktop and mobile browsers

WHY?

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!
I must admit that I hate DOM, DIVS, CSS layouts and all that stuff but when GreenSock released (15 may 2012) the Javascript version of their Animation Platform (TweenMax) my world has changed.  I could finally use an identical syntax to AS3 to easily animate elements using JQuery and TweenMax. I have create some prototypes (also to do a bit of experience with JS and JQuery; remember I’m Flash developer ;) but performance on mobile devices wasn’t so good and honestly moving elements around the screen animating  CSS properties is not too funny :(

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:

  1. PreloadJS: a wonderful way to create a preloader of all your assets
  2. SoundJS: to easily add sounds to your HTML application/game
  3. TweenJS: a tween engine that works with CSS or Canvas properties.
  4. 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.

 

 

 

 

Comments (34)

  1. Fintan (reply)

    August 13, 2012 at 3:59 pm

    Hey Fabio,

    Great examples there. I find myself in the same position. I really like EaselJs and I ended up using it to create a number of drag and drop templates for an eLearning project. Have you considered looking at Haxe (www.haxe.org) at all? I was able to use EaselJs with Haxe and target both Javascript and Flash using some of the nice features of Haxe. Here is one example:

    Easeljs version (works nicely on iPad apart from sound because SoundJs doesn’t support iOS yet):
    http://fboyle.com/modello/dev/fiontar/dragndrop/activity/index-dragdropmap.html

    Flash version:
    http://fboyle.com/modello/dev/fiontar/dragndrop/activity/flindex-dragdropmap.html

    CreateJs externs can be found here:
    https://github.com/Fintan/easelhx

    I wouldn’t use CreateJs for everything though. I’m also looking at a jQuery/Backbone/RequireJs workflow for other things.

    1. Fabio Biondi (reply)

      August 13, 2012 at 10:53 pm

      Very interesting and nice demos!!!

      Haxe seems another interesting solution but I didn’t explorate it yet. I’ll do it for sure in the next weeks / months because too many people is saying it’s a great technology.

      and Haxenme seems interesting too!!

  2. Sebastiano (reply)

    August 13, 2012 at 4:43 pm

    Nice article, but why don’t you also test HaxeJS or Jangaroo? They are really valid alternatives, with and without display list…I wrote a couple of articles about them on my blog: blog.sebaslab.com

    1. Fabio Biondi (reply)

      August 13, 2012 at 11:02 pm

      Hi Sebastiano, as I wrote above I have never used Haxe but I’ll try it very soon.

      In the last months I deciced to improve my skills on HTML & C. because I was too concentrated on AS3 and I lost sight of everything else.
      So before starting to study AS3toJS products I prefer to thoroughly study html/js/canvas/etc to have a good foundation.

      I didn’t know Jangaroo. It seems AMAZING!!!!!
      Have you tried it yet? What can you say me? Should you use it for a real project?

  3. Joseph Burchett (reply)

    August 14, 2012 at 1:46 am

    At this point I think it makes perfect sense to use js/css/html to build web apps, and fairly simple interactive websites… And only to use Flash, flex, etc for either deeply complex web/mobile apps, highly interactive websites or games. Sadly the usual web stack just is not up to snuff yet for doing any really intense games or similar. It would be if web gl was properly adopted by all browsers, but it’s not.

    I wouldn’t feel bad about not using as3/flash anymore, honestly based on the examples you just showed off and the type of clients you described you really don’t have a reason to use flash anymore.

    As for Haxe, although it’s pretty darn awesome and probably the only true multi-platform language out there, it’s still kinda of seen as hobby language. Sure it’s being used by some big companies but I don’t think most clients will want to use it. So unless you are the lead of the tech team of the company going to be kinda hard to convince an existing team to use it.

  4. Fabio Biondi (reply)

    August 14, 2012 at 2:22 am

    Hi Joseph, thank you very much to share your opinion, especially about Haxe.

    And you completely right. Flash has no sense for this type of customers.
    Luckly I can survive using Flex for banks and healthcare applications (naturally I’m working in a team) and Flash/Starling for kiosk/touch/mobile apps.
    Furthermore there are other interesting stuff you can do with Flash/AIR: Kinect apps, P2P, elearning tools and so on but as you can imagine is a minor market and now in Italy there are not a lot of customers that really want spend money on this “funny” stuff.

    The truth is that as freelance I need to explore a lot of solutions to propose the best one to my customers.
    A lot of time ago it was Flash for sure but not anymore :°)

  5. Joseph Burchett (reply)

    August 14, 2012 at 3:45 am

    “A lot of time ago it was Flash for sure but not anymore”, this really isn’t a bad thing. Remember it’s always about using the right tools for the right job. Back in the day Flash was created to solve a lot of the problems the normal web stack just couldn’t do… But now it can (most of it anyways)!

    Adobe is starting to make the flash platform more focused hence the reason they stopped officially supporting flex and have pushed there efforts to mobile and games.

    “you can do with Flash/AIR: Kinect apps, P2P, elearning tools”, those are the deep complex apps and interactive experience where I feel Flash still and will probably continue to shine! I never understood this whole html5 vs flash debate… Each are good at doing certain things really well… As developers we should never hold our selves to one piece of tech, especially if your a freelancer. Where your lively hood depends on being versed in the latest tech. So kudos to you buddy for venturing out and not being one of those “flash must be used for everything” kind of devs :-)

    Have fun :-D

    1. Fabio Biondi (reply)

      August 15, 2012 at 4:40 pm

      Yes in fact this is an opportunity to learn new stuff. Sure!!!
      Although I would have preferred to continue to use Flash on the web too : P

  6. Sam (reply)

    August 15, 2012 at 8:01 am

    Hey there – just an FYI, your blog is really hard to read on the iphone due to the social media icons that stick to the left hand side of the page.

    1. Fabio Biondi (reply)

      August 15, 2012 at 4:43 pm

      HI sam,
      I’m sorry :(

      I have updated wordpress, theme and some plugins in these days and I still need to fix some stuff.
      Probably I’ll add a mobile version, I’ll change fonts and other minor fixes.

      In the meanwhile I hope you also have a PC/Mac :P

      1. bakaohki (reply)

        December 6, 2012 at 8:38 pm

        I actually find it hard to read the #999 color on #f4f4f4, especially with F.lux active :( Maybe I’m getting old.

  7. Giorgio (reply)

    September 24, 2012 at 8:22 pm

    “…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.”

    Remove all the unneeded words and only one word remains, that is “iPad”.
    in 90% of cases customers think that Internet is Facebook or youTube.
    But unluckily, they remember well also another thing: once upon a time, a man (that until that time they didn’t know well who really he was) said that Flash wouldn’t have run on his COOL devices because it’s slow, buggy and so on.
    We all know that was a big lie but unexpectedly HE WON.
    A really flawless victory!

    We all flash developers were petrified…. many of us didn’t believed that… but… in the end, just because of one email we lost (as in my case) ten years of qualification.
    So many of us stayed at the window, looking at what would happen.

    And what really happened?
    A big jump back of at least 5-6 years.

    There are customers now that “start suckin’ each other’s dicks” (cit. from Pulp Fiction) because they see a scrolling site in html… just get the f**k out!
    These customers are the same that like to say the word “HTML5″, to give themselves airs, because the word “HTML5″ bounces well in their mouth.
    Try it by yourself, just say ACCATIEMMEELLECINQUE or EICHTIEMELFIVE… it’s much more satisfying than saying FLASH.

    So after one year of illusion (in my case I waited by concentrating my efforts on AIR for iOS and Android) the sad truth was in front of us: we needed to begin to study html and js.
    We regret this also because one important thing that gave us the incentive to learn flash in the past was that it run IN THE SAME WAY on EVERY F****G BROWSER.
    Now we have to go insane again by trying our things on IE7-IE8-IE9-CHROME-FIREFOX-SAFARI-ANDROID-IPHONE-IPAD-THISDICK…
    A nightmare that returns!

    In addition, personally I asked myself why this happens, I confronted also my friends… how can a man change so badly the scenario?
    We came to the conclusion that he found rich soil, not only in the customers area but also in the so-called developers area.

    Do you remember when AS3 came out?
    A lot of mediocre people were disappointed because now it was much more difficult for them to copy/past from internet a script that makes their website snows in december…
    AS3 required at least some skill in programming in order to be used and that was too much for these people.
    In html now, they can copy/paste again a lot of script from internet because js is not so strict and they are happy again.
    I piss on them.

    But… but… but… they understimate one important thing.
    Okay we lost qualification, but we didn’t lost experience.
    Let me finish by quoting one of the best article I have ever read:
    “…and because of the years we’ve spent creating software, we’ve learned what works and what doesn’t, regardless of the language or the platform. Operating systems rise and fall, development tools come and go, but through it all, old farts know how to write solid code.”

    You can read it here:
    http://nick.typepad.com/blog/2012/05/old-farts-know-how-to-code.html

    Giorgio

    P.S. I’ve forgotten to mention people that say that javascript is much more performing than Flash.
    Usually these people say things like “Ah! You do not know! Now javascript is compiled by browser and it’s really performing!”
    Ok, take your javascript, put it up on your (you know where) and set yourself on fire.

    1. Fabio Biondi (reply)

      November 2, 2012 at 2:08 am

      Hi Giorgio,
      thank you very much for your interesting comment and I’m agree with you on most of the things you said.
      It ‘s sad and beautiful at the same time see that many developers have had my exact same problems.

      I’m only angry with myself for having confidence in only one company (Adobe) and put all my career on it. But this is the last time : )

      And you wrote an important sentence:
      “we lost qualification, but we didn’t lost experience.”
      because on this concept I’m trying to build a new career, get new skills and new potential customers.

      The only real problem was/is to decide which direction, given that the period is not just the best, there is much confusion and many emerging technologies

  8. Robert (reply)

    October 10, 2012 at 9:07 am

    Nice demos! Could you send me links to the demos on mail?

  9. Brent (reply)

    October 10, 2012 at 3:08 pm

    Love the Easel JS examples (new to that suite), are any of the examples posted on GIT or open source sites to see how you accomplished these?

  10. Paul (reply)

    October 12, 2012 at 10:22 am

    Hi Fabio

    Thanks very much for the article its was a very interesting read and it has helped me very much in deciding where to go from here.

    One of the problems I have is that I am a user for what Flash professional was target for. I’m not a hardcore OOP as3 coder or Flex user. My workflow uses the stage, drawing and creating assets within flash then coding the application from within the Flash API. I use a lot of the Greensock framework for animation.

    This has put me in a major disadvantage to many Flex users who are used to the workflow of generating everything in code similar to HTML 5 and the javascript route.

    The one thing I do know is that I have to start learning the new technologies as I am pretty certain that Flash Professional is dying and will be replaced by Edge in the next few years. Not only that, even if the platform survives just the mention of Flash now turns clients away. I won’t turn this into a rant but I am pretty disgusted the way this has been handled by adobe after all the time and money I have devoted to the Flash platform.

    Anyway back to the future! I’ve started learning easelJS and its not that bad!! If you have a reasonable grasp of AS3 and are used to using things like tweenlite the jump it’s ok!. Not having a API is a bit scary at first and having to position screen elements by code is a pain but you get used to it. Also I miss my movieclips soooooo much, sprites are sucky! The other drawback is having to use PNG’s and images for everything. File size is a huge issue.

    I will be honest with you though it does make you work a lot harder for things which are so simple to do in Flash but easelJS definitely a step in the right direction. The one huge advantage for me has been because I don’t use a lot of OOP AS3 it matches my workflow very well. I tend to write my AS3 code in external AS files and use the include method within Flash. This is exactly what you do with easelJS! Write your JS file and reference it within the HTML5 file. I hate Classes and never fully got my head around them. But hey that’s why I use Flash Professional right? It’s even easier if you never got around to learning AS3 as JS is very similar to AS2.

    Combining easelJS with Greensock is I think a definite way ahead for Flash Professional users like me. It will take time and patience but there is definitely a glimmer of light at the end of the tunnel. With the direction of Flash going towards OOP gaming and AS3 evolving into a much more stricter OOP based language its a case of waiting for Edge to mature or start learning HTML now.

    1. Fabio Biondi (reply)

      November 2, 2012 at 1:53 am

      Hi Paul,

      You said: < >

      I partially agree with you. In my opinion:

      1) Flash will be still used for touch, mobile, and 3d stuff.

      2) Edge will be used to create interactive HTML stuff.
      But CreateJS is “very” fast on mobile devices and I think Flash may have a good integration with it.

      For example, you wrote that you don’t like to create everything from scratch but you may use Flash for a lot of CreateJS stuff.

      For example, I’m creating an ADV micro-site where I made all the assets (little animations) using Flash and exported using the CreateJS toolkit.
      The result are Javascript classes that I can use in EaselJS simply with:

      var bird = new lib.Bird()
      stage.addChild(bird)
      bird.gotoAndPlay(1)
      bird.stop()
      bird.gotoAndStop(“label”);

      It’s amazing and very useful!

      < < even if the platform survives just the mention of Flash now turns clients away. >>
      I’m completely agree with you.
      But I can confirm you that my partners (and my /their customers) are very excited about this technology.

      < < I am pretty disgusted the way this has been handled by adobe after all the time and money I have devoted to the Flash platform. >>a

      Me too. I was angry and “offended” by Adobe but they gave me a reason to explore new technologies and open my mind. I was too FlashPlatform oriented!! : )

      Thank you very much for your post.
      It’s always nice to share and listen the experience of other developers : )

  11. Mike (reply)

    November 1, 2012 at 3:36 pm

    Great job on the HTML5 and Canvas Swipe Gallery. How did you get the swipe to work going through the images? Did you use another library?

    Thanks in advance.
    Mike

    1. Fabio Biondi (reply)

      November 1, 2012 at 3:41 pm

      Thank you Mike!
      No, I have used the EaselJS’s MouseEvent class.
      In the library source code (or on my blog) you can find some example to drag’n'drop an object.
      That’s a good starting point to create a swipe effect.

      1. Mike (reply)

        November 2, 2012 at 12:30 am

        Thanks Fabio. I’ll take a look. I’m in the process of making the transistion from Flash and Flash Builder to HTML5 also.

        1. Fabio Biondi (reply)

          November 2, 2012 at 1:37 am

          Good luck Mike and I think that’s the right choice.

          I’m still using (and loving) Flash, Flex, AIR, Starling and so on but I also think we should open new doors : )

          Let’me know if you need help or suggestions.
          You can find on G+

  12. Gabriele (reply)

    November 8, 2012 at 3:56 pm

    Hi Fabio, great article but I don’t understand if there’s a way to use something like AS3 bitmapData in HTML5 Canvas.

  13. Moose (reply)

    December 14, 2012 at 8:17 pm

    Here another ex-flasher.
    I like create.js a lot, but I guess if you leave out IE anyway, CSS3 transitions with a tiny bit of jQuery/js is a lot faster on ios…
    On the downside you loose the visual interface.

    1. Fabio Biondi (reply)

      December 15, 2012 at 12:43 am

      Hi Moose, I’m agree with you. In some scenarios CSS3 transitions might be the best solution.
      But it depends from the project, the target, the budget and your skills (easelJS is very easy for Flash developer).
      I always think we should choose the technology to use in according to the project we need to develop, so there isn’t the absolute “best” technology..

  14. speed (reply)

    December 31, 2012 at 9:30 am

    ‘In some scenarios CSS3 transitions might be the best solution.’
    CSS3 transitions are always the best solution. There are a lot of speed tests confirming this:
    http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

    1. Fabio Biondi (reply)

      January 3, 2013 at 10:31 pm

      Hi Speed, I’m 100% agree with you about performance but EaselJS is very easy to use and it has less browser compatibility issues than HTML, so I often use it when I need to create “special/strange” UI.
      Furthermore I often mix Canvas and CSS3 to get the greatest benefit from both.
      I have never said canvas is the best technology in the world but I think it’s great :)

  15. Per (reply)

    January 3, 2013 at 7:16 pm

    Great post, I have also looked at createjs, and are really keen on to do some fun stuff. Impressive what you done in your demos.

    You probably heard this before but do you have any links to show those demo you have?

    Cheers, Per

    1. Fabio Biondi (reply)

      January 3, 2013 at 10:42 pm

      Hi Per, thank you for the comment.
      You can find more videos on my YouTube Channel: http://www.youtube.com/user/BiondiFabio.
      For example, take a look to the GoogleDrive Viewer built with EaselJS. It’s a prototype but interesting.
      You can also try it on http://www.fabiobiondi.com/lab/social/gdrive

      Anyway I’m freelance and I can’t share everything.
      I have developed other interesting HTML5 mobile projects in the last months of 2012 (using 3d models, maps and creating strange UI : ).
      Write me an email (fbiondi77 at gmail dot com) if you want to see them : )

  16. Farzan Mohajerani (reply)

    February 21, 2013 at 3:07 pm

    Hi. Great article. I found great libraries to work with because I exactly had the same problem moving from flash to HTML5.
    But 1 think. Pleeeeeeeeeeeeese change the color of your blog so we can read the texts. :D
    Gray on white ? common … I’m dying here . . .
    :D

    1. Fabio Biondi (reply)

      February 21, 2013 at 4:35 pm

      Hi Farzan, thank you for the comment.

      I should add a new toy to this list: AngularJS. If you were a Flex dev you will love it too : )
      Anyway, about the font you were completely right. Let’me know if now it’s ok (#222 :)

      Thanx

  17. man1.0 (reply)

    March 9, 2013 at 7:44 am

    hi all,

    It’s interessing that I’m not only to think frameworks of html5 for replace as3.
    I sorry for Flash, I like it, as3 and tweenlite of greensock.

    Thank for your post. Now I’m quite.

  18. Booz (reply)

    April 24, 2013 at 10:14 pm

    Hi Fabio,

    Thanks for the samples.

    I’ve worked as a Flash developer myself and moved to a different kind of technology now. Just like you I love developing in the flash platform, but forced to migrate
    to a different technology because flash projects are
    now decreasing.
    I hope flash can still maintain it’s status. By the way have you tried to use the new Flash CS6. I’ve watch some of it’s functionality, specifically the createJS exporting.

    Best regards

  19. David Jumeau (reply)

    December 18, 2013 at 7:37 am

    Hi Fabio,

    Grazie mille for the post. I am also looking into CreateJS and Greensock integration. I am happy that I am not the only Flash/Flex developer that has to expand my horizons.

    Ciao,

    David

    1. Fabio Biondi (reply)

      December 18, 2013 at 10:04 am

      Hi David, you’re welcome.
      After an year I still love CreateJS because it’s really a good Flash raplacement for a lot of consumer stuff: easy syntax, stable, cross-platform.
      But now I have to suggest you to try AngularJS too, what I call my Flex replacement, one of the best web frameworks I have used since years :)

      CreateJS, AngularJS, Phonegap and Chrome Packaged Apps are far from the performance of the Flash Platform but honestly they can be used for most of the B2C and B2B applications I did until 2 years ago with FP.
      This is what I currently use every day.

      Have you joined the G+ CreateJS community? You can find there Grant Skinner and all the official team.
      https://plus.google.com/communities/113475154727121541523

      Thank you for your msg

Leave a Reply

Your email address will not be published. Required fields are marked *

Published on: 13 August 2012
Posted by:
Discussion: 34 Comments