(eBook-Es) Macromedia - Tutoriales de Introduccion A Flash MX, ActionScript y Componentes

Tutoriales de Flash MX
macromedia
®
Marcas comerciales
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver,
Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage
Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director,
Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme
3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer’s Studio, Generator
Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia,
Macromedia M Logo & Desing, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker,
Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine,
Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso,
Web Design 101, Whirlwind y Xtra son marcas comerciales de Macromedia, Inc. y pueden estar registradas en Estados Unidos o
en otras jurisdicciones, incluidas las internacionales. Otros nombres de productos, logotipos, diseños, títulos, palabras o frases
mencionados en esta publicación pueden ser marcas comerciales, marcas de servicio o nombres registrados de Macromedia, Inc. o
de otras entidades y pueden estar registrados en ciertas jurisdicciones, incluidas las internacionales.
Información de terceros
La tecnología de compresión y descompresión de voz tiene licencia de Nellymoser, Inc. (www.nellymoser.com).
La tecnología de compresión y descompresión de vídeo Sorenson™ Spark™ tiene licencia de

Sorenson Media, Inc.
Esta guía contiene vínculos a sitios Web de terceros que no están bajo el control de Macromedia y, por consiguiente, Macromedia
no se hace responsable del contenido de dichos sitios Web. El acceso a uno de los sitios Web de terceros mencionados en esta guía
será a cuenta y riesgo del usuario. Macromedia proporciona estos vínculos únicamente como ayuda y su inclusión no implica que
Macromedia se haga responsable del contenido de dichos sitios Web.
Limitación de garantías de Apple

APPLE COMPUTER, INC. NO GARANTIZA, DE FORMA EXPRESA NI IMPLÍCITA, LA COMERCIABILIDAD O
IDONEIDAD PARA UN FIN DETERMINADO DEL PAQUETE DE SOFTWARE INFORMÁTICO INCLUIDO. LA
EXCLUSIÓN DE GARANTÍAS IMPLÍCITAS NO ESTÁ PERMITIDA EN ALGUNOS ESTADOS. LA RESTRICCIÓN
ANTERIOR PUEDE NO AFECTARLE. ESTA GARANTÍA LE PROPORCIONA DERECHOS LEGALES
ESPECÍFICOS. PUEDE TENER OTROS DERECHOS QUE VARÍAN SEGÚN LA LEGISLACIÓN LOCAL.
Copyright © 2002 Macromedia, Inc. Todos los derechos reservados. No se permite la copia, fotocopia, reproducción,
traducción ni la conversión en formato electrónico o legible por equipos, ya sea de forma total o parcial de este manual, sin la
autorización previa por escrito de Macromedia, Inc.
Agradecimientos
Director: Erick Vera
Productor: Wayne Wieseler
Redacción: Jody Bleyle, JuLee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor
Diseño de las instrucciones: Stephanie Gowin, Barbara Nelson
Edición: Rosana Francescato, Lisa Stanziano, Anne Szabla
Producción y diseño multimedia: Aaron Begley, Benjamin Salles, Noah Zilberberg
Producción y diseño de impresión: Chris Basmajian, Caroline Branch
Localización: Michael Dominguez, Cristina Guembe, Yoshika Hedberg, Tim Hussey, Masayo ”Noppe” Noda, Simone Pux, Yoko
Shindo, Yuko Yagi
Primera edición: marzo de 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
CONTENIDO
CAPÍTULO 1
Tutorial de introducción a Flash MX .................................. 5
Qué debe saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Visualización de la película terminada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Análisis del archivo stiletto.fla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Definición de las propiedades de un documento nuevo y creación de un fondo de
degradado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Cómo crear y enmascarar ilustraciones vectoriales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Interpolar efectos de mapa de bits dentro de un clip de película . . . . . . . . . . . . . . . . . . 31
Carga de texto dinámico en tiempo de ejecución. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Adición de animación y navegación a botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Agregar flujos y sonidos de eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Organización del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Prueba del rendimiento de descarga y publicación de la película . . . . . . . . . . . . . . . . . . 52
Pasos siguientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
CAPÍTULO 2
Tutorial de introducción a ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Visualización de una película completa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Inicialización de la película . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Almacenamiento y recuperación de información . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Visualización de información en un cuadro de texto dinámico . . . . . . . . . . . . . . . . . . . 67
Especificación de una expresión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Control del flujo de la película . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Creación de comandos y reutilización de código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Utilización de un objeto incorporado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Prueba de la película . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
CAPÍTULO 3
Tutorial de introducción a los componentes . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Tipos de componente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Visualización del formulario finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Creación de un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
3
4 Contenido
CAPÍTULO 1
Tutorial de introducción a Flash MX
Este tutorial sirve de guía para el proceso de creación de diseños convincentes para Internet con
Macromedia Flash MX. Si completa este tutorial, aprenderá a diseñar una película: desde cómo
abrir un nuevo documento hasta publicar la película para reproducirla en Internet. Tardará tres
horas aproximadamente en completar el tutorial (dependiendo de su experiencia) y aprenderá a
realizar las tareas siguientes:
• Analizar una película finalizada.
• Definir propiedades de documentos y crear un degradado.
• Crear y enmascarar ilustraciones vectoriales.
• Interpolar efectos de mapa de bits dentro de un clip de película.
• Cargar texto dinámico.
• Modificar botones y agregar funciones de navegación.
• Agregar flujos y sonidos de eventos.
• Probar y publicar la película.
Se recomienda completar las ocho secciones incluidas en el tutorial en el orden indicado, si bien
puede optar por revisar sólo las secciones que le interesen. Si completa el tutorial sin seguir el
orden establecido, tenga en cuenta que en cada sección se asume que el usuario domina los
conocimientos presentados en las secciones anteriores.
Qué debe saber

Antes de empezar el tutorial, lea las siete lecciones de Ayuda de Flash. En estas lecciones
interactivas creadas en Flash se presentan los conceptos básicos que debe conocer para completar
el tutorial. Los temas de las lecciones son los siguientes:
• Primeros pasos en Flash MX.
• Ilustración en Flash.
• Adición y edición de texto.
• Creación y edición de símbolos.
• Capas.
• Creación de botones.
• Creación de animaciones interpoladas.
Para tomar una lección, elija Ayuda > Lecciones y seleccione una de la lista.
5
Visualización de la película terminada
Puede abrir una versión ya terminada de la película del tutorial para comprender mejor cómo se
verá el archivo final.
En esta sección, realizará las tareas siguientes:
• Analizar la película acabada con el inspector de propiedades y el explorador de películas.
• Examinar un clip de película y discernir sus relaciones con la película principal.
• Ver los tipos de elementos incluidos en la película.
1 Dentro de la carpeta de la aplicación Flash MX, vaya a Tutorials/FlashIntro y haga doble clic en
stiletto.swf para abrir la película acabada en el Flash Player autónomo.
Las películas Flash publicadas tienen la extensión SWF; los documentos del entorno de edición
tienen la extensión FLA.
2 Cuando se abra la película, observe cómo aumentan progresivamente o se desvanecen las tres
vistas del coche.
Creará esta animación interpolando efectos de mapa de bits en un clip de película.
3 Escuche el sonido que se reproduce continuamente mientras se reproduce la película. Es un
ejemplo de flujo de sonido.
4 Mueva el puntero por encima de los tres botones situados a lo largo del borde inferior derecho
de la ventana para ver el efecto del desplazamiento y oír los sonidos de eventos incluidos en
cada botón.
5 Haga clic en un botón para ver con qué está vinculado y, a continuación, cierre el navegador
que ha abierto y vuelva al archivo SWF.
6 Después de ver la película, haga clic en su cuadro de cierre.
6 Capítulo 1
Análisis del archivo stiletto.fla
Resulta útil analizar el archivo FLA acabado para ver cómo el autor ha diseñado el documento.
Para analizar el archivo, puede ver las propiedades de un objeto, ver la línea de tiempo y el
escenario, observar elementos de biblioteca y utilizar el explorador de películas.
1 En Flash, elija Archivo > Abrir. Vaya a la carpeta de la aplicación Flash y abra Tutorials/
FlashIntro/stiletto.fla.
Aparecerá la película del tutorial completa en el entorno de edición.
Arrastre la barra que separa el
escenario de la línea de tiempo
2 Para ver todas las capas de la línea de tiempo principal, arrastre hacia abajo la barra que separa
el escenario de la línea de tiempo.
3 En la línea de tiempo, desbloquee la capa de copia y la capa de imágenes.
Visualización de las propiedades del documento

El inspector de propiedades permite ver especificaciones de los objetos seleccionados. Estas
especificaciones dependen del tipo de objeto seleccionado. Si selecciona un objeto de texto, por
ejemplo, aparece la configuración para ver y modificar los atributos de texto.
1 Si el inspector de propiedades no está abierto, elija Ventana > Propiedades.
Tutorial de introducción a Flash MX 7

2 En el escenario, desplácese hacia abajo, si es necesario, y seleccione el bloque rectangular donde
ha aparecido el texto descriptivo en el archivo SWF acabado. El texto no aparece en el archivo
FLA porque se carga de un archivo TXT externo en un campo de texto dinámico
Cuadro de texto
En el inspector de propiedades, puede ver el tamaño, el estilo y el color del texto, entre otros
atributos.
Si el inspector de propiedades no está totalmente expandido, haga clic en el triángulo blanco de

la esquina inferior derecha.
3 En el escenario, seleccione el coche.
La configuración del clip de película reemplaza la configuración de texto. Los clips de película
son símbolos con sus propias líneas de tiempo independientes. Puede considerarlos como
películas dentro de películas.
Visualización del clip de película

Ahora abrirá el modo de edición de símbolos para ver la línea de tiempo de un clip de película.
1 En el escenario, haga doble clic en el clip de película del coche.
Como ha aprendido en la lección Creación de animaciones interpoladas, debe definir los
cambios de la animación en fotogramas clave. Cuando se desplace alrededor de la línea de
tiempo, observe las capas que disponen de fotogramas clave y los fotogramas que son
fotogramas clave.
Los fotogramas clave iniciales e intermedios que incluyen contenido se indican en la línea de
tiempo mediante círculos rellenos; los fotogramas clave finales aparecen como rectángulos con
contorno pequeños.
8 Capítulo 1
2 En la línea de tiempo, seleccione la cabeza lectora y arrástrela despacio por los fotogramas.
Vea cómo los cambios de acción en el escenario se corresponden con los cambios en la línea de
tiempo. Mientras arrastra la cabeza lectora, la película se reproduce secuencialmente. Puede
agregar código ActionScript, el lenguaje de creación de scripts de Flash, a las películas para
hacer que la cabeza lectora salte a fotogramas específicos.
3 Cuando termine de ver el clip de película, realice una de las acciones siguientes para volver a la
película principal:
• Elija Edición > Editar documento.
• Haga clic en el botón Atrás.
• Haga clic en Escena 1 encima del escenario.
Visualización de elementos de la biblioteca
El panel Biblioteca contiene los símbolos y los objetos importados del documento.
1 Si el panel Biblioteca no está abierto, elija Ventana > Biblioteca.
2 Arrastre el panel Biblioteca para hacerlo más grande, si es necesario, y ver los objetos dentro de
la biblioteca.
3 Si la carpeta Artwork no está expandida, haga doble clic para ver los objetos de la carpeta.
4 Haga clic en view1.png para ver la imagen en el área de previsualización en la parte superior del
panel Biblioteca.
5 Expanda las otras carpetas del panel Biblioteca para ver los elementos incluidos en el
documento, como botones y clips de película.

6 Cuando haya visto todos los elementos, cierre el panel Biblioteca.
Análisis de la estructura de la película con el explorador de películas

El explorador de películas ayuda a organizar, localizar y editar medios. Gracias a su estructura
jerárquica en árbol, el explorador de películas proporciona información acerca de la organización
y el flujo de una película, por lo que resulta especialmente útil cuando se analiza una película
diseñada por otra persona.
1 Si el explorador de películas todavía no está abierto, elija Ventana > Explorador de películas.
2 Si es necesario, amplíe el explorador de películas para ver la estructura de árbol dentro del
panel.
Los botones de filtrado del explorador de películas muestran u ocultan información.
10 Capítulo 1
3 Haga clic en el menú emergente de la barra de título del explorador de películas y verifique que
Mostrar elementos de película y Mostrar definiciones de símbolo estén seleccionados.
4 Anule la selección del botón Mostrar fotogramas y capas a lo largo de la parte superior del
explorador de películas. Verifique que los únicos botones de filtro seleccionados sean Mostrar
texto; Mostrar botones, elementos de película y gráficos; Mostrar archivos de comando de
acción y Mostrar video, sonidos y mapas de bits.
5 Examine la lista para ver algunos de los elementos incluidos en la película y sus relaciones con
otros elementos.
6 Para expandir un objeto o una categoría, haga clic en el botón de signo más (+) situado a la
izquierda del nombre.
7 Seleccione el botón de filtro Mostrar fotogramas y capas. Desplácese hacia abajo en la categoría
Definiciones de símbolos. Con la categoría expandida, haga doble clic en el clip de película
Animación de coche.
Ahora se encuentra en el modo de edición de símbolos de clips de película.

8 En el explorador de películas, con la categoría Animación de coche seleccionada y expandida,
expanda el icono de Vista 3 Aparición y, a continuación, haga doble clic en el fotograma 60.
En la línea de tiempo del clip de película, la cabeza lectora se mueve al fotograma 60 de la capa
Vista 3 Aparición.
Para ver un elemento que aparezca en el árbol jerárquico, haga clic en el icono correspondiente.
Si hace clic en un icono de fotograma, la cabeza lectora se mueve a ese fotograma en la línea de
tiempo. Si hace clic en un elemento, como una imagen de mapa de bits, el inspector de
propiedades muestra la configuración de la imagen. Al hacer doble clic en un icono que
representa un símbolo se abre el modo de edición de símbolos.
9 Cierre el explorador de películas. Para cerrar el documento, elija Archivo > Cerrar.
Si ha efectuado cambios en el archivo, no los guarde.
Definición de las propiedades de un documento nuevo y

creación de un fondo de degradado
Para saber cómo crear una película en Flash, debe empezar por el primer paso del proceso: abrir
un archivo nuevo. A continuación, cuando finalice esta sección, sabrá realizar las tareas siguientes:
• Abrir un archivo nuevo y definir propiedades de documentos.
• Crear y transformar un fondo de degradado.
Cómo abrir un archivo nuevo
Ahora estará listo para crear su propia versión de la película del tutorial.
1 Seleccione Archivo > Nuevo.
2 Elija Archivo > Guardar como.
3 Asigne al archivo el nombre mystiletto.fla y guárdelo en la carpeta de la aplicación Flash MX,
en la subcarpeta Tutorials/FlashIntro/My_Stiletto.
Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.
12 Capítulo 1
Definición de propiedades de documento
La configuración de las propiedades de un documento generalmente constituye el primer paso en
el trabajo de edición. Puede utilizar el inspector de propiedades y el cuadro de diálogo
Propiedades del documento para especificar las configuraciones que afectan a toda la película,
como la velocidad de reproducción en fotogramas por segundo (fps), el tamaño del escenario y el
color del fondo.
1 Si el inspector de propiedades no está abierto, elija Ventana > Propiedades. En el inspector de
propiedades, verifique que 12 es el número del cuadro de texto Velocidad de fotogramas.
La película se reproducirá a 12 fotogramas por segundo, una velocidad óptima para reproducir
animaciones en Internet.
Nota: si el inspector de propiedades no está totalmente expandido, haga clic en el triángulo blanco de la esquina
inferior derecha.
2 El cuadro Color de fondo indica el color del escenario. Haga clic en la flecha abajo en el cuadro
Color de fondo y, a continuación, mueva la herramienta Cuentagotas sobre las muestras de
color para ver sus valores hexadecimales en el cuadro de texto hexadecimal.
3 Busque y haga clic en la muestra de color gris con el valor hexadecimal 999999.
Cuadro de texto Hexadecimal
Seleccione esta sombra de gris

4 Para cambiar el tamaño del escenario, haga clic en el botón Tamaño, que indica el tamaño del
escenario. En el cuadro de diálogo Propiedades del documento, escriba 640 px en el primer
cuadro de texto Dimensiones y 290 px en el segundo cuadro de texto Dimensiones. Verifique
que Píxeles esté seleccionado en el menú emergente y haga clic en Aceptar.
Las dimensiones del escenario cambian para reflejar la nueva configuración de 640 x 290
píxeles.
Especificación de la configuración de cuadrícula

