A. Introducción a Adobe Edge Animate

Este capítulo profundizará en Adobe Edge Animate, concentrándose en la historia del proyecto Edge Animate, observando las tecnologías detrás de Edge Animate, comparando Edge Animate con Flash Professional (ya que las dos aplicaciones comparten muchas similitudes), proporcionando una descripción general completa de muchas funciones de la interfaz de la aplicación Edge Animate y, finalmente, echando un vistazo breve a la pantalla de bienvenida de Edge Animate y cómo crear un nuevo proyecto.

Adobe Edge Animate cuenta con una interfaz de usuario moderna y fácil de usar que debería resultar familiar para los usuarios de las aplicaciones de Adobe Creative Suite. Examinaremos cada aspecto de la interfaz, incluidas las siguientes opciones:

• Características de la interfaz
• Menús de la aplicación
• La barra de herramientas
• Escenario
• Línea de tiempo
• Paneles de Edge Animate

Después de procesar la información presentada aquí, deberíamos tener una comprensión clara de la interfaz como un todo y también de la utilidad de sus aspectos individuales.

La historia de Adobe Edge Animate

Durante la conferencia Adobe MAX 2010 en Los Ángeles, California, los ingenieros de Adobe subieron al escenario frente a más de 5000 asistentes para presentar un prototipo de software creado en Adobe AIR. Este software permitía a un usuario ajustar las propiedades de los activos importados de una manera muy similar al flujo de trabajo de Flash Professional, pero en lugar de generar SWF para apuntar a Flash Player, Adobe Edge Prototype realmente generaba contenido a HTML, CSS y JavaScript para su reproducción en un navegador web, sin necesidad de complementos adicionales.

Adobe AIR es una solución para crear aplicaciones de escritorio y móviles basadas en la tecnología de la plataforma Flash. Muchos productos de Adobe se crean con AIR, incluidas las nuevas aplicaciones táctiles para usar en tabletas y Adobe Muse. Visite http://www.adobe.com/products/air.html.

Si bien Edge Prototype ciertamente parecía muy diferente de lo que conocemos hoy como Adobe Edge Animate, los asistentes a MAX se entusiasmaron con las perspectivas de tal herramienta. Este fue el primer vistazo de lo que eventualmente se convertiría en el producto que conocemos hoy como Adobe Edge Animate. Desde entonces, Adobe ha lanzado actualizaciones periódicas de las versiones preliminares de Adobe Edge en Adobe Labs, con la intención de recopilar comentarios de los usuarios de forma temprana y frecuente para que el producto se ajuste a las expectativas de los usuarios y se convierta en una adición útil a Creative Suite.

Con la larga historia de movimiento e interactividad de Adobe en productos como Director, After Effects y Flash Professional, Edge Animate tiene un excelente linaje detrás, y aunque crear contenido como este que se dirige a HTML es bastante nuevo, las herramientas y técnicas para crear este material nos llega por un camino muy transitado.

El funcionamiento interno de Edge Animate

Adobe Edge Animate se basa en gran medida en tres tecnologías relacionadas: HTML5, CSS3 y JavaScript. El doctype predeterminado para los proyectos creados por Edge Animate es HTML5; todas las transformaciones 2D, translate(), rotate(), scale() y skew() por ejemplo, se renderizan como CSS3 (para navegadores modernos). También hay bibliotecas de JavaScript específicas que juegan un papel esencial para que todo esto funcione en conjunto. Estos incluyen jQuery y Adobe Edge Animate Runtime.

Para que el contenido de Edge Animate funcione correctamente, todos estos componentes deben estar en su lugar correcto y hay ciertos archivos que no deben editarse una vez generados por la aplicación. La propia aplicación Edge Animate también requiere que un tipo de archivo .an esté presente para crear y editar un proyecto.

Cualquier archivo .html también se puede abrir dentro de Edge Animate y se puede trabajar en él. Se creará un archivo .an y las importaciones asociadas al guardar y publicar.

HTML, CSS y JavaScript

Edge Animate se dirige principalmente a HTML para su visualización, compatible con CSS y JavaScript. ¿Por qué? Bueno, el hecho es que estas tecnologías finalmente se han vuelto capaces de manejar contenido rico en movimiento e interactivo y, como estas son las tecnologías centrales de la Web, tiene sentido usarlas siempre que podamos.

Echemos un vistazo rápido a estas tres especificaciones a la luz de su función principal en la Web y su relación entre sí.

HTML

El lenguaje de marcado de hipertexto (HTML) es el núcleo de la Web. Con la especificación HTML5 (aún en borrador), no solo tenemos una evolución orgánica del lenguaje a través de etiquetas semánticas adicionales, sino también un nuevo conjunto de API que pueden permitir que los elementos dentro de los documentos se vean influenciados en gran medida a través de JavaScript.

CSS

Las hojas de estilo en cascada (CSS) determinan en gran medida cómo se estructura y diseña visualmente un sitio web. Con la especificación CSS3 (aún en borrador), los diseñadores aún pueden usar estas especificaciones en todos los navegadores modernos para influir en la forma en que se comportan ciertos elementos.

JavaScript

El lenguaje JavaScript es un superconjunto de ECMAScript (ECMA-262) Edición 3, formalizado por ECMA International, un organismo de estándares mundial. La última versión del lenguaje es JavaScript 1.8.5, pero las mejoras reales en los últimos años provienen de los propios fabricantes de navegadores, que buscan mejorar la ejecución de JavaScript mediante el desarrollo de motores de JavaScript más rápidos.

Entonces, cuando miramos un documento HTML producido por Edge Animate, vemos el siguiente código:

HTML

<div id="Stage" class="EDGE-1632861112">
</div>

Este es el elemento de símbolo del escenario dentro del cual se inyectan todos los demás elementos en tiempo de ejecución, mediante el uso de bibliotecas de JavaScript.

Este puede ser el único elemento HTML que verá producido por Edge Animate. Todo lo demás se maneja a través de objetos JSON e incluye (características) de JavaScript especializadas. Hay una opción para renderizar otros elementos como HTML estático, pero eso es opcional.

