Flashmx Tutorials

macromedia
Tutoriales de Flash MX
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 Developers 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, diseos, ttulos, palabras o frases
mencionados en esta publicacin 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.
Informacin de terceros
La tecnologa de compresin y descompresin de voz tiene licencia de Nellymoser, Inc. (www.nellymoser.com).
La tecnologa de compresin y descompresin de vdeo Sorenson Spark tiene licencia de
Sorenson Media, Inc.
Esta gua contiene vnculos a sitios Web de terceros que no estn 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 gua
ser a cuenta y riesgo del usuario. Macromedia proporciona estos vnculos nicamente como ayuda y su inclusin no implica que
Macromedia se haga responsable del contenido de dichos sitios Web.
Limitacin de garantas de Apple
APPLE COMPUTER, INC. NO GARANTIZA, DE FORMA EXPRESA NI IMPLCITA, LA COMERCIABILIDAD O
IDONEIDAD PARA UN FIN DETERMINADO DEL PAQUETE DE SOFTWARE INFORMTICO INCLUIDO. LA
EXCLUSIN DE GARANTAS IMPLCITAS NO EST PERMITIDA EN ALGUNOS ESTADOS. LA RESTRICCIN
ANTERIOR PUEDE NO AFECTARLE. ESTA GARANTA LE PROPORCIONA DERECHOS LEGALES
ESPECFICOS. PUEDE TENER OTROS DERECHOS QUE VARAN SEGN LA LEGISLACIN LOCAL.
Copyright 2002 Macromedia, Inc. Todos los derechos reservados. No se permite la copia, fotocopia, reproduccin,
traduccin ni la conversin en formato electrnico o legible por equipos, ya sea de forma total o parcial de este manual, sin la
autorizacin previa por escrito de Macromedia, Inc.
Agradecimientos
Director: Erick Vera
Productor: Wayne Wieseler
Redaccin: Jody Bleyle, JuLee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor
Diseo de las instrucciones: Stephanie Gowin, Barbara Nelson
Edicin: Rosana Francescato, Lisa Stanziano, Anne Szabla
Produccin y diseo multimedia: Aaron Begley, Benjamin Salles, Noah Zilberberg
Produccin y diseo de impresin: Chris Basmajian, Caroline Branch
Localizacin: Michael Dominguez, Cristina Guembe, Yoshika Hedberg, Tim Hussey, Masayo Noppe Noda, Simone Pux, Yoko
Shindo, Yuko Yagi
Primera edicin: marzo de 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
3
CONTENIDO
CAPTULO 1
Tutorial de introduccin a Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Qu debe saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Visualizacin de la pelcula terminada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Anlisis del archivo stiletto.fla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Definicin de las propiedades de un documento nuevo y creacin de un fondo de
degradado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Cmo crear y enmascarar ilustraciones vectoriales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Interpolar efectos de mapa de bits dentro de un clip de pelcula . . . . . . . . . . . . . . . . . . 31
Carga de texto dinmico en tiempo de ejecucin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Adicin de animacin y navegacin a botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Agregar flujos y sonidos de eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Organizacin del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Prueba del rendimiento de descarga y publicacin de la pelcula . . . . . . . . . . . . . . . . . . 52
Pasos siguientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
CAPTULO 2
Tutorial de introduccin a ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Visualizacin de una pelcula completa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Inicializacin de la pelcula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Almacenamiento y recuperacin de informacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Visualizacin de informacin en un cuadro de texto dinmico . . . . . . . . . . . . . . . . . . . 67
Especificacin de una expresin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Control del flujo de la pelcula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Creacin de comandos y reutilizacin de cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Utilizacin de un objeto incorporado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Prueba de la pelcula . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
CAPTULO 3
Tutorial de introduccin a los componentes . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Tipos de componente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Visualizacin del formulario finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
Creacin de un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Contenido 4
5
CAPTULO 1
Tutorial de introduccin a Flash MX
Este tutorial sirve de gua para el proceso de creacin de diseos convincentes para Internet con
Macromedia Flash MX. Si completa este tutorial, aprender a disear una pelcula: desde cmo
abrir un nuevo documento hasta publicar la pelcula 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 pelcula 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 pelcula.
Cargar texto dinmico.
Modificar botones y agregar funciones de navegacin.
Agregar flujos y sonidos de eventos.
Probar y publicar la pelcula.
Se recomienda completar las ocho secciones incluidas en el tutorial en el orden indicado, si bien
puede optar por revisar slo las secciones que le interesen. Si completa el tutorial sin seguir el
orden establecido, tenga en cuenta que en cada seccin 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 bsicos que debe conocer para completar
el tutorial. Los temas de las lecciones son los siguientes:
Primeros pasos en Flash MX.
Ilustracin en Flash.
Adicin y edicin de texto.
Creacin y edicin de smbolos.
Capas.
Creacin de botones.
Creacin de animaciones interpoladas.
Para tomar una leccin, elija Ayuda > Lecciones y seleccione una de la lista.
Captulo 1 6
Visualizacin de la pelcula terminada
Puede abrir una versin ya terminada de la pelcula del tutorial para comprender mejor cmo se
ver el archivo final.
En esta seccin, realizar las tareas siguientes:
Analizar la pelcula acabada con el inspector de propiedades y el explorador de pelculas.
Examinar un clip de pelcula y discernir sus relaciones con la pelcula principal.
Ver los tipos de elementos incluidos en la pelcula.
1 Dentro de la carpeta de la aplicacin Flash MX, vaya a Tutorials/FlashIntro y haga doble clic en
stiletto.swf para abrir la pelcula acabada en el Flash Player autnomo.
Las pelculas Flash publicadas tienen la extensin SWF; los documentos del entorno de edicin
tienen la extensin FLA.
2 Cuando se abra la pelcula, observe cmo aumentan progresivamente o se desvanecen las tres
vistas del coche.
Crear esta animacin interpolando efectos de mapa de bits en un clip de pelcula.
3 Escuche el sonido que se reproduce continuamente mientras se reproduce la pelcula. 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 or los sonidos de eventos incluidos en
cada botn.
5 Haga clic en un botn para ver con qu est vinculado y, a continuacin, cierre el navegador
que ha abierto y vuelva al archivo SWF.
6 Despus de ver la pelcula, haga clic en su cuadro de cierre.
Tutorial de introduccin a Flash MX 7
Anlisis del archivo stiletto.fla
Resulta til analizar el archivo FLA acabado para ver cmo el autor ha diseado el documento.
Para analizar el archivo, puede ver las propiedades de un objeto, ver la lnea de tiempo y el
escenario, observar elementos de biblioteca y utilizar el explorador de pelculas.
1 En Flash, elija Archivo > Abrir. Vaya a la carpeta de la aplicacin Flash y abra Tutorials/
FlashIntro/stiletto.fla.
Aparecer la pelcula del tutorial completa en el entorno de edicin.
2 Para ver todas las capas de la lnea de tiempo principal, arrastre hacia abajo la barra que separa
el escenario de la lnea de tiempo.
3 En la lnea de tiempo, desbloquee la capa de copia y la capa de imgenes.
Visualizacin 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 configuracin para ver y modificar los atributos de texto.
1 Si el inspector de propiedades no est abierto, elija Ventana > Propiedades.
Arrastre la barra que separa el
escenario de la lnea de tiempo
Captulo 1 8
2 En el escenario, desplcese 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 dinmico
En el inspector de propiedades, puede ver el tamao, el estilo y el color del texto, entre otros
atributos.
Si el inspector de propiedades no est totalmente expandido, haga clic en el tringulo blanco de
la esquina inferior derecha.
3 En el escenario, seleccione el coche.
La configuracin del clip de pelcula reemplaza la configuracin de texto. Los clips de pelcula
son smbolos con sus propias lneas de tiempo independientes. Puede considerarlos como
pelculas dentro de pelculas.
Visualizacin del clip de pelcula
Ahora abrir el modo de edicin de smbolos para ver la lnea de tiempo de un clip de pelcula.
1 En el escenario, haga doble clic en el clip de pelcula del coche.
Como ha aprendido en la leccin Creacin de animaciones interpoladas, debe definir los
cambios de la animacin en fotogramas clave. Cuando se desplace alrededor de la lnea 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 lnea de
tiempo mediante crculos rellenos; los fotogramas clave finales aparecen como rectngulos con
contorno pequeos.
Cuadro de texto
2 En la lnea de tiempo, seleccione la cabeza lectora y arrstrela despacio por los fotogramas.
Vea cmo los cambios de accin en el escenario se corresponden con los cambios en la lnea de
tiempo. Mientras arrastra la cabeza lectora, la pelcula se reproduce secuencialmente. Puede
agregar cdigo ActionScript, el lenguaje de creacin de scripts de Flash, a las pelculas para
hacer que la cabeza lectora salte a fotogramas especficos.
3 Cuando termine de ver el clip de pelcula, realice una de las acciones siguientes para volver a la
pelcula principal:
Elija Edicin > Editar documento.
Haga clic en el botn Atrs.
Haga clic en Escena 1 encima del escenario.
Visualizacin de elementos de la biblioteca
El panel Biblioteca contiene los smbolos y los objetos importados del documento.
1 Si el panel Biblioteca no est abierto, elija Ventana > Biblioteca.
2 Arrastre el panel Biblioteca para hacerlo ms 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 previsualizacin 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 pelcula.
Captulo 1 10
6 Cuando haya visto todos los elementos, cierre el panel Biblioteca.
Anlisis de la estructura de la pelcula con el explorador de pelculas
El explorador de pelculas ayuda a organizar, localizar y editar medios. Gracias a su estructura
jerrquica en rbol, el explorador de pelculas proporciona informacin acerca de la organizacin
y el flujo de una pelcula, por lo que resulta especialmente til cuando se analiza una pelcula
diseada por otra persona.
1 Si el explorador de pelculas todava no est abierto, elija Ventana > Explorador de pelculas.
2 Si es necesario, ample el explorador de pelculas para ver la estructura de rbol dentro del
panel.
Los botones de filtrado del explorador de pelculas muestran u ocultan informacin.
3 Haga clic en el men emergente de la barra de ttulo del explorador de pelculas y verifique que
Mostrar elementos de pelcula y Mostrar definiciones de smbolo estn seleccionados.
4 Anule la seleccin del botn Mostrar fotogramas y capas a lo largo de la parte superior del
explorador de pelculas. Verifique que los nicos botones de filtro seleccionados sean Mostrar
texto; Mostrar botones, elementos de pelcula y grficos; Mostrar archivos de comando de
accin y Mostrar video, sonidos y mapas de bits.
5 Examine la lista para ver algunos de los elementos incluidos en la pelcula y sus relaciones con
otros elementos.
6 Para expandir un objeto o una categora, haga clic en el botn de signo ms (+) situado a la
izquierda del nombre.
7 Seleccione el botn de filtro Mostrar fotogramas y capas. Desplcese hacia abajo en la categora
Definiciones de smbolos. Con la categora expandida, haga doble clic en el clip de pelcula
Animacin de coche.
Ahora se encuentra en el modo de edicin de smbolos de clips de pelcula.
Captulo 1 12
8 En el explorador de pelculas, con la categora Animacin de coche seleccionada y expandida,
expanda el icono de Vista 3 Aparicin y, a continuacin, haga doble clic en el fotograma 60.
En la lnea de tiempo del clip de pelcula, la cabeza lectora se mueve al fotograma 60 de la capa
Vista 3 Aparicin.
Para ver un elemento que aparezca en el rbol jerrquico, haga clic en el icono correspondiente.
Si hace clic en un icono de fotograma, la cabeza lectora se mueve a ese fotograma en la lnea de
tiempo. Si hace clic en un elemento, como una imagen de mapa de bits, el inspector de
propiedades muestra la configuracin de la imagen. Al hacer doble clic en un icono que
representa un smbolo se abre el modo de edicin de smbolos.
9 Cierre el explorador de pelculas. Para cerrar el documento, elija Archivo > Cerrar.
Si ha efectuado cambios en el archivo, no los guarde.
Definicin de las propiedades de un documento nuevo y
creacin de un fondo de degradado
Para saber cmo crear una pelcula en Flash, debe empezar por el primer paso del proceso: abrir
un archivo nuevo. A continuacin, cuando finalice esta seccin, sabr realizar las tareas siguientes:
Abrir un archivo nuevo y definir propiedades de documentos.
Crear y transformar un fondo de degradado.
Cmo abrir un archivo nuevo
Ahora estar listo para crear su propia versin de la pelcula del tutorial.
1 Seleccione Archivo > Nuevo.
2 Elija Archivo > Guardar como.
3 Asigne al archivo el nombre mystiletto.fla y gurdelo en la carpeta de la aplicacin Flash MX,
en la subcarpeta Tutorials/FlashIntro/My_Stiletto.
Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.
Definicin de propiedades de documento
La configuracin de las propiedades de un documento generalmente constituye el primer paso en
el trabajo de edicin. Puede utilizar el inspector de propiedades y el cuadro de dilogo
Propiedades del documento para especificar las configuraciones que afectan a toda la pelcula,
como la velocidad de reproduccin en fotogramas por segundo (fps), el tamao 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 nmero del cuadro de texto Velocidad de fotogramas.
La pelcula 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 tringulo 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 continuacin, 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.
Seleccione esta sombra de gris
Cuadro de texto Hexadecimal
Captulo 1 14
4 Para cambiar el tamao del escenario, haga clic en el botn Tamao, que indica el tamao del
escenario. En el cuadro de dilogo 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 Pxeles est seleccionado en el men emergente y haga clic en Aceptar.
Las dimensiones del escenario cambian para reflejar la nueva configuracin de 640 x 290
pxeles.
Especificacin de la configuracin de cuadrcula
En el escenario, puede alinear objetos a lo largo de las lneas de cuadrcula horizontales y
verticales. Aunque la cuadrcula no est visible, puede ajustar objetos a ella. Ahora modificar la
distancia entre las lneas de cuadrcula horizontales y verticales y crear una cuadrcula alineada
con los bordes del escenario.
1 Seleccione Ver > Cuadrcula > Editar cuadrcula.
2 En el cuadro de dilogo Cuadrcula, escriba 10 px en el cuadro de texto de anchura de la
cuadrcula y 10 px en el cuadro de texto de altura de la cuadrcula.
3 Seleccione Ajustar a cuadrcula y verifique que Mostrar cuadrcula no est seleccionado.
Los objetos se ajustarn a la cuadrcula, aunque la cuadrcula no est visible.
4 Verifique que Normal est seleccionado en Precisin de ajuste y haga clic en Aceptar.
La precisin de ajuste determina la proximidad a una lnea de cuadrcula a la que debe estar un
objeto para que se ajuste a ella.
Creacin de un fondo de degradado
Un degradado muestra variaciones sutiles de un color o transiciones entre dos o ms 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 pelculas, su uso excesivo puede afectar
negativamente a la velocidad del procesador del equipo y reducir la velocidad a la que se reproduce una animacin.
Cuando disee una pelcula, tenga en cuenta tanto los requisitos artsticos como los de rendimiento para determinar
la utilizacin ptima de los degradados.
Dibujo de un rectngulo
Anteriormente en el tutorial cre una cuadrcula alineada con el escenario y ajust objetos a lneas
de cuadrcula. Ahora dibujar un rectngulo que se ajusta al rea de la cuadrcula que bordea el
escenario.
1 En el men emergente situado sobre el lado derecho del escenario, introduzca 75% para ver
todo el escenario.
Esta configuracin indica la vista aumentada o reducida del escenario. La configuracin no
afecta al tamao real del escenario en la pelcula especificado en el cuadro de dilogo
Propiedades del documento.
2 En la caja de herramientas, seleccione la herramienta Rectngulo.
3 En la caja de herramientas, haga clic en el control Color de trazo. Seleccione Sin trazo (el botn
con la lnea 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.
Captulo 1 16
4 Empezando por la esquina superior izquierda del escenario, arrastre el puntero a la esquina
inferior derecha del escenario para dibujar un rectngulo que ocupe el escenario.
Al soltar el puntero, el rectngulo se ajusta a los bordes del escenario a lo largo de la cuadrcula
oculta.
Nota: mientras completa el tutorial puede serle til deshacer cambios que haya efectuado. Flash puede
deshacer varios cambios recientes que haya efectuado segn la cantidad de deshacer niveles que haya
configurado en Preferencias. Para deshacer, elija Edicin > Deshacer o presione Ctrl+Z (Windows) o
Comando+Z (Macintosh). De manera inversa, podr rehacer lo que ha deshecho eligiendo Edicin > Rehacer o
presionando Ctrl+Y (Windows) o Comando+Y (Macintosh).
Especificacin 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 rectngulo para seleccionar el relleno.
Cuando dibuj el rectngulo, el inspector de propiedades mostr las propiedades de la
herramienta Rectngulo. 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 ttulo del
panel.
Haga clic aqu para expandir el panel
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.
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 mtodos 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 continuacin, haga clic en la muestra para seleccionarla.
Deslizador de degradado
Barra de degradado
Haga clic en esta sombra de azul
Captulo 1 18
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.
Adicin 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.
Transformacin del relleno de degradado
Cuando se transforma un objeto, se lo gira (rota), ajusta (escala) o sesga. Puede transformar un
relleno con la herramienta Transformacin de relleno.
1 En la caja de herramientas, seleccione la herramienta Transformacin de relleno. En el
escenario, haga clic en cualquier lugar dentro del rectngulo.
Aparece una elipse alrededor del escenario que indica la forma y la ubicacin del degradado. La
elipse dispone de controles de ubicacin, anchura, escala y rotacin del degradado radial.
Anchura
Escala
Rotacin
Ubicacin central
Captulo 1 20
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
ilustracin.
Al cambiar la forma y la ubicacin de la elipse, tambin se modifican la forma y la ubicacin 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 ilustracin
siguiente.
4 Arrastre el selector central circular, que controla el tamao del degradado, hacia la derecha para
ensanchar la elipse, como se muestra en la ilustracin siguiente.
5 Arrastre el selector circular inferior, que controla la rotacin de la elipse, hacia la izquierda para
rotar la elipse al ngulo aproximado que se muestra en la ilustracin siguiente.
Captulo 1 22
Asignacin de nombre y bloqueo de una capa
La forma del degradado aparece en la Capa 1 de la lnea de tiempo, que actualmente es la nica
capa del documento. Como preparacin para agregar y mover ms objetos en el escenario,
cambiar el nombre y bloquear la capa. En la siguiente seccin del tutorial crear una nueva
capa.
Como ya ha aprendido en la leccin Capas, al bloquear la capa se asegura de que no se realicen
cambios involuntarios en los objetos de la capa.
1 En la lnea 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 continuacin, haga clic en el icono de candado para
bloquear la capa.
Cmo crear y enmascarar ilustraciones vectoriales
Cuando se dibuja en Flash, se crean ilustraciones vectoriales, que son representaciones
matemticas de lneas, curvas, colores y posiciones. Una ilustracin vectorial no depende de la
resolucin; puede volver a adaptar su escala a cualquier tamao o visualizarla con cualquier
resolucin sin perder la claridad. Adems, las ilustraciones vectoriales se descargan con ms
rapidez que las imgenes de mapa de bits equivalentes.
Adems del degradado, el archivo acabado contiene formas de fondo. Ahora utilizar la
herramienta valo para crear las formas.
En concreto, en esta seccin aprender a realizar las tareas siguientes:
Agregar una capa.
Crear y recortar formas.
Enmascarar la capa que contiene las formas.
Para completar esta seccin, puede continuar trabajando con el archivo mystiletto.fla o ir a la
carpeta de la aplicacin Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto2.fla. Si utiliza el
archivo stiletto2.fla, gurdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una
versin no modificada del archivo original.
Adicin 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 botn Insertar capa. Asigne
a la nueva capa el nombre Formas.
Botn Insertar capa
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 Slido. 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 continuacin, presione Intro o
Retorno.
As estar especificando los valores para la cantidad de rojo, verde y azul de un color.
5 En la lnea de tiempo, verifique que la capa Formas est seleccionada. En el escenario, restrinja
el valo a un crculo presionando Mays mientras arrastra para dibujar un crculo 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 Edicin > Deshacer e intntelo de nuevo.
6 Seleccione la herramienta Flecha en la caja de herramientas y haga doble clic en el crculo del
escenario para seleccionar el relleno y el trazo.
7 Si el panel Transformar no est abierto, elija Ventana > Transformar.
Captulo 1 24
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
continuacin, presione Intro o Retorno.
El crculo que ha dibujado se convierte en un valo sesgado.
Creacin y transformacin de una forma duplicada
Ahora crear y transformar un valo duplicado.
1 Con el relleno y el trazo del valo an seleccionado en el escenario, elija Edicin > Duplicar.
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 Transformacin libre.
Aparece una gua 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.
Captulo 1 26
5 Mueva el puntero sobre el selector de esquina hasta que el puntero se transforme en un
indicador de rotacin circular. Arrastre el indicador de rotacin a la izquierda para rotar el
valo a la posicin aproximada que se muestra en la ilustracin siguiente.
Creacin 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 estn 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 gua de la herramienta Transformacin libre alrededor del valo duplicado, haga clic en
cualquier punto del escenario o del lienzo lejos de las formas y, a continuacin, haga clic en el
relleno del valo interior. Presione la tecla Supr del teclado para eliminar el relleno.
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 continuacin, haga clic mientras
presiona la tecla Mays para seleccionar tambin el trazo interior. Arrastre ligeramente los
trazos hacia la derecha del relleno, como se muestra en la ilustracin 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 marrn
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 marrn ms clara, como se muestra en la
ilustracin siguiente:
Captulo 1 28
4 Seleccione la herramienta Transformacin libre. Arrastre el puntero alrededor de las formas del
fondo del valo para seleccionar todas las formas y, a continuacin, arrastre el selector de
esquina derecho de la gua para ensanchar las formas, como se muestra en la ilustracin
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.
Creacin de una mscara
La ilustracin que ha creado en la capa Formas sobresale del escenario hasta el rea del lienzo.
Aunque el rea del lienzo no aparecer en la pelcula publicada, la ilustracin que sobresale del
escenario puede resultar molesta en el entorno de edicin. Si bien puede borrar la parte de las
formas que se extiende hasta el lienzo, es mejor aplicar una mscara sobre el escenario para que
slo permanezca visible el rea que se encuentra bajo la mscara (todo el escenario, en este caso).
De este modo, si desea volver a las formas para modificarlas, stas permanecern intactas.
1 Con la capa Formas seleccionada, agregue una capa nueva a la lnea de tiempo y asgnele el
nombre Mscara.
2 En la caja de herramientas, seleccione la herramienta Rectngulo y dibuje un rectngulo que
vaya de la esquina superior izquierda del escenario a la esquina inferior derecha.
Este rectngulo es la forma de la mscara. Todo lo que se encuentre bajo el rectngulo ser
visible.
Captulo 1 30
3 Haga clic con el botn derecho del ratn (Windows) o haga clic mientras presiona la tecla
Control (Macintosh) en el nombre de la capa Mscara en la lnea de tiempo y elija Mscara en
el men contextual.
La capa se convierte en una capa de mscara, sealada por un icono de una flecha hacia abajo.
La capa situada inmediatamente debajo est vinculada a la capa Mscara y su contenido se
muestra a travs del rea rellenada de la mscara. El nombre de capa de mscara aparece con
sangra y su icono cambia a una flecha que apunta a la derecha. La ilustracin del lienzo ya no
est visible en el escenario.
Las capas de mscara deben estar bloqueadas para que se muestre el efecto Mscara. Para editar
las formas, puede desbloquear las capas Mscara y Formas. Cuando acabe de editar la
ilustracin, bloquee las capas de nuevo para invocar la mscara.
4 Guarde el archivo.
Interpolar efectos de mapa de bits dentro de un clip de pelcula
Adems de crear ilustraciones vectoriales en Flash, puede importar imgenes de mapa de bits, que
utilizan pxeles para visualizar grficos, en la pelcula Flash y aplicar varios efectos de color. En esta
seccin, realizar las tareas siguientes:
Importar imgenes de mapa de bits.
Modificar de la compresin de mapa de bits.
Crear y editar un smbolo de clip de pelcula.
Interpolar efectos de mapa de bits para que aumenten progresivamente o se desvanezcan las
vistas del coche.
Para completar esta seccin, puede continuar trabajando con el archivo mystiletto.fla o puede ir a
la carpeta de la aplicacin Flash MX y abrir Tutorials/FlashIntro/stiletto3.fla. Si utiliza el archivo
stiletto3.fla, gurdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versin
no modificada del archivo original.
Importacin de imgenes a la biblioteca
Cuando importa un archivo a Flash, puede importarlo directamente a la biblioteca.
1 En la lnea de tiempo, agregue una capa nueva y asgnele el nombre Imgenes.
2 Elija Archivo > Importar a biblioteca.
Al seleccionar Importar a biblioteca en lugar de Importar, las imgenes deben colocarse en el
escenario para que aparezcan.
3 Vaya a la carpeta Tutorials/FlashIntro/Assets, situada en la carpeta de la aplicacin Flash MX,
seleccione el archivo view1.png y, a continuacin, haga clic mientras mantiene presionada la
tecla Mays para agregar los archivos view2.png y view3.png a la seleccin. Haga clic en Abrir.
4 En el cuadro de dilogo Opciones de importacin PNG de Fireworks, haga clic en la opcin
para importar la imagen como un nico mapa de bits alisado y, a continuacin, haga clic en
Aceptar.
Las tres imgenes estn ahora en la biblioteca.
Captulo 1 32
Modificacin de la compresin de mapa de bits
Cuando se importa una imagen, se pueden comprobar y modificar los valores que comprimen la
imagen. Aunque la compresin de imgenes reduce el tamao de los archivos de la pelcula, puede
afectar a la calidad de la imagen: el objetivo es encontrar un equilibrio entre la configuracin de la
compresin y la calidad de la imagen.
1 Si el panel Biblioteca no est abierto, elija Ventana > Biblioteca. Ample la ventana, si es
necesario, para ver los tres archivos que ha importado.
2 Haga doble clic en el archivo view1.png.
La compresin JPEG es la seleccin predeterminada.
3 En el men emergente Compresin, seleccione Sin prdida (PNG/GIF) para obtener una
mayor calidad de imagen.
4 Para probar cmo aparece la imagen con la nueva configuracin, haga clic en Probar. Si es
necesario, arrastre el coche a la ventana de previsualizacin. Cuando haya previsualizado la
imagen, haga clic en Aceptar.
5 Vuelva al panel Biblioteca. Haga doble clic en el archivo view2.png, repita el paso 3 y, a
continuacin, haga clic en Aceptar.
6 En el panel Biblioteca, haga doble clic en view3.png, especifique Sin prdidas (PNG/GIF) y
haga clic en Aceptar.
Creacin de un smbolo de clip de pelcula
En el archivo final, tres vistas del coche elctrico aumentan progresivamente o se desvanecen en la
escena de apertura. Este efecto se consigue creando un smbolo de clip de pelcula que tenga una
lnea de tiempo independiente de la lnea de tiempo principal. A continuacin, 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 pelcula.
1 Con la capa Imgenes an seleccionada en la lnea 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 smbolo o presione F8.
3 En el cuadro de dilogo Convertir en smbolo, asigne al smbolo el nombre Animacin de
coche. Verifique que Clip de pelcula 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 pelcula, stas
deben alinearse con relacin a un punto de registro central.
Punto de registro
Captulo 1 34
Edicin de un smbolo
Para ver la lnea de tiempo del clip de pelcula, debe estar en modo de edicin de smbolos. Puede
abrir el modo de edicin de smbolos haciendo doble clic en el smbolo en el escenario o en el
panel Biblioteca.
1 En el escenario, haga doble clic en el coche para abrir el modo de edicin de smbolos.
El nombre del smbolo aparece sobre el rea del lienzo, junto con un vnculo para Escena 1 que
retrocede a la pelcula principal.
En modo de edicin de smbolos, aparecer la lnea de tiempo del clip de pelcula en lugar de la
lnea de tiempo de la pelcula principal.
2 Cambie el nombre de Capa 1 por el de Vista 1 Aparicin.
3 El coche que se visualiza en el escenario es una imagen de mapa de bits, no un smbolo, dentro
del smbolo Animacin de coche. Convierta el coche en un smbolo seleccionndolo en el
escenario y presionando F8.
4 En el cuadro de dilogo Convertir en smbolo, asigne al smbolo el nombre Vista 1 Coche y, a
continuacin, verifique que Clip de pelcula est seleccionado.
5 Verifique que el cuadrado central est seleccionado en el indicador Registro y haga clic en
Aceptar.
6 Desplcese horizontalmente por la lnea 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.
7 Agregue fotogramas clave a los fotogramas 25 y 35.
8 Agregue un fotograma clave al fotograma 34 y, a continuacin, 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 vaco 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 ms fotogramas y haga
clic con el botn derecho del ratn (Windows) o haga clic mientras mantiene presionada la tecla Control
(Macintosh) y, a continuacin, elija Borrar fotograma clave en el men contextual.
Fotograma actual
Interpolacin de efectos de mapa de bits
La creacin de una interpolacin de efecto de mapa de bits es similar a la creacin de una
interpolacin de movimiento recto: se especifica la configuracin de los fotogramas clave de inicio
y de fin y, a continuacin, se especifica la interpolacin para esos fotogramas y los fotogramas
intermedios. Flash crea la animacin de transicin desde el primer fotograma clave de la
animacin hasta el ltimo.
1 En la lnea de tiempo de Animacin de coche, seleccione el fotograma 34 y, a continuacin,
haga clic en Vista 1 Coche en el escenario para que el inspector de propiedades muestre las
propiedades del clip de pelcula.
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%.
3 En la lnea de tiempo, seleccione un fotograma entre los fotogramas 25 y 34. En el inspector de
propiedades, seleccione Movimiento en el men emergente Interpolacin.
Una flecha con una lnea slida abarca los fotogramas clave interpolados. Una lnea discontinua
entre los fotogramas clave indica que la interpolacin no se ha implementado correctamente, lo
que ocurre con frecuencia cuando falta un fotograma clave de inicio o de fin.
Aparicin progresiva del segundo coche
Mientras Vista 1 Coche se desvanece, otra vista del coche aparecer progresivamente.
1 Agregue una nueva capa a la lnea de tiempo de Animacin de coche y asgnele el nombre Vista
2 Aparicin.
2 En la capa Vista 2 Aparicin, agregue un fotograma clave al fotograma 25.
3 Con la cabeza lectora an en el fotograma 25, arrastre el objeto view2.png del panel Biblioteca
al escenario.
4 Si el panel Informacin no est abierto, elija Ventana > Informacin. Verifique que el cuadrado
central est seleccionado en el indicador Registro y, a continuacin, 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 tambin dispone de cuadros de texto X e Y; sin embargo, estas
coordenadas se establecen con relacin a un punto de registro en la esquina superior izquierda
del clip de pelcula.
Rectngulo de delimitacin
Captulo 1 36
5 Seleccione view2.png en el escenario y presione F8 para convertirlo en smbolo. En el cuadro
de dilogo Convertir en smbolo, asigne al smbolo el nombre Vista 2 Coche. Verifique que
Clip de pelcula est seleccionado y haga clic en Aceptar.
6 En el inspector de propiedades de clips de pelcula, 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 Aparicin.
8 En el escenario, haga clic dentro del rectngulo de delimitacin del coche transparente. En el
inspector de propiedades de clips de pelcula, introduzca 100% en el cuadro de texto Valor
para alfa.
9 En la capa Vista 2 Aparicin, seleccione un fotograma entre los fotogramas 25 y 34. En el
inspector de propiedades, seleccione Movimiento en el men emergente Interpolacin.
Desvanecimiento del segundo coche
Ahora crear la animacin que hace que el segundo coche se desvanezca.
2 En la capa Vista 2 Aparicin, 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 Aparicin. 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 Aparicin entre los fotogramas 71 y 105 y
presione Supr.
Aparicin progresiva del tercer coche
A medida que el segundo coche se desvanece, el tercer coche aparece progresivamente. Ahora
crearemos esta animacin.
1 Con la capa Vista 2 Aparicin seleccionada, agregue una nueva capa a la lnea de tiempo y
asgnele el nombre Vista 3 Aparicin.
3 Con el fotograma 60 an seleccionado, arrastre el objeto view3.png del panel Biblioteca al
escenario. Utilice el panel Informacin (elija Ventana > Informacin 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 smbolo. En el
cuadro de dilogo Convertir en smbolo, asigne al smbolo el nombre Vista 3 Coche. Verifique
que Clip de pelcula 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 Aparicin.
7 En el escenario, efecte su seleccin dentro del rectngulo de delimitacin 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 animacin que hace que el tercer coche se desvanezca.
1 En la capa Vista 3 Aparicin, agregue un fotograma clave a los fotogramas 95 y 105.
2 Con el fotograma 105 seleccionado en la capa Vista 3 Aparicin, seleccione Vista 3 Coche en el
escenario y utilice el inspector de propiedades para seleccionar una transparencia alfa del 0%.
Captulo 1 38
Aparicin progresiva del primer coche
Mientras el tercer coche se desvanece, el primer coche debe aparecer progresivamente para
completar la animacin.
2 Con el fotograma 95 an seleccionado, arrastre el clip de pelcula Vista 1 Coche (no
view1.png) del panel Biblioteca al escenario.
3 En el panel Informacin, 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 Aparicin.
6 Haga clic dentro del rectngulo de delimitacin del clip de pelcula Vista 1 Coche en el
escenario. En el inspector de propiedades, introduzca 100% en el cuadro de texto Valor para
alfa.
Prueba de la pelcula
En cualquier momento durante la edicin podr probar cmo se reproducir la pelcula como
archivo SWF.
1 Guarde la pelcula y elija Control > Probar pelcula.
Flash exporta una copia SWF de su pelcula.
En la pelcula SWF, la animacin se reproduce de forma automtica de forma continua.
2 Cuando termine de ver la pelcula, cierre el archivo SWF haciendo clic en su cuadro de cierre.
En el documento de Flash, elija Edicin > Editar documento o haga clic en Escena 1 para
volver a la lnea de tiempo principal.
Carga de texto dinmico en tiempo de ejecucin
En la leccin Adicin y edicin de texto ha practicado cmo escribir texto directamente en el
escenario. Puede disear tambin la pelcula para que incluya texto de archivos externos. Uno de
los modos ms sencillos para hacerlo es con la accin loadVariables para cargar texto en un
campo de texto dinmico en tiempo de ejecucin. En el archivo FLA puede especificar atributos
de texto tales como el estilo de fuente, el tamao y el color para el campo de texto dinmico. 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 seccin aprender a realizar las tareas siguientes:
Importar y alinear un logotipo.
Crear un campo de texto dinmico.
Utilizar el inspector de propiedades para asignar un nombre de variable de texto.
Utilizar la accin loadVariables para cargar texto de un archivo externo.
Para completar esta seccin, puede continuar trabajando en el archivo mystiletto.fla o puede ir a la
Importacin del logotipo
Antes de crear el campo de texto dinmico, importar el logotipo, que es un archivo de
Macromedia FreeHand para el que Flash agrega de forma automtica una capa en la lnea de
tiempo.
1 En la lnea de tiempo, seleccione la capa Imgenes 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 seccin 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 aplicacin Flash MX la carpeta Tutorials/FlashIntro/Assets, haga clic
en logo.fh10 y, a continuacin, haga clic en Abrir.
4 En el cuadro de dilogo Importar de FreeHand, verifique que Escenas, Capas y Todo estn
seleccionados. Compruebe tambin que las opciones Incluir capas de fondo y Mantener texto
como bloques estn seleccionadas y, a continuacin, haga clic en Aceptar.
5 En la lnea 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
continuacin, presione Intro o Retorno.
Captulo 1 40
7 En la lnea de tiempo, bloquee la capa Logo.
Creacin de un campo de texto dinmico
Ahora crear un campo de texto dinmico. En lugar de escribir texto en el campo, especificar el
texto de la variable que se carga en el campo en tiempo de ejecucin.
1 En la lnea de tiempo, seleccione la capa Copia. En la caja de herramientas seleccione la
herramienta Texto. En el inspector de propiedades, seleccione Texto dinmico 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 pequeo tamao en diferentes
plataformas. Para obtener ms informacin acerca de las fuentes de dispositivos, consulte
Utilizacin de fuentes de dispositivo (slo texto horizontal) en Ayuda > Utilizacin de Flash.
3 En el cuadro de tamao 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 lnea, seleccione Multilnea, que se utiliza para varias lneas de
texto que se ajustarn.
Men emergente Tipo de lnea
Men emergente Tipo de texto
Men emergente Fuente
Cuadro de tamao en puntos del texto
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 lnea vertical que est
agrupada con el logotipo, como se muestra en la ilustracin 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 dinmico (tal como se ve en la
ilustracin 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 pelcula debe cargar.
Utilizacin de la accin loadVariables para cargar texto
La accin loadVariables incluye un parmetro 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 lnea de tiempo, agregue una capa nueva y asgnele el nombre Acciones. Si es necesario,
arrastre la capa Acciones a la parte superior de la lnea de tiempo.
Se recomienda mantener las acciones en la capa superior de una lnea de tiempo.
2 Si el panel Acciones no est abierto, elija Ventana > Acciones. Ample el panel Acciones, si es
necesario, haciendo clic en la flecha blanca de la barra de ttulo 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
accin. Si, por ejemplo, seleccion un fotograma, el panel Acciones muestra las acciones de los
fotogramas. Si seleccion un botn, el panel Acciones muestra las acciones de los botones.
Captulo 1 42
3 Haga clic en el tringulo de la esquina superior derecha de la barra de ttulo 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 ms experiencia en
ActionScript. En modo normal, los campos de parmetros y controles le guan en la creacin
de cdigo de ActionScript.
4 En la caja de herramientas Acciones, elija Acciones > Navegador/Red y, a continuacin, haga
clic en loadVariables.
El cdigo de ActionScript se agrega al panel Script. Los parmetros de la accin aparecen sobre
el panel Script.
Botn del men Opciones
Caja de herramientas Acciones Panel Script
5 En el cuadro de texto URL, escriba la ruta al archivo de texto: ../assets/copy.txt.
Guarde la pelcula y, a continuacin, elija Control > Probar pelcula.
Tambin puede presionar Ctrl+Intro (Windows) o Comando+Retorno (Macintosh).
Adicin de animacin y navegacin a botones
Cuando se especifica que un smbolo nuevo es un botn, Flash crea la lnea de tiempo para los
estados del botn. En la leccin Creacin de botones, ha aprendido a cambiar el color de relleno
de una forma dentro de un estado de botn. En esta seccin, aprender ms acerca de la
modificacin de botones, incluida la animacin a un botn.
En concreto, en esta seccin aprender a realizar las tareas siguientes:
Importar una biblioteca de otro archivo FLA.
Alineacin de botones.
Agregar animacin a un estado de botn.
Agregar navegacin a un botn para establecer un vnculo con un sitio Web.
Utilizar la funcin Habilitar botones simples.
Adicin de navegacin con botones.
Captulo 1 44
Importacin de la biblioteca de otro archivo FLA
Los botones que utilizar en la pelcula 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
aplicacin Flash MX busque la carpeta Tutorials/FlashIntro/Assets y haga doble clic en el botn
buttons.fla.
La biblioteca del archivo buttons.fla aparece junto a la biblioteca del documento.
Alineacin de botones
Puede alinear los tres botones a lo largo de los ejes vertical y horizontal con el panel Alinear.
1 En la lnea de tiempo, con la capa Copia seleccionada, agregue una capa nueva y asgnele 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 continuacin, desplcese a la parte inferior derecha
del escenario.
3 Arrastre el botn 1 del panel de la biblioteca buttons.fla y colquelo debajo de la esquina
inferior derecha del campo de texto dinmico.
Cuando se arrastra un botn del panel de la biblioteca buttons.fla, el botn pasa a formar parte
de la biblioteca del documento.
4 Arrastre el botn 2 y el botn 3 del panel de la biblioteca buttons.fla y colquelos a la izquierda
del botn 1. Utilice el espaciado aproximado que se muestra en la ilustracin 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 continuacin, haga clic en Distribuir horizontalmente
respecto al centro.
Los botones se alinean en el escenario.
Habilitar botones simples
Cuando la funcin Habilitar botones simples est activa, puede or 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
diseo ms complejo de botones, como las animaciones.
1 Elija Control > Habilitar botones simples y, a continuacin, sitese sobre cada botn y haga
clic en l.
El botn derecho, botn 1, no est listo. A continuacin, lo modificaremos.
2 Cuando haya probado los botones, elija Control > Habilitar botones simples para anular la
seleccin de esa funcin.
Alinear verticalmente respecto al centro
Distribuir horizontalmente respecto al centro
En escenario
Captulo 1 46
Modificacin de un estado de botn
Ahora crear una pelcula dentro del estado Sobre del botn 1 y, a continuacin, crear una
interpolacin de forma en el clip de pelcula. La interpolacin de forma crea un efecto que cambia
el color de gris a rojo.
1 En el escenario, haga doble clic en el botn de la derecha, botn 1, para abrir el modo de
edicin de smbolos.
2 En la lnea de tiempo del botn 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 botn de la derecha. Presione F8
para que el valo se convierta en un smbolo. En el cuadro de dilogo Convertir en smbolo,
asigne al smbolo el nombre Animacin de botn. Seleccione Clip de pelcula y haga clic en
Aceptar.
4 En el escenario, haga doble clic en el smbolo Animacin de botn para abrir el modo de
edicin de smbolos.
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 an en el fotograma 15, seleccione la forma del botn en el escenario y
elija una sombra brillante roja en el men emergente Color de relleno en la caja de
herramientas.
7 En la lnea de tiempo, haga clic en un fotograma entre los fotogramas 1 y 13. En el inspector de
propiedades, seleccione Forma en el men emergente Interpolacin.
Arrastre la cabeza lectora desde el fotograma 1 al 15 para ver el cambio de color.
Adicin de acciones a botones
Cuando el usuario haga clic en el botn y la animacin interpolada se reproduzca, haremos que la
cabeza lectora se mueva al final de la lnea de tiempo de Animacin de botn y se detenga.
ActionScript, el lenguaje de creacin de scripts de Flash, se utiliza para controlar el movimiento de
la cabeza lectora en una lnea de tiempo.
1 Agregue una nueva capa a la lnea de tiempo Animacin de botn y asgnele 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. Ample el panel, si es necesario,
para ver la caja de herramientas Acciones y el panel Script.
4 Con el fotograma 15 de la capa Acciones seleccionado, vaya a la categora Acciones > Control
de pelcula de la caja de herramientas Acciones y haga doble clic en stop.
La accin stop permite indicar, en este caso, que la cabeza lectora se detenga cuando llegue al
fotograma 15.
En la lnea de tiempo de Animacin de botn, el fotograma 15 de la capa Acciones muestra
una a pequea, que indica que se ha adjuntado una accin a ese fotograma.
Adicin de navegacin con botones
La accin getURL se utiliza para agregar navegacin a un botn que se abre en un sitio Web.
1 Elija Edicin > Editar documento o haga clic en Escena 1 para volver a la pelcula principal.
2 En el escenario, haga clic en el Botn 1, el botn 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.
Captulo 1 48
5 En el men emergente Ventana, seleccione _blank para que se inicie una nueva ventana de
navegador cuando el usuario haga clic en el Botn 1.
6 Guarde el archivo y, a continuacin, elija Control > Probar pelcula. Haga clic en el Botn 1
para ir al sitio Web que ha especificado en el paso 4.
7 Cierre el navegador y el archivo SWF y, a continuacin, vuelva al entorno de edicin de Flash.
Si lo desea, puede seleccionar el Botn 2 en el escenario y repetir los pasos del 3 al 7 para
vincularlo con otro sitio Web y, a continuacin, repetir los pasos para el Botn 3. Cuando haya
agregado todos los vnculos, cierre el panel Acciones.
Agregar flujos y sonidos de eventos
Cuando se est descargando una pelcula de una fuente de Internet, puede empezar a reproducirse
un flujo de sonido inmediatamente despus 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 seccin aprender a
realizar las tareas siguientes:
Agregar un flujo de sonido a la pelcula.
Adicin de un sonido de evento a un botn.
Adicin de un flujo de sonido
Puede incluir sonido en la pelcula arrastrando el sonido al escenario. Aqu agregar msica de
fondo que fluya y se reproduzca un nmero de veces determinado.
1 En la lnea de tiempo, con la capa Botones seleccionada, agregue una capa nueva y asgnele el
nombre Sonidos.
2 Elija Archivo > Importar. En la carpeta de la aplicacin 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 seleccin y, a
continuacin, 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 lnea de tiempo, una representacin pequea de ondas de sonido aparece en el fotograma.
4 Seleccione el primer fotograma de la capa Sonidos en la lnea de tiempo. En el inspector de
propiedades, escriba 999 en el cuadro de texto Bucle para especificar el nmero de veces que el
sonido puede reproducirse de forma continua.
1 Guarde el archivo y, a continuacin, elija Control > Probar pelcula para or el sonido.
2 Cuando se termine de reproducir la pelcula, haga clic en el cuadro de cierre de la pelcula.
Adicin de un sonido de evento a un botn
Adems de arrastrar un sonido al escenario, puede seleccionar un sonido en el inspector de
propiedades. A continuacin utilizar este mtodo para agregar un sonido de evento a un botn.
Como ha aprendido en la leccin Creacin de botones, al crear un smbolo de botn, Flash crea
fotogramas para los distintos estados de botn en relacin con el puntero del ratn. El fotograma
Sobre, por ejemplo, representa el estado del botn cuando el puntero est sobre el botn. Otros
estados/fotogramas de botn son Reposo, Presionado y Zona activa.
Ahora agregar un sonido de evento a un botn, lo que hace que el sonido se reproduzca mientras
el botn est en estado Sobre. Como est agregando el sonido al smbolo del botn en la
biblioteca y no slo a una instancia del smbolo, el sonido se reproducir en cada instancia del
botn.
1 En el panel Biblioteca, haga doble clic en la instancia Botn 1 para abrir el modo de edicin de
smbolos.
2 En la lnea de tiempo para el Botn 1, agregue una capa nueva y asgnele el nombre Sonido.
3 Seleccione el fotograma Sobre (Fotograma 2) de la capa Sonido y elija Insertar > Fotograma
clave o presione F6.
Captulo 1 50
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 pelcula para or los sonidos del botn. Cuando
haya visto el archivo SWF, cierre su ventana para volver al documento.
Organizacin del panel Biblioteca
Actualmente dispone de bastantes elementos en el panel Biblioteca. Para organizarlos, localizarlos
fcilmente y establecer categoras segn el tipo, crear carpetas y, a continuacin, mover all los
elementos.
Sugerencia: se recomienda tener organizado el panel Biblioteca de cualquier pelcula que se edite, especialmente
para que otras personas que trabajen en el mismo archivo puedan encontrar fcilmente los elementos.
1 Si el panel Biblioteca no est abierto, seleccione Ventana > Biblioteca.
2 Expanda y ample la ventana, segn sea necesario, para ver todos los elementos del panel
Biblioteca. En la parte inferior del panel Biblioteca, haga clic en el botn Nueva carpeta cuatro
veces para crear cuatro carpetas nuevas.
3 Haga doble clic en el nombre de la carpeta sin ttulo 1 y cmbiele el nombre por el de Clips de
pelcula de animacin 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 Animacin de coche a la carpeta Clips
de pelcula de animacin 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 Botn 1, Botn 2 y Botn 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 pelcula de botones y, a continuacin, arrastre los
elementos restantes de clips de pelcula de botn a esta carpeta.
10 Cierre el panel Biblioteca y guarde el documento.
Captulo 1 52
Prueba del rendimiento de descarga y publicacin de la pelcula
Para acabar el documento, utilizar el comando Publicar para crear una pelcula compatible con
Internet cuya extensin 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 Configuracin de publicacin necesarias, podr elegir Archivo >
Publicar para exportar al mismo tiempo a todos los formatos seleccionados. Flash almacena la
configuracin de publicacin que se especifica con el documento, de manera que cada pelcula
puede tener su propia configuracin.
En esta seccin aprender a realizar las tareas siguientes:
Utilizar el Creador de perfil para ancho de banda para probar el rendimiento de descarga de la
pelcula.
Publicar la pelcula en un paso.
Revisar y modificar la configuracin de publicacin.
Ver la pelcula en un navegador Web.
Para completar esta seccin, puede continuar trabajando con el archivo mystiletto.fla o puede ir a
la carpeta de la aplicacin Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto7.fla. Si utiliza
el archivo stiletto7.fla, gurdelo con un nombre nuevo en la carpeta My_Stiletto para mantener
una versin no modificada del archivo original.
Comprobacin del rendimiento de descarga de la pelcula
Para que una pelcula Flash se reproduzca correctamente en Internet, se debe descargar un
fotograma antes de que la pelcula alcance ese fotograma. Si la pelcula alcanza un fotograma que
no se ha descargado an, se pondr en pausa hasta que lleguen los datos. El ancho de banda
reducido de los archivos Flash favorece las descargas rpidas.
Podr usar el Creador de perfil del ancho de banda para comprobar su pelcula e identificar dnde
podran ocurrir las pausas. El Creador de perfil para ancho de banda muestra el volumen de datos
que se enva desde cada fotograma de la pelcula en funcin de la velocidad definida del mdem.
1 Guarde el documento y elija Control > Probar pelcula.
2 En el men Depuracin, seleccione una velocidad de mdem para determinar la velocidad de
descarga que Flash simular.
Tambin puede elegir Personalizar para introducir una velocidad de descarga.
3 Elija Ver > Creador de perfil para ancho de banda para ver el archivo SWF con un grfico del
rendimiento de descarga.
La barra sombreada representa el primer y nico fotograma de la pelcula principal. Las
pelculas con varios fotogramas tendrn varias barras sombreadas. La altura de la barra
representa el tamao del fotograma en bytes y kilobytes. Las barras que se extienden sobre la
lnea roja, especialmente si la barra representa un fotograma distinto del primero, indican que
pueden producirse demoras en la reproduccin de la pelcula. Puede optimizar la pelcula para
que se descargue con ms rapidez. Para obtener detalles, consulte la seccin Optimizacin de
pelculas en Ayuda > Utilizacin 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 seleccin. Cierre la ventana del archivo SWF para regresar
al entorno de edicin.
Utilizacin 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 pelcula creando un archivo SWF y posiblemente archivos adicionales basados
en los atributos definidos en el cuadro de dilogo Configuracin de publicacin. Encontrar
los archivos publicados, de manera predeterminada, en la misma carpeta donde ha guardado el
archivo FLA.
Captulo 1 54
Visualizacin de las configuraciones de publicacin
Mediante el cuadro de dilogo Configuracin de publicacin es fcil volver a configurar la forma
en que se publica su archivo.
1 Para ver la configuracin de sus publicaciones elija Archivo > Configuracin de publicacin
Flash est configurado de forma predeterminada para crear un archivo HTML de apoyo que
muestre la pelcula 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) estn seleccionados. Haga
clic en la ficha Flash.
De manera predeterminada, la pelcula se publica para Flash Player. En el proceso de
publicacin tambin se aplica la compresin de pelculas y JPEG.
3 Haga clic en la ficha HTML.
De manera predeterminada, el proceso de publicacin crea un documento HTML que inserta
el archivo SWF en una ventana de navegador. La configuracin de la ficha HTML del cuadro
de dilogo Configuracin de publicacin determina el modo en que la pelcula aparece en el
navegador.
Cambio en la configuracin de publicacin
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 dilogo Configuracin de publicacin anule la seleccin 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 continuacin, haga clic en Publicar. Cuando se cierre la ventana
de estado Publicacin, haga clic en Aceptar en el cuadro de dilogo Configuracin de
publicacin.
Visualizacin de la pelcula publicada en un navegador
Puede ver el archivo HTML y la pelcula SWF, que acaba de publicar, en el navegador.
1 Abra el navegador y, a continuacin, 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 pelcula SWF se reproduce en el navegador.
2 En el navegador puede utilizar un comando como Ver > Origen de la pgina o Ver > Cdigo
fuente para ver el cdigo HTML.
Las etiquetas OBJECT y EMBED garantizan que la pelcula SWF se visualice en el navegador.
Para obtener ms informacin acerca de las plantillas HTML de Flash, consulte la seccin .
Pasos siguientes
Al completar las ocho secciones del tutorial ha aprendido mucho acerca de la creacin de pelculas
Flash, incluidas las tareas siguientes:
Analizar una pelcula finalizada.
Definir propiedades de documentos y crear un degradado.
Captulo 1 56
Crear y enmascarar ilustraciones vectoriales.
Interpolar efectos de mapa de bits dentro de un clip de pelcula.
Cargar texto dinmico.
Modificar botones y agregar funciones de navegacin.
Agregar flujos y sonidos de eventos.
Probar y publicar una pelcula.
Puede aprender ms acerca de las posibilidades de Flash consultando el Tutorial de introduccin a
ActionScript en Ayuda > Tutoriales. Al estar diseado para personas no familiarizadas con
ActionScript, el tutorial sirve de introduccin a los conceptos de creacin de scripts permitiendo,
a la vez, crear un rompecabezas con diferentes acciones. Adems, puede buscar los artculos y
notas tcnicas 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.
57
CAPTULO 2
Tutorial de introduccin a ActionScript
ActionScript es el lenguaje de creacin de scripts de Macromedia Flash MX. El lenguaje de
creacin 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 pelcula. Esta
comunicacin bidireccional permite crear pelculas interactivas. En este tutorial se examinarn las
tareas relacionadas con la creacin de un rompecabezas interactivo.
Este tutorial est diseado 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 bsicas y debe
saber cmo asignarlas en el panel Acciones. Para sacar el mximo provecho de este tutorial, antes
debe realizar el Tutorial de introduccin a Flash MX, en Ayuda > Tutoriales. Asimismo, debe estar
familiarizado con los conceptos presentados en las secciones Creacin de scripts con
ActionScript y Creacin de interacciones con ActionScript en Ayuda > Utilizacin de Flash.
Tardar una hora aproximadamente en completar este tutorial (dependiendo de su experiencia) y
aprender a realizar las tareas siguientes:
Inicializacin de la pelcula.
Almacenamiento y recuperacin de informacin.
Visualizacin de informacin en un cuadro de texto dinmico.
Especificacin de una expresin.
Control del flujo de la pelcula.
Creacin de comandos y reutilizacin de cdigo.
Utilizacin de un objeto incorporado.
Prueba de la pelcula.
Captulo 2 58
Visualizacin de una pelcula completa
Antes de empezar a trabajar en su propia pelcula, puede ver una versin completa del tutorial
para hacerse una idea de lo que crear. Adems, con el tutorial completo tendr la oportunidad de
examinar la lnea de tiempo, el explorador de pelculas, el escenario y el panel Acciones, con los
que podr comprender las prcticas de edicin.
1 En la carpeta de la aplicacin Flash MX, vaya a Tutorials/ActionScript/Finished. Haga doble
clic en el archivo puzzle.swf para abrir la pelcula completa en el Flash Player independiente.
2 En la pelcula puzzle.swf, haga clic en el botn Aceptar.
Las piezas del rompecabezas se desordenan.
3 Haga clic en todos los botones Mostrar/Ocultar.
Observe que aparecen los diferentes patrones y nmeros de pieza como gua para componer el
rompecabezas.
4 Haga clic en una pieza del rompecabezas y arrstrela al rea de la solucin.
La pieza se coloca en su sitio.
5 Presione Mays y haga clic en una pieza del rompecabezas.
El nmero de la pieza aparece en el crculo situado debajo del rea de la solucin. Si no puede
continuar, puede hacer coincidir el nmero de pieza con su ubicacin en la gua de nmeros de
pieza.
6 Presione la tecla Alt (Windows) o la tecla Opcin (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.
Tutorial de introduccin a ActionScript 59
Anlisis del archivo puzzle.fla
Resulta til analizar el archivo FLA completo para determinar cmo lo ha compuesto el autor y
dnde se encuentran los elementos de ActionScript.
1 En Flash, elija Archivo > Abrir. En la carpeta de la aplicacin Flash MX, vaya a Tutorials/
ActionScript/Finished y abra el archivo puzzle.fla.
Aparecer la pelcula del tutorial completa en el entorno de edicin.
2 Para ver todo el contenido en el escenario, seleccione Ver > Aumentar y reducir > Mostrar
fotograma.
La pelcula slo contiene un fotograma, que se muestra en la lnea de tiempo principal del
archivo puzzle.fla. Utilizar ActionScript para mostrar y ocultar los diferentes cuadros de
dilogo y las guas de patrones que aparecen en el rompecabezas.
3 Para cambiar el tamao de la lnea de tiempo y del escenario, arrastre la barra que los separa de
arriba a abajo. Desplcese por la lnea de tiempo para ver la forma en que se organizan las
capas.
4 Para ver los cuadros de dilogo y las guas en el escenario del entorno de edicin, 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 visualizacin
de los bordes de las formas y puede hacer que Flash funcione ms rpido.
Mueva esta barra para cambiar el
tamao de la lnea de tiempo
Captulo 2 60
5 Seleccione el fotograma 1 de la capa de acciones.
El fotograma 1 tiene una a minscula, que indica que hay acciones asociadas al fotograma.
Para agregar un elemento de ActionScript a una pelcula, debe asignarlo a un botn, a un
fotograma o a un clip de pelcula. Los scripts de fotograma se indican mediante una a
minscula en la lnea de tiempo. Para localizar scripts de botones y de clips de pelcula, 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 ttulo del panel Acciones).
Seleccione los botones y los clips de pelcula 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 pelculas.
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 cmo agregar
acciones en modo Normal.
Visualizacin de acciones en el explorador de pelculas
1 Para localizar todas las acciones de la pelcula, utilice el explorador de pelculas. Si no est
abierto, seleccione Ventana > Explorador de Pelculas.
En el explorador de pelculas, anule la seleccin de todos los botones de filtrado excepto el
botn ActionScript. Adems de las acciones del fotograma 1 de la capa de acciones, las acciones
tambin se incluyen en cada uno de los botones Mostrar/Ocultar, en los botones de los
diferentes cuadros de dilogo que aparecen y en cada pieza del rompecabezas.
2 Seleccione Archivo > Cerrar para cerrar la pelcula puzzle.fla cuando haya terminado. No
guarde los cambios en el archivo terminado.
Inicializacin de la pelcula
Todas las pelculas tienen un estado inicial. Esto muestra el aspecto de una pelcula antes de que se
reproduzca y de que otros interacten con ella. En ocasiones deber establecer variables y
propiedades de clip de pelcula para establecer este primer estado. Por ejemplo, en el archivo
puzzle.fla, deben ocultarse algunos cuadros de dilogo y guas de patrn en el estado inicial.
Cada clip de pelcula en una pelcula 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 carcter de subrayado (_). Por ejemplo, cada clip de pelcula tiene una
propiedad _xscale, una propiedad _yscale y una propiedad _rotation, entre otras.
ActionScript utiliza variables para almacenar informacin. Por ejemplo, la variable myName puede
contener el valor Jody Singer. En la seccin Almacenamiento y recuperacin de
informacin en la pagina 65 podr obtener ms informacin sobre las variables.
Las propiedades y las variables se inicializan en el primer fotograma de una pelcula. Puede asignar
una accin de fotograma en la lnea de tiempo o puede asociar una accin de objeto a un clip de
pelcula. En la pelcula del rompecabezas, las propiedades de los clips de pelcula de gua de patrn
y de cuadro de dilogo se inicializan en el primer fotograma de la lnea de tiempo principal.
Apertura del archivo inicial
Ahora estar listo para crear su propia versin de la pelcula del tutorial.
1 Elija Archivo > Abrir.
2 En la carpeta de la aplicacin Flash MX, vaya a Tutorials/ActionScript/My_Puzzle y abra el
archivo mypuzzle.fla.
3 Si recibe un mensaje de sustitucin de fuentes, haga clic en Usar opciones predeterminadas.
Ver una pelcula del tutorial completada parcialmente. La pelcula puede parecer completa
porque todos los smbolos se encuentran en su sitio en el escenario. Sin embargo, todava debe
agregar algunos scripts para hacer que la pelcula 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 podrn volver a realizar el tutorial con el
archivo mypuzzle.fla original. Asimismo, si de forma peridica 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.
Definicin de las propiedades del clip de pelcula
La pelcula puzzle.fla tiene tres cuadros de dilogo: 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 guas que cubren el rea de la solucin para ayudar a los
usuarios a resolver el rompecabezas. Cada uno de estos cuadros de dilogo, patrones y guas es un
clip de pelcula.
Captulo 2 62
Para iniciar la pelcula, debe ocultar algunos clips de pelcula para que slo aparezcan el cuadro de
dilogo 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 informacin de utilidad para
comprender los scripts.
2 Haga clic en el men emergente de la esquina superior derecha de la barra de ttulo del panel
Acciones. Verifique que el modo Normal y Ver nmeros de lnea estn seleccionados.
3 En el panel Script, haga clic en la lnea 4 para seleccionar el cdigo con el comentario //ENTER
code here.
4 En la categora Acciones > Acciones varias de la caja de herramientas Acciones de la parte
izquierda, haga doble clic en la accin evaluate para agregar una lnea de cdigo vaca 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 insercin en el cuadro de texto Expresin del panel Acciones, haga clic en el
botn Insertar ruta de destino.
Aparece el cuadro de dilogo Insertar ruta de destino.
6 Verifique que los elementos Puntos, que significa notacin con puntos, y Absoluto, que
significa ruta absoluta, estn seleccionados.
En el cuadro de dilogo ver una lista de clips de pelcula que puede seleccionar.
7 Seleccione el clip de pelcula edges en el rbol de clips de pelcula y, a continuacin, haga clic
en Aceptar.
El cdigo siguiente aparece en el cuadro de texto Expresin:
_root.edges
La ruta de destino indica a ActionScript la ubicacin de un clip de pelcula dentro de la
estructura general de una pelcula Flash. La propiedad _root hace referencia a la lnea de
tiempo principal y el clip de pelcula edges se encuentra en el escenario de la lnea de tiempo
principal. Cualquier ruta que empieza por _root se denomina ruta absoluta, puesto que
proporciona la ruta absoluta de un clip de pelcula desde la lnea de tiempo principal.
8 Con el punto de insercin situado despus de _root.edges, especifique ._visible = false en el
cuadro de texto Expresin.
Esta lnea de cdigo hace que el clip de pelcula no sea visible en el escenario.
Puede escribir el cdigo 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 accin y decide que desea eliminarla, seleccione la accin
en el panel Script y haga clic en el botn menos (-) del panel Acciones.
9 En la caja de herramientas Acciones, haga doble clic de nuevo en la accin evaluate para
agregar una lnea de cdigo vaca que termine con un punto y coma. Repita los pasos 5 y 6 y
seleccione el clip de pelcula pattern en el cuadro de dilogo Insertar ruta de destino. Repita el
paso 8 y escriba de nuevo ._visible = false en el cuadro de texto Expresin.
10 Siga repitiendo los pasos 4 a 8, seleccione los clips de pelcula image, piecenumbers,
scramblebutton, areYouSure y congrats en el cuadro de dilogo Insertar ruta de destino y
escriba ._visible = false para cada clip de pelcula. Cuando haya terminado, el script tendr el
aspecto siguiente:
Captulo 2 64
11 Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de
asignacin de nombre consecutivo, como por ejemplo mypuzzle3.fla, para poder volver a
versiones anteriores del archivo si es necesario.
Utilizacin del panel Referencia
Durante la edicin, si desea obtener informacin adicional sobre el elemento de ActionScript que
ha especificado, seleccione la accin en la caja de herramientas Acciones o en el panel Script y, a
continuacin, haga clic en el botn Referencia. El panel Referencia, un sistema de ayuda
organizado de forma similar al panel Acciones, muestra informacin sobre la accin seleccionada.
Revisin de la sintaxis
ActionScript, como el lenguaje escrito, depende de una sintaxis correcta. Si la sintaxis es
incorrecta, la accin 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 ttulo
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 informacin sobre el error.
2 Haga clic en Aceptar para cerrar el mensaje de sintaxis.
En modo Normal, los errores de sintaxis de ActionScript aparecen resaltados en rojo en el panel
Script. Si mueve el puntero del ratn sobre el error, aparecer un cuadro de informacin con el
mensaje de error. Los mensajes de error de sintaxis tambin aparecen resaltados junto a la parte
inferior del rea de estado del panel Acciones.
Asimismo, tal y como se describe en el Tutorial de introduccin a Flash MX, puede elegir
Control > Probar pelcula durante la edicin para comprobar que la pelcula se reproduce como se
espera.
Almacenamiento y recuperacin de informacin
Para crear una pelcula Flash compleja e interactiva, Flash necesita realizar un seguimiento de la
informacin y de la actividad del usuario: los botones que se han presionado, un nombre de
usuario, una puntuacin o las secciones que ha visitado el usuario. ActionScript utiliza variables
para almacenar informacin que puede recuperar y volver a utilizar. Puede declarar una variable
en un script en una lnea de tiempo y utilizarla en otra lnea de tiempo de la misma pelcula. 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 pelcula en un script.
En el archivo puzzle.fla, ActionScript utiliza la variable dialog para realizar un seguimiento de la
visibilidad de un cuadro de dilogo. Cuando aparece un cuadro de dilogo, la variable dialog se
establece en true; cuando un usuario hace clic en un botn de un cuadro de dilogo, la variable
dialog se establece en false. Esta variable no afecta la visibilidad de los cuadros de dilogo;
simplemente es un contenedor que incluye informacin que puede utilizar en scripts en la
pelcula. En el archivo puzzle.fla, si dialog se establece en true, el usuario no puede mover una
pieza del rompecabezas.
Captulo 2 66
Cmo declarar una variable y asignarle un valor
Cuando necesita una variable, debe mencionarla o declararla. Tambin debe asignarle un valor.
Puede hacer las dos cosas a la vez o puede declarar una variable en una sentencia y, a continuacin,
asignarle un valor en una sentencia posterior.
ActionScript utiliza tres tipos de variables: variables locales, variables globales y variables de lnea
de tiempo. Puede utilizar la accin var situada dentro de un bloque de cdigo (indicado mediante
llaves {}) para crear una variable local, que desaparece cuando el bloque de cdigo termina de
ejecutarse. Puede utilizar la accin set variable para crear una variable de lnea de tiempo
asociada a la lnea de tiempo de un clip de pelcula, que puede utilizarse en cualquier script del
documento. Para obtener ms informacin sobre variables, consulte El lenguaje ActionScript en
Ayuda > Utilizacin de Flash.
El archivo puzzle.fla utiliza la accin var y la accin set variable en funcin de la situacin.
Cuando slo se necesita una variable en un bloque de cdigo, se utiliza la accin var. La variable
dialog se establece y se asigna mediante la accin set variable.
A continuacin declarar y asignar un valor a la variable dialog:
1 Seleccione Archivo > Abrir y elija la ltima versin guardada del archivo mypuzzle.fla.
Nota: tambin puede ir a la carpeta de la aplicacin 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 versin 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 lnea 11, que es la ltima lnea del cdigo de
la seccin de inicializacin. En la caja de herramientas Acciones, elija Acciones > Variables y
haga doble clic en la accin set variable.
4 Escriba dialog en el cuadro de texto Variable.
5 Escriba true en el cuadro de texto Valor. Seleccione Expresin, a la derecha del cuadro de texto
Valor.
Al seleccionar Expresin indicar a Flash que true no es una cadena literal de caracteres.
En el estado inicial de la pelcula, aparecer un cuadro de dilogo en el escenario. Por lo tanto,
la variable dialog debe establecerse en true al principio de la pelcula; de lo contrario, un
usuario podr mover las piezas del rompecabezas antes de que se desordenen.
asignacin de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario.
Visualizacin de informacin en un cuadro de texto dinmico
Los cuadros de texto dinmicos pueden mostrar texto que cambia en una pelcula Flash. Puede
utilizar el inspector de propiedades para crear un cuadro de texto dinmico 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 dinmico muestra los nmeros de las piezas del
rompecabezas cuando un usuario presiona Mays y hace clic en una pieza. A continuacin
asignar un nombre de variable para el cuadro de texto dinmico.
1 Si es necesario, seleccione Archivo > Abrir y elija la ltima versin guardada del archivo
mypuzzle.fla.
2 En la lnea de tiempo, desbloquee la capa de gua de nmeros de pieza si est bloqueada.
Captulo 2 68
3 Haga doble clic en el clip de pelcula de crculo de nmero de pieza en el escenario, bajo la
esquina inferior derecha del rea de solucin del rompecabezas.
Se abrir el crculo de nmero de pieza en modo de edicin de smbolos.
4 Seleccione la capa de texto en la lnea de tiempo. En el escenario, haga clic en el centro del
crculo de nmero 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 dinmico en el men emergente Tipo de texto.
6 En el men emergente Tipo de lnea, verifique que Lnea nica est seleccionado.
Clip de pelcula de crculo de nmero de pieza
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 pelcula, deben tener como
referencia sus respectivas rutas. La variable pieceNumber se declara y se actualiza en la funcin
RotateDisplayOrDrag en la lnea de tiempo principal, pero el cuadro de texto de la variable se
encuentra en la lnea de tiempo del crculo de nmero 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 lnea de tiempo principal.
8 Elija Edicin > Editar documento y haga clic en el botn Atrs o haga clic en Escena 1 para
regresar a la lnea de tiempo principal.
asignacin de nombre consecutivo para poder volver a versiones anteriores del archivo si es
necesario.
Especificacin de una expresin
Si ha sumado dos nmeros en una ecuacin matemtica, ha utilizado un operador. Un operador es
un smbolo que realiza una tarea, u operacin, en uno o varios datos, denominados operandos. Por
ejemplo, en la expresin 2 + 2, el signo ms (+) es el operador y cada nmero es un operando.
Una expresin es cualquier cdigo ActionScript que puede calcularse para generar un solo valor.
Por ejemplo, el cdigo miEdad + 17 es una expresin, porque cuando se ejecuta el cdigo,
ActionScript busca el valor de la variable miEdad, le suma el nmero 17 y genera un nuevo valor.
Si el valor de miEdad es 47, el nuevo valor sera 64.
Los operadores permiten recoger la informacin 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 solucin, pero cmo puede
determinar que la pieza se encuentra en el lugar correcto? Y si la pieza se encuentra en el lugar
correcto, cmo puede determinar que se ha resuelto el rompecabezas? Para examinar expresiones
creadas con operadores aritmticos en este tipo de situaciones, seleccione Fotograma 1 en la lnea
de tiempo principal, abra el panel Acciones y observe la funcin IsItDone en la lnea 50.
ActionScript tiene operadores numricos, o aritmticos, pero tambin tiene otras clases de
operadores para realizar diferentes tipos de operaciones. Por ejemplo, un operador de
comparacin compara el valor para determinar si un operando es mayor, menor o igual que otro,
mientras que un operador lgico calcula un valor true o false, denominado tambin valor
booleano, para una expresin.
Captulo 2 70
A continuacin utilizar un operador, denominado operador lgico NOT, para escribir una
expresin que muestre y oculte el patrn del rompecabezas. El operador lgico NOT,
representado mediante un signo de exclamacin (!), calcula el valor booleano opuesto de su
operando. Por ejemplo, la expresin !true da como resultado el valor false.
mypuzzle.fla.
2 Haga clic en el botn para mostrar u ocultar los bordes del patrn del escenario. Si el panel
Acciones no est abierto, elija Ventana > Acciones.
El panel Acciones muestra acciones asociadas al botn.
3 Seleccione la lnea de cdigo siguiente en el panel Script:
// ENTER code here
4 En la caja de herramientas Acciones, elija Acciones > Acciones varias y arrastre la accin
evaluate al panel Script.
Cuando agregue la accin, se colocar en un cdigo denominado controlador de eventos. El
cdigo tiene el aspecto siguiente:
on (release) {
;
}
5 En la caja de herramientas Acciones, haga doble clic en la accin evaluate para agregar otra
lnea de cdigo vaca.
El cdigo tiene ahora el aspecto siguiente:
on (release) {
;
;
}
6 Seleccione la primera lnea vaca (la lnea con el primer punto y coma) y coloque el punto de
insercin en el cuadro de texto Expresin.
A continuacin especificar un cdigo que ocultar el clip de pelcula pattern; un usuario ver
el clip de pelcula pattern o el clip de pelcula edges, pero no los dos.
7 Escriba _root.pattern._visible = false en el cuadro de texto Expresin.
Puede escribir la ruta directamente en el cuadro de texto Expresin, o bien utilizar el cuadro de
dilogo Insertar ruta de destino para seleccionar el clip de pelcula pattern. Si utiliza el cuadro
de dilogo Insertar ruta de destino, seleccione Puntos y Absoluto.
Nota: a medida que especifica parmetros y propiedades en modo normal, es posible que observe consejos de
cdigos (informacin que aparece para sugerir la sintaxis completa de una accin); puede hacer clic en un
consejo de cdigo para especificar la sintaxis. Para obtener ms informacin sobre los consejos de cdigos y
sobre cmo activarlos y desactivarlos, consulte la seccin Utilizacin de los consejos de cdigo en Ayuda >
Utilizacin de Flash.
8 Seleccione la segunda lnea vaca y coloque el punto de insercin en el cuadro de texto
Expresin.
9 Escriba _root.edges._visible = ! en el cuadro de texto Expresin.
Pase por alto el mensaje de error de sintaxis que aparece.
El signo de exclamacin (!) es un operador lgico NOT. Adems de escribir el texto en el
cuadro de texto Expresin, puede agregarlo al cuadro de texto de la caja de herramientas
Acciones seleccionando Operadores > Operadores lgicos y haciendo doble clic en el signo de
exclamacin.
10 Escriba de nuevo _root.edges._visible en el cuadro de texto Expresin despus del operador.
El cdigo deber ser similar al siguiente:
on (release){
_root.pattern._visible = false;
_root.edges._visible = !_root.edges._visible;
}
La primera lnea de cdigo del controlador de eventos establece la visibilidad del clip de
pelcula pattern en false. La segunda lnea de cdigo establece la visibilidad del clip de
pelcula edges en el estado contrario al actual. Con esto se crea una alternacin que muestra u
oculta el clip de pelcula.
Control del flujo de la pelcula
Sin ActionScript, la pelcula 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 progresin de una pelcula de forma ms precisa, adems de proporcionarle ms
control al usuario. Por ejemplo, puede establecer una accin en el fotograma 5 que detenga la
pelcula hasta que un usuario presione el botn de reproduccin. Este es un sencillo ejemplo sobre
cmo controlar el flujo de una pelcula.
Captulo 2 72
Puede utilizar las acciones if, else y else if (denominadas tambin sentencias) para crear un
flujo de pelcula ms complejo denominado lgica. Estas tres acciones llevan a cabo las tareas
siguientes:
La accin if permite a Flash comprobar una condicin en la pelcula y ejecutar determinadas
acciones si se produce dicha condicin.
La sentencia else indica a Flash que ejecute un conjunto de acciones diferentes si no se
produce la condicin if.
La sentencia else if permite a Flash comprobar otra condicin antes de ejecutar un conjunto
de acciones diferentes.
Especificacin de una sentencia condicional
Ya ha utilizado un operador para mostrar y ocultar un clip de pelcula. A continuacin utilizar
una sentencia if para crear una lgica que muestre y oculte el clip de pelcula piece numbers. En
este ejemplo se utiliza con fines didcticos un elemento ActionScript diferente para obtener el
mismo resultado.
mypuzzle.fla.
2 En el escenario, haga clic en el botn para mostrar u ocultar la matriz de nmeros de pieza. Si
el panel Acciones no est abierto, elija Ventana > Acciones. En la caja de herramientas
Acciones, elija la categora Acciones > Condiciones/Bucles.
3 Haga doble clic en la accin if. En cdigo siguiente aparece en el panel Acciones:
on (release) {
if (<not set yet>) {
}
}
4 Con la lnea de cdigo que contiene la accin if seleccionada, haga doble clic en la accin
else en la caja de herramientas Acciones.
El cdigo es similar al siguiente:
on (release) {
} else {
}
}
5 Seleccione la lnea 3, que empieza por if y, con el punto de insercin en el cuadro de texto
Condicin, haga clic en el botn Insertar ruta de destino. Seleccione el clip de pelcula
piecenumbers, Puntos, Absoluto y haga clic en Aceptar. El cdigo siguiente aparece en el
cuadro de texto Condicin:
_root.piecenumbers
6 Con el punto de insercin en el cuadro de texto Condicin, especifique ._visible despus de
_root.piecenumbers.
7 En la categora Acciones > Acciones varias en la caja de herramientas Acciones, haga doble clic
en la accin evaluate para agregar una lnea de cdigo vaca.
8 Especifique _root.piecenumbers._visible = false en el cuadro de texto Expresin.
Puede utilizar el botn Insertar ruta de destino o puede escribir el cdigo manualmente. El
cdigo tendr el aspecto siguiente:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
}
}
Cuando se reproduce la pelcula, Flash comprueba la expresin comprendida ente los
parntesis de condicin. La expresin debe ser igual a uno de los valores booleanos true o
false. En este ejemplo se utiliza la condicin de la accin if para comprobar si el clip de
pelcula piecenumbers est visible en el escenario. Si la propiedad _visible es true,
ActionScript ejecuta el cdigo entre llaves y establece la propiedad _visible en false, con lo
que se oculta el clip de pelcula en el escenario.
9 En el panel Script, seleccione la lnea de cdigo con la accin else y haga doble clic en la
accin evaluate.
10 Especifique _root.piecenumbers._visible = true en el cuadro de texto Expresin.
El cdigo ActionScript final es similar al siguiente:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
} else {
_root.piecenumbers._visible = true;
}
}
asignacin de nombre consecutivo para poder volver a versiones anteriores del archivo si es
necesario.
Creacin de comandos y reutilizacin de cdigo
ActionScript contiene acciones que permiten controlar una pelcula de maneras especficas. Por
ejemplo, la accin play mueve la cabeza lectora hacia delante en la lnea de tiempo y la accin
loadMovie carga otra pelcula Flash en Flash Player. Cada una de estas acciones indican a Flash
que realice una determinada tarea. Puede crear sus propios comandos en sus pelculas. Por
ejemplo, en el archivo puzzle.fla, necesita un comando que desordene las piezas del rompecabezas.
Para saber cmo 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 pelcula
tiene una propiedad _x e _y para establecer la posicin y una propiedad _rotation para
establecer su rotacin. Para que las piezas se dispongan y giren de forma aleatoria, debe generar un
nmero aleatorio para utilizarlo en una expresin. ActionScript incorpora un objeto Math con el
mtodo random que puede utilizar para este fin.
Captulo 2 74
En ActionScript, un comando se denomina funcin. Una funcin es un script que puede utilizar
una y otra vez en una pelcula para realizar una determinada tarea. Por ejemplo, en el archivo
puzzle.fla, cada vez que un usuario haga clic en el botn para desordenar piezas, se ejecutar, o se
llamar a, la funcin Scramble. Esta funcin 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 funcin
se escribe, o se declara, una vez y se llama con cada botn. Para examinar la funcin Scramble,
seleccione Fotograma 1 en la lnea de tiempo principal y abra el panel Acciones. Desplcese por el
panel Script hasta que vea la funcin Scramble.
Puede concebir una funcin como una mquina que trabaja para usted. Esta mquina puede
generar diferentes resultados dependiendo de los elementos incluidos. Por ejemplo, si coloca
pltanos en una licuadora, obtendr un batido de pltano y no de melocotn. Los elementos que
se pasan a una funcin se denominan parmetros o argumentos. Los parmetros se incluyen entre
los parntesis que siguen a la funcin. Por ejemplo, en la funcin
RotateDisplayOrDrag(whichPiece) se pasa el nombre de una pieza del rompecabezas y slo se
aplica a dicha pieza. Los parmetros permiten volver a utilizar funciones en muchas situaciones
diferentes.
Las funciones suelen declararse en el primer fotograma de la pelcula. En los archivos puzzle.fla,
las funciones se declaran en el fotograma 1.
Especificacin de una funcin
A continuacin declarar una funcin 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 Desplcese por el panel Script y seleccione la lnea 31. Se resaltar la lnea comentada siguiente:
// ENTER RotateDisplayOrDrag() function here
4 En la categora Acciones > Funciones definidas por el usuario en la caja de herramientas
Acciones, haga doble clic en la accin function.
Escriba RotateDisplayOrDrag en el cuadro de texto Nombre. Escriba whichPiece en el cuadro
de texto Parmetros. El cdigo de la lnea 32 ser similar al siguiente:
function RotateDisplayOrDrag (whichPiece) {
}
Se llamar al parmetro whichPiece (que identifica la pieza seleccionada del rompecabezas)
tres veces en el cuerpo de la funcin. Cuando se llama a la funcin, el parmetro pasado se
sustituye por whichPiece en cada sentencia.
5 En la categora Acciones > Condiciones/Bucles en la caja de herramientas Acciones, haga doble
clic en la accin if, la accin else if y la accin else.
Nota: tambin puede seleccionar las acciones en el men emergente Ms (+).
El cdigo tiene el aspecto siguiente:
} else if (<not set yet>) {
} else {
}
}
Con este cdigo se crea la estructura lgica de la funcin. Debe proporcionar las condiciones
que deben comprobarse en cada sentencia if. Asimismo, en el cdigo debe facilitar cada
conjunto de datos entre llaves que se ejecutar cuando se cumplan las condiciones.
6 Seleccione la lnea de cdigo que contiene la sentencia if. Especifique Key.isDown(18) en el
cuadro de texto Condicin.
Key es un objeto de ActionScript incorporado, que tambin encontrar en la categora Objetos
> Pelcula > Tecla > Mtodos. Key permite determinar la tecla que un usuario ha presionado en
el teclado. El nmero 18 es la representacin numrica de las teclas Alt (Windows) y Opcin
(Macintosh). En esta lnea de cdigo se comprueba si un usuario ha presionado estas teclas.
Para obtener ms informacin sobre los objetos incorporados, consulte la seccin Utilizacin
de un objeto incorporado en la pagina 78.
en la accin evaluate para especificar una nueva lnea de cdigo. Escriba
_root[whichPiece]._rotation += 90 en el cuadro de texto Expresin, sin espacios entre los
signos + y =.
Con esta lnea de cdigo la pieza seleccionada gira 90 si el usuario presiona la tecla Alt
(Windows) u Opcin (Macintosh). Los corchetes permiten recuperar dinmicamente el valor
de un nombre de instancia. Para obtener ms informacin, consulte Operadores de punto y
de acceso a una matriz en Ayuda > Utilizacin de Flash.
8 Seleccione la lnea de cdigo que contiene la sentencia else if. Escriba
Key.isDown(Key.SHIFT) en el cuadro de texto Condicin.
Con esta lnea de cdigo se comprueba si un usuario ha presionado la tecla Mays.
en la accin evaluate para especificar una nueva lnea de cdigo. Escriba pieceNumber =
whichPiece.slice(5) en el cuadro de texto Expresin.
Con esta lnea de cdigo se visualiza el nmero de pieza en el cuadro de texto en el escenario
cuando el usuario presiona la tecla Mays. El mtodo slice del objeto String elimina un
nmero de caracteres especificado (en este caso, 5) de la instancia del nmero de pieza, de
modo que slo aparece el nmero de la pieza. De hecho, el mtodo elimina los cinco primeros
caracteres y, a continuacin, asigna el nmero resultante a la variable pieceNumber, que a su
vez se asigna al campo de texto del escenario.
10 Seleccione la lnea de cdigo que contiene la sentencia else. En la categora Acciones >
Control de clip de pelcula de la caja de herramientas Acciones, haga doble clic en la accin
startDrag.
Captulo 2 76
11 Escriba _root[whichPiece] en el cuadro de texto Destino y haga clic en Expresin.
12 Seleccione Restringir a rectngulo. 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 ratn al hacer clic). Los
nmeros 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 funcin que ha escrito. La
funcin utiliza el objeto Key para determinar si se presiona la tecla Mays, Alt u Opcin al
hacer clic en una pieza. Si se presiona la tecla Mays al hacer clic en una pieza, el cuadro de
texto dinmico muestra el nmero de la pieza del rompecabezas. Si la tecla presionada es Alt
(Windows) u Opcin (Macintosh), la pieza del rompecabezas gira 90. Si no se presionan las
teclas Mays, Alt u Opcin, el usuario puede arrastrar la pieza. El cdigo 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 funcin
Puede llamar a funciones en cualquier fotograma de una pelcula cuando necesite completar una
tarea. Debe utilizar una ruta de destino para llamar a una funcin, del mismo modo que debe
utilizar una ruta para acceder a una variable o a un clip de pelcula. Todas las funciones de la
pelcula puzzle.fla se declaran en el primer fotograma de la capa de acciones, en la lnea de tiempo
principal, de modo que la ruta absoluta de cada una de ellas empieza por _root.
A continuacin llamar a la funcin que desordena las piezas del rompecabezas en el escenario.
1 En la lnea de tiempo, oculte las capas correspondientes al cuadro de dilogo para desordenar
las piezas y al cuadro de inicio, si no estn ocultas. Seleccione la capa del cuadro de dilogo de
felicitaciones.
2 En el escenario, haga doble clic en el smbolo del cuadro de felicitaciones.
3 En el escenario, seleccione el botn Aceptar. Si el panel Acciones no est abierto, elija Ventana
> Acciones.
4 En la categora Acciones > Funciones definidas por el usuario de la caja de herramientas
Acciones, haga doble clic en la accin call function.
5 Con el punto de insercin en el cuadro de texto Objeto del panel Acciones, haga clic en el
botn Insertar ruta de destino. Verifique que los elementos Puntos y Absoluto estn
seleccionados. Seleccione _root y haga clic en Aceptar.
6 Escriba Scramble en el cuadro de texto Mtodo.
La funcin Scramble no requiere parmetros; puede dejar en blanco el cuadro de texto
Parmetros.
El cdigo tiene ahora el aspecto siguiente:
on (release) {
_root.Scramble();
}
Este es el ActionScript que llama a la funcin. Tambin deber agregar lneas de cdigo
adicionales que se encuentren dentro del controlador on(release). En los pasos siguientes
ver cmo.
Con la lnea de cdigo _root.Scramble... seleccionada en el panel Script, haga doble clic en
evaluate en la categora Acciones > Acciones varias en la caja de herramientas Acciones. Escriba
_root.scramblebutton._visible = true en el cuadro de texto Expresin.
Cuadro de smbolo
felicitaciones
Captulo 2 78
7 Haga doble clic de nuevo en la accin evaluate para agregar otra lnea en blanco. Escriba
_root.dialog = false en el cuadro de texto Expresin.
8 En la categora Acciones > Acciones varias de la caja de herramientas Acciones, haga doble clic
en la accin evaluate.
9 En la categora Propiedades de la caja de herramientas Acciones, haga doble clic en _visible.
Con el punto de insercin detrs de _visible, escriba = 0 en el cuadro de texto Expresin.
Con este cdigo se especifica que el cuadro de dilogo no estar visible despus de que el
usuario haga clic en el botn Aceptar.
El cdigo 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 lnea de tiempo principal:
Haga clic en Escena 1.
Utilizacin de un objeto incorporado
ActionScript tiene variables que permiten almacenar informacin, funciones que permiten crear
comandos especiales y volver a utilizar cdigo, acciones que permiten controlar el flujo de una
pelcula y clips de pelcula con propiedades que puede modificar.
ActionScript tambin tiene otro tipo de elementos denominados objetos incorporados. Los objetos
permiten agrupar la informacin para utilizarla en un script. Asimismo, pueden tener
propiedades, mtodos (que son como funciones) y constantes (por ejemplo, el valor numrico de
Pi).
En la funcin RotateDisplayOrDrag creada en la seccin Creacin de comandos y reutilizacin
de cdigo 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
informacin sobre el teclado.
Otro objeto de ActionScript es el objeto MovieClip. El objeto MovieClip es un conjunto de
mtodos que puede utilizar para manipular clips de pelcula, los elementos fundamentales y con
ms posibilidades de Flash. Para obtener ms informacin sobre las caractersticas especiales del
objeto MovieClip y sobre la utilizacin de clips de pelcula, consulte Trabajo con clips de pelcula
y botones en Ayuda > Utilizacin de Flash.
A continuacin utilizar el mtodo onPress del objeto MovieClip para comprobar si el puntero
de ratn toca una pieza del rompecabezas.
mypuzzle.fla.
2 Piece actions es un clip de pelcula anidado en cada instancia de una pieza del rompecabezas.
Para seleccionar el clip de pelcula Piece actions de la jerarqua de paneles de biblioteca, haga
clic en el botn Editar smbolos en la esquina inferior derecha de la lnea de tiempo y elija
Varios > Piece actions.
El clip de pelcula Piece actions se abre en modo de edicin de smbolos.
3 En la lnea 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
lnea 3 con la lnea de cdigo siguiente:
// ENTER code here
Captulo 2 80
5 En la categora Objetos > Pelcula > Clip de pelcula > Eventos de la caja de herramientas
Acciones, haga doble clic en la accin onPress.
El mtodo onPress es un tipo de accin especial denominado controlador de eventos, o
simplemente evento. Un evento permite escribir una funcin que se ejecuta cuando se produce
un determinado evento. Algunos tipos de eventos son: presionar el botn del ratn, ingresar la
cabeza lectora en un fotograma o cargar un clip de pelcula.
En este procedimiento, el cdigo entre llaves que sigue a onPress se ejecuta cuando un usuario
presiona el botn del ratn en la pelcula.
6 Escriba _parent en el cuadro de texto Objeto.
Puesto que Piece actions se encuentra anidado dentro del clip de pelcula, _parent especifica
que onPress debe ejecutar el cdigo de un nivel superior, al mismo nivel que la pieza del
rompecabezas.
7 En la categora Acciones > Condiciones/Bucles de la caja de herramientas Acciones, haga doble
clic en la accin if.
8 Escriba !_root.dialog en el cuadro de texto Condicin. El cdigo que aparece es el siguiente:
_parent.onPress = function(){
if (!_root.dialog) {
{
};
El cdigo 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 debera 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 dilogo, los usuarios no podrn girar ni
arrastrar una pieza ni ver su nmero.
9 En la caja de herramientas Acciones, haga doble clic en la accin evaluate en la categora
Acciones > Acciones varias para agregarla entre las llaves de la sentencia if.
10 Escriba _root.RotateDisplayOrDrag(_parent._name) en el cuadro de texto Expresin.
_name es la propiedad del nombre de la instancia de pieza del rompecabezas en la que el usuario
hace clic.
El cdigo 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 lnea de tiempo principal:
Haga clic en Escena 1.
Realizar pruebas con antelacin y de forma regular es una mxima para los desarrolladores de
contenido Web. Cuanto antes pruebe la pelcula, ms fcil ser determinar la causa de resultados
inesperados. Es conveniente guardar varias versiones del archivo con nombres consecutivos (por
ejemplo, mypuzzle1.fla, mypuzzle2.fla, etctera), tal como ha hecho con este tutorial. De este
modo, el archivo con el nmero ms alto siempre ser el ms nuevo y ser fcil volver a una
versin anterior.
Tal como se describe en el tutorial de introduccin a Flash MX, la herramienta de edicin Flash
incluye una versin de Flash Player que permite probar la pelcula en cualquier momento del
proceso de edicin seleccionando Control > Probar pelcula. Esta versin de Flash Player tiene
varios comandos y herramientas de ayuda para solucionar problemas relacionados con la pelcula.
La causa ms habitual de estos resultados inesperados en una pelcula Flash es una ruta incorrecta
de una variable, funcin, objeto o clip de pelcula. Esto puede hacer que una variable contenga el
valor incorrecto, que no se llame a una funcin o que el clip de pelcula no se reproduzca
correctamente.
La accin trace permite escribir notas y expresiones en los scripts cuyo resultado se enva a una
ventana llamada ventana Salida.
A continuacin, agregar una accin trace para probar si se ha llamado a una funcin
correctamente.
Nota: Flash tambin incluye un depurador, que permite examinar los valores de las variables globales y locales,
incluso cuando cambian a medida que se reproduce la pelcula. Asimismo, con el depurador puede utilizar puntos
de corte para detener la pelcula y probar ActionScript lnea por lnea. Para obtener ms informacin, consulte
Utilizacin del depurador en Ayuda > Utilizacin de Flash.
1 Seleccione Archivo > Abrir y elija la ltima versin guardada del archivo mypuzzle.fla.
Cuando el usuario hace clic en el botn Aceptar en la pelcula SWF, las piezas del rompecabezas
se desordenan. Puede utilizar una accin trace para probar si se llama a la funcin Scramble.
2 En la capa de acciones en la lnea de tiempo, seleccione Fotograma 1 y abra el panel Acciones.
3 En el panel Script, desplcese hasta la lnea 18, la lnea de comentario con el texto // enter
trace action here, y seleccinela.
4 En la caja de herramientas Acciones, haga doble clic en la accin trace en la categora
Acciones > Acciones varias.
5 Escriba Se ha llamado a la funcin Scramble en el cuadro de texto del mensaje.
Este mensaje se coloca dentro de la funcin Scramble.
6 Guarde el documento y, a continuacin, seleccione Control > Probar pelcula.
Captulo 2 82
7 Haga clic en el botn Aceptar de la pelcula SWF.
Aparece la ventana Salida que rastrea los eventos de la pelcula. Ample la ventana como
convenga para leer los mensajes.
El mensaje Se ha llamado a la funcin Scramble aparecer en la ventana Salida.
Si el mensaje no aparece, el paso siguiente consistir en determinar el motivo. El motivo ms
probable es que haya especificado una ruta incorrecta a la funcin.
8 Cierre la ventana Salida y el archivo SWF y regrese al modo de edicin.
Gracias a estos ejercicios ha aprendido mucho sobre ActionScript.
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 pelcula Flash, a crear comandos y
volver a utilizar cdigo para que vuelvan a producirse las acciones y a controlar de forma precisa el
flujo de la pelcula. Mediante las variables y expresiones de ActionScript, ahora sabe cmo realizar
un seguimiento de la actividad del usuario en la pelcula y cmo mostrar a los usuarios el
contenido que va cambiando. Y, finalmente, ha aprendido a probar la pelcula.
Para seguir aprendiendo ms aspectos de ActionScript, consulte el diccionario en lnea de
ActionScript en el men Ayuda y los artculos del Centro de soporte de Flash. En la carpeta
Samples de la carpeta de la aplicacin Flash MX tambin puede abrir una versin avanzada de la
pelcula puzzle.fla y descomponer el cdigo de ActionScript utilizado para crear un cronmetro y
una pieza animada del rompecabezas.
Captulo 2 84
85
CAPTULO 3
Tutorial de introduccin a los componentes
Se pueden utilizar los componentes de interfaz de Macromedia Flash para agregar rpida y
fcilmente elementos sencillos de la interfaz del usuario al documento de Flash.
Este tutorial est diseado para ofrecer una introduccin sobre los componentes a los usuarios
principiantes e intermedios de Flash y para mostrar cmo se pueden utilizar para crear fcilmente
una aplicacin simple. Antes de iniciar este tutorial, debe finalizar los tutoriales Introduccin a
Flash MX e Introduccin a ActionScript, a los que se puede acceder seleccionando Ayuda >
Tutoriales.
Una vez finalizado este tutorial, sabr cmo realizar las tareas siguientes:
Agregar componentes a un documento de Flash.
Configuracin de los componentes.
Agregar ActionScript para que los componentes funcionen.
Tipos de componente
Flash MX proporciona los componentes siguientes:
Nombre Accin
RadioButton Representa una sola opcin de un grupo de opciones que se excluyen
entre s.
CheckBox Representa una sola opcin.
PushButton Lleva a cabo un comando cuando el usuario hace clic o presiona la tecla
Intro o Retorno.
ComboBox Muestra una lista de opciones.
Captulo 3 86
Utilizacin de los componentes
A continuacin se presentan algunas maneras en las que se pueden utilizar los componentes:
Formulario Web Disee un formulario que solicite la direccin, el telfono, la direccin de
correo electrnico y otros datos personales del usuario. A continuacin, 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 grficas en lugar de introducir la informacin. Los campos se
generan a partir de las interacciones grficas.
Cuestionario Cree un cuestionario con varias preguntas y partes que indique instantneamente
los resultados y represente grficamente los datos resultantes del cuestionario.
lbum de fotos Cree un lbum de fotos personal que utilice un directorio de imgenes y
miniaturas y las ajuste con los elementos de navegacin y la interfaz de Flash.
Calculadora de prstamos Disee una calculadora de amortizacin en lnea que calcule pagos
de prstamos.
Plantilla de presentacin para Internet Cree una plantilla para presentaciones de transparencias
con elementos de navegacin simples predefinidos y un diseo para imgenes y texto.
Visualizacin 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 Mays+Tabulador para retroceder.
Utilice las teclas de direccin 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 pelcula finalizada.
2 Utilice las tcnicas de navegacin 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 pelcula. Se incluyen dos fotogramas clave en la lnea de tiempo.
4 Examine la pgina 1. Contiene la casilla de verificacin, el cuadro combinado y los botones de
comando que se utilizan para recopilar informacin. Tambin tiene dos campos de
introduccin de texto para el nombre y la direccin de correo electrnico del usuario.
5 Examine la pgina 2. Es la pgina de resultados y contiene varios cuadros de texto dinmico
para mostrar los resultados de la informacin recopilada en la pgina 1. Para ahorrar tiempo,
stos ya se han creado.
ListBox Muestra una lista de opciones.
ScrollPane Proporciona un panel de ventana desplazable para ver clips de pelcula.
ScrollBar Agrega una barra de desplazamiento a un campo de texto.
Nombre Accin
Tutorial de introduccin a los componentes 87
Creacin de un formulario
En este tutorial, utilizar componentes para crear un formulario simple de dos pginas para
participar en un sorteo de un coche elctrico Stiletto. La primera pgina sirve para recopilar
informacin 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 grficos para el
formulario. Agregue y configure componentes y comandos ActionScript para que el formulario
sea interactivo.
Adicin de componentes
El primer paso consiste en agregar componentes al escenario y colocarlos en el formulario.
Agregue una casilla de verificacin, un cuadro combinado y un botn de comando a la primera
pgina del formulario. Agregue tambin un botn de comando a la segunda pgina.
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 denomnela UI. Coloque los componentes en esta capa.
4 Haga clic en el fotograma 6 en la capa UI de la lnea de tiempo. Elija Insertar > Fotograma
clave vaco para agregar un fotograma vaco. ste se utilizar para los componentes de la
segunda pgina.
5 Asegrese de que se encuentran abiertos los paneles siguientes:
Panel Biblioteca (Ventana > Biblioteca).
Panel Componentes (Ventana > Componentes).
Inspector de propiedades (Ventana > Propiedades).
Captulo 3 88
Adicin de una casilla de verificacin
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. Colquelo debajo
del prrafo que solicita si el usuario desea participar en el sorteo.
El componente aparece en la carpeta Flash UI Components en el panel Biblioteca.
Adicin de un cuadro combinado
Utilice el componente ComboBox para crear un men desplegable simple de elementos que los
usuarios puedan seleccionar. Los cuadros combinados tambin se pueden utilizar para crear un
men desplegable ms complejo que se desplace automticamente 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. Colquelo
debajo de Seleccione su color favorito:.
Adicin de botones de comando
Utilice el componente PushButton para crear dos botones de comando. Uno de ellos estar en la
primera pgina y servir para enviar la informacin del formulario. El siguiente estar en la
segunda pgina y servir para volver a la primera pgina y volver a rellenarla con los valores
enviados previamente.
1 Arrastre el componente PushButton desde el panel Componentes al escenario. Colquelo en la
esquina inferior derecha del formulario de modo que se alinee horizontalmente con los campos
de texto del nombre y del correo electrnico.
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 vaco 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.
Colquelo en la esquina inferior derecha.
Configuracin de los componentes
El siguiente paso es la configuracin de los componentes para que contengan la informacin
correcta que el usuario debe seleccionar.
Establezca los parmetros para un componente mediante la ficha Parmetros del inspector de
propiedades o del panel de parmetros de componentes.
Los usuarios avanzados pueden utilizar propiedades y mtodos API para cada componente para el
establecimiento de los parmetros, el tamao, el aspecto y otras propiedades del mismo. Los
mtodos y las propiedades disponibles para cada elemento de componente se indican en el
diccionario de ActionScript debajo del nombre del componente.
Captulo 3 90
Configuracin de la casilla de verificacin
1 Seleccione el fotograma 1 en la capa UI y, a continuacin, el componente CheckBox en el
escenario. Sus parmetros 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 parmetro 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 parmetro Label Placement, deje el valor predeterminado de
alineacin a la derecha. La etiqueta aparecer a la derecha de la casilla de verificacin.
6 No modifique el parmetro para el controlador de cambios.
El parmetro Change Handler define la funcin que desea que se ejecute cuando un usuario
selecciona un elemento. Esta funcin debe definirse en la misma lnea de tiempo que la
instancia de componente. Este parmetro es opcional y debe especificarse nicamente en el
caso de que se desee que se lleve a cabo una accin en cuanto el usuario acceda a un
componente.
Al finalizar, el inspector de propiedades debe tener el aspecto siguiente:
Para obtener ms informacin sobre la utilizacin de los mtodos API del componente
FCheckBox para establecer opciones adicionales para el componente, consulte la entrada
FCheckBox (componente) en el diccionario de ActionScript en lnea en la Ayuda de Flash.
Configuracin del cuadro combinado
1 Seleccione el componente ComboBox en el escenario. Sus parmetros aparecen en el inspector
de propiedades.
2 Escriba color_box en el cuadro de texto Nombre de instancia.
3 Asegrese de que el parmetro Editable est establecido en False. De este modo, los usuarios no
pueden introducir un texto propio.
4 El parmetro Labels visualiza una lista de los valores que los usuarios pueden seleccionar. Haga
clic en el campo Labels y, a continuacin, haga clic en la lupa para abrir la ventana emergente
Valores. Haga clic en el botn Ms (+) para introducir un nuevo valor.
5 Haga clic en el campo default value; a continuacin, escriba Lightning para el primer valor.
6 Haga clic en el botn Ms (+) para introducir el valor siguiente. Haga clic en el campo default
value; a continuacin, escriba Cobalt para el valor siguiente.
7 Del mismo modo, agregue Emerald a la lista.
Cuando haya terminado, la ventana emergente Valores debera tener el aspecto siguiente:
Captulo 3 92
8 Haga clic en Aceptar para cerrar la ventana emergente Valores.
El parmetro Data es opcional. Sirve para especificar los valores asociados con los elementos
(etiquetas) del cuadro de lista. No es necesario utilizar este parmetro para este tutorial.
9 El parmetro Row Count especifica el nmero 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 parmetro Change Handler.
Para obtener ms informacin sobre la utilizacin de los mtodos API para cambiar propiedades
adicionales, consulte la entrada FComboBox (componente) en el diccionario de ActionScript en
lnea en la Ayuda de Flash.
Configuracin de los botones de comando
1 Seleccione el componente PushButton en el fotograma 1.
Los parmetros 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 botn.
4 Escriba onClick para el nombre del controlador de acciones del ratn. Ms adelante, escribir
el cdigo ActionScript para definir la funcin del controlador de acciones del ratn.
5 Seleccione el componente PushButton en el fotograma 6.
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 ratn.
Para obtener ms informacin sobre la utilizacin de los mtodos API del componente
FPushButton para cambiar propiedades adicionales, consulte la entrada FPushButton
(componente) en el diccionario de ActionScript en lnea en la Ayuda de Flash.
Definicin del cdigo ActionScript para recopilar los datos
Parte del cdigo ActionScript ser para toda la pelcula, mientras que otra parte estar relacionada
con un fotograma especfico. La tabla siguiente resultar til para realizar un seguimiento de los
nombres de instancia.
Definicin del cdigo ActionScript para toda la pelcula
El cdigo ActionScript para componentes se coloca en los fotogramas clave. El parmetro 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 funcin para onClick. Se trata de una funcin de bifurcacin que
en primer lugar determina si el botn que se ha presionado es Enviar o Retorno y, a continuacin,
realiza las acciones correspondientes.
1 Cree una nueva capa y denomnela Todas las acciones. sta se utilizar para el cdigo
ActionScript que deba ejecutarse a lo largo de la pelcula.
2 Si el panel Acciones no est abierto, elija Ventana > Acciones.
3 Cambie al modo Experto presionando Ctrl+Mays+E (Windows) o Comando+Maysculas+E
(Macintosh), o haciendo clic en el control de la esquina superior derecha (un tringulo que
tiene una marca de verificacin encima) y seleccionando el modo Experto en el men
emergente.
Nombre de la instancia Descripcin
color_box Cuadro combinado de color de la pgina 1
sweepstakes_box Casilla de verificacin de sorteo de la pgina 1
submit_btn Botn de comando de envo de la pgina 1
name Cuadro de introduccin de texto para el nombre de la pgina 1
email Cuadro de introduccin de texto para la direccin de correo electrnico de la
pgina 1
return_btn Botn de comando de retorno de la pgina 2
name_result Cuadro de texto dinmico de la pgina 2 para ver el nombre del usuario
email_result Cuadro de texto dinmico de la pgina 2 para ver la direccin de correo electrnico
del usuario
color_result Cuadro de texto dinmico de la pgina 2 para ver la seleccin de colores del usuario
sweepstakes_text Cuadro de texto dinmico de la pgina 2 que muestra diferentes textos en funcin
de si el usuario ha optado por participar en el sorteo
Captulo 3 94
4 Introduzca la funcin callback para los botones. Se trata de una sentencia condicional que se
bifurca en funcin del botn en el que se hace clic. Si se hace clic en el botn Enviar, se
bifurcar para mostrar la funcin getResults e ir a la pgina 2. Si se hace clic en el botn
Retorno, ir a la pgina 1.
Introduzca los cdigos 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 cdigo ActionScript, puede copiar el texto de este
tutorial y pegarlo en el panel Acciones.
5 Escriba la funcin getResults. Con esta funcin, se obtienen los resultados de la casilla de
verificacin de sorteo y del cuadro combinado de color. Tambin se obtienen los resultados del
cuadro combinado en forma de etiqueta para poder mostrarlos.
// obtener resultados de la pg 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
6 Escriba la funcin initValues. Esta funcin inicializa los valores de la pgina 1 con los valores
que el usuario ha seleccionado anteriormente. Se ejecuta cuando el usuario hace clic en el
botn Retorno.
// inicializar valores de pg 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);
}
}
7 Finalmente, agregue una llamada a la funcin initValues al principio del cdigo
ActionScript. Cuando haya terminado, el cdigo 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 pg 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 pg 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 pelcula. Sin embargo, todava debe
agregar un script para los fotogramas de las pginas 1 y 2.
Adicin de cdigos ActionScript a cada fotograma clave
Parte del cdigo ActionScript debe ejecutarse nicamente cuando el usuario selecciona un
fotograma determinado. Con el fin de que el cdigo ActionScript funcione, debe asignar un
nombre a cada fotograma clave.
1 Cree una nueva capa y denomnela Acciones de fotograma. Seleccione el fotograma 1 y, a
continuacin, elija Insertar > Fotograma clave vaco 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 denomnelo pg2.
2 Seleccione el fotograma clave en el fotograma 1 de la capa Acciones de fotograma y escriba el
cdigo ActionScript siguiente para detener la pelcula en el fotograma 1 (pg1):
stop();
Captulo 3 96
3 Opcionalmente, si desea ver un fragmento determinado del texto en el caso de que el usuario
haya seleccionado la casilla de verificacin 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 dinmico sweepstakes_text en la pgina 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 cdigo ActionScript en el panel Acciones. No funcionar correctamente puesto que
existen saltos de lnea entre la primera y la segunda lneas de texto.
Para ver el aspecto de los componentes, ejecute la pelcula en Flash Player 6.
1 Seleccione Control > Probar pelcula.
La pelcula se ejecuta en Flash Player.
2 Seleccione y anule la seleccin de la casilla de verificacin para asegurarse de que funciona.
3 Seleccione un color y asegrese de que aparece en la pgina 2.
4 Cuando haya terminado, seleccione Archivo > Cerrar para cerrar la pelcula en el reproductor.
5 Si ha detectado errores, utilice la herramienta Flecha para seleccionar el componente; a
continuacin, realice las correcciones en el inspector de propiedades. Si es necesario, vuelva a
probar la pelcula.
Pasos siguientes
En este tutorial se han presentado los pasos bsicos para crear un grupo simple de componentes y
para ver sus resultados. Para obtener ms informacin, consulte Utilizacin de Flash y el
diccionario de ActionScript en el men Ayuda.

Flashmx Tutorials

Cargado por

Información del documento

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

Flashmx Tutorials

Cargado por

Copyright:

Formatos disponibles

macromedia

También podría gustarte