Tutoriales de Flash MX

™

macromedia

®

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

Esta guía contiene vínculos a sitios Web de terceros que no están bajo el control de Macromedia y, por consiguiente, Macromedia no se hace responsable del contenido de dichos sitios Web. El acceso a uno de los sitios Web de terceros mencionados en esta guía será a cuenta y riesgo del usuario. Macromedia proporciona estos vínculos únicamente como ayuda y su inclusión no implica que Macromedia se haga responsable del contenido de dichos sitios Web. Limitación de garantías de Apple APPLE COMPUTER, INC. NO GARANTIZA, DE FORMA EXPRESA NI IMPLÍCITA, LA COMERCIABILIDAD O IDONEIDAD PARA UN FIN DETERMINADO DEL PAQUETE DE SOFTWARE INFORMÁTICO INCLUIDO. LA EXCLUSIÓN DE GARANTÍAS IMPLÍCITAS NO ESTÁ PERMITIDA EN ALGUNOS ESTADOS. LA RESTRICCIÓN ANTERIOR PUEDE NO AFECTARLE. ESTA GARANTÍA LE PROPORCIONA DERECHOS LEGALES ESPECÍFICOS. PUEDE TENER OTROS DERECHOS QUE VARÍAN SEGÚN LA LEGISLACIÓN LOCAL. Copyright © 2002 Macromedia, Inc. Todos los derechos reservados. No se permite la copia, fotocopia, reproducción, traducción ni la conversión en formato electrónico o legible por equipos, ya sea de forma total o parcial de este manual, sin la autorización previa por escrito de Macromedia, Inc. Agradecimientos Director: Erick Vera Productor: Wayne Wieseler Redacción: Jody Bleyle, JuLee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor Diseño de las instrucciones: Stephanie Gowin, Barbara Nelson Edición: Rosana Francescato, Lisa Stanziano, Anne Szabla Producción y diseño multimedia: Aaron Begley, Benjamin Salles, Noah Zilberberg Producción y diseño de impresión: Chris Basmajian, Caroline Branch Localización: Michael Dominguez, Cristina Guembe, Yoshika Hedberg, Tim Hussey, Masayo ”Noppe” Noda, Simone Pux, Yoko Shindo, Yuko Yagi Primera edición: marzo de 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103

CONTENIDO

CAPÍTULO 1 Tutorial de introducción a Flash MX

.................................. 5

Qué debe saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Visualización de la película terminada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Análisis del archivo stiletto.fla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Definición de las propiedades de un documento nuevo y creación de un fondo de degradado. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Cómo crear y enmascarar ilustraciones vectoriales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Interpolar efectos de mapa de bits dentro de un clip de película . . . . . . . . . . . . . . . . . . 31 Carga de texto dinámico en tiempo de ejecución. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Adición de animación y navegación a botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Agregar flujos y sonidos de eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Organización del panel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Prueba del rendimiento de descarga y publicación de la película . . . . . . . . . . . . . . . . . . 52 Pasos siguientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 CAPÍTULO 2 Tutorial de introducción a ActionScript

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

Visualización de una película completa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Inicialización de la película . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Almacenamiento y recuperación de información . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Visualización de información en un cuadro de texto dinámico . . . . . . . . . . . . . . . . . . . 67 Especificación de una expresión. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Control del flujo de la película . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 Creación de comandos y reutilización de código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Utilización de un objeto incorporado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Prueba de la película . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Pasos siguientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 CAPÍTULO 3 Tutorial de introducción a los componentes

. . . . . . . . . . . . . . . . . . . . . . . . . . 85

Tipos de componente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Visualización del formulario finalizado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creación de un formulario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Pasos siguientes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

85 86 87 96

3

4

Contenido

CAPÍTULO 1 Tutorial de introducción a Flash MX

Este tutorial sirve de guía para el proceso de creación de diseños convincentes para Internet con Macromedia Flash MX. Si completa este tutorial, aprenderá a diseñar una película: desde cómo abrir un nuevo documento hasta publicar la película para reproducirla en Internet. Tardará tres horas aproximadamente en completar el tutorial (dependiendo de su experiencia) y aprenderá a realizar las tareas siguientes:

• • • • • • • •

Analizar una película finalizada. Definir propiedades de documentos y crear un degradado. Crear y enmascarar ilustraciones vectoriales. Interpolar efectos de mapa de bits dentro de un clip de película. Cargar texto dinámico. Modificar botones y agregar funciones de navegación. Agregar flujos y sonidos de eventos. Probar y publicar la película.

Se recomienda completar las ocho secciones incluidas en el tutorial en el orden indicado, si bien puede optar por revisar sólo las secciones que le interesen. Si completa el tutorial sin seguir el orden establecido, tenga en cuenta que en cada sección se asume que el usuario domina los conocimientos presentados en las secciones anteriores.

Qué debe saber Antes de empezar el tutorial, lea las siete lecciones de Ayuda de Flash. En estas lecciones interactivas creadas en Flash se presentan los conceptos básicos que debe conocer para completar el tutorial. Los temas de las lecciones son los siguientes:

• • • • • • •

Primeros pasos en Flash MX. Ilustración en Flash. Adición y edición de texto. Creación y edición de símbolos. Capas. Creación de botones. Creación de animaciones interpoladas.

Para tomar una lección, elija Ayuda > Lecciones y seleccione una de la lista.

5

Visualización de la película terminada Puede abrir una versión ya terminada de la película del tutorial para comprender mejor cómo se verá el archivo final. En esta sección, realizará las tareas siguientes:

• Analizar la película acabada con el inspector de propiedades y el explorador de películas. • Examinar un clip de película y discernir sus relaciones con la película principal. • Ver los tipos de elementos incluidos en la película. 1

Dentro de la carpeta de la aplicación Flash MX, vaya a Tutorials/FlashIntro y haga doble clic en stiletto.swf para abrir la película acabada en el Flash Player autónomo. Las películas Flash publicadas tienen la extensión SWF; los documentos del entorno de edición tienen la extensión FLA.

2

Cuando se abra la película, observe cómo aumentan progresivamente o se desvanecen las tres vistas del coche. Creará esta animación interpolando efectos de mapa de bits en un clip de película.

6

3

Escuche el sonido que se reproduce continuamente mientras se reproduce la película. Es un ejemplo de flujo de sonido.

4

Mueva el puntero por encima de los tres botones situados a lo largo del borde inferior derecho de la ventana para ver el efecto del desplazamiento y oír los sonidos de eventos incluidos en cada botón.

5

Haga clic en un botón para ver con qué está vinculado y, a continuación, cierre el navegador que ha abierto y vuelva al archivo SWF.

6

Después de ver la película, haga clic en su cuadro de cierre.

Capítulo 1

Análisis del archivo stiletto.fla Resulta útil analizar el archivo FLA acabado para ver cómo el autor ha diseñado el documento. Para analizar el archivo, puede ver las propiedades de un objeto, ver la línea de tiempo y el escenario, observar elementos de biblioteca y utilizar el explorador de películas. 1

En Flash, elija Archivo > Abrir. Vaya a la carpeta de la aplicación Flash y abra Tutorials/ FlashIntro/stiletto.fla. Aparecerá la película del tutorial completa en el entorno de edición. Arrastre la barra que separa el escenario de la línea de tiempo

2

Para ver todas las capas de la línea de tiempo principal, arrastre hacia abajo la barra que separa el escenario de la línea de tiempo.

3

En la línea de tiempo, desbloquee la capa de copia y la capa de imágenes.

Visualización de las propiedades del documento El inspector de propiedades permite ver especificaciones de los objetos seleccionados. Estas especificaciones dependen del tipo de objeto seleccionado. Si selecciona un objeto de texto, por ejemplo, aparece la configuración para ver y modificar los atributos de texto. 1

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

Tutorial de introducción a Flash MX

7

2

En el escenario, desplácese hacia abajo, si es necesario, y seleccione el bloque rectangular donde ha aparecido el texto descriptivo en el archivo SWF acabado. El texto no aparece en el archivo FLA porque se carga de un archivo TXT externo en un campo de texto dinámico

Cuadro de texto

En el inspector de propiedades, puede ver el tamaño, el estilo y el color del texto, entre otros atributos.

Si el inspector de propiedades no está totalmente expandido, haga clic en el triángulo blanco de la esquina inferior derecha. 3

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

Visualización del clip de película Ahora abrirá el modo de edición de símbolos para ver la línea de tiempo de un clip de película. 1

En el escenario, haga doble clic en el clip de película del coche. Como ha aprendido en la lección Creación de animaciones interpoladas, debe definir los cambios de la animación en fotogramas clave. Cuando se desplace alrededor de la línea de tiempo, observe las capas que disponen de fotogramas clave y los fotogramas que son fotogramas clave. Los fotogramas clave iniciales e intermedios que incluyen contenido se indican en la línea de tiempo mediante círculos rellenos; los fotogramas clave finales aparecen como rectángulos con contorno pequeños.

8

Capítulo 1

2

En la línea de tiempo, seleccione la cabeza lectora y arrástrela despacio por los fotogramas. Vea cómo los cambios de acción en el escenario se corresponden con los cambios en la línea de tiempo. Mientras arrastra la cabeza lectora, la película se reproduce secuencialmente. Puede agregar código ActionScript, el lenguaje de creación de scripts de Flash, a las películas para hacer que la cabeza lectora salte a fotogramas específicos.

3

Cuando termine de ver el clip de película, realice una de las acciones siguientes para volver a la película principal:

• Elija Edición > Editar documento. • Haga clic en el botón Atrás. • Haga clic en Escena 1 encima del escenario. Visualización de elementos de la biblioteca El panel Biblioteca contiene los símbolos y los objetos importados del documento. 1

Si el panel Biblioteca no está abierto, elija Ventana > Biblioteca.

2

Arrastre el panel Biblioteca para hacerlo más grande, si es necesario, y ver los objetos dentro de la biblioteca.

3

Si la carpeta Artwork no está expandida, haga doble clic para ver los objetos de la carpeta.

4

Haga clic en view1.png para ver la imagen en el área de previsualización en la parte superior del panel Biblioteca.

5

Expanda las otras carpetas del panel Biblioteca para ver los elementos incluidos en el documento, como botones y clips de película.

Tutorial de introducción a Flash MX

9

6

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

Análisis de la estructura de la película con el explorador de películas El explorador de películas ayuda a organizar, localizar y editar medios. Gracias a su estructura jerárquica en árbol, el explorador de películas proporciona información acerca de la organización y el flujo de una película, por lo que resulta especialmente útil cuando se analiza una película diseñada por otra persona. 1

Si el explorador de películas todavía no está abierto, elija Ventana > Explorador de películas.

2

Si es necesario, amplíe el explorador de películas para ver la estructura de árbol dentro del panel. Los botones de filtrado del explorador de películas muestran u ocultan información.

10

Capítulo 1

3

Haga clic en el menú emergente de la barra de título del explorador de películas y verifique que Mostrar elementos de película y Mostrar definiciones de símbolo estén seleccionados.

4

Anule la selección del botón Mostrar fotogramas y capas a lo largo de la parte superior del explorador de películas. Verifique que los únicos botones de filtro seleccionados sean Mostrar texto; Mostrar botones, elementos de película y gráficos; Mostrar archivos de comando de acción y Mostrar video, sonidos y mapas de bits.

5

Examine la lista para ver algunos de los elementos incluidos en la película y sus relaciones con otros elementos.

6

Para expandir un objeto o una categoría, haga clic en el botón de signo más (+) situado a la izquierda del nombre.

7

Seleccione el botón de filtro Mostrar fotogramas y capas. Desplácese hacia abajo en la categoría Definiciones de símbolos. Con la categoría expandida, haga doble clic en el clip de película Animación de coche. Ahora se encuentra en el modo de edición de símbolos de clips de película.

Tutorial de introducción a Flash MX

11

8

En el explorador de películas, con la categoría Animación de coche seleccionada y expandida, expanda el icono de Vista 3 Aparición y, a continuación, haga doble clic en el fotograma 60. En la línea de tiempo del clip de película, la cabeza lectora se mueve al fotograma 60 de la capa Vista 3 Aparición.

Para ver un elemento que aparezca en el árbol jerárquico, haga clic en el icono correspondiente. Si hace clic en un icono de fotograma, la cabeza lectora se mueve a ese fotograma en la línea de tiempo. Si hace clic en un elemento, como una imagen de mapa de bits, el inspector de propiedades muestra la configuración de la imagen. Al hacer doble clic en un icono que representa un símbolo se abre el modo de edición de símbolos. 9

Cierre el explorador de películas. Para cerrar el documento, elija Archivo > Cerrar. Si ha efectuado cambios en el archivo, no los guarde.

Definición de las propiedades de un documento nuevo y creación de un fondo de degradado Para saber cómo crear una película en Flash, debe empezar por el primer paso del proceso: abrir un archivo nuevo. A continuación, cuando finalice esta sección, sabrá realizar las tareas siguientes:

• Abrir un archivo nuevo y definir propiedades de documentos. • Crear y transformar un fondo de degradado. Cómo abrir un archivo nuevo Ahora estará listo para crear su propia versión de la película del tutorial. 1

Seleccione Archivo > Nuevo.

2

Elija Archivo > Guardar como.

3

Asigne al archivo el nombre mystiletto.fla y guárdelo en la carpeta de la aplicación Flash MX, en la subcarpeta Tutorials/FlashIntro/My_Stiletto.

Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.

12

Capítulo 1

Definición de propiedades de documento La configuración de las propiedades de un documento generalmente constituye el primer paso en el trabajo de edición. Puede utilizar el inspector de propiedades y el cuadro de diálogo Propiedades del documento para especificar las configuraciones que afectan a toda la película, como la velocidad de reproducción en fotogramas por segundo (fps), el tamaño del escenario y el color del fondo. 1

Si el inspector de propiedades no está abierto, elija Ventana > Propiedades. En el inspector de propiedades, verifique que 12 es el número del cuadro de texto Velocidad de fotogramas. La película se reproducirá a 12 fotogramas por segundo, una velocidad óptima para reproducir animaciones en Internet. Nota: si el inspector de propiedades no está totalmente expandido, haga clic en el triángulo blanco de la esquina inferior derecha.

2

El cuadro Color de fondo indica el color del escenario. Haga clic en la flecha abajo en el cuadro Color de fondo y, a continuación, mueva la herramienta Cuentagotas sobre las muestras de color para ver sus valores hexadecimales en el cuadro de texto hexadecimal.

3

Busque y haga clic en la muestra de color gris con el valor hexadecimal 999999. Cuadro de texto Hexadecimal

Seleccione esta sombra de gris

Tutorial de introducción a Flash MX

13

4

Para cambiar el tamaño del escenario, haga clic en el botón Tamaño, que indica el tamaño del escenario. En el cuadro de diálogo Propiedades del documento, escriba 640 px en el primer cuadro de texto Dimensiones y 290 px en el segundo cuadro de texto Dimensiones. Verifique que Píxeles esté seleccionado en el menú emergente y haga clic en Aceptar.

Las dimensiones del escenario cambian para reflejar la nueva configuración de 640 x 290 píxeles. Especificación de la configuración de cuadrícula En el escenario, puede alinear objetos a lo largo de las líneas de cuadrícula horizontales y verticales. Aunque la cuadrícula no esté visible, puede ajustar objetos a ella. Ahora modificará la distancia entre las líneas de cuadrícula horizontales y verticales y creará una cuadrícula alineada con los bordes del escenario. 1

Seleccione Ver > Cuadrícula > Editar cuadrícula.

2

En el cuadro de diálogo Cuadrícula, escriba 10 px en el cuadro de texto de anchura de la cuadrícula y 10 px en el cuadro de texto de altura de la cuadrícula.

