Adobe Edge Animate
Adobe Edge Animate es una herramienta completamente nueva de Adobe que busca permitir la creación de experiencias interactivas y de movimiento a través de HTML5, CSS3 y JavaScript de una manera consistente con las aplicaciones de Creative Suite. Edge Animate puede crear tales experiencias en este momento, debido a los avances en la tecnología de los navegadores y la necesidad de una solución consistente y multiplataforma que pueda funcionar en sistemas operativos de escritorio y móviles.
¿Por qué necesitamos Adobe Edge Animate?
Algunos pueden pedir una explicación: ¿por qué necesitamos Edge Animate cuando tenemos herramientas como Flash Professional que también crean animaciones y contenido interactivo para la Web? Hay una serie de razones para esto, que ahora intentaremos ilustrar.
Restricciones de Adobe Flash Player
Tradicionalmente, aquellos de nosotros que diseñamos contenido animado o altamente interactivo para la Web hemos podido confiar en Adobe Flash Player para mostrar este contenido sin problemas en Windows, Mac y Linux. De hecho, Adobe y muchas entidades independientes aún informan que Flash Player está instalado en el 96 al 99 por ciento de las máquinas de escritorio. Sin embargo, existen problemas, ya que ahora debemos tener en cuenta los sistemas operativos móviles que imponen restricciones a Flash Player, o incluso lo prohíben por completo. La más problemática de estas plataformas es Apple iOS.
Vale la pena señalar que los sistemas operativos móviles Google Android, Windows 8 (escritorio y móvil), BlackBerry 10 y BlackBerry Tablet OS tienen una sólida compatibilidad con Flash Player 11. Sin embargo, Adobe ha detenido cualquier desarrollo adicional para Flash Player móvil después de la versión 11.1 a partir de la publicación de este libro. Otros tienen la opción de licenciar Flash Player e integrarlo en sus sistemas, como RIM continúa haciendo para sus sistemas basados en QNX como BB10 y PlayBook.
Dado que el contenido Flash tiene restricciones para ejecutarse dentro del navegador Safari móvil de iOS, los diseñadores han estado buscando formas alternativas de brindar experiencias a estos dispositivos.
Imagen cortesía de Lee Brimelow. Aunque Apple iOS ha prohibido Flash Player en el navegador, el contenido Flash se puede distribuir a través de la App Store de Apple en forma de aplicaciones compiladas que se dirigen a esta plataforma. De manera similar, otros sistemas operativos móviles como Google Android, Windows 8, RIM BlackBerry 10 y Tablet OS también incluyen compatibilidad total con proyectos basados en Flash a través de Adobe AIR.
Madurez de la tecnología HTML
Durante gran parte de su historia, HTML ha proporcionado una forma para que los diseñadores web marquen creativamente el contenido para renderizarlo en un navegador. Con el borrador de la especificación HTML5 actualmente en desarrollo, este rol se ha expandido de algunas maneras que intentan ir más allá del simple marcado textual y entrar en el espacio de los medios enriquecidos. Tres etiquetas que a menudo se citan como ejemplos de esto incluyen las siguientes:
<video>: Para reproducción de video simple en HTML<audio>: Para reproducción de audio simple en HTML<canvas>: Para renderizar mediante programación imágenes de mapa de bits en HTML a través de API de JavaScript
Junto con la especificación HTML principal en desarrollo, se encuentran especificaciones relacionadas como CSS3 y una variedad de especificaciones adicionales destinadas a extender las tecnologías centrales de la Web. También hemos visto grandes aumentos en la velocidad de los motores de JavaScript en los últimos años, lo que permite un mayor uso del lenguaje de scripting básico para la Web. ¡Agregue una serie de marcos (como el popular marco jQuery [
Roles cambiantes
Adobe Flash Player siempre ha servido como una extensión de las tecnologías web centrales como HTML, CSS y JavaScript, lo que permite experiencias dentro del navegador que simplemente no eran posibles utilizando estas tecnologías por sí solas. Con las recientes expansiones que ya hemos detallado, algunas de las capacidades de Flash Player ahora se han hecho posibles en otras tecnologías. La principal de ellas es la capacidad de crear objetos animados y en movimiento empleando tecnologías web centrales utilizando herramientas como Adobe Edge Animate.
Aunque ahora es posible crear introducciones de sitios web, anuncios enriquecidos y otro contenido en movimiento utilizando una herramienta como Edge, los diseñadores deben tener cuidado de no replicar las molestias del pasado. La Web no necesita más páginas de destino "Omitir introducción".
Si bien HTML y las tecnologías relacionadas han adoptado algo de lo que los diseñadores usaron Flash Player hace años, es importante tener en cuenta que la plataforma Flash también ha crecido bastante en los últimos años. El rol de Flash ha pasado de habilitar el movimiento y la interactividad enriquecida en la Web a proporcionar experiencias de video enriquecidas, aplicaciones empresariales, módulos web avanzados y juegos con calidad de consola con Flash Player 11. La plataforma Flash en sí se ha expandido desde el navegador y en sistemas operativos de escritorio y móviles que utilizan Adobe AIR: teléfonos inteligentes, tabletas e incluso unidades de televisión y tableros de automóviles se han beneficiado de este cambio en la tecnología.
¿Interesado en lo que depara el futuro para los tiempos de ejecución de Flash? Adobe ha publicado un documento técnico que describe la hoja de ruta para los próximos dos años y sienta las bases para los avances tecnológicos de la próxima década.
Lea la hoja de ruta de Adobe para los tiempos de ejecución de Flash en
Implementación móvil
Quizás el factor más importante en la rápida evolución de las tecnologías web centrales en los últimos dos años ha sido la prevalencia de navegadores avanzados en dispositivos móviles. Debido al hecho de que la informática móvil es todavía tan nueva, los usuarios no entran en este entorno con tecnología antigua. Esto permite a los fabricantes de navegadores y dispositivos integrar navegadores web con estos sistemas que aprovechan al máximo HTML5, CSS3 y los motores de renderizado avanzados de JavaScript.
La mayoría de los navegadores móviles se basan en el motor de renderizado de código abierto WebKit [
Tenga en cuenta que WebKit es el motor de renderizado para el entorno de aplicación real de Edge Animate, que ofrece una verdadera experiencia WYSIWYG durante la creación de la composición. WebKit también se utiliza en tiempos de ejecución integrados como Adobe AIR, lo que amplía el alcance de esta popular base de código de renderizado HTML.
¿Para qué se puede utilizar Adobe Edge Animate?
En general, Edge Animate se puede utilizar para crear muchos de los mismos tipos de animaciones e interacciones que hubiéramos esperado que Flash Player manejara en la Web a mediados o finales de la década de 1990. Esto incluye el movimiento de objetos visuales por el escenario e interacciones básicas del mouse.
Animación web
Edge Animate utiliza una línea de tiempo completamente nueva para producir movimiento que toma mucho prestado de otras aplicaciones como Adobe After Effects. Mediante el uso de fotogramas clave a lo largo de la línea de tiempo, los diseñadores tienen un control muy preciso sobre muchas propiedades de los objetos y pueden habilitar fácilmente algoritmos de aceleración, que proporcionan un toque adicional al contenido animado. Edge Animate ofrece un enfoque único para crear y acceder a elementos de nivel de página, sus propiedades y animarlos en la línea de tiempo.
Contenido interactivo
Edge Animate no se trata solo de hacer que las cosas se muevan. Edge Animate Runtime también incluye una API robusta para habilitar la interactividad a través de acciones del mouse, táctiles y basadas en el tiempo. Estos comandos interactivos se pueden aplicar a objetos visibles individuales en el escenario o se pueden usar a lo largo de la línea de tiempo en forma de desencadenantes. La interactividad puede modificar aspectos de la línea de tiempo del escenario, modificar las propiedades de otros objetos dentro de un proyecto de Edge Animate o incluso invocar llamadas a contenido fuera del proyecto.
¿Es Adobe Edge Animate para mí?
Si bien este libro hará referencia a menudo a otras aplicaciones como Flash Professional o After Effects, no necesitará tener experiencia previa con estas aplicaciones para aprovechar al máximo Edge Animate. Siempre que comprenda los conceptos básicos de HTML, CSS y JavaScript, y tenga el deseo de aprender una herramienta de movimiento e interacción que valga la pena y que se dirija a estos estándares, ¡entonces estará listo!
¡Empecemos!
Ahora hemos echado un vistazo a algunas formas en que el panorama web está cambiando, específicamente cuando se habla de los roles de las tecnologías principales que se utilizan para crear movimiento y diseño interactivo en el navegador. El contenido producido por Edge Animate solo habría sido posible utilizando Flash Player en años pasados. HTML, CSS y JavaScript han avanzado hasta el punto de que este tipo de contenido ahora se puede producir utilizando tecnologías web centrales. Al mismo tiempo, Adobe Flash Player y la plataforma Flash más amplia se han expandido más allá de estos roles. También hemos tenido una vista de alto nivel de Adobe Edge Animate y algunos de los tipos de contenido que se habilitan mediante el uso de esta herramienta de creación.
A lo largo de este libro, analizaremos por completo la interfaz de la aplicación Animate, demostraremos cómo crear e importar recursos del proyecto y usaremos esos recursos en la creación de composiciones que presentan movimiento avanzado e interactividad utilizando estándares web.
Lo que cubre este libro
El Capítulo 1, Introducción a Adobe Edge Animate, proporciona una descripción general completa de toda la interfaz de la aplicación Edge Animate. Esta descripción general incluye un vistazo a los paneles, herramientas, menús y otros elementos de la aplicación con los que tendremos que familiarizarnos al usar Animate.
El Capítulo 2, Dibujar y ajustar elementos de composición, profundiza en las herramientas de dibujo contenidas en la aplicación Animate para permitir la creación de elementos rectangulares simples y otros objetos variados.
El Capítulo 3, Seleccionar y transformar elementos, proporciona una mirada a las herramientas de selección y transformación, sus usos y atributos únicos. También tenemos una buena descripción general del panel Propiedades y su uso en todos los tipos de elementos.
El Capítulo 4, Uso de texto y fuentes web, demuestra la creación de elementos de texto dentro de un proyecto de Edge Animate y proporciona ejemplos detallados del uso de fuentes web para un contenido textual aún más expresivo.
El Capítulo 5, Importación de activos externos, mostrará cómo importar y utilizar una gran cantidad de activos externos dentro de nuestras composiciones de Edge Animate.
El Capítulo 6, Creación de movimiento a través de la línea de tiempo, demuestra lo sencillo que es crear una composición que involucre una serie de elementos animados y presenta un conjunto de herramientas único para tratar el movimiento en la Web.
El Capítulo 7, Interactividad con acciones, desencadenantes y etiquetas, ampliará los temas basados en el movimiento del capítulo anterior mediante la adición de elementos interactivos dentro de un proyecto de Edge Animate. También veremos algunos de los usos más complejos de las API de Adobe Edge Animate Runtime.
El Capítulo 8, Hacer uso de símbolos, elementos anidados y agrupación, proporciona un análisis profundo de la poderosa arquitectura de símbolos dentro de Edge Animate y demuestra una variedad de usos para las instancias de símbolos. También echamos un vistazo a los elementos anidados y proporcionamos algunos proyectos de ejemplo.
El Capítulo 9, Técnicas avanzadas de animación, profundiza en el mundo del recorte, las hojas de sprites y las secuencias de imágenes para extender gran parte de la funcionalidad de movimiento central mediante el uso de activos externos y técnicas adicionales.
El Capítulo 10, Publicación de composiciones de Edge Animate, examina las muchas opciones que tenemos disponibles al preparar y publicar una composición de Edge Animate para la Web u otros destinos compatibles.
El Capítulo 11, Exploraciones adicionales con Adobe Edge Animate, contiene muchas técnicas que son de naturaleza demasiado general o demasiado expansivas para caber en cualquiera de los otros capítulos.
Lo que necesita para este libro
Para utilizar este libro de forma eficaz, deberá adquirir Adobe Edge Animate de Adobe. Edge Animate está disponible con una suscripción al servicio Creative Cloud. Adobe Edge Animate se puede adquirir en [invalid URL removed].
Para quién es este libro
Este libro es para cualquier persona que desee comenzar a utilizar Adobe Edge Animate para crear contenido interactivo y atractivo para la Web. No es necesario que tenga ningún conocimiento previo de diseño web o de movimiento.
Convenciones
En este libro, encontrará varios estilos de texto que distinguen entre diferentes tipos de información. A continuación, se muestran algunos ejemplos de estos estilos y una explicación de su significado.
Las palabras<div>, pero se pueden cambiar para emplear los siguientes elementos HTML en su lugar".
Un bloque de código se establece de la siguiente manera:
(function(symbolName) {
Symbol.bindElementAction(compId, symbolName, "${_fvm001}",
"mouseover", function(sym, e) {
// Change an Element's contents.
// (sym.$("name") resolves an Edge element name to a DOM
// element that can be used with jQuery)
sym.$("Info").html("August (2000)");
});
Cuando deseamos llamar su atención sobre una parte particular de un bloque de código, las líneas o elementos relevantes se establecen en negrita:
Symbol.bindElementAction(compId, symbolName, "${_Rectangle}",
"mousedown", function(sym, e) {
sym.playReverse();
// insert code for mousedown here
});
//Edge binding end
Los términos nuevos y las palabras importantes se muestran en negrita. Las palabras que ve en la pantalla, en los menús o cuadros de diálogo, por ejemplo, aparecen en el texto de esta manera: "La primera opción es simplemente hacer clic en Crear nuevo en la pantalla de bienvenida".
Las advertencias o notas importantes aparecen en un cuadro como este.
Los consejos y trucos aparecen así.
Los comentarios de nuestros lectores siempre son bienvenidos. Háganos saber lo que piensa sobre este libro: lo que le gustó o lo que no le gustó. Los comentarios de los lectores son importantes para que podamos desarrollar títulos que realmente aproveche al máximo.
Para enviarnos comentarios generales, simplemente envíe un correo electrónico a feedback@packtpub.com y mencione el título del libro
Si hay un tema en el que tiene experiencia y está interesado en escribir o contribuir a un libro, consulte nuestra guía de autores en
Soporte al cliente
Ahora que es el orgulloso propietario de un libro de Packt, tenemos una serie de cosas para ayudarlo a aprovechar al máximo su compra.
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
Erratas
Aunque hemos tenido mucho cuidado para garantizar la precisión de nuestro contenido, se producen errores. Si encuentra un error en uno de nuestros libros, tal vez un error en el texto o el código, le agradeceríamos que nos lo informara. Al hacerlo, puede evitar que otros lectores se sientan frustrados y ayudarnos a mejorar las versiones posteriores de este libro. Si encuentra alguna errata,
Piratería
La piratería de material protegido por derechos de autor en Internet es un problema continuo en todos los medios. En Packt, nos tomamos muy en serio la protección de nuestros derechos de autor y licencias. Si encuentra alguna copia ilegal de nuestras obras, en cualquier forma, en Internet, proporciónenos la dirección de la ubicación o el nombre del sitio web de inmediato para que podamos buscar un remedio.
Póngase en contacto con nosotros en copyright@packtpub.com con un enlace al material sospechoso de piratería.
Agradecemos su ayuda para proteger a nuestros autores y nuestra capacidad para brindarle contenido valioso.
Preguntas
Puede contactarnos en questions@packtpub.com si tiene algún problema con cualquier aspecto del libro, y haremos todo lo posible para solucionarlo.
Comentarios
Publicar un comentario