Cómo se usa jQuery en Edge Animate

No es exagerado afirmar que jQuery es el marco de JavaScript más popular en uso en la actualidad. Muchos marcos de JavaScript similares surgieron en 2007 con la aparición de JavaScript asíncrono y XML (AJAX) y métodos de transferencia de datos HTML más dinámicos. En un momento dado, había más de 250 de estos marcos, pero con el paso del tiempo, solo unos pocos permanecen en desarrollo activo.

Como se indica en el sitio web del proyecto, jQuery es una biblioteca de JavaScript rápida y concisa que simplifica el recorrido de documentos HTML, el manejo de eventos, la animación y las interacciones Ajax para ¹ un rápido desarrollo web. En pocas palabras, jQuery tiene como objetivo hacer que el uso de JavaScript sea más accesible para los no programadores o aquellos que no están familiarizados con el lenguaje, hacerlo más consistente en todos los navegadores y más poderoso en su simplicidad. La documentación de jQuery se puede encontrar en línea en http://docs.jquery.com/.  

1. www.offidocs.com

www.offidocs.com

Adobe Edge Animate aprovecha jQuery y se basa en él dentro de Adobe Edge Animate Runtime y también hace uso de la biblioteca de aceleración jQuery cuando se trata de movimiento. Al abrir cualquier documento HTML generado por Edge Animate, podemos ver estas inclusiones en el encabezado de nuestro documento publicado a través del precargador de la biblioteca:

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>AnimateProject</title>
<script type="text/javascript" charset="utf-8"
src="AnimateProject_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-1159339764 { visibility:hidden; }
</style>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-1159339764">
</div>
</body>
</html>

Otros productos de Adobe, como Adobe Dreamweaver, también hacen un uso intensivo de jQuery. De hecho, Adobe contribuye activamente a las bibliotecas jQuery y jQuery Mobile.

JSON

La notación de objetos JavaScript (JSON) es un formato de intercambio de datos que se utiliza para intercambiar datos de un sistema a otro. En los últimos años, ha sido adoptado por una variedad de lenguajes y sistemas tanto para la transmisión como para el almacenamiento de datos. En cierto modo, es muy similar a XML. A diferencia de XML, JSON no es un lenguaje de marcado, sino que almacena datos en objetos y estructuras representados en pares nombre/valor. Edge Animate utiliza JSON para almacenar definiciones de elementos y atributos con un proyecto.

Por ejemplo, el siguiente fragmento JSON representa un rectángulo en el escenario:

JSON

content: {
dom: [
{
id:'Rectangle',
type:'rect',
rect:['25px','40px','211px','147px','auto','auto'],
fill:["rgba(192,192,192,1)"],
stroke:[0,"rgba(0,0,0,1)","none"]
}],
symbolInstances: [
]
}

Para obtener más información sobre JSON, visite http://www.json.org/.

Adobe Edge Animate Runtime

El conjunto de bibliotecas de JavaScript que se utilizan en un proyecto de Edge Animate se denomina colectivamente Adobe Edge Animate Runtime. Normalmente, cuando pensamos en un tiempo de ejecución, estamos hablando de un software como Adobe Flash Player, Adobe Integrated Runtime (AIR) o Java Runtime Environment. Todos estos son programas de software independientes que permiten la reproducción de aplicaciones y otro contenido que se dirige a estos tiempos de ejecución específicos. Adobe Edge Animate Runtime es muy diferente en el sentido de que es un conjunto de archivos que admite el contenido definido a través de la aplicación Adobe Edge Animate, pero incluso estas bibliotecas dependen de otro software para que se ejecuten correctamente: el navegador web.

Si observa dentro de un archivo HTML producido por Edge Animate, verá una inclusión de JavaScript que maneja las bibliotecas de tiempo de ejecución incluidas dentro del encabezado de ese documento, como se muestra en el siguiente código:

HTML

<script type="text/javascript" charset="utf-8"
src="AnimateProject_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-1159339764 { visibility:hidden; }
</style>