En el escenario, puede alinear objetos a lo largo de las líneas de cuadrícula horizontales y
verticales. Aunque la cuadrícula no esté visible, puede ajustar objetos a ella. Ahora modificará la
distancia entre las líneas de cuadrícula horizontales y verticales y creará una cuadrícula alineada
con los bordes del escenario.
1 Seleccione Ver > Cuadrícula > Editar cuadrícula.
2 En el cuadro de diálogo Cuadrícula, escriba 10 px en el cuadro de texto de anchura de la
cuadrícula y 10 px en el cuadro de texto de altura de la cuadrícula.
3 Seleccione Ajustar a cuadrícula y verifique que Mostrar cuadrícula no esté seleccionado.
Los objetos se ajustarán a la cuadrícula, aunque la cuadrícula no esté visible.
4 Verifique que Normal esté seleccionado en Precisión de ajuste y haga clic en Aceptar.
La precisión de ajuste determina la proximidad a una línea de cuadrícula a la que debe estar un
objeto para que se ajuste a ella.
14 Capítulo 1
Creación de un fondo de degradado
Un degradado muestra variaciones sutiles de un color o transiciones entre dos o más colores. En el
archivo de tutorial final, el fondo es un degradado que mezcla negro y azul oscuro con un área
transparente que permite mostrar parte del color gris del escenario. Este efecto se consigue
utilizando el Mezclador de colores.
Nota: aunque los degradados ofrecen efectos interesantes en las películas, su uso excesivo puede afectar
negativamente a la velocidad del procesador del equipo y reducir la velocidad a la que se reproduce una animación.
Cuando diseñe una película, tenga en cuenta tanto los requisitos artísticos como los de rendimiento para determinar
la utilización óptima de los degradados.
Dibujo de un rectángulo
Anteriormente en el tutorial creó una cuadrícula alineada con el escenario y ajustó objetos a líneas
de cuadrícula. Ahora dibujará un rectángulo que se ajusta al área de la cuadrícula que bordea el
escenario.
1 En el menú emergente situado sobre el lado derecho del escenario, introduzca 75% para ver
todo el escenario.
Esta configuración indica la vista aumentada o reducida del escenario. La configuración no
afecta al tamaño real del escenario en la película especificado en el cuadro de diálogo
Propiedades del documento.
2 En la caja de herramientas, seleccione la herramienta Rectángulo.

3 En la caja de herramientas, haga clic en el control Color de trazo. Seleccione Sin trazo (el botón
con la línea diagonal roja que se encuentra sobre la paleta de colores).
El color de relleno seleccionado de la forma no es importante; en breve cambiará el color.

4 Empezando por la esquina superior izquierda del escenario, arrastre el puntero a la esquina
inferior derecha del escenario para dibujar un rectángulo que ocupe el escenario.
Al soltar el puntero, el rectángulo se ajusta a los bordes del escenario a lo largo de la cuadrícula
oculta.
Nota: mientras completa el tutorial puede serle útil deshacer cambios que haya efectuado. Flash puede
deshacer varios cambios recientes que haya efectuado según la cantidad de deshacer niveles que haya
configurado en Preferencias. Para deshacer, elija Edición > Deshacer o presione Ctrl+Z (Windows) o
Comando+Z (Macintosh). De manera inversa, podrá rehacer lo que ha deshecho eligiendo Edición > Rehacer o
presionando Ctrl+Y (Windows) o Comando+Y (Macintosh).
Especificación de un color para el degradado

El azul oscuro es el primer color que se agregará al degradado.
1 En la caja de herramientas seleccione la herramienta Flecha. En el escenario, haga clic dentro
del rectángulo para seleccionar el relleno.
Cuando dibujó el rectángulo, el inspector de propiedades mostró las propiedades de la
herramienta Rectángulo. Al seleccionar una forma que ya se ha creado, el inspector de
propiedades muestra las propiedades de la forma.
2 Si no está abierto el Mezclador de colores, elija Ventana > Mezclador de colores.
3 Para expandir el Mezclador de colores, haga clic en la flecha blanca de la barra de título del
panel.
Haga clic aquí para expandir el panel
16 Capítulo 1
4 Si el Mezclador de colores no está totalmente expandido, haga clic en la flecha situada en la
parte inferior derecha del panel.
5 En el menú emergente Estilo de relleno, seleccione Radial.

6 Haga clic en el deslizador situado a la izquierda de la barra de degradado para seleccionarlo.
Barra de degradado
Deslizador de degradado
7 Haga clic en el cuadro de color situado en la esquina superior izquierda de la ventana para abrir
la paleta de colores. Utilice uno de los métodos siguientes para seleccionar azul oscuro:
• Escriba 000066 en el cuadro de texto de valor hexadecimal y presione Intro o Retorno.
• Mueva el cuentagotas sobre las muestras de color hasta que encuentre el azul oscuro con el
valor hexadecimal 000066 y, a continuación, haga clic en la muestra para seleccionarla.
Haga clic en esta sombra de azul

Cambio del valor alfa
En el Mezclador de colores, el cuadro de texto Alfa indica la transparencia del color, donde 0%
indica que el color es completamente transparente y 100% indica que el color es completamente
opaco. Especificará un valor alfa 0% para crear un degradado que incluya el azul oscuro, el negro
y el color de escenario gris que deje entrever las áreas transparentes del degradado.
• En el Mezclador de colores, escriba 0 en el cuadro de texto Alfa y presione Intro o Retorno o
mueva el deslizador Alfa a 0.
Adición de un segundo color de degradado

Ahora agregará negro al degradado.
1 En el Mezclador de colores, haga clic en el deslizador situado a la derecha de la barra de
degradado para seleccionarlo.
2 Haga clic en el cuadro de color para abrir la paleta de colores y seleccione el negro con el valor
hexadecimal 000000.
Recuerde que puede escribir el valor hexadecimal en el cuadro de texto Hexadecimal y
presionar Intro o Retorno, o bien buscar y seleccionar la muestra de color con el mismo valor
hexadecimal.
18 Capítulo 1
Transformación del relleno de degradado
Cuando se transforma un objeto, se lo gira (rota), ajusta (escala) o sesga. Puede transformar un
relleno con la herramienta Transformación de relleno.
1 En la caja de herramientas, seleccione la herramienta Transformación de relleno. En el
escenario, haga clic en cualquier lugar dentro del rectángulo.
Aparece una elipse alrededor del escenario que indica la forma y la ubicación del degradado. La
elipse dispone de controles de ubicación, anchura, escala y rotación del degradado radial.
Ubicación central
Anchura
Escala
Rotación

2 Arrastre el control central hacia la izquierda del escenario de manera que esté a un tercio
aproximadamente del borde izquierdo del escenario, como se muestra en la siguiente
ilustración.
Al cambiar la forma y la ubicación de la elipse, también se modifican la forma y la ubicación de

las transiciones del color del escenario.
3 Arrastre el selector cuadrado de la elipse, que controla la anchura del degradado, hacia la
izquierda para estrechar la elipse; la forma aproximada de la elipse aparece en la ilustración
siguiente.
20 Capítulo 1
4 Arrastre el selector central circular, que controla el tamaño del degradado, hacia la derecha para
ensanchar la elipse, como se muestra en la ilustración siguiente.
5 Arrastre el selector circular inferior, que controla la rotación de la elipse, hacia la izquierda para
rotar la elipse al ángulo aproximado que se muestra en la ilustración siguiente.

Asignación de nombre y bloqueo de una capa
La forma del degradado aparece en la Capa 1 de la línea de tiempo, que actualmente es la única
capa del documento. Como preparación para agregar y mover más objetos en el escenario,
cambiará el nombre y bloqueará la capa. En la siguiente sección del tutorial creará una nueva
capa.
Como ya ha aprendido en la lección Capas, al bloquear la capa se asegura de que no se realicen
cambios involuntarios en los objetos de la capa.
1 En la línea de tiempo, haga doble clic en el nombre Capa 1 y escriba Fondo para cambiar el
nombre de la capa.
2 Haga clic fuera del nombre de la capa y, a continuación, haga clic en el icono de candado para
bloquear la capa.
Cómo crear y enmascarar ilustraciones vectoriales

Cuando se dibuja en Flash, se crean ilustraciones vectoriales, que son representaciones
matemáticas de líneas, curvas, colores y posiciones. Una ilustración vectorial no depende de la
resolución; puede volver a adaptar su escala a cualquier tamaño o visualizarla con cualquier
resolución sin perder la claridad. Además, las ilustraciones vectoriales se descargan con más
rapidez que las imágenes de mapa de bits equivalentes.
Además del degradado, el archivo acabado contiene formas de fondo. Ahora utilizará la
herramienta Óvalo para crear las formas.
En concreto, en esta sección aprenderá a realizar las tareas siguientes:
• Agregar una capa.
• Crear y “recortar” formas.
• Enmascarar la capa que contiene las formas.
Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o ir a la
carpeta de la aplicación Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto2.fla. Si utiliza el
archivo stiletto2.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una
versión no modificada del archivo original.
Adición de una capa

En lugar de crear las formas en la capa Fondo, agregará una nueva capa en la que podrá dibujar las
formas.
1 Para agregar una nueva capa, elija Insertar > Capa o haga clic en el botón Insertar capa. Asigne
a la nueva capa el nombre Formas.
Botón Insertar capa
22 Capítulo 1
2 En la caja de herramientas, seleccione la herramienta Óvalo.
3 En el inspector de propiedades, seleccione Muy fina en el menú emergente Estilo del trazo.
Haga clic en el control Color de trazo. En la paleta de colores, seleccione el gris con el valor
hexadecimal 999999.
Recuerde que puede introducir el valor hexadecimal en el cuadro de texto hexadecimal o buscar
y hacer clic en la muestra de color que tenga el mismo valor hexadecimal.
4 Si el Mezclador de colores no está abierto, elija Ventana > Mezclador de colores. En el menú
emergente Estilo de relleno, seleccione Sólido. Haga clic en el control Color de relleno para
seleccionarlo. En el campo correspondiente al rojo (R), escriba 109. En los cuadros de texto
correspondiente al verde (V) y al azul (A), escriba 45 y, a continuación, presione Intro o
Retorno.
Así estará especificando los valores para la cantidad de rojo, verde y azul de un color.
5 En la línea de tiempo, verifique que la capa Formas esté seleccionada. En el escenario, restrinja
el óvalo a un círculo presionando Mayús mientras arrastra para dibujar un círculo que se
extienda desde el área del lienzo situada sobre el escenario al área del lienzo situada bajo el
escenario.
Nota: si se equivoca, elija Edición > Deshacer e inténtelo de nuevo.
6 Seleccione la herramienta Flecha en la caja de herramientas y haga doble clic en el círculo del
escenario para seleccionar el relleno y el trazo.
7 Si el panel Transformar no está abierto, elija Ventana > Transformar.

8 Para expandir el panel Transformar, haga clic en la flecha blanca situada en la esquina superior
izquierda. Seleccione Sesgar y escriba 20,0 en el cuadro de texto Sesgar horizontalmente y, a
continuación, presione Intro o Retorno.
El círculo que ha dibujado se convierte en un óvalo sesgado.
Creación y transformación de una forma duplicada

Ahora creará y transformará un óvalo duplicado.
1 Con el relleno y el trazo del óvalo aún seleccionado en el escenario, elija Edición > Duplicar.
24 Capítulo 1
2 En el inspector de propiedades, utilice el control Color de relleno para seleccionar el color
negro.
3 En la caja de herramientas, seleccione la herramienta Transformación libre.

Aparece una guía con selectores alrededor del óvalo duplicado.
4 Mueva el puntero sobre un selector de esquina hasta que aparezca el indicador diagonal con
flechas en los dos extremos. Arrastre el selector hacia dentro para reducir el óvalo. Verifique que
el trazo del óvalo interior no toque el trazo del óvalo exterior.

5 Mueva el puntero sobre el selector de esquina hasta que el puntero se transforme en un
indicador de rotación circular. Arrastre el indicador de rotación a la izquierda para rotar el
óvalo a la posición aproximada que se muestra en la ilustración siguiente.
Creación de un recorte con el duplicado

Cuando se crea una forma encima de otra en la misma capa y ambas formas son de colores
diferentes y no están agrupadas, la forma de encima “recorta” el área de la forma de abajo. Ahora
eliminará el óvalo duplicado para ver el efecto de recorte.
1 Con la guía de la herramienta Transformación libre alrededor del óvalo duplicado, haga clic en
cualquier punto del escenario o del lienzo lejos de las formas y, a continuación, haga clic en el
relleno del óvalo interior. Presione la tecla Supr del teclado para eliminar el relleno.
26 Capítulo 1
2 El óvalo dispone ahora de un trazo exterior y un trazo interior. Con la herramienta Flecha, haga
clic en el trazo exterior del óvalo para seleccionarlo y, a continuación, haga clic mientras
presiona la tecla Mayús para seleccionar también el trazo interior. Arrastre ligeramente los
trazos hacia la derecha del relleno, como se muestra en la ilustración siguiente.
3 Cada área del color de relleno dentro del área dividida por el trazo representa un segmento
diferenciado al que se puede dar un color por separado. Seleccione un área del relleno de la
forma y utilice el Mezclador de colores para cambiar el color de relleno por una sombra marrón
cuyo valor sea 117 para el rojo, 78 para el verde y 53 para el azul. Si lo desea, repita este paso
para cambiar otra área de relleno a una sombra marrón más clara, como se muestra en la
ilustración siguiente:

4 Seleccione la herramienta Transformación libre. Arrastre el puntero alrededor de las formas del
fondo del óvalo para seleccionar todas las formas y, a continuación, arrastre el selector de
esquina derecho de la guía para ensanchar las formas, como se muestra en la ilustración
siguiente.
5 Arrastre las formas del escenario para que parte de la curva aparezca en la esquina superior
izquierda y al lado derecho del escenario.
Nota: mientras vaya completando el tutorial no olvide guardar el archivo con frecuencia.
28 Capítulo 1
Creación de una máscara
La ilustración que ha creado en la capa Formas sobresale del escenario hasta el área del lienzo.
Aunque el área del lienzo no aparecerá en la película publicada, la ilustración que sobresale del
escenario puede resultar molesta en el entorno de edición. Si bien puede borrar la parte de las
formas que se extiende hasta el lienzo, es mejor aplicar una máscara sobre el escenario para que
sólo permanezca visible el área que se encuentra bajo la máscara (todo el escenario, en este caso).
De este modo, si desea volver a las formas para modificarlas, éstas permanecerán intactas.
1 Con la capa Formas seleccionada, agregue una capa nueva a la línea de tiempo y asígnele el
nombre Máscara.
2 En la caja de herramientas, seleccione la herramienta Rectángulo y dibuje un rectángulo que
vaya de la esquina superior izquierda del escenario a la esquina inferior derecha.
Este rectángulo es la forma de la máscara. Todo lo que se encuentre bajo el rectángulo será
visible.

3 Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) en el nombre de la capa Máscara en la línea de tiempo y elija Máscara en
el menú contextual.
La capa se convierte en una capa de máscara, señalada por un icono de una flecha hacia abajo.
La capa situada inmediatamente debajo está vinculada a la capa Máscara y su contenido se
muestra a través del área rellenada de la máscara. El nombre de capa de máscara aparece con
sangría y su icono cambia a una flecha que apunta a la derecha. La ilustración del lienzo ya no
está visible en el escenario.
Las capas de máscara deben estar bloqueadas para que se muestre el efecto Máscara. Para editar
las formas, puede desbloquear las capas Máscara y Formas. Cuando acabe de editar la
ilustración, bloquee las capas de nuevo para invocar la máscara.
4 Guarde el archivo.
30 Capítulo 1
Interpolar efectos de mapa de bits dentro de un clip de película
Además de crear ilustraciones vectoriales en Flash, puede importar imágenes de mapa de bits, que
utilizan píxeles para visualizar gráficos, en la película Flash y aplicar varios efectos de color. En esta
sección, realizará las tareas siguientes:
• Importar imágenes de mapa de bits.
• Modificar de la compresión de mapa de bits.
• Crear y editar un símbolo de clip de película.
• Interpolar efectos de mapa de bits para que aumenten progresivamente o se desvanezcan las
vistas del coche.
Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o puede ir a
la carpeta de la aplicación Flash MX y abrir Tutorials/FlashIntro/stiletto3.fla. Si utiliza el archivo
stiletto3.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versión
no modificada del archivo original.
Importación de imágenes a la biblioteca

Cuando importa un archivo a Flash, puede importarlo directamente a la biblioteca.
1 En la línea de tiempo, agregue una capa nueva y asígnele el nombre Imágenes.
2 Elija Archivo > Importar a biblioteca.
Al seleccionar Importar a biblioteca en lugar de Importar, las imágenes deben colocarse en el
escenario para que aparezcan.
3 Vaya a la carpeta Tutorials/FlashIntro/Assets, situada en la carpeta de la aplicación Flash MX,
seleccione el archivo view1.png y, a continuación, haga clic mientras mantiene presionada la
tecla Mayús para agregar los archivos view2.png y view3.png a la selección. Haga clic en Abrir.
4 En el cuadro de diálogo Opciones de importación PNG de Fireworks, haga clic en la opción
para importar la imagen como un único mapa de bits alisado y, a continuación, haga clic en
Aceptar.
Las tres imágenes están ahora en la biblioteca.

Modificación de la compresión de mapa de bits
Cuando se importa una imagen, se pueden comprobar y modificar los valores que comprimen la
imagen. Aunque la compresión de imágenes reduce el tamaño de los archivos de la película, puede
afectar a la calidad de la imagen: el objetivo es encontrar un equilibrio entre la configuración de la
compresión y la calidad de la imagen.
1 Si el panel Biblioteca no está abierto, elija Ventana > Biblioteca. Amplíe la ventana, si es
necesario, para ver los tres archivos que ha importado.
2 Haga doble clic en el archivo view1.png.

