{"id":4,"date":"2013-07-04T17:09:35","date_gmt":"2013-07-04T17:09:35","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/scriverquodmotus\/?p=4"},"modified":"2013-07-04T20:15:53","modified_gmt":"2013-07-04T20:15:53","slug":"una-mirada-a-adobe-edge","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/scriverquodmotus\/2013\/07\/04\/una-mirada-a-adobe-edge\/","title":{"rendered":"Una mirada a Adobe Edge"},"content":{"rendered":"

Por Sheila Rivera A.<\/em>
\n______________________<\/p>\n

En el a\u00f1o 2011 Adobe Systems<\/em> lanz\u00f3 al mercado la versi\u00f3n de prueba de Adobe Edge<\/em>; un conjunto de herramientas destinadas al dise\u00f1o web multimedia e interactivo, compatible con los diferentes dispositivos que hay en el mercado; que hace uso de c\u00f3digo HTML5, JavaScript, JQuery\u00a0 y CSS3. Esta versi\u00f3n estuvo abierta durante 152 d\u00edas.<\/p>\n

Actualmente estas herramientas est\u00e1n disponibles en la nube (Adobe Cloud<\/em>) y siguen siendo gratuitas, aunque hay ciertos requisitos para su instalaci\u00f3n. Las herramientas incluidas en Edge son: Inspect, Reflow, Code, Typekit, Phone Gap Build, Web Fonts, y Anaimate CC.<\/p>\n

\"\"<\/p>\n

Este \u00faltimo, Adobe Edge Animate CC, es como su nombre lo indica, la herramienta destinada a hacer animaciones de car\u00e1cter profesional, en c\u00f3digo HTML5 nativo y sus compatibles antes mencionados.\u00a0 Y es por estas razones que resulta ser un nuevo foco de desarrollo dentro de los software de autor\u00eda. Veamos pues, que nos depara el futuro; demos una mirada al interior de Adobe Edge Animate o Adobe Edge como se lo conoce com\u00fanmente.<\/p>\n

Cuando iniciamos el programa, por primera vez, podemos ver una interfaz bastante limpia y funcional. Algo interesante de esta primera pantalla que nos presenta Edge Animate es un panel tipo pesta\u00f1a llamado \u201cPrimeros Pasos\u201d donde encontraremos algunas opciones de tutoriales interactivos para familiarizarnos con la herramienta y tener una idea clara de su potencial.<\/p>\n

En la misma pantalla de bienvenida tambi\u00e9n localizamos lo necesario para empezar a trabajar, \u2018Crear Nuevo\u2019, \u2018Abrir Archivo\u2019, y \u2018Abrir Recientes\u2019. Y con esta simpleza estamos dentro en nuestro primer archivo creado en Edge Animate.<\/p>\n

Ya dentro, Edge no pierde su estilo estrictamente funcional. La organizaci\u00f3n de su interface es bastante similar a la de After Effects <\/em>y que al igual que en resto de los programas de Adobe, es totalmente modificable. En la parte superior tenemos la t\u00edpica barra de Men\u00fas. Bajo ella una barra de Herramientas muy b\u00e1sicas. Tenemos tambi\u00e9n, un panel de Propiedades contextuales a la izquierda, la mesa de trabajo al centro, otro panel de Elementos situado a la derecha; y bajo el, la Biblioteca, y por \u00faltimo, la L\u00ednea de Tiempo en la parte inferior.<\/p>\n

\"\"<\/p>\n

Para lograr un resultado profesional, esta herramienta ofrece, al igual que se hace en Flash, una variedad de opciones manipulables. Estas no son para nada complicadas; pues el programa presenta una interfaz muy intuitiva. En el escenario, por ejemplo, nos permite crear lo que m\u00e1s se adapta a nuestras necesidades. Para esto, podemos jugar con el tama\u00f1o, y proporci\u00f3n, el color, y las opciones de visualizaci\u00f3n.<\/p>\n

Aunque en Edge se pueden importar y animar una gran variedad de elementos, como im\u00e1genes y objetos vectoriales, svg, jpg, png, etc.; las herramientas para crear elementos nativos de HTML5, son solo 4; rect\u00e1ngulo, redondeado, elipse y texto. Sin embargo estos son totalmente modificables, desde el panel de propiedades de forma muy sencilla para nosotros; y el software lo hace usando el c\u00f3digo y estilos CSS.<\/p>\n

A la hora de ordenar los objetos; importados o creados, nos es de mucha ayuda el panel de Elementos. Este nos muestra jer\u00e1rquicamente, que cosas tenemos y en qu\u00e9 orden, \u00a0en nuestro archivo, independientemente del tiempo en el que aparecen en el escenario. Lo que nos permite reordenarlos, renombrarlos, deshabilitar su visibilidad, crear dependencia a otros objetos o, bloquearlos en caso de ser necesario, seg\u00fan nuestra conveniencia.<\/p>\n

Tambi\u00e9n nos puede ser muy \u00fatil la Biblioteca, que como en el caso de Flash, nos permite almacenar objetos que utilizaremos repetidamente en nuestra animaci\u00f3n. Lo que agilita el trabajo para nosotros y optimiza los recursos. Esta, est\u00e1 organizada en tres pesta\u00f1as principales; Recursos, S\u00edmbolos y Fuentes. Seguramente la usaremos.<\/p>\n

Sin embargo, a la hora de hacer una animaci\u00f3n; es imprescindible usar la L\u00ednea de tiempo. Esta nos permite ubicar a los objetos en tiempo y espacio; sus movimientos, transiciones y cambios. Todo esto, de forma tan sencilla como en Flash; creando fotogramas claves, y sus respectivas automatizaciones. Una ventaja sobre Flash, que presenta Edge, son las opciones de Fotograma clave autom\u00e1tico y Transici\u00f3n autom\u00e1tica; que podemos activar y desactivar a conveniencia. Estas nos ahorran la molestia de crear manualmente keyframes<\/em>, pues basta con ubicar el cabezal en una posici\u00f3n diferente en la l\u00ednea de tiempo y mover el elemento a la posici\u00f3n que deseamos este en dicho fotograma; y, el fotograma clave se crea autom\u00e1ticamente junto con su respectiva transici\u00f3n; muy al estilo de After Effects.<\/p>\n

Adem\u00e1s, presenta una facilidad incre\u00edble para trasladar o cambiar el tama\u00f1o de una animaci\u00f3n ya hecha en la l\u00ednea de tiempo; basta seleccionar y arrastrar. Y, trabajando junto a la l\u00ednea de tiempo y las propiedades de los elementos, podemos \u00a0crear o \u00a0modificar paths<\/em>, o rutas de movimiento, incluyendo tambi\u00e9n su aceleraci\u00f3n y desaceleraci\u00f3n.<\/p>\n

Todos estos paneles act\u00faan en conjunto, como en los diferentes programas de Adobe. Es decir, si seleccionamos un objeto en el panel de elementos; este tambi\u00e9n se selecciona en la l\u00ednea de tiempo, y aparecen sus propiedades en el respectivo panel. Estas funciones sincronizadas hacen de nuestro trabajo m\u00e1s fluido, r\u00e1pido y sencillo.<\/p>\n

Para visualizar nuestro trabajo tenemos incluso mas facilidades de las que nos brinda Flash. Podemos activar la reproducci\u00f3n; pulsando la barra espaciadora o usando los botones de reproducci\u00f3n, situados en la parte superior de la l\u00ednea de tiempo. O, si deseamos podemos ir al men\u00fa Archivo y seleccionar \u2018ver vista previa en el explorador\u2019.\u00a0 Y, guardar nuestro archivo no es mas complicado que esto. Cabe mencionar que el archivo final se guarda con extensi\u00f3n \u2018.html\u2019, y va acompa\u00f1ado de los archivos que contienen los c\u00f3digos JavaScript y CSS; que son necesarios para su reproducci\u00f3n en la web.<\/p>\n