Adobe Edge Animate y Adobe Flash Professional
Muchos han pedido la muerte de Flash Player desde la carta de 2010 "Reflexiones sobre Flash" del fallecido Steve Jobs de Apple, Inc. Siempre ha parecido una propuesta tonta; HTML es el estándar y Flash Player es el mecanismo que puede ir más allá de ese estándar. Ambas tecnologías nunca estuvieron destinadas a competir entre sí, sino que deberían considerarse complementarias.
Este sigue siendo el caso hoy en día, a pesar de que HTML, en este punto, finalmente ha asumido algunas de las responsabilidades de las que Flash Player ha sido portador durante mucho tiempo. Flash también ha evolucionado con versiones recientes del tiempo de ejecución para centrarse en video avanzado, juegos con calidad de consola y aplicaciones móviles enriquecidas a través de Adobe AIR.
En términos de Edge Animate, tenemos un producto que tiene como objetivo tomar algunas de estas tareas de Flash Player y hacerlas verdaderamente multiplataforma, incluso en sistemas operativos que no son compatibles con Flash Player basado en navegador, como Apple iOS o Windows Phone 7. La belleza de Edge Animate como aplicación es que toma prestado mucho de las estructuras y paradigmas que han sido establecidos por Flash Professional, lo que hace que las habilidades se puedan transferir fácilmente de una aplicación a otra.
Si bien Adobe Flash Player se ha puesto a disposición de muchos dispositivos Android, Adobe ha tomado la decisión de detener los esfuerzos de ingeniería para el Flash Player móvil que se ejecuta en el navegador. Esto no afecta la disponibilidad del tiempo de ejecución en los dispositivos compatibles existentes, pero plantea un desafío al considerar los próximos requisitos de hardware y sistema operativo.
¿Es Edge Animate un producto que compite con Flash Professional?
Esto depende del tipo de proyecto con el que estemos trabajando. Si buscamos crear una página de destino de un sitio web, un sistema de menús enriquecido o un anuncio, entonces sí, Edge Animate es definitivamente un competidor de Flash Professional. Sin embargo, es importante recordar que Adobe produce muchas herramientas diferentes que producen resultados similares; basta con mirar Photoshop y Fireworks para ver ejemplos obvios de esto.
Al evaluar Edge Animate en comparación con Flash Professional, debemos tener en cuenta qué tan nuevo es Edge Animate y los conceptos que lo rodean. Flash Professional tiene más de 15 años de historia a sus espaldas. No está restringido por organismos de estándares y tiene un historial de rápida innovación al impulsar el contenido basado en la web más allá de lo que HTML es tradicionalmente capaz de hacer. Flash Player también se beneficia de la compilación a un binario autónomo (.swf) y el poderoso lenguaje de programación ActionScript 3.0.
Si bien Flash Professional y Edge Animate pueden hacer algunas cosas de una manera muy similar y pueden producir resultados similares en términos de movimiento e interactividad básica, para cualquier cosa que vaya más allá de lo que HTML y las tecnologías relacionadas pueden manejar por sí solas, el contenido basado en Flash sigue siendo una poderosa extensión para juegos con calidad de consola, soluciones de video avanzadas y otros casos de uso específicos.
Comparaciones con Flash Professional
Con la expectativa de que muchos diseñadores que se acerquen a Edge Animate lo harán con experiencia en Flash Professional, muchas de las herramientas en Edge Animate comparten convenciones de nomenclatura y funcionales utilizadas en esa aplicación.
Escenario
El panel Escenario se puede considerar como el lienzo sobre el que podemos pintar nuestras escenas, o el marco dentro del cual tiene lugar toda nuestra acción. El panel Escenario en Edge Animate difiere de esto en Flash Professional, en la forma en que se controlan sus dimensiones y se aplica el color de fondo porque en Edge Animate, el Escenario es solo otro símbolo.
Línea de tiempo
Si bien Flash Professional y Edge Animate comparten el concepto de una línea de tiempo, ahí es donde terminan las similitudes. La línea de tiempo de Flash Professional se basa en fotogramas, mientras que Edge Animate incluye una línea de tiempo basada en el tiempo, similar a la que se encuentra en After Effects. Al final, estas son solo dos formas de trabajar con el movimiento a través del tiempo; en esencia, esto es con lo que estamos tratando en cualquier caso.
Fotogramas clave
Tanto Flash Professional como Edge Animate brindan al usuario la capacidad de definir fotogramas clave en todo el proyecto. Los fotogramas clave de la línea de tiempo son puntos de distinción que definen o modifican varias propiedades de un elemento a través del tiempo. Esta es la forma más básica en que se logra el movimiento en cualquiera de los programas. Los fotogramas clave en Edge Animate se comportan en gran medida como los de Adobe After Effects.
Etiquetas
Las etiquetas son un mecanismo mediante el cual podemos marcar la línea de tiempo en ciertos puntos. Estos se pueden utilizar tanto para referencia visual durante la creación como a través de código para navegar a ciertas áreas de la línea de tiempo en función de la propia etiqueta.
Símbolos
Los símbolos son activos reutilizables cuyas instancias se pueden utilizar en un proyecto. En Flash Professional, estos pueden ser símbolos MovieClip, Button o Graphics. En Edge Animate, no existe tal distinción, aunque los símbolos de Edge Animate son más similares a los símbolos MovieClip de Flash en ejecución.
Biblioteca
Flash Professional organiza símbolos, fuentes y activos dentro de la biblioteca del proyecto. El panel Biblioteca adopta un enfoque organizativo para proporcionar un fácil acceso a los símbolos. Con Edge Animate, tenemos un concepto similar que también almacena cualquier símbolo, fuente y activo de imagen creado para un proyecto dentro de la biblioteca de ese proyecto, expuesto a través del panel Biblioteca.
Acciones
Las acciones en Edge Animate se pueden comparar con las de Flash Professional (Macromedia Flash 4). Cada programa tiene un panel Acciones que se puede abrir y cerrar según sea necesario para acceder a instrucciones simples del programa. En Edge Animate, podemos aplicar acciones a elementos en el escenario y a la línea de tiempo a través de desencadenantes.
Como podemos ver en la siguiente captura de pantalla, muchos de los paneles presentes en Edge Animate se derivan de los que existen en Flash Professional. Esto hace que la transición sea más sencilla para los diseñadores de Flash de lo que sería de otra manera.
Instalación de Adobe Edge Animate y primeros pasos
Antes de continuar, queremos asegurarnos de que Adobe Edge Animate esté instalado y funcionando correctamente en nuestro sistema. También echaremos un vistazo breve a la interfaz de Edge Animate y veremos cómo crear un nuevo proyecto.
Instalación de Edge Animate
Para completar las demostraciones y los ejemplos incluidos en este libro, deberá adquirir una copia de Adobe Edge Animate. Edge Animate 1.0 se puede instalar sin cargo como parte de una suscripción gratuita a Creative Cloud.
Para descargar Edge Animate con una suscripción existente, puede usar http://creative.adobe.com/. Para crear una nueva cuenta de inicio de Creative Cloud sin cargo, vaya a http://html.adobe.com/edge/animate/ y siga las instrucciones proporcionadas después de hacer clic en el botón Comenzar.
Adobe Edge Animate se puede instalar en los siguientes sistemas:

Microsoft Windows 7

Apple Mac OS X [10.6]