3

Seleccione Ajustar a cuadrícula y verifique que Mostrar cuadrícula no esté seleccionado. Los objetos se ajustarán a la cuadrícula, aunque la cuadrícula no esté visible.

4

Verifique que Normal esté seleccionado en Precisión de ajuste y haga clic en Aceptar. La precisión de ajuste determina la proximidad a una línea de cuadrícula a la que debe estar un objeto para que se ajuste a ella.

14

Capítulo 1

Creación de un fondo de degradado Un degradado muestra variaciones sutiles de un color o transiciones entre dos o más colores. En el archivo de tutorial final, el fondo es un degradado que mezcla negro y azul oscuro con un área transparente que permite mostrar parte del color gris del escenario. Este efecto se consigue utilizando el Mezclador de colores. Nota: aunque los degradados ofrecen efectos interesantes en las películas, su uso excesivo puede afectar negativamente a la velocidad del procesador del equipo y reducir la velocidad a la que se reproduce una animación. Cuando diseñe una película, tenga en cuenta tanto los requisitos artísticos como los de rendimiento para determinar la utilización óptima de los degradados.

Dibujo de un rectángulo Anteriormente en el tutorial creó una cuadrícula alineada con el escenario y ajustó objetos a líneas de cuadrícula. Ahora dibujará un rectángulo que se ajusta al área de la cuadrícula que bordea el escenario. 1

En el menú emergente situado sobre el lado derecho del escenario, introduzca 75% para ver todo el escenario. Esta configuración indica la vista aumentada o reducida del escenario. La configuración no afecta al tamaño real del escenario en la película especificado en el cuadro de diálogo Propiedades del documento.

2

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

3

En la caja de herramientas, haga clic en el control Color de trazo. Seleccione Sin trazo (el botón con la línea diagonal roja que se encuentra sobre la paleta de colores).

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

Tutorial de introducción a Flash MX

15

4

Empezando por la esquina superior izquierda del escenario, arrastre el puntero a la esquina inferior derecha del escenario para dibujar un rectángulo que ocupe el escenario. Al soltar el puntero, el rectángulo se ajusta a los bordes del escenario a lo largo de la cuadrícula oculta.

Nota: mientras completa el tutorial puede serle útil deshacer cambios que haya efectuado. Flash puede deshacer varios cambios recientes que haya efectuado según la cantidad de deshacer niveles que haya configurado en Preferencias. Para deshacer, elija Edición > Deshacer o presione Ctrl+Z (Windows) o Comando+Z (Macintosh). De manera inversa, podrá rehacer lo que ha deshecho eligiendo Edición > Rehacer o presionando Ctrl+Y (Windows) o Comando+Y (Macintosh).

Especificación de un color para el degradado El azul oscuro es el primer color que se agregará al degradado. 1

En la caja de herramientas seleccione la herramienta Flecha. En el escenario, haga clic dentro del rectángulo para seleccionar el relleno. Cuando dibujó el rectángulo, el inspector de propiedades mostró las propiedades de la herramienta Rectángulo. Al seleccionar una forma que ya se ha creado, el inspector de propiedades muestra las propiedades de la forma.

2

Si no está abierto el Mezclador de colores, elija Ventana > Mezclador de colores.

3

Para expandir el Mezclador de colores, haga clic en la flecha blanca de la barra de título del panel. Haga clic aquí para expandir el panel

16

Capítulo 1

4

Si el Mezclador de colores no está totalmente expandido, haga clic en la flecha situada en la parte inferior derecha del panel.

5

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

6

Haga clic en el deslizador situado a la izquierda de la barra de degradado para seleccionarlo.

Barra de degradado Deslizador de degradado

7

Haga clic en el cuadro de color situado en la esquina superior izquierda de la ventana para abrir la paleta de colores. Utilice uno de los métodos siguientes para seleccionar azul oscuro:

• Escriba 000066 en el cuadro de texto de valor hexadecimal y presione Intro o Retorno. • Mueva el cuentagotas sobre las muestras de color hasta que encuentre el azul oscuro con el valor hexadecimal 000066 y, a continuación, haga clic en la muestra para seleccionarla.

Haga clic en esta sombra de azul

Tutorial de introducción a Flash MX

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.

Adición de un segundo color de degradado Ahora agregará negro al degradado. 1

En el Mezclador de colores, haga clic en el deslizador situado a la derecha de la barra de degradado para seleccionarlo.

2

Haga clic en el cuadro de color para abrir la paleta de colores y seleccione el negro con el valor hexadecimal 000000. Recuerde que puede escribir el valor hexadecimal en el cuadro de texto Hexadecimal y presionar Intro o Retorno, o bien buscar y seleccionar la muestra de color con el mismo valor hexadecimal.

18

Capítulo 1

Transformación del relleno de degradado Cuando se transforma un objeto, se lo gira (rota), ajusta (escala) o sesga. Puede transformar un relleno con la herramienta Transformación de relleno. 1

En la caja de herramientas, seleccione la herramienta Transformación de relleno. En el escenario, haga clic en cualquier lugar dentro del rectángulo. Aparece una elipse alrededor del escenario que indica la forma y la ubicación del degradado. La elipse dispone de controles de ubicación, anchura, escala y rotación del degradado radial.

Ubicación central Anchura Escala Rotación

Tutorial de introducción a Flash MX

19

2

Arrastre el control central hacia la izquierda del escenario de manera que esté a un tercio aproximadamente del borde izquierdo del escenario, como se muestra en la siguiente ilustración.

Al cambiar la forma y la ubicación de la elipse, también se modifican la forma y la ubicación de las transiciones del color del escenario. 3

20

Arrastre el selector cuadrado de la elipse, que controla la anchura del degradado, hacia la izquierda para estrechar la elipse; la forma aproximada de la elipse aparece en la ilustración siguiente.

Capítulo 1

4

Arrastre el selector central circular, que controla el tamaño del degradado, hacia la derecha para ensanchar la elipse, como se muestra en la ilustración siguiente.

5

Arrastre el selector circular inferior, que controla la rotación de la elipse, hacia la izquierda para rotar la elipse al ángulo aproximado que se muestra en la ilustración siguiente.

Tutorial de introducción a Flash MX

21

Asignación de nombre y bloqueo de una capa La forma del degradado aparece en la Capa 1 de la línea de tiempo, que actualmente es la única capa del documento. Como preparación para agregar y mover más objetos en el escenario, cambiará el nombre y bloqueará la capa. En la siguiente sección del tutorial creará una nueva capa. Como ya ha aprendido en la lección Capas, al bloquear la capa se asegura de que no se realicen cambios involuntarios en los objetos de la capa. 1

En la línea de tiempo, haga doble clic en el nombre Capa 1 y escriba Fondo para cambiar el nombre de la capa.

2

Haga clic fuera del nombre de la capa y, a continuación, haga clic en el icono de candado para bloquear la capa.

Cómo crear y enmascarar ilustraciones vectoriales Cuando se dibuja en Flash, se crean ilustraciones vectoriales, que son representaciones matemáticas de líneas, curvas, colores y posiciones. Una ilustración vectorial no depende de la resolución; puede volver a adaptar su escala a cualquier tamaño o visualizarla con cualquier resolución sin perder la claridad. Además, las ilustraciones vectoriales se descargan con más rapidez que las imágenes de mapa de bits equivalentes. Además del degradado, el archivo acabado contiene formas de fondo. Ahora utilizará la herramienta Óvalo para crear las formas. En concreto, en esta sección aprenderá a realizar las tareas siguientes:

• Agregar una capa. • Crear y “recortar” formas. • Enmascarar la capa que contiene las formas. Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto2.fla. Si utiliza el archivo stiletto2.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versión no modificada del archivo original. Adición de una capa En lugar de crear las formas en la capa Fondo, agregará una nueva capa en la que podrá dibujar las formas. 1

Para agregar una nueva capa, elija Insertar > Capa o haga clic en el botón Insertar capa. Asigne a la nueva capa el nombre Formas.

Botón Insertar capa

22

Capítulo 1

2

En la caja de herramientas, seleccione la herramienta Óvalo.

3

En el inspector de propiedades, seleccione Muy fina en el menú emergente Estilo del trazo. Haga clic en el control Color de trazo. En la paleta de colores, seleccione el gris con el valor hexadecimal 999999. Recuerde que puede introducir el valor hexadecimal en el cuadro de texto hexadecimal o buscar y hacer clic en la muestra de color que tenga el mismo valor hexadecimal.

4

Si el Mezclador de colores no está abierto, elija Ventana > Mezclador de colores. En el menú emergente Estilo de relleno, seleccione Sólido. Haga clic en el control Color de relleno para seleccionarlo. En el campo correspondiente al rojo (R), escriba 109. En los cuadros de texto correspondiente al verde (V) y al azul (A), escriba 45 y, a continuación, presione Intro o Retorno. Así estará especificando los valores para la cantidad de rojo, verde y azul de un color.

5

En la línea de tiempo, verifique que la capa Formas esté seleccionada. En el escenario, restrinja el óvalo a un círculo presionando Mayús mientras arrastra para dibujar un círculo que se extienda desde el área del lienzo situada sobre el escenario al área del lienzo situada bajo el escenario.

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

6

Seleccione la herramienta Flecha en la caja de herramientas y haga doble clic en el círculo del escenario para seleccionar el relleno y el trazo.

7

Si el panel Transformar no está abierto, elija Ventana > Transformar.

Tutorial de introducción a Flash MX

23

8

Para expandir el panel Transformar, haga clic en la flecha blanca situada en la esquina superior izquierda. Seleccione Sesgar y escriba 20,0 en el cuadro de texto Sesgar horizontalmente y, a continuación, presione Intro o Retorno.

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

Creación y transformación de una forma duplicada Ahora creará y transformará un óvalo duplicado. 1

24

Con el relleno y el trazo del óvalo aún seleccionado en el escenario, elija Edición > Duplicar.

Capítulo 1

2

En el inspector de propiedades, utilice el control Color de relleno para seleccionar el color negro.

3

En la caja de herramientas, seleccione la herramienta Transformación libre. Aparece una guía con selectores alrededor del óvalo duplicado.

4

Mueva el puntero sobre un selector de esquina hasta que aparezca el indicador diagonal con flechas en los dos extremos. Arrastre el selector hacia dentro para reducir el óvalo. Verifique que el trazo del óvalo interior no toque el trazo del óvalo exterior.

Tutorial de introducción a Flash MX

25

5

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

Creación de un recorte con el duplicado Cuando se crea una forma encima de otra en la misma capa y ambas formas son de colores diferentes y no están agrupadas, la forma de encima “recorta” el área de la forma de abajo. Ahora eliminará el óvalo duplicado para ver el efecto de recorte. 1

26

Con la guía de la herramienta Transformación libre alrededor del óvalo duplicado, haga clic en cualquier punto del escenario o del lienzo lejos de las formas y, a continuación, haga clic en el relleno del óvalo interior. Presione la tecla Supr del teclado para eliminar el relleno.

Capítulo 1

2

El óvalo dispone ahora de un trazo exterior y un trazo interior. Con la herramienta Flecha, haga clic en el trazo exterior del óvalo para seleccionarlo y, a continuación, haga clic mientras presiona la tecla Mayús para seleccionar también el trazo interior. Arrastre ligeramente los trazos hacia la derecha del relleno, como se muestra en la ilustración siguiente.

3

Cada área del color de relleno dentro del área dividida por el trazo representa un segmento diferenciado al que se puede dar un color por separado. Seleccione un área del relleno de la forma y utilice el Mezclador de colores para cambiar el color de relleno por una sombra marrón cuyo valor sea 117 para el rojo, 78 para el verde y 53 para el azul. Si lo desea, repita este paso para cambiar otra área de relleno a una sombra marrón más clara, como se muestra en la ilustración siguiente:

Tutorial de introducción a Flash MX

27

4

Seleccione la herramienta Transformación libre. Arrastre el puntero alrededor de las formas del fondo del óvalo para seleccionar todas las formas y, a continuación, arrastre el selector de esquina derecho de la guía para ensanchar las formas, como se muestra en la ilustración siguiente.

5

Arrastre las formas del escenario para que parte de la curva aparezca en la esquina superior izquierda y al lado derecho del escenario.

Nota: mientras vaya completando el tutorial no olvide guardar el archivo con frecuencia.

28

Capítulo 1

Creación de una máscara La ilustración que ha creado en la capa Formas sobresale del escenario hasta el área del lienzo. Aunque el área del lienzo no aparecerá en la película publicada, la ilustración que sobresale del escenario puede resultar molesta en el entorno de edición. Si bien puede borrar la parte de las formas que se extiende hasta el lienzo, es mejor aplicar una máscara sobre el escenario para que sólo permanezca visible el área que se encuentra bajo la máscara (todo el escenario, en este caso). De este modo, si desea volver a las formas para modificarlas, éstas permanecerán intactas. 1

Con la capa Formas seleccionada, agregue una capa nueva a la línea de tiempo y asígnele el nombre Máscara.

2

En la caja de herramientas, seleccione la herramienta Rectángulo y dibuje un rectángulo que vaya de la esquina superior izquierda del escenario a la esquina inferior derecha. Este rectángulo es la forma de la máscara. Todo lo que se encuentre bajo el rectángulo será visible.

Tutorial de introducción a Flash MX

29

3

Haga clic con el botón derecho del ratón (Windows) o haga clic mientras presiona la tecla Control (Macintosh) en el nombre de la capa Máscara en la línea de tiempo y elija Máscara en el menú contextual.

La capa se convierte en una capa de máscara, señalada por un icono de una flecha hacia abajo. La capa situada inmediatamente debajo está vinculada a la capa Máscara y su contenido se muestra a través del área rellenada de la máscara. El nombre de capa de máscara aparece con sangría y su icono cambia a una flecha que apunta a la derecha. La ilustración del lienzo ya no está visible en el escenario.

Las capas de máscara deben estar bloqueadas para que se muestre el efecto Máscara. Para editar las formas, puede desbloquear las capas Máscara y Formas. Cuando acabe de editar la ilustración, bloquee las capas de nuevo para invocar la máscara. 4

30

Guarde el archivo.

Capítulo 1

Interpolar efectos de mapa de bits dentro de un clip de película Además de crear ilustraciones vectoriales en Flash, puede importar imágenes de mapa de bits, que utilizan píxeles para visualizar gráficos, en la película Flash y aplicar varios efectos de color. En esta sección, realizará las tareas siguientes:

• • • •

Importar imágenes de mapa de bits. Modificar de la compresión de mapa de bits. Crear y editar un símbolo de clip de película. Interpolar efectos de mapa de bits para que aumenten progresivamente o se desvanezcan las vistas del coche.

Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o puede ir a la carpeta de la aplicación Flash MX y abrir Tutorials/FlashIntro/stiletto3.fla. Si utiliza el archivo stiletto3.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versión no modificada del archivo original. Importación de imágenes a la biblioteca Cuando importa un archivo a Flash, puede importarlo directamente a la biblioteca. 1

En la línea de tiempo, agregue una capa nueva y asígnele el nombre Imágenes.

2

Elija Archivo > Importar a biblioteca. Al seleccionar Importar a biblioteca en lugar de Importar, las imágenes deben colocarse en el escenario para que aparezcan.

3

Vaya a la carpeta Tutorials/FlashIntro/Assets, situada en la carpeta de la aplicación Flash MX, seleccione el archivo view1.png y, a continuación, haga clic mientras mantiene presionada la tecla Mayús para agregar los archivos view2.png y view3.png a la selección. Haga clic en Abrir.

4

