4

I run an ecard website and currently about half of the content is made up of animations made using Flash. Normally valentines is a pretty busy time for the site, but this year I found that while I had the same amount of traffic to the site, less than one quarter the number of ecards were sent this year compared to last year.

Looking at the web visit stats I see that the amount of visitors using mobile this year was just under half, which explains why the volumes were lower as flash does not work on mobile and tablets.

I used to use a lot of open source flash from the likes of levitated.net, bit-101.com and wonderfl.net.

I now realise I need to start learning about HTML5 animations using e.g. canvas.

I wondered if anyone might know of any useful resources which are a good place to start?

Also, does anyone know of any good libraries / frameworks / open-source content which can be used to generate interesting animations? I have found http://jsdo.it/ which looks good.

I am willing to put the time in to learn things, but when I was using Flash and Actionscript it was great to be able to use code that others had written as a starting point and adapt it to my needs, as the ActionScript was light years ahead of anything I can do as I am not really a programmer.

Any advice much appreciated.

Thanks

6 Answers6

1

Start with the following resources:

Following graphic libraries available to create awesome graphics and animation:

  • Raphael
  • jsDraw2D
  • DOJO
  • KineticJS

Editors are welcome!

Kunj
  • 1,980
  • 2
  • 22
  • 34
0

Here you have some good html5 js libraries :

markcial
  • 9,041
  • 4
  • 31
  • 41
0

I recommend FabricJS, it's really powerful!

Fabien Ménager
  • 140,109
  • 3
  • 41
  • 60
0

If you want to start with plain canvas then http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/ covers the basics rather well. http://diveintohtml5.info/canvas.html is also good, goes a bit more in-depth.

Then if you want to work with a library on top of it that makes things easier I always recommend three HTML Canvas libraries:

  • KineticJS: Mature, good API, can do pretty much anything, but it can only render to Canvas.
  • Two.js: Not as mature (doesn't support image and text yet), but is render agnostic, meaning you can choose if you want your image or animation to be drawn to Canvas, SVG, or WebGL.
  • Pixi.js: Speed, speed, speed. It's very fast, but not as mature as KineticJS (but only in some respects). It can draw to both Canvas and WebGL.

They are all pretty general purpose but Pixi.js has been embraced by the gaming community more, and for good reasons.

For comparison of more Canvas libraries see: https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0

01AutoMonkey
  • 2,515
  • 4
  • 29
  • 47
0

As a Flash Developer for 10 years, the majority being with Actionscript 3. I found that Microsoft TypeScript and using Phaser.io and PixiJS is essentially allowing me to continue with my skillset.

We have ported 4 flash games to HTML5 since February and each time the boss says "I cannot believe this is HTML and not Flash".

On my side, I code the same way, with the same design patterns as I did in Flash with the same display list knowledge.

Visual Studio + TypeScript have been so enjoyable to work with that I cringe when I need to fire up Eclipse. Finally, the output of my TypeScript is very clean JS. You can abandon the project half way through and continue with the JS output so the choice of using TypeScript is for me only... for my needs, for my ease of use and for my sanity.

Clark
  • 2,598
  • 3
  • 27
  • 41
0

You can use any tool that compiles to HTML5/JavaScript, including Flash:

http://www.openfl.org

If you're comfortable working in AS3.0/Flash, you might as well continue to do so :)

d13
  • 9,817
  • 12
  • 36
  • 44