La compresión JPEG es la selección predeterminada.
3 En el menú emergente Compresión, seleccione Sin pérdida (PNG/GIF) para obtener una
mayor calidad de imagen.
4 Para probar cómo aparece la imagen con la nueva configuración, haga clic en Probar. Si es
necesario, arrastre el coche a la ventana de previsualización. Cuando haya previsualizado la
imagen, haga clic en Aceptar.
32 Capítulo 1
5 Vuelva al panel Biblioteca. Haga doble clic en el archivo view2.png, repita el paso 3 y, a
continuación, haga clic en Aceptar.
6 En el panel Biblioteca, haga doble clic en view3.png, especifique Sin pérdidas (PNG/GIF) y
haga clic en Aceptar.
Creación de un símbolo de clip de película

En el archivo final, tres vistas del coche eléctrico aumentan progresivamente o se desvanecen en la
escena de apertura. Este efecto se consigue creando un símbolo de clip de película que tenga una
línea de tiempo independiente de la línea de tiempo principal. A continuación, interpolará la
transparencia alfa entre tres vistas del coche para crear un efecto de aumento/desvanecimiento
progresivo. Para empezar a crear el efecto primero deberá crear el clip de película.
1 Con la capa Imágenes aún seleccionada en la línea de tiempo, arrastre el objeto view1.png del
panel Biblioteca al escenario y coloque el coche en el área donde el fondo de degradado sea
menos oscuro.
2 Elija Insertar > Convertir en símbolo o presione F8.

3 En el cuadro de diálogo Convertir en símbolo, asigne al símbolo el nombre Animación de
coche. Verifique que Clip de película esté seleccionado y que el cuadro central esté seleccionado
en el indicador Registro y haga clic en Aceptar.
Los mapas de bits, como otros objetos de Flash, disponen de puntos de registro utilizados para
posiciones y transformaciones. Al alinear las tres vistas del coche en el clip de película, éstas
deben alinearse con relación a un punto de registro central.
Punto de registro

Edición de un símbolo
Para ver la línea de tiempo del clip de película, debe estar en modo de edición de símbolos. Puede
abrir el modo de edición de símbolos haciendo doble clic en el símbolo en el escenario o en el
panel Biblioteca.
1 En el escenario, haga doble clic en el coche para abrir el modo de edición de símbolos.
El nombre del símbolo aparece sobre el área del lienzo, junto con un vínculo para Escena 1 que
retrocede a la película principal.
En modo de edición de símbolos, aparecerá la línea de tiempo del clip de película en lugar de la
línea de tiempo de la película principal.
2 Cambie el nombre de Capa 1 por el de Vista 1 Aparición.
3 El coche que se visualiza en el escenario es una imagen de mapa de bits, no un símbolo, dentro
del símbolo Animación de coche. Convierta el coche en un símbolo seleccionándolo en el
escenario y presionando F8.
4 En el cuadro de diálogo Convertir en símbolo, asigne al símbolo el nombre Vista 1 Coche y, a
continuación, verifique que Clip de película esté seleccionado.
5 Verifique que el cuadrado central esté seleccionado en el indicador Registro y haga clic en
Aceptar.
6 Desplácese horizontalmente por la línea de tiempo hasta que llegue al fotograma 105.
Seleccione el fotograma y elija Insertar > Fotograma clave o presione F6 para agregar un
fotograma clave.
El indicador Fotograma actual muestra el fotograma seleccionado.
Fotograma actual
7 Agregue fotogramas clave a los fotogramas 25 y 35.

8 Agregue un fotograma clave al fotograma 34 y, a continuación, haga clic en cualquier lugar de
la capa entre los fotogramas 36 y 104 y presione la tecla Supr del teclado.
Aparece un fotograma clave vacío en el fotograma 35 y el coche no aparece en el escenario a
partir del fotograma 35.
Nota: si se equivoca al agregar fotogramas clave y desea eliminarlos, seleccione uno o más fotogramas y haga
clic con el botón derecho del ratón (Windows) o haga clic mientras mantiene presionada la tecla Control
(Macintosh) y, a continuación, elija Borrar fotograma clave en el menú contextual.
34 Capítulo 1
Interpolación de efectos de mapa de bits
La creación de una interpolación de efecto de mapa de bits es similar a la creación de una
interpolación de movimiento recto: se especifica la configuración de los fotogramas clave de inicio
y de fin y, a continuación, se especifica la interpolación para esos fotogramas y los fotogramas
intermedios. Flash crea la animación de transición desde el primer fotograma clave de la
animación hasta el último.
1 En la línea de tiempo de Animación de coche, seleccione el fotograma 34 y, a continuación,
haga clic en Vista 1 Coche en el escenario para que el inspector de propiedades muestre las
propiedades del clip de película.
2 En el menú emergente Color del inspector de propiedades, seleccione Alfa. En el menú
emergente Valor para alfa, escriba 0% en el cuadro de texto y presione Intro o Retorno o utilice
el deslizador para seleccionar 0%.
Rectángulo de delimitación
3 En la línea de tiempo, seleccione un fotograma entre los fotogramas 25 y 34. En el inspector de

propiedades, seleccione Movimiento en el menú emergente Interpolación.
Una flecha con una línea sólida abarca los fotogramas clave interpolados. Una línea discontinua
entre los fotogramas clave indica que la interpolación no se ha implementado correctamente, lo
que ocurre con frecuencia cuando falta un fotograma clave de inicio o de fin.
Aparición progresiva del segundo coche

Mientras Vista 1 Coche se desvanece, otra vista del coche aparecerá progresivamente.
1 Agregue una nueva capa a la línea de tiempo de Animación de coche y asígnele el nombre Vista
2 Aparición.
2 En la capa Vista 2 Aparición, agregue un fotograma clave al fotograma 25.
3 Con la cabeza lectora aún en el fotograma 25, arrastre el objeto view2.png del panel Biblioteca
al escenario.
4 Si el panel Información no está abierto, elija Ventana > Información. Verifique que el cuadrado
central esté seleccionado en el indicador Registro y, a continuación, escriba 0 en el cuadro de
texto de la coordenada X y 0 en el cuadro de texto de la coordenada Y. Presione Intro o
Retorno.
El inspector de propiedades también dispone de cuadros de texto X e Y; sin embargo, estas
coordenadas se establecen con relación a un punto de registro en la esquina superior izquierda
del clip de película.

5 Seleccione view2.png en el escenario y presione F8 para convertirlo en símbolo. En el cuadro
de diálogo Convertir en símbolo, asigne al símbolo el nombre Vista 2 Coche. Verifique que
Clip de película esté seleccionado y haga clic en Aceptar.
6 En el inspector de propiedades de clips de película, seleccione Alfa en el menú emergente Color

y escriba 0% en el cuadro de texto Valor para alfa.
7 Agregue un fotograma clave al fotograma 35 de la capa Vista 2 Aparición.
8 En el escenario, haga clic dentro del rectángulo de delimitación del coche transparente. En el
inspector de propiedades de clips de película, introduzca 100% en el cuadro de texto Valor
para alfa.
9 En la capa Vista 2 Aparición, seleccione un fotograma entre los fotogramas 25 y 34. En el
inspector de propiedades, seleccione Movimiento en el menú emergente Interpolación.
Desvanecimiento del segundo coche

Ahora creará la animación que hace que el segundo coche se desvanezca.
2 En la capa Vista 2 Aparición, agregue un fotograma clave al fotograma 70 y otro fotograma
clave al fotograma 69.
3 Seleccione el fotograma clave en el fotograma 69 de la capa Vista 2 Aparición. Seleccione Vista
2 Coche en el escenario y utilice el inspector de propiedades para seleccionar una transparencia
alfa del 0%.
5 Haga clic en un fotograma de la capa Vista 2 Aparición entre los fotogramas 71 y 105 y
presione Supr.
36 Capítulo 1
Aparición progresiva del tercer coche
A medida que el segundo coche se desvanece, el tercer coche aparece progresivamente. Ahora
crearemos esta animación.
1 Con la capa Vista 2 Aparición seleccionada, agregue una nueva capa a la línea de tiempo y
asígnele el nombre Vista 3 Aparición.
3 Con el fotograma 60 aún seleccionado, arrastre el objeto view3.png del panel Biblioteca al
escenario. Utilice el panel Información (elija Ventana > Información si el panel está cerrado)
para especificar 0 tanto para la coordenada X como para la coordenada Y, así como para
verificar que el punto de registro esté centrado, como ha hecho para view2.png.
4 Seleccione view3.png en el escenario y presione F8 para convertirlo en un símbolo. En el
cuadro de diálogo Convertir en símbolo, asigne al símbolo el nombre Vista 3 Coche. Verifique
que Clip de película esté seleccionado y haga clic en Aceptar.
5 En el inspector de propiedades, seleccione Alfa en el menú emergente Color y escriba 0% en el

cuadro de texto Valor para alfa.
6 Agregue un fotograma clave al fotograma 70 de la capa Vista 3 Aparición.
7 En el escenario, efectúe su selección dentro del rectángulo de delimitación de Vista 3 Coche.
En el inspector de propiedades, introduzca 100% en el cuadro de texto Valor para alfa.
Desvanecimiento del tercer coche

Ahora creará la animación que hace que el tercer coche se desvanezca.
1 En la capa Vista 3 Aparición, agregue un fotograma clave a los fotogramas 95 y 105.
2 Con el fotograma 105 seleccionado en la capa Vista 3 Aparición, seleccione Vista 3 Coche en el
escenario y utilice el inspector de propiedades para seleccionar una transparencia alfa del 0%.

Aparición progresiva del primer coche
Mientras el tercer coche se desvanece, el primer coche debe aparecer progresivamente para
completar la animación.
2 Con el fotograma 95 aún seleccionado, arrastre el clip de película Vista 1 Coche (no
view1.png) del panel Biblioteca al escenario.
3 En el panel Información, escriba 0 en el cuadro de texto de la coordenada X y 0 en el cuadro de
texto de la coordenada Y. Presione Intro o Retorno.
4 En el inspector de propiedades, seleccione Alfa en el menú emergente Color e introduzca 0%
en el cuadro de texto Valor para alfa.
5 Seleccione el fotograma 104 de la capa Vista 1 Aparición.
6 Haga clic dentro del rectángulo de delimitación del clip de película Vista 1 Coche en el
escenario. En el inspector de propiedades, introduzca 100% en el cuadro de texto Valor para
alfa.
Prueba de la película
En cualquier momento durante la edición podrá probar cómo se reproducirá la película como
archivo SWF.
1 Guarde la película y elija Control > Probar película.
Flash exporta una copia SWF de su película.
En la película SWF, la animación se reproduce de forma automática de forma continua.
2 Cuando termine de ver la película, cierre el archivo SWF haciendo clic en su cuadro de cierre.
En el documento de Flash, elija Edición > Editar documento o haga clic en Escena 1 para
volver a la línea de tiempo principal.
Carga de texto dinámico en tiempo de ejecución

En la lección Adición y edición de texto ha practicado cómo escribir texto directamente en el
escenario. Puede diseñar también la película para que incluya texto de archivos externos. Uno de
los modos más sencillos para hacerlo es con la acción loadVariables para cargar texto en un
campo de texto dinámico en tiempo de ejecución. En el archivo FLA puede especificar atributos
de texto tales como el estilo de fuente, el tamaño y el color para el campo de texto dinámico. Una
ventaja de mantener texto en archivos externos es que todo aquel que desee modificar el texto
puede trabajar con el archivo de texto en lugar de con el archivo FLA.
En esta sección aprenderá a realizar las tareas siguientes:
• Importar y alinear un logotipo.
• Crear un campo de texto dinámico.
38 Capítulo 1
• Utilizar el inspector de propiedades para asignar un nombre de variable de texto.
• Utilizar la acción loadVariables para cargar texto de un archivo externo.
Para completar esta sección, puede continuar trabajando en el archivo mystiletto.fla o puede ir a la
Importación del logotipo

Antes de crear el campo de texto dinámico, importará el logotipo, que es un archivo de
Macromedia FreeHand para el que Flash agrega de forma automática una capa en la línea de
tiempo.
1 En la línea de tiempo, seleccione la capa Imágenes y agregue una nueva capa encima de ésta.
Asigne a la nueva capa el nombre Copia.
2 Con la capa Copia seleccionada, elija Archivo > Importar.
Recordará que ya en otra sección de este tutorial importó objetos a la biblioteca. Ahora
importará el logotipo para que aparezca en el escenario.
3 Busque en la carpeta de la aplicación Flash MX la carpeta Tutorials/FlashIntro/Assets, haga clic
en logo.fh10 y, a continuación, haga clic en Abrir.
4 En el cuadro de diálogo Importar de FreeHand, verifique que Escenas, Capas y Todo estén
seleccionados. Compruebe también que las opciones Incluir capas de fondo y Mantener texto
como bloques estén seleccionadas y, a continuación, haga clic en Aceptar.
5 En la línea de tiempo, Flash ha creado una capa denominada Logo. Arrastre el nombre Logo
para mover la capa debajo de la capa Copia.
6 Puede especificar las coordenadas de escenario para el logotipo. En el inspector de propiedades,
con el logotipo seleccionado, escriba 10 en el cuadro de texto X y 20 en el cuadro de texto Y. A
continuación, presione Intro o Retorno.

7 En la línea de tiempo, bloquee la capa Logo.
Creación de un campo de texto dinámico

Ahora creará un campo de texto dinámico. En lugar de escribir texto en el campo, especificará el
texto de la variable que se carga en el campo en tiempo de ejecución.
1 En la línea de tiempo, seleccione la capa Copia. En la caja de herramientas seleccione la
herramienta Texto. En el inspector de propiedades, seleccione Texto dinámico en el menú
emergente Tipo de texto.
2 En el menú emergente Fuente, seleccione _sans.
_sans es una fuente de dispositivo apropiada para texto de pequeño tamaño en diferentes
plataformas. Para obtener más información acerca de las fuentes de dispositivos, consulte
“Utilización de fuentes de dispositivo (sólo texto horizontal)” en Ayuda > Utilización de Flash.
3 En el cuadro de tamaño escriba 12.
4 Haga clic en Color de texto (relleno) y seleccione amarillo, con el valor hexadecimal FFCC00.
5 En el menú emergente Tipo de línea, seleccione Multilínea, que se utiliza para varias líneas de
texto que se ajustarán.
Menú emergente Tipo de texto
Menú emergente Fuente
Cuadro de tamaño en puntos del texto
Menú emergente Tipo de línea
40 Capítulo 1
6 En el escenario, haga clic debajo del logotipo. Arrastre el puntero para crear un campo de texto
con la anchura del texto del logotipo y la profundidad aproximada de la línea vertical que está
agrupada con el logotipo, como se muestra en la ilustración siguiente.
7 En el inspector de propiedades, escriba textField en el campo de texto Var.
El archivo de texto que se cargará en el campo de texto dinámico (tal como se ve en la

ilustración siguiente) incluye texto que da nombre a la variable: textField=. Cuando se
introduce este nombre en el cuadro de texto Var, se está asignando un nombre a la variable que
la película debe cargar.
Utilización de la acción loadVariables para cargar texto

La acción loadVariables incluye un parámetro para especificar la ruta al texto de la variable. El
texto se encuentra en un archivo denominado copy.txt de la carpeta Tutorials/FlashIntro/Assets.
1 En la línea de tiempo, agregue una capa nueva y asígnele el nombre Acciones. Si es necesario,
arrastre la capa Acciones a la parte superior de la línea de tiempo.
Se recomienda mantener las acciones en la capa superior de una línea de tiempo.
2 Si el panel Acciones no está abierto, elija Ventana > Acciones. Amplíe el panel Acciones, si es
necesario, haciendo clic en la flecha blanca de la barra de título para expandir la ventana o
arrastrando la esquina inferior derecha del panel para ver la caja de herramientas Acciones y el
panel Script.
El tipo de panel Acciones que se muestra depende del objeto al que se está agregando una
acción. Si, por ejemplo, seleccionó un fotograma, el panel Acciones muestra las acciones de los
fotogramas. Si seleccionó un botón, el panel Acciones muestra las acciones de los botones.

3 Haga clic en el triángulo de la esquina superior derecha de la barra de título para mostrar el
menú emergente. Compruebe que se ha seleccionado el modo normal y no el experto.
El modo experto ofrece funciones que son útiles para los usuarios con más experiencia en
ActionScript. En modo normal, los campos de parámetros y controles le guían en la creación
de código de ActionScript.
Botón del menú Opciones
Caja de herramientas Acciones Panel Script
4 En la caja de herramientas Acciones, elija Acciones > Navegador/Red y, a continuación, haga

clic en loadVariables.
El código de ActionScript se agrega al panel Script. Los parámetros de la acción aparecen sobre
el panel Script.
42 Capítulo 1
5 En el cuadro de texto URL, escriba la ruta al archivo de texto: ../assets/copy.txt.
• Guarde la película y, a continuación, elija Control > Probar película.
También puede presionar Ctrl+Intro (Windows) o Comando+Retorno (Macintosh).
Adición de animación y navegación a botones

Cuando se especifica que un símbolo nuevo es un botón, Flash crea la línea de tiempo para los
estados del botón. En la lección Creación de botones, ha aprendido a cambiar el color de relleno
de una forma dentro de un estado de botón. En esta sección, aprenderá más acerca de la
modificación de botones, incluida la animación a un botón.
En concreto, en esta sección aprenderá a realizar las tareas siguientes:
• Importar una biblioteca de otro archivo FLA.
• Alineación de botones.
• Agregar animación a un estado de botón.
• Agregar navegación a un botón para establecer un vínculo con un sitio Web.
• Utilizar la función Habilitar botones simples.
• Adición de navegación con botones.

