10. Publicando - Suplemento

 Contenido del suplemento

• Detectando la versión de Flash Player
• Cambiar la configuración de visualización
• Cambiar la configuración de reproducción
• Comprender los archivos de salida HTML5
• Editar el HTML5 Canvas convertido

Detectando la versión de Flash Player

Puedes detectar automáticamente la versión de Flash Player en el ordenador de un espectador; si la versión de Flash Player detectada no es la requerida, un mensaje le pedirá al espectador que descargue el reproductor actualizado.

1. Si es necesario, selecciona Archivo > Configuración de publicación o haz clic en el botón Configuración de publicación en la sección Publicar del panel Propiedades.

2. Selecciona el formato Contenedor HTML en el lado izquierdo del cuadro de diálogo.

3. Selecciona Detectar versión de Flash.

4. En los campos Versión, introduce la versión más antigua de Flash Player que se aceptará.

5. Haz clic en Publicar y luego en Aceptar para cerrar el cuadro de diálogo.

   Animate publica tres archivos.

   Animate crea un archivo SWF, un archivo HTML y un archivo adicional llamado swfobject.js que contiene código JavaScript adicional que detectará la versión especificada de Flash Player. Si el navegador no tiene la versión más antigua de Flash Player que introdujiste en los campos Versión, se muestra un mensaje en lugar de la película de Animate. Los tres archivos deben cargarse en tu servidor web para reproducir tu película.

Cambiar la configuración de visualización

Tienes muchas opciones para cambiar la forma en que se muestra tu película de Animate en un navegador. La configuración de Tamaño y Escala para el Contenedor HTML funciona en conjunto para determinar el tamaño de la película y la cantidad de distorsión y recorte.

1. Selecciona Archivo > Configuración de publicación o haz clic en el botón Configuración de publicación en la sección Publicar del panel Propiedades.

2. Selecciona el formato Contenedor HTML en el lado izquierdo del cuadro de diálogo.

3. Para establecer el tamaño al que se reproducirá la película en el navegador del usuario, elige uno de estos elementos del menú Tamaño:

   • Coincidir con la película, para reproducir el proyecto de Animate con el tamaño exacto del escenario establecido en Animate. Esta es la configuración habitual para casi todos tus proyectos de Animate.

   • Píxeles, para introducir un tamaño diferente en píxeles para tu película de Animate.

   • Porcentaje, para introducir un tamaño diferente para tu película de Animate como un porcentaje de la ventana del navegador.

4. Haz clic en Escala y alineación para expandir la configuración avanzada debajo.

5. Para indicarle a Animate cómo se debe ajustar el tamaño de la película para que quepa en la ventana del navegador del usuario, elige uno de estos elementos del menú Escala:

   • Predeterminado (Mostrar todo), si quieres que la opción Escala ajuste la película en la ventana del navegador sin distorsiones ni recortes para mostrar todo el contenido. Esta es la configuración habitual para casi todos los proyectos de Animate. Si un usuario reduce el tamaño de la ventana del navegador, el contenido permanece constante pero la ventana lo recorta. Para las siguientes opciones, elige Porcentaje en el menú Tamaño:

   • Sin borde, para escalar la película para que se ajuste a la ventana del navegador sin distorsiones mientras se recorta el contenido para llenar la ventana.

   • Ajuste exacto, para escalar la película para que llene la ventana del navegador tanto en las dimensiones horizontales como verticales. Con estas opciones, no se muestra nada del color de fondo, pero el contenido puede distorsionarse.

   • Sin escala, para mantener el tamaño de la película constante sin importar qué tan grande o pequeña sea la ventana del navegador.

Cambiar la configuración de reproducción

Puedes cambiar varias opciones que afectan la forma en que se reproduce tu película de Animate en un navegador.

1. Asegúrate de que el formato Contenedor HTML todavía esté resaltado en el cuadro de diálogo Configuración de publicación.

2. Selecciona o anula la selección de una o más de las siguientes opciones de Reproducción:

   • Selecciona Pausado al inicio para que la película se pause en el primer fotograma.

   • Anula la selección de Bucle para que la película se reproduzca solo una vez.

   • Anula la selección de Mostrar menú para limitar las opciones en el menú contextual que aparece cuando haces clic con el botón derecho en una película de Animate en un navegador.

Comprender los archivos de salida HTML5

La configuración predeterminada crea dos archivos: un archivo JavaScript que contiene el código que impulsa la animación y un archivo HTML que muestra la animación en un navegador. Animate publica los dos archivos en la misma carpeta que tu archivo de Animate.

1. Abre el archivo HTML llamado 10_workingcopy_build.html en un editor de texto, como Adobe Dreamweaver.

   El archivo HTML carga las bibliotecas de JavaScript necesarias desde http://code.createjs.com [invalid URL removed], que aloja el código. El archivo también carga el código JavaScript para tu animación en 10_workingcopy_build.js. El archivo HTML inicializa y muestra la animación en una etiqueta canvas HTML5.

2. Abre el archivo JavaScript llamado 10_workingcopy_build.js en un editor de texto, como Adobe Dreamweaver.

   El código contiene toda la información para crear los gráficos y ponerlos en movimiento, utilizando las bibliotecas de JavaScript CreateJS. Al escanear el código, encontrarás coordenadas y todos los valores específicos necesarios para tu contenido.

Editar el HTML5 Canvas convertido

Para que la animación funcione como un proyecto HTML5, corregirás la rotación 3D del título, que no es compatible. En lugar de hacer que el título gire en 3D, harás que el título tenga una apariencia dramática con un cambio de escala.

1. Desbloquea la capa del título en la parte superior de la pila de capas en la Línea de tiempo, si aún no está desbloqueada.

2. Selecciona el fotograma 155 de la interpolación de movimiento en la capa del título.

3. Inserta un nuevo fotograma clave (Insertar > Línea de tiempo > Fotograma clave o haz clic con el botón derecho y selecciona Insertar fotograma clave > Todos).

   Animate inserta un nuevo fotograma clave en el fotograma 155 en la capa del título.

4. Mueve el cabezal de reproducción al comienzo de la interpolación de movimiento, en el fotograma 120.

5. Selecciona la herramienta Transformación libre y selecciona el gráfico del título en el Escenario.

   Un cuadro delimitador con controles de transformación rodea el gráfico del título.

6. Mantén presionada la tecla Mayús y arrastra una de las esquinas del cuadro delimitador hacia afuera.

   El gráfico del título se agranda manteniendo su relación de aspecto original. Haz que el gráfico cubra aproximadamente la mitad del Escenario. El ancho final debe ser de aproximadamente 1100 píxeles.

7. Selecciona Control > Probar para probar el contenido convertido.

   La animación se reproduce en tu navegador. Cerca del final de la secuencia, el gráfico del título aparece grande y se encoge drásticamente, colocándose en su lugar para completar la presentación cinematográfica. Si bien no es lo mismo que la rotación 3D, la animación es tan efectiva para causar un impacto.