En el cuadro de diálogo Opciones de importación PNG de Fireworks, haga clic en la opción para importar la imagen como un único mapa de bits alisado y, a continuación, haga clic en Aceptar. Las tres imágenes están ahora en la biblioteca.

Tutorial de introducción a Flash MX

31

Modificación de la compresión de mapa de bits Cuando se importa una imagen, se pueden comprobar y modificar los valores que comprimen la imagen. Aunque la compresión de imágenes reduce el tamaño de los archivos de la película, puede afectar a la calidad de la imagen: el objetivo es encontrar un equilibrio entre la configuración de la compresión y la calidad de la imagen. 1

Si el panel Biblioteca no está abierto, elija Ventana > Biblioteca. Amplíe la ventana, si es necesario, para ver los tres archivos que ha importado.

2

Haga doble clic en el archivo view1.png. La compresión JPEG es la selección predeterminada.

32

3

En el menú emergente Compresión, seleccione Sin pérdida (PNG/GIF) para obtener una mayor calidad de imagen.

4

Para probar cómo aparece la imagen con la nueva configuración, haga clic en Probar. Si es necesario, arrastre el coche a la ventana de previsualización. Cuando haya previsualizado la imagen, haga clic en Aceptar.

Capítulo 1

5

Vuelva al panel Biblioteca. Haga doble clic en el archivo view2.png, repita el paso 3 y, a continuación, haga clic en Aceptar.

6

En el panel Biblioteca, haga doble clic en view3.png, especifique Sin pérdidas (PNG/GIF) y haga clic en Aceptar.

Creación de un símbolo de clip de película En el archivo final, tres vistas del coche eléctrico aumentan progresivamente o se desvanecen en la escena de apertura. Este efecto se consigue creando un símbolo de clip de película que tenga una línea de tiempo independiente de la línea de tiempo principal. A continuación, interpolará la transparencia alfa entre tres vistas del coche para crear un efecto de aumento/desvanecimiento progresivo. Para empezar a crear el efecto primero deberá crear el clip de película. 1

Con la capa Imágenes aún seleccionada en la línea de tiempo, arrastre el objeto view1.png del panel Biblioteca al escenario y coloque el coche en el área donde el fondo de degradado sea menos oscuro.

2

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

3

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

Punto de registro

Tutorial de introducción a Flash MX

33

Edición de un símbolo Para ver la línea de tiempo del clip de película, debe estar en modo de edición de símbolos. Puede abrir el modo de edición de símbolos haciendo doble clic en el símbolo en el escenario o en el panel Biblioteca. 1

En el escenario, haga doble clic en el coche para abrir el modo de edición de símbolos. El nombre del símbolo aparece sobre el área del lienzo, junto con un vínculo para Escena 1 que retrocede a la película principal. En modo de edición de símbolos, aparecerá la línea de tiempo del clip de película en lugar de la línea de tiempo de la película principal.

2

Cambie el nombre de Capa 1 por el de Vista 1 Aparición.

3

El coche que se visualiza en el escenario es una imagen de mapa de bits, no un símbolo, dentro del símbolo Animación de coche. Convierta el coche en un símbolo seleccionándolo en el escenario y presionando F8.

4

En el cuadro de diálogo Convertir en símbolo, asigne al símbolo el nombre Vista 1 Coche y, a continuación, verifique que Clip de película esté seleccionado.

5

Verifique que el cuadrado central esté seleccionado en el indicador Registro y haga clic en Aceptar.

6

Desplácese horizontalmente por la línea de tiempo hasta que llegue al fotograma 105. Seleccione el fotograma y elija Insertar > Fotograma clave o presione F6 para agregar un fotograma clave. El indicador Fotograma actual muestra el fotograma seleccionado.

Fotograma actual

7

Agregue fotogramas clave a los fotogramas 25 y 35.

8

Agregue un fotograma clave al fotograma 34 y, a continuación, haga clic en cualquier lugar de la capa entre los fotogramas 36 y 104 y presione la tecla Supr del teclado. Aparece un fotograma clave vacío en el fotograma 35 y el coche no aparece en el escenario a partir del fotograma 35.

Nota: si se equivoca al agregar fotogramas clave y desea eliminarlos, seleccione uno o más fotogramas y haga clic con el botón derecho del ratón (Windows) o haga clic mientras mantiene presionada la tecla Control (Macintosh) y, a continuación, elija Borrar fotograma clave en el menú contextual.

34

Capítulo 1

Interpolación de efectos de mapa de bits La creación de una interpolación de efecto de mapa de bits es similar a la creación de una interpolación de movimiento recto: se especifica la configuración de los fotogramas clave de inicio y de fin y, a continuación, se especifica la interpolación para esos fotogramas y los fotogramas intermedios. Flash crea la animación de transición desde el primer fotograma clave de la animación hasta el último. 1

En la línea de tiempo de Animación de coche, seleccione el fotograma 34 y, a continuación, haga clic en Vista 1 Coche en el escenario para que el inspector de propiedades muestre las propiedades del clip de película.

2

En el menú emergente Color del inspector de propiedades, seleccione Alfa. En el menú emergente Valor para alfa, escriba 0% en el cuadro de texto y presione Intro o Retorno o utilice el deslizador para seleccionar 0%.

Rectángulo de delimitación

3

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

Aparición progresiva del segundo coche Mientras Vista 1 Coche se desvanece, otra vista del coche aparecerá progresivamente. 1

Agregue una nueva capa a la línea de tiempo de Animación de coche y asígnele el nombre Vista 2 Aparición.

2

En la capa Vista 2 Aparición, agregue un fotograma clave al fotograma 25.

3

Con la cabeza lectora aún en el fotograma 25, arrastre el objeto view2.png del panel Biblioteca al escenario.

4

Si el panel Información no está abierto, elija Ventana > Información. Verifique que el cuadrado central esté seleccionado en el indicador Registro y, a continuación, escriba 0 en el cuadro de texto de la coordenada X y 0 en el cuadro de texto de la coordenada Y. Presione Intro o Retorno. El inspector de propiedades también dispone de cuadros de texto X e Y; sin embargo, estas coordenadas se establecen con relación a un punto de registro en la esquina superior izquierda del clip de película.

Tutorial de introducción a Flash MX

35

5

Seleccione view2.png en el escenario y presione F8 para convertirlo en símbolo. En el cuadro de diálogo Convertir en símbolo, asigne al símbolo el nombre Vista 2 Coche. Verifique que Clip de película esté seleccionado y haga clic en Aceptar.

6

En el inspector de propiedades de clips de película, seleccione Alfa en el menú emergente Color y escriba 0% en el cuadro de texto Valor para alfa.

7

Agregue un fotograma clave al fotograma 35 de la capa Vista 2 Aparición.

8

En el escenario, haga clic dentro del rectángulo de delimitación del coche transparente. En el inspector de propiedades de clips de película, introduzca 100% en el cuadro de texto Valor para alfa.

9

En la capa Vista 2 Aparición, seleccione un fotograma entre los fotogramas 25 y 34. En el inspector de propiedades, seleccione Movimiento en el menú emergente Interpolación.

Desvanecimiento del segundo coche Ahora creará la animación que hace que el segundo coche se desvanezca. 1

En la capa Vista 2 Aparición, agregue un fotograma clave al fotograma 60.

2

En la capa Vista 2 Aparición, agregue un fotograma clave al fotograma 70 y otro fotograma clave al fotograma 69.

3

Seleccione el fotograma clave en el fotograma 69 de la capa Vista 2 Aparición. Seleccione Vista 2 Coche en el escenario y utilice el inspector de propiedades para seleccionar una transparencia alfa del 0%.

4

En la capa Vista 2 Aparición, seleccione un fotograma entre los fotogramas 60 y 68. En el inspector de propiedades, seleccione Movimiento en el menú emergente Interpolación.

5

Haga clic en un fotograma de la capa Vista 2 Aparición entre los fotogramas 71 y 105 y presione Supr. Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.

36

Capítulo 1

Aparición progresiva del tercer coche A medida que el segundo coche se desvanece, el tercer coche aparece progresivamente. Ahora crearemos esta animación. 1

Con la capa Vista 2 Aparición seleccionada, agregue una nueva capa a la línea de tiempo y asígnele el nombre Vista 3 Aparición.

2

En la capa Vista 3 Aparición, agregue un fotograma clave al fotograma 60.

3

Con el fotograma 60 aún seleccionado, arrastre el objeto view3.png del panel Biblioteca al escenario. Utilice el panel Información (elija Ventana > Información si el panel está cerrado) para especificar 0 tanto para la coordenada X como para la coordenada Y, así como para verificar que el punto de registro esté centrado, como ha hecho para view2.png.

4

Seleccione view3.png en el escenario y presione F8 para convertirlo en un símbolo. En el cuadro de diálogo Convertir en símbolo, asigne al símbolo el nombre Vista 3 Coche. Verifique que Clip de película esté seleccionado y haga clic en Aceptar.

5

En el inspector de propiedades, seleccione Alfa en el menú emergente Color y escriba 0% en el cuadro de texto Valor para alfa.

6

Agregue un fotograma clave al fotograma 70 de la capa Vista 3 Aparición.

7

En el escenario, efectúe su selección dentro del rectángulo de delimitación de Vista 3 Coche. En el inspector de propiedades, introduzca 100% en el cuadro de texto Valor para alfa.

8

En la capa Vista 3 Aparición, seleccione un fotograma entre los fotogramas 60 y 69. En el inspector de propiedades, seleccione Movimiento en el menú emergente Interpolación.

Desvanecimiento del tercer coche Ahora creará la animación que hace que el tercer coche se desvanezca. 1

En la capa Vista 3 Aparición, agregue un fotograma clave a los fotogramas 95 y 105.

2

Con el fotograma 105 seleccionado en la capa Vista 3 Aparición, seleccione Vista 3 Coche en el escenario y utilice el inspector de propiedades para seleccionar una transparencia alfa del 0%.

3

En la capa Vista 3 Aparición, seleccione un fotograma entre los fotogramas 95 y 104. En el inspector de propiedades, seleccione Movimiento en el menú emergente Interpolación.

Tutorial de introducción a Flash MX

37

Aparición progresiva del primer coche Mientras el tercer coche se desvanece, el primer coche debe aparecer progresivamente para completar la animación. 1

En la capa Vista 1 Aparición, agregue un fotograma clave al fotograma 95.

2

Con el fotograma 95 aún seleccionado, arrastre el clip de película Vista 1 Coche (no view1.png) del panel Biblioteca al escenario.

3

En el panel Información, escriba 0 en el cuadro de texto de la coordenada X y 0 en el cuadro de texto de la coordenada Y. Presione Intro o Retorno.

4

En el inspector de propiedades, seleccione Alfa en el menú emergente Color e introduzca 0% en el cuadro de texto Valor para alfa.

5

Seleccione el fotograma 104 de la capa Vista 1 Aparición.

6

Haga clic dentro del rectángulo de delimitación del clip de película Vista 1 Coche en el escenario. En el inspector de propiedades, introduzca 100% en el cuadro de texto Valor para alfa.

7

En la capa Vista 1 Aparición, seleccione un fotograma entre los fotogramas 95 y 104. En el inspector de propiedades, seleccione Movimiento en el menú emergente Interpolación. Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.

Prueba de la película En cualquier momento durante la edición podrá probar cómo se reproducirá la película como archivo SWF. 1

Guarde la película y elija Control > Probar película. Flash exporta una copia SWF de su película. En la película SWF, la animación se reproduce de forma automática de forma continua.

2

Cuando termine de ver la película, cierre el archivo SWF haciendo clic en su cuadro de cierre. En el documento de Flash, elija Edición > Editar documento o haga clic en Escena 1 para volver a la línea de tiempo principal.

Carga de texto dinámico en tiempo de ejecución En la lección Adición y edición de texto ha practicado cómo escribir texto directamente en el escenario. Puede diseñar también la película para que incluya texto de archivos externos. Uno de los modos más sencillos para hacerlo es con la acción loadVariables para cargar texto en un campo de texto dinámico en tiempo de ejecución. En el archivo FLA puede especificar atributos de texto tales como el estilo de fuente, el tamaño y el color para el campo de texto dinámico. Una ventaja de mantener texto en archivos externos es que todo aquel que desee modificar el texto puede trabajar con el archivo de texto en lugar de con el archivo FLA. En esta sección aprenderá a realizar las tareas siguientes:

• Importar y alinear un logotipo. • Crear un campo de texto dinámico.

38

Capítulo 1

• Utilizar el inspector de propiedades para asignar un nombre de variable de texto. • Utilizar la acción loadVariables para cargar texto de un archivo externo. Para completar esta sección, puede continuar trabajando en el archivo mystiletto.fla o puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto4.fla. Si utiliza el archivo stiletto4.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versión no modificada del archivo original. Importación del logotipo Antes de crear el campo de texto dinámico, importará el logotipo, que es un archivo de Macromedia FreeHand para el que Flash agrega de forma automática una capa en la línea de tiempo. 1

En la línea de tiempo, seleccione la capa Imágenes y agregue una nueva capa encima de ésta. Asigne a la nueva capa el nombre Copia.

2

Con la capa Copia seleccionada, elija Archivo > Importar. Recordará que ya en otra sección de este tutorial importó objetos a la biblioteca. Ahora importará el logotipo para que aparezca en el escenario.

3

Busque en la carpeta de la aplicación Flash MX la carpeta Tutorials/FlashIntro/Assets, haga clic en logo.fh10 y, a continuación, haga clic en Abrir.

4

En el cuadro de diálogo Importar de FreeHand, verifique que Escenas, Capas y Todo estén seleccionados. Compruebe también que las opciones Incluir capas de fondo y Mantener texto como bloques estén seleccionadas y, a continuación, haga clic en Aceptar.

5

En la línea de tiempo, Flash ha creado una capa denominada Logo. Arrastre el nombre Logo para mover la capa debajo de la capa Copia.

6

Puede especificar las coordenadas de escenario para el logotipo. En el inspector de propiedades, con el logotipo seleccionado, escriba 10 en el cuadro de texto X y 20 en el cuadro de texto Y. A continuación, presione Intro o Retorno.

Tutorial de introducción a Flash MX

39

7

En la línea de tiempo, bloquee la capa Logo.

Creación de un campo de texto dinámico Ahora creará un campo de texto dinámico. En lugar de escribir texto en el campo, especificará el texto de la variable que se carga en el campo en tiempo de ejecución. 1

En la línea de tiempo, seleccione la capa Copia. En la caja de herramientas seleccione la herramienta Texto. En el inspector de propiedades, seleccione Texto dinámico en el menú emergente Tipo de texto.

2

En el menú emergente Fuente, seleccione _sans. _sans es una fuente de dispositivo apropiada para texto de pequeño tamaño en diferentes plataformas. Para obtener más información acerca de las fuentes de dispositivos, consulte “Utilización de fuentes de dispositivo (sólo texto horizontal)” en Ayuda > Utilización de Flash.

3

En el cuadro de tamaño escriba 12.

4

Haga clic en Color de texto (relleno) y seleccione amarillo, con el valor hexadecimal FFCC00.

5

En el menú emergente Tipo de línea, seleccione Multilínea, que se utiliza para varias líneas de texto que se ajustarán. Menú emergente Tipo de texto Menú emergente Fuente Cuadro de tamaño en puntos del texto

Menú emergente Tipo de línea

40

Capítulo 1

6

En el escenario, haga clic debajo del logotipo. Arrastre el puntero para crear un campo de texto con la anchura del texto del logotipo y la profundidad aproximada de la línea vertical que está agrupada con el logotipo, como se muestra en la ilustración siguiente.

7

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