Importación de la biblioteca de otro archivo FLA
Los botones que utilizará en la película residen en la biblioteca de otro archivo FLA. Para utilizar
los botones, abra como una biblioteca el archivo FLA que contiene los botones.
1 Con el panel Biblioteca abierto, elija Archivo > Abrir como biblioteca. En la carpeta de la
aplicación Flash MX busque la carpeta Tutorials/FlashIntro/Assets y haga doble clic en el botón
buttons.fla.
La biblioteca del archivo buttons.fla aparece junto a la biblioteca del documento.
Alineación de botones
Puede alinear los tres botones a lo largo de los ejes vertical y horizontal con el panel Alinear.
1 En la línea de tiempo, con la capa Copia seleccionada, agregue una capa nueva y asígnele el
nombre Botones. Bloquee todas las capas excepto la capa Botones.
2 En el menú emergente Ver del escenario, situado a la derecha sobre el escenario, introduzca
150% para ampliar la vista del escenario. A continuación, desplácese a la parte inferior derecha
del escenario.
3 Arrastre el botón 1 del panel de la biblioteca buttons.fla y colóquelo debajo de la esquina
inferior derecha del campo de texto dinámico.
Cuando se arrastra un botón del panel de la biblioteca buttons.fla, el botón pasa a formar parte
de la biblioteca del documento.
44 Capítulo 1
4 Arrastre el botón 2 y el botón 3 del panel de la biblioteca buttons.fla y colóquelos a la izquierda
del botón 1. Utilice el espaciado aproximado que se muestra en la ilustración siguiente:
5 Con la herramienta Flecha, arrastre el puntero para seleccionar los tres botones.
6 Para abrir el panel Alinear, elija Ventana > Alinear. Verifique que En escenario no esté
seleccionado (en este momento no alineará los botones con el escenario). Haga clic en Alinear
verticalmente respecto al centro y, a continuación, haga clic en Distribuir horizontalmente
respecto al centro.
Alinear verticalmente respecto al centro
En escenario
Distribuir horizontalmente respecto al centro
Los botones se alinean en el escenario.
Habilitar botones simples

Cuando la función Habilitar botones simples está activa, puede oír los sonidos incluidos con los
botones 2 y 3 y puede ver los colores utilizados para los estados de los botones. No se reproduce el
diseño más complejo de botones, como las animaciones.
1 Elija Control > Habilitar botones simples y, a continuación, sitúese sobre cada botón y haga
clic en él.
El botón derecho, botón 1, no está listo. A continuación, lo modificaremos.
2 Cuando haya probado los botones, elija Control > Habilitar botones simples para anular la
selección de esa función.

Modificación de un estado de botón
Ahora creará una película dentro del estado Sobre del botón 1 y, a continuación, creará una
interpolación de forma en el clip de película. La interpolación de forma crea un efecto que cambia
el color de gris a rojo.
1 En el escenario, haga doble clic en el botón de la derecha, botón 1, para abrir el modo de
edición de símbolos.
2 En la línea de tiempo del botón 1, oculte todas las capas excepto la capa Color. En la capa
Color, seleccione el fotograma clave Sobre.
3 En el escenario, seleccione la forma de óvalo negro para el botón de la derecha. Presione F8
para que el óvalo se convierta en un símbolo. En el cuadro de diálogo Convertir en símbolo,
asigne al símbolo el nombre Animación de botón. Seleccione Clip de película y haga clic en
Aceptar.
4 En el escenario, haga doble clic en el símbolo Animación de botón para abrir el modo de
edición de símbolos.
5 Cambie el nombre de la Capa 1 por el de Cambio de color y agregue un fotograma clave al
fotograma 15.
6 Con la cabeza lectora aún en el fotograma 15, seleccione la forma del botón en el escenario y
elija una sombra brillante roja en el menú emergente Color de relleno en la caja de
herramientas.
7 En la línea de tiempo, haga clic en un fotograma entre los fotogramas 1 y 13. En el inspector de
propiedades, seleccione Forma en el menú emergente Interpolación.
Arrastre la cabeza lectora desde el fotograma 1 al 15 para ver el cambio de color.
Adición de acciones a botones

Cuando el usuario haga clic en el botón y la animación interpolada se reproduzca, haremos que la
cabeza lectora se mueva al final de la línea de tiempo de Animación de botón y se detenga.
ActionScript, el lenguaje de creación de scripts de Flash, se utiliza para controlar el movimiento de
la cabeza lectora en una línea de tiempo.
1 Agregue una nueva capa a la línea de tiempo Animación de botón y asígnele el nombre
Acciones.
2 En la capa Acciones, agregue un fotograma clave al fotograma 15.
3 Si el panel Acciones no está abierto, elija Ventana > Acciones. Amplíe el panel, si es necesario,
para ver la caja de herramientas Acciones y el panel Script.
46 Capítulo 1
4 Con el fotograma 15 de la capa Acciones seleccionado, vaya a la categoría Acciones > Control
de película de la caja de herramientas Acciones y haga doble clic en stop.
La acción stop permite indicar, en este caso, que la cabeza lectora se detenga cuando llegue al
fotograma 15.
En la línea de tiempo de Animación de botón, el fotograma 15 de la capa Acciones muestra

una a pequeña, que indica que se ha adjuntado una acción a ese fotograma.
Adición de navegación con botones

La acción getURL se utiliza para agregar navegación a un botón que se abre en un sitio Web.
1 Elija Edición > Editar documento o haga clic en Escena 1 para volver a la película principal.
2 En el escenario, haga clic en el Botón 1, el botón de la derecha.
3 En el panel Acciones, elija Acciones > Navegador/Red y haga doble clic en getURL.
4 En el cuadro de texto URL, escriba un URL completo, como http://www.macromedia.com.

5 En el menú emergente Ventana, seleccione _blank para que se inicie una nueva ventana de
navegador cuando el usuario haga clic en el Botón 1.
6 Guarde el archivo y, a continuación, elija Control > Probar película. Haga clic en el Botón 1
para ir al sitio Web que ha especificado en el paso 4.
7 Cierre el navegador y el archivo SWF y, a continuación, vuelva al entorno de edición de Flash.
Si lo desea, puede seleccionar el Botón 2 en el escenario y repetir los pasos del 3 al 7 para
vincularlo con otro sitio Web y, a continuación, repetir los pasos para el Botón 3. Cuando haya
agregado todos los vínculos, cierre el panel Acciones.
Agregar flujos y sonidos de eventos

Cuando se está descargando una película de una fuente de Internet, puede empezar a reproducirse
un flujo de sonido inmediatamente después de que se haya descargado el archivo de sonido. Esos
sonidos son especialmente adecuados para sonidos continuos de fondo.
Los sonidos de eventos deben descargarse completamente y cargarse en la RAM antes de
reproducirse; los sonidos de eventos son útiles para los botones. En esta sección aprenderá a
realizar las tareas siguientes:
• Agregar un flujo de sonido a la película.
• Adición de un sonido de evento a un botón.
48 Capítulo 1
Adición de un flujo de sonido

Puede incluir sonido en la película arrastrando el sonido al escenario. Aquí agregará música de
fondo que fluya y se reproduzca un número de veces determinado.
1 En la línea de tiempo, con la capa Botones seleccionada, agregue una capa nueva y asígnele el
nombre Sonidos.
2 Elija Archivo > Importar. En la carpeta de la aplicación Flash MX, vaya a Tutorials/FlashIntro/
Assets y haga clic en track1.mp3. Haga clic mientras mantiene presionada la tecla Ctrl
(Windows) o la tecla Comando (Macintosh) para agregar ping.mp3 a la selección y, a
continuación, haga clic en Abrir.
Los archivos se importan a la biblioteca.
3 Con la capa Sonidos seleccionada, arrastre el sonido track1.mp3 del panel Biblioteca al
escenario.
En la línea de tiempo, una representación pequeña de ondas de sonido aparece en el fotograma.
4 Seleccione el primer fotograma de la capa Sonidos en la línea de tiempo. En el inspector de
propiedades, escriba 999 en el cuadro de texto Bucle para especificar el número de veces que el
sonido puede reproducirse de forma continua.
1 Guarde el archivo y, a continuación, elija Control > Probar película para oír el sonido.
2 Cuando se termine de reproducir la película, haga clic en el cuadro de cierre de la película.
Adición de un sonido de evento a un botón

Además de arrastrar un sonido al escenario, puede seleccionar un sonido en el inspector de
propiedades. A continuación utilizará este método para agregar un sonido de evento a un botón.
Como ha aprendido en la lección Creación de botones, al crear un símbolo de botón, Flash crea
fotogramas para los distintos estados de botón en relación con el puntero del ratón. El fotograma
Sobre, por ejemplo, representa el estado del botón cuando el puntero está sobre el botón. Otros
estados/fotogramas de botón son Reposo, Presionado y Zona activa.
Ahora agregará un sonido de evento a un botón, lo que hace que el sonido se reproduzca mientras
el botón está en estado Sobre. Como está agregando el sonido al símbolo del botón en la
biblioteca y no sólo a una instancia del símbolo, el sonido se reproducirá en cada instancia del
botón.
1 En el panel Biblioteca, haga doble clic en la instancia Botón 1 para abrir el modo de edición de
símbolos.
2 En la línea de tiempo para el Botón 1, agregue una capa nueva y asígnele el nombre Sonido.
3 Seleccione el fotograma Sobre (Fotograma 2) de la capa Sonido y elija Insertar > Fotograma
clave o presione F6.

4 Para definir las propiedades de sonido, haga clic en el fotograma 2 de la capa Sonido. En el
inspector de propiedades, seleccione Ping.mp3 en el menú emergente Sonido. Verifique que
Evento esté seleccionado en el menú emergente Sinc.
5 Guarde el documento y elija Control > Probar película para oír los sonidos del botón. Cuando
haya visto el archivo SWF, cierre su ventana para volver al documento.
Organización del panel Biblioteca

Actualmente dispone de bastantes elementos en el panel Biblioteca. Para organizarlos, localizarlos
fácilmente y establecer categorías según el tipo, creará carpetas y, a continuación, moverá allí los
elementos.
Sugerencia: se recomienda tener organizado el panel Biblioteca de cualquier película que se edite, especialmente
para que otras personas que trabajen en el mismo archivo puedan encontrar fácilmente los elementos.
1 Si el panel Biblioteca no está abierto, seleccione Ventana > Biblioteca.

2 Expanda y amplíe la ventana, según sea necesario, para ver todos los elementos del panel
Biblioteca. En la parte inferior del panel Biblioteca, haga clic en el botón Nueva carpeta cuatro
veces para crear cuatro carpetas nuevas.
50 Capítulo 1
3 Haga doble clic en el nombre de la carpeta sin título 1 y cámbiele el nombre por el de Clips de
película de animación de coche.
4 Cambie el nombre de las otras tres carpetas por el de Sonidos, Ilustraciones y Botones.
5 Arrastre Vista 1 Coche, Vista 2 Coche, Vista 3 Coche y Animación de coche a la carpeta Clips
de película de animación de coche.
6 Arrastre los objetos ping.mp3 y track1.mp3 a la carpeta Sonidos.
7 Arrastre los objetos view1.png, view2.png y view3.png a la carpeta Ilustraciones.
8 Arrastre los objetos Botón 1, Botón 2 y Botón 3 a la carpeta Botones. Con la carpeta Botones
seleccionada, haga clic de nuevo en Nueva carpeta para crear una subcarpeta de la carpeta
Botones.
9 Asigne a la nueva carpeta el nombre Clips de película de botones y, a continuación, arrastre los
elementos restantes de clips de película de botón a esta carpeta.
10 Cierre el panel Biblioteca y guarde el documento.

Prueba del rendimiento de descarga y publicación de la película
Para acabar el documento, utilizará el comando Publicar para crear una película compatible con
Internet cuya extensión sea SWF.
Si utiliza el comando Publicar con las configuraciones predeterminadas, Flash preparará su
archivo para Internet. Flash publicará el archivo SWF y creará un archivo HTML con las
etiquetas necesarias para mostrar el archivo SWF.
Una vez definidas las opciones de Configuración de publicación necesarias, podrá elegir Archivo >
Publicar para exportar al mismo tiempo a todos los formatos seleccionados. Flash almacena la
configuración de publicación que se especifica con el documento, de manera que cada película
puede tener su propia configuración.
En esta sección aprenderá a realizar las tareas siguientes:
• Utilizar el Creador de perfil para ancho de banda para probar el rendimiento de descarga de la
película.
• Publicar la película en un paso.
• Revisar y modificar la configuración de publicación.
• Ver la película en un navegador Web.
Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o puede ir a
la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto7.fla. Si utiliza
el archivo stiletto7.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener
una versión no modificada del archivo original.
Comprobación del rendimiento de descarga de la película

Para que una película Flash se reproduzca correctamente en Internet, se debe descargar un
fotograma antes de que la película alcance ese fotograma. Si la película alcanza un fotograma que
no se ha descargado aún, se pondrá en pausa hasta que lleguen los datos. El ancho de banda
reducido de los archivos Flash favorece las descargas rápidas.
Podrá usar el Creador de perfil del ancho de banda para comprobar su película e identificar dónde
podrían ocurrir las pausas. El Creador de perfil para ancho de banda muestra el volumen de datos
que se envía desde cada fotograma de la película en función de la velocidad definida del módem.
1 Guarde el documento y elija Control > Probar película.
2 En el menú Depuración, seleccione una velocidad de módem para determinar la velocidad de
descarga que Flash simulará.
También puede elegir Personalizar para introducir una velocidad de descarga.
52 Capítulo 1
3 Elija Ver > Creador de perfil para ancho de banda para ver el archivo SWF con un gráfico del
rendimiento de descarga.
La barra sombreada representa el primer y único fotograma de la película principal. Las

películas con varios fotogramas tendrán varias barras sombreadas. La altura de la barra
representa el tamaño del fotograma en bytes y kilobytes. Las barras que se extienden sobre la
línea roja, especialmente si la barra representa un fotograma distinto del primero, indican que
pueden producirse demoras en la reproducción de la película. Puede optimizar la película para
que se descargue con más rapidez. Para obtener detalles, consulte la sección “Optimización de
películas” en Ayuda > Utilización de Flash.
4 Cuando termine de ver el Creador de perfil para ancho de banda, elija Ver > Creador de perfil
para ancho de banda para anular su selección. Cierre la ventana del archivo SWF para regresar
al entorno de edición.
Utilización del comando Publicar

Puede publicar el documento de Flash para que se reproduzca en Internet en un paso.
• Con el documento guardado, elija Archivo > Publicar.
Flash publica su película creando un archivo SWF y posiblemente archivos adicionales basados
en los atributos definidos en el cuadro de diálogo Configuración de publicación. Encontrará
los archivos publicados, de manera predeterminada, en la misma carpeta donde ha guardado el
archivo FLA.

Visualización de las configuraciones de publicación
Mediante el cuadro de diálogo Configuración de publicación es fácil volver a configurar la forma
en que se publica su archivo.
1 Para ver la configuración de sus publicaciones elija Archivo > Configuración de publicación
Flash está configurado de forma predeterminada para crear un archivo HTML de apoyo que
muestre la película Flash.
Cuando selecciona un formato que necesita configuraciones adicionales aparece una nueva
ficha.
2 En la ficha Formatos, verifique que Flash (.swf ) y HTML (.html) estén seleccionados. Haga
clic en la ficha Flash.
De manera predeterminada, la película se publica para Flash Player. En el proceso de
publicación también se aplica la compresión de películas y JPEG.
3 Haga clic en la ficha HTML.
De manera predeterminada, el proceso de publicación crea un documento HTML que inserta
el archivo SWF en una ventana de navegador. La configuración de la ficha HTML del cuadro
de diálogo Configuración de publicación determina el modo en que la película aparece en el
navegador.
54 Capítulo 1
Cambio en la configuración de publicación
De forma predeterminada, Flash da al archivo SWF el mismo nombre que el archivo FLA. Puede
indicar a Flash que cambie el nombre.
1 En la ficha Formatos del cuadro de diálogo Configuración de publicación anule la selección de
Usar nombres predeterminados.
2 En el cuadro de texto HTML (.html), seleccione el texto existente y escriba un nombre nuevo,
como stilettoElectric.html. A continuación, haga clic en Publicar. Cuando se cierre la ventana
de estado Publicación, haga clic en Aceptar en el cuadro de diálogo Configuración de
publicación.
Visualización de la película publicada en un navegador

Puede ver el archivo HTML y la película SWF, que acaba de publicar, en el navegador.
1 Abra el navegador y, a continuación, abra el archivo HTML que ha creado.
De manera predeterminada, el archivo HTML se encuentra en la misma carpeta que el archivo
FLA.
Cuando se abre el archivo HTML, la película SWF se reproduce en el navegador.
2 En el navegador puede utilizar un comando como Ver > Origen de la página o Ver > Código
fuente para ver el código HTML.
Las etiquetas OBJECT y EMBED garantizan que la película SWF se visualice en el navegador.
Para obtener más información acerca de las plantillas HTML de Flash, consulte la sección .
Pasos siguientes
Al completar las ocho secciones del tutorial ha aprendido mucho acerca de la creación de películas
Flash, incluidas las tareas siguientes:
• Analizar una película finalizada.
• Definir propiedades de documentos y crear un degradado.

