10. Publicando

Resumen de la lección

• Comprender los entornos de tiempo de ejecución
• Comprender los archivos de salida para diferentes tipos de documentos de Animate
• Modificar la configuración de publicación
• Crear interpolaciones clásicas para la animación HTML5
• Insertar y editar JavaScript en el panel Acciones
• Usar fragmentos de HTML5 Canvas
• Convertir un documento ActionScript 3.0 existente a un documento HTML5 Canvas
• Publicar una aplicación Adobe AIR para el escritorio
• Publicar un proyector para Windows y Mac OS
• Probar interacciones móviles en AIR Debug Launcher
• Comprender la publicación para iPhone o Android

Esta lección te llevará aproximadamente 90 minutos completarla. Si aún no tienes los archivos del proyecto para esta lección, descárgalos  En la página de tu cuenta también encontrarás cualquier actualización de las lecciones o de los archivos de las lecciones.

Usa los distintos tipos de documentos en Adobe Animate CC para crear contenido dirigido a una variedad de plataformas y usos, incluidos multimedia HTML5 para el navegador web, multimedia para Flash Player, aplicaciones de escritorio, video de alta definición o aplicaciones para dispositivos móviles. Coloca tu contenido en todas partes mientras sigues aprovechando las potentes y familiares herramientas de animación y dibujo de Animate.

Entendiendo la publicación

La publicación es el proceso que crea el archivo o los archivos necesarios para reproducir tu proyecto final de Adobe Animate CC para tus espectadores. Ten en cuenta que Animate CC es la aplicación de creación, que es un entorno diferente de donde tus espectadores experimentan tu película. En Animate CC, creas contenido, lo que significa que estás creando arte y animación, y agregando texto, videos, sonido, botones y código. En el entorno de destino, como un navegador de escritorio o un dispositivo móvil, tus espectadores ven el contenido cuando se reproduce o se ejecuta. Por lo tanto, los desarrolladores hacen una distinción entre los entornos de "tiempo de creación" y "tiempo de ejecución".

Nota: Si aún no has descargado los archivos del proyecto para esta lección a tu ordenador desde la página de tu cuenta, asegúrate de hacerlo ahora. En esa página también encontrarás un Suplemento descargable para esta lección que contiene información sobre temas adicionales. Consulta la Introducción al principio del libro.

Animate puede publicar contenido en varios entornos de tiempo de ejecución, y tu entorno de tiempo de ejecución deseado determina el documento de Animate que debes elegir cuando comienzas un proyecto por primera vez.

Tipos de documento

Aprendiste sobre los distintos tipos de documentos de Animate en la Lección 1 y has trabajado con algunos de ellos a lo largo de los proyectos de este libro. Por ejemplo, comenzaste un documento HTML5 Canvas para la Lección 2, un documento ActionScript 3.0 para la Lección 8 y un documento AIR for Desktop para la Lección 9. Cada proyecto publica un conjunto diferente de archivos para su entorno de tiempo de ejecución específico, pero cada proyecto se guarda como un archivo FLA o XFL (Animate) que editas en Animate CC.

En esta lección, explorarás las opciones de publicación para los tipos de documentos con mayor detalle. Trabajarás con una animación interactiva de HTML5 Canvas y aprenderás a crear aplicaciones de escritorio.

Entornos de tiempo de ejecución

Si un documento de ActionScript 3.0 se publica en SWF y se reproduce con Flash Player en un navegador web de escritorio, entonces Flash Player es el entorno de tiempo de ejecución para ese documento de ActionScript 3.0. Flash Player 23 es la última versión y admite todas las funciones nuevas de Animate CC. Flash Player está disponible como un complemento gratuito en el sitio web de Adobe para todos los principales navegadores y plataformas. En Google Chrome, Internet Explorer y otros, Flash Player viene preinstalado y se actualiza automáticamente.

Nota: El documento ActionScript 3.0 también admite la publicación de contenido como un proyector para Macintosh o Windows. Un proyector se reproduce como una aplicación independiente en el escritorio, sin necesidad de un navegador.

Si quieres dirigirte a los navegadores web sin necesidad de Flash Player, comienza tu proyecto de Animate con un documento HTML5 Canvas o WebGL. Para integrar la interactividad en un documento HTML5 Canvas, usa JavaScript en lugar de ActionScript. Puedes agregar JavaScript directamente en el panel Acciones o usar fragmentos de HTML5 Canvas.

Adobe AIR es otro entorno de tiempo de ejecución. AIR (Adobe Integrated Runtime) ejecuta contenido directamente desde tu escritorio, sin necesidad de un navegador. Cuando publicas tu contenido para AIR, puedes hacerlo disponible como un instalador que crea una aplicación independiente, o puedes crear la aplicación con el tiempo de ejecución ya instalado, conocido como "tiempo de ejecución cautivo".

También puedes publicar aplicaciones AIR como aplicaciones móviles que se pueden instalar y ejecutar en dispositivos Android y dispositivos iOS como Apple iPhone o iPad, cuyos navegadores no son compatibles con Flash Player.

Nota: No todas las funciones son compatibles con todos los tipos de documentos. Por ejemplo, los documentos WebGL no admiten texto y los documentos HTML5 Canvas no admiten las herramientas de rotación y traslación 3D. Las herramientas no compatibles aparecen atenuadas.

Nota: No puedes cambiar fácilmente de un tipo de documento a otro. Por ejemplo, no puedes convertir un documento HTML5 Canvas en un documento WebGL. Sin embargo, puedes usar los comandos estándar de copiar y pegar para mover tu contenido de un documento a otro. La excepción es la conversión de un documento ActionScript 3.0 a un documento HTML5 Canvas o WebGL, que Animate sí admite.

Publicando para Flash Player

Cuando publicas para Flash Player con un documento ActionScript 3.0, publicas dos archivos: un archivo SWF y un documento HTML que le dice al navegador web cómo mostrar el archivo SWF. Debes cargar ambos archivos a tu servidor web junto con cualquier otro archivo al que haga referencia tu archivo SWF (como cualquier archivo de video y máscaras). De forma predeterminada, el comando Publicar guarda todos los archivos necesarios en la misma carpeta.

Consejo: Cuando cambias la configuración en el cuadro de diálogo Configuración de publicación, Animate los guarda con el documento.

Puedes especificar diferentes opciones para publicar una película, incluido si detectar la versión de Flash Player instalada en el ordenador del espectador.

Borrando la caché de publicación

Cuando pruebas un documento ActionScript 3.0 seleccionando Control > Probar para generar un SWF, Animate coloca copias comprimidas de las fuentes y sonidos de tu proyecto en la caché de publicación. Cuando vuelves a probar tu película, Animate usa las versiones en la caché (si las fuentes y los sonidos no se modifican) para acelerar la exportación del archivo SWF. Sin embargo, puedes purgar manualmente la caché seleccionando Control > Borrar caché de publicación. Si quieres borrar la caché y probar la película, selecciona Control > Borrar caché de publicación y probar película.

Especificando la configuración de publicación para Flash Player

Puedes determinar cómo Animate publica el archivo SWF, incluida la versión de Flash Player que requiere y cómo se muestra y reproduce la película.

1. Abre el archivo 10Start_banner.fla, un banner animado simple para la ciudad ficticia de Meridien.

