Tutoriales de Flash MX

Tutoriales de Flash MX
macromedia
Marcas comerciales Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator 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
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 Pasos siguientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
CAPTULO 3 Tutorial de introduccin a los componentes
. . . . . . . . . . . . . . . . . . . . . . . . . . 85 85 86 87 96
Tipos de componente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Visualizacin del formulario finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creacin de un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pasos siguientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Contenido
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.
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.
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. Escuche el sonido que se reproduce continuamente mientras se reproduce la pelcula. Es un ejemplo de flujo de sonido. 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. 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. Despus de ver la pelcula, haga clic en su cuadro de cierre.
3 4
5 6
Captulo 1
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.
Arrastre la barra que separa el escenario de la lnea de tiempo
2 3
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. 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.
Tutorial de introduccin a Flash MX
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
Cuadro de texto
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.
Captulo 1
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.
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 2 3 4 5
Si el panel Biblioteca no est abierto, elija Ventana > Biblioteca. Arrastre el panel Biblioteca para hacerlo ms grande, si es necesario, y ver los objetos dentro de la biblioteca. Si la carpeta Artwork no est expandida, haga doble clic para ver los objetos de la carpeta. Haga clic en view1.png para ver la imagen en el rea de previsualizacin en la parte superior del panel Biblioteca. Expanda las otras carpetas del panel Biblioteca para ver los elementos incluidos en el documento, como botones y clips de pelcula.
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 2
Si el explorador de pelculas todava no est abierto, elija Ventana > Explorador de pelculas. 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.
10
Captulo 1
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.
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 6 7
Examine la lista para ver algunos de los elementos incluidos en la pelcula y sus relaciones con otros elementos. Para expandir un objeto o una categora, haga clic en el botn de signo ms (+) situado a la izquierda del nombre. 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.
11
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 2 3
Seleccione Archivo > Nuevo. Elija Archivo > Guardar como. 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.
12
Captulo 1
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.
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. Busque y haga clic en la muestra de color gris con el valor hexadecimal 999999.
Cuadro de texto Hexadecimal
Seleccione esta sombra de gris
13
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 2 3
Seleccione Ver > Cuadrcula > Editar cuadrcula. 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. 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. 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.
14
Captulo 1
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 3
En la caja de herramientas, seleccione la herramienta Rectngulo. 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.
15
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 3
Si no est abierto el Mezclador de colores, elija Ventana > Mezclador de colores. 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
16
Captulo 1
Si el Mezclador de colores no est totalmente expandido, haga clic en la flecha situada en la parte inferior derecha del panel.
5 6
En el men emergente Estilo de relleno, seleccione Radial. Haga clic en el deslizador situado a la izquierda de la barra de degradado para seleccionarlo.
Barra de degradado Deslizador de degradado
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.
Haga clic en esta sombra de azul
17
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 2
En el Mezclador de colores, haga clic en el deslizador situado a la derecha de la barra de degradado para seleccionarlo. Haga clic en el cuadro de color para abrir la paleta de colores y seleccione el negro con el valor hexadecimal 000000. Recuerde que puede escribir el valor hexadecimal en el cuadro de texto Hexadecimal y presionar Intro o Retorno, o bien buscar y seleccionar la muestra de color con el mismo valor hexadecimal.
18
Captulo 1
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.
Ubicacin central Anchura Escala Rotacin
19
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.
20
Captulo 1
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.
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.
21
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 2
En la lnea de tiempo, haga doble clic en el nombre Capa 1 y escriba Fondo para cambiar el nombre de la capa. 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
22
Captulo 1
2 3
En la caja de herramientas, seleccione la herramienta valo. 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.
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. 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 7
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. Si el panel Transformar no est abierto, elija Ventana > Transformar.
23
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.
24
Captulo 1
En el inspector de propiedades, utilice el control Color de relleno para seleccionar el color negro.
En la caja de herramientas, seleccione la herramienta Transformacin libre. Aparece una gua con selectores alrededor del valo duplicado. 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.
25
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.
26
Captulo 1
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.
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:
27
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.
Arrastre las formas del escenario para que parte de la curva aparezca en la esquina superior izquierda y al lado derecho del escenario.
Nota: mientras vaya completando el tutorial no olvide guardar el archivo con frecuencia.
28
Captulo 1
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 2
Con la capa Formas seleccionada, agregue una capa nueva a la lnea de tiempo y asgnele el nombre Mscara. 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.
29
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.
30
Captulo 1
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 2
En la lnea de tiempo, agregue una capa nueva y asgnele el nombre Imgenes. Elija Archivo > Importar a biblioteca. Al seleccionar Importar a biblioteca en lugar de Importar, las imgenes deben colocarse en el escenario para que aparezcan.
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. 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.
31
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.
Haga doble clic en el archivo view1.png. La compresin JPEG es la seleccin predeterminada. En el men emergente Compresin, seleccione Sin prdida (PNG/GIF) para obtener una mayor calidad de imagen. 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.
3 4
32
Captulo 1
5 6
Vuelva al panel Biblioteca. Haga doble clic en el archivo view2.png, repita el paso 3 y, a continuacin, haga clic en Aceptar. 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 3
Elija Insertar > Convertir en smbolo o presione F8. 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
33
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 3
Cambie el nombre de Capa 1 por el de Vista 1 Aparicin. 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. 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. Verifique que el cuadrado central est seleccionado en el indicador Registro y haga clic en Aceptar. 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.
4 5 6
Fotograma actual
7 8
Agregue fotogramas clave a los fotogramas 25 y 35. 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.
34
Captulo 1
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. 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%.
Rectngulo de delimitacin
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 2 3 4
Agregue una nueva capa a la lnea de tiempo de Animacin de coche y asgnele el nombre Vista 2 Aparicin. En la capa Vista 2 Aparicin, agregue un fotograma clave al fotograma 25. Con la cabeza lectora an en el fotograma 25, arrastre el objeto view2.png del panel Biblioteca al escenario. 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.
35
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 7 8
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. Agregue un fotograma clave al fotograma 35 de la capa Vista 2 Aparicin. 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. 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.
1 2 3
En la capa Vista 2 Aparicin, agregue un fotograma clave al fotograma 60. En la capa Vista 2 Aparicin, agregue un fotograma clave al fotograma 70 y otro fotograma clave al fotograma 69. 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%. En la capa Vista 2 Aparicin, seleccione un fotograma entre los fotogramas 60 y 68. En el inspector de propiedades, seleccione Movimiento en el men emergente Interpolacin. Haga clic en un fotograma de la capa Vista 2 Aparicin entre los fotogramas 71 y 105 y presione Supr.
4 5
36
Captulo 1
Aparicin progresiva del tercer coche A medida que el segundo coche se desvanece, el tercer coche aparece progresivamente. Ahora crearemos esta animacin.
1 2 3
Con la capa Vista 2 Aparicin seleccionada, agregue una nueva capa a la lnea de tiempo y asgnele el nombre Vista 3 Aparicin. En la capa Vista 3 Aparicin, agregue un fotograma clave al fotograma 60. 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. 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 6 7 8
En el inspector de propiedades, seleccione Alfa en el men emergente Color y escriba 0% en el cuadro de texto Valor para alfa. Agregue un fotograma clave al fotograma 70 de la capa Vista 3 Aparicin. 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. En la capa Vista 3 Aparicin, seleccione un fotograma entre los fotogramas 60 y 69. En el inspector de propiedades, seleccione Movimiento en el men emergente Interpolacin.
Desvanecimiento del tercer coche Ahora crear la animacin que hace que el tercer coche se desvanezca.
1 2 3
En la capa Vista 3 Aparicin, agregue un fotograma clave a los fotogramas 95 y 105. 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%. En la capa Vista 3 Aparicin, seleccione un fotograma entre los fotogramas 95 y 104. En el inspector de propiedades, seleccione Movimiento en el men emergente Interpolacin.
37
Aparicin progresiva del primer coche Mientras el tercer coche se desvanece, el primer coche debe aparecer progresivamente para completar la animacin.
1 2 3 4 5 6
En la capa Vista 1 Aparicin, agregue un fotograma clave al fotograma 95. Con el fotograma 95 an seleccionado, arrastre el clip de pelcula Vista 1 Coche (no view1.png) del panel Biblioteca al escenario. 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. En el inspector de propiedades, seleccione Alfa en el men emergente Color e introduzca 0% en el cuadro de texto Valor para alfa. Seleccione el fotograma 104 de la capa Vista 1 Aparicin. 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. En la capa Vista 1 Aparicin, seleccione un fotograma entre los fotogramas 95 y 104. En el inspector de propiedades, seleccione Movimiento en el men emergente Interpolacin.
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.
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.
38
Captulo 1
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 carpeta de la aplicacin Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto4.fla. Si utiliza el archivo stiletto4.fla, gurdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versin no modificada del archivo original. 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 2
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. 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 4
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. 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 6
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. 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.
39
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. 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 4 5
En el cuadro de tamao escriba 12. Haga clic en Color de texto (relleno) y seleccione amarillo, con el valor hexadecimal FFCC00. En el men emergente Tipo de lnea, seleccione Multilnea, que se utiliza para varias lneas de texto que se ajustarn.
Men emergente Tipo de texto Men emergente Fuente Cuadro de tamao en puntos del texto
Men emergente Tipo de lnea
40
Captulo 1
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.
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. 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.
41
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.
Botn del men Opciones
Caja de herramientas Acciones
Panel Script
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.
42
Captulo 1
En el cuadro de texto URL, escriba la ruta al archivo de texto: ../assets/copy.txt.
Prueba de la pelcula
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.
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/stiletto5.fla. Si utiliza el archivo stiletto5.fla, gurdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versin no modificada del archivo original.
43
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 2
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. 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. 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.
44
Captulo 1
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:
Con la herramienta Flecha, arrastre el puntero para seleccionar los tres botones.
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.
Alinear verticalmente respecto al centro
En escenario 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. Cuando haya probado los botones, elija Control > Habilitar botones simples para anular la seleccin de esa funcin.
45
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 2 3
En el escenario, haga doble clic en el botn de la derecha, botn 1, para abrir el modo de edicin de smbolos. 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. 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. En el escenario, haga doble clic en el smbolo Animacin de botn para abrir el modo de edicin de smbolos. Cambie el nombre de la Capa 1 por el de Cambio de color y agregue un fotograma clave al fotograma 15. 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. 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.
4 5 6
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 2 3
Agregue una nueva capa a la lnea de tiempo Animacin de botn y asgnele el nombre Acciones. En la capa Acciones, agregue un fotograma clave al fotograma 15. 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.
46
Captulo 1
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 2 3 4
Elija Edicin > Editar documento o haga clic en Escena 1 para volver a la pelcula principal. En el escenario, haga clic en el Botn 1, el botn de la derecha. En el panel Acciones, elija Acciones > Navegador/Red y haga doble clic en getURL. En el cuadro de texto URL, escriba un URL completo, como http://www.macromedia.com.
47
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 7
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. 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.
48
Captulo 1
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/stiletto6.fla. Si utiliza el archivo stiletto6.fla, gurdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versin no modificada del archivo original. 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 2
En la lnea de tiempo, con la capa Botones seleccionada, agregue una capa nueva y asgnele el nombre Sonidos. 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. 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. 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 2
Guarde el archivo y, a continuacin, elija Control > Probar pelcula para or el sonido. 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 2 3
En el panel Biblioteca, haga doble clic en la instancia Botn 1 para abrir el modo de edicin de smbolos. En la lnea de tiempo para el Botn 1, agregue una capa nueva y asgnele el nombre Sonido. Seleccione el fotograma Sobre (Fotograma 2) de la capa Sonido y elija Insertar > Fotograma clave o presione F6.
49
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. 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 2
Si el panel Biblioteca no est abierto, seleccione Ventana > Biblioteca. 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.
50
Captulo 1
3 4 5 6 7 8
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. Cambie el nombre de las otras tres carpetas por el de Sonidos, Ilustraciones y Botones. Arrastre Vista 1 Coche, Vista 2 Coche, Vista 3 Coche y Animacin de coche a la carpeta Clips de pelcula de animacin de coche. Arrastre los objetos ping.mp3 y track1.mp3 a la carpeta Sonidos. Arrastre los objetos view1.png, view2.png y view3.png a la carpeta Ilustraciones. 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. 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.
51
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 2
Guarde el documento y elija Control > Probar pelcula. 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.
52
Captulo 1
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.
53
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.
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.
54
Captulo 1
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 2
En la ficha Formatos del cuadro de dilogo Configuracin de publicacin anule la seleccin de Usar nombres predeterminados. 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.
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.