• Crear y enmascarar ilustraciones vectoriales.
• Interpolar efectos de mapa de bits dentro de un clip de película.
• Cargar texto dinámico.
• Modificar botones y agregar funciones de navegación.
• Agregar flujos y sonidos de eventos.
• Probar y publicar una película.
Puede aprender más acerca de las posibilidades de Flash consultando el Tutorial de introducción a
ActionScript en Ayuda > Tutoriales. Al estar diseñado para personas no familiarizadas con
ActionScript, el tutorial sirve de introducción a los conceptos de creación de scripts permitiendo,
a la vez, crear un rompecabezas con diferentes acciones. Además, puede buscar los artículos y
notas técnicas de Flash MX en el galardonado Centro de soporte de Macromedia. Para acceder al
sitio, vaya a www.macromedia.com y haga clic en Support.
56 Capítulo 1
CAPÍTULO 2
Tutorial de introducción a ActionScript
ActionScript es el lenguaje de creación de scripts de Macromedia Flash MX. El lenguaje de

creación de scripts permite comunicarse con un programa; puede utilizarlo para indicar a Flash
qué debe hacer y para preguntar a Flash qué sucede mientras se reproduce una película. Esta
comunicación bidireccional permite crear películas interactivas. En este tutorial se examinarán las
tareas relacionadas con la creación de un rompecabezas interactivo.
Este tutorial está diseñado para usuarios de Flash que no tienen experiencia en ActionScript y que
desean profundizar en el tema. El usuario debe estar familiarizado con las acciones básicas y debe
saber cómo asignarlas en el panel Acciones. Para sacar el máximo provecho de este tutorial, antes
debe realizar el Tutorial de introducción a Flash MX, en Ayuda > Tutoriales. Asimismo, debe estar
familiarizado con los conceptos presentados en las secciones “Creación de scripts con
ActionScript” y “Creación de interacciones con ActionScript” en Ayuda > Utilización de Flash.
Tardará una hora aproximadamente en completar este tutorial (dependiendo de su experiencia) y
aprenderá a realizar las tareas siguientes:
• Inicialización de la película.
• Almacenamiento y recuperación de información.
• Visualización de información en un cuadro de texto dinámico.
• Especificación de una expresión.
• Control del flujo de la película.
• Creación de comandos y reutilización de código.
• Utilización de un objeto incorporado.
• Prueba de la película.
57
Visualización de una película completa
Antes de empezar a trabajar en su propia película, puede ver una versión completa del tutorial
para hacerse una idea de lo que creará. Además, con el tutorial completo tendrá la oportunidad de
examinar la línea de tiempo, el explorador de películas, el escenario y el panel Acciones, con los
que podrá comprender las prácticas de edición.
1 En la carpeta de la aplicación Flash MX, vaya a Tutorials/ActionScript/Finished. Haga doble
clic en el archivo puzzle.swf para abrir la película completa en el Flash Player independiente.
2 En la película puzzle.swf, haga clic en el botón Aceptar.

Las piezas del rompecabezas se desordenan.
3 Haga clic en todos los botones Mostrar/Ocultar.
Observe que aparecen los diferentes patrones y números de pieza como guía para componer el
rompecabezas.
4 Haga clic en una pieza del rompecabezas y arrástrela al área de la solución.
La pieza se coloca en su sitio.
5 Presione Mayús y haga clic en una pieza del rompecabezas.
El número de la pieza aparece en el círculo situado debajo del área de la solución. Si no puede
continuar, puede hacer coincidir el número de pieza con su ubicación en la guía de números de
pieza.
6 Presione la tecla Alt (Windows) o la tecla Opción (Macintosh) y haga clic en una pieza del
rompecabezas.
La pieza gira en el sentido de las agujas del reloj.
7 Cuando termine de ver el archivo SWF, puede cerrar la ventana o dejarla abierta para que le
sirva de referencia.
58 Capítulo 2
Análisis del archivo puzzle.fla
Resulta útil analizar el archivo FLA completo para determinar cómo lo ha compuesto el autor y
dónde se encuentran los elementos de ActionScript.
1 En Flash, elija Archivo > Abrir. En la carpeta de la aplicación Flash MX, vaya a Tutorials/
ActionScript/Finished y abra el archivo puzzle.fla.
Aparecerá la película del tutorial completa en el entorno de edición.
2 Para ver todo el contenido en el escenario, seleccione Ver > Aumentar y reducir > Mostrar
fotograma.
La película sólo contiene un fotograma, que se muestra en la línea de tiempo principal del
archivo puzzle.fla. Utilizará ActionScript para mostrar y ocultar los diferentes cuadros de
diálogo y las guías de patrones que aparecen en el rompecabezas.
3 Para cambiar el tamaño de la línea de tiempo y del escenario, arrastre la barra que los separa de
arriba a abajo. Desplácese por la línea de tiempo para ver la forma en que se organizan las
capas.
Mueva esta barra para cambiar el

tamaño de la línea de tiempo
4 Para ver los cuadros de diálogo y las guías en el escenario del entorno de edición, haga clic en la
X roja de la columna del ojo, a la derecha del nombre de una capa. Una X (cruz) de color rojo
indica que es una capa oculta.
Puede hacer clic en la columna de bloqueo para bloquear una capa, lo que evita que se
seleccione. Esto es útil si selecciona un elemento del escenario que se encuentra debajo de otro
elemento de otra capa. La columna de contorno, indicada mediante un cuadrado encima de la
columna, activa los contornos de todos los elementos de una capa; esto facilita la visualización
de los bordes de las formas y puede hacer que Flash funcione más rápido.
Tutorial de introducción a ActionScript 59

5 Seleccione el fotograma 1 de la capa de acciones.
El fotograma 1 tiene una a minúscula, que indica que hay acciones asociadas al fotograma.
Para agregar un elemento de ActionScript a una película, debe asignarlo a un botón, a un
fotograma o a un clip de película. Los scripts de fotograma se indican mediante una a
minúscula en la línea de tiempo. Para localizar scripts de botones y de clips de película, lleve a
cabo una de las acciones siguientes:
• Abra el panel Acciones y seleccione un script de la barra de salto (la lista emergente situada
debajo de la barra de título del panel Acciones).
• Seleccione los botones y los clips de película en el escenario con el panel Acciones abierto.
• Utilice los botones de filtrado o el cuadro de texto Buscar para buscar el script en el explorador
de películas.
6 Para ver las acciones, elija Ventana > Acciones.
Se abre el panel Acciones. Si es necesario, expanda el panel para ver las acciones asociadas al
fotograma.
El panel Acciones tiene dos modos: Normal y Experto. En este tutorial se explica cómo agregar
acciones en modo Normal.
Visualización de acciones en el explorador de películas

1 Para localizar todas las acciones de la película, utilice el explorador de películas. Si no está
abierto, seleccione Ventana > Explorador de Películas.
En el explorador de películas, anule la selección de todos los botones de filtrado excepto el
botón ActionScript. Además de las acciones del fotograma 1 de la capa de acciones, las acciones
también se incluyen en cada uno de los botones Mostrar/Ocultar, en los botones de los
diferentes cuadros de diálogo que aparecen y en cada pieza del rompecabezas.
2 Seleccione Archivo > Cerrar para cerrar la película puzzle.fla cuando haya terminado. No
guarde los cambios en el archivo terminado.
60 Capítulo 2
Inicialización de la película
Todas las películas tienen un estado inicial. Esto muestra el aspecto de una película antes de que se
reproduzca y de que otros interactúen con ella. En ocasiones deberá establecer variables y
propiedades de clip de película para establecer este primer estado. Por ejemplo, en el archivo
puzzle.fla, deben ocultarse algunos cuadros de diálogo y guías de patrón en el estado inicial.
Cada clip de película en una película Flash tiene un conjunto de cualidades, o propiedades, que
puede manipular con ActionScript. Cada una de estas propiedades se identifica mediante un
nombre precedido por un carácter de subrayado (_). Por ejemplo, cada clip de película tiene una
propiedad _xscale, una propiedad _yscale y una propiedad _rotation, entre otras.
ActionScript utiliza variables para almacenar información. Por ejemplo, la variable myName puede
contener el valor “Jody Singer”. En la sección “Almacenamiento y recuperación de
información” en la pagina 65 podrá obtener más información sobre las variables.
Las propiedades y las variables se inicializan en el primer fotograma de una película. Puede asignar
una acción de fotograma en la línea de tiempo o puede asociar una acción de objeto a un clip de
película. En la película del rompecabezas, las propiedades de los clips de película de guía de patrón
y de cuadro de diálogo se inicializan en el primer fotograma de la línea de tiempo principal.
Apertura del archivo inicial

Ahora estará listo para crear su propia versión de la película del tutorial.
1 Elija Archivo > Abrir.
2 En la carpeta de la aplicación Flash MX, vaya a Tutorials/ActionScript/My_Puzzle y abra el
archivo mypuzzle.fla.
3 Si recibe un mensaje de sustitución de fuentes, haga clic en Usar opciones predeterminadas.
Verá una película del tutorial completada parcialmente. La película puede parecer completa
porque todos los símbolos se encuentran en su sitio en el escenario. Sin embargo, todavía debe
agregar algunos scripts para hacer que la película sea interactiva.
4 Seleccione Archivo > Guardar como y guarde el archivo con un nombre nuevo consecutivo,
como por ejemplo mypuzzle2.fla, en la misma carpeta que mypuzzle.fla.
Si hace una copia del archivo, usted u otro usuario podrán volver a realizar el tutorial con el
archivo mypuzzle.fla original. Asimismo, si de forma periódica guarda el archivo con un
nombre nuevo consecutivo, puede volver a un archivo anterior si comete un error y no puede
resolverlo en el archivo actual.
Definición de las propiedades del clip de película

La película puzzle.fla tiene tres cuadros de diálogo: uno le avisa cuando se completa el
rompecabezas y los otros dos le preguntan si desea desordenar las piezas del rompecabezas.
Asimismo, hay diferentes patrones y guías que cubren el área de la solución para ayudar a los
usuarios a resolver el rompecabezas. Cada uno de estos cuadros de diálogo, patrones y guías es un
clip de película.

Para iniciar la película, debe ocultar algunos clips de película para que sólo aparezcan el cuadro de
diálogo de inicio y las piezas del rompecabezas. Para ello, establezca las propiedades _visible en
false.
1 Seleccione el fotograma 1 de la capa Acciones. Si el panel Acciones no está abierto, elija

