{"id":8240,"date":"2015-07-25T13:59:10","date_gmt":"2015-07-25T11:59:10","guid":{"rendered":"http:\/\/www.palentino.es\/blog\/?p=8240"},"modified":"2015-07-26T02:49:28","modified_gmt":"2015-07-26T00:49:28","slug":"adobe-edge-animacion-html-al-estilo-flash","status":"publish","type":"post","link":"https:\/\/www.palentino.es\/blog\/adobe-edge-animacion-html-al-estilo-flash\/","title":{"rendered":"Adobe Edge, animaci\u00f3n HTML al estilo Flash. Integraci\u00f3n manual y con WordPress"},"content":{"rendered":"

Lejos quedan ya los a\u00f1os en los que los desarrollos animados y la interactividad dominaban Internet. Recuerdo que muchos proyectos de empresas y particulares se realizaban empleando la herramienta de animaci\u00f3n de Adobe Flash<\/strong>. Flash se expand\u00eda por\u00a0Internet, y era necesario el reproductor para poder visualizar las pel\u00edculas. Las p\u00e1ginas eran objetos .swf<\/strong> dentro del HTML. El formato generado\u00a0era propietario, y el c\u00f3digo compilado no era “interpretable” (aunque exist\u00edan decompiladores).<\/p>\n

Pero llegaron los cambios. Por un lado, Steve Jobs<\/strong> daba su espaldarazo a la tecnolog\u00eda de Adobe\u00a0al no permitir la reproducci\u00f3n de pel\u00edculas flash en sus dispositivos iPad, iPhone. Adem\u00e1s Google ped\u00eda que los datos cada vez fueran m\u00e1s estructurados para un mejor an\u00e1lisis, y el SEO<\/strong> comenzaba a liderar los intereses de empresas \u00a0y particulares. El posicionamiento comenzaba a serlo todo, por encima del dise\u00f1o, por encima de la animaci\u00f3n. El objetivo era llegar, la visita, la venta, la conversi\u00f3n<\/strong>.<\/p>\n

\"HTML5-flash\"<\/p>\n

Estos factores \u00a0sumados a la guerra de los codecs de v\u00eddeo hicieron que los proyectos Flash empezaran a quedar en desuso.<\/p>\n

El responsive<\/strong>, la velocidad de carga<\/strong>, la aparici\u00f3n de CMS<\/strong> como el todopoderoso\u00a0WordPress<\/strong>, Joomla, Typo, entre otros, fueron minimizando y minando los desarrollos. La animaci\u00f3n empezaba a sucumbir. Las webs eran m\u00e1s planas. El empleo de templates en estos CMS, abarataba los desarrollos. El mundo web, comenzaba a tener la misma esencia, la misma forma, el mismo estilo. Estilo Cabecera, sidebar, blog, foot y contenidos en 4 columnas. Estilo Bootstrap y responsive, y animaciones a modo banner, como luce este\u00a0blog.<\/p>\n

Sin darnos cuenta, poco a poco, iban despareciendo las webs animadas. El usuario demandaba m\u00e1s velocidad y accesibilidad de contenidos. Cada vez exist\u00edan m\u00e1s dispositivos y era necesario empezar a trabajar en tecnolog\u00edas que permitieran ser visualizadas desde cualquier medio.<\/p>\n

Lejos quedan los proyectos web realizados s\u00f3lo en tecnolog\u00eda Flash. Os dejo este ejemplo <\/a>que desarrolle en su momento con un gran amigo ;-). Se podr\u00eda tardar mucho tiempo al hacerlo en HTML y JS.<\/p>\n

En fin, en esta entrada os voy a hablar de, c\u00f3mo comenzar a dar un nuevo cambio a la web, en concreto a crear de nuevo animaciones, sin perder SEO<\/strong>, sin perder la capacidad de ser reproducidos en cualquier Smartphone, tablet, sistema, a emplear tecnol\u00f3gicas est\u00e1ndar como el HTML y el JS, pero adem\u00e1s, \u00a0sin perder los conocimientos adquiridos<\/strong>\u00a0o Know How cuando\u00a0se desarrollaba empleando la herramienta de autor Flash.<\/p>\n

<\/p>\n

Adobe Edge Animate<\/strong>, permite realizar todo esto. De forma sencilla. Pero para ello tendremos que cambiar un “poco” la forma de pensar que us\u00e1bamos cuando trabaj\u00e1bamos\u00a0con Flash.<\/p>\n

\"Adobe-flash-2013\"\"Edge-animate\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\"Edge-Animate-Palencia\"<\/a><\/p>\n

\u00bfC\u00f3mo cambiar\u00a0con esta herramienta?. Edge, el futuro y substituto de Flash para la web.<\/strong><\/p>\n

Edge permite crear salidas tipo Responsive<\/strong>, adaptando el porcentaje del tama\u00f1o del stage<\/strong> o de los objetos generados. Es decir, podremos estirar los objetos e ir\u00e1n escal\u00e1ndose. Tambi\u00e9n las proporciones pueden ser fijas. Esto pasaba igual con las pel\u00edculas generadas en flash.<\/p>\n

Pero lo m\u00e1s importante es pensar que, \u00a0cuando se trabaja con esta herramienta, \u00a0estamos generando CSS y modificando las propiedades CSS de los elementos<\/strong>. A diferencia de flash gener\u00e1bamos\u00a0c\u00f3digo interno que modificaba vectores y posici\u00f3n de objetos.<\/p>\n

Es decir, si modificamos el tama\u00f1o de un objeto, veremos c\u00f3mo cambian sus atributos CSS; \u00a0height y width. El color, transparencia, posici\u00f3n, etc, corresponden con propiedades CSS. Al situar el rat\u00f3n encima de control para cambiar los datos, veremos cual es la propiedad CSS afectada.<\/p>\n

Algo parecido pasa con las fuentes. En flash, necesit\u00e1bamos que estuvieran instaladas o embebidas. Aqu\u00ed, podemos usarlas directamente de googlefonts u otro repositorio, porque internamente usa el @fontface<\/strong> y su descarga.<\/p>\n

Las animaciones pueden ser por movimiento, no he podido usar las opciones por forma, ya que, como creo que ocurre, no existe el concepto de curva bezier<\/a> para realizar las transformaciones aplicando c\u00e1lculos matem\u00e1ticos.<\/p>\n

Existe el concepto de s\u00edmbolo reutilizable. Tambi\u00e9n el\u00a0de l\u00ednea de tiempo, acciones y fotograma clave. Se pueden crear acciones programadas, pero ojo la potencia y n\u00famero de sentencias del editor es mejor respecto a lo que se pod\u00eda realizar con el lenguaje Actionscript.<\/p>\n

Es interesante observar que permite tener diversas lineas de tiempo animadas ejecut\u00e1ndose a la vez<\/strong> y siendo controladas por cabezales de reproducci\u00f3n diferentes<\/strong>. Pero las propiedades por cada interpolaci\u00f3n por movimiento deben ser establecidas de forma individual. Recuerda que realmente estas trabajando con propiedades CSS sin darte cuenta.<\/p>\n

Cada capa es un DIV<\/strong>, su orden es el mismo que que flash, en funci\u00f3n de la posici\u00f3n. Los IDs asociados a capas son muy importantes.<\/p>\n

El concepto de diamante<\/strong> o selector, implica que ese elemento tiene posibilidades de a\u00f1adir un fotograma clave a la escena<\/strong>. Y ojo, existen muchos objetos con diamantes.<\/p>\n

Como no posee t\u00e9cnicas de onion skinning<\/a><\/strong> para generar animaciones ni posibilidad de crear fotogramas por forma, tendremos que improvisar a mano esos efectos.<\/p>\n

Por otro lado, s\u00ed\u00a0dispone de animaciones por movimiento, a\u00f1adiendo efectos de gravedad y aceleraci\u00f3n<\/strong> a objetos a la escena, que realizarles\u00a0a mano ser\u00eda bastante m\u00e1s complicado.<\/p>\n

La programaci\u00f3n de acciones, lo que conocemos como lenguaje dentro de Edge, tiene todav\u00eda que mejorar. Posee un editor con diversos m\u00e9todos en Javascript. Manual o con asistente.<\/p>\n

\"Acciones-Edfe\"<\/p>\n

Ejemplo de Edge (mediante inserci\u00f3n de paquete .oam)<\/strong><\/p>\n

He creado el ejemplo inferior para ver las animaciones y reproducci\u00f3n del cabezal programada para detenerse en diferentes fotogramas clave. He insertado este shotcode para mostrar la animacion inferior. Para ello he empleado un plugin integrable en WordPress como explico m\u00e1s adelante.<\/p>\n

[edge_animation id=\"2\"]<\/pre>\n
[edge_animation id=”2″]<\/p>\n
\n
Edge y WordPress<\/strong><\/p>\n
Para poder integrar las animaciones en la web, existen tres<\/strong> v\u00edas.<\/p>\n
La primera<\/strong> de todas y m\u00e1s sencilla es mediante el uso de un plugin.
\nEdge Suite<\/strong><\/span>
\nhttps:\/\/wordpress.org\/plugins\/edge-suite\/<\/a><\/p>\n
Desde las opciones de Edge, apartado configuraci\u00f3n de la publicaci\u00f3n, tendremos que generar un paquete Edge Animate .OAM. Configurar la salida de este, que se encuentra formado por un \u00fanico archivo. Este archivo ser\u00e1 descomprimido por el plugin<\/strong> desde el backend, generando un ID EDGE y extraer\u00e1 el resto de archivos necesarios. Formados por CSS, HTML, y archivos js, entre ellos la libreria jQuery. Pero nosotros no nos tenemos que preocupar de nada.<\/p>\n
Os dejo un ejemplo de un archivo .OAM
\nPalencia-Edge.oam<\/a><\/p>\n
La inserci\u00f3n en nuestros proyectos puede ser mediante shortcodes<\/strong> incorporados en cada entrada y referenciados por el ID generado por el plugin.<\/p>\n
El tipo de\u00a0shortcode es:<\/p>\n
[edge_animation id=\"El numero de ID de la animacion\"].<\/pre>\n
El plugin detectar\u00e1 el \u00a0shortcode cuando el post sea renderizado y lo reemplazar\u00e1 de acuerdo a la posici\u00f3n.<\/p>\n
Ejemplos de uso del shortcode:<\/p>\n
[edge_animation id=\"3\" left=\"10\" top=\"20\"]<\/pre>\n
Este c\u00f3digo o shortcode coloca la animaci\u00f3n y lo ubica en la posici\u00f3n 10px de la izquierda y 20px de la parte superior o top.<\/p>\n
[edge_animation id=\"3\" left=\"auto\" top=\"10\"]<\/pre>\n
Esto centrar\u00e1 la composici\u00f3n horizontalmente.<\/p>\n
[edge_animation id=\"3\" left=\"auto\" top=\"10\" iframe=\"true\"]<\/pre>\n
Este fragmento renderizar\u00e1 la composici\u00f3n con un iFrame. \u00dasalo cuando sea absolutamente necesario. En ocasiones es la forma m\u00e1s f\u00e1cil de evitar conflictos con otras librer\u00edas JS y scripts.<\/p>\n
La segunda\u00a0<\/strong>es la inserci\u00f3n manual dentro de wordpress, editando los archivos de la cabecera o template asociado. El plugin posee una opci\u00f3n para repetir la animaci\u00f3n en todas las paginas si fuera preciso.<\/p>\n
Por ejemplo podremos editar la pagina header.php o single.php en funci\u00f3n del tema. Puedes colocar una funci\u00f3n especial en los ficheros de tu tema, que inyecta la composici\u00f3n Edge.<\/p>\n
if(function_exists('edge_suite_view')){ echo edge_suite_view(); }<\/pre>\n
El tercer m\u00e9todo<\/strong> es mediante la funci\u00f3n PHP<\/p>\n
if(function_exists(‘edge_suite_view’)){ echo edge_suite_view(); }<\/p>\n
1
<\/div><\/td>
edge_suite_view_inline($id, $css_style)<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
El segundo par\u00e1metro es opcional. Para asegurarse la carga puedes emplear una estructura condicional:<\/p>\n
\n\n
1
2
3
<\/div><\/td>
if(function_exists('edge_suite_comp_view_inline')){
\n     echo edge_suite_comp_view_inline(1);
\n   }<\/div><\/td><\/tr><\/tbody><\/table><\/div>\n\n<\/pre>\n
El numero 1 es el ID para hacer referencia.<\/p>\n
\"Paquete-oam-wordpress\"<\/a>
Muestra las opciones de exportaci\u00f3n de la publicaci\u00f3n<\/p><\/div>\n
 <\/p>\n
\"Importar-oam\"<\/a><\/p>\n
\"insertar-edge\"<\/a>
Muestra los IDs disponibles en la parte inferior de la entrada<\/p><\/div>\n
 <\/p>\n
Edge e inserci\u00f3n manual fuera de WordPress<\/strong><\/p>\n
Edge nos genera al igual que flash una p\u00e1gina HTML, pero posee otros archivos como im\u00e1genes, JS y Librerias. Flash generaba el objeto compilado .swf. En este caso, el tipo de inserci\u00f3n es el mismo, pero mediante el empleo de la estructura <iframe><\/p>\n
iFrame<\/strong> se empleaba en el HTML generado en flash, con muchos par\u00e1metros.<\/p>\n
Tendremos que subir todos los archivos edge y referenciarles mediante una inclusi\u00f3n con IFRAME<\/p>\n
Ejemplo de inserci\u00f3n manual usando un iframe:<\/strong><\/p>\n
El la l\u00ednea inferior muestro c\u00f3mo insertar el propio objeto inferior EDGE<\/strong>. Puedes apreciar que al ser una inclusi\u00f3n directa la carga parece algo m\u00e1s r\u00e1pida.<\/p>\n
<iframe src='http:\/\/www.palentino.es\/oams\/palencia\/index.html' width='100%' height='600px' scrolling='no' frameBorder='0' ><\/iframe><\/pre>\n
 <\/p>\n