CSS-Cola
8 de Mayo del 2008(see English version below)
Tras Homer CSS, Bush CSS y jpeg2css, hacer animaciones con arte CSS era el siguiente paso. Esta Cocaco… CSS-Cola es baja en calorías; ocupa 891 bytes. Dejo la siguiente pregunta a los expertos en Flash: ¿Se podría hacer una animación similar que ocupase menos?
English
After Homer CSS, Bush CSS and jpeg2css, animations with CSS art was the next step. This is a Co… erm… CSS-Cola light; it’s just 891 bytes in size. To the Flash experts out there: Would it be possible to do a similar animation even smaller than that?
Flash: 451 Bytes using actionscript. Using a standard tween makes it 1.5 KB.
http://micksam7.com/flash/soda.html
http://micksam7.com/flash/soda.swf
Of course the rotation point is the wrong corner, but meh. :)
And I’m -sure- someone from the flashscene could make it much smaller.
Awesome Micksam! Thumb ups and respect! In Spanish:
Micksam7 ha conseguido clonar el efecto en flash en sólo 451 bytes. De esta forma ha respondido a mi pregunta. ¡Genial Micksam!
Hay que decir que además el flash tiene mejor resolución ;-)
Seriously, the flash version is easy to do, since flash natively supports vectors. All I did then was re-drew your soda can as a vector [roughly], then set it’s _rotation using actionscript.
A rundown of the flash size:
Flash Header: 34 bytes
Vector Object: 255 bytes
ActionScript: 111 bytes
Frame & Layer Data: 58 bytes
= 458 bytes
Also, flash compresses the movie files. [Which saves me a measily 7 bytes.] Giving me a file size of 451 bytes.
If I scripted the drawing of the object too, it might shave a few more bytes off it.
Your CSS version is much more impressive then my flash version. :)
Congratulations to the two both as Román and micksam7, I thought that would not do for animation as with CSS.
Amazing!!
[…] Link | CSS-cola […]
[…] Una animación de una botella hecha con hojas de estilo […]
Cuando la animacion esta en un area visible del navagador (Firefox) el uso de la CPU se dispara a 100%. Definitifamente es mucha CPU para una pequeña animacion.