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:
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!