Ventana > Acciones.
El panel Acciones muestra acciones asociadas al fotograma seleccionado. El texto precedido de
las dos barras (//) corresponde a comentarios, que ofrecen información de utilidad para
comprender los scripts.
2 Haga clic en el menú emergente de la esquina superior derecha de la barra de título del panel
Acciones. Verifique que el modo Normal y Ver números de línea estén seleccionados.
3 En el panel Script, haga clic en la línea 4 para seleccionar el código con el comentario //ENTER
code here.
4 En la categoría Acciones > Acciones varias de la caja de herramientas Acciones de la parte

izquierda, haga doble clic en la acción evaluate para agregar una línea de código vacía que
finalice con un punto y coma.
Un punto y coma (;) en una sentencia ActionScript es igual que un punto (.) en una frase
normal.
5 Con el punto de inserción en el cuadro de texto Expresión del panel Acciones, haga clic en el
botón Insertar ruta de destino.
Aparece el cuadro de diálogo Insertar ruta de destino.
6 Verifique que los elementos Puntos, que significa notación con puntos, y Absoluto, que
significa ruta absoluta, estén seleccionados.
En el cuadro de diálogo verá una lista de clips de película que puede seleccionar.
62 Capítulo 2
7 Seleccione el clip de película edges en el árbol de clips de película y, a continuación, haga clic
en Aceptar.
El código siguiente aparece en el cuadro de texto Expresión:
_root.edges
La ruta de destino indica a ActionScript la ubicación de un clip de película dentro de la

estructura general de una película Flash. La propiedad _root hace referencia a la línea de
tiempo principal y el clip de película edges se encuentra en el escenario de la línea de tiempo
principal. Cualquier ruta que empieza por _root se denomina ruta absoluta, puesto que
proporciona la ruta absoluta de un clip de película desde la línea de tiempo principal.
8 Con el punto de inserción situado después de _root.edges, especifique ._visible = false en el
cuadro de texto Expresión.
Esta línea de código hace que el clip de película no sea visible en el escenario.
Puede escribir el código manualmente, o bien elegir elementos de ActionScript en las carpetas
Propiedades y Operadores de la caja de herramientas Acciones.
Si comete un error al especificar una acción y decide que desea eliminarla, seleccione la acción
en el panel Script y haga clic en el botón menos (-) del panel Acciones.
9 En la caja de herramientas Acciones, haga doble clic de nuevo en la acción evaluate para
agregar una línea de código vacía que termine con un punto y coma. Repita los pasos 5 y 6 y
seleccione el clip de película pattern en el cuadro de diálogo Insertar ruta de destino. Repita el
paso 8 y escriba de nuevo ._visible = false en el cuadro de texto Expresión.
10 Siga repitiendo los pasos 4 a 8, seleccione los clips de película image, piecenumbers,
scramblebutton, areYouSure y congrats en el cuadro de diálogo Insertar ruta de destino y
escriba ._visible = false para cada clip de película. Cuando haya terminado, el script tendrá el
aspecto siguiente:

11 Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de
asignación de nombre consecutivo, como por ejemplo mypuzzle3.fla, para poder volver a
versiones anteriores del archivo si es necesario.
Utilización del panel Referencia

Durante la edición, si desea obtener información adicional sobre el elemento de ActionScript que
ha especificado, seleccione la acción en la caja de herramientas Acciones o en el panel Script y, a
continuación, haga clic en el botón Referencia. El panel Referencia, un sistema de ayuda
organizado de forma similar al panel Acciones, muestra información sobre la acción seleccionada.
Revisión de la sintaxis
ActionScript, como el lenguaje escrito, depende de una sintaxis correcta. Si la sintaxis es
incorrecta, la acción no se ejecutará como corresponde. Flash ofrece diversas formas de revisar la
sintaxis.
1 Haga clic en el menú de opciones situado en la esquina superior derecha de la barra de título
del panel Acciones y elija Revisar sintaxis.
Si la sintaxis es correcta, aparecerá un mensaje que indica que el script no contiene errores.
Si la sintaxis es incorrecta, aparecerá un mensaje que indica que el script contiene errores; se
abrirá la ventana Salida y aparecerá información sobre el error.
2 Haga clic en Aceptar para cerrar el mensaje de sintaxis.
64 Capítulo 2
En modo Normal, los errores de sintaxis de ActionScript aparecen resaltados en rojo en el panel
Script. Si mueve el puntero del ratón sobre el error, aparecerá un cuadro de información con el
mensaje de error. Los mensajes de error de sintaxis también aparecen resaltados junto a la parte
inferior del área de estado del panel Acciones.
Asimismo, tal y como se describe en el Tutorial de introducción a Flash MX, puede elegir
Control > Probar película durante la edición para comprobar que la película se reproduce como se
espera.
Almacenamiento y recuperación de información

Para crear una película Flash compleja e interactiva, Flash necesita realizar un seguimiento de la
información y de la actividad del usuario: los botones que se han presionado, un nombre de
usuario, una puntuación o las secciones que ha visitado el usuario. ActionScript utiliza variables
para almacenar información que puede recuperar y volver a utilizar. Puede declarar una variable
en un script en una línea de tiempo y utilizarla en otra línea de tiempo de la misma película. Debe
escribir una ruta de destino a una variable para poder utilizar la variable en un script, del mismo
modo que debe escribir una ruta de destino para utilizar un clip de película en un script.
En el archivo puzzle.fla, ActionScript utiliza la variable dialog para realizar un seguimiento de la
visibilidad de un cuadro de diálogo. Cuando aparece un cuadro de diálogo, la variable dialog se
establece en true; cuando un usuario hace clic en un botón de un cuadro de diálogo, la variable
dialog se establece en false. Esta variable no afecta la visibilidad de los cuadros de diálogo;
simplemente es un contenedor que incluye información que puede utilizar en scripts en la
película. En el archivo puzzle.fla, si dialog se establece en true, el usuario no puede mover una
pieza del rompecabezas.

Cómo declarar una variable y asignarle un valor
Cuando necesita una variable, debe mencionarla o declararla. También debe asignarle un valor.
Puede hacer las dos cosas a la vez o puede declarar una variable en una sentencia y, a continuación,
asignarle un valor en una sentencia posterior.
ActionScript utiliza tres tipos de variables: variables locales, variables globales y variables de línea
de tiempo. Puede utilizar la acción var situada dentro de un bloque de código (indicado mediante
llaves {}) para crear una variable local, que desaparece cuando el bloque de código termina de
ejecutarse. Puede utilizar la acción set variable para crear una variable de línea de tiempo
asociada a la línea de tiempo de un clip de película, que puede utilizarse en cualquier script del
documento. Para obtener más información sobre variables, consulte “El lenguaje ActionScript” en
Ayuda > Utilización de Flash.
El archivo puzzle.fla utiliza la acción var y la acción set variable en función de la situación.
Cuando sólo se necesita una variable en un bloque de código, se utiliza la acción var. La variable
dialog se establece y se asigna mediante la acción set variable.
A continuación declarará y asignará un valor a la variable dialog:

1 Seleccione Archivo > Abrir y elija la última versión guardada del archivo mypuzzle.fla.
Nota: también puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/ActionScript/Finished/
puzzle2.fla. Si utiliza el archivo puzzle2.fla, guarde el archivo con un nuevo nombre en la carpeta My_Puzzle para
mantener una versión no modificada del archivo original.
2 Seleccione el fotograma 1 de la capa de acciones. Si el panel Acciones no está abierto, elija

Ventana > Acciones.
3 En el panel Script del panel Acciones, seleccione la línea 11, que es la última línea del código de
la sección de inicialización. En la caja de herramientas Acciones, elija Acciones > Variables y
haga doble clic en la acción set variable.
4 Escriba dialog en el cuadro de texto Variable.
66 Capítulo 2
5 Escriba true en el cuadro de texto Valor. Seleccione Expresión, a la derecha del cuadro de texto
Valor.
Al seleccionar Expresión indicará a Flash que true no es una cadena literal de caracteres.
En el estado inicial de la película, aparecerá un cuadro de diálogo en el escenario. Por lo tanto,
la variable dialog debe establecerse en true al principio de la película; de lo contrario, un
usuario podrá mover las piezas del rompecabezas antes de que se desordenen.
asignación de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario.
Visualización de información en un cuadro de texto dinámico

Los cuadros de texto dinámicos pueden mostrar texto que cambia en una película Flash. Puede
utilizar el inspector de propiedades para crear un cuadro de texto dinámico y asignarle un nombre
de variable. El valor de la variable aparece en el campo de texto.
En el archivo puzzle.fla, un cuadro de texto dinámico muestra los números de las piezas del
rompecabezas cuando un usuario presiona Mayús y hace clic en una pieza. A continuación
asignará un nombre de variable para el cuadro de texto dinámico.
1 Si es necesario, seleccione Archivo > Abrir y elija la última versión guardada del archivo
mypuzzle.fla.
2 En la línea de tiempo, desbloquee la capa de guía de números de pieza si está bloqueada.

3 Haga doble clic en el clip de película de círculo de número de pieza en el escenario, bajo la
esquina inferior derecha del área de solución del rompecabezas.
Clip de película de círculo de número de pieza
Se abrirá el círculo de número de pieza en modo de edición de símbolos.

4 Seleccione la capa de texto en la línea de tiempo. En el escenario, haga clic en el centro del
círculo de número de pieza para seleccionar el campo de texto.
5 Si el inspector de propiedades no está abierto, seleccione Ventana > Propiedades. En el

inspector de propiedades, seleccione Texto dinámico en el menú emergente Tipo de texto.
6 En el menú emergente Tipo de línea, verifique que Línea única esté seleccionado.
68 Capítulo 2
7 Escriba _root.pieceNumber en el cuadro de texto Var y presione Intro o Retorno.
Todas las variables, al igual que las funciones y los clips de película, deben tener como
referencia sus respectivas rutas. La variable pieceNumber se declara y se actualiza en la función
RotateDisplayOrDrag en la línea de tiempo principal, pero el cuadro de texto de la variable se
encuentra en la línea de tiempo del círculo de número de pieza. Cuando especifica la ruta
completa a la variable pieceNumber, el valor se actualiza y aparece en el campo de texto del
escenario cuando cambia el valor de la variable en la línea de tiempo principal.
8 Elija Edición > Editar documento y haga clic en el botón Atrás o haga clic en Escena 1 para
regresar a la línea de tiempo principal.
asignación de nombre consecutivo para poder volver a versiones anteriores del archivo si es
necesario.
Especificación de una expresión

Si ha sumado dos números en una ecuación matemática, ha utilizado un operador. Un operador es
un símbolo que realiza una tarea, u operación, en uno o varios datos, denominados operandos. Por
ejemplo, en la expresión 2 + 2, el signo más (+) es el operador y cada número es un operando.
Una expresión es cualquier código ActionScript que puede calcularse para generar un solo valor.
Por ejemplo, el código miEdad + 17 es una expresión, porque cuando se ejecuta el código,
ActionScript busca el valor de la variable miEdad, le suma el número 17 y genera un nuevo valor.
Si el valor de miEdad es 47, el nuevo valor sería 64.
Los operadores permiten recoger la información recopilada y almacenada en variables y
manipularla en expresiones para crear o determinar otros valores. Por ejemplo, puede saber que un
usuario ha colocado una pieza del rompecabezas en el área de la solución, pero ¿cómo puede
determinar que la pieza se encuentra en el lugar correcto? Y si la pieza se encuentra en el lugar
correcto, ¿cómo puede determinar que se ha resuelto el rompecabezas? Para examinar expresiones
creadas con operadores aritméticos en este tipo de situaciones, seleccione Fotograma 1 en la línea
de tiempo principal, abra el panel Acciones y observe la función IsItDone en la línea 50.
ActionScript tiene operadores numéricos, o aritméticos, pero también tiene otras clases de
operadores para realizar diferentes tipos de operaciones. Por ejemplo, un operador de
comparación compara el valor para determinar si un operando es mayor, menor o igual que otro,
mientras que un operador lógico calcula un valor true o false, denominado también valor
booleano, para una expresión.

A continuación utilizará un operador, denominado operador lógico NOT, para escribir una
expresión que muestre y oculte el patrón del rompecabezas. El operador lógico NOT,
representado mediante un signo de exclamación (!), calcula el valor booleano opuesto de su
operando. Por ejemplo, la expresión !true da como resultado el valor false.
mypuzzle.fla.
2 Haga clic en el botón para mostrar u ocultar los bordes del patrón del escenario. Si el panel
Acciones no está abierto, elija Ventana > Acciones.
El panel Acciones muestra acciones asociadas al botón.
3 Seleccione la línea de código siguiente en el panel Script:
// ENTER code here
4 En la caja de herramientas Acciones, elija Acciones > Acciones varias y arrastre la acción
evaluate al panel Script.
Cuando agregue la acción, se colocará en un código denominado controlador de eventos. El
código tiene el aspecto siguiente:
on (release) {
;
}
5 En la caja de herramientas Acciones, haga doble clic en la acción evaluate para agregar otra
línea de código vacía.
El código tiene ahora el aspecto siguiente:
on (release) {
;
;
}
6 Seleccione la primera línea vacía (la línea con el primer punto y coma) y coloque el punto de
inserción en el cuadro de texto Expresión.
A continuación especificará un código que ocultará el clip de película pattern; un usuario verá
el clip de película pattern o el clip de película edges, pero no los dos.
7 Escriba _root.pattern._visible = false en el cuadro de texto Expresión.
Puede escribir la ruta directamente en el cuadro de texto Expresión, o bien utilizar el cuadro de
diálogo Insertar ruta de destino para seleccionar el clip de película pattern. Si utiliza el cuadro
de diálogo Insertar ruta de destino, seleccione Puntos y Absoluto.
Nota: a medida que especifica parámetros y propiedades en modo normal, es posible que observe consejos de
códigos (información que aparece para sugerir la sintaxis completa de una acción); puede hacer clic en un
consejo de código para especificar la sintaxis. Para obtener más información sobre los consejos de códigos y
sobre cómo activarlos y desactivarlos, consulte la sección “Utilización de los consejos de código” en Ayuda >
Utilización de Flash.
70 Capítulo 2
8 Seleccione la segunda línea vacía y coloque el punto de inserción en el cuadro de texto
Expresión.
9 Escriba _root.edges._visible = ! en el cuadro de texto Expresión.

Pase por alto el mensaje de error de sintaxis que aparece.
El signo de exclamación (!) es un operador lógico NOT. Además de escribir el texto en el
cuadro de texto Expresión, puede agregarlo al cuadro de texto de la caja de herramientas
Acciones seleccionando Operadores > Operadores lógicos y haciendo doble clic en el signo de
exclamación.
10 Escriba de nuevo _root.edges._visible en el cuadro de texto Expresión después del operador.
El código deberá ser similar al siguiente:
on (release){
_root.pattern._visible = false;
_root.edges._visible = !_root.edges._visible;
}
La primera línea de código del controlador de eventos establece la visibilidad del clip de
película pattern en false. La segunda línea de código establece la visibilidad del clip de
película edges en el estado contrario al actual. Con esto se crea una alternación que muestra u
oculta el clip de película.
Control del flujo de la película

Sin ActionScript, la película se reproduce desde el primer fotograma al último y puede volver a
repetirse a partir del primer fotograma o bien detenerse. Puede utilizar ActionScript para
controlar la progresión de una película de forma más precisa, además de proporcionarle más
control al usuario. Por ejemplo, puede establecer una acción en el fotograma 5 que detenga la
película hasta que un usuario presione el botón de reproducción. Este es un sencillo ejemplo sobre
cómo controlar el flujo de una película.

Puede utilizar las acciones if, else y else if (denominadas también sentencias) para crear un
flujo de película más complejo denominado lógica. Estas tres acciones llevan a cabo las tareas
siguientes:
• La acción if permite a Flash comprobar una condición en la película y ejecutar determinadas
acciones si se produce dicha condición.
• La sentencia else indica a Flash que ejecute un conjunto de acciones diferentes si no se
produce la condición if.
• La sentencia else if permite a Flash comprobar otra condición antes de ejecutar un conjunto
de acciones diferentes.
Especificación de una sentencia condicional

Ya ha utilizado un operador para mostrar y ocultar un clip de película. A continuación utilizará
una sentencia if para crear una lógica que muestre y oculte el clip de película piece numbers. En
este ejemplo se utiliza con fines didácticos un elemento ActionScript diferente para obtener el
mismo resultado.
mypuzzle.fla.
2 En el escenario, haga clic en el botón para mostrar u ocultar la matriz de números de pieza. Si
el panel Acciones no está abierto, elija Ventana > Acciones. En la caja de herramientas
Acciones, elija la categoría Acciones > Condiciones/Bucles.
3 Haga doble clic en la acción if. En código siguiente aparece en el panel Acciones:
on (release) {
if (<not set yet>) {
}
}
4 Con la línea de código que contiene la acción if seleccionada, haga doble clic en la acción
else en la caja de herramientas Acciones.
El código es similar al siguiente:

on (release) {
} else {
}
}
5 Seleccione la línea 3, que empieza por if y, con el punto de inserción en el cuadro de texto
Condición, haga clic en el botón Insertar ruta de destino. Seleccione el clip de película
piecenumbers, Puntos, Absoluto y haga clic en Aceptar. El código siguiente aparece en el
cuadro de texto Condición:
_root.piecenumbers
6 Con el punto de inserción en el cuadro de texto Condición, especifique ._visible después de

_root.piecenumbers.
7 En la categoría Acciones > Acciones varias en la caja de herramientas Acciones, haga doble clic
en la acción evaluate para agregar una línea de código vacía.
72 Capítulo 2
8 Especifique _root.piecenumbers._visible = false en el cuadro de texto Expresión.
Puede utilizar el botón Insertar ruta de destino o puede escribir el código manualmente. El
código tendrá el aspecto siguiente:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
}
}
Cuando se reproduce la película, Flash comprueba la expresión comprendida ente los

paréntesis de condición. La expresión debe ser igual a uno de los valores booleanos true o
false. En este ejemplo se utiliza la condición de la acción if para comprobar si el clip de
película piecenumbers está visible en el escenario. Si la propiedad _visible es true,
ActionScript ejecuta el código entre llaves y establece la propiedad _visible en false, con lo
que se oculta el clip de película en el escenario.
9 En el panel Script, seleccione la línea de código con la acción else y haga doble clic en la
acción evaluate.
10 Especifique _root.piecenumbers._visible = true en el cuadro de texto Expresión.
El código ActionScript final es similar al siguiente:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
_root.piecenumbers._visible = true;
}
}
asignación de nombre consecutivo para poder volver a versiones anteriores del archivo si es
necesario.
Creación de comandos y reutilización de código

ActionScript contiene acciones que permiten controlar una película de maneras específicas. Por
ejemplo, la acción play mueve la cabeza lectora hacia delante en la línea de tiempo y la acción
loadMovie carga otra película Flash en Flash Player. Cada una de estas acciones indican a Flash
que realice una determinada tarea. Puede crear sus propios comandos en sus películas. Por
ejemplo, en el archivo puzzle.fla, necesita un comando que desordene las piezas del rompecabezas.
Para saber cómo escribir este comando con ActionScript, debe determinar los pasos necesarios
para desordenar las piezas del rompecabezas y determinar los elementos de ActionScript que
pueden utilizarse para ello.
Primero, las piezas deben esparcirse en una determinada área del escenario; cada clip de película
tiene una propiedad _x e _y para establecer la posición y una propiedad _rotation para
establecer su rotación. Para que las piezas se dispongan y giren de forma aleatoria, debe generar un
número aleatorio para utilizarlo en una expresión. ActionScript incorpora un objeto Math con el
método random que puede utilizar para este fin.

En ActionScript, un comando se denomina función. Una función es un script que puede utilizar
una y otra vez en una película para realizar una determinada tarea. Por ejemplo, en el archivo
puzzle.fla, cada vez que un usuario haga clic en el botón para desordenar piezas, se ejecutará, o se
llamará a, la función Scramble. Esta función coloca las piezas en posiciones aleatorias en el
escenario. En lugar de volver a escribir el mismo script en cada uno de los dos botones, la función
se escribe, o se declara, una vez y se llama con cada botón. Para examinar la función Scramble,
seleccione Fotograma 1 en la línea de tiempo principal y abra el panel Acciones. Desplácese por el
panel Script hasta que vea la función Scramble.
Puede concebir una función como una máquina que trabaja para usted. Esta máquina puede
generar diferentes resultados dependiendo de los elementos incluidos. Por ejemplo, si coloca
plátanos en una licuadora, obtendrá un batido de plátano y no de melocotón. Los elementos que
se pasan a una función se denominan parámetros o argumentos. Los parámetros se incluyen entre
los paréntesis que siguen a la función. Por ejemplo, en la función
RotateDisplayOrDrag(whichPiece) se pasa el nombre de una pieza del rompecabezas y sólo se
aplica a dicha pieza. Los parámetros permiten volver a utilizar funciones en muchas situaciones
diferentes.
Las funciones suelen declararse en el primer fotograma de la película. En los archivos puzzle.fla,
las funciones se declaran en el fotograma 1.
Especificación de una función

A continuación declarará una función que girará, mostrará o arrastrará una pieza del
rompecabezas cuando el usuario haga clic en ésta.
mypuzzle.fla.
2 Seleccione el primer fotograma de la capa de acciones y abra el panel Acciones si no está

abierto.
3 Desplácese por el panel Script y seleccione la línea 31. Se resaltará la línea comentada siguiente:
// ENTER RotateDisplayOrDrag() function here
4 En la categoría Acciones > Funciones definidas por el usuario en la caja de herramientas

Acciones, haga doble clic en la acción function.
Escriba RotateDisplayOrDrag en el cuadro de texto Nombre. Escriba whichPiece en el cuadro
de texto Parámetros. El código de la línea 32 será similar al siguiente:
function RotateDisplayOrDrag (whichPiece) {
}
Se llamará al parámetro whichPiece (que identifica la pieza seleccionada del rompecabezas)

tres veces en el cuerpo de la función. Cuando se llama a la función, el parámetro pasado se
sustituye por whichPiece en cada sentencia.
74 Capítulo 2
5 En la categoría Acciones > Condiciones/Bucles en la caja de herramientas Acciones, haga doble
clic en la acción if, la acción else if y la acción else.
Nota: también puede seleccionar las acciones en el menú emergente Más (+).
El código tiene el aspecto siguiente:

} else if (<not set yet>) {
} else {
}
}
Con este código se crea la estructura lógica de la función. Debe proporcionar las condiciones
que deben comprobarse en cada sentencia if. Asimismo, en el código debe facilitar cada
conjunto de datos entre llaves que se ejecutará cuando se cumplan las condiciones.
6 Seleccione la línea de código que contiene la sentencia if. Especifique Key.isDown(18) en el
cuadro de texto Condición.
Key es un objeto de ActionScript incorporado, que también encontrará en la categoría Objetos
> Película > Tecla > Métodos. Key permite determinar la tecla que un usuario ha presionado en
el teclado. El número 18 es la representación numérica de las teclas Alt (Windows) y Opción
(Macintosh). En esta línea de código se comprueba si un usuario ha presionado estas teclas.
Para obtener más información sobre los objetos incorporados, consulte la sección “Utilización
de un objeto incorporado” en la pagina 78.
en la acción evaluate para especificar una nueva línea de código. Escriba
_root[whichPiece]._rotation += 90 en el cuadro de texto Expresión, sin espacios entre los
signos + y =.
Con esta línea de código la pieza seleccionada gira 90° si el usuario presiona la tecla Alt
(Windows) u Opción (Macintosh). Los corchetes permiten recuperar dinámicamente el valor
de un nombre de instancia. Para obtener más información, consulte “Operadores de punto y
de acceso a una matriz” en Ayuda > Utilización de Flash.
8 Seleccione la línea de código que contiene la sentencia else if. Escriba
Key.isDown(Key.SHIFT) en el cuadro de texto Condición.
Con esta línea de código se comprueba si un usuario ha presionado la tecla Mayús.
en la acción evaluate para especificar una nueva línea de código. Escriba pieceNumber =
whichPiece.slice(5) en el cuadro de texto Expresión.
Con esta línea de código se visualiza el número de pieza en el cuadro de texto en el escenario
cuando el usuario presiona la tecla Mayús. El método slice del objeto String elimina un
número de caracteres especificado (en este caso, 5) de la instancia del número de pieza, de
modo que sólo aparece el número de la pieza. De hecho, el método elimina los cinco primeros
caracteres y, a continuación, asigna el número resultante a la variable pieceNumber, que a su
vez se asigna al campo de texto del escenario.
10 Seleccione la línea de código que contiene la sentencia else. En la categoría Acciones >
Control de clip de película de la caja de herramientas Acciones, haga doble clic en la acción
startDrag.

