Con la ayuda de un editor HTML, abra la plantilla HTML de Animate que desee cambiar. Estas plantillas se instalan en las siguientes ubicaciones:
- Guía del usuario de Adobe Animate
- Introducción a Animate
- Animación
- Aspectos básicos de animaciones en Animate
- Cómo utilizar los fotogramas y fotogramas clave en Animate
- Animación fotograma a fotograma en Animate
- Cómo trabajar con la animación de interpolación clásica en Animate
- Herramienta Pincel
- Guía de movimiento
- Interpolación de movimiento y ActionScript 3.0
- Acerca de la animación de interpolación de movimiento
- Animaciones de interpolación de movimiento
- Creación de una animación de interpolación de movimiento
- Uso de fotogramas clave de propiedad
- Animación de la posición con una interpolación
- Edición de interpolaciones de movimiento con el editor de movimiento
- Edición del trazado de movimiento de una animación de interpolación
- Manipulación de las interpolaciones de movimiento
- Adición de aceleraciones personalizadas
- Creación y aplicación de ajustes preestablecidos de movimiento
- Configuración de grupos de interpolación de animación
- Uso de interpolaciones de movimiento guardadas como archivos XML
- Interpolaciones de movimiento e interpolaciones clásicas
- Interpolación de forma
- Uso de la animación de la herramienta Hueso en Animate
- Trabajar con el rigging de personajes en Animate
- Uso de las capas de máscara en Adobe Animate
- Uso de escenas en Animate
- Interactividad
- Creación de botones en Animate
- Conversión de proyectos de Animate a otros formatos de documento
- Creación y publicación de documentos de HTML5 Canvas en Animate
- Adición de interactividad con fragmentos de código en Animate
- Creación de componentes HTML5 personalizados
- Uso de componentes en HTML5 Canvas
- Creación de componentes personalizados: Ejemplos
- Fragmentos de código para componentes personalizados
- Prácticas recomendadas - Publicidad con Animate
- Autoría y publicación de realidad virtual
- Espacio de trabajo y flujo de trabajo
- Creación y administración de pinceles
- Uso de Google Fonts en documentos HTML5 Canvas
- Utilización de las Bibliotecas Creative Cloud y Adobe Animate
- Utilización del Escenario y el panel Herramientas en Animate
- Flujo de trabajo y espacio de trabajo de Animate
- Uso de las fuentes web en documentos de HTML5 Canvas
- Líneas de tiempo y ActionScript
- Trabajo con varias líneas de tiempo
- Configuración de preferencias
- Utilización de los paneles de edición de Animate
- Creación de capas de la línea de tiempo en Animate
- Exportación de animaciones para aplicaciones móviles y motores de juegos
- Desplazamiento y copia de objetos
- Plantillas
- Buscar y reemplazar en Animate
- Deshacer y rehacer en el panel Historial
- Métodos abreviados de teclado
- Uso de la Cronología en Animate
- Creación de extensiones HTML
- Opciones de optimización para Imágenes y archivos GIF animados
- Configuración de exportación de imágenes y archivos GIF
- Panel de Recursos en Animate
- Multimedia y vídeo
- Transformación y combinación de objetos gráficos en Animate
- Crear y trabajar con instancias de símbolo en Animate
- Calco de imagen
- Cómo utilizar el sonido en Adobe Animate
- Exportación de archivos SVG
- Creación de archivos de vídeo para su uso en Animate
- Cómo añadir un vídeo a Animate
- Dibujo y creación de objetos en Animate
- Remodelado de líneas y formas
- Trazos, rellenos y degradados en Animate CC
- Uso de Adobe Premiere Pro y After Effects
- Paneles de color en Animate CC
- Apertura de archivos de Flash CS6 con Animate
- Uso de texto clásico en Animate
- Colocación de ilustraciones en Animate
- Mapas de bits importados en Animate
- Gráficos 3D
- Trabajo con símbolos en Animate
- Dibujo de líneas y formas en Adobe Animate
- Uso de bibliotecas en Animate
- Exportación de sonidos
- Selección de objetos en Animate CC
- Trabajo con archivos AI de Illustrator en Animate
- Aplicación de modos de mezcla
- Organización de objetos
- Automatización de tareas con el menú Comandos
- Texto en varios idiomas
- Utilización de la cámara en Animate
- Filtros de gráficos
- Sonido y ActionScript
- Preferencias de dibujo
- Dibujo con la herramienta Pluma
- Plataformas
- Conversión de proyectos de Animate a otros formatos de documento
- Compatibilidad con plataformas personalizadas
- Creación y publicación de documentos de HTML5 Canvas en Animate
- Creación y publicación de un documento de WebGL
- Empaquetado de aplicaciones para AIR para iOS
- Publicación de aplicaciones de AIR for Android
- Publicación para Adobe AIR para escritorio
- Configuración de publicaciones de ActionScript
- Prácticas recomendadas - Organización de ActionScript en una aplicación
- Uso de ActionScript con Animate
- Accesibilidad en el espacio de trabajo de Animate
- Cómo escribir y gestionar scripts
- Activación de la compatibilidad con plataformas personalizadas
- Información general sobre compatibilidad con plataformas personalizadas
- Uso de plugins de compatibilidad con plataformas personalizadas
- Depuración de ActionScript 3.0
- Activación de la compatibilidad con plataformas personalizadas
- Exportación y publicación
- Exportación de archivos de Animate CC
- Publicación de OAM
- Exportación de archivos SVG
- Exportación de gráficos y vídeos con Animate
- Publicar documentos de AS3
- Exportación de animaciones para aplicaciones móviles y motores de juegos
- Exportación de sonidos
- Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
- Prácticas recomendadas - Convenciones de vídeo
- Prácticas recomendadas - Directrices de edición de aplicaciones SWF
- Prácticas recomendadas - Estructuración de archivos FLA
- Prácticas recomendadas de optimización de archivos FLA para Animate
- Configuración de publicaciones de ActionScript
- Especificación de configuración de publicación para Animate
- Exportación de archivos de proyector
- Exportar imágenes y archivos GIF animados
- Plantillas de publicación HTML
- Uso de Adobe Premiere Pro y After Effects
- Compartir y publicar animaciones rápidamente
- Solución de problemas
Acerca de las Plantillas de publicación HTML
Una plantilla HTML de Animate es un archivo de texto que contiene código HTML estático y código de plantilla flexible consistente en un tipo especial de variables (que difieren de las variables de ActionScript). Cuando publica un archivo SWF, Animate sustituye esas variables por las configuraciones seleccionadas en la ficha del cuadro de diálogo Configuración de publicación y genera una página HTML con su archivo SWF incorporado.
Animate incluye plantillas, adecuadas para la mayoría de las necesidades de los usuarios, que eliminan la necesidad de crear manualmente una página HTML con el archivo SWF. Por ejemplo, la plantilla Solo Animate es muy útil para realizar pruebas de los ficheros en un navegador. Esta plantilla coloca el archivo SWF en la página HTML de modo que pueda verlo en un navegador Web con Flash Player instalado.
Para publicar una nueva página HTML, utilice la misma plantilla y cambie la configuración. Se pueden crear plantillas personalizadas mediante cualquier editor HTML. Crear una plantilla es lo mismo que crear una página HTML estándar. La diferencia radica en que se sustituyen los valores específicos pertenecientes a un archivo SWF por variables que empiezan con un signo de dólar ($).
Las plantillas HTML de Animate tienen las siguientes características especiales:
Un título de una línea que aparece en el menú emergente Plantilla de la ficha HTML del cuadro de diálogo Configuración de publicación.
Una descripción más detallada que aparece al hacer clic en Información de la ficha HTML del cuadro de diálogo Configuración de publicación.
Las variables de plantilla empiezan por $, que indica la posición en la que deben sustituirse los valores de los parámetros cuando Animate genera el archivo de salida.
nota: utilice una barra inclinada invertida y un signo de dólar (\ $) para utilizar un $ con otra finalidad en este mismo documento.
La etiquetas HTML object y embed que cumplen los requisitos de etiquetas de Microsoft Internet Explorer y Netscape® Communicator® o Navigator®, respectivamente. Para ver un archivo SWF correctamente en una página HTML, siga los requisitos de etiqueta siguientes. Internet Explorer utiliza la etiqueta HTML object para abrir los archivos SWF; Netscape utiliza la etiqueta embed.
Personalización de las plantillas de publicación HTML
Modifique las variables de plantillas HTML para crear un mapa de imágenes, un informe de texto o un informe URL, o bien, para insertar sus propios valores para algunos de los parámetros HTML de Animate más comunes de las etiquetas object y embed (para navegadores que utilicen controles ActiveX y plugins, respectivamente).
Las plantillas de Animate pueden incorporar cualquier contenido HTML para la aplicación o incluso un código para intérpretes como ColdFusion y ASP.
-
Windows XP o Vista: unidad de arranque:\Documents and Settings\usuario\Configuración local\Datos de programa\Adobe\Flash CS5\idioma\Configuration\HTML\. Lo normal es que la carpeta de datos de programa esté oculta. Para verla, quizás tenga que modificar la configuración de Windows Explorer.
Mac OS X 10.3 y versiones posteriores: Macintosh HD/Aplicaciones/Adobe Flash CS5/idioma/First Run/HTML.
La unidad de arranque es la unidad desde la que arrancan los sistemas operativos Windows (normalmente, la unidad C:). El usuario representa el nombre de la persona que ha iniciado sesión en el sistema operativo Windows. En idioma se indica el idioma de manera abreviada. Por ejemplo, en España, aparecería “es” de español.
-
Edite la plantilla.
-
Guárdela en la misma carpeta de donde la recuperó.
-
Para aplicar la configuración de la plantilla al archivo SWF, seleccione Archivo > Configuración de publicación, haga clic en HTML y seleccione la plantilla que haya modificado. Animate cambia solo las variables de la plantilla seleccionada.
-
Elija la configuración de publicación restante y haga clic en Aceptar.
Variables de plantillas HTML
En la tabla siguiente se indican las variables de plantilla que Animate reconoce:
Atributo/parámetro |
Variable de plantilla |
---|---|
Template title |
$TT |
Template description start |
$DS |
Template description finish |
$DF |
Título de Animate (archivo SWF) |
$T1 |
Titulo de Animate (archivo SWF) para para metadatos del motor de búsqueda |
$TL |
Descripción de los metadatos del motor de búsqueda |
$DC |
Cadena XML de metadatos que se usará con motores de búsqueda |
$MD |
Anchura |
$WT |
Altura |
$HT |
Movie |
$MO |
HTML alignment |
$HA |
Looping |
$LO |
Parámetros para object |
$PO |
Parámetros para embed |
$PE |
Reproducción |
$PL |
Calidad |
$QU |
Escala |
$SC |
Salign |
$SA |
Wmode |
$WM |
Devicefont |
$DE |
Bgcolor |
$BG |
Movie text (area to write movie text) |
$MT |
Movie URL (location of SWF file URL) |
$MU |
Image width (unspecified image type) |
$IW |
Image height (unspecified image type) |
$IH |
Image filename (unspecified image type) |
$IS |
Image map name |
$IU |
Image map tag location |
$IM |
QuickTime width |
$QW |
QuickTime height |
$QH |
QuickTime filename |
$QN |
GIF width |
$GW |
GIF height |
$GH |
GIF filename |
$GN |
JPEG width |
$JW |
JPEG height |
$JH |
JPEG filename |
$JN |
PNG width |
$PW |
PNG height |
$PH |
PNG filename |
$PN |
Utilización de variables de plantilla abreviadas
Las variables de plantilla $PE (para etiquetas object) y $PE (para etiquetas embed) son elementos abreviados muy útiles. Ambas variables hacen que Animate inserte en una plantilla cualquier valor que no sea predeterminado para algunos de los parámetros object y embed más comunes, entre los que se incluyen PLAY ($PL), QUALITY ($QU), SCALE ($SC), SALIGN ($SA), WMODE ($WM), DEVICEFONT ($DE) y BGCOLOR ($BG).
Plantilla HTML de ejemplo
El siguiente archivo de plantilla Default.HTML en Animate incluye numerosas variables de plantilla que se usan con frecuencia:
$TTFlash Only $DS Display Adobe SWF file in HTML. $DF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> $CS <title>$TI</title> </head> <body bgcolor="$BG"> <!--url's used in the movie--> $MU <!--text used in the movie--> $MT <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="$WI" height="$HE" id="$TI" align="$HA"> <param name="allowScriptAccess" value="sameDomain" /> $PO <embed $PEwidth="$WI" height="$HE" name="$TI" align="$HA" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" /> </object> </body> </html>
Creación de un mapa de imagen para sustituir a un archivo SWF
Animate puede generar un mapa de imágenes para mostrar cualquier imagen y mantener la función de los botones que establecen un vínculo con las URL. Cuando encuentre una plantilla HTML que incluya la variable de plantilla $IM, Animate insertará el código de mapa de la imagen. La variable $IU identifica el nombre del archivo GIF, JPEG o PNG.
-
En el documento, seleccione el fotograma que se debe utilizar para el mapa de imágenes y asígnele la etiqueta #Map en el inspector de propiedades del fotograma (Ventana > Propiedades). Utilice cualquier fotograma clave con botones que tengan asociadas acciones getURL de ActionScript 1.0 ó 2.0.
Si no crea ninguna etiqueta de fotograma, Animate crea un mapa de imágenes con los botones del último fotograma del archivo SWF. Esta opción genera un mapa de imagen incorporado, no un archivo SWF incorporado.
-
Para seleccionar el fotograma que muestra el mapa de imágenes, siga uno de estos procedimientos:
Para archivos PNG o GIF, asigne la etiqueta#Static al fotograma que debe mostrarse.
Para JPEG, durante la operación de publicación, coloque la cabeza lectora en el fotograma que se debe utilizar para la visualización.
-
En un editor HTML, abra la plantilla HTML que modificará.
-
Guarde su plantilla.
-
Seleccione Archivo > Configuración de publicación, haga clic en Formato, elija un formato para el mapa de imágenes y haga clic en Aceptar.
Por ejemplo, la inserción del código siguiente en una plantilla:
$IM <img src=$IS usemap=$IU width=$IW height=$IH BORDER=0>
puede producir el código siguiente en el documento HTML creado por el comando Publicar:
<map name="mymovie"> <area coords="130,116,214,182" href="http://www.adobe.com"> </map> <img src="mymovie.gif" usemap="#mymovie" width=550 height=400 border=0>
Creación de informes de texto e informes URL
La variable de plantilla $MT hace que Animate inserte todo el texto del archivo SWF de Flash actual como comentario en el código HTML. Es muy conveniente para indexar el contenido de un archivo SWF y hacer que esté visible para las herramientas de búsqueda.
La variable de plantilla $MU hace que Animate genere una lista de las URL a las que hacen referencia las acciones del archivo SWF actual e inserta dicha lista en la ubicación actual como documento. De este modo, las herramientas de verificación de enlaces pueden detectar y comprobar los que se encuentran en el archivo SWF.
Incorporación de metadatos de búsqueda
Las variables de plantilla $TL (título de archivo SWF) y $DC (metadatos de descripción) permiten incluir metadatos de búsqueda en el archivo HTML. De este modo, se consigue que el archivo SWF resulte mas visible para los motores de búsqueda y se obtienen resultados más significativos. Utilice la variable de plantilla $MD para incluir en ella los metadatos de búsqueda en formato de cadena.