Tutorial de introduccin a Flash MX 55
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.
56
Captulo 1
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.
57
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.
En la pelcula puzzle.swf, haga clic en el botn Aceptar. Las piezas del rompecabezas se desordenan. Haga clic en todos los botones Mostrar/Ocultar. Observe que aparecen los diferentes patrones y nmeros de pieza como gua para componer el rompecabezas.
Haga clic en una pieza del rompecabezas y arrstrela al rea de la solucin. La pieza se coloca en su sitio. 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.
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. Cuando termine de ver el archivo SWF, puede cerrar la ventana o dejarla abierta para que le sirva de referencia.
58
Captulo 2
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. 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.
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.
Mueva esta barra para cambiar el tamao de la lnea de tiempo
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.
Tutorial de introduccin a ActionScript
59
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.
Seleccione Archivo > Cerrar para cerrar la pelcula puzzle.fla cuando haya terminado. No guarde los cambios en el archivo terminado.
60
Captulo 2
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 2 3
Elija Archivo > Abrir. En la carpeta de la aplicacin Flash MX, vaya a Tutorials/ActionScript/My_Puzzle y abra el archivo mypuzzle.fla. 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.
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.
61
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.
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 4
En el panel Script, haga clic en la lnea 4 para seleccionar el cdigo con el comentario //ENTER
code here.
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.
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. 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.
62
Captulo 2
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.
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. 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:
10
63
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.
Haga clic en Aceptar para cerrar el mensaje de sintaxis.
64
Captulo 2
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.
65
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 3
Seleccione el fotograma 1 de la capa de acciones. Si el panel Acciones no est abierto, elija Ventana > Acciones. 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. Escriba dialog en el cuadro de texto Variable.
66
Captulo 2
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.
Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de 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.
En la lnea de tiempo, desbloquee la capa de gua de nmeros de pieza si est bloqueada.
67
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.
Clip de pelcula de crculo de nmero de pieza
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 6
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. En el men emergente Tipo de lnea, verifique que Lnea nica est seleccionado.
68
Captulo 2
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 9
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. Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de 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.
69
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.
1
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. Seleccione la lnea de cdigo siguiente en el panel Script:
// ENTER code here
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) { ; }
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) { ; ; }
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.
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.
70
Captulo 2
Seleccione la segunda lnea vaca y coloque el punto de insercin en el cuadro de texto Expresin.
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.
11
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.
71
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.
1
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. Haga doble clic en la accin if. En cdigo siguiente aparece en el panel Acciones:
on (release) { if (<not set yet>) { } }
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) { if (<not set yet>) { } else { } }
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 7
Con el punto de insercin en el cuadro de texto Condicin, especifique ._visible despus de _root.piecenumbers. 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.
72
Captulo 2
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 10
En el panel Script, seleccione la lnea de cdigo con la accin else y haga doble clic en la accin evaluate. 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; } }
11
Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de 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.
73
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.
1
2 3
Seleccione el primer fotograma de la capa de acciones y abra el panel Acciones si no est abierto. Desplcese por el panel Script y seleccione la lnea 31. Se resaltar la lnea comentada siguiente:
// ENTER RotateDisplayOrDrag() function here
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.
74
Captulo 2
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:

function RotateDisplayOrDrag (whichPiece) { if (<not set yet>) { } 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 categora Acciones > Acciones varias en la caja de herramientas Acciones, haga doble clic 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.
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 categora Acciones > Acciones varias en la caja de herramientas Acciones, haga doble clic 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.
75
11 12
Escriba _root[whichPiece] en el cuadro de texto Destino y haga clic en Expresin. 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:
function RotateDisplayOrDrag (whichPiece) { 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.
76
Captulo 2
En el escenario, haga doble clic en el smbolo del cuadro de felicitaciones.
Cuadro de smbolo felicitaciones
3 4 5
En el escenario, seleccione el botn Aceptar. Si el panel Acciones no est abierto, elija Ventana > Acciones. En la categora Acciones > Funciones definidas por el usuario de la caja de herramientas Acciones, haga doble clic en la accin call function. 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. 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.
77
7 8 9
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. En la categora Acciones > Acciones varias de la caja de herramientas Acciones, haga doble clic en la accin evaluate. 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:
Elija Edicin > Editar documento. Haga clic en el botn Atrs. Haga clic en Escena 1.
11
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.
78
Captulo 2
A continuacin utilizar el mtodo onPress del objeto MovieClip para comprobar si el puntero de ratn toca una pieza del rompecabezas.
1
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.
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
79
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.
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 8
En la categora Acciones > Condiciones/Bucles de la caja de herramientas Acciones, haga doble clic en la accin if. 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 10
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. 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:
Elija Edicin > Editar documento. Haga clic en el botn Atrs. Haga clic en Escena 1.
12
80
Captulo 2
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.
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 3 4 5
En la capa de acciones en la lnea de tiempo, seleccione Fotograma 1 y abra el panel Acciones.

trace action here,
En el panel Script, desplcese hasta la lnea 18, la lnea de comentario con el texto // enter y seleccinela.
En la caja de herramientas Acciones, haga doble clic en la accin trace en la categora Acciones > Acciones varias. Escriba Se ha llamado a la funcin Scramble en el cuadro de texto del mensaje. Este mensaje se coloca dentro de la funcin Scramble. Guarde el documento y, a continuacin, seleccione Control > Probar pelcula.
81
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 9
Cierre la ventana Salida y el archivo SWF y regrese al modo de edicin. Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignacin de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario. Gracias a estos ejercicios ha aprendido mucho sobre ActionScript.
82
Captulo 2
Pasos siguientes
Con este tutorial ha adquirido un gran conocimiento en muy poco tiempo. Ha aprendido a utilizar ActionScript para establecer un punto de inicio de una 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.
83
84
Captulo 2
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 RadioButton CheckBox PushButton ComboBox
Accin Representa una sola opcin de un grupo de opciones que se excluyen entre s. Representa una sola opcin. Lleva a cabo un comando cuando el usuario hace clic o presiona la tecla Intro o Retorno. Muestra una lista de opciones.
85
Nombre ListBox ScrollPane ScrollBar
Accin Muestra una lista de opciones. Proporciona un panel de ventana desplazable para ver clips de pelcula. Agrega una barra de desplazamiento a un campo de texto.
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 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.
Cree su coche
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. Disee una calculadora de amortizacin en lnea que calcule pagos
Calculadora de prstamos
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 2 3
Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra Tutorials/Components/ Finished/sweepstakes.swf. sta es la pelcula finalizada. Utilice las tcnicas de navegacin descritas anteriormente para probar cada uno de los botones y cuadros del formulario. 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. 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. 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.
86
Captulo 3
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 2 3 4
Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra Tutorials/Components/ my_sweepstakes/mysweepstakes.fla. Elija Archivo > Guardar como y guarde el archivo con un nuevo nombre, como por ejemplo newsweeptakes. Cree una capa nueva y denomnela UI. Coloque los componentes en esta capa. 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. Asegrese de que se encuentran abiertos los paneles siguientes:
Panel Biblioteca (Ventana > Biblioteca). Panel Componentes (Ventana > Componentes). Inspector de propiedades (Ventana > Propiedades).
Tutorial de introduccin a los componentes
87
Adicin de una casilla de verificacin Utilice el componente CheckBox para crear un cuadro con el valor true o false.
1 2
Seleccione el fotograma 1 en la capa UI. 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:.
El componente aparece en la carpeta Flash UI Components en el panel Biblioteca. 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.
El componente aparece en la carpeta Flash UI Components en el panel Biblioteca.
88
Captulo 3
Una vez que haya arrastrado un componente desde el panel Componentes al escenario, seleccione instancias adicionales del mismo en el panel Biblioteca.
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.
89
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 3 4 5 6
Escriba sweepstakes_box en el cuadro de texto Nombre de instancia. Escriba Absolutely! en el cuadro de texto Label. 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). 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. 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.
90
Captulo 3
2 3 4
Escriba color_box en el cuadro de texto Nombre de instancia. Asegrese de que el parmetro Editable est establecido en False. De este modo, los usuarios no pueden introducir un texto propio. 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 6 7
Haga clic en el campo default value; a continuacin, escriba Lightning para el primer valor.
value;
Haga clic en el botn Ms (+) para introducir el valor siguiente. Haga clic en el campo default a continuacin, escriba Cobalt para el valor siguiente. Del mismo modo, agregue Emerald a la lista.
Cuando haya terminado, la ventana emergente Valores debera tener el aspecto siguiente:
91
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.
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. Al finalizar, el inspector de propiedades debe tener el aspecto siguiente:
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 3
Escriba submit_btn en el cuadro de texto Nombre de instancia del inspector de propiedades. Escriba Submit en el cuadro de texto Label del inspector de propiedades. Este texto aparecer en el cuerpo del botn. 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. Al finalizar, el inspector de propiedades debe tener el aspecto siguiente:
Seleccione el componente PushButton en el fotograma 6.
92
Captulo 3
6 7 8
Escriba return_btn en el cuadro de texto Nombre de instancia del inspector de propiedades. Escriba Return en el cuadro de texto Label del inspector de propiedades. 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.
Nombre de la instancia color_box sweepstakes_box submit_btn name email return_btn name_result email_result color_result sweepstakes_text Descripcin Cuadro combinado de color de la pgina 1 Casilla de verificacin de sorteo de la pgina 1 Botn de comando de envo de la pgina 1 Cuadro de introduccin de texto para el nombre de la pgina 1 Cuadro de introduccin de texto para la direccin de correo electrnico de la pgina 1 Botn de comando de retorno de la pgina 2 Cuadro de texto dinmico de la pgina 2 para ver el nombre del usuario Cuadro de texto dinmico de la pgina 2 para ver la direccin de correo electrnico del usuario Cuadro de texto dinmico de la pgina 2 para ver la seleccin de colores del usuario 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
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 2 3
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. Si el panel Acciones no est abierto, elija Ventana > Acciones. 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.
93
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.
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(); }
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); } }
94
Captulo 3
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.
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();
95
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.
Prueba de la pelcula 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. Seleccione y anule la seleccin de la casilla de verificacin para asegurarse de que funciona. Seleccione un color y asegrese de que aparece en la pgina 2. Cuando haya terminado, seleccione Archivo > Cerrar para cerrar la pelcula en el reproductor. 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.
2 3 4 5
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.
96
Captulo 3