2. Selecciona Archivo > Configuración de publicación. Alternativamente, asegúrate de que no haya ningún objeto seleccionado en el Escenario para que el panel Propiedades muestre las propiedades del documento. Luego, en la sección Publicar, debajo de Perfil, haz clic en Configuración de publicación.

   Nota: En general, es mejor controlar una película de Animate con código que confiar en la configuración de Reproducción en el cuadro de diálogo Configuración de publicación. Por ejemplo, agrega un comando this.stop() en el primer fotograma de tu Línea de tiempo si quieres pausar la película al principio, o un this.gotoAndPlay(1) o this.gotoAndPlay(0) al final de tu Línea de tiempo si quieres que la película se reproduzca en bucle. Cuando pruebes tu película (Control > Probar), toda la funcionalidad estará en su lugar.

   Se abre el cuadro de diálogo Configuración de publicación, que muestra la configuración general en la parte superior, los formatos a la izquierda y opciones adicionales para los formatos seleccionados a la derecha.

   Los formatos Animate (.swf) y Contenedor HTML ya deberían estar seleccionados.

3. En la parte superior del cuadro de diálogo Configuración de publicación, selecciona una versión de Flash Player en el menú Destino.

   Nota: Para obtener información sobre cómo configurar tu película publicada para detectar la versión de Flash Player en la máquina del usuario final, consulta "Detectando la versión de Flash Player" en el Suplemento de esta lección.

   Algunas funciones de Animate CC no se reproducirán como se espera si no eliges la última versión de Flash Player. Elige una versión anterior de Flash Player solo si te diriges a un público específico que no tiene la última versión.

4. Ten en cuenta que la configuración de ActionScript es para la versión 3.0, que es la última y única versión compatible con esta versión de Animate.

5. Selecciona el formato Flash (.swf) en el lado izquierdo del cuadro de diálogo.

   Las opciones para el archivo SWF aparecen a la derecha. Expande la sección Avanzado para ver más opciones, si aún no está expandida.

6. Si lo deseas, puedes modificar el nombre de archivo de salida y la ubicación introduciendo un nuevo nombre de archivo. Para esta lección, deja Nombre de salida establecido en 10Start_banner.

7. Si has incluido mapas de bits en tu película, puedes establecer una configuración de calidad global para los niveles de compresión JPEG. Introduce un valor de 0 (calidad más baja) a 100 (calidad más alta). El valor de 80 es el predeterminado, que puedes dejar como está para esta lección.

Consejo: En el cuadro de diálogo Propiedades de mapa de bits para cada mapa de bits importado, puedes elegir usar la Calidad JPEG establecida en el cuadro de diálogo Configuración de publicación, o elegir una configuración única para ese mapa de bits. Esto te permite publicar imágenes de mayor calidad donde las necesites (por ejemplo, en fotos de personas) e imágenes de menor calidad donde puedas (por ejemplo, en texturas de fondo).

8. Si has incluido sonido, haz clic en el valor Transmisión de audio o Evento de audio para modificar la calidad de la compresión de audio.

   Cuanto mayor sea la velocidad de bits, mejor será la calidad del sonido. Como recordarás, en la Lección 9 no hay sonido y, por lo tanto, no hay necesidad de cambiar la configuración.

9. Asegúrate de que Comprimir película esté seleccionado para reducir el tamaño del archivo y los tiempos de descarga.

   Deflate es la opción predeterminada. Selecciona LZMA para una mejor compresión SWF. Verás las mayores mejoras en la compresión del tamaño del archivo si has creado tu proyecto con más código ActionScript y gráficos vectoriales.

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

<!-- end list -->

**Nota:** Para obtener información sobre cómo cambiar la forma en que se muestra tu película en el navegador de tu usuario, consulta "Cambiar la configuración de visualización" en el Suplemento de esta lección.

11. Asegúrate de que Solo Flash esté seleccionado en el menú Plantilla.

<!-- end list -->

**Consejo:** Para obtener información sobre otras opciones de plantilla, selecciona una y luego haz clic en Información.

Publicando para HTML5

HTML5 es la última versión de la especificación HTML para marcar páginas web para el navegador. HTML5, junto con CSS3 y JavaScript, son el estándar moderno para crear contenido para la web en el escritorio, teléfonos móviles y tabletas. Elegir el tipo de documento HTML5 Canvas en Animate se dirige a HTML5 como el tiempo de ejecución publicado y genera una colección de archivos HTML5 y JavaScript.

¿Qué es HTML5 Canvas?

Canvas se refiere al elemento canvas, una etiqueta en HTML5 que permite que JavaScript renderice y anime gráficos 2D. Animate CC se basa en las bibliotecas de JavaScript CreateJS para generar los gráficos y animaciones dentro del elemento canvas del proyecto HTML5.

¿Qué es CreateJS?

CreateJS es un conjunto de bibliotecas de JavaScript que permiten contenido rico e interactivo con HTML5. CreateJS en sí es una colección de varias bibliotecas de JavaScript separadas: EaselJS, TweenJS, SoundJS y PreloadJS.

• EaselJS es una biblioteca que proporciona una lista de visualización que te permite trabajar con objetos en el lienzo en el navegador.

• TweenJS es una biblioteca que proporciona las funciones de animación.

• SoundJS es una biblioteca que proporciona la funcionalidad para reproducir audio en el navegador.

• PreloadJS es una biblioteca que administra y coordina la carga de contenido.

Con CreateJS, Animate CC genera todo el código JavaScript necesario para representar tus imágenes, gráficos, símbolos, animaciones y sonidos en el Escenario. Animate también genera recursos dependientes, como imágenes y sonidos. Puedes configurar fácilmente cómo se organizan esos recursos de imagen y sonido en la configuración de publicación.

También puedes incluir tus propios comandos simples de JavaScript directamente en el panel Acciones para controlar tu animación. Esos comandos de JavaScript se exportan en los archivos de JavaScript.

Obtén más información sobre las bibliotecas de JavaScript CreateJS en www.createjs.com.

Usando interpolaciones clásicas

Si bien todas las técnicas de animación (interpolaciones de movimiento, interpolaciones de forma y animaciones con la herramienta Hueso) son compatibles con los documentos HTML5 Canvas, las bibliotecas CreateJS convierten esas animaciones a animaciones fotograma a fotograma, lo que aumenta el tamaño del archivo JavaScript que impulsa la animación.

Las interpolaciones clásicas, una forma más antigua de crear animaciones, se conservan como una interpolación en tiempo de ejecución, lo que ahorra tamaño de archivo y te brinda la oportunidad de controlar la animación dinámicamente a través de JavaScript. En esta sección, aprenderás a crear interpolaciones clásicas para completar una animación de pájaro de muestra que exportarás a HTML5.

La interpolación clásica es un enfoque más antiguo para la animación, pero es muy similar a la interpolación de movimiento. Al igual que las interpolaciones de movimiento, las interpolaciones clásicas utilizan instancias de símbolos. Los cambios en las instancias de símbolos entre dos fotogramas clave en la Línea de tiempo se interpolan para crear la animación. Puedes cambiar la posición, rotación, escala, transformación, efecto de color o incluso el efecto de filtro de una instancia si el símbolo es un clip de película.

Las diferencias clave entre las interpolaciones clásicas y las interpolaciones de movimiento son las siguientes:

• Las interpolaciones clásicas requieren una capa de guía de movimiento separada para animar a lo largo de una ruta.

• Las interpolaciones clásicas no son compatibles con el Editor de movimiento.

• Las interpolaciones clásicas no admiten rotaciones ni traslaciones 3D.