El archivo de texto que se cargará en el campo de texto dinámico (tal como se ve en la ilustración siguiente) incluye texto que da nombre a la variable: textField=. Cuando se introduce este nombre en el cuadro de texto Var, se está asignando un nombre a la variable que la película debe cargar.

Utilización de la acción loadVariables para cargar texto La acción loadVariables incluye un parámetro para especificar la ruta al texto de la variable. El texto se encuentra en un archivo denominado copy.txt de la carpeta Tutorials/FlashIntro/Assets. 1

En la línea de tiempo, agregue una capa nueva y asígnele el nombre Acciones. Si es necesario, arrastre la capa Acciones a la parte superior de la línea de tiempo. Se recomienda mantener las acciones en la capa superior de una línea de tiempo.

2

Si el panel Acciones no está abierto, elija Ventana > Acciones. Amplíe el panel Acciones, si es necesario, haciendo clic en la flecha blanca de la barra de título para expandir la ventana o arrastrando la esquina inferior derecha del panel para ver la caja de herramientas Acciones y el panel Script. El tipo de panel Acciones que se muestra depende del objeto al que se está agregando una acción. Si, por ejemplo, seleccionó un fotograma, el panel Acciones muestra las acciones de los fotogramas. Si seleccionó un botón, el panel Acciones muestra las acciones de los botones.

Tutorial de introducción a Flash MX

41

3

Haga clic en el triángulo de la esquina superior derecha de la barra de título para mostrar el menú emergente. Compruebe que se ha seleccionado el modo normal y no el experto. El modo experto ofrece funciones que son útiles para los usuarios con más experiencia en ActionScript. En modo normal, los campos de parámetros y controles le guían en la creación de código de ActionScript. Botón del menú Opciones

Caja de herramientas Acciones

4

Panel Script

En la caja de herramientas Acciones, elija Acciones > Navegador/Red y, a continuación, haga clic en loadVariables. El código de ActionScript se agrega al panel Script. Los parámetros de la acción aparecen sobre el panel Script.

42

Capítulo 1

5

En el cuadro de texto URL, escriba la ruta al archivo de texto: ../assets/copy.txt.

Prueba de la película

• Guarde la película y, a continuación, elija Control > Probar película. También puede presionar Ctrl+Intro (Windows) o Comando+Retorno (Macintosh).

Adición de animación y navegación a botones Cuando se especifica que un símbolo nuevo es un botón, Flash crea la línea de tiempo para los estados del botón. En la lección Creación de botones, ha aprendido a cambiar el color de relleno de una forma dentro de un estado de botón. En esta sección, aprenderá más acerca de la modificación de botones, incluida la animación a un botón. En concreto, en esta sección aprenderá a realizar las tareas siguientes:

• • • • • •

Importar una biblioteca de otro archivo FLA. Alineación de botones. Agregar animación a un estado de botón. Agregar navegación a un botón para establecer un vínculo con un sitio Web. Utilizar la función Habilitar botones simples. Adición de navegación con botones.

Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto5.fla. Si utiliza el archivo stiletto5.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versión no modificada del archivo original.

Tutorial de introducción a Flash MX

43

Importación de la biblioteca de otro archivo FLA Los botones que utilizará en la película residen en la biblioteca de otro archivo FLA. Para utilizar los botones, abra como una biblioteca el archivo FLA que contiene los botones. 1

Con el panel Biblioteca abierto, elija Archivo > Abrir como biblioteca. En la carpeta de la aplicación Flash MX busque la carpeta Tutorials/FlashIntro/Assets y haga doble clic en el botón buttons.fla. La biblioteca del archivo buttons.fla aparece junto a la biblioteca del documento.

Alineación de botones Puede alinear los tres botones a lo largo de los ejes vertical y horizontal con el panel Alinear. 1

En la línea de tiempo, con la capa Copia seleccionada, agregue una capa nueva y asígnele el nombre Botones. Bloquee todas las capas excepto la capa Botones.

2

En el menú emergente Ver del escenario, situado a la derecha sobre el escenario, introduzca 150% para ampliar la vista del escenario. A continuación, desplácese a la parte inferior derecha del escenario.

3

Arrastre el botón 1 del panel de la biblioteca buttons.fla y colóquelo debajo de la esquina inferior derecha del campo de texto dinámico.

Cuando se arrastra un botón del panel de la biblioteca buttons.fla, el botón pasa a formar parte de la biblioteca del documento.

44

Capítulo 1

4

Arrastre el botón 2 y el botón 3 del panel de la biblioteca buttons.fla y colóquelos a la izquierda del botón 1. Utilice el espaciado aproximado que se muestra en la ilustración siguiente:

5

Con la herramienta Flecha, arrastre el puntero para seleccionar los tres botones.

6

Para abrir el panel Alinear, elija Ventana > Alinear. Verifique que En escenario no esté seleccionado (en este momento no alineará los botones con el escenario). Haga clic en Alinear verticalmente respecto al centro y, a continuación, haga clic en Distribuir horizontalmente respecto al centro.

Alinear verticalmente respecto al centro

En escenario Distribuir horizontalmente respecto al centro

Los botones se alinean en el escenario. Habilitar botones simples Cuando la función Habilitar botones simples está activa, puede oír los sonidos incluidos con los botones 2 y 3 y puede ver los colores utilizados para los estados de los botones. No se reproduce el diseño más complejo de botones, como las animaciones. 1

Elija Control > Habilitar botones simples y, a continuación, sitúese sobre cada botón y haga clic en él. El botón derecho, botón 1, no está listo. A continuación, lo modificaremos.

2

Cuando haya probado los botones, elija Control > Habilitar botones simples para anular la selección de esa función.

Tutorial de introducción a Flash MX

45

Modificación de un estado de botón Ahora creará una película dentro del estado Sobre del botón 1 y, a continuación, creará una interpolación de forma en el clip de película. La interpolación de forma crea un efecto que cambia el color de gris a rojo. 1

En el escenario, haga doble clic en el botón de la derecha, botón 1, para abrir el modo de edición de símbolos.

2

En la línea de tiempo del botón 1, oculte todas las capas excepto la capa Color. En la capa Color, seleccione el fotograma clave Sobre.

3

En el escenario, seleccione la forma de óvalo negro para el botón de la derecha. Presione F8 para que el óvalo se convierta en un símbolo. En el cuadro de diálogo Convertir en símbolo, asigne al símbolo el nombre Animación de botón. Seleccione Clip de película y haga clic en Aceptar.

4

En el escenario, haga doble clic en el símbolo Animación de botón para abrir el modo de edición de símbolos.

5

Cambie el nombre de la Capa 1 por el de Cambio de color y agregue un fotograma clave al fotograma 15.

6

Con la cabeza lectora aún en el fotograma 15, seleccione la forma del botón en el escenario y elija una sombra brillante roja en el menú emergente Color de relleno en la caja de herramientas.

7

En la línea de tiempo, haga clic en un fotograma entre los fotogramas 1 y 13. En el inspector de propiedades, seleccione Forma en el menú emergente Interpolación. Arrastre la cabeza lectora desde el fotograma 1 al 15 para ver el cambio de color.

Adición de acciones a botones Cuando el usuario haga clic en el botón y la animación interpolada se reproduzca, haremos que la cabeza lectora se mueva al final de la línea de tiempo de Animación de botón y se detenga. ActionScript, el lenguaje de creación de scripts de Flash, se utiliza para controlar el movimiento de la cabeza lectora en una línea de tiempo.

46

1

Agregue una nueva capa a la línea de tiempo Animación de botón y asígnele el nombre Acciones.

2

En la capa Acciones, agregue un fotograma clave al fotograma 15.

3

Si el panel Acciones no está abierto, elija Ventana > Acciones. Amplíe el panel, si es necesario, para ver la caja de herramientas Acciones y el panel Script.

Capítulo 1

4

Con el fotograma 15 de la capa Acciones seleccionado, vaya a la categoría Acciones > Control de película de la caja de herramientas Acciones y haga doble clic en stop. La acción stop permite indicar, en este caso, que la cabeza lectora se detenga cuando llegue al fotograma 15.

En la línea de tiempo de Animación de botón, el fotograma 15 de la capa Acciones muestra una a pequeña, que indica que se ha adjuntado una acción a ese fotograma.

Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.

Adición de navegación con botones La acción getURL se utiliza para agregar navegación a un botón que se abre en un sitio Web. 1

Elija Edición > Editar documento o haga clic en Escena 1 para volver a la película principal.

2

En el escenario, haga clic en el Botón 1, el botón de la derecha.

3

En el panel Acciones, elija Acciones > Navegador/Red y haga doble clic en getURL.

4

En el cuadro de texto URL, escriba un URL completo, como http://www.macromedia.com.

Tutorial de introducción a Flash MX

47

5

En el menú emergente Ventana, seleccione _blank para que se inicie una nueva ventana de navegador cuando el usuario haga clic en el Botón 1.

6

Guarde el archivo y, a continuación, elija Control > Probar película. Haga clic en el Botón 1 para ir al sitio Web que ha especificado en el paso 4.

7

Cierre el navegador y el archivo SWF y, a continuación, vuelva al entorno de edición de Flash. Si lo desea, puede seleccionar el Botón 2 en el escenario y repetir los pasos del 3 al 7 para vincularlo con otro sitio Web y, a continuación, repetir los pasos para el Botón 3. Cuando haya agregado todos los vínculos, cierre el panel Acciones.

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

• Agregar un flujo de sonido a la película. • Adición de un sonido de evento a un botón.

48

Capítulo 1

Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto6.fla. Si utiliza el archivo stiletto6.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versión no modificada del archivo original. Adición de un flujo de sonido Puede incluir sonido en la película arrastrando el sonido al escenario. Aquí agregará música de fondo que fluya y se reproduzca un número de veces determinado. 1

En la línea de tiempo, con la capa Botones seleccionada, agregue una capa nueva y asígnele el nombre Sonidos.

2

Elija Archivo > Importar. En la carpeta de la aplicación Flash MX, vaya a Tutorials/FlashIntro/ Assets y haga clic en track1.mp3. Haga clic mientras mantiene presionada la tecla Ctrl (Windows) o la tecla Comando (Macintosh) para agregar ping.mp3 a la selección y, a continuación, haga clic en Abrir. Los archivos se importan a la biblioteca.

3

Con la capa Sonidos seleccionada, arrastre el sonido track1.mp3 del panel Biblioteca al escenario. En la línea de tiempo, una representación pequeña de ondas de sonido aparece en el fotograma.

4

Seleccione el primer fotograma de la capa Sonidos en la línea de tiempo. En el inspector de propiedades, escriba 999 en el cuadro de texto Bucle para especificar el número de veces que el sonido puede reproducirse de forma continua.

Prueba de la película 1

Guarde el archivo y, a continuación, elija Control > Probar película para oír el sonido.

2

Cuando se termine de reproducir la película, haga clic en el cuadro de cierre de la película.

Adición de un sonido de evento a un botón Además de arrastrar un sonido al escenario, puede seleccionar un sonido en el inspector de propiedades. A continuación utilizará este método para agregar un sonido de evento a un botón. Como ha aprendido en la lección Creación de botones, al crear un símbolo de botón, Flash crea fotogramas para los distintos estados de botón en relación con el puntero del ratón. El fotograma Sobre, por ejemplo, representa el estado del botón cuando el puntero está sobre el botón. Otros estados/fotogramas de botón son Reposo, Presionado y Zona activa. Ahora agregará un sonido de evento a un botón, lo que hace que el sonido se reproduzca mientras el botón está en estado Sobre. Como está agregando el sonido al símbolo del botón en la biblioteca y no sólo a una instancia del símbolo, el sonido se reproducirá en cada instancia del botón. 1

En el panel Biblioteca, haga doble clic en la instancia Botón 1 para abrir el modo de edición de símbolos.

2

En la línea de tiempo para el Botón 1, agregue una capa nueva y asígnele el nombre Sonido.

3

Seleccione el fotograma Sobre (Fotograma 2) de la capa Sonido y elija Insertar > Fotograma clave o presione F6.

Tutorial de introducción a Flash MX

49

4

Para definir las propiedades de sonido, haga clic en el fotograma 2 de la capa Sonido. En el inspector de propiedades, seleccione Ping.mp3 en el menú emergente Sonido. Verifique que Evento esté seleccionado en el menú emergente Sinc.

5

Guarde el documento y elija Control > Probar película para oír los sonidos del botón. Cuando haya visto el archivo SWF, cierre su ventana para volver al documento.

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

50

1

Si el panel Biblioteca no está abierto, seleccione Ventana > Biblioteca.

2

Expanda y amplíe la ventana, según sea necesario, para ver todos los elementos del panel Biblioteca. En la parte inferior del panel Biblioteca, haga clic en el botón Nueva carpeta cuatro veces para crear cuatro carpetas nuevas.

Capítulo 1

3

Haga doble clic en el nombre de la carpeta sin título 1 y cámbiele el nombre por el de Clips de película de animación de coche.

4

Cambie el nombre de las otras tres carpetas por el de Sonidos, Ilustraciones y Botones.

5

Arrastre Vista 1 Coche, Vista 2 Coche, Vista 3 Coche y Animación de coche a la carpeta Clips de película de animación de coche.

6

Arrastre los objetos ping.mp3 y track1.mp3 a la carpeta Sonidos.

7

Arrastre los objetos view1.png, view2.png y view3.png a la carpeta Ilustraciones.

8

Arrastre los objetos Botón 1, Botón 2 y Botón 3 a la carpeta Botones. Con la carpeta Botones seleccionada, haga clic de nuevo en Nueva carpeta para crear una subcarpeta de la carpeta Botones.

9

Asigne a la nueva carpeta el nombre Clips de película de botones y, a continuación, arrastre los elementos restantes de clips de película de botón a esta carpeta.

10

Cierre el panel Biblioteca y guarde el documento.

Tutorial de introducción a Flash MX

51

Prueba del rendimiento de descarga y publicación de la película Para acabar el documento, utilizará el comando Publicar para crear una película compatible con Internet cuya extensión sea SWF. Si utiliza el comando Publicar con las configuraciones predeterminadas, Flash preparará su archivo para Internet. Flash publicará el archivo SWF y creará un archivo HTML con las etiquetas necesarias para mostrar el archivo SWF. Una vez definidas las opciones de Configuración de publicación necesarias, podrá elegir Archivo > Publicar para exportar al mismo tiempo a todos los formatos seleccionados. Flash almacena la configuración de publicación que se especifica con el documento, de manera que cada película puede tener su propia configuración. En esta sección aprenderá a realizar las tareas siguientes:

• Utilizar el Creador de perfil para ancho de banda para probar el rendimiento de descarga de la película.

• Publicar la película en un paso. • Revisar y modificar la configuración de publicación. • Ver la película en un navegador Web. Para completar esta sección, puede continuar trabajando con el archivo mystiletto.fla o puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/FlashIntro/stiletto7.fla. Si utiliza el archivo stiletto7.fla, guárdelo con un nombre nuevo en la carpeta My_Stiletto para mantener una versión no modificada del archivo original. Comprobación del rendimiento de descarga de la película Para que una película Flash se reproduzca correctamente en Internet, se debe descargar un fotograma antes de que la película alcance ese fotograma. Si la película alcanza un fotograma que no se ha descargado aún, se pondrá en pausa hasta que lleguen los datos. El ancho de banda reducido de los archivos Flash favorece las descargas rápidas. Podrá usar el Creador de perfil del ancho de banda para comprobar su película e identificar dónde podrían ocurrir las pausas. El Creador de perfil para ancho de banda muestra el volumen de datos que se envía desde cada fotograma de la película en función de la velocidad definida del módem. 1

Guarde el documento y elija Control > Probar película.

2

