An Animation Question

Hi There,

Ok, here’s a question from a comparative novice who’s just spent the last year or so getting to grips with HTML/CSS and Dreamweaver.

Now, traditionally at this point in my learning it would probably be time to move on to learning Flash (assuming that I wanted to start adding animation to my sites), but everyone knows that Flash is dead in the water, and I really don’t want to waste the next six months learning something which will soon be obsolete.

So the question is, where do I turn now? Yes I know that Adobe has released Edge (Beta), but it seems to me this app still has a long way to go, and it’s not even possible to download a non-expiring version at this point. I’ve also read one or two fairly negative reviews :

http://boagworld.com/reviews/adobe-edge-wrong-technology-wrong-job/

Then there’s Tumult Hype, this program is also in its early stages and doesn’t support things like Web Fonts.

It occurs to me that both of these apps seem to use CSS3 and JS/JQ, would it be very difficult to achieve similar (and perhaps even better) results by learning to hand code JS?

So, if a client approached you TODAY and wanted to add some animated content to his/her site (not an over-the-top amount, maybe just an animated logo and some buttons) How would you implement it?

Cheers,

Simon

Animated GiF’s have been around for years but because the number of colours that can be used in any one image (just 255) gradients and any artistic wow factor are destroyed unless you keep things painfully simple.

However…
There is a jQuery (fancy javascript ) Plugin that will display a series of JPG images as an animation. The downside being it’s ‘old school’ animation where you have to create each frame by hand using the graphics package of your choice.

Newer browsers also support the little known animated PNG image format (you can see some here ), no idea if the free ‘Gimp’ graphics editor has an addon for these yet but you can bet somebody is working on one. There is also a PHP class that functions like the jQuery animator and can convert a series of still images to a high quality animated PNG.

Last but not least there is the canvas element of HTML5 that is rather good at this sort of thing…
http://labs.hyperandroid.com/particles-html5

Canvas looks very interesting, could it be used to do all the things that Flash does/did, and to what extent is it supported?

Anyways, I think what I’m really trying to ask is: What are professional web designers using at the moment if they want to add a modicum on animation to a website?

@nomis66

Hi, I recommend that you spend your time learning some of the HTML5 video and Canvas features.

A vector logo can be animated in Canvas without loading any plugins; however there is a fairly steep learner curve with SVG and Canvas so it is a bit of a trade-off. Your worry was don’t invest 6 months in a dying technology - Flash wont die in 6 months but things are moving away from Flash to Canvas for vector stuff and HTML 5 video (non-streaming), Flash or Siverlight are still platforms that allow for streamed video. It would be better time spent moving this way.

Steve

if you want to deploy as ‘html5’, use the flash application along with google swiffy. Swiffy is still fairly beta quality, but you’ll get better results than most of the alternatives.

Thank you all for your excellent advice, it’s certainly given me plenty to think about.

simon