• Las interpolaciones clásicas no se separan en su propia capa de interpolación. Sin embargo, las interpolaciones clásicas y de movimiento comparten la misma restricción de que ningún otro objeto puede existir en la misma capa que la interpolación.

• Las interpolaciones clásicas se basan en la Línea de tiempo y no en objetos, lo que significa que agregas, eliminas o intercambias la interpolación o la instancia en la Línea de tiempo y no en el Escenario.

Aprender a crear animaciones con interpolaciones clásicas te ayudará a mantener tamaños de animación más pequeños cuando publicas en HTML5 Canvas.

Entendiendo el archivo del proyecto

Abre el archivo de Animate 10Start_build.fla, que es un documento HTML5 Canvas de una animación de pájaro. Guarda el archivo como 10_workingcopy_build.fla. El archivo ya contiene los recursos para la animación del pájaro. La animación está parcialmente completa y una instancia del clip de película de la animación del pájaro está en el Escenario. En esta sección, agregarás la animación del fondo de desplazamiento con interpolaciones clásicas, agregarás interactividad simple con JavaScript y publicarás la animación como contenido HTML.

Creando el símbolo de clip de película

Agregarás una animación de montañas desplazándose dentro de un símbolo de clip de película en la Línea de tiempo principal.

1. En la Línea de tiempo principal, inserta una nueva capa y llámala paisaje. Arrastra la nueva capa debajo de la capa de pájaro pero encima de la capa de cielo.

2. Selecciona Insertar > Nuevo símbolo (Ctrl+F8/Comando+F8).

   Aparece el cuadro de diálogo Crear nuevo símbolo.

3. Introduce paisaje desplazándose para el nombre y selecciona Clip de película en el menú Tipo.

4. Haz clic en Aceptar.

   El nuevo símbolo de clip de película llamado paisaje desplazándose se abre en modo de edición de símbolos. El Escenario está en blanco, lo que indica que el símbolo de clip de película está actualmente vacío.

5. Arrastra el símbolo gráfico llamado montañas desde el panel Biblioteca al Escenario y colócalo de modo que su esquina inferior izquierda se alinee con el punto de registro del símbolo de clip de película. En el panel Propiedades, en la sección Posición y tamaño, las coordenadas de posición deben leer X=0, Y=-155.55.

6. Agrega fotogramas (Insertar > Línea de tiempo > Fotograma o F5) hasta el fotograma 30.

Insertando un fotograma clave y cambiando la instancia

Agregarás otro fotograma clave para las montañas, por lo que tendrás un fotograma clave inicial para las montañas en su posición inicial y un fotograma clave final cuando las montañas se muevan hacia la izquierda.

1. Selecciona el fotograma 30 en la Capa 1 de tu símbolo de clip de película e inserta un nuevo fotograma clave (Insertar > Línea de tiempo > Fotograma clave o F6).

   Se inserta un nuevo fotograma clave que contiene una copia de la instancia de montañas en el fotograma 30.

2. En el fotograma 30, mueve la instancia del símbolo gráfico de la montaña hacia la izquierda para que el punto medio de la imagen de las montañas esté centrado sobre el punto de registro. El panel Propiedades debe mostrar X=-800.

   Los bordes izquierdo y derecho del gráfico coinciden, por lo que cuando la animación se reproduce como un bucle, el efecto es una cadena montañosa que se desplaza sin problemas.

Aplicando una interpolación clásica

Aplica una interpolación clásica a la Línea de tiempo entre dos fotogramas clave.

1. Haz clic con el botón derecho en cualquier fotograma entre el primer y segundo fotograma clave y selecciona Crear interpolación clásica.

   Animate crea una interpolación entre el primer y segundo fotograma clave, indicada por una flecha que se extiende a lo largo de un fondo azul.

2. Presiona Intro/Retorno en tu teclado, o presiona el botón Reproducir debajo de la Línea de tiempo para obtener una vista previa de la animación.

   Se reproduce una animación suave que muestra las montañas moviéndose de derecha a izquierda.

3. Selecciona Bucle en la parte inferior de la Línea de tiempo y elige Rango de marcadores Todos en el menú Modificar marcadores para reproducir la interpolación de la Línea de tiempo en un bucle.

4. Para agregar un poco más de complejidad a la animación, agregarás una segunda capa de montañas. Inserta una nueva capa y arrástrala debajo de la capa existente.

5. Arrastra otra instancia del símbolo de montañas al Escenario y, en el panel Propiedades, en la sección Posición y tamaño, asegúrate de que el icono Bloquear ancho y alto esté roto y cambia el ancho (W) a 2000 píxeles y la altura (H) a 200 píxeles.

   Coloca la esquina inferior izquierda de la instancia en el punto de registro del símbolo para que el panel Propiedades muestre X=0, Y=-200. Tendrás dos cadenas montañosas, con la más alta y ancha detrás de la primera.

6. Inserta un nuevo fotograma clave (Insertar > Línea de tiempo > Fotograma clave o F6) en el fotograma 30 de la capa inferior.

7. En el fotograma clave final en el fotograma 30, mueve la instancia de montañas a x=-1000.

8. Haz clic con el botón derecho en cualquier fotograma entre el primer y segundo fotograma clave y selecciona Crear interpolación clásica.

9. Presiona Retorno/Intro en tu teclado, o presiona el botón Reproducir debajo de la Línea de tiempo para obtener una vista previa de la animación. Selecciona la opción Bucle para reproducir la interpolación como un bucle.

   La segunda instancia de montaña se mueve de derecha a izquierda, pero está ligeramente desplazada de la que está en primer plano, creando un rico efecto de capas. Acerca el Escenario para que los bordes de los gráficos no sean visibles; esto te dará una mejor idea del efecto de desplazamiento sin problemas.

10. Sal del modo de edición de símbolos para volver a la Línea de tiempo principal.

Añadiendo la instancia de clip de película

Ahora que has completado las interpolaciones clásicas de las montañas desplazándose, agregarás el símbolo de clip de película al Escenario principal.

1. Arrastra el símbolo de clip de película llamado paisaje desplazándose desde el panel Biblioteca al Escenario y coloca la instancia de modo que sus bordes izquierdo e inferior se alineen con los bordes izquierdo e inferior del Escenario. En el panel Propiedades, en la sección Posición y tamaño, los valores deben leer X=0, Y=400.

Nota: Animación de Chris Georgenes (keyframer.com]([invalid URL removed])). Usado con permiso.

2. Guarda tu trabajo terminado.

   Tu proyecto final contiene dos instancias de clips de película, cada una con varias interpolaciones clásicas.

Exportando a HTML5

El proceso para exportar tu animación a HTML5 y JavaScript es sencillo.

1. Selecciona Archivo > Publicar.

   Animate exporta la animación como archivos HTML y JavaScript y los guarda en la misma carpeta que tu archivo FLA (de acuerdo con las opciones predeterminadas de Configuración de publicación).

   Nota: Para obtener más información sobre los archivos producidos cuando exportas un movimiento a HTML5, consulta "Comprender los archivos de salida HTML5" en el Suplemento de esta lección.

2. Haz doble clic en el archivo HTML, llamado 10_workingcopy_build.html. Tu navegador predeterminado se abre y reproduce la animación.

Funciones compatibles

El documento HTML5 Canvas no admite todas las funciones de Animate CC. Afortunadamente, el panel Salida muestra advertencias sobre cualquier función en tu archivo de Animate que no se pueda exportar correctamente.