En el menú Depuración, seleccione una velocidad de módem para determinar la velocidad de descarga que Flash simulará. También puede elegir Personalizar para introducir una velocidad de descarga.

52

Capítulo 1

3

Elija Ver > Creador de perfil para ancho de banda para ver el archivo SWF con un gráfico del rendimiento de descarga.

La barra sombreada representa el primer y único fotograma de la película principal. Las películas con varios fotogramas tendrán varias barras sombreadas. La altura de la barra representa el tamaño del fotograma en bytes y kilobytes. Las barras que se extienden sobre la línea roja, especialmente si la barra representa un fotograma distinto del primero, indican que pueden producirse demoras en la reproducción de la película. Puede optimizar la película para que se descargue con más rapidez. Para obtener detalles, consulte la sección “Optimización de películas” en Ayuda > Utilización de Flash. 4

Cuando termine de ver el Creador de perfil para ancho de banda, elija Ver > Creador de perfil para ancho de banda para anular su selección. Cierre la ventana del archivo SWF para regresar al entorno de edición.

Utilización del comando Publicar Puede publicar el documento de Flash para que se reproduzca en Internet en un paso.

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

Tutorial de introducción a Flash MX

53

Visualización de las configuraciones de publicación Mediante el cuadro de diálogo Configuración de publicación es fácil volver a configurar la forma en que se publica su archivo. 1

Para ver la configuración de sus publicaciones elija Archivo > Configuración de publicación

Flash está configurado de forma predeterminada para crear un archivo HTML de apoyo que muestre la película Flash. Cuando selecciona un formato que necesita configuraciones adicionales aparece una nueva ficha. 2

En la ficha Formatos, verifique que Flash (.swf ) y HTML (.html) estén seleccionados. Haga clic en la ficha Flash. De manera predeterminada, la película se publica para Flash Player. En el proceso de publicación también se aplica la compresión de películas y JPEG.

3

Haga clic en la ficha HTML. De manera predeterminada, el proceso de publicación crea un documento HTML que inserta el archivo SWF en una ventana de navegador. La configuración de la ficha HTML del cuadro de diálogo Configuración de publicación determina el modo en que la película aparece en el navegador.

54

Capítulo 1

Cambio en la configuración de publicación De forma predeterminada, Flash da al archivo SWF el mismo nombre que el archivo FLA. Puede indicar a Flash que cambie el nombre. 1

En la ficha Formatos del cuadro de diálogo Configuración de publicación anule la selección de Usar nombres predeterminados.

2

En el cuadro de texto HTML (.html), seleccione el texto existente y escriba un nombre nuevo, como stilettoElectric.html. A continuación, haga clic en Publicar. Cuando se cierre la ventana de estado Publicación, haga clic en Aceptar en el cuadro de diálogo Configuración de publicación.

Visualización de la película publicada en un navegador Puede ver el archivo HTML y la película SWF, que acaba de publicar, en el navegador. 1

Abra el navegador y, a continuación, abra el archivo HTML que ha creado. De manera predeterminada, el archivo HTML se encuentra en la misma carpeta que el archivo FLA. Cuando se abre el archivo HTML, la película SWF se reproduce en el navegador.

2

En el navegador puede utilizar un comando como Ver > Origen de la página o Ver > Código fuente para ver el código HTML. Las etiquetas OBJECT y EMBED garantizan que la película SWF se visualice en el navegador.

Para obtener más información acerca de las plantillas HTML de Flash, consulte la sección .

Pasos siguientes Al completar las ocho secciones del tutorial ha aprendido mucho acerca de la creación de películas Flash, incluidas las tareas siguientes:

• Analizar una película finalizada. • Definir propiedades de documentos y crear un degradado. Tutorial de introducción a Flash MX

55

• • • • • •

Crear y enmascarar ilustraciones vectoriales. Interpolar efectos de mapa de bits dentro de un clip de película. Cargar texto dinámico. Modificar botones y agregar funciones de navegación. Agregar flujos y sonidos de eventos. Probar y publicar una película.

Puede aprender más acerca de las posibilidades de Flash consultando el Tutorial de introducción a ActionScript en Ayuda > Tutoriales. Al estar diseñado para personas no familiarizadas con ActionScript, el tutorial sirve de introducción a los conceptos de creación de scripts permitiendo, a la vez, crear un rompecabezas con diferentes acciones. Además, puede buscar los artículos y notas técnicas de Flash MX en el galardonado Centro de soporte de Macromedia. Para acceder al sitio, vaya a www.macromedia.com y haga clic en Support.

56

Capítulo 1

CAPÍTULO 2 Tutorial de introducción a ActionScript

ActionScript es el lenguaje de creación de scripts de Macromedia Flash MX. El lenguaje de creación de scripts permite comunicarse con un programa; puede utilizarlo para indicar a Flash qué debe hacer y para preguntar a Flash qué sucede mientras se reproduce una película. Esta comunicación bidireccional permite crear películas interactivas. En este tutorial se examinarán las tareas relacionadas con la creación de un rompecabezas interactivo. Este tutorial está diseñado para usuarios de Flash que no tienen experiencia en ActionScript y que desean profundizar en el tema. El usuario debe estar familiarizado con las acciones básicas y debe saber cómo asignarlas en el panel Acciones. Para sacar el máximo provecho de este tutorial, antes debe realizar el Tutorial de introducción a Flash MX, en Ayuda > Tutoriales. Asimismo, debe estar familiarizado con los conceptos presentados en las secciones “Creación de scripts con ActionScript” y “Creación de interacciones con ActionScript” en Ayuda > Utilización de Flash. Tardará una hora aproximadamente en completar este tutorial (dependiendo de su experiencia) y aprenderá a realizar las tareas siguientes:

• • • • • • • •

Inicialización de la película. Almacenamiento y recuperación de información. Visualización de información en un cuadro de texto dinámico. Especificación de una expresión. Control del flujo de la película. Creación de comandos y reutilización de código. Utilización de un objeto incorporado. Prueba de la película.

57

Visualización de una película completa Antes de empezar a trabajar en su propia película, puede ver una versión completa del tutorial para hacerse una idea de lo que creará. Además, con el tutorial completo tendrá la oportunidad de examinar la línea de tiempo, el explorador de películas, el escenario y el panel Acciones, con los que podrá comprender las prácticas de edición. 1

En la carpeta de la aplicación Flash MX, vaya a Tutorials/ActionScript/Finished. Haga doble clic en el archivo puzzle.swf para abrir la película completa en el Flash Player independiente.

2

En la película puzzle.swf, haga clic en el botón Aceptar. Las piezas del rompecabezas se desordenan.

3

Haga clic en todos los botones Mostrar/Ocultar. Observe que aparecen los diferentes patrones y números de pieza como guía para componer el rompecabezas.

4

Haga clic en una pieza del rompecabezas y arrástrela al área de la solución. La pieza se coloca en su sitio.

5

Presione Mayús y haga clic en una pieza del rompecabezas. El número de la pieza aparece en el círculo situado debajo del área de la solución. Si no puede continuar, puede hacer coincidir el número de pieza con su ubicación en la guía de números de pieza.

6

Presione la tecla Alt (Windows) o la tecla Opción (Macintosh) y haga clic en una pieza del rompecabezas. La pieza gira en el sentido de las agujas del reloj.

7

58

Cuando termine de ver el archivo SWF, puede cerrar la ventana o dejarla abierta para que le sirva de referencia.

Capítulo 2

Análisis del archivo puzzle.fla Resulta útil analizar el archivo FLA completo para determinar cómo lo ha compuesto el autor y dónde se encuentran los elementos de ActionScript. 1

En Flash, elija Archivo > Abrir. En la carpeta de la aplicación Flash MX, vaya a Tutorials/ ActionScript/Finished y abra el archivo puzzle.fla. Aparecerá la película del tutorial completa en el entorno de edición.

2

Para ver todo el contenido en el escenario, seleccione Ver > Aumentar y reducir > Mostrar fotograma. La película sólo contiene un fotograma, que se muestra en la línea de tiempo principal del archivo puzzle.fla. Utilizará ActionScript para mostrar y ocultar los diferentes cuadros de diálogo y las guías de patrones que aparecen en el rompecabezas.

3

Para cambiar el tamaño de la línea de tiempo y del escenario, arrastre la barra que los separa de arriba a abajo. Desplácese por la línea de tiempo para ver la forma en que se organizan las capas.

Mueva esta barra para cambiar el tamaño de la línea de tiempo

4

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

Tutorial de introducción a ActionScript

59

5

Seleccione el fotograma 1 de la capa de acciones. El fotograma 1 tiene una a minúscula, que indica que hay acciones asociadas al fotograma. Para agregar un elemento de ActionScript a una película, debe asignarlo a un botón, a un fotograma o a un clip de película. Los scripts de fotograma se indican mediante una a minúscula en la línea de tiempo. Para localizar scripts de botones y de clips de película, lleve a cabo una de las acciones siguientes:

• Abra el panel Acciones y seleccione un script de la barra de salto (la lista emergente situada debajo de la barra de título del panel Acciones).

• Seleccione los botones y los clips de película en el escenario con el panel Acciones abierto. • Utilice los botones de filtrado o el cuadro de texto Buscar para buscar el script en el explorador de películas. 6

Para ver las acciones, elija Ventana > Acciones. Se abre el panel Acciones. Si es necesario, expanda el panel para ver las acciones asociadas al fotograma. El panel Acciones tiene dos modos: Normal y Experto. En este tutorial se explica cómo agregar acciones en modo Normal.

Visualización de acciones en el explorador de películas 1

Para localizar todas las acciones de la película, utilice el explorador de películas. Si no está abierto, seleccione Ventana > Explorador de Películas. En el explorador de películas, anule la selección de todos los botones de filtrado excepto el botón ActionScript. Además de las acciones del fotograma 1 de la capa de acciones, las acciones también se incluyen en cada uno de los botones Mostrar/Ocultar, en los botones de los diferentes cuadros de diálogo que aparecen y en cada pieza del rompecabezas.

2

60

Seleccione Archivo > Cerrar para cerrar la película puzzle.fla cuando haya terminado. No guarde los cambios en el archivo terminado.

Capítulo 2

Inicialización de la película Todas las películas tienen un estado inicial. Esto muestra el aspecto de una película antes de que se reproduzca y de que otros interactúen con ella. En ocasiones deberá establecer variables y propiedades de clip de película para establecer este primer estado. Por ejemplo, en el archivo puzzle.fla, deben ocultarse algunos cuadros de diálogo y guías de patrón en el estado inicial. Cada clip de película en una película Flash tiene un conjunto de cualidades, o propiedades, que puede manipular con ActionScript. Cada una de estas propiedades se identifica mediante un nombre precedido por un carácter de subrayado (_). Por ejemplo, cada clip de película tiene una propiedad _xscale, una propiedad _yscale y una propiedad _rotation, entre otras. ActionScript utiliza variables para almacenar información. Por ejemplo, la variable myName puede contener el valor “Jody Singer”. En la sección “Almacenamiento y recuperación de información” en la pagina 65 podrá obtener más información sobre las variables. Las propiedades y las variables se inicializan en el primer fotograma de una película. Puede asignar una acción de fotograma en la línea de tiempo o puede asociar una acción de objeto a un clip de película. En la película del rompecabezas, las propiedades de los clips de película de guía de patrón y de cuadro de diálogo se inicializan en el primer fotograma de la línea de tiempo principal. Apertura del archivo inicial Ahora estará listo para crear su propia versión de la película del tutorial. 1

Elija Archivo > Abrir.

2

En la carpeta de la aplicación Flash MX, vaya a Tutorials/ActionScript/My_Puzzle y abra el archivo mypuzzle.fla.

3

Si recibe un mensaje de sustitución de fuentes, haga clic en Usar opciones predeterminadas. Verá una película del tutorial completada parcialmente. La película puede parecer completa porque todos los símbolos se encuentran en su sitio en el escenario. Sin embargo, todavía debe agregar algunos scripts para hacer que la película sea interactiva.

4

Seleccione Archivo > Guardar como y guarde el archivo con un nombre nuevo consecutivo, como por ejemplo mypuzzle2.fla, en la misma carpeta que mypuzzle.fla. Si hace una copia del archivo, usted u otro usuario podrán volver a realizar el tutorial con el archivo mypuzzle.fla original. Asimismo, si de forma periódica guarda el archivo con un nombre nuevo consecutivo, puede volver a un archivo anterior si comete un error y no puede resolverlo en el archivo actual.

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

Tutorial de introducción a ActionScript

61

Para iniciar la película, debe ocultar algunos clips de película para que sólo aparezcan el cuadro de diálogo de inicio y las piezas del rompecabezas. Para ello, establezca las propiedades _visible en false. 1