Tutoriales de Flash MX

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

Tutoriales de Flash MX

Cargado por

Copyright:

Formatos disponibles

Tutoriales de Flash MX

CAPTULO 1 Tutorial de introduccin a Flash MX

CAPTULO 1 Tutorial de introduccin a Flash MX

Visualizacin de la pelcula terminada

Anlisis del archivo stiletto.fla

Si el inspector de propiedades no est abierto, elija Ventana > Propiedades.

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Cuando haya visto todos los elementos, cierre el panel Biblioteca.

Tutorial de introduccin a Flash MX

Definicin de las propiedades de un documento nuevo y creacin de un fondo de degradado

Seleccione esta sombra de gris

Tutorial de introduccin a Flash MX

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

Tutorial de introduccin a Flash MX

Barra de degradado Deslizador de degradado

Haga clic en esta sombra de azul

Tutorial de introduccin a Flash MX

En el Mezclador de colores, escriba 0 en el cuadro de texto Alfa y presione Intro o Retorno o

Adicin de un segundo color de degradado Ahora agregar negro al degradado.

Ubicacin central Anchura Escala Rotacin

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Cmo crear y enmascarar ilustraciones vectoriales

Botn Insertar capa

Nota: si se equivoca, elija Edicin > Deshacer e intntelo de nuevo.