La instalación de Edge Animate en Microsoft Windows XP o Apple MAC OS X [10.5] no es compatible de ninguna manera.
Para descargar e instalar Edge Animate en una computadora local, debemos utilizar el administrador de descargas de Adobe disponible para nosotros a través de Creative Cloud.
Inicie sesión en Creative Cloud a través de https://creative.adobe.com/ y haga clic en Aplicaciones. Verá la siguiente ventana:
Ahora estaremos en la pantalla de aplicaciones. Desplácese hacia abajo para ver Edge Tools & Services y ubique la entrada Edge Animate:
Haga clic en Descargar y Adobe Application Manager se descargará e instalará en su computadora local. Desplácese hacia abajo en la lista de aplicaciones para ubicar Edge Animate y haga clic en Instalar. Edge Animate se descargará e instalará automáticamente.
Ahora estamos listos para comenzar a usar Adobe Edge Animate. Busque el icono de inicio en su máquina para ejecutar la aplicación o simplemente haga clic en Iniciar aplicación desde el administrador de descargas.
Tenga en cuenta que también podemos descargar versiones de prueba de muchas aplicaciones de Creative Cloud a través de esta misma interfaz, si lo desea.
La pantalla de bienvenida de Edge Animate
Al iniciar la aplicación Adobe Edge Animate, se nos presentará una pantalla de bienvenida. Esto es muy similar a las pantallas de bienvenida disponibles en otras aplicaciones de Adobe, ya que nos presentará una serie de opciones para comenzar a usar el producto:
Estas opciones incluyen las siguientes:

Abrir archivo ...: Cuando elegimos esta opción, se nos abrirá un cuadro de diálogo que muestra el sistema de archivos local. Esto nos permite navegar por el sistema de archivos para ubicar proyectos de Edge Animate que ya están en construcción. Los documentos de Edge Animate tienen la extensión de archivo .an.

Crear nuevo: esta opción nos permitirá crear un nuevo proyecto de Edge Animate. Detallaremos las especificaciones de esto en el próximo tema.

Archivos recientes: cualquier proyecto de Edge Animate que se haya abierto previamente dentro de la aplicación se enumerará aquí. Abrir estos proyectos es tan simple como hacer clic en el nombre del proyecto.

Borrar archivos recientes: al elegir esta opción, se borrará la lista de archivos recientes tanto de la pantalla de bienvenida como del menú de la aplicación.
Primeros pasos: Esta área muestra una serie de lecciones a las que se puede acceder desde el propio Edge Animate. Al seleccionar cualquiera de estas lecciones, se abrirá el panel Lecciones y nos permitirá seguir un proyecto de muestra, aprendiendo sobre la marcha.
Características principales: Aquí se enumeran varias de las características que Edge Animate presenta para nuestro uso y se proporciona un enlace a las notas de la versión completa.
Recursos: Esto proporciona acceso a una serie de recursos en línea, que incluyen documentación, foros de discusión, ejemplos de proyectos y más.
Silencioso: Esta opción simplemente silencia la pantalla de bienvenida y elimina cualquier elemento dentro de esta área de la vista.
Otras opciones: La pantalla de bienvenida también incluye algunos botones de redes sociales que permiten a los usuarios conectarse con el equipo de Edge Animate en Facebook y Twitter.

Creación de un nuevo proyecto de Edge Animate
Hay dos formas de crear un nuevo proyecto de Edge Animate. La primera opción es simplemente hacer clic en Crear nuevo en la pantalla de bienvenida. Esto creará inmediatamente un nuevo proyecto de Edge Animate con un escenario en blanco. El segundo método 1  para crear un nuevo proyecto de Edge Animate es a través del menú de archivo. Simplemente hacer clic en Archivo y luego en Nuevo tendrá exactamente el mismo efecto.   1. helpx.adobe.com 
helpx.adobe.com

{nombre_del_proyecto}.an: El archivo .an producido junto con el proyecto simplemente conserva las propiedades dentro del entorno de creación. Algunos ejemplos de estas propiedades incluyen si ciertos elementos se giran hacia abajo a través del panel Elementos, colores específicos y fuentes utilizadas en el proyecto. Este archivo permite que la configuración del entorno se conserve entre sesiones.

{nombre_del_proyecto}.html: Este archivo .html tiene muchos propósitos. Es el archivo utilizado dentro de un proyecto de Edge Animate que sirve para vincular todos los archivos de Edge Animate Runtime y específicos del proyecto. Este es también el archivo que se abre de forma eficaz dentro del entorno de creación. Finalmente, ejecutar este archivo en un navegador nos permite previsualizar nuestro proyecto completo.

{nombre_del_proyecto}_edge.js: Este es en realidad un archivo que contiene todas las estructuras JSON asociadas con un proyecto de Edge Animate, junto con algún código que vincula Edge Animate Stage a un elemento HTML especificado e inicializa el tiempo de ejecución. {nombre_del_proyecto}_edgeActions.js: Este archivo JavaScript contiene todas las instancias de acciones definidas dentro de la aplicación Edge Animate.

{nombre_del_proyecto}_edgePreload.js: Este archivo JavaScript sirve para cargar todos los demás archivos y vincularlos al proyecto en tiempo de ejecución.


jquery-{versión}.min.js: Esta es la biblioteca jQuery minimizada empaquetada junto con Edge Animate Runtime

jquery.easing.{versión}.js: Esta es la biblioteca de aceleración jQuery minimizada empaquetada junto con Adobe Edge Animate Runtime

edge.{versión}.min.js: Esta es la biblioteca minimizada de Adobe Edge Animate Runtime

json2.js: Este es un archivo auxiliar para navegadores antiguos