Seleccione el fotograma 1 de la capa Acciones. Si el panel Acciones no está abierto, elija Ventana > Acciones. El panel Acciones muestra acciones asociadas al fotograma seleccionado. El texto precedido de las dos barras (//) corresponde a comentarios, que ofrecen información de utilidad para comprender los scripts.

2

3

Haga clic en el menú emergente de la esquina superior derecha de la barra de título del panel Acciones. Verifique que el modo Normal y Ver números de línea estén seleccionados.

En el panel Script, haga clic en la línea 4 para seleccionar el código con el comentario //ENTER code here.

4

En la categoría Acciones > Acciones varias de la caja de herramientas Acciones de la parte izquierda, haga doble clic en la acción evaluate para agregar una línea de código vacía que finalice con un punto y coma. Un punto y coma (;) en una sentencia ActionScript es igual que un punto (.) en una frase normal.

5

Con el punto de inserción en el cuadro de texto Expresión del panel Acciones, haga clic en el botón Insertar ruta de destino. Aparece el cuadro de diálogo Insertar ruta de destino.

6

Verifique que los elementos Puntos, que significa notación con puntos, y Absoluto, que significa ruta absoluta, estén seleccionados. En el cuadro de diálogo verá una lista de clips de película que puede seleccionar.

62

Capítulo 2

7

Seleccione el clip de película edges en el árbol de clips de película y, a continuación, haga clic en Aceptar. El código siguiente aparece en el cuadro de texto Expresión: _root.edges

La ruta de destino indica a ActionScript la ubicación de un clip de película dentro de la estructura general de una película Flash. La propiedad _root hace referencia a la línea de tiempo principal y el clip de película edges se encuentra en el escenario de la línea de tiempo principal. Cualquier ruta que empieza por _root se denomina ruta absoluta, puesto que proporciona la ruta absoluta de un clip de película desde la línea de tiempo principal. 8

Con el punto de inserción situado después de _root.edges, especifique ._visible = false en el cuadro de texto Expresión. Esta línea de código hace que el clip de película no sea visible en el escenario. Puede escribir el código manualmente, o bien elegir elementos de ActionScript en las carpetas Propiedades y Operadores de la caja de herramientas Acciones. Si comete un error al especificar una acción y decide que desea eliminarla, seleccione la acción en el panel Script y haga clic en el botón menos (-) del panel Acciones.

9

En la caja de herramientas Acciones, haga doble clic de nuevo en la acción evaluate para agregar una línea de código vacía que termine con un punto y coma. Repita los pasos 5 y 6 y seleccione el clip de película pattern en el cuadro de diálogo Insertar ruta de destino. Repita el paso 8 y escriba de nuevo ._visible = false en el cuadro de texto Expresión.

10

Siga repitiendo los pasos 4 a 8, seleccione los clips de película image, piecenumbers, scramblebutton, areYouSure y congrats en el cuadro de diálogo Insertar ruta de destino y escriba ._visible = false para cada clip de película. Cuando haya terminado, el script tendrá el aspecto siguiente:

Tutorial de introducción a ActionScript

63

11

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

Utilización del panel Referencia Durante la edición, si desea obtener información adicional sobre el elemento de ActionScript que ha especificado, seleccione la acción en la caja de herramientas Acciones o en el panel Script y, a continuación, haga clic en el botón Referencia. El panel Referencia, un sistema de ayuda organizado de forma similar al panel Acciones, muestra información sobre la acción seleccionada.

Revisión de la sintaxis ActionScript, como el lenguaje escrito, depende de una sintaxis correcta. Si la sintaxis es incorrecta, la acción no se ejecutará como corresponde. Flash ofrece diversas formas de revisar la sintaxis. 1

Haga clic en el menú de opciones situado en la esquina superior derecha de la barra de título del panel Acciones y elija Revisar sintaxis. Si la sintaxis es correcta, aparecerá un mensaje que indica que el script no contiene errores. Si la sintaxis es incorrecta, aparecerá un mensaje que indica que el script contiene errores; se abrirá la ventana Salida y aparecerá información sobre el error.

2

64

Haga clic en Aceptar para cerrar el mensaje de sintaxis.

Capítulo 2

En modo Normal, los errores de sintaxis de ActionScript aparecen resaltados en rojo en el panel Script. Si mueve el puntero del ratón sobre el error, aparecerá un cuadro de información con el mensaje de error. Los mensajes de error de sintaxis también aparecen resaltados junto a la parte inferior del área de estado del panel Acciones.

Asimismo, tal y como se describe en el Tutorial de introducción a Flash MX, puede elegir Control > Probar película durante la edición para comprobar que la película se reproduce como se espera.

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

Tutorial de introducción a ActionScript

65

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

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

66

2

Seleccione el fotograma 1 de la capa de acciones. Si el panel Acciones no está abierto, elija Ventana > Acciones.

3

En el panel Script del panel Acciones, seleccione la línea 11, que es la última línea del código de la sección de inicialización. En la caja de herramientas Acciones, elija Acciones > Variables y haga doble clic en la acción set variable.

4

Escriba dialog en el cuadro de texto Variable.

Capítulo 2

5

Escriba true en el cuadro de texto Valor. Seleccione Expresión, a la derecha del cuadro de texto Valor. Al seleccionar Expresión indicará a Flash que true no es una cadena literal de caracteres. En el estado inicial de la película, aparecerá un cuadro de diálogo en el escenario. Por lo tanto, la variable dialog debe establecerse en true al principio de la película; de lo contrario, un usuario podrá mover las piezas del rompecabezas antes de que se desordenen.

6

Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignación de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario.

Visualización de información en un cuadro de texto dinámico Los cuadros de texto dinámicos pueden mostrar texto que cambia en una película Flash. Puede utilizar el inspector de propiedades para crear un cuadro de texto dinámico y asignarle un nombre de variable. El valor de la variable aparece en el campo de texto. En el archivo puzzle.fla, un cuadro de texto dinámico muestra los números de las piezas del rompecabezas cuando un usuario presiona Mayús y hace clic en una pieza. A continuación asignará un nombre de variable para el cuadro de texto dinámico. 1

Si es necesario, seleccione Archivo > Abrir y elija la última versión guardada del archivo mypuzzle.fla. Nota: también puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/ActionScript/Finished/ puzzle3.fla. Si utiliza el archivo puzzle3.fla, guarde el archivo con un nuevo nombre en la carpeta My_Puzzle para mantener una versión no modificada del archivo original.

2

En la línea de tiempo, desbloquee la capa de guía de números de pieza si está bloqueada.

Tutorial de introducción a ActionScript

67

3

Haga doble clic en el clip de película de círculo de número de pieza en el escenario, bajo la esquina inferior derecha del área de solución del rompecabezas.

Clip de película de círculo de número de pieza

Se abrirá el círculo de número de pieza en modo de edición de símbolos.

68

4

Seleccione la capa de texto en la línea de tiempo. En el escenario, haga clic en el centro del círculo de número de pieza para seleccionar el campo de texto.

5

Si el inspector de propiedades no está abierto, seleccione Ventana > Propiedades. En el inspector de propiedades, seleccione Texto dinámico en el menú emergente Tipo de texto.

6

En el menú emergente Tipo de línea, verifique que Línea única esté seleccionado.

Capítulo 2

7

Escriba _root.pieceNumber en el cuadro de texto Var y presione Intro o Retorno.

Todas las variables, al igual que las funciones y los clips de película, deben tener como referencia sus respectivas rutas. La variable pieceNumber se declara y se actualiza en la función RotateDisplayOrDrag en la línea de tiempo principal, pero el cuadro de texto de la variable se encuentra en la línea de tiempo del círculo de número de pieza. Cuando especifica la ruta completa a la variable pieceNumber, el valor se actualiza y aparece en el campo de texto del escenario cuando cambia el valor de la variable en la línea de tiempo principal. 8

Elija Edición > Editar documento y haga clic en el botón Atrás o haga clic en Escena 1 para regresar a la línea de tiempo principal.

9

Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignación de nombre consecutivo para poder volver a versiones anteriores del archivo si es necesario.

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

Tutorial de introducción a ActionScript

69

A continuación utilizará un operador, denominado operador lógico NOT, para escribir una expresión que muestre y oculte el patrón del rompecabezas. El operador lógico NOT, representado mediante un signo de exclamación (!), calcula el valor booleano opuesto de su operando. Por ejemplo, la expresión !true da como resultado el valor false. 1

Si es necesario, seleccione Archivo > Abrir y elija la última versión guardada del archivo mypuzzle.fla. Nota: también puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/ActionScript/Finished/ puzzle4.fla. Si utiliza el archivo puzzle4.fla, guarde el archivo con un nuevo nombre en la carpeta My_Puzzle para mantener una versión no modificada del archivo original.

2

Haga clic en el botón para mostrar u ocultar los bordes del patrón del escenario. Si el panel Acciones no está abierto, elija Ventana > Acciones. El panel Acciones muestra acciones asociadas al botón.

3

Seleccione la línea de código siguiente en el panel Script: //

4

ENTER code here

En la caja de herramientas Acciones, elija Acciones > Acciones varias y arrastre la acción evaluate al panel Script. Cuando agregue la acción, se colocará en un código denominado controlador de eventos. El código tiene el aspecto siguiente: on (release) { ; }

5

En la caja de herramientas Acciones, haga doble clic en la acción evaluate para agregar otra línea de código vacía. El código tiene ahora el aspecto siguiente: on (release) { ; ; }

6

Seleccione la primera línea vacía (la línea con el primer punto y coma) y coloque el punto de inserción en el cuadro de texto Expresión. A continuación especificará un código que ocultará el clip de película pattern; un usuario verá el clip de película pattern o el clip de película edges, pero no los dos.

7

Escriba _root.pattern._visible = false en el cuadro de texto Expresión. Puede escribir la ruta directamente en el cuadro de texto Expresión, o bien utilizar el cuadro de diálogo Insertar ruta de destino para seleccionar el clip de película pattern. Si utiliza el cuadro de diálogo Insertar ruta de destino, seleccione Puntos y Absoluto. Nota: a medida que especifica parámetros y propiedades en modo normal, es posible que observe consejos de códigos (información que aparece para sugerir la sintaxis completa de una acción); puede hacer clic en un consejo de código para especificar la sintaxis. Para obtener más información sobre los consejos de códigos y sobre cómo activarlos y desactivarlos, consulte la sección “Utilización de los consejos de código” en Ayuda > Utilización de Flash.

70

Capítulo 2

8

Seleccione la segunda línea vacía y coloque el punto de inserción en el cuadro de texto Expresión.

9

Escriba _root.edges._visible = ! en el cuadro de texto Expresión. Pase por alto el mensaje de error de sintaxis que aparece. El signo de exclamación (!) es un operador lógico NOT. Además de escribir el texto en el cuadro de texto Expresión, puede agregarlo al cuadro de texto de la caja de herramientas Acciones seleccionando Operadores > Operadores lógicos y haciendo doble clic en el signo de exclamación.

10

Escriba de nuevo _root.edges._visible en el cuadro de texto Expresión después del operador. El código deberá ser similar al siguiente: on (release){ _root.pattern._visible = false; _root.edges._visible = !_root.edges._visible; }

La primera línea de código del controlador de eventos establece la visibilidad del clip de película pattern en false. La segunda línea de código establece la visibilidad del clip de película edges en el estado contrario al actual. Con esto se crea una alternación que muestra u oculta el clip de película. 11

Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignación de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario.

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

Tutorial de introducción a ActionScript

71

Puede utilizar las acciones if, else y else if (denominadas también sentencias) para crear un flujo de película más complejo denominado lógica. Estas tres acciones llevan a cabo las tareas siguientes:

• La acción if permite a Flash comprobar una condición en la película y ejecutar determinadas acciones si se produce dicha condición.

• La sentencia else indica a Flash que ejecute un conjunto de acciones diferentes si no se produce la condición if.

• La sentencia else

if permite a Flash comprobar otra condición antes de ejecutar un conjunto de acciones diferentes.

Especificación de una sentencia condicional Ya ha utilizado un operador para mostrar y ocultar un clip de película. A continuación utilizará una sentencia if para crear una lógica que muestre y oculte el clip de película piece numbers. En este ejemplo se utiliza con fines didácticos un elemento ActionScript diferente para obtener el mismo resultado. 1

Si es necesario, seleccione Archivo > Abrir y elija la última versión guardada del archivo mypuzzle.fla. Nota: también puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/ActionScript/Finished/ puzzle5.fla. Si utiliza el archivo puzzle5.fla, guarde el archivo con un nuevo nombre en la carpeta My_Puzzle para mantener una versión no modificada del archivo original.

2

En el escenario, haga clic en el botón para mostrar u ocultar la matriz de números de pieza. Si el panel Acciones no está abierto, elija Ventana > Acciones. En la caja de herramientas Acciones, elija la categoría Acciones > Condiciones/Bucles.

3

Haga doble clic en la acción if. En código siguiente aparece en el panel Acciones: on (release) { if () { } }

4

Con la línea de código que contiene la acción if seleccionada, haga doble clic en la acción else en la caja de herramientas Acciones. El código es similar al siguiente: on (release) { if () { } else { } }

5

Seleccione la línea 3, que empieza por if y, con el punto de inserción en el cuadro de texto Condición, haga clic en el botón Insertar ruta de destino. Seleccione el clip de película piecenumbers, Puntos, Absoluto y haga clic en Aceptar. El código siguiente aparece en el cuadro de texto Condición: _root.piecenumbers

72

6

Con el punto de inserción en el cuadro de texto Condición, especifique ._visible después de _root.piecenumbers.

7

En la categoría Acciones > Acciones varias en la caja de herramientas Acciones, haga doble clic en la acción evaluate para agregar una línea de código vacía.

Capítulo 2

8

Especifique _root.piecenumbers._visible = false en el cuadro de texto Expresión. Puede utilizar el botón Insertar ruta de destino o puede escribir el código manualmente. El código tendrá el aspecto siguiente: on (release) { if (_root.piecenumbers._visible) { _root.piecenumbers._visible = false; } else { } }

Cuando se reproduce la película, Flash comprueba la expresión comprendida ente los paréntesis de condición. La expresión debe ser igual a uno de los valores booleanos true o false. En este ejemplo se utiliza la condición de la acción if para comprobar si el clip de película piecenumbers está visible en el escenario. Si la propiedad _visible es true, ActionScript ejecuta el código entre llaves y establece la propiedad _visible en false, con lo que se oculta el clip de película en el escenario. 9

En el panel Script, seleccione la línea de código con la acción else y haga doble clic en la acción evaluate.

10

Especifique _root.piecenumbers._visible = true en el cuadro de texto Expresión. El código ActionScript final es similar al siguiente: on (release) { if (_root.piecenumbers._visible) { _root.piecenumbers._visible = false; } else { _root.piecenumbers._visible = true; } }

11

Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignación de nombre consecutivo para poder volver a versiones anteriores del archivo si es necesario.

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

Tutorial de introducción a ActionScript

73

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

Si es necesario, seleccione Archivo > Abrir y elija la última versión guardada del archivo mypuzzle.fla. Nota: también puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/ActionScript/Finished/ puzzle6.fla. Si utiliza el archivo puzzle6.fla, guarde el archivo con un nuevo nombre en la carpeta My_Puzzle para mantener una versión no modificada del archivo original.

2

Seleccione el primer fotograma de la capa de acciones y abra el panel Acciones si no está abierto.

3

Desplácese por el panel Script y seleccione la línea 31. Se resaltará la línea comentada siguiente: // ENTER RotateDisplayOrDrag() function here

4

En la categoría Acciones > Funciones definidas por el usuario en la caja de herramientas Acciones, haga doble clic en la acción function. Escriba RotateDisplayOrDrag en el cuadro de texto Nombre. Escriba whichPiece en el cuadro de texto Parámetros. El código de la línea 32 será similar al siguiente: function RotateDisplayOrDrag (whichPiece) { }

Se llamará al parámetro whichPiece (que identifica la pieza seleccionada del rompecabezas) tres veces en el cuerpo de la función. Cuando se llama a la función, el parámetro pasado se sustituye por whichPiece en cada sentencia.

74

Capítulo 2

5

En la categoría Acciones > Condiciones/Bucles en la caja de herramientas Acciones, haga doble clic en la acción if, la acción else if y la acción else. Nota: también puede seleccionar las acciones en el menú emergente Más (+).

El código tiene el aspecto siguiente: function RotateDisplayOrDrag (whichPiece) { if () { } else if () { } else { } }

Con este código se crea la estructura lógica de la función. Debe proporcionar las condiciones que deben comprobarse en cada sentencia if. Asimismo, en el código debe facilitar cada conjunto de datos entre llaves que se ejecutará cuando se cumplan las condiciones. 6

Seleccione la línea de código que contiene la sentencia if. Especifique Key.isDown(18) en el cuadro de texto Condición. Key es un objeto de ActionScript incorporado, que también encontrará en la categoría Objetos > Película > Tecla > Métodos. Key permite determinar la tecla que un usuario ha presionado en el teclado. El número 18 es la representación numérica de las teclas Alt (Windows) y Opción (Macintosh). En esta línea de código se comprueba si un usuario ha presionado estas teclas. Para obtener más información sobre los objetos incorporados, consulte la sección “Utilización de un objeto incorporado” en la pagina 78.

7

En la categoría Acciones > Acciones varias en la caja de herramientas Acciones, haga doble clic en la acción evaluate para especificar una nueva línea de código. Escriba _root[whichPiece]._rotation += 90 en el cuadro de texto Expresión, sin espacios entre los signos + y =. Con esta línea de código la pieza seleccionada gira 90° si el usuario presiona la tecla Alt (Windows) u Opción (Macintosh). Los corchetes permiten recuperar dinámicamente el valor de un nombre de instancia. Para obtener más información, consulte “Operadores de punto y de acceso a una matriz” en Ayuda > Utilización de Flash.

8

Seleccione la línea de código que contiene la sentencia else if. Escriba Key.isDown(Key.SHIFT) en el cuadro de texto Condición. Con esta línea de código se comprueba si un usuario ha presionado la tecla Mayús.

9

En la categoría Acciones > Acciones varias en la caja de herramientas Acciones, haga doble clic en la acción evaluate para especificar una nueva línea de código. Escriba pieceNumber = whichPiece.slice(5) en el cuadro de texto Expresión. Con esta línea de código se visualiza el número de pieza en el cuadro de texto en el escenario cuando el usuario presiona la tecla Mayús. El método slice del objeto String elimina un número de caracteres especificado (en este caso, 5) de la instancia del número de pieza, de modo que sólo aparece el número de la pieza. De hecho, el método elimina los cinco primeros caracteres y, a continuación, asigna el número resultante a la variable pieceNumber, que a su vez se asigna al campo de texto del escenario.

10

Seleccione la línea de código que contiene la sentencia else. En la categoría Acciones > Control de clip de película de la caja de herramientas Acciones, haga doble clic en la acción startDrag.

Tutorial de introducción a ActionScript

75

11

Escriba _root[whichPiece] en el cuadro de texto Destino y haga clic en Expresión.

12

Seleccione Restringir a rectángulo. Escriba 20 en los cuadros de texto de la izquierda y de la parte superior. En los cuadros de texto de la derecha y de la parte inferior, escriba 780 y 580, respectivamente. La palabra false del script indica que no se ha especificado lockCenter (que indica que la pieza del rompecabezas siempre se colocará en el centro del puntero del ratón al hacer clic). Los números 20, 20, 780 y 580 especifican las coordenadas izquierda, superior, derecha e inferior del cuadro de texto en el escenario. Cuando un usuario hace clic en una pieza, se llama a la siguiente función que ha escrito. La función utiliza el objeto Key para determinar si se presiona la tecla Mayús, Alt u Opción al hacer clic en una pieza. Si se presiona la tecla Mayús al hacer clic en una pieza, el cuadro de texto dinámico muestra el número de la pieza del rompecabezas. Si la tecla presionada es Alt (Windows) u Opción (Macintosh), la pieza del rompecabezas gira 90°. Si no se presionan las teclas Mayús, Alt u Opción, el usuario puede arrastrar la pieza. El código deberá ser similar al siguiente: 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); } } Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.