Animate también deshabilita cualquier función que no se exporte correctamente a HTML5 y JavaScript. Por ejemplo, las herramientas Rotación 3D y Traslación 3D en el panel Herramientas aparecen atenuadas para indicar que las rotaciones y traslaciones 3D no son compatibles con un documento HTML5 Canvas. Muchos de los modos de fusión y algunos efectos de filtro tampoco son compatibles.

Configuración de publicación

El cuadro de diálogo Configuración de publicación te permite cambiar dónde se guardan tus archivos y cómo se guardan.

1. Haz clic en Configuración de publicación en el panel Propiedades o selecciona Archivo > Configuración de publicación para abrir el cuadro de diálogo Configuración de publicación.

2. En la pestaña Básico, realiza una o más de las siguientes acciones:

   • Anula la selección de Bucle de línea de tiempo si quieres que la Línea de tiempo se reproduzca solo una vez.

   • Haz clic en el icono de carpeta junto al campo Nombre de salida para guardar tus archivos publicados en una carpeta diferente o con un nombre de archivo diferente.

   • Cambia las rutas junto a las Opciones de exportación de recursos si quieres guardar tus recursos en una carpeta diferente. La casilla de verificación Imágenes debe estar seleccionada si tu archivo contiene imágenes, y Sonidos debe estar seleccionado si tu archivo contiene sonidos. Por ejemplo, si reemplazaste el relleno de degradado por una imagen de mapa de bits en la capa de cielo de tu archivo 10_workingcopy_build.fla, al exportar, Animate crea una carpeta llamada imágenes que contiene la imagen de mapa de bits.

   • Selecciona Centrar escenario para centrar tu proyecto de Animate en la ventana del navegador. Puedes usar el menú junto a la opción para elegir centrar tu película Horizontalmente, Verticalmente o Ambas.

   • Selecciona Hacer receptivo para que tu proyecto de Animate responda a los cambios en las dimensiones de la ventana del navegador y usa el menú junto a la opción para elegir si el proyecto responde a los cambios en la altura, el ancho o ambos de la ventana. La opción Escalar para rellenar el área visible determina cómo tu proyecto llena el espacio disponible en la ventana del navegador.

   • Selecciona Incluir precargador.