Primero ubique la opción de selección de espacio de trabajo dentro del menú de la aplicación Ventana. Haga clic en él para mostrar las opciones desplegables como se muestra en la siguiente captura de pantalla:
Alternativamente, podemos usar el atajo de teclado: Ctrl + N (para Windows) o Comando + N (para Mac).
Cada vez que creamos un nuevo documento, el ancho y la altura del escenario se dimensionarán automáticamente a la resolución de 550px de ancho por 400px de alto.
Cualquiera que sea el método que elija, ahora tendrá un nuevo proyecto abierto dentro de Edge Animate. Este proyecto se verá bastante escaso para empezar, ya que básicamente consiste en un solo símbolo de escenario en blanco. Este escenario es representativo del único elemento HTML <div> que podemos ubicar dentro del archivo HTML que produce Edge Animate al guardarlo, como se muestra en la siguiente captura de pantalla:
Después de que se haya creado nuestro proyecto, lo primero que debe hacer es guardar el documento. Para guardar un documento en Adobe Edge Animate, podemos ir al menú Archivo y elegir las opciones Guardar o Guardar como….
Guardar
Esta opción guardará el documento actual si se ha guardado previamente en el sistema de archivos, o le pedirá al usuario que proporcione un nombre de archivo y una ubicación para guardar el documento si se trata de un nuevo proyecto.
El atajo de teclado para esta opción es Ctrl + S (para Windows) o Comando + S (para Mac).
Guardar como…
Similar a la opción Guardar, proporciona la misma funcionalidad pero siempre le pedirá al usuario un nombre de archivo y una ubicación a través de un cuadro de diálogo del sistema. Esto es útil cuando se guardan versiones separadas del mismo proyecto, o cuando simplemente se desea guardar el proyecto en una nueva ubicación.
El atajo de teclado para esta opción es Ctrl + Shift + S (para Windows) o Comando + Shift + S (para Mac).
En el caso de un nuevo proyecto, cualquiera de las opciones nos proporcionará un cuadro de diálogo del sistema de archivos. Vemos en la captura de pantalla anterior que lo que estamos guardando es, en realidad, un archivo .html. Esto es algo importante para recordar sobre los proyectos de Edge Animate: cuando estamos trabajando en el entorno de creación de Edge Animate, realmente estamos trabajando en tiempo real con el contenido que se está produciendo.
Descarga del código de ejemplo
Puede descargar los archivos de código de ejemplo de todos los libros de Packt que haya comprado desde su cuenta en http://www.packtpub.com. Si compró este libro en otro lugar, puede visitar http://www.packtpub.com/support y registrarse para que los archivos se le envíen por correo electrónico directamente.
Estructura de archivos en el proyecto Edge Animate
Tan pronto como guardamos nuestro proyecto de Edge Animate, se producen una serie de archivos que se incluyen en la ubicación que especificamos al nombrar el archivo .html inicial. Echaremos un vistazo a cada uno de estos archivos y cuál es su propósito específico dentro de nuestro proyecto:
Los archivos producidos por Edge Animate incluyen los siguientes tipos (el nombre_del_proyecto entre llaves representa el nombre del proyecto que usa para guardar su trabajo):
En las versiones preliminares de Edge Animate, al archivo .an se le dio la extensión .edge; podemos encontrar composiciones en este libro o en la Web que usan la extensión anterior. Cualquiera de los dos se puede abrir dentro de Edge Animate.
Edge incluye
El directorio edge_includes contiene los archivos jQuery y Adobe Edge Animate Runtime necesarios para que todo esto funcione correctamente. Ninguno de los archivos dentro de este directorio debe modificarse nunca manualmente.
Descripción general de la interfaz de la aplicación
Al centrarse principalmente en el movimiento y la interactividad, la interfaz de Edge Animate pone un gran énfasis en modificar las propiedades de los elementos a lo largo del tiempo. Descubriremos que la aplicación Edge Animate configura muchas secciones útiles de la interfaz, como los paneles Escenario, Línea de tiempo y Propiedades, a la vista para que estas herramientas estén disponibles en nuestro trabajo.
La ventana de la aplicación
Ya sea que ejecute Edge Animate en Windows o OS X, la ventana de la aplicación aparecerá de manera muy similar en todas las plataformas. En muchos de los productos creativos de Adobe, las ventanas en OS X son muy diferentes a las de Windows, ya que el escritorio se mostrará a través de la aplicación, aunque este comportamiento se puede alternar en versiones recientes como se muestra en la siguiente captura de pantalla:
Con Adobe Edge Animate, el modo de funcionamiento es el mismo en todas las plataformas, por lo que si bien el lector notará que la mayoría de las capturas de pantalla de este libro presentan la versión de Windows de Edge Animate, debería haber muy poca diferencia al ejecutar la aplicación en Mac OS X.
La propia ventana de la aplicación está dividida en una variedad de módulos separados. La mayoría de estos módulos entran en la categoría de paneles y se pueden activar y desactivar, contraer, combinar con otros paneles o anclar a diferentes áreas de la ventana de la aplicación. La mayoría de estas acciones se realizan mediante acciones del mouse y arrastrando.
Personalización del diseño del panel de Edge Animate
Cualquier panel en Edge Animate se puede anclar a la ventana de la aplicación o se puede hacer flotar dentro de una pequeña ventana de utilidad. Los paneles flotantes son útiles si los coloca en diferentes monitores en una estación de trabajo completa, mientras que acoplar estos paneles puede ahorrar espacio en la pantalla de una computadora portátil más pequeña, como puede ver en la siguiente captura de pantalla:
Para sacar un panel de la ventana principal de la aplicación y crear un panel flotante, simplemente haga clic en las pinzas junto al nombre de un panel anclado. Mientras mantiene presionado el botón del mouse, tire del panel desde su ubicación actual. Veremos que el panel ahora ha cambiado de estado. Eche un vistazo a la siguiente captura de pantalla:
En este punto, a medida que movemos nuestro cursor entre otros elementos de la interfaz, veremos aparecer una cuadrícula de vez en cuando con partes de la cuadrícula resaltadas en un color violeta. Este color indica que el panel se puede soltar en esta ubicación para anclarlo en esa posición particular. Suelte el botón del mouse para acoplar el panel, o cuando no haya una parte resaltada de la cuadrícula para permitir que el panel permanezca en un estado flotante.
Arrastrar un panel totalmente fuera de la ventana de la aplicación y soltarlo asegurará que creemos un panel flotante.
Gestión de espacios de trabajo
De manera similar a otras aplicaciones de Creative Suite, Edge Animate ofrece la posibilidad de personalizar el espacio de trabajo y conservar una variedad de estas personalizaciones a través del concepto de espacios de trabajo de la aplicación.
La capacidad de cambiar fácilmente entre diferentes espacios de trabajo es útil cuando se mueve entre las partes de diseño, animación e interactividad de un proyecto, ya que los paneles relevantes y otras estructuras de interfaz pueden tener más protagonismo, y aquellos que no son necesarios para ciertas tareas pueden ser descartados o colocados en un rol más pequeño.
Para crear un nuevo espacio de trabajo, realizaremos las siguientes acciones:
Seleccione Nuevo espacio de trabajo y proporcione un nombre para su espacio de trabajo personalizado en el campo Nombre. Seleccione Aceptar una vez que haya terminado:


Para verificar que su espacio de trabajo se ha guardado, regrese al menú desplegable Espacio de trabajo y haga clic en él una vez más. Su nuevo espacio de trabajo aparecerá en la lista de opciones. Cambiar entre este y otros espacios de trabajo ahora es tan simple como realizar una selección rápida usando este control desplegable:

Tenemos algunas otras opciones para administrar nuestros espacios de trabajo además de Nuevo espacio de trabajo. También tenemos Eliminar espacio de trabajo, que elimina el espacio de trabajo actualmente seleccionado de la memoria. En el caso de que mientras trabajamos, hayamos modificado nuestro espacio de trabajo para ayudar con cualquier tarea específica, es útil poder restablecer el espacio de trabajo a su configuración predeterminada. Para restablecer un espacio de trabajo que se ha modificado, simplemente elija la opción Restablecer "Predeterminado" ... (el espacio de trabajo en el que está trabajando se mencionará en esta opción en lugar del espacio de trabajo predeterminado). Esto nos permite volver rápidamente a nuestro espacio de trabajo guardado en lugar de mover manualmente las cosas a como estaban.
El menú de la aplicación Edge Animate
La mayoría de los programas de computadora tienen un sistema de menú estándar que incluye opciones como Archivo, Editar y Ver, junto con una variedad de opciones específicas de la aplicación. Edge Animate no es diferente en este sentido, como puede ver en la siguiente captura de pantalla:
La barra de herramientas de Edge Animate
La barra de herramientas de Edge Animate, de forma predeterminada, se encuentra en la parte superior izquierda de la ventana de la aplicación y contiene una variedad de herramientas que se utilizan al interactuar con Stage. Aquí descubriremos una herramienta de selección, herramientas de creación de elementos vectoriales y una herramienta de texto para trabajar dentro del panel Escenario, como se muestra en la siguiente captura de pantalla:
Escenario
El panel Escenario en un proyecto de Edge Animate es el punto de partida fundamental de nuestra estructura de elementos. Cualquier elemento adicional creado o importado residirá dentro y estará animado en este escenario. La siguiente captura de pantalla muestra el panel Escenario:
Stage en sí es solo otro símbolo dentro de Edge Animate. El elemento que representa Stage es el único elemento HTML que se puede ver al ver el código fuente del archivo .html producido por Edge Animate. Consulte el siguiente código:
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>AnimateProject</title>
<script type="text/javascript" charset="utf-8"
src="AnimateProject_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-1159339764 { visibility:hidden; }
</style>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-1159339764">
</div>
</body>
</html>
El elemento Stage para cualquier proyecto de Edge Animate en particular siempre tendrá un atributo de clase único llamado ID de composición, que está vinculado a la funcionalidad de JavaScript contenida dentro del archivo JavaScript principal del proyecto. En el caso del código anterior, el valor de la clase es EDGE-1159339764 y el precargador del archivo JavaScript es AnimateProject_edgePreload.js:
El ID de composición se puede editar desde el panel de propiedades contextuales.
Los usuarios que lleguen a Edge Animate desde Flash Professional sin duda notarán algunas similitudes aquí, ya que Flash Professional también tiene el concepto de escenario.
Aunque existen muchas diferencias entre los dos tipos, en Edge Animate, el escenario se controla mucho más fácilmente a través del motor de movimiento, lo que nos permite cambiar el tamaño o cambiar el color de fondo a voluntad. En Flash Professional, el escenario es mucho más estático. Por ejemplo, el color de fondo no se puede animar de ninguna manera.
Línea de tiempo
La función Línea de tiempo en Edge Animate define los diversos elementos que están en juego a lo largo del tiempo y expone los cambios relacionados con estos elementos de forma visual. La línea de tiempo de Edge Animate es robusta pero fácil de usar. Hereda muchos de sus atributos y comportamientos de otras aplicaciones como After Effects y Flash Professional, pero también hace un buen intento de refinar estos conceptos, como se muestra en la siguiente captura de pantalla:
Paneles en Edge Animate
Para aquellos familiarizados con otras aplicaciones de Adobe Creative Suite, el concepto de paneles les resultará bastante familiar. Como ejemplo, aquí vemos paneles implementados en la que quizás sea una de las aplicaciones más populares de Creative Suite: Photoshop. Los paneles son conjuntos definidos de funcionalidad expuestos a través de la interfaz gráfica de usuario (GUI) de la aplicación. Generalmente, los paneles en Adobe Edge Animate se pueden cerrar, combinar, mover, cambiar de tamaño y contraer según sea necesario. Cualquier panel que no esté presente en una configuración de espacio de trabajo en particular se puede abrir a través de los comandos en el menú Ventana.
Para maximizar cualquier panel en Edge Animate, simplemente haga clic en el icono de opciones del panel en la esquina superior derecha del panel en cuestión y elija Maximizar marco como se muestra en la siguiente captura de pantalla:
Una vez que un panel ha maximizado su marco, el diseño del espacio de trabajo se puede restaurar fácilmente haciendo clic en el icono de opciones del panel en la esquina superior derecha y eligiendo Restaurar tamaño del marco.
Lecciones
Al comenzar con Adobe Edge Animate, podemos comenzar rápidamente accediendo a los tutoriales dentro del panel Lecciones. Este panel muestra un conjunto de escenarios comunes relacionados con símbolos, animación, interactividad, etc. Cada lección guiará al usuario a través de una serie de acciones y también proporcionará un conjunto completo de archivos de ejemplo.
Se puede acceder o descartar el panel Lecciones a través del menú de la aplicación seleccionando Ventana | Lecciones.
Elementos
El panel Elementos es una representación de todos los elementos HTML incluidos como parte de nuestro proyecto de Edge Animate. Cada elemento siempre está anidado dentro del escenario y elementos como este, que contienen subelementos, se pueden girar hacia abajo para exponer esos elementos. También podemos alternar la visibilidad de elementos particulares activando y desactivando el icono del ojo, así como el icono del candado.
Cuando un elemento está bloqueado, Edge Animate nos impedirá modificar las propiedades de ese elemento en particular. Consulte la siguiente captura de pantalla:
Para reordenar elementos, podemos arrastrar y soltar elementos individuales dentro del panel Elementos. Esto modificará de forma eficaz el índice z de cada elemento en consecuencia.
Al editar contenido HTML que no se produjo en Edge Animate, un pequeño elemento HTML </> junto a ciertos elementos indica que esos elementos estarían limitados en lo que podemos hacer a través de Edge Animate. Nunca veremos este indicador cuando se trata de composiciones creadas completamente en Edge Animate.
Biblioteca
El panel Biblioteca incluye una lista de activos importados, como imágenes de mapa de bits y SVG, y también una lista de símbolos en el menú Símbolos que se han creado dentro de Edge Animate y definiciones de fuentes en el menú Fuentes, que se pueden emplear a través de elementos de texto. Los dos primeros de estos elementos se agregan al panel Biblioteca una vez que se incluyen dentro de un proyecto de Edge Animate, y se pueden agregar al escenario desde este panel. Las definiciones de fuente se agregan a través de esta interfaz y luego se hace referencia a ellas a través de elementos de texto dentro del panel Propiedades. Consulte la siguiente captura de pantalla:
Al hacer clic en el botón más atribuido a cualquiera de las categorías, podemos agregar nuevos activos a través de un cuadro de diálogo de exploración de archivos o crear un nuevo símbolo a partir de los elementos seleccionados. Las fuentes web también se pueden definir en el menú Fuentes a través del panel Biblioteca de esta manera.
Propiedades
El panel de propiedades contextuales (en adelante, panel Propiedades) es uno de los paneles más importantes dentro de Edge Animate, ya que aquí es donde se pueden modificar todas las propiedades de un elemento. Las propiedades disponibles para nosotros dependerán del elemento que se haya seleccionado. Por ejemplo, el escenario tendrá muy pocas propiedades en comparación con un rectángulo o un elemento de texto.
Muchas de las aplicaciones de Adobe Creative Suite incluyen el concepto de un panel de propiedades. Las aplicaciones como Flash Professional, que se han heredado de Macromedia, normalmente presentan este panel de forma bastante destacada entre los distintos paneles de la aplicación.
Acciones
El panel Acciones en Edge Animate nos permite insertar pequeños fragmentos de código JavaScript en nuestras composiciones. Este código viene en forma de desencadenantes (en Desencadenantes), eventos (en Eventos) y acciones (en Acciones). La idea básica es que podemos escribir JavaScript aquí que se ajuste a la API de Edge Animate Runtime, o podemos emplear alternativamente los botones a lo largo del lado izquierdo del panel para insertar fragmentos de código preconfigurados en un elemento, como se muestra en la siguiente captura de pantalla:
Dependiendo de si estamos insertando código a lo largo de la línea de tiempo como un desencadenante o sobre un elemento o símbolo pequeño como un evento, determina las opciones disponibles para nosotros en la pila de opciones.
El panel Acciones en Edge Animate funciona de manera muy similar a los primeros paneles de acciones en Flash Professional. A modo de comparación, en la siguiente captura de pantalla podemos ver cómo aparece el panel Acciones en Flash Professional. Una vez más, los ingenieros que trabajan en Edge Animate se han esforzado mucho para que los usuarios de Flash Professional se sientan cómodos dentro de este nuevo entorno.
Código
El panel Código cumple una serie de funciones útiles dentro de Edge Animate. En realidad, cualquier cosa que podamos hacer dentro del panel Acciones también se puede hacer dentro del panel Código, por lo que hay algo de replicación de funcionalidad aquí. Lo que hace que este panel sea único es que nos proporciona una vista de toda la composición y los fragmentos de código dispersos por todas partes en un solo lugar.
Para aquellos familiarizados con Flash Professional, esto es muy parecido al Explorador de películas en esa aplicación, aunque la presentación aquí es mucho más útil ya que no tenemos que hacer clic en varios objetos y filtros para llegar a cada pieza individual. Notaremos muchas cosas pequeñas como esta en Edge Animate que son mejoras sobre las ideas y las opciones de flujo de trabajo presentes en los productos más antiguos de Adobe. Esto es algo bueno. ¡Abrázalo!
Atajos de teclado de Adobe Edge Animate
Edge Animate se envía con un conjunto definido de atajos de teclado para ayudarnos a trabajar más rápido dentro de la aplicación. Muchos de estos accesos directos se pueden ver dentro de los distintos menús contextuales a los que se puede acceder a través de varios elementos o a través del menú de la aplicación. Estos accesos directos van desde copiar y pegar estándar hasta comandos especializados de Edge Animate para alternar las acciones de anclar o pegar.
Cuadro de diálogo de métodos abreviados de teclado
Para acceder al cuadro de diálogo Métodos abreviados de teclado, en el menú de la aplicación, elija Editar | Métodos abreviados de teclado… y aparecerá la ventana del cuadro de diálogo:
Desde este cuadro de diálogo, podemos revisar todos los accesos directos asignados en la aplicación, o incluso personalizarlos para crear nuestro propio conjunto. Los ajustes preestablecidos personalizados se almacenan como XML en el disco duro local. El cuadro de diálogo también nos proporciona un filtro y la capacidad de copiar todos los métodos abreviados de teclado al portapapeles del sistema para pegarlos en un editor de texto o algún otro documento para poder recordarlos más fácilmente al aprender la aplicación.
Elementos del menú de Adobe Edge Animate
Echaremos un vistazo a algunas de las opciones generales del proyecto disponibles para nosotros en el menú de la aplicación Edge Animate y proporcionaremos una breve descripción general de la función de cada opción. Las opciones de menú específicas de otras funciones de Edge Animate se presentarán junto con la función o herramienta en sí en capítulos posteriores.
Archivo
La opción de menú Archivo proporciona una serie de opciones para trabajar con los propios archivos de Edge Animate:

