Play animation (PNG frames?) when clicking mouse using HTML5?

[Cute James]

Hello chaps,

Season's greetings to you all!

I would like to ask if anyone has any experience with playing animations using HTML5.

I have a 2 second rendered animation that I would like to embed within a webpage, and play on mouseclick.

A low resolution 'work in progress' version of the animation is available here:

https://www.dropbox....l6qrk/video.mp4

However, instead of using a video file, I thought about animating individual PNG frames - the advantage being that PNGs can have an alpha channel and therefore sit 'on top' of the website's background.

Extracting the individual frames, each PNG is around 250k, meaning that the total pre-loaded animation would be approximately 10mb - obviously far too big for such a short animation. I am wondering if this can perhaps be reduced by slicing the animation into a static image for the lower portion and animating just the upper moving portion.

Does anyone have any suggestions as to where to go from here? Perhaps software recommendations that will allow me to 'build' the animation? Or another forum that's geared specifically towards what I am hoping to achieve.

Please note that I do not have a great deal of web programming experience, but am hoping to follow tutorials and eventually end up with a collection of PNG frames and an HTML5 code snippet that can be dropped into an existing site design.

Many thanks in advance!

James

x

[pes2013]

http://en.wikipedia.org/wiki/APNG

?

Or your other alternative is to make a PNG out of each frame and with JS display them in a millisecond interval

[Cute James]

Thanks for the prompt reply.

Yes, I read the APNG wiki previously, but ruled out the format due to the lack of support in Webkit.

I think slicing up the top and bottom, then displaying individual PNG frames for the top half is the best way to go, but would appreciate pointers in the right direction.

Cheers,

James

x

[Cute James]

Just for the sake of completeness, here's a topic discussing the completed website:

http://www.neowin.ne...roduct-website/