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> |
6 comments on “Ejemplo sencillo de animacion en html5 y flash”
Ciertamente html5 apesta
Viva el puto HTML5… viva!!!… pero que viva muy lejos!!! XD
Viva el HTML5!!!… pero que viva muuuy lejos!!!
Ups!!!… He doblado sin querer el comentario… XD
xD
porque complicar tanto . las cosas o es para no usar productos ajenos o externos, podria ser una monopolizacion ?