3. Selecciona la pestaña Avanzado:

   • Selecciona Incluir JavaScript en HTML si quieres publicar un solo archivo que incluya todo el código JavaScript y HTML necesario para tu archivo. Si eliges esta opción, Animate sobrescribirá el archivo exportado cada vez que publiques.

   • Anula la selección de Sobrescribir archivo HTML al publicar si quieres conservar el archivo HTML y simplemente cambiar el código JavaScript que se genera que impulsa tus animaciones.

   • La opción Bibliotecas alojadas le dice a tu archivo publicado dónde encontrar las bibliotecas de JavaScript CreateJS. Cuando la opción está seleccionada, tu archivo publicado apunta a una CDN (Content Distribution Network) en [http://code.createjs.com [invalid URL removed] para descargar las bibliotecas. Cuando la opción Bibliotecas alojadas está deseleccionada, Animate incluye las bibliotecas de JavaScript CreateJS como documentos separados que deben acompañar a los archivos de tu proyecto.

   • Deja todas las demás Opciones avanzadas de JavaScript en su configuración predeterminada.

4. Selecciona la pestaña Hoja de Sprite:

   • Selecciona Combinar recursos de imagen en hojas de Sprite si quieres crear un solo archivo de imagen para todos los mapas de bits que has importado a tu biblioteca. Una página web HTML5 puede cargar un solo archivo de imagen y recuperar partes específicas de la imagen más rápido que varias imágenes más pequeñas.

   • Selecciona una opción de Formato para la imagen exportada y establece la calidad, el tamaño y el color de fondo de la imagen. Si eliges un tamaño demasiado pequeño para que quepan las imágenes en tu biblioteca, Animate publicará varias hojas de Sprite según sea necesario.

5. Haz clic en Aceptar para guardar toda tu configuración.

   Nota: Si seleccionas la opción Combinar en hojas de Sprite en la pestaña Básico, en la sección Exportar recursos de imagen, la opción Combinar recursos de imagen en hojas de Sprite también se marcará en la pestaña Avanzado y viceversa.

   Nota: Puedes publicar un Escenario transparente desde un documento HTML5 Canvas. En el panel Propiedades, en el área Propiedades, elige la selección con una línea roja diagonal que indica "sin color" para el Escenario.

Insertando JavaScript

Si quieres agregar interactividad a tu proyecto, puedes agregar JavaScript directamente en el panel Acciones. Ese JavaScript se exportará a los archivos JavaScript publicados.

Usando fragmentos de código HTML5 Canvas

No te preocupes si no eres un programador de JavaScript. Animate CC facilita la adición de interactividad al proporcionar código JavaScript común y fácilmente modificable en el panel Fragmentos de código.

Añadiendo una respuesta a un clic

Usa los fragmentos de código HTML5 Canvas del panel Fragmentos de código como lo harías con los fragmentos de código AS3. En esta sección, agregarás interactividad simple y harás que el pájaro volador responda a un clic del ratón.

1. Selecciona Ventana > Fragmentos de código.

   Se abre el panel Fragmentos de código.

2. Haz clic en la flecha delante de la carpeta HTML5 Canvas.

   La carpeta se expande para mostrar los fragmentos de código organizados en carpetas según su función.

3. Abre la carpeta Controladores de eventos.

4. Selecciona la instancia del clip de película del pájaro en el Escenario; luego haz doble clic en Evento de clic del ratón en la carpeta Controladores de eventos.

   Animate te advierte que tu instancia de clip de película requiere un nombre y se ofrece a proporcionarte un nombre.

5. Haz clic en Aceptar.

   Animate nombra automáticamente tu instancia de clip de película y agrega código JavaScript en el panel Acciones. El código está ampliamente comentado para explicar cómo funciona el código. Se agrega una nueva capa, llamada Acciones, a la Línea de tiempo con una pequeña letra "a" en el primer fotograma clave, que indica la ubicación del nuevo código en la Línea de tiempo.

   El código JavaScript se parece mucho al siguiente:

   [Click here to view code image]

   this.movieClip_2.addEventListener("click", fl_MouseClickHandler.bind(this)); function fl_MouseClickHandler () { // Comienza tu código personalizado // Este código de ejemplo muestra las palabras "Clic del ratón" en el panel Salida. alert("Clic del ratón"); // Finaliza tu código personalizado }

6. El código JavaScript agrega un detector de eventos para un clic del ratón en la instancia del pájaro. Cuando se produce un clic, se activa el comando JavaScript alert(), que muestra un mensaje simple en un cuadro de diálogo de alerta nativo en el navegador.

7. Selecciona Control > Probar para probar tu interactividad recién insertada.

   Animate exporta HTML5 y JavaScript y muestra la animación en un navegador.

8. Haz clic en el pájaro volador en el navegador.

   Aparece un cuadro de diálogo del navegador con las palabras "Clic del ratón".

9. Haz clic en Aceptar para cerrar el cuadro de diálogo y cierra la ventana del navegador.

Controlando la línea de tiempo

Ahora agregarás un poco más de complejidad a tu proyecto. Agregarás más JavaScript que controla la Línea de tiempo del pájaro volador.

1. Selecciona el clip de película del pájaro en el Escenario.

2. En la carpeta HTML5 Canvas > Acciones del panel Fragmentos de código, haz doble clic en el fragmento Detener un clip de película.

   El panel Acciones muestra que se ha agregado código JavaScript a la película. El nuevo código detiene la Línea de tiempo de la instancia del clip de película del pájaro. Sin embargo, el código se activa inmediatamente. Quieres que la animación del pájaro se detenga solo cuando el usuario haga clic en el pájaro.

3. Selecciona el código recién insertado y elige Editar > Cortar (Ctrl+X/Comando+X).

4. Coloca el cursor dentro de las llaves de tu función y elige Editar > Pegar (Ctrl+V/Comando+V).

   Con el código pegado, el comando para detener la Línea de tiempo de la animación del pájaro ocurre solo después de que se detecta un clic del ratón.

5. Selecciona Control > Probar para probar la interactividad.

   Animate exporta HTML5 y JavaScript y muestra la animación en un navegador.

6. Haz clic en el pájaro volador en el navegador.

   El pájaro deja de batir sus alas y aparece un cuadro de diálogo del navegador con las palabras "Clic del ratón". Sin embargo, las montañas desplazándose en el fondo continúan moviéndose.

   Nota: Las bibliotecas de JavaScript CreateJS que impulsan el proceso de publicación hacen referencia a las líneas de tiempo comenzando con números de fotograma en 0, mientras que Animate y ActionScript comienzan con números de fotograma en 1. Por lo tanto, los números de fotograma en tu código JavaScript exportado son uno menos de lo que esperarías ver en Animate. Debido a esta diferencia, Adobe recomienda que siempre uses etiquetas de fotograma en lugar de números de fotograma para la navegación de la Línea de tiempo. Ten esto en cuenta cuando uses el comando gotoAndStop() o gotoAndPlay() para controlar el cabezal de reproducción de la Línea de tiempo.

   Nota: El panel Acciones codifica con colores tu JavaScript tal como lo haría con tu código ActionScript en un documento ActionScript 3.0. Usa la codificación de colores para ayudar a asegurarte de que tu código esté limpio y libre de errores.

   Consejo: Usa el comando Formatear código para limpiar la apariencia de tu código para un estilo consistente y fácil de leer. Cambia las preferencias de formato seleccionando Editar > Preferencias (Windows) o Animate CC > Preferencias (Mac) y luego seleccionando Editor de código.

   Nota: Recuerda que un documento ActionScript 3.0 no contiene necesariamente ActionScript 3.0. Un documento ActionScript 3.0 es simplemente un documento de Animate que se publica para Flash Player en un navegador. Un documento ActionScript 3.0 puede constar solo de animación.

Convirtiendo a HTML5 Canvas

Es posible que tengas muchas animaciones antiguas que creaste en Flash Professional que un cliente quiere usar como animaciones HTML5. No te preocupes; no tienes que rehacer todo tu trabajo. Afortunadamente, Animate CC incluye opciones para convertir documentos Flash ActionScript 3.0 existentes en documentos HTML5 Canvas para que tus animaciones puedan llegar al público más amplio.

Hay dos enfoques para crear un documento HTML5 Canvas con recursos de Animate. Primero, puedes simplemente crear un nuevo documento HTML5 Canvas y copiar y pegar las capas de un archivo a tu nuevo archivo. En segundo lugar, puedes abrir tu antiguo archivo Flash (un documento ActionScript 3.0) y seleccionar Comandos > Convertir a otros formatos de documento. Animate realiza la conversión y puedes guardar tu nuevo archivo como un documento HTML5 Canvas.

Convirtiendo un documento AS3 a un documento HTML5 Canvas

Convertirás una animación que creaste como un documento ActionScript 3.0 en una lección anterior a un documento HTML5 Canvas.

1. Abre el archivo 10Start_convert.fla en la carpeta 10Start.

   El proyecto es la promoción animada de la película ficticia Doble identidad de una lección anterior. El documento ActionScript 3.0 contiene mapas de bits e interpolaciones de movimiento con cambios en la posición, escala, efectos de color, efectos 3D y filtros. El archivo se dirige a Flash Player. La velocidad de fotogramas se establece en 30 fotogramas por segundo, con un Escenario negro fijo en un generoso ancho de 1280 píxeles y una altura de 787 píxeles.

2. Selecciona Comandos > Convertir a otros formatos de documento.

   En el cuadro de diálogo que aparece, selecciona HTML5 Canvas en el menú Convertir tu documento a e introduce el nuevo nombre de archivo como 10_workingcopy_convert.fla.

3. Haz clic en Aceptar.

   Animate duplica tu contenido en un nuevo documento HTML5 Canvas. El nuevo documento HTML5 Canvas contiene tu contenido convertido.

4. Visualiza las advertencias en el panel Salida.

   El panel Salida muestra la siguiente advertencia:

   • 3D no se puede importar en un documento HTML5 Canvas.

   El documento HTML5 Canvas no admite la herramienta Rotación 3D ni la herramienta Traslación 3D, por lo que la interpolación no se muestra. Estate atento a los mensajes en el panel Salida para asegurarte de que comprendes cómo Animate maneja la transición de tu contenido de Flash Player a HTML5 y qué funciones no se transfieren correctamente. A menudo, tendrás que realizar ediciones adicionales a tu animación después de cada conversión.

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

   Animate exporta HTML5 y JavaScript y muestra la animación en un navegador. La animación convertida se reproduce, mostrando todas las interpolaciones de movimiento, incluidas las animaciones anidadas de los coches inactivos. La animación 3D del título, que no es compatible, aparece al final sin ningún efecto animado.

   Nota: Para obtener información sobre cómo reemplazar la rotación 3D del título (que no es compatible con HTML5) con una animación de escala, consulta "Editar el HTML5 Canvas convertido" en el Suplemento de esta lección. El panel Salida muestra advertencias adicionales con respecto a las funciones incluidas en la animación.

Entendiendo los recursos de imagen

A diferencia del proyecto anterior en esta lección del pájaro volador que usa gráficos vectoriales, esta secuencia animada usa imágenes de mapa de bits. Las imágenes importadas a la biblioteca de Animate deben exportarse para que sean accesibles a los documentos HTML y JavaScript.

1. Examina la carpeta en tu escritorio donde guardaste tu archivo de Animate, 10_workingcopy_convert.fla.

   Animate ha creado una carpeta adicional llamada imágenes. Dentro de la carpeta de imágenes están todos los recursos de mapa de bits para la animación guardados como una sola imagen PNG. El código JavaScript en tus documentos exportados carga dinámicamente solo las imágenes que necesita mostrar desde la única imagen PNG, llamada hoja de Sprite.

   Nota: Te presentaron las hojas de Sprite en la Lección 4.

2. Regresa a la aplicación Animate CC.

3. Selecciona Archivo > Configuración de publicación.

   Aparece el cuadro de diálogo Configuración de publicación. En la pestaña Básico, la opción Exportar recursos de imagen te permite establecer la ruta y el nombre de la carpeta que contiene todas tus imágenes de mapa de bits. Si Exportar recursos de imagen está deseleccionado, Animate seguirá exportando y reproduciendo una animación, pero sin ninguna imagen.

Cierra el archivo de Animate. A continuación, aprenderás a publicar una aplicación para reproducir en el escritorio de un ordenador.

Publicando una aplicación de escritorio

La mayoría de los ordenadores de escritorio tienen Flash Player instalado con sus navegadores, pero es posible que desees distribuir tu película a alguien que no tiene Flash Player o que tiene una versión anterior. Quizás solo quieres que tu película se ejecute sin un navegador.

Puedes generar tu película como un archivo AIR, que instala una aplicación en el escritorio del usuario. Adobe AIR es un entorno de tiempo de ejecución más robusto que admite una gama más amplia de tecnologías.

Los espectadores deben descargar el tiempo de ejecución de Adobe AIR gratuito del sitio web de Adobe en http://get.adobe.com/air/ [invalid URL removed]. Alternativamente, puedes generar un proyecto AIR con la opción Tiempo de ejecución cautivo, que incluye el tiempo de ejecución de AIR para que tu audiencia no necesite descargar nada adicional.

Creando una aplicación AIR

Adobe AIR permite que tus espectadores vean tu contenido de Animate en su escritorio como una aplicación. Recordarás que en la Lección 9, el proyecto final fue una aplicación de escritorio de un quiosco interactivo de zoológico. En esta sección, especificarás la configuración de publicación necesaria para crear una aplicación de escritorio de una guía de restaurantes.

1. Abre 10Start_restaurantguide.fla.

   Nota: Si abres un archivo FLA que se creó en otro ordenador, Animate puede advertirte que tu ordenador no tiene las mismas fuentes que se utilizaron para crear el archivo. Haz clic en Aceptar en el cuadro de diálogo de alerta para aceptar las fuentes sustitutas sugeridas por Animate.

   Esta es la misma guía de restaurantes interactiva que creaste en una lección anterior, con algunas modificaciones en la imagen de fondo.

2. En el panel Propiedades, en la sección Publicar, ten en cuenta que AIR 23.0 para escritorio está seleccionado en el menú Destino.

3. Haz clic en el botón Editar configuración de la aplicación (icono de llave inglesa) junto al menú Destino.

   Aparece el cuadro de diálogo Configuración de AIR.

   Consejo: También puedes abrir el cuadro de diálogo Configuración de AIR desde el cuadro de diálogo Configuración de publicación. Haz clic en el botón Configuración del reproductor (icono de llave inglesa) junto al menú Destino.

4. Examina la configuración en la pestaña General.

   El campo Archivo de salida muestra el nombre de archivo del instalador AIR publicado como 10Start_restaurantguide.air. Las opciones de Salida como proporcionan tres formas de crear una aplicación AIR. La primera opción, Paquete AIR, debe estar seleccionada; aquí hay una descripción de lo que hace cada opción:

   • Paquete AIR crea un instalador AIR independiente de la plataforma.

   • Instalador de Windows (Windows)/Instalador de Mac (Mac) crea un instalador AIR específico de la plataforma.

   • Aplicación con tiempo de ejecución incrustado crea una aplicación sin un instalador o la necesidad de que el tiempo de ejecución de AIR esté instalado en el escritorio del usuario final.

5. En el campo Nombre de la aplicación/Nombre, introduce Guía de restaurantes de Meridien. Este será el nombre de tu aplicación publicada.

6. En el menú Estilo de ventana, selecciona Chrome personalizado (transparente).

   Chrome personalizado (transparente) crea una aplicación sin ningún elemento de interfaz o marco (conocido como chrome) y con un fondo transparente.

7. Haz clic en la pestaña Firma en la parte superior del cuadro de diálogo Configuración de AIR.

   Crear una aplicación AIR requiere un certificado para que los usuarios puedan identificar y confiar en el desarrollador del contenido de Animate. Para esta lección, no necesitarás un certificado oficial, por lo que puedes crear tu propio certificado autofirmado.

8. Haz clic en el botón Crear/Nuevo junto a Certificado.

9. Introduce tu información en los campos vacíos. Puedes usar Meridien Press para Nombre del editor, Digital para Unidad de organización e Interactivo para Nombre de la organización. Introduce tu propia contraseña en ambos campos de contraseña y luego introduce meridienpress.p12 en el campo Guardar como. Haz clic en el botón Carpeta/Examinar para guardarlo en una carpeta de tu elección. Haz clic en Aceptar.

   Animate crea un archivo de certificado autofirmado (.p12) en tu ordenador.

   Animate completa automáticamente la ruta a tu archivo .p12 en el campo Certificado. Asegúrate de que el campo Contraseña esté lleno (la contraseña debe coincidir con la que usaste para crear el certificado) y de que Recordar contraseña para esta sesión y Marca de tiempo estén seleccionados.

10. Ahora haz clic en la pestaña Iconos en la parte superior del cuadro de diálogo Configuración de AIR.

11. Selecciona el icono 128x128 y haz clic en el icono de carpeta.

12. Navega a la carpeta AppIconsForPublish dentro de la carpeta 10Start, selecciona el archivo restaurantguide.png proporcionado para ti y haz clic en Abrir.

La imagen en el archivo restaurantguide.png será el icono de la aplicación en el escritorio.

13. Haz clic en la pestaña Avanzado en la parte superior del cuadro de diálogo Configuración de AIR.

14. En Configuración de ventana inicial, introduce 0 para el campo X y 50 para el campo Y.

    Cuando se inicie la aplicación, aparecerá al ras del lado izquierdo de la pantalla y a 50 píxeles de la parte superior.

15. Haz clic en Publicar y luego en Aceptar.

    Animate crea un instalador AIR (.air).

Instalando una aplicación AIR

El instalador AIR es independiente de la plataforma, pero requiere que el tiempo de ejecución de AIR esté instalado en el sistema del usuario.

1. Haz doble clic en el instalador AIR que acabas de crear, 10Start_restaurantguide.air.

   Se abre el instalador de aplicaciones de Adobe AIR y solicita instalar la aplicación. Dado que utilizaste un certificado autofirmado para crear el instalador AIR, Adobe advierte de un posible riesgo de seguridad debido a un desarrollador desconocido y que no es de confianza. (Dado que puedes confiar en ti mismo, puedes continuar).

2. Haz clic en Instalar y luego en Continuar para continuar con la instalación en la configuración predeterminada.

   La aplicación llamada Guía de restaurantes de Meridien está instalada en tu ordenador y se abre automáticamente.

   Observa que la aplicación está ubicada en el extremo izquierdo de tu escritorio, 50 píxeles (entre un cuarto y media pulgada, dependiendo de la resolución de tu pantalla) hacia abajo desde el borde superior, como especificaste en el cuadro de diálogo Configuración de AIR. Ten en cuenta también que el Escenario es transparente, por lo que tus elementos gráficos flotan sobre el escritorio, de forma muy similar a la apariencia de otras aplicaciones.

3. Sal/Cierra la aplicación presionando Alt+F4/Comando+Q.

Creando un proyector

En algunos casos, por ejemplo, si no quieres lidiar con una aplicación que requiere instalación y todos los problemas de seguridad que la acompañan, es posible que desees utilizar un método de distribución simple y de baja tecnología. Un proyector es un archivo independiente que incluye el tiempo de ejecución de Flash Player para que tu audiencia pueda simplemente hacer doble clic en el icono del proyector para reproducir y ver tu contenido multimedia.

Puedes publicar un proyector de Macintosh o Windows desde un documento ActionScript 3.0 o AIR. Sin embargo, a diferencia de cuando estás creando una aplicación AIR, con un proyector no tienes opciones de publicación como elegir miniaturas para el icono de la aplicación o especificar un fondo transparente o una posición inicial cuando se inicia la aplicación.

1. Abre 10Start_restaurantguide.fla.

2. Selecciona Comandos > Exportar como proyector.

   Se abre el cuadro de diálogo Configuración de publicación.

3. En Otros formatos en la columna izquierda, selecciona Proyector de Mac y/o Proyector de Win.

   Los proyectores de Windows tienen la extensión de archivo .exe y los proyectores de Mac tienen la extensión de archivo .app.

4. Especifica el nombre de archivo y la ubicación donde quieres que Animate guarde el proyector. Cada proyector (Mac y Windows) necesita un nombre de archivo único, así que resalta cada opción para introducirlo.

5. Haz clic en Publicar.

   Animate crea el proyector o proyectores seleccionados en la ubicación de salida, con un nombre de archivo que coincide con el nombre de archivo de Animate. Haz clic en Aceptar.

6. Haz doble clic en el archivo del proyector.

   La guía de restaurantes se abre como una aplicación separada en tu escritorio. Compara tu aplicación de proyector con tu aplicación AIR.

   Nota: Cualquier recurso dependiente, como archivos de video, también debe incluirse con tu proyector para que se reproduzca correctamente. Animate no incrusta esos archivos dependientes en el proyector.

Publicando animaciones WebGL

WebGL es una tecnología que utiliza JavaScript para renderizar gráficos, especialmente gráficos 3D, en un navegador web. WebGL utiliza la aceleración de hardware para renderizar gráficos, lo que puede agilizar la visualización de gráficos complejos. Usa el tipo de documento Animate WebGL para crear gráficos planos y animación para exportar como recursos WebGL. Tus archivos de salida constan de varios archivos JavaScript (incluidos archivos JSON, que son un tipo específico de archivo JavaScript para almacenar datos; JSON significa Notación de objetos JavaScript) y recursos de imagen.

El tipo de documento Animate WebGL es limitado (no admite transformaciones 3D, texto ni máscaras), pero estate atento a WebGL a medida que se desarrollan la tecnología y el tipo de documento Animate.

Publicando en dispositivos móviles

También puedes publicar contenido de Animate en dispositivos móviles que ejecutan Google Android o iOS de Apple, como iPhone o iPad. Para publicar contenido de Animate en un dispositivo móvil, te diriges a AIR for Android o AIR for iOS para crear una aplicación que los espectadores descargan e instalan en sus dispositivos.

Probando una aplicación móvil

Crear una aplicación para dispositivos móviles es más complicado que crear una aplicación para el escritorio, porque tienes que obtener certificados específicos para el desarrollo y la distribución. Por ejemplo, Apple requiere que pagues una suscripción anual para ser un desarrollador certificado para cargar aplicaciones en iTunes Store. Desarrollar para un dispositivo Android requiere una tarifa única. Además, debes tener en cuenta el tiempo y el esfuerzo adicionales necesarios para probar y depurar en un dispositivo separado. Sin embargo, Animate CC proporciona varias formas de facilitar la prueba de contenido para dispositivos móviles:

Nota: El simulador de iOS es parte del conjunto de herramientas de desarrollo Xcode de Apple disponible como descarga gratuita de Apple.

Nota: Probar una aplicación en un dispositivo iOS requiere que formes parte del programa de desarrolladores de iOS de Apple, donde creas certificados de desarrollo, distribución y aprovisionamiento. Los certificados te permiten instalar aplicaciones en dispositivos iOS para probar y cargar aplicaciones en la tienda iTunes.

• Puedes usar el simulador de dispositivo móvil proporcionado con Animate, AIR Debug Launcher, para probar las interacciones móviles. SimController que acompaña a AIR Debug Launcher emula interacciones específicas como inclinar el dispositivo (usando el acelerómetro), gestos táctiles como deslizar y pellizcar, o incluso usar las funciones de geolocalización.

• Para dispositivos iOS, Animate puede publicar una aplicación AIR para probar en el simulador de iOS nativo, que emula la experiencia de la aplicación móvil en tu escritorio Mac OS.

• Conecta un dispositivo móvil a tu ordenador con un cable USB y Animate puede publicar una aplicación AIR directamente en tu dispositivo móvil.

Simulando una aplicación móvil

Usarás Adobe SimController y AIR Debug Launcher para simular interacciones de dispositivos móviles dentro de Animate Professional CC.

Nota: En Windows, puede aparecer una advertencia de seguridad cuando uses AIR Debug Launcher. Haz clic en Permitir acceso para continuar.

1. Abre 10Start_mobileapp.fla.

   El proyecto es una aplicación simple con cuatro fotogramas clave que anuncia un desafío deportivo imaginario ambientado en nuestra familiar ciudad de Meridien. El proyecto ya contiene ActionScript que permite al espectador deslizar el Escenario hacia la izquierda o hacia la derecha para ir al siguiente fotograma o al anterior. Examina el código en el panel Acciones. El código se agregó desde el panel Fragmentos de código, que incluye docenas de fragmentos de código para interactividad en dispositivos móviles.

2. En el panel Propiedades, observa que el destino está configurado para AIR 23.0 para Android.

3. Selecciona Control > Probar película > En AIR Debug Launcher (móvil), que ya debería estar marcado.

   El proyecto se publica en una nueva ventana. Además, se inicia la aplicación SimController, que proporciona opciones para interactuar con el contenido de Animate.

4. En el panel Simulador, haz clic en Tocar y gesto para expandir esa sección.

5. Selecciona Capa táctil.

   El simulador superpone un cuadro gris transparente sobre el contenido de Animate para simular la superficie táctil del dispositivo móvil.

6. Selecciona Gesto > Deslizar.

   El simulador ahora está habilitado para emular una interacción de deslizamiento. Las instrucciones en la parte inferior del panel detallan cómo puedes crear la interacción con solo el cursor del ratón.

7. Presiona la capa táctil sobre tu contenido de Animate, arrastra hacia la izquierda y luego suelta el botón del ratón.

   Consejo: Puedes cambiar la opacidad de la capa táctil cambiando el valor Alfa.

   Nota: No muevas la ventana que contiene tu contenido de Animate (AIR Debug Launcher o ADL) cuando hayas habilitado la capa táctil. Si lo haces, la capa táctil no se alineará con la ventana ADL y no podrás probar con precisión tus interacciones móviles.

   El punto amarillo representa el punto de contacto en la capa táctil del dispositivo móvil. El proyecto reconoce la interacción de deslizamiento y aparece el segundo fotograma clave.

8. Desliza el dedo hacia la izquierda y hacia la derecha.

   Animate avanza un fotograma o retrocede un fotograma.

9. Cierra la ventana.

Publicando una aplicación móvil

Por último, examinarás la configuración en Animate para publicar una aplicación móvil para iOS. Publicar una aplicación para Android tiene una configuración similar.

Aunque está más allá del alcance de esta lección presentar los pasos en detalle, verás los certificados, recursos y configuraciones necesarios para publicar y distribuir correctamente una aplicación a través de la tienda iTunes.

1. En Animate, selecciona Archivo > Nuevo, selecciona AIR for iOS para Tipo y haz clic en Aceptar.

Animate crea un nuevo archivo de Animate, configurado para iOS. El tamaño del escenario se establece en 640 × 960 y el destino se establece en AIR 23.0 para iOS.

2. Haz clic en el icono de llave inglesa junto al menú Destino.

   Aparece el cuadro de diálogo Configuración de AIR para iOS.

3. Haz clic en la pestaña General.

   La pestaña General contiene información sobre los archivos de salida y la configuración general. El archivo publicado real tiene la extensión .ipa. Puedes elegir diferentes relaciones de aspecto (horizontal o vertical) y dirigirte a dispositivos específicos (iPhone y/o iPad) y resoluciones. El campo SDK del simulador de iOS es la ruta al archivo del simulador de iOS que se utiliza para las pruebas (Control > Probar película > En el simulador de iOS). La lista Archivos incluidos contiene los dos archivos necesarios (un SWF y un archivo XML), pero puedes agregar archivos multimedia dependientes adicionales si es necesario para tu proyecto. Para las aplicaciones de iOS, también puedes incluir un archivo PNG con un nombre de archivo específico como la imagen de inicio predeterminada, por ejemplo, Default@2x.png, que aparece tan pronto como se carga una aplicación.

4. Haz clic en la pestaña Implementación.

   La pestaña Implementación contiene información para pruebas y distribución. Los campos Certificado y Perfil de aprovisionamiento especifican los nombres de los documentos necesarios que creas como desarrollador certificado de Apple. Te certifican como un desarrollador conocido y de confianza para que Apple y tus clientes potenciales puedan comprar y descargar tu aplicación con confianza. El menú Tipo de implementación de iOS enumera las diversas formas en que puedes publicar tu aplicación, como probar en un dispositivo USB conectado, probar en una variedad de dispositivos (ad hoc) o para la distribución final en la tienda iTunes. Cada fase de desarrollo requiere diferentes certificados y una nueva ronda de publicación.

5. Haz clic en la pestaña Iconos.

   La pestaña Iconos enumera las dimensiones disponibles para los iconos que identificarán tu aplicación en cada dispositivo móvil. Debes proporcionar iconos en una variedad de resoluciones según el dispositivo al que te dirijas. Selecciona una dimensión y haz clic en el icono de carpeta para navegar hasta el archivo gráfico que se utilizará para cada icono.

6. Haz clic en la pestaña Idiomas.

   La pestaña Idiomas enumera los diferentes idiomas disponibles para que tu aplicación los admita. Selecciona la casilla de verificación en la columna Habilitar junto a un idioma para admitirlo en tu aplicación.

   Nota: Para obtener más información sobre la publicación de contenido de Animate en AIR para iOS o Android, visita el Centro de desarrolladores de Adobe AIR en www.adobe.com/devnet/air.html [invalid URL removed]. Hay tutoriales, trucos y consejos, y archivos de muestra disponibles para descargar.

Próximos pasos

¡Felicidades! Has llegado a la última lección. A estas alturas, ya has visto cómo Adobe Animate CC, en las manos creativas adecuadas (¡las tuyas!), tiene todas las funciones que necesitas para producir proyectos interactivos ricos en contenido multimedia y animaciones que se publican en múltiples plataformas. Has completado estas lecciones, muchas de ellas desde cero, por lo que comprendes cómo las distintas herramientas, paneles y código funcionan juntos para aplicaciones del mundo real.

Pero siempre hay más que aprender. Continúa practicando tus habilidades de Animate creando tu propia animación o sitio interactivo. Inspírate buscando proyectos de animación y multimedia en la web y explorando aplicaciones en dispositivos móviles. Amplía tus conocimientos de Animate explorando los recursos de ayuda de Adobe Animate y otras publicaciones excelentes de Adobe Press.

Preguntas de repaso

1. ¿Cuál es la diferencia entre tiempo de creación y tiempo de ejecución?

2. ¿Qué archivos necesitas cargar en un servidor para asegurarte de que tu película final de Animate se reproduzca en Flash Player en los navegadores web?

3. ¿Cómo puedes saber qué versión de Flash Player tiene instalada un espectador?

4. ¿Qué es CreateJS?

5. ¿Por qué se recomienda que las animaciones creadas en HTML5 Canvas utilicen interpolaciones clásicas?

6. ¿Cómo incorporas interactividad en un documento HTML5 Canvas?

7. ¿Cuál es la diferencia entre la forma en que ActionScript y CreateJS JavaScript manejan los números de fotograma en la línea de tiempo de Animate?

8. ¿Cuáles son las distintas formas en que puedes probar un archivo de Animate para un dispositivo móvil?

9. ¿Qué es un certificado de firma de código y por qué necesitas uno para una aplicación AIR?

Respuestas de repaso

1. El tiempo de creación se refiere al entorno en el que creas tu contenido de Animate, como Animate Professional CC. El tiempo de ejecución se refiere al entorno en el que tu contenido de Animate se reproduce para tu audiencia. El tiempo de ejecución de tu contenido puede ser Flash Player en un navegador de escritorio o una aplicación AIR en el escritorio o en un dispositivo móvil.

2. Para asegurarte de que tu película se reproduzca como se espera en los navegadores web, carga el archivo SWF de Animate y el documento HTML que le dice al navegador cómo mostrar el archivo SWF. También necesitas cargar el archivo swfobject.js, si se publicó uno, y cualquier archivo al que haga referencia tu archivo SWF, como video u otros archivos SWF; asegúrate de que estén en la misma ubicación relativa (generalmente la misma carpeta que el archivo SWF final) que estaban en tu disco duro.

3. Selecciona Detectar versión de Animate en la pestaña HTML en el cuadro de diálogo Configuración de publicación para detectar automáticamente la versión de Flash Player en el ordenador de un espectador.

4. CreateJS es un conjunto de bibliotecas de JavaScript de código abierto: EaselJS, TweenJS, SoundJS y PreloadJS. Cuando publicas o pruebas un documento HTML5 Canvas, Animate usa CreateJS para generar todo el código JavaScript necesario para representar tus imágenes, gráficos, símbolos, animaciones y sonidos en el Escenario. También genera recursos dependientes, como imágenes y sonidos.

5. Aunque un documento HTML5 Canvas admite todas las interpolaciones de movimiento y las interpolaciones de forma, se exportan como animaciones fotograma a fotograma y pueden aumentar el tamaño del archivo de tu código JavaScript exportado. Usa interpolaciones clásicas, que se conservan como interpolaciones en tiempo de ejecución que conservan el tamaño del archivo y te permiten controlar la animación dinámicamente a través de JavaScript.

6. Inserta JavaScript en una línea de tiempo de Animate escribiendo código directamente en el panel Acciones. Si eres nuevo en JavaScript, puedes usar el panel Fragmentos de código HTML5 Canvas, que proporciona fragmentos de JavaScript para interacciones comunes, como clics del ratón y control de la línea de tiempo.

7. En JavaScript para CreateJS, los números de fotograma comienzan en 0. En Animate, los números de fotograma comienzan en 1. Por esta razón, se deben usar etiquetas de fotograma para evitar referencias a números de fotograma.

8. Puedes probar tu proyecto de Animate para un dispositivo móvil probándolo en Air Debug Launcher (Control > Probar película > En AIR Debug Launcher [Móvil]). El SimController que lo acompaña te permite simular varias interacciones móviles, como pellizcos y deslizamientos. También puedes probar tu proyecto de Animate publicándolo directamente en un dispositivo USB conectado (Android o iOS). Por último, puedes probar una aplicación de iOS en el simulador de iOS nativo (Control > Probar película > En el simulador de iOS).

9. Un certificado de firma de código es un documento certificado que actúa como tu firma digital. Compras uno de una autoridad de certificación. Proporciona una forma para que tu audiencia autentique tu identidad para que puedan descargar e instalar con confianza aplicaciones AIR de escritorio o aplicaciones AIR para Android o iOS.