Comando
Descripción
Nuevo
Esto crea un nuevo proyecto en blanco.
Abrir…
Esto abre un proyecto guardado previamente.
Abrir reciente
Esto proporciona una lista de proyectos abiertos recientemente de los que un usuario puede seleccionar. Seleccionar uno de estos proyectos lo cargará en Edge Animate, similar al comando Abrir.
Cerrar
Este comando cerrará el proyecto actual de Edge Animate, solicitando al usuario que guarde el documento primero, a través de una ventana de alerta de la aplicación.
Cerrar todo
Esto cierra todos los proyectos que están abiertos actualmente. Similar al comando Cerrar, aparecerá un cuadro de diálogo solicitando al usuario que guarde cada proyecto en una secuencia.
Guardar
Este comando guarda el proyecto actual. Solo es válido para proyectos guardados previamente.
Guardar como…
Esto abre un cuadro de diálogo de exploración que solicita al usuario que proporcione un nombre de archivo y una ubicación del proyecto para guardar el proyecto de Edge Animate. Los proyectos no guardados previamente deben usar este comando.
Revertir
Esto revierte un proyecto de Edge Animate abierto y modificado a su último estado guardado.
Publicar configuración…
Esto permite el acceso para especificar la configuración con la que publicar una composición de Edge Animate.
Publicar
Esto realiza una operación de publicación que se adhiere a la configuración especificada en Publicar configuración…. También optimiza la composición para su distribución.
Vista previa en el navegador
Si bien es posible obtener una vista previa de ciertas cosas dentro de la propia aplicación Edge Animate, a medida que los proyectos se vuelven más complejos, querremos asegurarnos de ejecutarlos dentro de un entorno de navegador real. Este comando iniciará un navegador y cargará el proyecto actual automáticamente.
Importar…
Esto permite la importación de archivos .png, .gif, .jpg y .svg a un proyecto. Estos archivos importados aparecerán en la biblioteca del proyecto y en el escenario.
Salir
Esto cierra toda la aplicación. Si hay algún proyecto sin guardar abierto, Edge Animate le pedirá al usuario que guarde el documento primero, a través de una ventana de alerta de la aplicación.