Llamada a una función Puede llamar a funciones en cualquier fotograma de una película cuando necesite completar una tarea. Debe utilizar una ruta de destino para llamar a una función, del mismo modo que debe utilizar una ruta para acceder a una variable o a un clip de película. Todas las funciones de la película puzzle.fla se declaran en el primer fotograma de la capa de acciones, en la línea de tiempo principal, de modo que la ruta absoluta de cada una de ellas empieza por _root. A continuación llamará a la función que desordena las piezas del rompecabezas en el escenario. 1

76

En la línea de tiempo, oculte las capas correspondientes al cuadro de diálogo para desordenar las piezas y al cuadro de inicio, si no están ocultas. Seleccione la capa del cuadro de diálogo de felicitaciones.

Capítulo 2

2

En el escenario, haga doble clic en el símbolo del cuadro de felicitaciones.

Cuadro de símbolo felicitaciones

3

En el escenario, seleccione el botón Aceptar. Si el panel Acciones no está abierto, elija Ventana > Acciones.

4

En la categoría Acciones > Funciones definidas por el usuario de la caja de herramientas Acciones, haga doble clic en la acción call function.

5

Con el punto de inserción en el cuadro de texto Objeto del panel Acciones, haga clic en el botón Insertar ruta de destino. Verifique que los elementos Puntos y Absoluto estén seleccionados. Seleccione _root y haga clic en Aceptar.

6

Escriba Scramble en el cuadro de texto Método. La función Scramble no requiere parámetros; puede dejar en blanco el cuadro de texto Parámetros. El código tiene ahora el aspecto siguiente: on (release) { _root.Scramble(); }

Este es el ActionScript que llama a la función. También deberá agregar líneas de código adicionales que se encuentren dentro del controlador on(release). En los pasos siguientes verá cómo. Con la línea de código _root.Scramble... seleccionada en el panel Script, haga doble clic en evaluate en la categoría Acciones > Acciones varias en la caja de herramientas Acciones. Escriba _root.scramblebutton._visible = true en el cuadro de texto Expresión.

Tutorial de introducción a ActionScript

77

7

Haga doble clic de nuevo en la acción evaluate para agregar otra línea en blanco. Escriba _root.dialog = false en el cuadro de texto Expresión.

8

En la categoría Acciones > Acciones varias de la caja de herramientas Acciones, haga doble clic en la acción evaluate.

9

En la categoría Propiedades de la caja de herramientas Acciones, haga doble clic en _visible. Con el punto de inserción detrás de _visible, escriba = 0 en el cuadro de texto Expresión. Con este código se especifica que el cuadro de diálogo no estará visible después de que el usuario haga clic en el botón Aceptar. El código final es similar al siguiente: on (release) { _root.Scramble(); _root.scramblebutton._visible = true; _root.dialog = false; _visible = 0 }

10

Lleve a cabo una de las acciones siguientes para regresar a la línea de tiempo principal:

• Elija Edición > Editar documento. • Haga clic en el botón Atrás. • Haga clic en Escena 1. 11

Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignación de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario. Nota: mientras vaya completando el tutorial no olvide guardar su trabajo con frecuencia.

Utilización de un objeto incorporado ActionScript tiene variables que permiten almacenar información, funciones que permiten crear comandos especiales y volver a utilizar código, acciones que permiten controlar el flujo de una película y clips de película con propiedades que puede modificar. ActionScript también tiene otro tipo de elementos denominados objetos incorporados. Los objetos permiten agrupar la información para utilizarla en un script. Asimismo, pueden tener propiedades, métodos (que son como funciones) y constantes (por ejemplo, el valor numérico de Pi). En la función RotateDisplayOrDrag creada en la sección “Creación de comandos y reutilización de código” en la pagina 73, se utilizó el objeto Key para determinar la última tecla que el usuario presionó en el teclado. El objeto Key está incorporado en ActionScript para permitir acceder a información sobre el teclado. Otro objeto de ActionScript es el objeto MovieClip. El objeto MovieClip es un conjunto de métodos que puede utilizar para manipular clips de película, los elementos fundamentales y con más posibilidades de Flash. Para obtener más información sobre las características especiales del objeto MovieClip y sobre la utilización de clips de película, consulte “Trabajo con clips de película y botones” en Ayuda > Utilización de Flash.

78

Capítulo 2

A continuación utilizará el método onPress del objeto MovieClip para comprobar si el puntero de ratón toca una pieza del rompecabezas. 1

Si es necesario, seleccione Archivo > Abrir y elija la última versión guardada del archivo mypuzzle.fla. Nota: también puede ir a la carpeta de la aplicación Flash MX y abrir el archivo Tutorials/ActionScript/Finished/ puzzle7.fla. Si utiliza el archivo puzzle7.fla, guarde el archivo con un nuevo nombre en la carpeta My_Puzzle para mantener una versión no modificada del archivo original.

2

Piece actions es un clip de película anidado en cada instancia de una pieza del rompecabezas. Para seleccionar el clip de película Piece actions de la jerarquía de paneles de biblioteca, haga clic en el botón Editar símbolos en la esquina inferior derecha de la línea de tiempo y elija Varios > Piece actions.

El clip de película Piece actions se abre en modo de edición de símbolos. 3

En la línea de tiempo de Piece actions, seleccione Fotograma 1 de la capa de acciones.

4

Si el panel Acciones no está abierto, elija Ventana > Acciones. En el panel Script, seleccione la línea 3 con la línea de código siguiente: //

ENTER code here

Tutorial de introducción a ActionScript

79

5

En la categoría Objetos > Película > Clip de película > Eventos de la caja de herramientas Acciones, haga doble clic en la acción onPress. El método onPress es un tipo de acción especial denominado controlador de eventos, o simplemente evento. Un evento permite escribir una función que se ejecuta cuando se produce un determinado evento. Algunos tipos de eventos son: presionar el botón del ratón, ingresar la cabeza lectora en un fotograma o cargar un clip de película. En este procedimiento, el código entre llaves que sigue a onPress se ejecuta cuando un usuario presiona el botón del ratón en la película.

6

Escriba _parent en el cuadro de texto Objeto. Puesto que Piece actions se encuentra anidado dentro del clip de película, _parent especifica que onPress debe ejecutar el código de un nivel superior, al mismo nivel que la pieza del rompecabezas.

7

En la categoría Acciones > Condiciones/Bucles de la caja de herramientas Acciones, haga doble clic en la acción if.

8