Tutorial de introduccin a Flash MX

El crculo que ha dibujado se convierte en un valo sesgado.

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Interpolar efectos de mapa de bits dentro de un clip de pelcula

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Carga de texto dinmico en tiempo de ejecucin

Importar y alinear un logotipo. Crear un campo de texto dinmico.

Tutorial de introduccin a Flash MX

En la lnea de tiempo, bloquee la capa Logo.

Men emergente Tipo de lnea

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

Tutorial de introduccin a Flash MX

Caja de herramientas Acciones

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.

Adicin de animacin y navegacin a botones

Tutorial de introduccin a Flash MX

Alinear verticalmente respecto al centro

En escenario Distribuir horizontalmente respecto al centro

Tutorial de introduccin a Flash MX

Tutorial de introduccin a Flash MX

Agregar flujos y sonidos de eventos

Agregar un flujo de sonido a la pelcula. Adicin de un sonido de evento a un botn.

Tutorial de introduccin a Flash MX

Organizacin del panel Biblioteca

Cierre el panel Biblioteca y guarde el documento.

Tutorial de introduccin a Flash MX

Prueba del rendimiento de descarga y publicacin de la pelcula

Con el documento guardado, elija Archivo > Publicar.

Tutorial de introduccin a Flash MX

Analizar una pelcula finalizada. Definir propiedades de documentos y crear un degradado.

CAPTULO 2 Tutorial de introduccin a ActionScript

Visualizacin de una pelcula completa