Ventana
El menú Ventana ofrece la posibilidad de que un usuario de Edge Animate active y desactive varios paneles de la aplicación. Ciertos paneles están desactivados de forma predeterminada, y activarlos aquí nos permitirá anclarlos a la ventana de la aplicación o colocarlos como paneles flotantes. También se nos da acceso aquí a los comandos de administración del espacio de trabajo.

Comando
Descripción
Espacio de trabajo
Esto proporciona una serie de comandos para administrar espacios de trabajo de Edge Animate.
Espacio de trabajo
Predeterminado (también se enumeran los espacios de trabajo definidos)
Espacio de trabajo
Nuevo espacio de trabajo
Espacio de trabajo
Eliminar espacio de trabajo
Espacio de trabajo
Restablecer "Predeterminado" ... (si hay espacios de trabajo definidos previamente, también se enumeran)
Línea de tiempo
Esto alterna la línea de tiempo dentro de la ventana de la aplicación Edge Animate.
Elementos
Esto alterna el panel Elementos dentro de la ventana de la aplicación Edge Animate.
Biblioteca
Esto alterna el panel Biblioteca dentro de la ventana de la aplicación Edge Animate.
Herramientas
Esto alterna el panel Herramientas dentro de la ventana de la aplicación Edge Animate.
Propiedades
Esto alterna el panel Propiedades dentro de la ventana de la aplicación Edge Animate.
Código
Esto activa y desactiva el panel Código.
Ayuda
El elemento del menú Ayuda contiene información sobre Edge Animate como producto y enlaces para leer sobre las API que existen al interactuar con el tiempo de ejecución a través de JavaScript. La siguiente tabla muestra los distintos comandos de este menú:

Comando
Descripción
Ayuda de Edge Animate…
Esto abre las páginas de ayuda de Edge Animate en un navegador web conectado a Internet.
API de JavaScript de Edge Animate…
Esto proporciona una descripción general de la API de Adobe Edge Animate Runtime.
Foros de la comunidad de Edge Animate
Este es el enlace directo a los foros de Adobe.com.
Cambiar idioma…
Esto cambia el idioma de la aplicación.
Programa de mejora de productos de Adobe…
Esta es una opción para permitir que el usuario participe en la mejora del producto mediante la recopilación de estadísticas de uso anónimas.
Acerca de Adobe Edge Animate…
Al seleccionar este comando, se mostrará información sobre Edge Animate, incluida la información específica de la versión.

Resumen
En este capítulo, echamos un vistazo a la historia detrás de la aplicación Adobe Edge Animate desde sus inicios como un prototipo básico y hemos analizado varias de las tecnologías web estándar utilizadas por los proyectos de Edge Animate. También hablamos de Edge Animate en relación con Flash Professional y muchas de las similitudes entre los dos programas. Si está acostumbrado a Flash Professional, ¡aprender Edge Animate debería ser relativamente sencillo! También echamos un vistazo breve a Edge Animate, que incluye cómo instalar el programa, las opciones disponibles para nosotros mediante la pantalla de bienvenida de Edge Animate y cómo crear rápidamente un nuevo proyecto de Edge Animate.
Ahora también deberíamos estar familiarizados con todos los menús, paneles y otros elementos de la interfaz disponibles para nosotros en la ventana de la aplicación Adobe Edge Animate. Si bien hemos tocado algunas funciones básicas aquí, la mayor parte restante de este libro detallará una variedad de formas en las que podemos usar Edge Animate para crear una variedad de proyectos basados ​​en estándares que aprovechan el movimiento y la interactividad para producir contenido rico y atractivo. para la Web.
En el siguiente capítulo, veremos específicamente las diversas herramientas disponibles para nosotros dentro de Edge Animate que nos permiten crear elementos básicos a través de las herramientas de dibujo internas.
Esto activa y desactiva el panel Lecciones.