Por Sheila Rivera A.
______________________

En el año 2011 Adobe Systems lanzó al mercado la versión de prueba de Adobe Edge; un conjunto de herramientas destinadas al diseño web multimedia e interactivo, compatible con los diferentes dispositivos que hay en el mercado; que hace uso de código HTML5, JavaScript, JQuery  y CSS3. Esta versión estuvo abierta durante 152 días.

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

Este último, Adobe Edge Animate CC, es como su nombre lo indica, la herramienta destinada a hacer animaciones de carácter profesional, en código HTML5 nativo y sus compatibles antes mencionados.  Y es por estas razones que resulta ser un nuevo foco de desarrollo dentro de los software de autoría. Veamos pues, que nos depara el futuro; demos una mirada al interior de Adobe Edge Animate o Adobe Edge como se lo conoce comúnmente.

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ña llamado “Primeros Pasos” donde encontraremos algunas opciones de tutoriales interactivos para familiarizarnos con la herramienta y tener una idea clara de su potencial.

En la misma pantalla de bienvenida también localizamos lo necesario para empezar a trabajar, ‘Crear Nuevo’, ‘Abrir Archivo’, y ‘Abrir Recientes’. Y con esta simpleza estamos dentro en nuestro primer archivo creado en Edge Animate.

Ya dentro, Edge no pierde su estilo estrictamente funcional. La organización de su interface es bastante similar a la de After Effects y que al igual que en resto de los programas de Adobe, es totalmente modificable. En la parte superior tenemos la típica barra de Menús. Bajo ella una barra de Herramientas muy básicas. Tenemos también, 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 último, la Línea de Tiempo en la parte inferior.

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ás se adapta a nuestras necesidades. Para esto, podemos jugar con el tamaño, y proporción, el color, y las opciones de visualización.

Aunque en Edge se pueden importar y animar una gran variedad de elementos, como imágenes y objetos vectoriales, svg, jpg, png, etc.; las herramientas para crear elementos nativos de HTML5, son solo 4; rectángulo, 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ódigo y estilos CSS.

A la hora de ordenar los objetos; importados o creados, nos es de mucha ayuda el panel de Elementos. Este nos muestra jerárquicamente, que cosas tenemos y en qué orden,  en 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ún nuestra conveniencia.

También nos puede ser muy útil la Biblioteca, que como en el caso de Flash, nos permite almacenar objetos que utilizaremos repetidamente en nuestra animación. Lo que agilita el trabajo para nosotros y optimiza los recursos. Esta, está organizada en tres pestañas principales; Recursos, Símbolos y Fuentes. Seguramente la usaremos.

Sin embargo, a la hora de hacer una animación; es imprescindible usar la Línea 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ático y Transición automática; que podemos activar y desactivar a conveniencia. Estas nos ahorran la molestia de crear manualmente keyframes, pues basta con ubicar el cabezal en una posición diferente en la línea de tiempo y mover el elemento a la posición que deseamos este en dicho fotograma; y, el fotograma clave se crea automáticamente junto con su respectiva transición; muy al estilo de After Effects.

Además, presenta una facilidad increíble para trasladar o cambiar el tamaño de una animación ya hecha en la línea de tiempo; basta seleccionar y arrastrar. Y, trabajando junto a la línea de tiempo y las propiedades de los elementos, podemos  crear o  modificar paths, o rutas de movimiento, incluyendo también su aceleración y desaceleración.

Todos estos paneles actúan en conjunto, como en los diferentes programas de Adobe. Es decir, si seleccionamos un objeto en el panel de elementos; este también se selecciona en la línea de tiempo, y aparecen sus propiedades en el respectivo panel. Estas funciones sincronizadas hacen de nuestro trabajo más fluido, rápido y sencillo.

Para visualizar nuestro trabajo tenemos incluso mas facilidades de las que nos brinda Flash. Podemos activar la reproducción; pulsando la barra espaciadora o usando los botones de reproducción, situados en la parte superior de la línea de tiempo. O, si deseamos podemos ir al menú Archivo y seleccionar ‘ver vista previa en el explorador’.  Y, guardar nuestro archivo no es mas complicado que esto. Cabe mencionar que el archivo final se guarda con extensión ‘.html’, y va acompañado de los archivos que contienen los códigos JavaScript y CSS; que son necesarios para su reproducción en la web.

Como vemos, Adobe Edge Animate tiene su principal fortaleza en su facilidad a la hora de exportar el trabajo final; directamente al código básico de la mayoría de las páginas web actuales, HTML5. Esto sin necesidad de ningún plugin; como en el caso de nuestro querido y tan útil Flash. Es, por tanto, una poderosa herramienta que bien podría llegar a ser la opción predilecta en animación; de los desarrolladores dentro de la revolución HTML5.

Por estas razones, dado que el mundo tecnológico corre vertiginosamente, y si nosotros deseamos correr con el y ofrecer un producto funcional y atractivo, que pueda visualizarse con facilidad desde cualquier dispositivo; es necesario que nos integremos a esta nueva tecnología y empecemos a hacer uso de ella en nuestros proyectos.  Seguramente obtendremos la satisfacción que sucede a la evolución.

______________________

Fuentes:

Adobe.com, Adobe Creative Cloud, Edge Animate CC, https://creative.adobe.com/products/animate#
AdobeTv, Introducing Adobe Edge Animate, http://tv.adobe.com/watch/adobe-evangelists-paul-trani/introducing-adobe-edge-animate/
Wikipedia,  Adobe Edge, http://en.wikipedia.org/wiki/Adobe_Edge
Wikipedia,  Adobe Edge Animate, http://en.wikipedia.org/wiki/Adobe_Edge_Animate