11 Escriba _root[whichPiece] en el cuadro de texto Destino y haga clic en Expresión.
12 Seleccione Restringir a rectángulo. Escriba 20 en los cuadros de texto de la izquierda y de la
parte superior. En los cuadros de texto de la derecha y de la parte inferior, escriba 780 y 580,
respectivamente.
La palabra false del script indica que no se ha especificado lockCenter (que indica que la
pieza del rompecabezas siempre se colocará en el centro del puntero del ratón al hacer clic). Los
números 20, 20, 780 y 580 especifican las coordenadas izquierda, superior, derecha e inferior
del cuadro de texto en el escenario.
Cuando un usuario hace clic en una pieza, se llama a la siguiente función que ha escrito. La
función utiliza el objeto Key para determinar si se presiona la tecla Mayús, Alt u Opción al
hacer clic en una pieza. Si se presiona la tecla Mayús al hacer clic en una pieza, el cuadro de
texto dinámico muestra el número de la pieza del rompecabezas. Si la tecla presionada es Alt
(Windows) u Opción (Macintosh), la pieza del rompecabezas gira 90°. Si no se presionan las
teclas Mayús, Alt u Opción, el usuario puede arrastrar la pieza. El código deberá ser similar al
siguiente:
if (Key.isDown(18)) {
_root[whichPiece]._rotation += 90;
} else if (Key.isDown(Key.SHIFT)) {
pieceNumber = whichPiece.slice(5);
} else {
startDrag(_root[whichPiece],false, 20, 20, 780, 580);
}
}
Llamada a una función

Puede llamar a funciones en cualquier fotograma de una película cuando necesite completar una
tarea. Debe utilizar una ruta de destino para llamar a una función, del mismo modo que debe
utilizar una ruta para acceder a una variable o a un clip de película. Todas las funciones de la
película puzzle.fla se declaran en el primer fotograma de la capa de acciones, en la línea de tiempo
principal, de modo que la ruta absoluta de cada una de ellas empieza por _root.
A continuación llamará a la función que desordena las piezas del rompecabezas en el escenario.
1 En la línea de tiempo, oculte las capas correspondientes al cuadro de diálogo para desordenar
las piezas y al cuadro de inicio, si no están ocultas. Seleccione la capa del cuadro de diálogo de
felicitaciones.
76 Capítulo 2
2 En el escenario, haga doble clic en el símbolo del cuadro de felicitaciones.
Cuadro de símbolo
felicitaciones
3 En el escenario, seleccione el botón Aceptar. Si el panel Acciones no está abierto, elija Ventana
> Acciones.
4 En la categoría Acciones > Funciones definidas por el usuario de la caja de herramientas
Acciones, haga doble clic en la acción call function.
5 Con el punto de inserción en el cuadro de texto Objeto del panel Acciones, haga clic en el
botón Insertar ruta de destino. Verifique que los elementos Puntos y Absoluto estén
seleccionados. Seleccione _root y haga clic en Aceptar.
6 Escriba Scramble en el cuadro de texto Método.
La función Scramble no requiere parámetros; puede dejar en blanco el cuadro de texto
Parámetros.
El código tiene ahora el aspecto siguiente:
on (release) {
_root.Scramble();
}
Este es el ActionScript que llama a la función. También deberá agregar líneas de código
adicionales que se encuentren dentro del controlador on(release). En los pasos siguientes
verá cómo.
Con la línea de código _root.Scramble... seleccionada en el panel Script, haga doble clic en
evaluate en la categoría Acciones > Acciones varias en la caja de herramientas Acciones. Escriba
_root.scramblebutton._visible = true en el cuadro de texto Expresión.

7 Haga doble clic de nuevo en la acción evaluate para agregar otra línea en blanco. Escriba
_root.dialog = false en el cuadro de texto Expresión.
8 En la categoría Acciones > Acciones varias de la caja de herramientas Acciones, haga doble clic
en la acción evaluate.
9 En la categoría Propiedades de la caja de herramientas Acciones, haga doble clic en _visible.
Con el punto de inserción detrás de _visible, escriba = 0 en el cuadro de texto Expresión.
Con este código se especifica que el cuadro de diálogo no estará visible después de que el
usuario haga clic en el botón Aceptar.
El código final es similar al siguiente:
on (release) {
_root.Scramble();
_root.scramblebutton._visible = true;
_root.dialog = false;
_visible = 0
}
10 Lleve a cabo una de las acciones siguientes para regresar a la línea de tiempo principal:
• Haga clic en Escena 1.
Utilización de un objeto incorporado

ActionScript tiene variables que permiten almacenar información, funciones que permiten crear
comandos especiales y volver a utilizar código, acciones que permiten controlar el flujo de una
película y clips de película con propiedades que puede modificar.
ActionScript también tiene otro tipo de elementos denominados objetos incorporados. Los objetos
permiten agrupar la información para utilizarla en un script. Asimismo, pueden tener
propiedades, métodos (que son como funciones) y constantes (por ejemplo, el valor numérico de
Pi).
En la función RotateDisplayOrDrag creada en la sección “Creación de comandos y reutilización
de código” en la pagina 73, se utilizó el objeto Key para determinar la última tecla que el usuario
presionó en el teclado. El objeto Key está incorporado en ActionScript para permitir acceder a
información sobre el teclado.
Otro objeto de ActionScript es el objeto MovieClip. El objeto MovieClip es un conjunto de
métodos que puede utilizar para manipular clips de película, los elementos fundamentales y con
más posibilidades de Flash. Para obtener más información sobre las características especiales del
objeto MovieClip y sobre la utilización de clips de película, consulte “Trabajo con clips de película
y botones” en Ayuda > Utilización de Flash.
78 Capítulo 2
A continuación utilizará el método onPress del objeto MovieClip para comprobar si el puntero
de ratón toca una pieza del rompecabezas.
mypuzzle.fla.
2 Piece actions es un clip de película anidado en cada instancia de una pieza del rompecabezas.
Para seleccionar el clip de película Piece actions de la jerarquía de paneles de biblioteca, haga
clic en el botón Editar símbolos en la esquina inferior derecha de la línea de tiempo y elija
Varios > Piece actions.
El clip de película Piece actions se abre en modo de edición de símbolos.

3 En la línea de tiempo de Piece actions, seleccione Fotograma 1 de la capa de acciones.
4 Si el panel Acciones no está abierto, elija Ventana > Acciones. En el panel Script, seleccione la
línea 3 con la línea de código siguiente:
// ENTER code here

