Hoy me ha dado por probar de hacer una animación muy sencilla en html5 y la misma en flash para comparar.
Aquí tenemos una animación simple echa en flash.
This movie requires Flash Player 9
1 2 3 4 5 6 7 |
addEventListener(Event.ENTER_FRAME,onFrame); function onFrame(e:Event):void{ if(cuadrado.x >=210){ cuadrado.x = 0 - cuadrado.width; } cuadrado.x +=3; } |
Y aquí tenemos el mismo ejemplo en html5, que opinan?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<html> <head> <title>Animacion cuadrado</title> <script> var cuadX = 0; var cuadY = 0; var cuadW = 50; var cuadH = 50; var cuadrado = new Image(); var stage; window.onload = function(){ init(); } function init(){ cuadrado.src = "cuadrado.jpg"; } cuadrado.onload = function() { stage = document.getElementById('Stage'); stage = stage.getContext('2d'); stage.fillStyle = '#333333'; stage.drawImage(cuadrado, cuadX, cuadY, cuadW, cuadH); setInterval(onFrame,16); } function onFrame(){ if(cuadX >=210){ cuadX = 0 - cuadW; } limpiar(); cuadX +=3; stage.drawImage(cuadrado,cuadX,cuadY,cuadW, cuadH); } function limpiar(){ stage.fillStyle = '#333333'; stage.fillRect(0, 0, 210, 100); } </script> </head> <body> <canvas id="Stage" width="210" height="100"> Si ves esto en vez de la animacion <br>es porque tu navegador no soporta HTML5 Visualizalo con FireFox. </canvas> </body> </html> |