{"id":6699,"date":"2014-05-15T10:28:18","date_gmt":"2014-05-15T08:28:18","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=6699"},"modified":"2016-11-29T10:21:56","modified_gmt":"2016-11-29T09:21:56","slug":"convierte-peliculas-flash-en-html5-curiosidades","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/convierte-peliculas-flash-en-html5-curiosidades\/","title":{"rendered":"Convierte pel\u00edculas Flash en HTML5. Curiosidades. Reutiliza tus animaciones anteriores."},"content":{"rendered":"

Hace ya\u00a0tiempo, el empleo de Adobe\/Macromedia Flash<\/strong> en los proyectos web era algo muy habitual y extenso. A ra\u00edz de la llegada de las posibilidades de HTML5, \u00a0dispositivos no compatibles (iphone, ipad) y la pol\u00e9micas del formato de v\u00eddeo, su uso fue descendiendo\u00a0de forma radical.<\/p>\n

Muchos desarrolladores y empresas ten\u00edan proyectos realizados en Flash. Realmente la herramienta es muy vers\u00e1til y potente, su \u00a0grado de conocimiento y fama \u00a0muy extenso.<\/p>\n

En esta entrada, os mostrar\u00e9 los pasos necesarios para adaptar y reutilizar las peliculas .FLA<\/strong>. Aprovechando nuestro trabajo previo para los nuevos medios, navegadores y dispositivos aparte de aplicar conocimiento anterior de la herramienta multimedia de Adobe.<\/p>\n

<\/p>\n

Si bien es cierto que existen aplicaciones para trabajar la animaci\u00f3n en formato HTML5<\/strong> \u00a0desde cero \u00a0o\u00a0“from scratch” (ver alternativas<\/a>), gracias a la extensi\u00f3n\/plugin que se puede instalar\u00a0dentro de la herramienta Adobe Flash, llamada CreateJS,<\/strong> podremos exportar nuestras animaciones a c\u00f3digo HTML5<\/strong>. Aunque no todo es tan bonito, puesto que si disponemos de c\u00f3digo Actionscript y programaci\u00f3n a medida, tendremos que readaptar a Javascript<\/strong> o desechar parte de este c\u00f3digo.<\/p>\n

Yo lo suelo usar para incorporar animaciones ya desarrolladas y un poco\u00a0de dinamismo<\/strong>, con el prop\u00f3sito de reutilizar la pelicula fla<\/strong> y ganar tiempo al ya conocer la herramienta de edici\u00f3n.<\/p>\n

Inserci\u00f3n de Flash<\/strong><\/p>\n

La animaci\u00f3n inferior muestra un dummy o mu\u00f1eco de ensayo que he creado hace a\u00f1os en Flash. Nos va a servir como ejemplo.
\nEn breve dejar\u00e9 el .fla subido, descargable desde este enlace.<\/p>\n

<\/div><\/div>\n

Para poder convertir una pel\u00edcula Flash \u00a0(.fla) en html5, necesitaremos mediante esta t\u00e9cnica el programa de Adobe Flash (ejemplo CS6) \u00a0y una extensi\u00f3n denominada CreateJS que se puede descargar desde el enlace inferior:<\/p>\n

http:\/\/www.adobe.com\/devnet\/createjs.html<\/a><\/p>\n

Una vez instalada necesitaremos desplegarla desde: el men\u00fa de Flash, ventana, otros paneles, Toolkit for CreateJS<\/strong><\/p>\n

\"Toolkit-for-createJS\"<\/a><\/p>\n

La captura de pantalla superior muestra m\u00e1s informaci\u00f3n de la que pensamos. Por un lado se puede ver el timeline<\/strong>, stage<\/strong> y el c\u00f3digo<\/strong> asociado a un fotograma del dummy.<\/p>\n

Tambi\u00e9n la ventana toolkit for CreateJS. Simplemente tendremos que pulsar ese bot\u00f3n. Al realizar esa acci\u00f3n, se nos generar\u00e1 una pagina html y otra Javascript.<\/p>\n

Dentro del html que podemos apreciar en la parte inferior se crea el objeto canvas que \u00a0es controlable mediante el codigo javascript. Existen 3 enlaces a ficheros .js que necesita para funcionar y se encuentran en Internet en el dominio code.createjs.com<\/strong><\/p>\n

Para a\u00f1adir interacci\u00f3n a la pel\u00edcula podemos observar que es necesario a\u00f1adir l\u00edneas en javascript en forma de comentario<\/strong> en el fotograma determinado. Es necesario destacar que no todas las acci\u00f3nes y tipos de animaci\u00f3n son exportables, tal y como muestra el output en sus consejos.<\/p>\n

<\/div><\/div>\n

Por otro lado el c\u00f3digo de la p\u00e1gina html5<\/strong> es:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<title>CreateJS export from dummie-palentino<\/title>\r\n\r\n<script src=\"http:\/\/code.createjs.com\/easeljs-0.6.0.min.js\"><\/script>\r\n<script src=\"http:\/\/code.createjs.com\/tweenjs-0.4.0.min.js\"><\/script>\r\n<script src=\"http:\/\/code.createjs.com\/movieclip-0.6.0.min.js\"><\/script>\r\n<script src=\"dummie-palentino.js\"><\/script>\r\n\r\n<script>\r\nvar canvas, stage, exportRoot;\r\n\r\nfunction init() {\r\n\tcanvas = document.getElementById(\"canvas\");\r\n\texportRoot = new lib.dummiepalentino();\r\n\r\n\tstage = new createjs.Stage(canvas);\r\n\tstage.addChild(exportRoot);\r\n\tstage.update();\r\n\tstage.enableMouseOver();\r\n\r\n\tcreatejs.Ticker.setFPS(12);\r\n\tcreatejs.Ticker.addEventListener(\"tick\", stage);\r\n}\r\n<\/script>\r\n<\/head>\r\n\r\n<body onload=\"init();\" style=\"background-color:#D4D4D4\">\r\n\t<canvas id=\"canvas\" width=\"300\" height=\"300\" style=\"background-color:#ffffff\"><\/canvas>\r\n<\/body>\r\n<\/html><\/pre>\n
Y dentro del fichero dummie-palentino.js se encuentra un fichero muy complejo que podemos ver\u00a0desde este enlace<\/a>:<\/p>\n
Para ver el resultado final en HTML5<\/strong>\u00a0 en la parte inferior o podemos pulsar aqu\u00ed<\/span><\/a>\u00a0<\/strong>(abre una nueva ventana).<\/span><\/p>\n