K.Exploraciones adicionales con Adobe Edge Animate
Este capítulo cubre una variedad de temas relacionados con Adobe Edge Animate que están más allá del alcance de los capítulos anteriores o simplemente no encajan categóricamente en ellos. Estos pueden considerarse como algunos de los temas más oscuros o incluso avanzados, e incluyen los siguientes:
- La API de tiempo de ejecución de Adobe Edge Animate
- Modificar contenido web existente en Edge Animate
- Integrar contenido de Edge Animate en sitios web existentes
- Incrustar más de una composición de Edge Animate
- Medir la carga de la página a través de las herramientas de desarrollo de Chrome
- Tratamientos CSS avanzados en Edge Animate
- Compatibilidad con video con Adobe Edge Animate
- Integración de audio composicional
- Usar Adobe Edge Inspect con Edge Animate
La API de tiempo de ejecución de Adobe Edge Animate
Adobe Edge Animate viene equipado con su propia API de JavaScript para manipular contenido composicional. Esta API no solo permite las interacciones necesarias basadas en el tiempo y en el usuario dentro de una composición, sino que también gestiona el precargador composicional y una serie de API de gestión de composiciones. Al integrar una composición de Edge Animate en una aplicación más grande, sería beneficioso estudiar la documentación de la API de tiempo de ejecución de Edge Animate.
La inclusión del tiempo de ejecución en sí se produce a través de una inclusión básica de JavaScript dentro del documento HTML:
<script type="text/javascript" charset="utf-8" src="{project-name}_Edge AnimatePreload.js"></script>
La documentación de la API de tiempo de ejecución de Adobe Edge Animate está disponible en la web en
Adobe también está desarrollando una referencia en línea, que cubre muchos ejemplos y recursos de Edge Animate a los que se puede acceder desde la siguiente URL:
Modificar contenido web existente en Edge Animate
A lo largo de este libro, hemos estado examinando todas las herramientas y técnicas que tenemos disponibles en Edge Animate con el fin de crear composiciones desde cero. Sin embargo, es muy importante reconocer el hecho de que todo lo que Edge Animate realmente está haciendo es manipular HTML… también podemos abrir páginas web existentes en Edge Animate para realizar animaciones en varios elementos preexistentes.
Animar contenido web existente
En este ejemplo, abriremos una página web existente en Edge Animate y aplicaremos una transición de opacidad simple en un elemento de imagen existente. Un documento HTML de muestra se encuentra en los recursos descargables para este capítulo: ExistingWeb / originals / index.html.
Descargar el código de ejemplo
Puede descargar los archivos de código de ejemplo para todos los libros de Packt que haya comprado desde su cuenta en
Los siguientes pasos ilustran este concepto:
-
Dentro de Edge Animate, elija abrir un documento accediendo a Archivo | Abrir… en el menú de la aplicación.
-
En el navegador de archivos que aparece, ahora navegamos y elegimos el archivo HTML con el que deseamos trabajar.
-
Seleccione algún elemento que exista en el panel Escenario. En el ejemplo al que se hace referencia, elegimos el elemento de imagen existente.
-
Emplee Pin para crear una instancia de Transición, que anima el valor de la propiedad de opacidad de la imagen de 0 a 100 en dos segundos.
-
Realice una vista previa rápida para verificar que todo se anima correctamente:
Tenga en cuenta que al editar contenido HTML preexistente dentro de Edge Animate, todos los elementos estarán en un estado estático no administrado y aparecerán como tales dentro del panel Elementos.
Ahora que hemos adaptado nuestro contenido utilizando Edge Animate, realmente no se necesitan más acciones. Al abrir el archivo HTML que se produce, se mostrará la página web de forma normal, pero con cualquier movimiento e interacción adicionales de Edge Animate.
Sin embargo, esto no significa que no haya habido cambios en nuestros documentos. Si miramos dentro del directorio en el que se estaba editando el archivo HTML, ahora veremos todos los archivos y directorios adicionales que esperaríamos ver en cualquier proyecto de Edge Animate. Esto se debe a que, para emplear el tiempo de ejecución de Edge Animate, todas las bibliotecas adecuadas deben incluirse con los objetivos y las dependencias escritas, al igual que con una composición dedicada de Edge Animate.
Al publicar el documento HTML modificado, al igual que con cualquier composición de Edge Animate, ¡no olvide incluir todos los archivos necesarios para que Edge Animate funcione!
Abrir el documento HTML dentro de un editor de texto o un IDE centrado en la web, como Adobe Dreamweaver, revelará que solo se han insertado unas pocas líneas de código en el encabezado de nuestro documento para incluir Edge Animate Runtime:
<script type="text/javascript" charset="utf-8" src="index_EdgePreload.js"></script>
<style>
.EdgeLoad-EDGE ANIMATE-335531406 {
visibility: hidden;
}
</style>
En esta captura de pantalla, por ejemplo, vemos que incluso el elemento de imagen al que se le ha aplicado una transición no ha sido alterado en absoluto por la aplicación Edge Animate.
Integrar contenido de Edge Animate en sitios web existentes
Si bien algunas composiciones de Edge Animate tienen sentido por sí solas, generalmente querremos integrar el contenido producido con Edge Animate en un sitio web existente. De hecho, como Edge Animate, de forma predeterminada, produce un documento HTML simple, sin estilo y en blanco para que resida la composición, seguramente querremos al menos hacer que las cosas sean un poco más agradables a la vista, incluso si se trata de una pieza independiente con la que estamos tratando. Esto también es necesario para contenido como banners web.
El proyecto de ejemplo para este ejemplo se puede encontrar dentro del directorio llamado WebBanner en los activos del libro.
Necesitaremos incluir todo en el bloque de código de Adobe Edge Animate Runtime. Esto incluye mover todo este bloque de código al área <head> de otro documento HTML, mover todos los archivos reales a la estructura de directorios del sitio web existente y luego actualizar cualquier referencia que pueda haber cambiado.
<script type="text/javascript" charset="utf-8" src="Untitled-8_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-1427881954 {
visibility: hidden;
}
</style>
También necesitaremos copiar y pegar el panel Escenario en sí en nuestro documento existente. Esta es la parte fácil; simplemente copie y pegue el siguiente elemento <div> en el área <body> del documento y luego colóquelo como desee a través de CSS:
<div id="Stage" class="EDGE-1427881954 edgeLoad-EDGE-1427881954"></div>
Incrustar una composición
Para incrustar una composición de Edge Animate dentro de un sitio web existente, hay básicamente dos pasos:
- Copie el JavaScript / CSS incluido del HTML generado por Edge Animate en el área <head> del documento existente.
- Copie los elementos del mismo documento HTML generado en el área <body> del documento existente.
Además, también podemos apuntar a la composición de Edge Animate a través de CSS (a través de ID y clase) para realizar un posicionamiento avanzado y manipulación del tamaño.
Incrustar contenido
Este método implica eliminar fragmentos de código del documento HTML generado por Edge Animate e incluirlos en el documento de destino. En este ejemplo, estamos utilizando la opción de publicación sin ninguna modificación.
JS / CSS
El siguiente fragmento de código se encuentra dentro del encabezado del documento:
<script type="text/javascript" charset="utf-8" src="WebBanner_EdgePreload.js"></script>
<style>
.edgeLoad-EDGE-686136729 {
visibility: hidden;
}
</style>
HTML
El siguiente fragmento de código se encuentra dentro del cuerpo del documento:
<div id="Stage" class="EDGE-686136729"></div>
Incrustar con contenido estático
Este método secundario también implica eliminar fragmentos de código del documento HTML generado por Edge Animate e incluirlos en el documento de destino. En este ejemplo, estamos utilizando la opción de publicación estática del cuadro de diálogo Configuración de publicación.
JS / CSS
El siguiente código se encuentra dentro del encabezado del documento:
<script type="text/javascript" charset="utf-8" src="WebBanner_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-686136729 {
visibility: hidden;
}
</style>
HTML
El siguiente código se encuentra dentro del cuerpo del documento:
<div id="Stage" class="EDGE-686136729">
<div id="Stage_Album" class="edgeLoad-EDGE-686136729">Shudderflowers</div>
<div id="Stage_Artist" class="edgeLoad-EDGE-686136729">An Early Morning Letter, Displaced</div>
<div id="Stage_Shudderflowers" class="edgeLoad-EDGE-686136729">
<div id="Stage_Shudderflowers_Cover"></div>
</div>
</div>
Este método es más robusto, ya que gran parte de nuestro contenido se genera para nosotros como HTML estático en lugar de inyectarse en el DOM en tiempo de ejecución.
Empaquetar con <iframe>
Uno de los métodos más útiles (y sencillos) para distribuir contenido de Edge Animate es simplemente proporcionar algún código <iframe>, que apunta al archivo HTML generado por Edge Animate. Con este método, no es necesario copiar y pegar código de los archivos generados; simplemente lo incluimos tal cual en los documentos HTML que lo requieran. Este método es perfecto para anuncios de banner, como puede ver con el siguiente código <iframe>:
<iframe src="WebBanner.html" width="468" height="60" scrolling="no" frameborder="0"> </iframe>
Incrustar más de una composición de Edge Animate en una página web
La tarea de incrustar varias composiciones dentro de una página web es bastante sencilla siempre que sigamos algunos pasos importantes. Cada composición tiene un ID de composición y esto es lo que se puede utilizar para apuntar a una composición específica sobre otra. Además, también es importante asegurarse de incluir todos los archivos JavaScript e imágenes de cada composición y conservar las rutas adecuadas para hacer referencia a estos archivos. Si cada composición utiliza la misma versión de las bibliotecas de Edge Animate Runtime, todas pueden compartir el mismo conjunto de inclusiones.
En los siguientes ejemplos, podemos ver una forma de emplear varias composiciones simplemente insertando nuestras inclusiones y elementos contenedores en lugares oportunos.
JS / CSS
El siguiente fragmento de código se encuentra dentro del encabezado del documento:
<script type="text/javascript" charset="utf-8" src="Composition001_edgePreload.js"></script>
<script type="text/javascript" charset="utf-8" src="Composition002_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-686136729 {
visibility: hidden;
}
.edgeLoad-EDGE-686136730 {
visibility: hidden;
}
</style>
Instancia HTML 01
Esta línea de código se encuentra en cualquier lugar dentro del cuerpo del documento:
<div id="Stage001" class="EDGE-686136729"></div>
Instancia HTML 02
El siguiente código se encuentra en cualquier lugar dentro del cuerpo del documento:
<div id="Stage002" class="EDGE-686136730"></div>
Para colocar cada una de nuestras composiciones, simplemente diríjase a ellas a través de CSS y aplíqueles reglas de posicionamiento, de la siguiente manera:
#Stage002 {
position: relative;
top: 100px;
}
Medir la carga de la página a través de las herramientas de desarrollo de Chrome
Google Chrome no solo es uno de los navegadores Edge Animate más estables y vanguardistas disponibles, sino que también viene equipado con una gran cantidad de herramientas de desarrollo que podemos aprovechar para monitorear el ciclo de vida y el progreso que rodea a nuestras composiciones de Edge Animate cuando se ejecutan en el navegador.
Se puede acceder a las herramientas de desarrollo de Chrome desde Chrome haciendo clic en el icono Personalizar a la derecha de la barra de direcciones y eligiendo Herramientas | Herramientas de desarrollo. En la siguiente captura de pantalla, se muestra Google Chrome (versión 19) en Windows 7.
Una vez que se abren las herramientas, tenemos la opción de acoplarlas dentro de la ventana del navegador o mediante el uso de una ventana flotante que se puede colocar independientemente del navegador. Red, Scripts, Línea de tiempo, Perfiles, Auditorías y Consola. Todos estos se pueden utilizar al monitorear nuestra composición de Edge Animate, pero prestaremos especial atención a Red y Auditorías.
Es aconsejable no solo utilizar estas herramientas al monitorear el contenido renderizado directamente desde Edge Animate, sino también una vez que una composición se ha publicado e integrado en algún otro sistema, para obtener una imagen real del rendimiento y la carga.
Red
La pestaña Red nos permite monitorear qué componentes está solicitando su página web o aplicación a los servidores web, cuánto tiempo tardan estas solicitudes y cuánto ancho de banda se requiere para transferirlas. Usando la línea de tiempo incluida, podemos ver fácilmente cuánto tiempo tardan en cargarse los recursos individuales dentro de nuestra composición, como se muestra en la siguiente captura de pantalla:
Auditorías
La herramienta Auditorías nos permite ejecutar un examen de nuestro contenido para recibir recomendaciones de Utilización de la red y Rendimiento de la página web. Si bien algunas de estas opciones están fuera de nuestro control al estar vinculadas directamente a las bibliotecas de tiempo de ejecución, existen otras recomendaciones que podemos poner en práctica según la composición que se esté auditando.
Otras herramientas de desarrollo
Además de las herramientas descritas anteriormente, también podemos hacer uso de cualquiera de las otras incluidas en Google Chrome al solucionar problemas de nuestra aplicación. Cabe destacar especialmente las herramientas Perfiles y Consola al solucionar problemas de JavaScript dentro de una composición de Animate.
Si está utilizando el navegador Apple Safari, notará que las herramientas de desarrollo en ese navegador son muy similares a las disponibles en Chrome. Esto se debe a que estas herramientas son una parte fundamental de WebKit, que utilizan ambos navegadores.
Si bien estamos prestando especial atención a Google Chrome en este libro, es importante tener en cuenta que casi todos los navegadores web modernos vienen equipados con algún tipo de herramientas de desarrollo. Las versiones recientes de Mozilla Firefox y Microsoft Internet Explorer vienen con un conjunto de herramientas de desarrollo, y siempre hay opciones de terceros a considerar también.
Tratamientos CSS avanzados en Edge Animate
Si bien es fabuloso que podamos hacer uso de fuentes web, sombras de texto y otros tratamientos avanzados dentro de nuestras composiciones de Edge Animate, ¿qué sucede si queremos incluir efectos como fondos degradados en ciertos elementos rectangulares? Afortunadamente, como todo esto es solo HTML, CSS y JavaScript, es bastante fácil seguir adelante y editar nuestros archivos de composición de Edge Animate publicados para usar efectos que no son compatibles con la propia aplicación Edge Animate.
La forma más directa de habilitar efectos avanzados (como degradados CSS) dentro de una composición es aprovechando las clases CSS y otros designadores utilizados por Edge Animate durante la creación. Una de las formas más directas de hacerlo es aprovechando las reglas de especificidad de CSS. También tenemos la capacidad de etiquetar ciertos elementos dentro de Edge Animate con nombres de clase. Esto es mucho más preciso y es lo que haremos para esta demostración.
Hay algunas otras formas de aumentar la especificidad de CSS en los elementos dentro de Edge Animate. Por ejemplo, podríamos aplicar un ID único a un elemento y también establecer el tipo de elemento en <p> en lugar del elemento <div> genérico que Edge Animate normalmente crea para los elementos de texto. El ID se puede utilizar para especificar reglas CSS y la designación de párrafo puede ayudar con la especificidad.
Para aplicar algo de CSS a nuestra composición, ahora debemos probar o publicar para renderizar los archivos adecuados. Al ver la composición en un navegador web como Google Chrome, podemos inspeccionar la composición para asegurarnos del identificador específico que se utilizará para apuntar a ciertos elementos.
En el siguiente código, estamos apuntando a un elemento con la clase GradientBG. Esta es una designación bastante específica y nos permitirá aislar este elemento en particular a través de las reglas CSS de fondo para renderizar un degradado complejo usando nada más que CSS:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Gradient</title>
<script type="text/javascript" charset="utf-8" src="GradientBG_edgePreload.js"></script>
<style>
.edgeLoad-648104304 {
visibility: hidden;
}
.GradientBG {
background: #f28c26;
background: -moz-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f28c26), color-stop(47%, #191919), color-stop(100%, #631e1e), color-stop(100%, #0e0e0e), color-stop(100%, #d83511));
background: -webkit-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: -o-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: -ms-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: linear-gradient(135deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f28c26', endColorstr='#d83511', GradientType=1);
}
</style>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-516055382 edgeLoad-EDGE-516055382"></div>
</body>
</html>
Tenga en cuenta que también estamos utilizando un atributo de filtro junto con nuestros diversos especificadores de degradado de fondo para apuntar a versiones anteriores de Internet Explorer.
Una vez que guardemos esta modificación y ejecutemos la composición dentro de un navegador web que admita degradados CSS, veremos el degradado renderizado perfectamente junto con nuestro elemento rectangular base.
Si bien este ejemplo permite específicamente degradados en elementos rectangulares, se puede utilizar para casi cualquier modificación de propiedad a través de CSS. Simplemente debe aplicarse fuera de Edge Animate.
Compatibilidad con video en Adobe Edge Animate
Si bien Edge Animate aún no admite la inclusión de elementos de video dentro de una composición, eso no significa que no se pueda hacer. La forma más eficaz de incluir vídeo dentro de una composición de Edge Animate es utilizar la acción Establecer texto del elemento para reemplazar el contenido de un elemento rectangular con una etiqueta <video> o <iframe> que apunte directamente a la fuente del vídeo o a algún documento intermedio.
Cuando se utiliza vídeo en la web hoy en día, tenemos dos opciones principales: la etiqueta <video> de HTML5 o un archivo SWF para utilizar con Adobe Flash Player.
La etiqueta <video> de HTML5
El mecanismo más frecuente para distribuir vídeo en la web es mediante el uso de Adobe Flash Player. La segunda forma más popular es a través de la etiqueta <video> de HTML5. Este método es cada vez más utilizado por los autores web, especialmente para aquellos que desean dirigirse a hardware que ejecuta iOS y otros dispositivos que no son compatibles con Flash Player en el navegador web.
La etiqueta <video> en sí es bastante simple, pero dependiendo del navegador y una serie de problemas de códec, la implementación puede no ser ideal. Aquí vemos la etiqueta <video> en una de sus implementaciones más simples:
<video width="560" height="315" controls="controls">
<source src="testmovie.mp4" type="video/mp4" />
<source src="testmovie.mp4" type="video/mp4" />
<source src="testmovie.ogg" type="video/ogg" />
</video>
En general, hay tres formatos de vídeo que son compatibles con los distintos navegadores en este momento. Echemos un vistazo general a cada uno de ellos.
MP4
MP4 es un formato estándar de la industria ampliamente compatible para la entrega de vídeo en computadoras de escritorio y dispositivos. El principal inconveniente de MP4 es que tiene ciertos requisitos de patente. Muchos dispositivos incluyen decodificadores H.264 basados en hardware, lo que hace que MP4 sea más deseable para su uso en teléfonos inteligentes y tabletas.
WebM
El formato WebM se conocía anteriormente como VP8. Google adquirió la especificación de On2 y la ha abierto como una especificación llamada WebM. No es ampliamente compatible, pero tiene mucho respaldo de la industria ya que (supuestamente) no hay patentes y permite una compresión y calidad similares a las de MP4.
OGG
El formato OGG es un formato de código abierto con ninguna patente adjunta. Solo lo utilizan de forma limitada determinados navegadores específicos. El formato no tiene mucho apoyo de la industria fuera de la comunidad de navegadores y, en general, es de mucha peor calidad que cualquiera de los otros formatos.
Adobe Flash Player
Como una composición de Edge Animate es en realidad solo HTML5, podemos usar la gama completa de etiquetas HTML, incluidas <object> y <embed>. Si no nos importa la compatibilidad con iOS, es perfectamente aceptable emplear un archivo SWF para una reproducción de vídeo mejorada dentro de nuestra composición de Edge Animate. Como se mencionó anteriormente, Flash Player sigue siendo el método más utilizado para habilitar la reproducción de vídeo en la web, no solo por capacidades avanzadas como la transmisión a través del protocolo de mensajería en tiempo real (RTMP) y las protecciones de gestión de derechos digitales (DRM) que permite. , sino también simplemente porque puede ser una gran experiencia cuando se usa correctamente.
Incrustar un vídeo de YouTube dentro de una composición de Edge Animate
En este ejemplo, incrustaremos un vídeo de YouTube ([invalid URL removed]) en una composición de Edge Animate.
Tenga en cuenta que este tipo de inclusión de activos externos en realidad se puede lograr con todo tipo de medios externos, ¡no solo con vídeo!
El primer paso para obtener un vídeo dentro de Edge Animate es crear un elemento contenedor. En este ejemplo, dibujaremos un elemento rectangular simple utilizando la herramienta Rectángulo. Como se muestra anteriormente, proporcionamos una ID de VideoHolder a este elemento y lo dimensionamos a las dimensiones del vídeo que deseamos utilizar.
Este proyecto se encuentra en el directorio llamado VideoEmbed en los archivos del proyecto del libro.
Para cargar realmente un vídeo, emplearemos una instancia de Desencadenador a lo largo del panel Línea de tiempo, como se muestra en la siguiente captura de pantalla:
Aquí, estamos animando nuestro marcador de posición de vídeo desde fuera de la pantalla, por lo que querremos establecer el valor para Desencadenador en algún momento después de que se complete la animación del elemento. En este caso, establecemos un nuevo Desencadenador en 0:01.
Ahora necesitamos seleccionar un vídeo para incrustar en nuestra composición. En YouTube, debemos elegir Compartir para compartir el vídeo elegido y elegir mostrar el código para insertar haciendo clic en Insertar.
Esto nos proporcionará la etiqueta <iframe>, que debe copiarse para insertarla dentro de la composición de Edge Animate:
<iframe width="560" height="315" src="http://www.youtube.com/ embed/2MyNO_ecQag" frameborder="0" allowfullscreen></iframe>
Tenga en cuenta que esta es una buena manera de obtener las dimensiones exactas que se utilizarán para nuestro elemento contenedor de vídeo, en caso de que no sepamos qué tan grande hacer el elemento rectangular inicial dentro de Edge Animate.
De vuelta en Edge Animate, abra el panel Acciones para la instancia de Desencadenador que hemos creado en el panel Línea de tiempo e inserte el código para Establecer texto del elemento desde los fragmentos de código. Se insertará el siguiente fragmento, pero requerirá modificación:
sym.$("Text").html("NewText");
}Podríamos, en lugar de haber vinculado este evento a una instancia de Desencadenador, haber realizado la acción Establecer texto del elemento en compositionReady. Funcionaría, pero podría causar un retraso discordante en cualquier animación, mientras que el vídeo se carga en nuestra composición.
Ahora cambiamos el elemento de destino a VideoHolder y reemplazamos el texto que se insertará con el código <iframe> de YouTube, como se muestra en el siguiente fragmento de código. Un paso muy importante aquí es reemplazar todas las comillas dobles dentro del código <iframe> con comillas simples, para evitar interferencias con el código JavaScript de Edge Animate, que utiliza comillas dobles.
sym.$("VideoHolder").html("<iframe width='560' height='315' src='http://www.youtube.com/embed/2MyNO_ecQag' frameborder='0' allowfullscreen></iframe>");
Tenga en cuenta nuevamente que debemos reemplazar absolutamente las comillas dobles con comillas simples en cualquier atributo de la etiqueta <iframe> para evitar conflictos con las API de Edge Animate.
No podremos obtener una vista previa de esto dentro de Edge Animate, pero al publicar nuestra composición u obtener una vista previa en un navegador, la animación se reproducirá y el vídeo se cargará en nuestro elemento contenedor como se esperaba. Podremos emplear cualquiera de los controles proporcionados en el reproductor de vídeo proporcionado por YouTube, ya sea que se sirva el reproductor HTML5 <video> o la reproducción estándar basada en Flash Player.
Lo mejor de esta técnica es que se puede utilizar para incluir todo tipo de contenido externo proporcionado por una variedad de servicios web. En general, si podemos incrustar contenido en HTML, ¡podemos incrustar el mismo contenido dentro de una composición de Edge Animate!
Integración de audio composicional
Mientras que en los primeros días de Internet, muchos se conformaban con que los archivos MIDI se reprodujeran a través de SoundBlaster 16 como reproducción de audio aceptable en la Web… hoy en día hay una expectativa mayor, especialmente ahora que la gente está acostumbrada a la reproducción enriquecida a través de las diversas soluciones basadas en Flash Player de la última década, todavía bastante frecuentes en la actualidad. En la siguiente captura de pantalla, vemos el aspecto predeterminado de la etiqueta de audio renderizado por Google Chrome. Los elementos de apariencia e incluso de control predeterminados difieren entre las implementaciones del navegador.
Exploraciones adicionales con Adobe Edge Animate (continuación)
Otras herramientas de desarrollo
Además de las herramientas descritas anteriormente, también podemos hacer uso de cualquiera de las otras incluidas en Google Chrome al solucionar problemas de nuestra aplicación. Cabe destacar especialmente las herramientas Perfiles y Consola al solucionar problemas de JavaScript dentro de una composición de Animate.
Si está utilizando el navegador Apple Safari, notará que las herramientas de desarrollo en ese navegador son muy similares a las disponibles en Chrome. Esto se debe a que estas herramientas son una parte fundamental de WebKit, que utilizan ambos navegadores.
Si bien estamos prestando especial atención a Google Chrome en este libro, es importante tener en cuenta que casi todos los navegadores web modernos vienen equipados con algún tipo de herramientas de desarrollo. Las versiones recientes de Mozilla Firefox y Microsoft Internet Explorer vienen con un conjunto de herramientas de desarrollo, y siempre hay opciones de terceros a considerar también.
Tratamientos CSS avanzados en Edge Animate
Si bien es fabuloso que podamos hacer uso de fuentes web, sombras de texto y otros tratamientos avanzados dentro de nuestras composiciones de Edge Animate, ¿qué sucede si queremos incluir efectos como fondos degradados en ciertos elementos rectangulares? Afortunadamente, como todo esto es solo HTML, CSS y JavaScript, es bastante fácil seguir adelante y editar nuestros archivos de composición de Edge Animate publicados para usar efectos que no son compatibles con la propia aplicación Edge Animate.
La forma más directa de habilitar efectos avanzados (como degradados CSS) dentro de una composición es aprovechando las clases CSS y otros designadores utilizados por Edge Animate durante la creación. Una de las formas más directas de hacerlo es aprovechando las reglas de especificidad de CSS. También tenemos la capacidad de etiquetar ciertos elementos dentro de Edge Animate con nombres de clase. Esto es mucho más preciso y es lo que haremos para esta demostración.
Hay algunas otras formas de aumentar la especificidad de CSS en los elementos dentro de Edge Animate. Por ejemplo, podríamos aplicar un ID único a un elemento y también establecer el tipo de elemento en <p> en lugar del elemento <div> genérico que Edge Animate normalmente crea para los elementos de texto. El ID se puede utilizar para especificar reglas CSS y la designación de párrafo puede ayudar con la especificidad.
Para aplicar algo de CSS a nuestra composición, ahora debemos probar o publicar para renderizar los archivos adecuados. Al ver la composición en un navegador web como Google Chrome, podemos inspeccionar la composición para asegurarnos del identificador específico que se utilizará para apuntar a ciertos elementos.
En el siguiente código, estamos apuntando a un elemento con la clase GradientBG. Esta es una designación bastante específica y nos permitirá aislar este elemento en particular a través de las reglas CSS de fondo para renderizar un degradado complejo usando nada más que CSS:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Gradient</title>
<script type="text/javascript" charset="utf-8" src="GradientBG_edgePreload.js"></script>
<style>
.edgeLoad-648104304 {
visibility: hidden;
}
.GradientBG {
background: #f28c26;
background: -moz-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f28c26), color-stop(47%, #191919), color-stop(100%, #631e1e), color-stop(100%, #0e0e0e), color-stop(100%, #d83511));
background: -webkit-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: -o-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: -ms-linear-gradient(-45deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
background: linear-gradient(135deg, #f28c26 0%, #191919 47%, #631e1e 100%, #0e0e0e 100%, #d83511 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f28c26', endColorstr='#d83511', GradientType=1);
}
</style>
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-516055382 edgeLoad-EDGE-516055382"></div>
</body>
</html>
Tenga en cuenta que también estamos utilizando un atributo de filtro junto con nuestros diversos especificadores de degradado de fondo para apuntar a versiones anteriores de Internet Explorer.
Una vez que guardemos esta modificación y ejecutemos la composición dentro de un navegador web que admita degradados CSS, veremos el degradado renderizado perfectamente junto con nuestro elemento rectangular base.
Si bien este ejemplo permite específicamente degradados en elementos rectangulares, se puede utilizar para casi cualquier modificación de propiedad a través de CSS. Simplemente debe aplicarse fuera de Edge Animate.
Compatibilidad con video en Adobe Edge Animate
Si bien Edge Animate aún no admite la inclusión de elementos de video dentro de una composición, eso no significa que no se pueda hacer. La forma más eficaz de incluir vídeo dentro de una composición de Edge Animate es utilizar la acción Establecer texto del elemento para reemplazar el contenido de un elemento rectangular con una etiqueta <video> o <iframe> que apunte directamente a la fuente del vídeo o a algún documento intermedio.
Cuando se utiliza vídeo en la web hoy en día, tenemos dos opciones principales: la etiqueta <video> de HTML5 o un archivo SWF para utilizar con Adobe Flash Player.
La etiqueta <video> de HTML5
El mecanismo más frecuente para distribuir vídeo en la web es mediante el uso de Adobe Flash Player. La segunda forma más popular es a través de la etiqueta <video> de HTML5. Este método es cada vez más utilizado por los autores web, especialmente para aquellos que desean dirigirse a hardware que ejecuta iOS y otros dispositivos que no son compatibles con Flash Player en el navegador web.
La etiqueta <video> en sí es bastante simple, pero dependiendo del navegador y una serie de problemas de códec, la implementación puede no ser ideal. Aquí vemos la etiqueta <video> en una de sus implementaciones más simples:
<video width="560" height="315" controls="controls">
<source src="testmovie.mp4" type="video/mp4" />
<source src="testmovie.mp4" type="video/mp4" />
<source src="testmovie.ogg" type="video/ogg" />
</video>
En general, hay tres formatos de vídeo que son compatibles con los distintos navegadores en este momento. Echemos un vistazo general a cada uno de ellos.
MP4
MP4 es un formato estándar de la industria ampliamente compatible para la entrega de vídeo en computadoras de escritorio y dispositivos. El principal inconveniente de MP4 es que tiene ciertos requisitos de patente. Muchos dispositivos incluyen decodificadores H.264 basados en hardware, lo que hace que MP4 sea más deseable para su uso en teléfonos inteligentes y tabletas.
WebM
El formato WebM se conocía anteriormente como VP8. Google adquirió la especificación de On2 y la ha abierto como una especificación llamada WebM. No es ampliamente compatible, pero tiene mucho respaldo de la industria ya que (supuestamente) no hay patentes y permite una compresión y calidad similares a las de MP4.
OGG
El formato OGG es un formato de código abierto con ninguna patente adjunta. Solo lo utilizan de forma limitada determinados navegadores específicos. El formato no tiene mucho apoyo de la industria fuera de la comunidad de navegadores y, en general, es de mucha peor calidad que cualquiera de los otros formatos.
Adobe Flash Player
Como una composición de Edge Animate es en realidad solo HTML5, podemos usar la gama completa de etiquetas HTML, incluidas <object> y <embed>. Si no nos importa la compatibilidad con iOS, es perfectamente aceptable emplear un archivo SWF para una reproducción de vídeo mejorada dentro de nuestra composición de Edge Animate. Como se mencionó anteriormente, Flash Player sigue siendo el método más utilizado para habilitar la reproducción de vídeo en la web, no solo por capacidades avanzadas como la transmisión a través del protocolo de mensajería en tiempo real (RTMP) y las protecciones de gestión de derechos digitales (DRM) que permite. , sino también simplemente porque puede ser una gran experiencia cuando se usa correctamente.
Incrustar un vídeo de YouTube dentro de una composición de Edge Animate
En este ejemplo, incrustaremos un vídeo de YouTube ([invalid URL removed]) en una composición de Edge Animate.
Tenga en cuenta que este tipo de inclusión de activos externos en realidad se puede lograr con todo tipo de medios externos, ¡no solo con vídeo!
El primer paso para obtener un vídeo dentro de Edge Animate es crear un elemento contenedor. En este ejemplo, dibujaremos un elemento rectangular simple utilizando la herramienta Rectángulo. Como se muestra anteriormente, proporcionamos una ID de VideoHolder a este elemento y lo dimensionamos a las dimensiones del vídeo que deseamos utilizar.
Este proyecto se encuentra en el directorio llamado VideoEmbed en los archivos del proyecto del libro.
Para cargar realmente un vídeo, emplearemos una instancia de Desencadenador a lo largo del panel Línea de tiempo, como se muestra en la siguiente captura de pantalla:
Aquí, estamos animando nuestro marcador de posición de vídeo desde fuera de la pantalla, por lo que querremos establecer el valor para Desencadenador en algún momento después de que se complete la animación del elemento. En este caso, establecemos un nuevo Desencadenador en 0:01.
Ahora necesitamos seleccionar un vídeo para incrustar en nuestra composición. En YouTube, debemos elegir Compartir para compartir el vídeo elegido y elegir mostrar el código para insertar haciendo clic en Insertar.
Esto nos proporcionará la etiqueta <iframe>, que debe copiarse para insertarla dentro de la composición de Edge Animate:
<iframe width="560" height="315" src="http://www.youtube.com/ embed/2MyNO_ecQag" frameborder="0" allowfullscreen></iframe>
Tenga en cuenta que esta es una buena manera de obtener las dimensiones exactas que se utilizarán para nuestro elemento contenedor de vídeo, en caso de que no sepamos qué tan grande hacer el elemento rectangular inicial dentro de Edge Animate.
De vuelta en Edge Animate, abra el panel Acciones para la instancia de Desencadenador que hemos creado en el panel Línea de tiempo e inserte el código para Establecer texto del elemento desde los fragmentos de código. Se insertará el siguiente fragmento, pero requerirá modificación:
sym.$("Text").html("NewText");
}
Podríamos, en lugar de haber vinculado este evento a una instancia de Desencadenador, haber realizado la acción Establecer texto del elemento en compositionReady. Funcionaría, pero podría causar un retraso discordante en cualquier animación, mientras que el vídeo se carga en nuestra composición.
Ahora cambiamos el elemento de destino a VideoHolder y reemplazamos el texto que se insertará con el código <iframe> de YouTube, como se muestra en el siguiente fragmento de código. Un paso muy importante aquí es reemplazar todas las comillas dobles dentro del código <iframe> con comillas simples, para evitar interferencias con el código JavaScript de Edge Animate, que utiliza comillas dobles.
sym.$("VideoHolder").html("<iframe width='560' height='315' src='http://www.youtube.com/embed/2MyNO_ecQag' frameborder='0' allowfullscreen></iframe>");
Tenga en cuenta nuevamente que debemos reemplazar absolutamente las comillas dobles con comillas simples en cualquier atributo de la etiqueta <iframe> para evitar conflictos con las API de Edge Animate.
No podremos obtener una vista previa de esto dentro de Edge Animate, pero al publicar nuestra composición u obtener una vista previa en un navegador, la animación se reproducirá y el vídeo se cargará en nuestro elemento contenedor como se esperaba. Podremos emplear cualquiera de los controles proporcionados en el reproductor de vídeo proporcionado por YouTube, ya sea que se sirva el reproductor HTML5 <video> o la reproducción estándar basada en Flash Player.
Lo mejor de esta técnica es que se puede utilizar para incluir todo tipo de contenido externo proporcionado por una variedad de servicios web. En general, si podemos incrustar contenido en HTML, ¡podemos incrustar el mismo contenido dentro de una composición de Edge Animate!
Integración de audio composicional
Mientras que en los primeros días de Internet, muchos se conformaban con que los archivos MIDI se reprodujeran a través de SoundBlaster 16 como reproducción de audio aceptable en la Web… hoy en día hay una expectativa mayor, especialmente ahora que la gente está acostumbrada a la reproducción enriquecida a través de las diversas soluciones basadas en Flash Player de la última década, todavía bastante frecuentes en la actualidad. En la siguiente captura de pantalla, vemos el aspecto predeterminado de la etiqueta de audio renderizado por Google Chrome. Los elementos de apariencia e incluso de control predeterminados difieren entre las implementaciones del navegador.
Para proporcionar una solución basada en navegador para la reproducción de audio que no dependa de Adobe Flash Player u otras soluciones adicionales, los organismos de estándares han redactado una etiqueta <audio> como parte de la especificación HTML5.
La etiqueta de audio HTML5
La etiqueta <audio> de HTML5 se puede utilizar para proporcionar una reproducción progresiva de determinados archivos de audio junto con controles opcionales con estilo de navegador. Como etiqueta HTML, se puede implementar como cualquier otra etiqueta a través del marcado sintáctico. Esto es muy similar a cómo funcionan las etiquetas <img> o <video>, de la siguiente manera:
<audio src="audio.mp3" />
Alternativamente, la etiqueta se puede organizar como se muestra en el siguiente código:
<audio>
<source src="audio.mp4" type="audio/mp4" />
<source src="audio.ogg" type="audio/ogg" />
</audio>
A continuación, se detallan los atributos de etiqueta de audio actuales que tenemos disponibles:
| Atributo | Descripción |
|---|---|
| autoplay | Determina si el audio debe reproducirse por sí solo o esperar algún comando externo. |
| controls | Especifica que el navegador debe mostrar los controles de reproducción para que el usuario interactúe con el audio. |
| loop | Determina si el archivo de audio debe repetirse al finalizar la reproducción. |
| preload | Permite que el navegador sepa cómo quiere el autor que maneje la carga del archivo. El navegador puede anular este atributo o ignorarlo. |
| src | Esta es la ruta a un archivo de audio específico. |
Primero debemos crear la composición en Edge Animate y luego publicarla para la Web. Luego, abrimos el archivo HTML publicado en un editor de texto y agregamos las etiquetas de audio manualmente. En el caso de nuestro ejemplo de composición, la fuente aparecerá de la siguiente manera:
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>shivervein</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<script type="text/javascript" charset="utf-8" src="shivervein_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-506590799 {
visibility: hidden;
}
</style>
</head>
<body style="margin:0;padding:0;height:100%;">
<div id="Stage" class="EDGE-506590799 edgeLoad-EDGE-506590799"></div>
<audio autoplay="true" loop="">
<source src="12_shiverechos.mp3" type="audio/mp3">
<source src="12_shiverechos.ogg" type="audio/ogg">
</audio>
</body>
</html>
Este código proporcionará un ambiente de fondo a nuestra composición de Edge Animate al reproducir automáticamente la pista de audio especificada. Hemos excluido cualquier control, haciendo que el elemento de audio sea invisible y esté fuera del control del usuario. También hemos proporcionado archivos .mp3 y .ogg para apuntar a una variedad de navegadores web.
Tenga en cuenta que cualquier texto proporcionado dentro de una etiqueta <audio> se presentará como un mensaje alternativo para aquellos navegadores que no admitan esta etiqueta.
Usar Adobe Edge Inspect con Edge Animate
Edge Inspect es un nuevo producto de Adobe que busca disminuir parte del dolor que implica el desarrollo web móvil al agilizar el proceso de vista previa y prueba de dispositivos. Una de las mejores cosas de Inspect es que se está creando teniendo en cuenta el contenido producido en Edge Animate y forma parte de la familia de productos Adobe Edge Tools and Services.
En el momento de escribir este artículo, Adobe Edge Inspect está disponible como descarga gratuita desde Adobe Creative Cloud. Necesitaremos visitar [invalid URL removed] para descargar e instalar la aplicación para continuar.
Tenga en cuenta que para aprovechar al máximo Inspect, la extensión para Google Chrome y el cliente móvil para Android o iOS también deben descargarse e instalarse en el dispositivo de prueba. Se puede acceder a estos clientes a través de la tienda de aplicaciones designada de cada plataforma y la página de descarga de Inspect tiene instrucciones completas para la configuración de Inspect.
Edge Inspect funciona en sincronía con el navegador Google Chrome. Una vez que Inspect está instalado en una computadora host, debemos asegurarnos de que la extensión de Chrome para Adobe Inspect también esté instalada. La extensión de Google Chrome se puede descargar de
Una vez instalada, la extensión de Google Chrome se puede administrar a través del administrador de extensiones de Chrome, disponible a través del menú de opciones en Herramientas | Extensiones o escribiendo chrome: // chrome / extensions en la barra de direcciones de Chrome.
Si ejecuta Windows, es posible que también debamos realizar el paso adicional de instalar el servicio Bonjour. Afortunadamente, Adobe ha empaquetado el instalador de Bonjour en el directorio de instalación de Inspect y solo se nos notificará que lo instalemos si aún no lo tenemos.
Una vez que tengamos los tres fragmentos de Edge Inspect ejecutándose en el sistema operativo host, el sistema operativo móvil y dentro del navegador Chrome, podemos continuar con las conexiones y la configuración:
- Asegúrese de que la utilidad de host de Adobe Edge Inspect se esté ejecutando. Aparecerá un pequeño indicador en la barra de tareas del sistema donde se puede administrar Inspect.
- Ejecute la aplicación Inspect en un dispositivo conectado a través de la misma red que la máquina host. La aplicación Inspect buscará conexiones y presentará las máquinas host que encuentre.
- Haga clic en el host deseado en la lista o podemos agregar manualmente una conexión a través de la dirección IP a través de la aplicación. Se establecerá una conexión y luego se mostrará un código de acceso en el dispositivo móvil.
- Dentro de Google Chrome, habrá un pequeño icono en el lado derecho de la barra de direcciones. Haga clic en este icono e ingrese el código de acceso proporcionado en el campo de entrada.
- Ahora abra un proyecto en Edge Animate y realice una vista previa del navegador en Chrome. La composición se ejecutará en Chrome y también podremos ver la composición ejecutándose con la ayuda de la aplicación Inspect en nuestro dispositivo móvil.
En la siguiente captura de pantalla, podemos ver una composición de Animate ejecutándose dentro de la vista Inspect en un dispositivo Android. Observe que la aplicación Inspect muestra el nombre de la máquina host en la barra de herramientas superior.
Si bien Edge Inspect proporciona un excelente flujo de trabajo para probar y obtener una vista previa del contenido de Edge Animate en dispositivos móviles, también es recomendable asegurarse de probar la composición publicada también en navegadores de dispositivos normales.
Resumen
En este capítulo, hemos revisado una variedad de opciones adicionales que tenemos cuando trabajamos en Adobe Edge Animate. Estas opciones incluyen estrategias de inclusión alternativas, trucos para sacar más provecho de Edge Animate y el uso de otras herramientas como Edge Inspect.
Edge Animate es una nueva y excelente herramienta para el diseño interactivo y de movimiento. Está previsto que Edge Animate tenga versiones trimestrales, que amplíen y se sumen a la funcionalidad anterior. La versión 1.0 es bastante impresionante y, a medida que pasa el tiempo, se volverá aún más potente.
Comentarios
Publicar un comentario