Escriba !_root.dialog en el cuadro de texto Condición. El código que aparece es el siguiente: _parent.onPress = function(){ if (!_root.dialog) { { };

El código que se ha agregado en este paso comprueba si el valor de la variable llamada dialog es verdadero (visible) o falso (no visible). Si el valor es true, no se ejecutará el siguiente script, que debería girar y arrastrar la pieza del rompecabezas. Si el valor de la variable es false, se ejecutará el siguiente script. Si se visualiza el cuadro de diálogo, los usuarios no podrán girar ni arrastrar una pieza ni ver su número. 9

En la caja de herramientas Acciones, haga doble clic en la acción evaluate en la categoría Acciones > Acciones varias para agregarla entre las llaves de la sentencia if.

10

Escriba _root.RotateDisplayOrDrag(_parent._name) en el cuadro de texto Expresión. _name es la propiedad del nombre de la instancia de pieza del rompecabezas en la que el usuario

hace clic. El código final es similar al siguiente: _parent.onPress = function(){ if (!_root.dialog) { _root.RotateDisplayOrDrag(_parent._name); } }; 11

Lleve a cabo una de las acciones siguientes para regresar a la línea de tiempo principal:

• Elija Edición > Editar documento. • Haga clic en el botón Atrás. • Haga clic en Escena 1. 12

80

Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignación de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario.

Capítulo 2

Prueba de la película Realizar pruebas con antelación y de forma regular es una máxima para los desarrolladores de contenido Web. Cuanto antes pruebe la película, más fácil será determinar la causa de resultados inesperados. Es conveniente guardar varias versiones del archivo con nombres consecutivos (por ejemplo, mypuzzle1.fla, mypuzzle2.fla, etcétera), tal como ha hecho con este tutorial. De este modo, el archivo con el número más alto siempre será el más nuevo y será fácil volver a una versión anterior. Tal como se describe en el tutorial de introducción a Flash MX, la herramienta de edición Flash incluye una versión de Flash Player que permite probar la película en cualquier momento del proceso de edición seleccionando Control > Probar película. Esta versión de Flash Player tiene varios comandos y herramientas de ayuda para solucionar problemas relacionados con la película. La causa más habitual de estos resultados inesperados en una película Flash es una ruta incorrecta de una variable, función, objeto o clip de película. Esto puede hacer que una variable contenga el valor incorrecto, que no se llame a una función o que el clip de película no se reproduzca correctamente. La acción trace permite escribir notas y expresiones en los scripts cuyo resultado se envía a una ventana llamada ventana Salida. A continuación, agregará una acción trace para probar si se ha llamado a una función correctamente. Nota: Flash también incluye un depurador, que permite examinar los valores de las variables globales y locales, incluso cuando cambian a medida que se reproduce la película. Asimismo, con el depurador puede utilizar puntos de corte para detener la película y probar ActionScript línea por línea. Para obtener más información, consulte “Utilización del depurador” en Ayuda > Utilización de Flash.

1

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

Cuando el usuario hace clic en el botón Aceptar en la película SWF, las piezas del rompecabezas se desordenan. Puede utilizar una acción trace para probar si se llama a la función Scramble. 2 3

En la capa de acciones en la línea de tiempo, seleccione Fotograma 1 y abra el panel Acciones. En el panel Script, desplácese hasta la línea 18, la línea de comentario con el texto // enter y selecciónela.

trace action here, 4

En la caja de herramientas Acciones, haga doble clic en la acción trace en la categoría Acciones > Acciones varias.

5

Escriba Se ha llamado a la función Scramble en el cuadro de texto del mensaje. Este mensaje se coloca dentro de la función Scramble.

6

Guarde el documento y, a continuación, seleccione Control > Probar película.

Tutorial de introducción a ActionScript

81

7

Haga clic en el botón Aceptar de la película SWF. Aparece la ventana Salida que rastrea los eventos de la película. Amplíe la ventana como convenga para leer los mensajes. El mensaje “Se ha llamado a la función Scramble” aparecerá en la ventana Salida.

Si el mensaje no aparece, el paso siguiente consistirá en determinar el motivo. El motivo más probable es que haya especificado una ruta incorrecta a la función. 8

Cierre la ventana Salida y el archivo SWF y regrese al modo de edición.

9

Elija Archivo > Guardar como y escriba un nombre de archivo nuevo. Utilice un esquema de asignación de nombre consecutivo para volver a versiones anteriores del archivo, si es necesario. Gracias a estos ejercicios ha aprendido mucho sobre ActionScript.

82

Capítulo 2

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

Tutorial de introducción a ActionScript

83

84

Capítulo 2

CAPÍTULO 3 Tutorial de introducción a los componentes

Se pueden utilizar los componentes de interfaz de Macromedia Flash para agregar rápida y fácilmente elementos sencillos de la interfaz del usuario al documento de Flash. Este tutorial está diseñado para ofrecer una introducción sobre los componentes a los usuarios principiantes e intermedios de Flash y para mostrar cómo se pueden utilizar para crear fácilmente una aplicación simple. Antes de iniciar este tutorial, debe finalizar los tutoriales Introducción a Flash MX e Introducción a ActionScript, a los que se puede acceder seleccionando Ayuda > Tutoriales. Una vez finalizado este tutorial, sabrá cómo realizar las tareas siguientes:

• Agregar componentes a un documento de Flash. • Configuración de los componentes. • Agregar ActionScript para que los componentes funcionen. Tipos de componente Flash MX proporciona los componentes siguientes:

Nombre

Acción

RadioButton

Representa una sola opción de un grupo de opciones que se excluyen entre sí.

CheckBox

Representa una sola opción.

PushButton

Lleva a cabo un comando cuando el usuario hace clic o presiona la tecla Intro o Retorno.

ComboBox

Muestra una lista de opciones.

85

Nombre

Acción

ListBox

Muestra una lista de opciones.

ScrollPane

Proporciona un panel de ventana desplazable para ver clips de película.

ScrollBar

Agrega una barra de desplazamiento a un campo de texto.

Utilización de los componentes A continuación se presentan algunas maneras en las que se pueden utilizar los componentes: Diseñe un formulario que solicite la dirección, el teléfono, la dirección de correo electrónico y otros datos personales del usuario. A continuación, dicho formulario valida los datos antes de enviarlos a un servidor.

Formulario Web

Cree un formulario Web que permita a los usuarios encargar un coche seleccionando varias opciones gráficas en lugar de introducir la información. Los campos se generan a partir de las interacciones gráficas.

Cree su coche

Cuestionario Cree un cuestionario con varias preguntas y partes que indique instantáneamente los resultados y represente gráficamente los datos resultantes del cuestionario.

Cree un álbum de fotos personal que utilice un directorio de imágenes y miniaturas y las ajuste con los elementos de navegación y la interfaz de Flash.

Álbum de fotos

Calculadora de préstamos

Diseñe una calculadora de amortización en línea que calcule pagos

de préstamos. Cree una plantilla para presentaciones de transparencias con elementos de navegación simples predefinidos y un diseño para imágenes y texto.

Plantilla de presentación para Internet

Visualización del formulario finalizado Se puede navegar por los componentes de un formulario realizando los procedimientos siguientes:

• Haga clic en el componente para seleccionarlo. • Presione el tabulador para avanzar; presione Mayús+Tabulador para retroceder. • Utilice las teclas de dirección para navegar por los elementos de menú.

86

1

Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra Tutorials/Components/ Finished/sweepstakes.swf. Ésta es la película finalizada.

2

Utilice las técnicas de navegación descritas anteriormente para probar cada uno de los botones y cuadros del formulario.

3

Abra sweepstakes.fla. Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra Tutorials/Components/Finished/sweepstakes.swf. Éste es el documento de Flash que ha generado la película. Se incluyen dos fotogramas clave en la línea de tiempo.

4

Examine la página 1. Contiene la casilla de verificación, el cuadro combinado y los botones de comando que se utilizan para recopilar información. También tiene dos campos de introducción de texto para el nombre y la dirección de correo electrónico del usuario.

5

Examine la página 2. Es la página de resultados y contiene varios cuadros de texto dinámico para mostrar los resultados de la información recopilada en la página 1. Para ahorrar tiempo, éstos ya se han creado.

Capítulo 3

Creación de un formulario En este tutorial, utilizará componentes para crear un formulario simple de dos páginas para participar en un sorteo de un coche eléctrico Stiletto. La primera página sirve para recopilar información y la segunda para ver los resultados. Siga estos tres pasos para completar el formulario:

• Agregue componentes al formulario. • Configure los componentes. • Agregue los comandos ActionScript al documento para que los componentes funcionen. Para su mayor comodidad, se ha incluido el fondo, los campos de texto y los gráficos para el formulario. Agregue y configure componentes y comandos ActionScript para que el formulario sea interactivo. Adición de componentes El primer paso consiste en agregar componentes al escenario y colocarlos en el formulario. Agregue una casilla de verificación, un cuadro combinado y un botón de comando a la primera página del formulario. Agregue también un botón de comando a la segunda página. Para agregar componentes a un documento, se pueden arrastrar elementos desde el panel Componentes al escenario, o bien hacer doble clic en los componentes del panel Componentes para colocarlos en el centro del escenario. Una vez que haya agregado un componente a un documento, aparecerá en el panel Biblioteca del documento. Resulta muy útil crear una nueva capa para los componentes. 1

Elija Archivo > Abrir y vaya al directorio del programa Flash MX. Abra Tutorials/Components/ my_sweepstakes/mysweepstakes.fla.

2

Elija Archivo > Guardar como y guarde el archivo con un nuevo nombre, como por ejemplo newsweeptakes.

3

Cree una capa nueva y denomínela UI. Coloque los componentes en esta capa.

4

Haga clic en el fotograma 6 en la capa UI de la línea de tiempo. Elija Insertar > Fotograma clave vacío para agregar un fotograma vacío. Éste se utilizará para los componentes de la segunda página.

5

Asegúrese de que se encuentran abiertos los paneles siguientes:

• Panel Biblioteca (Ventana > Biblioteca). • Panel Componentes (Ventana > Componentes). • Inspector de propiedades (Ventana > Propiedades).

Tutorial de introducción a los componentes

87

Adición de una casilla de verificación Utilice el componente CheckBox para crear un cuadro con el valor true o false. 1

Seleccione el fotograma 1 en la capa UI.

2

Arrastre el componente CheckBox desde el panel Componentes al escenario. Colóquelo debajo del párrafo que solicita si el usuario desea participar en el sorteo.

El componente aparece en la carpeta Flash UI Components en el panel Biblioteca. Adición de un cuadro combinado Utilice el componente ComboBox para crear un menú desplegable simple de elementos que los usuarios puedan seleccionar. Los cuadros combinados también se pueden utilizar para crear un menú desplegable más complejo que se desplace automáticamente a un elemento de menú que empiece por la letra o letras introducidas por el usuario en el campo de texto.

• Arrastre el componente ComboBox desde el panel Componentes al escenario. Colóquelo debajo de “Seleccione su color favorito:”.

El componente aparece en la carpeta Flash UI Components en el panel Biblioteca. Adición de botones de comando Utilice el componente PushButton para crear dos botones de comando. Uno de ellos estará en la primera página y servirá para enviar la información del formulario. El siguiente estará en la segunda página y servirá para volver a la primera página y volver a rellenarla con los valores enviados previamente. 1

Arrastre el componente PushButton desde el panel Componentes al escenario. Colóquelo en la esquina inferior derecha del formulario de modo que se alinee horizontalmente con los campos de texto del nombre y del correo electrónico.

El componente aparece en la carpeta Flash UI Components en el panel Biblioteca.

88

Capítulo 3

Una vez que haya arrastrado un componente desde el panel Componentes al escenario, seleccione instancias adicionales del mismo en el panel Biblioteca.

2

Vaya al fotograma clave vacío en el fotograma 6. En el panel Biblioteca, abra la carpeta Flash UI Components y arrastre el componente PushButton desde el panel Biblioteca al escenario. Colóquelo en la esquina inferior derecha.

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

Tutorial de introducción a los componentes

89

Configuración de la casilla de verificación 1

Seleccione el fotograma 1 en la capa UI y, a continuación, el componente CheckBox en el escenario. Sus parámetros aparecen en el inspector de propiedades.

2

Escriba sweepstakes_box en el cuadro de texto Nombre de instancia.

3

Escriba Absolutely! en el cuadro de texto Label.

4

En el menú emergente del parámetro Initial Value, seleccione True. De este modo, se especifica si el estado inicial del componente CheckBox se ha seleccionado (True) o no (False).

5

En el menú emergente del parámetro Label Placement, deje el valor predeterminado de alineación a la derecha. La etiqueta aparecerá a la derecha de la casilla de verificación.

6

No modifique el parámetro para el controlador de cambios. El parámetro Change Handler define la función que desea que se ejecute cuando un usuario selecciona un elemento. Esta función debe definirse en la misma línea de tiempo que la instancia de componente. Este parámetro es opcional y debe especificarse únicamente en el caso de que se desee que se lleve a cabo una acción en cuanto el usuario acceda a un componente. Al finalizar, el inspector de propiedades debe tener el aspecto siguiente:

Para obtener más información sobre la utilización de los métodos API del componente FCheckBox para establecer opciones adicionales para el componente, consulte la entrada FCheckBox (componente) en el diccionario de ActionScript en línea en la Ayuda de Flash. Configuración del cuadro combinado 1

90

Seleccione el componente ComboBox en el escenario. Sus parámetros aparecen en el inspector de propiedades.

Capítulo 3

2

Escriba color_box en el cuadro de texto Nombre de instancia.

3

Asegúrese de que el parámetro Editable está establecido en False. De este modo, los usuarios no pueden introducir un texto propio.

4

El parámetro Labels visualiza una lista de los valores que los usuarios pueden seleccionar. Haga clic en el campo Labels y, a continuación, haga clic en la lupa para abrir la ventana emergente Valores. Haga clic en el botón Más (+) para introducir un nuevo valor.

5

Haga clic en el campo default value; a continuación, escriba Lightning para el primer valor.

6

Haga clic en el botón Más (+) para introducir el valor siguiente. Haga clic en el campo default a continuación, escriba Cobalt para el valor siguiente.

value; 7

Del mismo modo, agregue Emerald a la lista. Cuando haya terminado, la ventana emergente Valores debería tener el aspecto siguiente:

Tutorial de introducción a los componentes

91

8

Haga clic en Aceptar para cerrar la ventana emergente Valores. El parámetro Data es opcional. Sirve para especificar los valores asociados con los elementos (etiquetas) del cuadro de lista. No es necesario utilizar este parámetro para este tutorial.

9

El parámetro Row Count especifica el número de filas que se visualizan en la ventana. Puesto que existen tres opciones, cambie el valor a 3. No es necesario introducir un nombre para el parámetro Change Handler. Al finalizar, el inspector de propiedades debe tener el aspecto siguiente:

Para obtener más información sobre la utilización de los métodos API para cambiar propiedades adicionales, consulte la entrada FComboBox (componente) en el diccionario de ActionScript en línea en la Ayuda de Flash. Configuración de los botones de comando 1

Seleccione el componente PushButton en el fotograma 1. Los parámetros del componente aparecen en el inspector de propiedades.

2

Escriba submit_btn en el cuadro de texto Nombre de instancia del inspector de propiedades.

3

Escriba Submit en el cuadro de texto Label del inspector de propiedades. Este texto aparecerá en el cuerpo del botón.

4

Escriba onClick para el nombre del controlador de acciones del ratón. Más adelante, escribirá el código ActionScript para definir la función del controlador de acciones del ratón. Al finalizar, el inspector de propiedades debe tener el aspecto siguiente:

5

92

Seleccione el componente PushButton en el fotograma 6.

Capítulo 3

6

Escriba return_btn en el cuadro de texto Nombre de instancia del inspector de propiedades.

7

Escriba Return en el cuadro de texto Label del inspector de propiedades.

8

Escriba onClick para el nombre del controlador de acciones del ratón.

Para obtener más información sobre la utilización de los métodos API del componente FPushButton para cambiar propiedades adicionales, consulte la entrada FPushButton (componente) en el diccionario de ActionScript en línea en la Ayuda de Flash. Definición del código ActionScript para recopilar los datos Parte del código ActionScript será para toda la película, mientras que otra parte estará relacionada con un fotograma específico. La tabla siguiente resultará útil para realizar un seguimiento de los nombres de instancia. Nombre de la instancia

Descripción

color_box

Cuadro combinado de color de la página 1

sweepstakes_box

Casilla de verificación de sorteo de la página 1

submit_btn

Botón de comando de envío de la página 1

name

Cuadro de introducción de texto para el nombre de la página 1

email

Cuadro de introducción de texto para la dirección de correo electrónico de la página 1

return_btn

Botón de comando de retorno de la página 2

name_result

Cuadro de texto dinámico de la página 2 para ver el nombre del usuario

email_result

Cuadro de texto dinámico de la página 2 para ver la dirección de correo electrónico del usuario

color_result

Cuadro de texto dinámico de la página 2 para ver la selección de colores del usuario

sweepstakes_text

Cuadro de texto dinámico de la página 2 que muestra diferentes textos en función de si el usuario ha optado por participar en el sorteo

Definición del código ActionScript para toda la película El código ActionScript para componentes se coloca en los fotogramas clave. El parámetro Click Handler especifica lo que sucede al activar el componente PushButton. El valor predeterminado es onClick, que significa que cuando el usuario hace clic en uno de los botones de comando, éste se activa. Empiece creando una función para onClick. Se trata de una función de bifurcación que en primer lugar determina si el botón que se ha presionado es Enviar o Retorno y, a continuación, realiza las acciones correspondientes. 1

Cree una nueva capa y denomínela Todas las acciones. Ésta se utilizará para el código ActionScript que deba ejecutarse a lo largo de la película.

2

Si el panel Acciones no está abierto, elija Ventana > Acciones.

3

Cambie al modo Experto presionando Ctrl+Mayús+E (Windows) o Comando+Mayúsculas+E (Macintosh), o haciendo clic en el control de la esquina superior derecha (un triángulo que tiene una marca de verificación encima) y seleccionando el modo Experto en el menú emergente.

Tutorial de introducción a los componentes

93

4

Introduzca la función callback para los botones. Se trata de una sentencia condicional que se bifurca en función del botón en el que se hace clic. Si se hace clic en el botón Enviar, se bifurcará para mostrar la función getResults e irá a la página 2. Si se hace clic en el botón Retorno, irá a la página 1. Introduzca los códigos siguientes en el panel Acciones. // pulsador callback function onClick(btn) { if (btn == submit_btn) { getResults(); gotoAndStop("pg2"); } else if (btn == return_btn) { gotoAndStop("pg1"); } } Nota: aunque no es recomendable, si no desea escribir el código ActionScript, puede copiar el texto de este tutorial y pegarlo en el panel Acciones.

5

Escriba la función getResults. Con esta función, se obtienen los resultados de la casilla de verificación de sorteo y del cuadro combinado de color. También se obtienen los resultados del cuadro combinado en forma de etiqueta para poder mostrarlos. // obtener resultados de la pág 1 function getResults() { sweepstakes_result = sweepstakes_box.getValue(); color_result = color_box.getSelectedItem().label; selectedItem = color_box.getSelectedIndex(); }

6

Escriba la función initValues. Esta función inicializa los valores de la página 1 con los valores que el usuario ha seleccionado anteriormente. Se ejecuta cuando el usuario hace clic en el botón Retorno. // inicializar valores de pág 1 con los valores seleccionados anteriormente // por el usuario function initValues() { sweepstakes_box.setValue(sweepstakes_result); if (!started) { color_box.setSelectedIndex(0); started = true; } else { color_box.setSelectedIndex(selectedItem); } }

94

Capítulo 3

7

Finalmente, agregue una llamada a la función initValues al principio del código ActionScript. Cuando haya terminado, el código ActionScript debe tener el aspecto siguiente: initValues(); // pulsador callback function onClick(btn) { if (btn == submit_btn) { getResults(); gotoAndStop("pg2"); } else if (btn == return_btn) { gotoAndStop("pg1"); } } // inicializar valores de pág 1 con los valores seleccionados anteriormente // por el usuario function initValues() { sweepstakes_box.setValue(sweepstakes_result); if (!started) { color_box.setSelectedIndex(0); started = true; } else { color_box.setSelectedIndex(selectedItem); } } // obtener resultados de la pág 1 function getResults() { sweepstakes_result = sweepstakes_box.getValue(); color_result = color_box.getSelectedItem().label; selectedItem = color_box.getSelectedIndex(); }

Ha finalizado el script que debe ejecutarse para toda la película. Sin embargo, todavía debe agregar un script para los fotogramas de las páginas 1 y 2. Adición de códigos ActionScript a cada fotograma clave Parte del código ActionScript debe ejecutarse únicamente cuando el usuario selecciona un fotograma determinado. Con el fin de que el código ActionScript funcione, debe asignar un nombre a cada fotograma clave. 1

Cree una nueva capa y denomínela Acciones de fotograma. Seleccione el fotograma 1 y, a continuación, elija Insertar > Fotograma clave vacío para insertar un fotograma clave. Utilice el inspector de propiedades para asignar el nombre pg1 al fotograma. Del mismo modo, inserte un fotograma clave en el fotograma 6 y denomínelo pg2.

2

Seleccione el fotograma clave en el fotograma 1 de la capa Acciones de fotograma y escriba el código ActionScript siguiente para detener la película en el fotograma 1 (pg1): stop();

Tutorial de introducción a los componentes

95

3

Opcionalmente, si desea ver un fragmento determinado del texto en el caso de que el usuario haya seleccionado la casilla de verificación de sorteo, u otro fragmento de texto en caso de que el usuario no la haya seleccionado, escriba una sentencia condicional con el texto que se colocará en el cuadro de texto dinámico sweepstakes_text en la página 2. Selecione el fotograma clave denominado pg2 en la capa Acciones de fotograma e introduzca lo siguiente en el panel Acciones: // texto del sorteo if (sweepstakes_result==true) { sweepstakes_text = "Ha participado en el sorteo de un Stiletto Fantasy. Los ganadores se dan a conocer al final de cada mes."; } else { sweepstakes_text = "No ha participado en el sorteo de un Stiletto Fantasy."; } Nota: no corte ni copie este código ActionScript en el panel Acciones. No funcionará correctamente puesto que existen saltos de línea entre la primera y la segunda líneas de texto.

Prueba de la película Para ver el aspecto de los componentes, ejecute la película en Flash Player 6. 1

Seleccione Control > Probar película. La película se ejecuta en Flash Player.

2

Seleccione y anule la selección de la casilla de verificación para asegurarse de que funciona.

3

Seleccione un color y asegúrese de que aparece en la página 2.

4

Cuando haya terminado, seleccione Archivo > Cerrar para cerrar la película en el reproductor.

5

Si ha detectado errores, utilice la herramienta Flecha para seleccionar el componente; a continuación, realice las correcciones en el inspector de propiedades. Si es necesario, vuelva a probar la película.

Pasos siguientes En este tutorial se han presentado los pasos básicos para crear un grupo simple de componentes y para ver sus resultados. Para obtener más información, consulte Utilización de Flash y el diccionario de ActionScript en el menú Ayuda.

96

Capítulo 3