5 En la categoría Objetos > Película > Clip de película > Eventos de la caja de herramientas
Acciones, haga doble clic en la acción onPress.
El método onPress es un tipo de acción especial denominado controlador de eventos, o
simplemente evento. Un evento permite escribir una función que se ejecuta cuando se produce
un determinado evento. Algunos tipos de eventos son: presionar el botón del ratón, ingresar la
cabeza lectora en un fotograma o cargar un clip de película.
En este procedimiento, el código entre llaves que sigue a onPress se ejecuta cuando un usuario
presiona el botón del ratón en la película.
6 Escriba _parent en el cuadro de texto Objeto.
Puesto que Piece actions se encuentra anidado dentro del clip de película, _parent especifica
que onPress debe ejecutar el código de un nivel superior, al mismo nivel que la pieza del
rompecabezas.
7 En la categoría Acciones > Condiciones/Bucles de la caja de herramientas Acciones, haga doble
clic en la acción if.
8 Escriba !_root.dialog en el cuadro de texto Condición. El código que aparece es el siguiente:
_parent.onPress = function(){
if (!_root.dialog) {
{
};
El código que se ha agregado en este paso comprueba si el valor de la variable llamada dialog
es verdadero (visible) o falso (no visible). Si el valor es true, no se ejecutará el siguiente script,
que debería girar y arrastrar la pieza del rompecabezas. Si el valor de la variable es false, se
ejecutará el siguiente script. Si se visualiza el cuadro de diálogo, los usuarios no podrán girar ni
arrastrar una pieza ni ver su número.
9 En la caja de herramientas Acciones, haga doble clic en la acción evaluate en la categoría
Acciones > Acciones varias para agregarla entre las llaves de la sentencia if.
10 Escriba _root.RotateDisplayOrDrag(_parent._name) en el cuadro de texto Expresión.
_name es la propiedad del nombre de la instancia de pieza del rompecabezas en la que el usuario
hace clic.
El código final es similar al siguiente:
_parent.onPress = function(){
if (!_root.dialog) {
_root.RotateDisplayOrDrag(_parent._name);
}
};
11 Lleve a cabo una de las acciones siguientes para regresar a la línea de tiempo principal:
• Haga clic en Escena 1.
80 Capítulo 2
Realizar pruebas con antelación y de forma regular es una máxima para los desarrolladores de
contenido Web. Cuanto antes pruebe la película, más fácil será determinar la causa de resultados
inesperados. Es conveniente guardar varias versiones del archivo con nombres consecutivos (por
ejemplo, mypuzzle1.fla, mypuzzle2.fla, etcétera), tal como ha hecho con este tutorial. De este
modo, el archivo con el número más alto siempre será el más nuevo y será fácil volver a una
versión anterior.
Tal como se describe en el tutorial de introducción a Flash MX, la herramienta de edición Flash
incluye una versión de Flash Player que permite probar la película en cualquier momento del
proceso de edición seleccionando Control > Probar película. Esta versión de Flash Player tiene
varios comandos y herramientas de ayuda para solucionar problemas relacionados con la película.
La causa más habitual de estos resultados inesperados en una película Flash es una ruta incorrecta
de una variable, función, objeto o clip de película. Esto puede hacer que una variable contenga el
valor incorrecto, que no se llame a una función o que el clip de película no se reproduzca
correctamente.
La acción trace permite escribir notas y expresiones en los scripts cuyo resultado se envía a una
ventana llamada ventana Salida.
A continuación, agregará una acción trace para probar si se ha llamado a una función
correctamente.
Nota: Flash también incluye un depurador, que permite examinar los valores de las variables globales y locales,
incluso cuando cambian a medida que se reproduce la película. Asimismo, con el depurador puede utilizar puntos
de corte para detener la película y probar ActionScript línea por línea. Para obtener más información, consulte
“Utilización del depurador” en Ayuda > Utilización de Flash.
1 Seleccione Archivo > Abrir y elija la última versión guardada del archivo mypuzzle.fla.
Cuando el usuario hace clic en el botón Aceptar en la película SWF, las piezas del rompecabezas
se desordenan. Puede utilizar una acción trace para probar si se llama a la función Scramble.
2 En la capa de acciones en la línea de tiempo, seleccione Fotograma 1 y abra el panel Acciones.
3 En el panel Script, desplácese hasta la línea 18, la línea de comentario con el texto // enter
trace action here, y selecciónela.
4 En la caja de herramientas Acciones, haga doble clic en la acción trace en la categoría
Acciones > Acciones varias.
5 Escriba Se ha llamado a la función Scramble en el cuadro de texto del mensaje.
Este mensaje se coloca dentro de la función Scramble.
6 Guarde el documento y, a continuación, seleccione Control > Probar película.

7 Haga clic en el botón Aceptar de la película SWF.
Aparece la ventana Salida que rastrea los eventos de la película. Amplíe la ventana como
convenga para leer los mensajes.
El mensaje “Se ha llamado a la función Scramble” aparecerá en la ventana Salida.
Si el mensaje no aparece, el paso siguiente consistirá en determinar el motivo. El motivo más

probable es que haya especificado una ruta incorrecta a la función.
8 Cierre la ventana Salida y el archivo SWF y regrese al modo de edición.
Gracias a estos ejercicios ha aprendido mucho sobre ActionScript.
82 Capítulo 2
Pasos siguientes
Con este tutorial ha adquirido un gran conocimiento en muy poco tiempo. Ha aprendido a
utilizar ActionScript para establecer un punto de inicio de una película Flash, a crear comandos y
volver a utilizar código para que vuelvan a producirse las acciones y a controlar de forma precisa el
flujo de la película. Mediante las variables y expresiones de ActionScript, ahora sabe cómo realizar
un seguimiento de la actividad del usuario en la película y cómo mostrar a los usuarios el
contenido que va cambiando. Y, finalmente, ha aprendido a probar la película.
Para seguir aprendiendo más aspectos de ActionScript, consulte el diccionario en línea de
ActionScript en el menú Ayuda y los artículos del Centro de soporte de Flash. En la carpeta
Samples de la carpeta de la aplicación Flash MX también puede abrir una versión avanzada de la
película puzzle.fla y descomponer el código de ActionScript utilizado para crear un cronómetro y
una pieza animada del rompecabezas.

84 Capítulo 2
CAPÍTULO 3
Tutorial de introducción a los componentes
Se pueden utilizar los componentes de interfaz de Macromedia Flash para agregar rápida y
fácilmente elementos sencillos de la interfaz del usuario al documento de Flash.
Este tutorial está diseñado para ofrecer una introducción sobre los componentes a los usuarios
principiantes e intermedios de Flash y para mostrar cómo se pueden utilizar para crear fácilmente
una aplicación simple. Antes de iniciar este tutorial, debe finalizar los tutoriales Introducción a
Flash MX e Introducción a ActionScript, a los que se puede acceder seleccionando Ayuda >
Tutoriales.
Una vez finalizado este tutorial, sabrá cómo realizar las tareas siguientes:
• Agregar componentes a un documento de Flash.
• Configuración de los componentes.
• Agregar ActionScript para que los componentes funcionen.
Tipos de componente
Flash MX proporciona los componentes siguientes:
Nombre Acción
RadioButton Representa una sola opción de un grupo de opciones que se excluyen

entre sí.
CheckBox Representa una sola opción.
PushButton Lleva a cabo un comando cuando el usuario hace clic o presiona la tecla
Intro o Retorno.
ComboBox Muestra una lista de opciones.
85
Nombre Acción
ListBox Muestra una lista de opciones.
ScrollPane Proporciona un panel de ventana desplazable para ver clips de película.
ScrollBar Agrega una barra de desplazamiento a un campo de texto.
Utilización de los componentes

A continuación se presentan algunas maneras en las que se pueden utilizar los componentes:
Formulario Web Diseñe un formulario que solicite la dirección, el teléfono, la dirección de
correo electrónico y otros datos personales del usuario. A continuación, dicho formulario valida
los datos antes de enviarlos a un servidor.
Cree su coche Cree un formulario Web que permita a los usuarios encargar un coche
seleccionando varias opciones gráficas en lugar de introducir la información. Los campos se
generan a partir de las interacciones gráficas.
Cuestionario Cree un cuestionario con varias preguntas y partes que indique instantáneamente
los resultados y represente gráficamente los datos resultantes del cuestionario.
Álbum de fotos Cree un álbum de fotos personal que utilice un directorio de imágenes y
miniaturas y las ajuste con los elementos de navegación y la interfaz de Flash.
Calculadora de préstamos Diseñe una calculadora de amortización en línea que calcule pagos
de préstamos.
Plantilla de presentación para InternetCree una plantilla para presentaciones de transparencias
con elementos de navegación simples predefinidos y un diseño para imágenes y texto.
Visualización del formulario finalizado

Se puede navegar por los componentes de un formulario realizando los procedimientos siguientes:
• Haga clic en el componente para seleccionarlo.
• Presione el tabulador para avanzar; presione Mayús+Tabulador para retroceder.
• Utilice las teclas de dirección para navegar por los elementos de menú.
1 Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra Tutorials/Components/
Finished/sweepstakes.swf. Ésta es la película finalizada.
2 Utilice las técnicas de navegación descritas anteriormente para probar cada uno de los botones
y cuadros del formulario.
3 Abra sweepstakes.fla. Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra
Tutorials/Components/Finished/sweepstakes.swf. Éste es el documento de Flash que ha
generado la película. Se incluyen dos fotogramas clave en la línea de tiempo.
4 Examine la página 1. Contiene la casilla de verificación, el cuadro combinado y los botones de
comando que se utilizan para recopilar información. También tiene dos campos de
introducción de texto para el nombre y la dirección de correo electrónico del usuario.
5 Examine la página 2. Es la página de resultados y contiene varios cuadros de texto dinámico
para mostrar los resultados de la información recopilada en la página 1. Para ahorrar tiempo,
éstos ya se han creado.
86 Capítulo 3
Creación de un formulario
En este tutorial, utilizará componentes para crear un formulario simple de dos páginas para
participar en un sorteo de un coche eléctrico Stiletto. La primera página sirve para recopilar
información y la segunda para ver los resultados. Siga estos tres pasos para completar el
formulario:
• Agregue componentes al formulario.
• Configure los componentes.
• Agregue los comandos ActionScript al documento para que los componentes funcionen.
Para su mayor comodidad, se ha incluido el fondo, los campos de texto y los gráficos para el
formulario. Agregue y configure componentes y comandos ActionScript para que el formulario
sea interactivo.
Adición de componentes
El primer paso consiste en agregar componentes al escenario y colocarlos en el formulario.
Agregue una casilla de verificación, un cuadro combinado y un botón de comando a la primera
página del formulario. Agregue también un botón de comando a la segunda página.
Para agregar componentes a un documento, se pueden arrastrar elementos desde el panel
Componentes al escenario, o bien hacer doble clic en los componentes del panel Componentes
para colocarlos en el centro del escenario. Una vez que haya agregado un componente a un
documento, aparecerá en el panel Biblioteca del documento.
Resulta muy útil crear una nueva capa para los componentes.
1 Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra Tutorials/Components/
my_sweepstakes/mysweepstakes.fla.
2 Elija Archivo > Guardar como y guarde el archivo con un nuevo nombre, como por ejemplo
newsweeptakes.
3 Cree una capa nueva y denomínela UI. Coloque los componentes en esta capa.
4 Haga clic en el fotograma 6 en la capa UI de la línea de tiempo. Elija Insertar > Fotograma
clave vacío para agregar un fotograma vacío. Éste se utilizará para los componentes de la
segunda página.
5 Asegúrese de que se encuentran abiertos los paneles siguientes:
• Panel Biblioteca (Ventana > Biblioteca).
• Panel Componentes (Ventana > Componentes).
• Inspector de propiedades (Ventana > Propiedades).
Tutorial de introducción a los componentes 87

Adición de una casilla de verificación
Utilice el componente CheckBox para crear un cuadro con el valor true o false.
1 Seleccione el fotograma 1 en la capa UI.
2 Arrastre el componente CheckBox desde el panel Componentes al escenario. Colóquelo debajo
del párrafo que solicita si el usuario desea participar en el sorteo.
El componente aparece en la carpeta Flash UI Components en el panel Biblioteca.
Adición de un cuadro combinado

Utilice el componente ComboBox para crear un menú desplegable simple de elementos que los
usuarios puedan seleccionar. Los cuadros combinados también se pueden utilizar para crear un
menú desplegable más complejo que se desplace automáticamente a un elemento de menú que
empiece por la letra o letras introducidas por el usuario en el campo de texto.
• Arrastre el componente ComboBox desde el panel Componentes al escenario. Colóquelo
debajo de “Seleccione su color favorito:”.
Adición de botones de comando

Utilice el componente PushButton para crear dos botones de comando. Uno de ellos estará en la
primera página y servirá para enviar la información del formulario. El siguiente estará en la
segunda página y servirá para volver a la primera página y volver a rellenarla con los valores
enviados previamente.
1 Arrastre el componente PushButton desde el panel Componentes al escenario. Colóquelo en la
esquina inferior derecha del formulario de modo que se alinee horizontalmente con los campos
de texto del nombre y del correo electrónico.
88 Capítulo 3
Una vez que haya arrastrado un componente desde el panel Componentes al escenario,
seleccione instancias adicionales del mismo en el panel Biblioteca.
2 Vaya al fotograma clave vacío en el fotograma 6. En el panel Biblioteca, abra la carpeta Flash
UI Components y arrastre el componente PushButton desde el panel Biblioteca al escenario.
Colóquelo en la esquina inferior derecha.
Configuración de los componentes

El siguiente paso es la configuración de los componentes para que contengan la información
correcta que el usuario debe seleccionar.
Establezca los parámetros para un componente mediante la ficha Parámetros del inspector de
propiedades o del panel de parámetros de componentes.
Los usuarios avanzados pueden utilizar propiedades y métodos API para cada componente para el
establecimiento de los parámetros, el tamaño, el aspecto y otras propiedades del mismo. Los
métodos y las propiedades disponibles para cada elemento de componente se indican en el
diccionario de ActionScript debajo del nombre del componente.

Configuración de la casilla de verificación
1 Seleccione el fotograma 1 en la capa UI y, a continuación, el componente CheckBox en el
escenario. Sus parámetros aparecen en el inspector de propiedades.
2 Escriba sweepstakes_box en el cuadro de texto Nombre de instancia.

3 Escriba Absolutely! en el cuadro de texto Label.
4 En el menú emergente del parámetro Initial Value, seleccione True. De este modo, se especifica
si el estado inicial del componente CheckBox se ha seleccionado (True) o no (False).
5 En el menú emergente del parámetro Label Placement, deje el valor predeterminado de
alineación a la derecha. La etiqueta aparecerá a la derecha de la casilla de verificación.
6 No modifique el parámetro para el controlador de cambios.
El parámetro Change Handler define la función que desea que se ejecute cuando un usuario
selecciona un elemento. Esta función debe definirse en la misma línea de tiempo que la
instancia de componente. Este parámetro es opcional y debe especificarse únicamente en el
caso de que se desee que se lleve a cabo una acción en cuanto el usuario acceda a un
componente.
Al finalizar, el inspector de propiedades debe tener el aspecto siguiente:
Para obtener más información sobre la utilización de los métodos API del componente
FCheckBox para establecer opciones adicionales para el componente, consulte la entrada
FCheckBox (componente) en el diccionario de ActionScript en línea en la Ayuda de Flash.
Configuración del cuadro combinado

1 Seleccione el componente ComboBox en el escenario. Sus parámetros aparecen en el inspector
de propiedades.
90 Capítulo 3
2 Escriba color_box en el cuadro de texto Nombre de instancia.
3 Asegúrese de que el parámetro Editable está establecido en False. De este modo, los usuarios no
pueden introducir un texto propio.
4 El parámetro Labels visualiza una lista de los valores que los usuarios pueden seleccionar. Haga
clic en el campo Labels y, a continuación, haga clic en la lupa para abrir la ventana emergente
Valores. Haga clic en el botón Más (+) para introducir un nuevo valor.
5 Haga clic en el campo default value; a continuación, escriba Lightning para el primer valor.
6 Haga clic en el botón Más (+) para introducir el valor siguiente. Haga clic en el campo default
value; a continuación, escriba Cobalt para el valor siguiente.
7 Del mismo modo, agregue Emerald a la lista.
Cuando haya terminado, la ventana emergente Valores debería tener el aspecto siguiente:

8 Haga clic en Aceptar para cerrar la ventana emergente Valores.
El parámetro Data es opcional. Sirve para especificar los valores asociados con los elementos
(etiquetas) del cuadro de lista. No es necesario utilizar este parámetro para este tutorial.
9 El parámetro Row Count especifica el número de filas que se visualizan en la ventana. Puesto
que existen tres opciones, cambie el valor a 3.
No es necesario introducir un nombre para el parámetro Change Handler.
Para obtener más información sobre la utilización de los métodos API para cambiar propiedades
adicionales, consulte la entrada FComboBox (componente) en el diccionario de ActionScript en
línea en la Ayuda de Flash.
Configuración de los botones de comando

1 Seleccione el componente PushButton en el fotograma 1.
Los parámetros del componente aparecen en el inspector de propiedades.
2 Escriba submit_btn en el cuadro de texto Nombre de instancia del inspector de propiedades.

3 Escriba Submit en el cuadro de texto Label del inspector de propiedades.
Este texto aparecerá en el cuerpo del botón.
4 Escriba onClick para el nombre del controlador de acciones del ratón. Más adelante, escribirá
el código ActionScript para definir la función del controlador de acciones del ratón.
5 Seleccione el componente PushButton en el fotograma 6.
92 Capítulo 3
6 Escriba return_btn en el cuadro de texto Nombre de instancia del inspector de propiedades.
7 Escriba Return en el cuadro de texto Label del inspector de propiedades.
8 Escriba onClick para el nombre del controlador de acciones del ratón.
Para obtener más información sobre la utilización de los métodos API del componente
FPushButton para cambiar propiedades adicionales, consulte la entrada FPushButton
(componente) en el diccionario de ActionScript en línea en la Ayuda de Flash.
Definición del código ActionScript para recopilar los datos

Parte del código ActionScript será para toda la película, mientras que otra parte estará relacionada
con un fotograma específico. La tabla siguiente resultará útil para realizar un seguimiento de los
nombres de instancia.
Nombre de la instancia Descripción
color_box Cuadro combinado de color de la página 1
sweepstakes_box Casilla de verificación de sorteo de la página 1
submit_btn Botón de comando de envío de la página 1
name Cuadro de introducción de texto para el nombre de la página 1
email Cuadro de introducción de texto para la dirección de correo electrónico de la

página 1
return_btn Botón de comando de retorno de la página 2
name_result Cuadro de texto dinámico de la página 2 para ver el nombre del usuario
email_result Cuadro de texto dinámico de la página 2 para ver la dirección de correo electrónico
del usuario
color_result Cuadro de texto dinámico de la página 2 para ver la selección de colores del usuario
sweepstakes_text Cuadro de texto dinámico de la página 2 que muestra diferentes textos en función
de si el usuario ha optado por participar en el sorteo
Definición del código ActionScript para toda la película

El código ActionScript para componentes se coloca en los fotogramas clave. El parámetro Click
Handler especifica lo que sucede al activar el componente PushButton. El valor predeterminado
es onClick, que significa que cuando el usuario hace clic en uno de los botones de comando, éste
se activa. Empiece creando una función para onClick. Se trata de una función de bifurcación que
en primer lugar determina si el botón que se ha presionado es Enviar o Retorno y, a continuación,
realiza las acciones correspondientes.
1 Cree una nueva capa y denomínela Todas las acciones. Ésta se utilizará para el código
ActionScript que deba ejecutarse a lo largo de la película.
2 Si el panel Acciones no está abierto, elija Ventana > Acciones.
3 Cambie al modo Experto presionando Ctrl+Mayús+E (Windows) o Comando+Mayúsculas+E
(Macintosh), o haciendo clic en el control de la esquina superior derecha (un triángulo que
tiene una marca de verificación encima) y seleccionando el modo Experto en el menú
emergente.

4 Introduzca la función callback para los botones. Se trata de una sentencia condicional que se
bifurca en función del botón en el que se hace clic. Si se hace clic en el botón Enviar, se
bifurcará para mostrar la función getResults e irá a la página 2. Si se hace clic en el botón
Retorno, irá a la página 1.
Introduzca los códigos siguientes en el panel Acciones.
// pulsador callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
Nota: aunque no es recomendable, si no desea escribir el código ActionScript, puede copiar el texto de este
tutorial y pegarlo en el panel Acciones.
5 Escriba la función getResults. Con esta función, se obtienen los resultados de la casilla de
verificación de sorteo y del cuadro combinado de color. También se obtienen los resultados del
cuadro combinado en forma de etiqueta para poder mostrarlos.
// obtener resultados de la pág 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
6 Escriba la función initValues. Esta función inicializa los valores de la página 1 con los valores
que el usuario ha seleccionado anteriormente. Se ejecuta cuando el usuario hace clic en el
botón Retorno.
// inicializar valores de pág 1 con los valores seleccionados anteriormente
// por el usuario
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
} else {
color_box.setSelectedIndex(selectedItem);
}
}
94 Capítulo 3
7 Finalmente, agregue una llamada a la función initValues al principio del código
ActionScript. Cuando haya terminado, el código ActionScript debe tener el aspecto siguiente:
initValues();
// pulsador callback
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
// inicializar valores de pág 1 con los valores seleccionados anteriormente
// por el usuario
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
} else {
color_box.setSelectedIndex(selectedItem);
}
}
// obtener resultados de la pág 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
Ha finalizado el script que debe ejecutarse para toda la película. Sin embargo, todavía debe
agregar un script para los fotogramas de las páginas 1 y 2.
Adición de códigos ActionScript a cada fotograma clave

Parte del código ActionScript debe ejecutarse únicamente cuando el usuario selecciona un
fotograma determinado. Con el fin de que el código ActionScript funcione, debe asignar un
nombre a cada fotograma clave.
1 Cree una nueva capa y denomínela Acciones de fotograma. Seleccione el fotograma 1 y, a
continuación, elija Insertar > Fotograma clave vacío para insertar un fotograma clave. Utilice el
inspector de propiedades para asignar el nombre pg1 al fotograma. Del mismo modo, inserte
un fotograma clave en el fotograma 6 y denomínelo pg2.
2 Seleccione el fotograma clave en el fotograma 1 de la capa Acciones de fotograma y escriba el

código ActionScript siguiente para detener la película en el fotograma 1 (pg1):
stop();

3 Opcionalmente, si desea ver un fragmento determinado del texto en el caso de que el usuario
haya seleccionado la casilla de verificación de sorteo, u otro fragmento de texto en caso de que
el usuario no la haya seleccionado, escriba una sentencia condicional con el texto que se
colocará en el cuadro de texto dinámico sweepstakes_text en la página 2. Selecione el
fotograma clave denominado pg2 en la capa Acciones de fotograma e introduzca lo siguiente
en el panel Acciones:
// texto del sorteo
if (sweepstakes_result==true) {
sweepstakes_text = "Ha participado en el sorteo de un Stiletto Fantasy.
Los ganadores se dan a conocer al final de cada mes.";
} else {
sweepstakes_text = "No ha participado en el sorteo de un Stiletto
Fantasy.";
}
Nota: no corte ni copie este código ActionScript en el panel Acciones. No funcionará correctamente puesto que
existen saltos de línea entre la primera y la segunda líneas de texto.
Para ver el aspecto de los componentes, ejecute la película en Flash Player 6.
1 Seleccione Control > Probar película.
La película se ejecuta en Flash Player.
2 Seleccione y anule la selección de la casilla de verificación para asegurarse de que funciona.
3 Seleccione un color y asegúrese de que aparece en la página 2.
4 Cuando haya terminado, seleccione Archivo > Cerrar para cerrar la película en el reproductor.
5 Si ha detectado errores, utilice la herramienta Flecha para seleccionar el componente; a
continuación, realice las correcciones en el inspector de propiedades. Si es necesario, vuelva a
probar la película.
Pasos siguientes
En este tutorial se han presentado los pasos básicos para crear un grupo simple de componentes y
para ver sus resultados. Para obtener más información, consulte Utilización de Flash y el
diccionario de ActionScript en el menú Ayuda.
96 Capítulo 3

(eBook-Es) Macromedia - Tutoriales de Introduccion A Flash MX, ActionScript y Componentes

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

(eBook-Es) Macromedia - Tutoriales de Introduccion A Flash MX, ActionScript y Componentes

Cargado por

Copyright:

Formatos disponibles

Tutoriales de Flash MX

La tecnología de compresión y descompresión de vídeo Sorenson™ Spark™ tiene licencia de

Limitación de garantías de Apple

Primera edición: marzo de 2002

Qué debe saber

Visualización de las propiedades del documento

Tutorial de introducción a Flash MX 7

Si el inspector de propiedades no está totalmente expandido, haga clic en el triángulo blanco de

Visualización del clip de película

Tutorial de introducción a Flash MX 9

Análisis de la estructura de la película con el explorador de películas

Tutorial de introducción a Flash MX 11

Definición de las propiedades de un documento nuevo y

Seleccione esta sombra de gris

Tutorial de introducción a Flash MX 13

Especificación de la configuración de cuadrícula

2 En la caja de herramientas, seleccione la herramienta Rectángulo.

El color de relleno seleccionado de la forma no es importante; en breve cambiará el color.

Tutorial de introducción a Flash MX 15

Especificación de un color para el degradado

5 En el menú emergente Estilo de relleno, seleccione Radial.

Haga clic en esta sombra de azul

Tutorial de introducción a Flash MX 17

Adición de un segundo color de degradado

Tutorial de introducción a Flash MX 19

Al cambiar la forma y la ubicación de la elipse, también se modifican la forma y la ubicación de

Tutorial de introducción a Flash MX 21

Cómo crear y enmascarar ilustraciones vectoriales

Adición de una capa

Botón Insertar capa

Nota: si se equivoca, elija Edición > Deshacer e inténtelo de nuevo.

Tutorial de introducción a Flash MX 23

El círculo que ha dibujado se convierte en un óvalo sesgado.

Creación y transformación de una forma duplicada

3 En la caja de herramientas, seleccione la herramienta Transformación libre.

Tutorial de introducción a Flash MX 25

Creación de un recorte con el duplicado

Tutorial de introducción a Flash MX 27

Tutorial de introducción a Flash MX 29

Importación de imágenes a la biblioteca

Tutorial de introducción a Flash MX 31

2 Haga doble clic en el archivo view1.png.

Creación de un símbolo de clip de película

2 Elija Insertar > Convertir en símbolo o presione F8.

Tutorial de introducción a Flash MX 33

7 Agregue fotogramas clave a los fotogramas 25 y 35.

3 En la línea de tiempo, seleccione un fotograma entre los fotogramas 25 y 34. En el inspector de

Aparición progresiva del segundo coche

Tutorial de introducción a Flash MX 35

6 En el inspector de propiedades de clips de película, seleccione Alfa en el menú emergente Color

Desvanecimiento del segundo coche

5 En el inspector de propiedades, seleccione Alfa en el menú emergente Color y escriba 0% en el

Desvanecimiento del tercer coche

Tutorial de introducción a Flash MX 37

Carga de texto dinámico en tiempo de ejecución

Importación del logotipo

Tutorial de introducción a Flash MX 39

Creación de un campo de texto dinámico

Menú emergente Tipo de línea

7 En el inspector de propiedades, escriba textField en el campo de texto Var.

El archivo de texto que se cargará en el campo de texto dinámico (tal como se ve en la

Utilización de la acción loadVariables para cargar texto

Tutorial de introducción a Flash MX 41