macromedia flash 8: actionscript guía para los...

Macromedia Flash 8: ActionScript Guía para los Participantes

Unidad 1: Introducción al curso Acerca del curso……………………………………………………………………...1-1 Requisitos previos……………………………………………………………….………………...1-2 Formato del curso…………………………………….…………………………….. 1-3 Unidad 2: Controlar objetos visuales con ActionScript ¿Qué es una variable? ……………………………………………………………... 2-2 ¿Qué son los nombres de propiedades e instancia? ...…………………………. 2-8 ¿Cómo introduzco y muestro un texto?…………………………………...….…….2-16 ¿Cómo trabajo con números y cadenas? ………………………………………... 2-20 Unidad 3: Utilizar y escribir funciones ¿Qué es una función? ……………………………………………………….…….. 3-2 ¿Cómo escribo mis propias funciones? ………………………………………… 3-9 ¿,Por qué colocar código dentro de una ínea de tiempo MovieClip? …………3-15 ¿Cómo cargo contenido externo? ……………………………………………….. 3-21 ¿Cómo puedo crear nuevas instancias desde mi Biblioteca? …………………3-27 ¿Cómo genero una función para crear mis MovieClips? ……………………….3-32 Unidad 4: Utilizar texto, matemática y rutas ¿Qué es un objeto? …………………………………………………………...….. 4-2 ¿Cómo doy formato a un TextField? ………………………………………….… 4-5 ¿Cómo puedo crear TextFields usando código? ……………………………… 4-8 ¿Cómo obtengo la fecha y la hora? ……………………………………………... 4-10 ¿Cómo puedo generar números aleatorios? …………………………………… 4-15 ¿Cómo me comunico con cosas que están en otro MovieClip? …………..… 4-18 Unidad 5: Comprensión y gestión de eventos ¿Qué es un evento? ……………………………………………………………. 5-2 ¿Cómo se puede controlar una línea de tiempo de MovieClip? …………… 5-12 ¿Cómo sé dónde está seleccionado mi usuario? …………………………… 5-18 Unidad 6: Gestionar color, sonido y datos con clases ¿Qué es una variable agregada? ……………………………………………… 6-2 ¿Cómo crear matrices? ………………………………………………………… 6-3 ¿Cómo utilizar una matriz? …………………………………………………….. 6-4 ¿Cómo crear un objeto genérico? ……………………………………………. 6-9 ¿Cómo transformar objetos visuales mediante código? …………………… 6-13 ¿Cómo reproducir sonido para el usuario? ……………………………….…. 6-19

Unidad 7: Tomar decisiones y repetirse ¿Qué es una sentencia de bucle? ……………………………………………. 7-2 ¿Qué es una sentencia condicional? ………………………………………… 7-10 Unidad 8: Animación con ActionScript ¿Cómo hago para que mi usuario arrastre y suelte un MovieClip? ………… 8-2 ¿Cómo sé si dos objetos se tocan? ………………………………………….. 8-3 ¿Cómo animar instancias MovieClip usando ActionScript? ………………… 8-8 Apéndice A: Guía de configuración para el alumno Apéndice B: Recursos adicionales Apéndice C: Respuestas a las preguntas de repaso

Unidad 1: Introducción al curso Acerca del curso Macromedia Flash 8: ActionScript está diseñado para enseñarle a diseñadores experimentados de Flash los principios básicos del contenido de programación de Flash Player usando el lenguaje de programación de ActionScirpt. El curso está basado en tareas y los alumnos aprenden practicando. En los próximos 5 días, creará un juego visual en Flash y aprenderá conocimientos principales de la programación, terminología y aspectos clave de Flash Player. Además de cubrir completamente los principios básicos de la programación en ActionScript, el curso se centra en las mejores prácticas, prestando especial atención a la importancia de código autodocumentado, legible y que puede mantenerse. Objetivos Tras completar el curso, debe ser capaz de:

• Colocar y sustituir propiedades visuales predeterminadas usando ActionScript.

• Entender y usar las variables y sus tipos de datos. • Entender y usar los nombres de instancia, propiedades y métodos. • Usar la información del sistema de datos y generar valores aleatorios. • Manipular cadenas de caracteres. • Escribir y utilizar funciones. • Entender la programación basada en eventos. • Crear métodos para responder a las interacciones del usuario y los eventos

del sistema. • Cargar contenido visual externo y generar objetos visuales en tiempo de

ejecución. • Gestionar el color, el sonido y los datos estructurados usando clases

incorporadas. • Escribir sentencias condicionales para tomar decisiones. • Escribir sentencias de bucle para ejecutar repetidamente el código. • Crear objetos interactivos para que se arrastran y colocan con el ratón. • Probar y responder a las colisiones de objetos visuales. • Animar objetos visuales usando ActionScript.

Requisitos previos Los requisitos previos para este curso son:

• Completar Macromedia Flash 8: Curso Creación de contenido complejo, o experiencia equivalente en:

• o Herramientas de dibujos de Flash o Creación de símbolos de Flash o Animación basada en línea de tiempo de Flash o Prueba y publicación del documento de Flash o Entorno de diseño integrado de Flash (IDE- entorno de diseño

integrado) • El deseo de aprender a programar el contenido de Flash usando

ActionScript. Formato del curso Este curso está dividido en 8 unidades, cada una de ellas presenta información nueva y contiene demostraciones, ensayos y un laboratorio. Al finalizar cada unidad, encontrará un resumen y un pequeño repaso para evaluar sus conocimientos del contenido de la unidad. Los Conceptos introducen información nueva. Las Demostraciones ilustran los conceptos nuevos.

Los Ensayos le guían, con la ayuda del instructor, a través de los procedimientos en un contexto práctico. Los Laboratorios le permiten practicar sus conocimientos nuevos por su cuenta. Los Resúmenes proporcionan una breve sinopsis del contenido de la unidad. Los Repasos evalúan si recuerda los conceptos de la unidad. Las Mejores prácticas le proporcionan ayuda e información.

Resumen de la unidad

• El curso se presenta a través de una combinación de clases, demostraciones, ensayos y laboratorios.

• El curso ha sido diseñado asumiendo que usted ya entiende las principales técnicas de diseño de Flash.

• El curso está formado por 8 unidades. • El curso se centra en los principios básicos de la programación del

contenido de Flash Player. • Creará un juego visual interactivo.

Unidad 2: Controlar objetos visuales con ActionScript

Objetivos de la unidad

Después de completar esta unidad, podrá: • Crear plantillas de documentos. • Usar los paneles Acciones y Ayuda. • Declarar variables y su tipo de datos y asignar valores

predeterminados. • Entender la sentencia de un código y cuando termina. • Usar la función global trace(). • Entender y asignar nombres de instancias para objetos visuales. • Entender, establecer y sustituir las propiedades del objeto visual

predeterminado. • Usar el operador with. • Crear un MovieClip y símbolos de Bóton (revisar). • Interactuar con TextFields de Entrada y Dinámicos. • Concatenar cadenas de texto. • Usar comentarios del código. • Usar operadores math. • Convertir tipos de datos.

Temas de la unidad

• ¿Qué es una variable? • ¿Qué son los nombres de propiedades e instancias? • ¿Cómo introduzco y muestro un texto? • ¿Cómo trabajo con números y cadenas?

¿Qué es una variable? Una variable es un cubo donde se almacenan datos. Es un nombre que hace referencia a alguna información, pero esa información puede ser distinta en diferentes momentos. A menudo es útil pensar en el código como una conversación entre usted y Flash Player. ActionScript es educado. Hace referencia a todo mediante el nombre. Si algo no tiene nombre, ActionScript no puede comunicarse con eso. Si está creando algo, depende de usted darle un nombre.

¿Qué nombres puedo usar?

Todos los nombres que asigna en ActionScript, incluyendo los nombres de la variable, deben incluir letras y números sólo, no deben tener espacio, ni caracteres especiales, más que un caracter de subrayado (_) y signos dólar ($). El primer caracter debe ser una letra (o uno de los dos caracteres especiales permitidos). Un nombre de variable bien escogido debe ser lo suficientemente largo como para describir con claridad su contenido, mediante el uso de palabras reales. Debe ser único (por lo menos dentro de su Línea de tiempo, pero trataremos más adelante este concepto). Debería además comenzar con una letra minúscula y continuar escribiendo la palabra siguiente del nombre con mayúscula. Comúnmente, tiene sentido usar la combinación: verbo + sustantivo, como:

• playerScore • adminStatus • firstName

¿Qué significa declarar una variable?

En un código bien escrito, el nombre de una variable se declara antes de ser usada. Se habla de declarar una variable cuando se crea un cubo de almacenamiento de datos. Una vez creado, se puede poner algo dentro de éste. Se utiliza una Palabra clave de un ActionScript- una palabra reservada en el lenguaje de programación - llamada var para declarar una variable.

var playerScore; var adminStatus; var firstName;

Lo más aconsejable es declarar todas las variables juntas, generalmente al comienzo de todo su código, donde quiera que éste. Es también aconsejable

mantener todo el código en un lugar, o por lo menos en la menor cantidad de lugares posibles, como veremos más adelante.

¿Cómo asigno un valor a una variable? Use el operador de asignación (=) para decir “colocar el valor a la derecha dentro del cubo de almacenamiento de datos que he designado a la izquierda.”

var playerScore = 1000; var adminStatus = true; var firstName = “Fred”;

Todo lo que inserte del lado derecho del operador de asignación será evaluado antes de ser insertado en el cubo de almacenamiento de datos en el lado izquierdo. Eso significa que el valor dentro de una variable puede ser colocado dentro de otra.

var userColor = 0xFA2409; var bannerColor= userColor;

¿Por qué coloca punto y coma al finalizar cada línea?

El caracter punto y coma (;) se utiliza para decir “ésta es una sentencia completa, continúe y hágalo.” ActionScript funcionará aún cuando olvide completar su sentencia, sin embargo esto no es una excusa para escribir incorrectamente un código. Preste atención en todo este libro y en clase y analice donde observa que se utiliza. En algunos casos, que explicaremos más adelante, una ubicación incorrecta puede causar error.

var playerScore =1000; var adminStatus = true; var firstName = “Fred”; ¿Qué es un tipo de datos y cómo asigno uno?

ActionScript permite especificar de antemano qué tipo de datos se supone que contiene cada variable: su tipo de datos. Los más aconsejable es declarar sus tipos de datos porque puede ayudar a prevenir algunos errores en la programación. Más aconsejable es aún, declarar un tipo de datos y, así, el panel Acciones se sabe que sugerencia darle para el código. Todos los tipos de datos en ActionScript son nombres de clases, una idea que discutiremos más en profundidad. Por ahora, esto sólo significa que sus tipos de datos comienzan con una letra mayúscula, y será un sustantivo el que describa toda la categoría de posibles elementos.

Un tipo de datos se especifica inmediatamente después de un nuevo nombre de variable creado, y está separado del nombre de la variable por dos puntos (:). Por ejemplo:

var variableName:DataType = some default value;

Hay tres tipos de datos principales: Cadena, Número y Booleano. Cadena var firstName: String = “Fred”; var tagLine: String = “The silliest soda Money cab puy”; var formattedPrice: String =”$7.95”; Cadena de datos es una lista de caracteres (cualquier caracter). De manera que una palabra o toda una oración o párrafo es una cadena. Puede haber también una cadena que se parezca a un número, pero ActionScript la tratará aún como una cadena de caracteres de caracteres que son total o parcialmente numéricos, lo cual no es lo mismo. Necesitaremos ver esto cuando toquemos el tema de la concatenación. Observe que los valores asignados a las variables de Cadena estén entre comillas (“). Se puede utilizar comillas dobles (“ “) o comillas simples (‘ ’), siempre y cuando las haga coincidir. Si olvida usar las comillas, probablemente ocasione un error en la programación. (Flash pensará que se está refiriendo a otra variable, llamada como lo que había en Cadena asignada incorrectamente). Número var playerScore: Number = 1000; var itemPPrice: Number = 5.95; var xPosition: Number =272.3; Los datos Number son completamente numéricos. Si puede realizar operaciones matemáticas con el, pertenece al tipo de datos Número. ActionScript no distingue entre números de cómo flotante (con coma decimal) y otros números. Un valo Número puede ser de base 10 (nuestros dígitos normales van desde 0 a 9) o hexadecimal (utilizando para valores de color). Observe que los valores asignados a las variables Número no están entre comillas. Si erróneamente se colocan comillas alrededor de un valor Número, ActionScript pensará que es una Cadena, y se producirá un error, ya que dijo que su variable iba a contener un Número. Booleano var adminStatus: Boolean = true; var visible: Boolean = false; Los valores booleanos son verdaderos o falsos, literalmente. Esas dos palabras, verdadero y falso, son palabras clave en ActionScript. Una variable que contiene un tipo de datos Booleano sólo puede tener el valor verdadero o falso que se le asigne. Observe que las palabras true y false no estén entre comillas. Están incorporadas al lenguaje.

¿Cómo compruebo lo que hay dentro de una variable? Las funciones son herramientas para el código. Flash Player incluye un número de funciones globales incorporadas – funciones que pueden utilizarse en cualquier lugar del código – incluyendo una llamada trace. Las funciones se tratarán en detalle más adelante, por ahora utilice la función trace() de esta forma:

Var userName: String = “Fred”; trace(userName);

Escribe su nombre de variable dentro del paréntesis, a lado del nombre de la función. Esto se llama pasar un argumento a una función. También puede ver el término parámetro utilizado en lugar de argumento; las palabras significan lo mismo. En este ejemplo en particular, el argumento es su variable. Como respuesta, cuando prueba su película, el Reproductor de depuración de Flash, utilizando en el interior de la herramienta de edición Flash 8, evaluará la variable y mostrará el valor que contiene en el panel Salida.

¿Tengo que asignar valores predeterminados a mis variables? No. Puede simplemente declarar una variable, y no asignar valor. Todas las variables tienen un valor no definido hasta que se les asigna uno.

Ensayo 2-1: Declarar y realizar seguimiento a las variables En este ensayo, llevará a cabo las siguientes tareas:

• Crear una plantilla Flash a partir de una plantilla creada previamente, que contiene comentarios y una capa código.

• Declarar las variables de cada tipo de datos simples, y asignarles valores. • Realizar un seguimiento de los valores de la variable usando la función

trace(). Pasos

1. Abra Macromedia Flash 8. 2. Abra este archivo:

{Cursos}\AS2.0\walk\flas800_template.fla 3. Seleccione el primer fotograma de la capa acciones y abra el panel

Acciones. Nota: Analice con su instructor por qué las sentencias del código

están organizadas en un determinado orden. Crear y utilizar una plantilla Flash

4. Seleccione Archivo Guardar como plantilla. 5. Introduzca los siguientes valores:

• Nombre: flas800 • Categoría: ActionScript

Nota: Debe escribir este valor en el campo Categoría para crear una nueva categoría.

6. Haga clic en Guardar. 7. Cierre el archivo. 8. Seleccione Archivo Nuevo. 9. Haga clic en la ficha Plantillas y seleccione flas800 en la nueva

categoría ActionScript. 10. Haga clic en Aceptar. 11. Seleccione Archivo Guardar como, y guarde el documento como.

{Cursos}\AS2.0\walk\unit02\wt2-1.fla

Configurar el panel de acciones 12. Abra el panel Acciones 13. Haga clic en el menú emergente del panel situado en la esquina superior

derecha del panel y seleccione Preferencias 14. Cambie el color de sintaxis por palabras claves y los identificadores por el

color anaranjado. 15. Haga clic en Aceptar. 16. Abra nuevamente el menú emergente del panel y seleccione los números de

línea. 17. Desplace el panel Acciones de manera que cubra todo el Escenario:

• Seleccione el punto de sujeción en la esquina superior izquierda • Arrastre y acóplelo por encima del panel Línea de tiempo. • Aumente su tamaño de manera que cubra todo el Escenario.

18. Seleccione Ventana--->Acciones para cerrar el panel de Acciones. Declare variables de tipos de datos

19. Seleccione el primer fotograma de la capa acciones y abra el panel Acciones.

20. En la sección correcta, declare tres variables de los tres tipos de datos simples: Cadena, Número y Booleano

var userName:String = “Fred”; var playerScore: Number = 723; var adminStatus:Boolean = true;

21. En el menú Control, seleccione Probar película No debería verse nada en el Escenario.

22. En la ventana de prueba del SWK, seleccione Archivo--->Cerrar para cerrarlo. Realizar un seguimiento de los valores de la variable.

23. Abra el panel de Acciones 24. En la sección ejecutar ahora, use la función trace() para mostrar el valor de

cada variable en el panel de Salida. trace(userName); trace(playerScore); trace(adminStatus);

25. Guarde el archive. 26. Seleccione Control---->Probar película.

Debería aparecer el panel de Salida, mostrando cada valor de variable en una línea por separado.

27. Cierre el panel de salida y la ventana de prueba. 28. Cierre el archivo.

¿Qué son los nombres de propiedades e instancia? Nombres de instancia Un nombre de instancia es un nombre para un objeto del Escenario. Específicamente, una instancia del símbolo MovieClip, una instancia del símbolo Button, o un TextField de entrada o dinámico. Se usa el nombre de la instancia asignado al panel Propiedades (o en su código) para “hablar” a ese objeto en ActionScript. Se podría pensar que los nombres de instancia son sólo otra variable , que señala un objeto MovieClip, Buttom, o TextField, en vez de una Cadena, Número o Booleano. Recuerde, ActionScript requiere de algún tipo de nombre para prácticamente todo. ¿No hay nombre de instancia? No hay ActionScript. En la ilustración de abajo, el nombre de la instancia mcCirclel1 ha sido asignado a una instancia de un símbolo MovieClip llamado Circle.

Cuando escriba ActionScript, lo más aconsejable es declarar los nombres de su instancia, así como declarar sus variables. El nombre de una instancia es otra variable, pero una que apunta a un MovieClip, Button o TextField, y así sucesivamente, en vez de un valor Cadena, Número o Booleano. Esto significa que asigna un nombre de instancia en el panel de Propiedades y lo declara en su código. Al efectuar esto, obtiene sugerencias del código. var mcCircle1:MovieClip; Más adelante, aprenderemos que algunos objetos son invisibles. Veremos que este tipo de objeto asigna un nombre de instancia a través del código:

var dtToday:Date = new Date();

Propiedades Una propiedad es un tipo especial de variable. Es una variable que está conectada a un objeto concreto, visible o invisible, y apunta a, o “contiene” información que describe algunas características de este objeto. Usted ya ha asignado valores de propiedad usando el panel Propiedades

Si conoce el nombre de instancia de un objeto, puede asignar sus propiedades con código. Todo lo que puede establecerse en el panel Propiedades puede también establecerse con código (y mucho más). Escriba el nombre de la instancia, seguido por un operador de punto (.), y después el nombre de propiedad. Luego, usted asigna un valor a la propiedad:

instanceName.propertyName = value; Si se le asigna un tipo de datos a su nombre de instancia, el panel Acciones le dará sugerencias para el código mediante un menú emergente, una vez que escriba en el operador de punto.

Varias veces notará que algunas propiedades comienzan con un carácter de subrayado (_) mientras que otras no. No hay diferencia entre ellas. ¿Tengo que escribir el nombre de la instancia una y otra vez? No, puede utilizar el operador with para guardar lo que escribió. El operador with le permite asignar un valor a cualquier propiedad preexistente de un objeto. Observe que no puede crear propiedades nuevas en el objeto, algo a lo que nos referiremos más adelante con los objetos genéricos.

¿Y si necesito ayuda? La caja de herramientas del panel Acciones presenta el lenguaje ActionScript y la Interfaz de la programación de aplicaciones Flash Player (API)— las propiedades, métodos, y controladores de evento para cada clase de objetos — en vista árbol. Puede pasar a otro lenguaje o elemento API, hacer clic con el botón derecho, y seleccionar Ver ayuda. Puede además seleccionar Añadir a script, para añadir este elemento a su código sin escribirlo.

Ensayo 2-2: Asignar propiedades MovieClip usando ActionScript En este ensayo, llevará a cabo las siguientes tareas:

• Crear un símbolo MovieClip y asignarle un nombre de instancia. • Establecer valores de propiedad visual predeterminados para la

instancia MovieClip, usando el panel Propiedades. • Cambiar los valores de propiedad MovieClip con código. • Crear instancias múltiples de un símbolo MovieClip, y asignar valores

de propiedad diferentes entre ellos. Pasos

1. Cree un archivo nuevo a partir de la plantilla flas800 y guárdelo como: {Cursos}\AS2.0\flas8OO\walk\unit02\wt2-2.fla

Crear un símbolo MovieClip (repaso)

2. Seleccione Ver----> Reglas.

3. Seleccione la capa contenido.

4. Utilice la herramienta Óvalo para dibujar una figura circular, de alrededor de 100 x 100 píxeles, con trazos contrastables, y rellénela.

5. Seleccione toda la figura, tanto los trazos como el relleno, y seleccione Modificar---->Convertir en símbolo.

6. En el cuadro de diálogo Convertir en símbolo, asigne los siguientes valores: • Nombre: Círculo • Tipo: MovieClip • Registro: superior izquierdo

7. Si no está aún abierto, seleccione Ventana ----> Biblioteca para abrir el panel Biblioteca.

Observe que el símbolo MovieClip se denomina Circle allí. Asignar valores de propiedad predeterminados

8. Si no está aún abierto, seleccione Ventana Propiedades para abrir el panel Propiedades debajo de Escenario.

9. Seleccione el objeto sobre el Escenario.

10. En el panel Propiedades, observe que se hace referencia a éste como una Instancia de: Círculo.

11. En el panel Propiedades, transforme esta instancia del símbolo Círculo,

estableciendo los valores siguientes:

• An: 200 • Al: 200 • X: 50 • Y: 50 • Color | Alfa: 70%

Nota: Pulse siempre Tabulador o Intro tras introducir un valor en el campo panel.

12. Pruebe la película y observe los valores establecidos definidos que aparecen.

13. Cierre la ventana de prueba.

Asignar un nombre de instancia y declararlo en ActionScript

14. Seleccione la instancia en el Escenario.

15. Abra el panel Propiedades y asigne un nombre de instancia de mcCircle1

16. Seleccione el primer fotograma de la capa acciones y abra el panel

Acciones.

17. En la sección declarar variables de su código, declare el nombre de la instancia que asignó. como un tipo de datos MovieClip.

var mcCirclel:MovieClip;

18. En la sección establecer valores de propiedad de su código, escriba el nombre de la instancia que declaró seguido de un punto.

mcCircle1.

Debería ver aparecer una lista emergente de propiedades MovieClip.

19. Desplácese y examine las propiedades disponibles.

Sustituir las propiedades predeterminadas con ActionScript

20. Seleccione la propiedad_alfa y pulse Intro para agregar esta referencia de propiedad a su código.

21. Asigne el valor 20 a esta propiedad mccirclel._alpha = 20;

22. Pruebe la película; observe que este valor sustituye el valor que envió al panel

Propiedades.

23. Regrese al panel Acciones y establezca los siguientes valores adicionales:

mccirclel._x = 0; mcCircle1._y = 0; mcCircle1.width = 50; mcCircle1.height = 50;

24. Pruebe la película; observe que este valor establecido, a través de un código,

sustituye los valores predeterminados que suministró.

Visualizar los valores de propiedad de instancia, usando trace().

25. En la sección ejecutar ahora de su código, realice un seguimiento de las posiciones _x y y de su objeto del Círculo: trace(mcCirclel.x); trace(mcCirclel.y);

26. Pruebe la película; observe que puede acceder a cualquier nombre de instancia del objeto mediante su código.

Guardar la escritura, usando el operador with

27. Regrese al panel Acciones y vuelva a escriba su código para utilizar el operador with y establecer todos los valores de mcCirclel. with(mcCircle1) {

_alpha = 20; _x = 0; _y = 0; _width = 50; _height = 50;

}

28. Guarde el archivo y pruebe la película; asegúrese de que los valores sean aún correctos.

Ensayo 2-3: Usar ActionScript con Instancias del símbolo Button En este ensayo, llevará a cabo las siguientes tareas:

• Crear un símbolo Button y asignarle un nombre de instancia. • Establecer valores de propiedad visual predeterminados para la instancia Button, usando el panel Propiedades. • Cambiar los valores de propiedad Button con ActionScript.

Pasos

1. Regrese a wt2-2.fla y guárdelo como: {Cursos}\AS2.0\flas800\walk\unit02\wt2-3.fla

Crear un símbolo Button (repaso)

2. Seleccione la capa contenido.

3. Utilice la herramienta Cuadrado para dibujar una figura rectangular, de alrededor de 100 x 100 píxeles, con trazos contrastables y rellénela.

4. Seleccione toda la figura, tanto los trazos y el relleno, haga clic con el botón derecho y seleccione Convertir en símbolo.

5. En el cuadro de diálogo Convertir en símbolo, asigne los siguientes valores:

• Nombre: Cuadrado • Tipo: Botón • Registro: superior izquierdo

6. Si no está aún abierto, seleccione Ventana --> Biblioteca para abrir el panel

Biblioteca. Observe que el símbolo Button denominado Cuadrado aparece allí ahora.

7. Haga doble clic en el botón derecho en el símbolo Cuadrado en el panel

Biblioteca y seleccione Editar. Ahora está en el modo de edición de símbolo para Cuadrado.

8. Haga clic derecho en el fotograma Sobre en la Línea de tiempo y seleccione Introducir fotograma clave.

9. Con el estado Sobre seleccionado, cambie el color de relleno del símbolo.

10. Agregue un fotograma al estado Abajo.

11. Con el estado Abajo seleccionado, cambie el color de relleno del símbolo.

12. Haga clic en Escena 1 arriba de la Línea de tiempo para salir del modo edición de símbolos, y regrese a la Línea de tiempo del documento principal

13. Pruebe Las películas y pase el puntero del ratón sobre el cuadrado para ver los diferentes colores que asignó a los estados sobre y abajo.

Asignar un nombre de instancia y declararlo en el código

14. Seleccione la instancia cuadrado en el Escenario.

15. Abra el panel Propiedades y asigne al cuadrado un nombre de instancia de btSquare1.


17. En la sección declarar variables de su código, declare el nombre de la instancia que asignó y que contiene el tipo de datos del Button. var btSquarel :Button;

18. En la sección establecer valores de propiedad de su código, establezca los

siguientes valores adicionales sobre el código existente:

with (btSquarel) {

_x = 200; _y = 200; _xscale = 200; _yscale = 200; _rotation = 45;

}

19. Guarde el archivo y pruebe la película; observe los cambios, y note que el API —las propiedades asignables (y métodos) — para la transformación visual de los símbolos Button mediante ActionScript es prácticamente idéntica a los símbolos MovieClip.

20. Cierre el archivo.

¿Cómo introduzco y muestro un texto? Flash Player admite tres tipos de TextField:

• Estático: sólo muestra, sin nombre de instancia, de manera que no muestra ActionScript

• Ingreso: editable por el Usuario. y legible/para escritura por ActionScript

• Dinámico: no editable por el Usuario, pero legible/para escritura por ActionScript

¿Cómo asigno un nombre a un TextField? Puede dibujar una instancia de la clase de TextField en el Escenario y establecer su propiedad tipo en el panel Propiedades. Si establece el tipo para Introducir de texto, este TextField puede ser editado por su Usuario. Si lo establece para Texto Dinámico, sólo puede cambiar su valor en código.

En su código, declara el nombre de instancia para obtener sugerencias para el código. En ActionScript, no hay diferencia entre Textfields de Entrada y Dinámicos, aparte de la del valor de su propiedad tipo. Todas sus propiedades, métodos y controladores de eventos son prácticamente lo mismo.

¿Cómo establezco o recupero lo que hay dentro de un TextField? Las instancias de la clase TextField (“objetos textfield”) exponen algunas ventanas de propiedades útiles, incluyendo:

• texto: una propiedad legible y para escritura que contiene cualquiera de los caracteres que muestra TextField. ya sea que estén puestos allí por el Usuario o por usted, el desarrollador.

• _url: un hipervínculo asociado con este TextField • borde: un valor verdadero o falso • bordeColor: un color hexadecimal para el borde. • tipo: ya sea “entrada” o “dinámico”

Hay muchas, muchas más propiedades para revisar en los paneles Acciones y Ayuda. Para mostrar un texto particular en un TextField, asigne el valor de una Cadena a la propiedad del texto:

var welcomeText:TextField; welcomeText.text = “Would you like to play a game?”;

Para recuperar lo que su Usuario escribió en un TextField editable:

var firstName:String; var txtFirstName:TextField; firstName= txtFirstName.text;

¿Cómo pego dos valores en cadena? Asociar un valor de Cadena con otro se llama concatenación. El signo más (+) sirve para dos propósitos en ActionScript: suma o concatenación

Ensayo 2-4: Usar un ActionScript con TextFields En este ensayo, llevará a cabo las siguientes tareas:

• Crear tres TextFields dinámicos.

• Asignar nombres de instancia a TextFields.

• Establecer valores de propiedad visual predeterminados y valores del texto a TextFields.

• Concatenar los valores de texto TextField en una variable de Cadena y

mostrar el valor resultante en otra instancia TextField. Pasos 1. Cree un archivo nuevo a partir de la plantilla flas800 y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit02\wt2-4.fla Crear TextFields dinámicos con nombres de instancia 2. Seleccione la herramienta del Texto de la Caja de herramientas. En el panel Propiedades, establezca los siguientes valores:

• Tipo: Dinámico • Fuente: Verdana • Tamaño de fuente: 14 • Color texto: seleccione el color que desee

3. En la capa contenido, dibuje una instancia de TextField dinámica en el Escenario, de alrededor de 200 píxeles de ancho. 4. Escriba la frase campo primero en el Textfield como texto predeterminado. 5. En el panel Propiedades, asigne el nombre de instancia txtField1. 6. Pulse la tecla Esc para salir del modo introducción de texto, mientras deja este TextField seleccionado y sus propiedades editables. 7. Seleccione la herramienta Selección. 8. Haga una copia del TextField y ubíquelo debajo de él:

• Mantenga pulsada la tecla Ctrl.

• Seleccione el TextField en el Escenario, haciendo clic y manteniendo pulsado el botón del ratón.

• Arrastre una copia del TextField y luego suelte el botón del ratón 9. Haga doble clic en el nuevo TextField y cambie su texto predeterminado al segundo campo. 10. En el panel Propiedades, cambie el nombre de la instancia copiada a txtField2 11. Repita el paso 8 para crear un tercer TextField debajo del segundo. 12. Cambie el texto predeterminado del tercer TextField al tercer campo, y nombre la instancia como txtField3. Mostrar y cambiar los contenidos TextField 13. Abra el panel Acciones, y en la sección declarar nombres de variables e instancias, declare y establezca el tipo de datos para cada TextField:

var txtField1:TextField; var txtField2:TextField; var txtField3:TextField;

14. En la sección ejecutar ahora de su código, realice un seguimiento del valor actual de la propiedad del texto de txtField1.

trace(txtFieldl.text); 15. Pruebe la película; observe dónde y cómo el valor actual en este TextField aparece para usted. 16. Cierre la ventana de prueba. 17. Regrese a su código y en la sección establecer valores de propiedad, cambien el texto en txtField1:

txtFieldl.text = “changed text’; 18. Pruebe la película nuevamente: observe todo el texto cambiado. Combinar y mostrar dos valores TextField 19. En la sección declarar variables, declare una nueva variable de Cadena llamada combinedText:

var combinedText:String;

20. En la sección ejecutar ahora, usando el operador de concatenación (+) escriba una expresión para combinar los valores de texto de txtField1 y txtField2, con un espacio entre ellos, en la nueva variable:

combinedText = txtField1.text + “ ” + txtField2.text; 21. Muestre el resultado en txtField3:

txtField3.text = combinedText; 22. Guarde el archivo y pruebe la película, observe los valores concatenados mostrados. Puede que necesite regresar al Escenario y aumentar el tamaño de su TextField para ver todo el valor de la cadena.

¿Cómo trabajo con números y cadenas? La clase Math Las constantes matemáticas generalmente utilizadas están disponibles como propiedades incorporadas en la clase Math. Por ejemplo

• Math.PI : el valor de 3.14159265358979 • Math.SQRT2 : el valor de 1.4142135623730951 • Math.E : el valor de 2.71828182845905

Más adelante veremos cómo las funciones matemáticas comunes se incorporan también. Operadores Math Realiza operaciones matemáticas en ActionScript como lo hacía cuando tenía Álgebra, pero los operadores math puede que se vean algo diferente. + Suma (o concatenación)

var total:Number = 2 + 4; /7 total es 6

— Resta

var total;Number = 2 - 4; // total es -2

* Multiplicacion

var total:Number = 2 * 4; // total es 8

/ División

var total:Number = 2 / 4; /7 total es 0,5

Suma, concatenación y NaN El signo más (+) sirve para dos propósitos. Si el tipo de datos en ambos lados es Número, obtiene una suma; pero si cualquier lado es Cadena, obtiene concatenación. Si su fórmula no tiene sentido (como dividir un nombredeUsuario por 2), el resultado será la palabra clave NaN, que significa que el resultado de su expresión “no es un número”.

var num1:Number = 7; var num2:Number = 2; var total:Number; var userName:String = “Ginger”; total = num1 + num2; // total es 9 total = num2 + userName; // total es “2Ginger”

total = Math.PI * 2; // total es 6.283 total = userName / 2; // total es NaN (“not a number”)

¿Qué sucede si tengo un tipo de datos incorrecto para mi variable? Si intenta colocar el tipo de datos erróneo en una variable, el Flash Player puede arrojar un error de “discordancia en el tipo de datos”. Esto significa que necesita convertir sus datos en el tipo de datos correctos (si es posible). ActionScript admite funciones de conversión para esto, incluyendo;

• Cadena(valor): convierte un valor Número a Cadena • Número(valor): convierte un valor Cadena a Número, o NaN (“no un número”)

Prácticamente, es probable que sólo se tope con este inconveniente en dos situaciones, que se detallan debajo. Recuperar valores de número de un TextField de entrada Todo lo que recupere de la propiedad de un texto de un TextField tendrá el tipo de datos Cadena, aún si son caracteres numéricos. Necesita convertirlos a Número antes de hacer cualquier operación matemática.

var txtInput1:TextField; var txtInput2:TextField; var total:Number; // convert the input to Number before adding them // otherwise you’ll get concatenation total = Number(txtInput1.text) + Number(txtInput2.text);

Asignar valores Número para mostrar en unTextField Todo valor asignado a la propiedad texto de un TextField para mostrar debe ser el tipo de datos Cadena. Si hace operaciones matemáticas y quiere mostrar el resultado, debe convertir el resultado de una Cadena antes de asignarlo para ser mostrado.

var txtInput1:TextField; var txtInput2:TextField; var txtResult:TextField; var total:Number; // convert the input to Number before adding them // otherwise you’ll get concatenation total = Number(txtInput.text) + Number(txtInput2.text); // convert the result from a Number back to a String // otherwise you’ll get a data type mismatch error txtResult.text = String(total);

¿Hay alguna manera de tomar notas propias en el código? Sí, y lo más aconsejable es hacerlo. Cuesta poco mantener al código bien comentado, y olvidará como funciona su código con el paso del tiempo. Hemos utilizado comentarios de código en los ejemplos de arriba para demostrar este método. Cuando convierte las palabras o códigos en comentarios, el código está visible pero no se ejecuta. Comentarios de una sola linea y en línea

// Comentario de una sola línea entre doble barra oblicua var firstName:String; // y puede utilizarse en línea

Comentarios en varias líneas

/* Desarrollador jefe: Ginger Rogerson Fecha de la versión: 10/15/2005 Historia de la ensayo:

10/26/05 — modificar el ancho del Escenario a … */

Una técnica común cuando se escribe un código es convertir temporalmente en comentario algún código que se haya escrito, para revisar si está causando un error. De esta manera, no necesita volver a escribir el código más tarde.

Ensayo 2-5: Trabajar con Math, números y conversación de tipo de datos En este ensayo, llevará a cabo las siguientes tareas:

• Mostrar las constantes Math en un TextField dinámico. • Crear una expresión matemática. • Mostrar una cadena y número concatenado en un TextField dinámico.

Pasos

1. Regrese a wt2-4.fla y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit02\wt2-5.fla


3. Convierta en comentario o elimine el siguiente código en la sección ejecutar ahora:

combinedText = txtField1.text + “ ” + txtField2.text; txtField3.text = combinedText; trace (txtField1.text)

Mostrar una propiedad de objeto Math y convertir su tipo de datos para mostrar como texto

4. En la sección ejecutar ahora de su código, asigne el valor de la propiedad PI del objeto Math a la propiedad del texto de txtField3:

txtField3.text = Math.PI;

5. Pruebe la película; observe el siguiente mensaje de error: “Tipo de la declaración de asignación no coincide: se encontró Número donde era necesario Cadena.” 6. Cierre la ventana de prueba. 7. En su código, utilice la función de conversión Cadena() para cambiar el tipo de datos del valor asignado de Número a Cadena, para que pueda mostrase como texto en un TextField:

txtField3.text = String(Math.PI);

Escribir una expresión calculada y mostrar suresultado

8.- En la sección declarar variables, declare dos variables llamadas thisRadius y thisDiameter de tipo Número:

var thisRadius: Number; var thisDiameter: Number;

9. En la sección ejecutar ahora, asigne el valor 2 a thisRadius. thisRadius = 2;

10. Utilice el valor de thisRadius para calcular el diámetro y asignarlo a thisDiameter.

thisDiameter = 2 * thisRadius;

11. Escriba una expresión para calcular y mostrar la circunferencia de un círculo de 2 pulgadas de radio, y asígnelo a la variable combinedText como una cadena de texto que describe el resultado:

combinedText = “The circunference of a 2 inch radius circle is “ + (Math.PI * thisDiameter);

12. Muestre la cadena resultante en txtField3:

txtField3.text = combinedText;

13. Pruebe la película. Observe que no puede ver el resultado completo. 14. Regrese a su código y en la sección establecer valores de propiedad, establezca la propiedad autoSize de txtField3 a verdadera:

txtField3.autoSize = true;

1 5. Guarde el archivo y pruebe la película; observe el resultado. 16. Cierre el archivo.

Resumen de la unidad • Las variables contienen algo en la memoria. • Un tipo de datos de variable define la clase de elementos que contiene: Cadena, Número, Boleano, MovieClip, Button, TextField, y así sucesivamente.

• La función trace() muestra el valor de una variable o expresión. • Los nombres de instancia son variables que señalan instancias de símbolos. • Las propiedades son variables que describen la instancia de un símbolo designado. • Los valores de texto pueden estar concatenados.

trace(firstName + + lastName);

• Los tipos de datos pueden cambiarse unos con otros. result = Number(txtInput1.text) * Number(txtInput2.text);

Repaso de la unidad

1. ¿Cual es la diferencia entre una variable, un nombre de instancia y una propiedad?

2. ¿En qué se parecen las variables, los nombres de instancia y las propiedades?

3. ¿Cómo mira “dentro” de una variable cuando depura su código?

4. ¿Qué tipo de datos son cada uno de éstos?

a. “Super-SilIy Disco Soda”

b. 3.1415926

c. Un nombre de campo de texto llamado “txtFirstName”

5. ¿Qué verá si realiza un seguimiento de estas expresiones?

a. trace(9 + 2 + “ducks”) b. trace (true * 2)

Laboratorio 2: Definir las propiedades del objeto visual En este laboratorio, llevará a cabo las siguientes tareas:

• Crear MovieClip para que actúe como elemento de fondo. • Crear un segundo MovieClip para mostrar la Información del reproductor. • Crear un símbolo de botón. • Colocar una instancia designada de cada símbolo fuera del Escenario. • En código, declarar las variables del primerNombre, Apellido, y playerScore. • Utilice ActionScript para ubicar y configure cada instancia en tiempo de ejecución, concatenando los valores de la variable en sus correspondientes campos de muestra.

Objetivos

Después de completar este laboratorio, usted podrá:

• Asignar nombres de instancia a objetos visuales. • Declarar nombres de instancias y su tipo de datos en ActionScript. • Configurar MovieClips y TextFields usando ActionScript. • Utilizar el operador with. • Declarar variables y su tipo de datos en ActionScript. • Utilizar el operador de concatenación de cadena (+). • Utilizar la función global trace().

Pasos

1. Cree un archivo nuevo a partir de la plantilla flas800 y guárdelo como:

{Cursos}\AS2.0\flas800\lab\flas800_lab2.fla

2. Seleccione el Escenario. 3. En el panel Propiedades, haga clic en el botón Tamaño

4. En el cuadro de diálogo Propiedades del documento, cambie la altura del Escenario de 400 px a 500 píxeles.

5. Haga clic en Aceptar. 6. Seleccione Insertar Nuevo símbolo. 7. En el cuadro de diálogo Nuevo símbolo, cree un símbolo

MovieClip denominado Fondo, y haga clic en Aceptar. 8. Dibuje una figura rectangular de 50 x 50 píxeles sin trazos y

rellénelo con un color claro (0XFFFF00). Crear símbolos

9. Seleccione el cuadro.

10. En el panel Propiedades, establezca su x a 0 y y a 0 para asegurar un punto de registro en la esquina superior izquierda.

11. Regrese a la Línea de tiempo del documento principal desde el modo de edición de símbolo, haciendo clic en la Escena 1, arriba de la Línea de tiempo.

12. Seleccione Insertar Nuevo símbolo.

13. Cree otro nuevo símbolo MovieClip llamado Playerlnfo y haga clic en Aceptar.

14. Asigne la Capa 1 al texto estático.

15. Sobre esta capa de texto estático, cree dos TextFields estáticos, con el reproductor de texto: y puntuación máxima:

16. Utilice el panel Propiedades para establecer las posiciones x y y del campo de texto del reproductor a 0,0.

17. Cree una nueva capa por encima de la capa de texto estático, denominada texto dinámico.

18. Al lado, cree dos TextFields dinámicos, sin texto predeterminado, y nombres de instancia txtPlayerName y txtPlayerScore.

19. Regrese a la Línea de tiempo del documento principal desde el modo de edición de símbolo.

20. Cree un símbolo de botón, llamado NewGame.

21. Vuelva a asignar el nombre fondo a la capa 1.

22. Sobre esta capa de fondo, cree una figura rectangular de 100 píxeles de ancho con trazo y rellénela, y establezca el punto de registro a x:0 y y:0.

23. Inserte fotogramas claves en los fotogramas Arriba y Abajo, y cambie el color de relleno (pero no el color de trazo) del cuadrado en cada uno de estos fotogramas clave.

24. Bloquee la capa de fondo. 25. Cree una nueva capa sobre la capa de fondo llamada texto. 26. En esta capa de texto, cree un TextFields estático con el texto new game.

27. Regrese a la Línea de tiempo del documento principal desde el modo de edición de símbolo.

Insertar instancias 28. Seleccione la capa contenido. 29. Arrastre una instancia de Fondo y sáquela fuera del escenario, debajo del área del escenario. 30. En el panel Propiedades, asígnele el nombre de instancia mcBackground. 3 1. Arrastre una instancia de Playerlnfo desde el panel Biblioteca. y sáquela fuera del escenario, debajo de la instancia mcBackground. 32. En el panel Propiedades, asígnele el nombre de instancia mcPlayerlnfo.

33. Arrastre una instancia de NewGame desde el panel Biblioteca y sáquela fuera del escenario, debajo de la instancia mcPlayerlnfo. 34. En el panel Propiedades, asígnele el nombre de instancia btnNewGame.

Configurar instancias de símbolos, usando ActionScript. 35. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 36. En la sección declarar variables y nombres de instancia, declare cada uno de los tres objetos visuales. 37. A continuación, declare las siguientes variables: • Una variable Cadena llamada primerNombre con el valor predeterminado New. • Una variable Cadena llamada Apellido con el valor predeterminado Usuario. • Una variable Número llamada playerScore con el valor predeterminado 0.

38. En la sección establecer valores de propiedad, utilice un operador with para asignar los siguientes valores a mcPlayerlnfo:

• _x 150 • _y 460 with (mcPlayerlnfo) {

_x = 150; _y = 460;

} 39. Dentro del mismo operador with, concatene el valor de firstName a un espacio, luego al valor del Apellido, y asigne la expresión resultante como la propiedad del texto para txtPlayerName, para el TextField dinámico que incorporó a mcPlayerlnfo.

with (mcPlayerlnfo) {

_x = 150; _y = 460; �� ” “ � ��

}

40. Dentro del mismo operador with, asigne el valor playerScore como la propiedad de texto para el TextField dinámico que incorporó a txtPlayerScore.

txtPlayerScore.text = playerScore;

41. Guarde el archivo y pruebe la película; observe la posición de mcPlayerlnfo y los valores rnostrados.


43. En la sección establecer valores de propiedad, utilice un operador with para asignar un x de 30 y un y de 460 a btnNewGame:

with (btnNewGatne) {

_x = 30; _y = 460;

}

44. Debajo de este código, use un operador with para asignar un x de 0, un y de 0, un ancho de 700, y una altura de 500, para mcBackground:

with (mcBackground) {

_x = 0; _y = 0; _width = 700; _height = 500;

}

45. Guarde el archivo y pruebe la película. Observe el color de diseño y fondo de toda el área del Escenario:

46. Cierre la ventana de prueba y el documento.

Unidad 3: Utilizar y escribir funciones

Objetivos de la unidad Después de completar esta unidad, podrá:

• Usar funciones globales. • Ejecutar código en un fotograma clave. • Escribir una función definida por el usuario. • Comprender la diferencia entre Línea de tiempo y ámbito de variable en funciones. • Ejecutar código dentro de la propia Línea de tiempo de un símbolo MovieClip. • Cargar contenido externo a una instancia de símbolo MovieClip. • Asociar instancias de símbolos MovieClip exportadas de la Biblioteca. • Generar contenido visual de dentro de una función reutilizable.

Temas de la unidad

• ¿Qué es una función? • ¿Cómo escribo mis propias funciones? • ¿Por qué colocar código dentro de una ínea de tiempo MovieClip? • ¿Cómo cargo contenido externo? • ¿Cómo puedo crear nuevas instancias desde mi Biblioteca? • ¿Cómo genero una función para crear mis MovieClips?

¿Qué es una función? Las funciones son herramientas de programación. Puede llamar a las funciones o invocarlas en el código para calcular valores o hacer que suceda algo en especial. En términos generales, las funciones se dividen en 2 tipos. Una calculan algo y devuelven un resultado adonde sea que se las ha llamado en el código. Otras funciones van a hacer algo en Flash Player, pero no devuelven resultados. Llamar a funciones y pasar argumentos Para llamar a una función en el código, escriba el nombre de la función seguido de paréntesis. Si debe pasar información a la función para que ésta haga su trabajo, haga referencia a cada dato en una lista con los datos separados por comas en los paréntesis. A menudo la información que se pasa estará en una variable (o nombre de instancia o propiedad). Otras veces, puede pasar literales de cadena, números o valores booleanos. Siempre debe usar paréntesis cuando llame a una función, ya sea que esté pasando argumentos a ésta o no.

functionName([argument1, argument2, ..]);

Algunos ejemplos:

// getTimer() no lleva argumentos var elapsedMilliseconds:Number = getTimer(); // trace() lleva un argumento // aquí se ha pasado una variable con un valor de argumento trace (elapsedMilliseconds); // getURL() lleva un argumento obligatorio y otro opcional // aquí se están pasando dos valores de Cadena de literales getURL (“http://www.macromedia.com”, “_blank”); // puede llamarse a una función como argumento de otra // el resultado de la función anidada se pasa a la exterior trace (getTimer());

Las funciones pueden devolver un valor

En la última unidad, usamos las funciones de conversión String() y Number(). Estas funciones se pasaban como un argumento (a veces también denominado parámetro). Estas funciones convertían el valor de su argumento en un nuevo tipo de datos y, a continuación, devolvían el valor convertido. Después, se asignaba el valor devuelto a una variable.

Las funciones pueden hacer algo, pero no devuelven nada

Algunas funciones realizan un procedimiento en la película: “hacen” algo, pero no devuelven ningún valor. Puede pensarse en as funciones simplemente como métodos abreviados de realizar tareas comunes. A veces, esto incluye un cálculo; otras veces, una acción. Ambos tipos de funciones son útiles. ¿Qué tipos de funciones existen?

En términos generales, hay tres tipos de funciones: funciones globales, funciones definidas por el usuario y métodos. Funciones globales Flash Player incluye un conjunto de funciones incorporadas a las que puede llamarse en cualquier lugar del código. Se denominan funciones globales.

Funciones definidas por el usuario Más adelante en esta misma unidad, veremos cómo puede escribir sus propias funciones. Puede llamar a sus propias funciones en el mismo FLA en el que las declaró y creó. También puede escribir las funciones en archivos externos y volver a usarlas en diferentes archivos FLA. Eso lo veremos más adelante. Métodos En la última unidad, vimos cómo una propiedad es simplemente una variable asociada a un objeto en particular, del que describe algunas características. Un método es una función asociada a un objeto en particular, que permite que ese objeto haga cosas con sus propiedades y posiblemente a otros objetos. Hay numerosísimos métodos incorporados en Flash Player. En realidad, hay muchos más métodos que funciones globales. Ahora bien, la diferencia real entre una función y un método es muy pequeña. Un método es simplemente una función asociada a un objeto. Eso significa que se necesita el nombre de instancia (o nombre de clase) del objeto para llamar a sus métodos. Volveremos sobre esta idea a lo largo del curso. ¿Dónde coloco el código?

El panel Acciones le permite asociar el código en tres ubicaciones generales:

• Fotogramas clave • Instancias de símbolo MovieClip • Instancias de símbolo Button

Lo mejor es colocar todo el ActionScript en fotogramas clave o en archivos de script o de clase externos (estos son procedimientos avanzados que sólo se ven brevemente en este curso). En una unidad posterior, veremos brevemente cómo colocar ActionScript en instancias de símbolo MovieClip y Button, pero se desaconseja el uso de esta

práctica porque lleva rápidamente a un código desordenado e insostenible. ActionScript se ejecuta cuando la cabeza lectora llega al fotograma clave en el que éste se encuentra. Aparece un símbolo α en los fotogramas clave que tienen ActionScript.

Lo mejor es colocar el ActionScript en el primer fotograma clave de la capa superior. Son tres las razones para ello: 1. Es más fácil hallar y mantener el código si está todo en un lugar. 2. Todas las variables y funciones declaradas en el primer fotograma

pueden utilizarse directamente en cualquier otro fotograma de la misma Línea de tiempo(o capa, aunque lo mejor es colocar todo el código en una única capa).

3. El orden de carga predeterminado de documentos es (Archivo Configuración de publicación Flash Orden de carga) es de abajo arriba. Al colocar todo el ActionScript en la capa superior, se asegura de que todas las instancias con nombre en el Escenario se carguen en Flash Player antes de que se ejecute el ActionScript.

Pues que el código se ejecuta cuando la cabeza lectora llega a un fotograma clave, habrá unas pocas circunstancias relacionadas directamente con el control de ésta cuando coloque el código en un fotograma clave que no sea el primer (por ejemplo, las llamadas a la función stop()). En caso contrario, el código deberá ir en el primer fotograma de la capa superior. En los cursos de Macromedia, esta capa siempre se llama acciones.

Ensayo 3-1: Trabajo con funciones globales En este ensayo, llevará a cabo las siguientes tareas:

• Utilizar funciones globales para mostrar la versión de Flash Player y el lapso de tiempo transcurrido desde el comienzo de la película.

• Utilizar fotogramas clave para controlar el momento en que se ejecutan estas funciones y en que se muestran los resultados.

Pasos


{Cursos}\AS2.0\flas800\walk\unit03\wt3-1.fla Añadir fotogramas claves y crear TextFields 2. Extienda la capa acciones y la capa contenido hasta el fotograma 48 y añada fotogramas clave a la capa acciones en los fotogramas 12, 24 y 36.

3. En la capa contenido, cree dos TextFields dinámicos y asigne a uno de ellos el nombre de instancia txtVersion y, al otro, el nombre de instancia txtTimer. 4. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 5. En la sección declarar variables y nombres de instancias, declare los dos TextFields:

var txtVersion:TextField; var txtTimer:TextField;

Mostrar información sobre version y temporizador 6. En la sección ejecutar ahora, asigne el resultado devuelto cuando se lla,a a la función gerVersion() a la propiedad texto de txtVersion; para ello, abra el árbol Funciones globales de la Caja de herramientas Acciones y arrastre la función hasta el scritp.

7. Pruebe la película.

Deberá ver información sobre la versión de Flash Player. De ser necesario, regrese al Escenario y aumente el tamaño de este Cuadro de texto para que aparezca el texto completo.

8. Cierre la ventana de prueba. 9. Regrese al código y en la sección ejecutar ahora, agregue código para mostrar el resultado de llamar a getTimer() en el TextField txtTimer.

txtTimer.text = getTimer();

10. Convierta el valor devuelto de getTimer() a una Cadena para mostrarlo como texto.

txtTimer.text = String(getTimer());

11. Pruebe la película. Observe que la visualización de tiempo se actualiza aproximadamente cada cuatro segundos (4.000 milisegundos).

Analice con su instructor el momento y los motivos por los que ocurre la actualización.

12. Cierre la ventana de prueba. 13. Regrese al código y copie el código que escribió en los pasos 9-10. 14. Abra el panel Acciones para el fotograma 12 de la capa acciones y pegue este código.

Observe que ahora aparece un símbolo α en este fotograma clave.

15. Repita el paso 14 para los fotogramas 24 y 36. 16. Una vez hecho esto, observe que la Línea de tiempo ahora indica que hay código en cada uno de estos fotogramas clave.

17. Pruebe la película. Observe que el campo txtTimer se actualiza ahora aproximadamente cada segundo (1 .000 milisegundos).

Analice con su instructor el momento y los motivos por los que ocurre la actualización.


19. Seleccione el Escenario. 20. En el panel Propiedades, ajuste la velocidad de fotogramas a 24 fotogramas por segundo (fps). 21. Guarde el archivo y pruebe la película. Observe que el campo txtTimer e actualiza ahora aproximadamente dos ves más rápido que antes. 22. Cierre el archivo.

¿Cómo escribo mis propias funciones? La sintaxis general para declarar una función definida por el usuario es: function doSomething ([arg1: Data type, …]): ReturnType {

var localVariable:String; // hacer algo con los argumentos y las variables locales, return a value;

} Sin embargo, hay otra pregunta que es verdaderamente mejor: ¿por qué escribir sus propias funciones?

¿Por qué escribir sus propias funciones? Si bien las respuestas a esta pregunta se hacen más evidentes a medida que transcurre el tiempo, la respuesta corta es que no tiene sentido volver a inventar la rueda. Si ha escrito un código que hace algo que le gusta, ¿para qué escribirlo otra vez? Coloque el código dentro de una función, calcule qué bits de información podrían cambiar cada vez que la llame y pase esos bits modificables a la función como argumentos.

¿Cuáles son las distintas partes de una función? Cuerpo de la función (el “esqueleto”) Hay dos maneras de declarar una función en ActionScript: function createPlayerlD() { } createPlayerlD=function() { }

Si bien ambos enfoques funcionan de casi la misma manera, el primero suele ser mejor. Esto se debe a que es el estilo que se utiliza si pasa a escribir clases de ActionScript (un tema avanzado que no veremos en este curso). Por lo general, los nombres de las funciones deben seguir un patrón verboSustantivo (por ejemplo, addNumbers). Por convención, los nombres de las funciones comienzan con minúscula. Todo el código de la función se coloca entre llaves ( {and} ) detrás del nombre de la función, los argumentos y el tipo de datos para el valor devuelto, silo hubiera (ver explicación más abajo).

Argumentos (los “parámetros”) Los nombres de los argumentos se especifican en la definición de la función: Function createPlayerID (firstName: String, id:Number)

{ }

Se escribe una función para volver a utilizar un código Sn embargo, lo que hace exactamente una función puede cambiar cada vez que se la llama. Por ejemplo, hay una función única llamada trace(), pero el valor que traza es diferente cada vez que se la usa. Por lo tanto, ese valor se pasa como argumento. Los argumentos se vuelven variables dentro de su función. Por lo tanto, especificar un argumento es como declarar una variable. Facilite un nombre sensato y el tipo de datos adecuado. Variables locales de función Puede declarar nuevas variables dentro de su función. Si lo hace, únicamente podrán utilizarse dentro de la función y desaparecerán (se “salen del ámbito”) una vez que la función devuelve un valor o completa su trabajo de otra manera. Lo mejor es declarar las variables al comienzo de la función.

function createPlayerID (firstName :String, id:Number) {

var playerlD:String; } Las variables que se usan dentro de una función siempre deben declararse debidamente, mediante la palabra clave var y un tipo de datos. Si no se hace así, podrían crearse errores difíciles de rastrear. Código de función La mayor parte de lo que escriba serán líneas de código que utilizan la información que se pasa como argumentos, si es que la hay, y cualquier otra variable o valor que usted cree. function createPlayerID(firstName: String, id:Number) { var playerID: String; playerID = firstName + “:” + id;

}

Dentro de su function, puede llamar a cualquier función global incorporada o a cualquier otra función definida por el usuario en la misma Línea de tiempo. También puede usar casi cualquier código ActionScript que desee. Gran parte del arte y la creatividad de la programación proviene de elegir cuándo y cómo escribir las funciones. El diseño en Flash es arte visual y la programación puede ser poesía. Sentencia Retorno y tipos de dato Si su función calcula y devuelve un valor (algo que puede hacer o no), la sentencia retorno debe ser la última línea de la función. El tipo de datos de este valor se declara al final de la lista de argumentos.

function createPlayerID(firstName:String, id:Number):String

{ var playerID: String; playerID = firstName + “:” + id; return playerID;

} Cuando se ejecuta la línea de retorno, se evalúa la expresión que sigue a la palabra clave return y se devuelve el resultado al lugar donde se había Ilamado la función. En este caso, se evalúa la variable playerID y el valor que contiene se devuelve al lugar donde se llamó createPlayerlD(). Como playerlD contiene datos String, el tipo de devolución se declara como String. Si una función hace algo, pero no devuelve un valor, el tipo de devolución es Void.

function getURLbyPageName(pageName:String) :Void {

var thisURL:String = “http://www.me.com/”; thisURL = thisURL + pageName + “.htm”; getURL(thisURL); // no se necesita ni se permite una sentencia de devolución

}

¿Dónde declaro las funciones? Las funciones deben declararse en el primer fotograma de la capa acciones. Las funciones que se declaren aquí podrán usarse en cualquier fotograma, o en cualquier capa, de la Línea de tiempo actual. También podrían llamarse desde código que esté dentro de las Líneas de tiempo de instancias MovieClip anidadas. Eso lo veremos más adelante.

Ensayo 3-2: Escritura y uso de funciones definidas por el usuario En este ensayo, llevará a cabo las siguientes tareas:

• Escribir una función para sumar dos valores y devolver el total. • Trabajar con el ámbito de variable en funciones. • Usar dos sintaxis alternativas para declamar funciones en

ActionScript. Pasos

1. Cree un archivo nuevo a partir de la plantilla flas800 y guárdelo como: {Curso}\AS2.0\f1as800\walk\unit03\wt3-2.fla Declarar una función 2. Abra el panel Acciones para el fotograma 1 de la capa acciones. 3. En la sección definir funciones, escriba el esqueleto de una función denominada addNumbers.

function addNumbers () { }

4. Especifique que la función aceptará dos argumentos llamados num1 y num2, que deberán contener datos de tipo Number.

function addNumbers (num1:Number, num2 :Number) { }

5. En el cuerpo de la función, declare una variable incluida en el ámbito de la función denominada total que es igual a la suma de los dos argumentos de la función.

Recuerde que puede combinar la declaración de una variable con la asignación de un valor a ésta en una sola línea.

function addNumbers (num1:Number, num2 :Number) { var total:Number = num1 + num2; }

6. Añada una sentencia para devolver el valor de total al lugar desde donde se llamó a la función.

function addNumbers (num1 :Number, num2 :Number) {

var total:Number = num1 + num2; return tota1;

}

7. Especifique el tipo de datos del valor que debe devolverse desde la función.

function addNumbers (num1 :Number, num2 :Number):Number {

var total1:Number = num1 + num2; return tota1;

} Llamar a una función 8. En la sección declarar variables, declare una variable denominada total, de tipo Number y asígnele un valor predeterminado de 100.

var quality:Number = 100;

9. En la sección ejecutar ahora, haga un seguimiento del valor de total.

trace(total);

10. Debajo de esta línea, haga un trace del valor devuelto por su función addNumbers(), pasándole dos valores cualquiera. Recuerde que puede llamar a una función, en este caso addNumbers(), como argumento de otra función, como puede ser trace().

trace(addNumbers(2,4)); 11. Pruebe la película. Observe los resultados en el panel Salida. Probar la colisión de ámbito de variable 12. Haga un trace del total una vez más debajo de la línea en la que llamó a addNumbers().

trace (total); trace (addNumbers(2, 4)); ��

13. Pruebe la película. Observe que el valor de total sigue igual antes y después de llamar a la función. Analice con su instructor la idea de ámbito de variable.


15. Regrese a su función. Convierta en comentario la expresión existente para total y vuelva a escribirla, quitando la palabra clave var y el tipo de datos.

Cada nombre de función e instancia en el código basado en la Línea de tiempo también es una propiedad de la Línea de tiempo dentro de la cual está escrito, ya sea que se use la palabra clave this o no.

23. Cierre el archivo.

¿Por qué colocar código dentro de una línea de tiempo MovieClip? Se coloca código dentro de una Línea de tiempo MovieClip para hacerlo portátil. Uno de los conceptos más importantes que deben dominarse para aprender a usar ActionScript es también uno de los más sencillos para los diseñadores experimentados de Flash: Los símbolos MovieClip son contenedores y pueden anidarse uno dentro del otro. La Línea de tiempo del documento principal es en sí misma un símbolo MovieClip. Todo el código que hemos escrito hasta ahora se ha colocado en un fotograma clave en la primera capa de ese MovieClip en particular. Puede hacer lo mismo con cualquier otro MovieClip: coloque código en fotogramas clave en la propia Línea de tiempo de un MovieClip. El resultado es un código portátil porque el código es ahora parte del símbolo MovieClip y de sus fotogramas clave como lo es cualquier forma que haya dibujado o interpolado en esos fotogramas clave. Cada instancia de símbolo es una “copia” del plano que denominamos símbolo. Cada instancia de un símbolo ejecuta su propia Línea de tiempo de manera independiente, de forma que cualquier código de Línea de tiempo dentro de un símbolo se ejecuta independientemente para su propia instancia.

¿Qué significa this? La palabra this es una palabra clave en el lenguaje de programación ActionScript. Se puede pensar que contiene el nombre de instancia de cualquier instancia de símbolo dentro de la cual se esté ejecutando el código. Se refiere a cualquier objeto con nombre dentro del cual se está ejecutando el código. Puede tratarse de la Línea de tiempo del documento principal (que a veces se conoce como _root o _level0, algo que ya veremos más adelante) o de una instancia de algún otro símbolo que haya creado.

En casi todas las situaciones, el uso de la palabra clave this es opcional. Si no la utiliza, Flash Player supone que cualquier nombre de instancia o de propiedad que escriba debe estar en la Línea de tiempo actual: la instancia MovieClip dentro de la cual se está ejecutando el código. En la mayoría de los casos, esta suposición es correcta. Veremos algunas excepciones ante las que debemos tener cuidado durante el curso. ¿En qué se diferencian los métodos y las funciones? No mucho. Un método es simplemente una función asociada a un objeto, tanto como una propiedad es una variable asociada a un objeto. Lo que hace que los métodos sean levemente diferentes de las funciones es que, puesto que están asociados a un objeto, pueden referirse directamente a cualquiera de las propiedades de ese mismo objeto. La mayoría de las funciones de Flash Player, las herramientas que emplea para que éste haga cosas, está disponible a través de métodos a los que se llama en los objetos con distintos nombres que se crean. Por ejemplo, en cada instancia de símbolo MovieClip puede tener varias decenas de métodos distintos invocados para que haga diferentes cosas.

MovieClip es el símbolo más importante, la clase de objetos más importante, de Flash Player. Todo el código basado en la Línea de tiempo se ejecuta dentro de un símbolo MovieClip. Como acabamos de ver, puede referirse al objeto dentro del cual se está ejecutando el código a través de la palabra clave this. Así, puede invocar cualquier método y referirse a cualquier propiedad del símbolo MovieClip dentro del cual se está ejecutando el código desde casi cualquier punto de ese código. Por ejemplo, si tiene código en la Línea de tiempo que está dentro de un símbolo MovieClip y desea quitar esta instancia del símbolo del Escenario, llama al método unLoadMovie() en la instancia this.

¿Que es un operador compuesto? Una tarea que se realiza con frecuencia cuando se programa en Flash es la de cambiar el valor que ya está dentro de una variable. Puede hacerlo con éste código:

var xPositiOn:Number = 50; // incrementar el valor de xPosition en 10 agregando a // su valor actual y, a continuación asignando el resultado //otra vez a xPosition xPosition = xPosition + 10; trace(xPosition); // el panel Salida mostrará 60

Como se trata de una tarea tan común (especialmente cuando comenzamos a crear instancias MovieClip y a realizar animaciones), ActionScript tiene varios métodos abreviados denominados operadores compuestos para que podamos trabajar un poco más rápido.

operador compuesto significa lo mismo que a +=2 a = a + 2 a -=2 a = a - 2 a *=2 a = a * 2 a /=2 a = a / 2

a++ (incremento) a = a + 1 a-- (decremento) a = a -- 1

Tenga en cuenta que el signo más (+) puede significar suma o concatenación, según los tipos de datos que se encuentren a ambos lados de éste. Por lo tanto, puede realizar suma compuesta o concatenación compuesta para unir una serie completa de valores de cadena.

Ensayo 3-3: Uso de ActionScript en la propia Línea de tiempo de un MovieClip

En este ensayo, Ilevará a cabo Ias siguientes tareas: • Crear un MovieClip con su propia capa interna de acciones. • Utilizar código en fotogramas clave para controlar el estado visual de un MovieClip y la Línea de tiempo.

Pasos 1. Cree un archivo nuevo a partir de la plantilla flas800 y guárdelo como: {Cursos}\f1as800\walk\unit03\wt3-3.fla Crear un símbolo MovieClip 2. Seleccione la capa contenido. 3. En el Escenario, dibuje una forma circular de 100 por 100 píxeles sin trazo y con relleno de cualquier color. 4. Seleccione la forma y, a continuación, elija Modificar Convertir en símbolo. 5. En el cuadro de diálogo Convertir en símbolo, seleccione el tipo de MovieClip, cambie el punto de registro a centro y déle al MovieClip el nombre de FaderBall.

6. Haga clic en Aceptar. Hacer que todas las instancias se desvanezcan, se reduzcan de tamaño y desparezcan 7. Abra el panel Biblioteca y haga doble clic en FaderBall para editar su propia Línea de tiempo. 8. Cambie el nombre de la Capa 1 a contenido.

9. Inserte una nueva capa sobre la capa existente y denomínela acciones. 10. Seleccione ambas capas e inserte fotogramas hasta el fotograma 12. 11. En la capa acciones, añada fotogramas clave a los fotogramas 9, 10, 11 y 12.

12. Seleccione el fotograma 9 de la capa acciones y abra el panel Acciones. 13. Escriba código para dividir el valor actual del valor de la propiedad

_alpha de this clip por 2 y asigne el resultado como el nuevo valor _alpha.

this._alpha = this._alpha / 2; 14. Repita el paso 13 para las propiedades _xscale y _yscale.

this._xscale = this._xscale / 2; this._yscale = this._yscale / 2;

15. Copie este código. 16. Abra el panel Acciones para el fotograma 10 de la capa acciones. 17. Pegue el código que copió en el paso 15. 18. Repita los pasos 16-17 para pegar también este código en el fotograma 11. 19. Abra el panel Acciones para el fotograma 12 de la capa acciones. 20. Añada código para hacer que se detenga la Línea de tiempo.

this.stop();

21. Haga clic en la Escena 1 de la barra de información para regresar a la Línea de tiempo principal. 22. Pruebe la película. Observe que la instancia FaderBall se reduce de tamaño, pero sigue visible.

23. Cierre la ventana de prueba. 24. En la línea de tiempo de FaderBall, seleccione el fotograma 12 de la capa acciones y abra el panel Acciones. 25. Modifique el código para que en vez de detener la Línea de tiempo, pueda quitar la instancia MovieClip del Escenario.

this.unloadMovie(); 26. Haga clic en la Escena 1 de la barra de información para regresar a la Línea de tiempo principal. 27. Pruebe la película. Observe que ahora la instancia FaderBall desaparece. 28. Cierre la ventana de prueba. 29. Arrastre dos instancias FaderBall más al Escenario. 30. Utilice la herramienta Transformación libre para cambiar la altura y el ancho de cada instancia. 31. De las opciones de Color en el panel Propiedades, seleccione Alfa y aplique un valor alfa inicial diferente a cada instancia.

32 Pruebe la película, Observe que cada instancia se reduce en tamaño y se desvanece con relación a su tamaño y transparencia transformados. 33. Cierre la ventana de prueba. 34. Seleccione el fotograma 9 de la capa acciones en la Línea de tiempo del símbolo FaderBall y abra el panel Acciones. 35. Modifique el código para usar operadores de asignación compuestos.

this._alpha /= 2; this._xscale /= 2; this._yscale /= 2;

36. Guarde el archivo y pruebe la película. Observe que el comportamiento sigue siendo el mismo, a pesar de la notación reducida de asignación de compuestos. 37. Cierre el archivo.

¿Cómo cargo contenido externo? Pensar en los símbolos MovieClip como contenedores es de gran ayuda. Buena parte del tiempo, se colocan cosas en estos contenedores en tiempo de diseño antes de publicar el SWF. Se crea un nuevo símbolo, luego se dibujan las formas, se añaden fotogramas clave, se añaden interpolaciones, se anidan otros símbolos y así sucesivamente. El símbolo MovieClip en sí mismo aloja todo el contenido visual que usted crea. Pero, ¿qué pasa si usted no sabe qué va a haber en el símbolo MovieClip de antemano? ¿Y si desea cargar otra animación (un archivo SWF diferente) en función del botón presionado por el Usuario? ¿Y si las imágenes JPG que va a mostrar están determinadas por la fecha actual? En estos casos, es útil comenzar con un contenedor vacío y cargarle contenido en tiempo de ejecución. ¿Qué es un MovieClip vacío y cómo hago uno? Un MovieClip vacío es exactamente eso. Se trata de un símbolo MovieClip sin contenido. Puede hacer uno de dos maneras diferentes: en tiempo de diseño o en tiempo de ejecución. Tiempo de diseño Seleccione Insertar Nuevo símbolo. Asigne un nombre adecuado, elija MovieClip como tipo y haga clic en Aceptar. No ponga nada en el símbolo y regrese a la Línea de tiempo del documento principal. Listo. Esto funciona muy bien, siempre y cuando sepa de antemano cuántos símbolos MovieClip vacíos va a necesitar. Tiempo de ejecución: createEmptyMovieClip() ¿Y qué sucede si desconoce cuántos símbolos MovieClip va a necesitar porque la cantidad está determinada por un número aleatorio, la fecha, algunos datos externos o el número de veces que el Usuario presiona un botón? La clase MovieClip (el plano de las propiedades y métodos que tendrá cada instancia de símbolo MovieClip) incluye un método denominado createEmptyMovieClip(). Se llama a este método de esta forma:

parentMovieClip.createEmptyMovieClip(instanceName, depth); Por medio de este código se crea una instancia MovieClip vacía en la memoria, con el nombre de instancia especificado.

this.createEmptyMovieClip(“mcNewInstance”, 1);

Una vez que se ha ejecutado el código, comienza a existir una instancia denominada mcNewInstance, del mismo modo que si la hubiese creado en tiempo de diseño. Existirá como elemento anidado en this MovieClip dentro del cual se está ejecutando el código (por lo general, la Línea de tiempo del documento principal). Más tarde podrá asignarle propiedades, como si hubiese colocado esta instancia en el Escenario.

this.createEmptyMovieClip (“mcNewInstance”, 1); mcNewInstance._x = 50; mcNewInstance._rotation = 45;

¿Qué significa profundidad del MovieClip? La Profundidad es el orden de apilamiento (la z que va con sus _x e _y) de los elementos visuales dentro de una Línea de tiempo. Imagínese que cada MovieClip (incluyendo la Línea de tiempo del documento principal) es una baraja. Cada una de las cartas está a una profundidad única. Los objetos que están a una profundidad mayor cubren a los que están a una profundidad menor. Existen muchas profundidades dentro de cada capa de la Línea de tiempo. Puede existir sólo una cosa en una profundidad dada. Si crea algo en una profundidad que ya está ocupada, reemplazará lo que estaba allí.

A los elementos visuales que se crean en tiempo de diseño se les asignan automáticamente valores de profundidad negativos. A los elementos creados en tiempo de ejecución, incluyendo los MovieClips vacíos, deben asignárseles valores de profundidad positivos. En este curso aprenderemos tres maneras de crear nuevos elementos visuales a través de ActionScript: createEmptyMovíeClip(), attachMovie() y createTextField(). Cuando se crea un elemento visual con código, debe asignársele una profundidad única. En el método createEmptyMovieClip(), es el segundo argumento:

parentMovieClip.createEmptyMovieClip(instanceName, depth);

Ha creado un MovieClip, pero éste todavía está vacío. ¿Cómo cargo algo en un MovieClip vacío? loadMovie() Otro método (una función asociada con cada instancia MovieClip) práctico de MovieClip se llama loadMovie(). Este método hace que Flash Player realice una petición de un archivo externo a través del navegador Web. A continuación, Flash carga el archivo en el MovieClip en el que se llamó al método loadMovie(). Se llama a este método de esta forma:

clipToLoad.loadMovie(URL);

El método loadMovie() puede cargar los siguientes tipos de contenido.

Tipo de contenido Versión de Flash Player SWF 3 o superior JPG 5 o superior

JPEG progresivo 8 GIF sin animar 8

PNG 8 Este código carga un SWF externo en la nueva instancia creada.

this.createEmptyMovieClip (“mcNewInstance”, depth); mcNewInstance._x = 50; mcNewInstance._rotation = 45; mcNewInstance.loadMovie(“assets/grillaz.swf”);

La URL que especifique debe ser una ruta relativa dentro del mismo subdominio desde el que cargó el SWF. Para cargar contenido desde un dominio o subdominio diferentes, ese dominio debe conceder permiso explícito a su dominio para cargar contenido desde éste a través de un archivo de política crossdomain.xml, o bien el Usuario debe conceder permiso (únicamente para Flash Player 8). “Seguridad de libre configuración” de Flash Player Como regla general, Flash Player únicamente carga contenido y datos de direcciones URL que estén dentro de su propio subdominio. Si su SWF debe cargar

cosas de otro dominio o subdominio, el Usuario (únicamente en Flash Player 8) o el otro dominio o subdominio deben conceder permiso para que lo haga. Para más información, consulte lo siguiente:

• Capítulo 17, “Aspectos básicos de la seguridad,” en Aprendizaje de ActionScript 2.0 en Flash • Informe técnico sobre la seguridad de Flash Player 8, en http://www.macromedia.com/go/fp8security

Carga de MovieClip avanzada Una vez que se sienta cómodo con las técnicas que se enseñan en este curso (incluso con algunas que todavía no hemos visto), intente usar la clase MovieClipLoader para cargar contenido externo. Las instancias de esta clase difunden eventos adicionales y admiten controladores de eventos adicionales, lo que permite un control más preciso del proceso de carga del contenido que el que se logra a través de las instancias de símbolo MovieClip básicas. En la Unidad 5 de este curso estudiaremos los eventos y los controladores de eventos.

Ensayo 3-4: Creación de símbolos MovieClip con ActionsScript

En este ensayo, llevará a cabo las siguientes tareas:

• Cargar contenido externo (SWF y JPG) en una instancia de símbolo MovieClip.

Pasos



Cargue contenido en un MovieClip vacío

2. Seleccione Insertar Nuevo símbolo y cree un nuevo símbolo MovieClip denominado Container. 3. Coloque una instancia de este símbolo en el Escenario de la capa contenido con los siguientes valores:

• x 0 • y 0 • nombre de la instancia mcContainer1

4. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 5. En la sección declarar variables y nombres de instancias, declare esta instancia.

var mcContainer1:MovieClip;

6. En la sección ejecutar ahora, use el método loadMovie() para cargar el gráfico image0.jpg del directorio assets al clip contenedor.

mcContainer1.loadMovie(“.. /.. /assets/image0.jpg”);

7. Pruebe la película: debería ver la imagen.


9. En el código, edite la sentencia para cargar image()_progressive.jpg.


Si está publicando en Flash Player 7 o inferior, la imagen no aparecerá. Si está publicando en Flash Player 8, sí.


12. Edite el código para cargar image0.gif. 13. Pruebe la película. Si está publicando en Flash Player 7 o inferior, la imagen no aparecerá. Si está publicando en Flash Player 8, sí. 14. Elimine la instancia denominada mcContainer1 del Escenario y el símbolo llamado Container de la Biblioteca. Crear un MovieClip vacío utilizando código 15. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 16. En la sección declarar variables y nombres de instancias, elimine la declaración que efectuó de mcContainer1. 17. En la sección crear objetos, invoque el método createEmptyMovieClip() en la Línea de tiempo principal para crear el clip mcContainer1 a una profundidad de 1.

this.createEmptyMovieClip(“mcContainer1”, 1); 18. Pruebe la película. Observe que la imagen sigue apareciendo, porque el MovieClip creado a través del código tiene un comportamiento idéntico al clip de película creado desde el Escenario. 19. Cierre la ventana de prueba. 20. En la sección establecer valores de propiedades, asigne este clip de película a la posición x:0, y:200, y su rotación a -10.

with(mcContainer1) {

_x = 0; _y = 200; _rotation = -10;

}

21. Pruebe la película. Observe los cambios. 22. Cierre la ventana de prueba.

23. Seleccione Archivo Vista previa de publicación Predeterminada para probar su película desde el navegador Web predeterminado de Flash Player en vez de a través del Reproductor de depuración de Flash interno. 24. Cierre la ventana de prueba. Cargue contenido SWF 25. Modifique el código para cargar el archivo PulseBall.swf del directorio assets.

mcContainer1.loadMovie(“../../assets/PulseBall.swf”); 26. Pruebe la película. Observe que puede cargar contenido SWF y también contenido JPG. 27. Cierre la ventana de prueba. Cargar contenido externo (opcional) 28. Abra su navegador Web y busque cualquier imagen JPG disponible al

público. 29. Haga clic en la imagen con el botón derecho del ratón, seleccione Propiedades y copie la URL de la imagen. 30. Regrese al código y pegue esta URL en su método loadMovie().

mcContainer1.loadMovie(“http://www.macromedia.com/images/ shared/promo/264x143/maxO5_wide.jpg”);

31. Pruebe la película. Observe que aparece la imagen. 32. Cierre la ventana de prueba. 33. Seleccione Archivo Vista previa de publicación

Predeterminada para probar su película desde el navegador Web predeterminado de Flash Player en vez de a través del Reproductor de depuración de Flash interno.

Si está publicando en Flash Player 8, verá lo siguiente:

34. Haga clic en el botón Configuración y analice con su instructor este tema. 35. Guarde y cierre el archivo.

¿Cómo puedo crear nuevas instancias desde mi Biblioteca?

La herramienta de edición de Flash 8 es muy eficiente para publicar o compilar el SWF para el FLA que cree. Si no hay por lo menos una instancia de un símbolo en su Biblioteca en el Escenario, la definición de ese símbolo no se coloca en el archivo SWF. Por lo general, esto es lo correcto, puesto que no está usando ese símbolo y así se reduce el tamaño del archivo. Pero. ¿qué pasa si desea crear una instancia de ese símbolo a través de ActionScript? Si quiere crear nuevas instancias de un símbolo MovieClip en tiempo de ejecución, debe indicarle a la herramienta de edición de Flash 8 que coloque el símbolo en su archivo SWF, aun cuando no esté usándolo en ningún lugar del Escenario.

¿Cómo hago que los símbolos MovieClip estén disponibles en tiempo de ejecución?

Para que un símbolo MovieClip esté disponible en tiempo de ejecución, deberá exportarlo para ActionScript. Para ello:

1. Haga clic en el símbolo en la Biblioteca con el botón derecho del ratón.

2. Seleccione Vinculación. 3. Active la casilla de verificación Exportar para ActionScript. 4. Asigne un Identificador.

Si bien puede usar casi cualquier nombre para su Identificador, éste se establecerá como predeterminado con el mismo nombre que su símbolo. No lo cambie. Lo mejor es usar el nombre de la Biblioteca como Identificador (por eso se establece como predeterminado). Tener un Identificador diferente del nombre del símbolo genera confusión y le obliga a buscar con detenimiento en esta pantalla si llega a olvidar el nombre, en vez de simplemente echar un vistazo al panel Biblioteca.

¿Cómo puedo crear una instancia de un MovieClip exportado? attachMovie() La clase MovieClip admite un método denominado attachMovie() que crea una instancia nueva de su símbolo y lo asocia a la instancia MovieClip en la que usted haya llamado al método (con frecuencia, la Línea de tiempo del documento principal).

this.attachMovie(“Identifier”, “instanceName”, depth); Una vez que ha llamado a este método, la instancia aparecerá en el Escenario en _x:0 e _y:0 y tendrá el nombre de instancia y la profundidad que usted le dé. Después, podrá hacer lo que desee con la instancia, estableciendo sus propiedades. Por ejemplo, si ha exportado un MovieClip denominado Box con Box como su Identificador, podría hacer lo siguiente:

this.attachMovie(“Box”, “mcBox”, 1); with (mcBox) {

_x = 50; _y = 100; _rotation = 45;

}

¿Cómo decido que nombre de instancia usar? Los requisitos en cuanto a los nombres de instancias son los mismos que los de las variables: únicamente letras y números (más _ y $), no se puede comenzar con un número y no puede haber espacios. Habiendo dicho esto, cabe recordar que es útil utilizar una convención de asignación de nombres. Con frecuencia, puede declarar un nombre de instancia y su tipo de datos cerca de la parte superior de su código y luego hacer referencia a éste algunas líneas más abajo o cientos de líneas más abajo. Resulta práctico que su nombre de instancia incluya información sobre lo que contiene. Una convención de asignación de nombres posible sería la adopción de un prefijo que indicara el tipo de datos, seguido del nombre del símbolo y del recuento numérico de esta instancia si es que puede haber más de una. Por lo tanto, la primera instancia de un símbolo MovieClip denominado Box, sería mcBox1. Algunos prefijos de uso común:

Prefijo Tipo de datos Mc MovieClip Txt TextField Btn Button A Array O Object

Ensayo 3-5: Creación de MovieClips de la Biblioteca en tiempo de ejecución


• Exportar un símbolo MovieClip de la Biblioteca para utilizar en ActionScript en tiempo de ejecución.

• Ver lo que sucede con el tamaño del archivo cuando exporta un símbolo para ActionScript.

• Examinar la naturaleza de la propiedad profundidad.

Pasos



2. Seleccione la capa contenido. 3. Dibuje una forma rectangular sencilla en el Escenario, de cualquier tamaño y color. 4. Seleccione el trazo y relleno y, a continuación, elija Modificar Convertir en símbolo.

5. Cree un símbolo con los siguientes valores:

• Nombre: Box • Tipo: MovieClip • Registro: esquina superior izquierda

6. Haga clic en Aceptar. Exportar para ActionScript

7. Elimine la instancia del Escenario para que éste quede vacío. 8. Pruebe la película. 9. En la ventana de prueba, seleccione Ver Visor de anchos de banda. Observe el tamaño de la película cargada, aunque vacía.

10. Cierre la ventana de prueba. 11. Coloque una instancia de Box en e! Escenario y vuelva a probar la película. El tamaño de su archivo dependerá de la complejidad de su símbolo Box.

12. Cierre la ventana de prueba. 13. Coloque dos instancias más del símbolo Box en el Escenario. 14. Pruebe la película una tercera vez. Observe que el tamaño del archivo apenas si ha crecido.

15. Cierre la ventana de prueba. 16. Elimine las tres instancias de Box en el Escenario. 17. Abra el panel Biblioteca, haga clic con el botón derecho del ratón en el símbolo MovieClip Box y seleccione Vinculación.

18. En el cuadro de diálogo Propiedades de vinculación, active la casilla de verificación Exportar para ActionScript. 19. Deje el identificador predeterminado, que tendrá el mismo nombre que el nombre de biblioteca de este MovieClip para evitar confusiones. 20. Haga clic en Aceptar para cerrar el cuadro de diálogo. 21. Pruebe la película. Observe que el tamaño del archivo es casi tan grande como si hubiese colocado una instancia en el Escenario. Esto se debe a que la definición del símbolo se ha exportado como parte del archivo SWF para su uso en ActionScript. 22. Cierre la ventana de prueba. 23. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones.

Crear y modificar instancias de símbolo en tiempo de ejecución

24. En la sección crear objetos, utilice el método attachMovie() para crear una nueva instancia del símbolo Box, denominada mcBox1 en una profundidad 1.

this.attachMovie(“Box”, “mcBox1”, 1); 25. Pruebe la película. Observe que mcBox1 aparece en la esquina superior izquierda, en x:0 e y:0. 26. Cierre la ventana de prueba. 27. En la sección establecer valores de propiedades, asigne a mcBox1 una posición y una rotación diferentes.

with(mcBox1) {

_x = 150; _y = 100; _rotation = 45;

}

28. En la sección crear objetos, cree una segunda instancia de Box denominada mcBox2, a una profundidad 2.

this.attachMovie(“Box”, “mcBox2”, 2);

29. Pruebe la película. Observe las posiciones de cada una de las instancias y analice por qué están allí y cómo las movería. 30. Cierre la ventana de prueba. 31. Modifique el código para que mcBox1 se cree en una profundidad 2, igual que mcBox2. 32. Pruebe la película; debería ver el siguiente error:

Error: A ‘with’ action failed because the specified object did not exist. A una profundidad dada, sólo puede existir una instancia, mientras que aquí mcBox2 en la profundidad 2 sobrescribió y destruyó a mcBox1 en la profundidad 2 antes de que se ejecutara el operador with:

33. Cierre la ventana de prueba. 34. Restaure el código para que mcBox1 se cree en la profundidad 1. 35. Guarde y cierre el archivo.

¿Cómo genero una función para crear mis MovieClips?

Cuando comience a hacer animaciones en Flash basadas en código para crear juegos e interfaces para aplicaciones, tal vez desee escribir una función definida por el usuario para crear sus propias instancias MovieClip. Esto le simplificará la tarea de crear numerosas copias de un símbolo (tal vez dentro de un bucle, como veremos más adelante).

¿Cómo me aseguro de que cada una de las instancias esté en una profundidad única?

Como ya vimos, si crea o asocia un nuevo clip en una profundidad que ya estaba ocupada, estará borrando lo que había allí. Puede haber solamente un elemento visual en una profundidad dada. Flash Player puede ayudarnos a hacer un seguimiento de los valores de profundidad. getNextH ighestDepth() Si bien usted puede inventar maneras de hacer un seguimiento de los valores de profundidad, Flash Player lo hace por usted. Si llama al método getNextHighestDepth() en un clip de película (inclusive la Línea de tiempo del documento principal), devolverá el próximo valor de profundidad disponible por encima de cero. Aunque es difícil de leer, puede escribir código como el que sigue para crear un MovieClip nuevo vacío en una profundidad única. De la misma manera en que las funciones pueden llamarse como argumentos de otras funciones, los métodos pueden Ilamarse como argumentos de otro método. this.createEmptyMovieclip(“mcNew”,this.getNextHighestDepth()); No obstante, este estilo de codificación no es bueno: conduce a la escritura de líneas de código largas y difíciles de leer. A medida que pasa el tiempo es más fácil mantener el código si éste es fácil de leer, aun cuando esto signifique que deba agregarse una línea o dos y crearse una variable nueva de denominación sensata. Hoy por hoy, los equipos son tan rápidos y tienen tanta memoria que el agregado minúsculo al tamaño de un archivo que implican algunas líneas más de código no tiene un impacto mensurable en el rendimiento. Lo mejor es hacer hincapié en la legibilidad del código.

var newDepth:Number = this.getNextHighestDepth(); this.createEmptyMovieclip(“mcNewInstance”, newDepth); mcNewInstance._x = 50; mcNewInstance._rotation = 45; mcNewInstance.loadMovie(“assets/grillaz.swf”);

¿Los nombres de propiedades y de instancias pueden ir dentro de una variable?

A primera vista, lo que vamos a aprender puede parecer extraño y hasta arbitrariamente complicado. Sin embargo, se trata de una técnica de programación muy útil y esencial para la escritura de una función de creación de un MovieClip. Crear referencias dinámicamente

Como ya hemos visto, las propiedades son variables asociadas a un nombre de instancia. Contienen valores que describen las características de la instancia en particular a la que pertenecen. Por lo general, el nombre de instancia y el nombre de propiedad están separados por el operador punto(.).

mcBox1._x = 50; txtFirstName.text = “Sammy”;

Asimismo, ya hemos visto cómo podemos crear y asociar instancias MovieClip como secundarias a otro MovieClip (generalmente la Línea de tiempo del documento principal). Por ejemplo, si llamamos a attachMovie() en this MovieClip en el que está escrito el código, la nueva instancia es secundaria a this MovieClip. This es el clip principal y mcBox1 es el nuevo elemento secundario. Observe que los nombres van separados por el operador (.), como si el nombre de instancia fuera una propiedad de this.

this.attachMovie(“Box”, “mcBox1”, 1); // si bien suele omitirse this porque se lo da por supuesto // no significa que no pueda escribirlo this.mcBox1._x = 50; this.mcBox1._rotation = 45;

Las variables, los nombres de instancias y los nombres de propiedades son todos únicamente nombres que señalan a algún valor en la memoria. A veces, ese valor es una Cadena y podemos denominar al nombre variable o propiedad (como la propiedad de texto de un TextField). A veces, ese valor es un MovieClip, en cuyo caso denominamos al nombre nombre de instancia.

En Flash, en vez de usar un operador punto (.) para separar cosas, puede usar corchetes ([ ]) y referirse al nombre de propiedad o nombre de instancia como un literal de Cadena entre comillas.

mcBox1._x = 50; - or –

mcBox1[“_x”) = 50; mcBox1._rotation = 45;

- or - mcBox1[“_rotation”] = 45;

mcBox1._alpha = 70;

- or – this.mcBox1._alpha = 70;

- or – this[“mcBox1”]._alpha = 70;

Observe con detenimiento el tercer ejemplo de arriba. Se hace referencia a mcBox1 como propiedad de this. Si desea usar sintaxis con corchetes con un nombre de instancia, debe hacer referencia a su objeto principal (con frecuencia la Línea de tiempo del documento principal, a la que se hace referencia como _root o, mejor aun como this). La siguiente sintaxis no funcionará.

[“mcBox1”]._alpha = 70; En cambio, la sintaxis debería verse así: this[“mcBox1”]._alpha = 70;

El fin último de usar sintaxis con corchetes en vez de sintaxis con puntos, cuando se hace referencia a nombres de propiedades o a nombres de instancias, es que puede colocar una variable dentro de los corchetes. Flash evaluará la variable, buscando una Cadena dentro de ésta y, a continuación, usará ese valor para determinar a qué nombre de instancia o de propiedad se está refiriendo. Esto se denomina creación dinámica de referencias. Esto le permite hacer referencia a un nombre de propiedad a través de una variable.

var propertyName:String = “_alpha”; mcBox1[propertyName] = 70; - significa lo mismo que – mcBox1[“_alpha”] = 70; - significa lo mismo que – mcBox1._alpha = 70;

También puede hacer referencia a un nombre de instancia a través de una variable (siempre y cuando haga referencia a su elemento principal, por lo general utilizando el operador this).

var instanceName:String = “mcBox1”; this[instanceName]._alpha = 70;

- significa lo mismo que – this[“mcBox1”)._alpha = 70;

- significa lo mismo que – this.mcBox1._alpha = 70;

- significa lo mismo que –

mcBox1._alpha = 70; //this sólo es opcional con notación con puntos // [“mcBox1”]._alpha = 70 no funcionará

¿Para qué podría servirme ese dato críptico?

Cuando escriba una función para crear instancias MovieClip, deseará pasar a la función los valores iniciales de las propiedades (y posiblemente un nombre de instancia) como argumentos. Los argumentos son variables.

Si crea múltiples instancias nuevas MovieClip en tiempo de ejecución (para eso lo estaría haciendo como función) no sabrá sus nombres de instancia de antemano. Deberá crear esos nombres de instancia en código, no en el panel Propiedades, lo que significa que estarán dentro de una variable.

function makeBox(thisName:String, x:Number, y:Number) :Void {

var thisDepth:Number = this.getNextHighestDepth(); this.attachMovie(“Box”, thisName, thisDepth); this[thisName]._x = x; this[thisName]._y = y;

} var instanceName:String = “mcBox1”; makeBox(instanceName, 50, 100);

Ensayo 3-6: Creación de objetos visuales a través de una función definida por el usuario


• Escribir una función definida por el usuario para encapsular todo el código necesario para crear una instancia MovieClip y establecer sus valores predeterminados en una sola llamada a función.

Pasos

1. Abra wt3-5.fla y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit03\wt3-6.fla 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones.

2. Elimine todo el código existente en las secciones crear objetos y valores de propiedades.

3. En la sección definir funciones, escriba el esqueleto de una función

denominada makeBox. Esta función se usará para crear y ubicar nuevas instancias del símbolo Box.

function makeBox() { }

4. Declare argumentos a su función denominados thisName, thisX,

thisY y thisRotation con tipos de datos apropiados.

Cada instancia debe tener un nombre de instancia único y queremos tener la capacidad de concederle a cada instancia valores x, y, y de rotación bien diferenciados.

function makeBox(thisName:String, thisX:Number, thisY:Number, thisRotation:Number) { }

6. Establezca el tipo de datos de retomo de la función en Void. function makeBox(thisName:String, thisX:Number, thisY:Number, thisRotation:Number):Void { }

7. En su función, declare una variable denominada thisDepth de tipo Number y utilice el método getNextHighestDepth() para asignarlo al siguiente número de profundidad disponible en esta Línea de tiempo.

function makeBox(thisName:String, thisX:Number, thisY:Number, thisRotation:Number) { var thisDepth:Number = this.getNextHighestDepth();

}

8. Asocie una nueva instancia de Box al Escenario, usando el argumento thisName para este nombre de instancia y thisDepth para su profundidad.

function makeBox(thisName:String, thisX:Number, thisY:Number, thisRotation:Number) {

var thisDepth:Number = this.getNextHighestDepth(); this.attachMovie(“Box”, thisName, thisDepth);

} 9. Utilice el argumento thisName para hacer referencia dinámicamente a la instancia recién creada y establezca los valores de x, y, y de la propiedad rotación por medio de estos argumentos.

function makeBox(thisName:String, thisX:Number, thisY:Number, thisRotation:Number) {

var thisDepth:Number = this.getNextHighestDepth(); this.attachMovie(“Box”, thisName, thisDepth); this[thisName]._x = thisX; this[thisName]._y = thisY; this[thisName)._rotation = thisRotation;

} 10. En la sección ejecutar ahora, llame tres veces a su función, utilizando cada vez un nombre de instancia diferente y diferentes x, y, y rotación.

makeBox(“mcBox1”, 10, 10, 10); makeBox(“mcBox2”, 20, 20, 20); makeBox(“mcBox3”, 30, 30, 30);

11. Guarde el archivo y pruebe la película Piense en los patrones visuales que podría crear llamando a esta función varias veces y pasando distintos conjuntos de propiedades. ¿Cómo establecería otras propiedades?

12. Cierre la ventana de prueba y también el archivo.


• Las funciones llaman a código que puede volver a usarse y pueden devolver un valor. • El código de línea de tiempo se ejecuta cuando se reproduce su fotograma clave. • La palabra clave this tiene el significado del objeto dentro del cual está el código. • Las variables de línea de tiempo y de función están en diferentes ámbitos. • Las propiedades son variables asociadas con una instancia. • Los métodos son funciones asociadas con una instancia. • Cada instancia tiene una profundidad única en su Línea de tiempo. • La Línea de tiempo del documento principal es un MovieClip. • Los archivos SWF y JPG externos se cargan (loadMovie()). • Los símbolos exportados se asocian (attachMovie()). • Los nombres de instancia pueden ser dinámicos (dentro de una variable).

Repaso de la unidad

1. ¿Cuál es la diferencia entre una función y un método? 2. ¿Cuál es la diferencia entre un argumento y un parámetro? 3. ¿Qué paso debe realizar antes de utilizar el método attachMovie() para crear una nueva instancia de símbolo MovieClip desde su Biblioteca? 4. ¿Deben ser diferentes su identificador de vinculación y el nombre

del símbolo? 5. ¿Cuál es el tipo de datos de retorno de una función que no devuelve nada?

6 ¿Qué significa this?

Laboratorio 3: Creación y control de instancias MovieClip a través de ActionScript En este laboratorio, llevará a cabo las siguientes tareas: • Crear un MovieClip RotationBox que se anime a través del código que está dentro de su Línea de tiempo. • Crear y utilizar una función definida por el usuario que cree instancias de este símbolo en tiempo de ejecución en cualquier posición que usted especifique. Objetivos Después de completar este laboratorio, usted podrá:

• Comprender La ejecución de código en fotogramas clave de Línea de tiempo. • Cambiar las propiedades de MovieClip en tiempo de ejecución. • Escribir funciones que acepten y usen argumentos. • Crear instancias MovieClip en tiempo de ejecución. • Hacer referencia a objetos a través de una variable utilizando la creación dinámica de referencias.

Pasos 1. Abra flas800_Iab2.fla y guárdelo como:

{Cursos}\AS2.0\flas800\lab\flas800_lab3.fla Combinar ActionScript con animación de Línea de tiempo 2. Cree un nuevo símbolo MovieClip denominado RotationBox. 3. En su Línea de tiempo, cambie el nombre de la capa 1 a contenido. 4. En la capa contenido, dibuje un cuadrado de 50 por 50 píxeles, sin trazo y rellénelo del color que desee. 5. Centre esta forma directamente sobre el punto de registro del símbolo.

6. Siempre en la Línea de tiempo RotationBox, añada una nueva capa por encima de la capa contenido y denomínela acciones. 7. Seleccione el fotograma 1 de esta capa y abra el panel Acciones. 8. Escriba código para añadir 10 al valor actual de la propiedad_rotation de esta instancia de RotationBox.

9. Vuelva a la Línea de tiempo del documento principal. 10. Arrastre una instancia de RotationBox desde el panel Biblioteca al Escenario. 11. Guarde y pruebe la película. Observe que, si bien la instancia de RotationBox se ha rotado 10 grados desde el centro, todavía no gira. 12. Cierre la ventana de prueba. 13. En el panel Biblioteca, haga doble clic en RotationBox para activar el modo de edición de símbolos. 14. Seleccione el fotograma 2 de las capas acciones y contenido presionando mayúsculas y, a continuación, haga clic con el botón derecho del ratón y seleccione Insertar fotograma.

15. Guarde y prueba la película. Observe que, ya que la cabeza lectora en RotationBox ahora se está desplazando por el fotograma 1, el código de rotación aumenta el valor de la propiedad _rotation cada vez que se reproduce el fotograma. Esto hace que su instancia gire de forma visible. 16. Cierre la ventana de prueba. 17. Vuelva a la Línea de tiempo del documento principal. 18. Elimine la instancia de RotationBox del Escenario. Escribir una función para generar instancias MovieClip 19. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 20. En la sección definir funciones, declare una nueva función denominada createRotationBox que acepte tres argumentos: thisX:Number, thisY:Number y thisName:String y establezca el tipo de devolución como Void.

function createRotationBox(thisX:Number, thisY:Nuinber, thisName:String) :Void { }

21. En el cuerpo de la función, declare una nueva variable denominada nextDepth de tipo Number. 22. Asigne el valor nextDepth, invocando el método getNextHighestDepth() de la Línea de tiempo del documento principal (this). function createRotationBox(thisX:Number, thisY:Number,thisName:String):Void { var nextDepth:Number = this.getNextHighestDepth(); }

23. A continuación de este código, utilice el método attachMovie() de la Línea de tiempo del documento principal (this) para crear una nueva instancia de RotationBox, denominada con el valor que se haya pasado como thisName en el valor de nextDepth. function createRotationBox(thisX:Number, thisY:Number,thisName:String):Void {

var nextDepth:Number = this.getNextHighestDepth(); this.attachMovie(“RotationBox”, thisName, nextDepth);

} 24. En la sección ejecutar ahora, llame a su función, pasando 50, 50 y el valor de Cadena mcRotationBox1 como argumentos.

createRotationBox(50, 50, “mcRotationBoxl”); 25. Guarde y pruebe la película. Observe que no aparece ninguna instancia de RotationBox. 26. Cierre la ventana de prueba. 27. En el panel Biblioteca, haga clic en RotationBox con el botón derecho del ratón y seleccione Vinculación. 28. En el cuadro de diálogo Propiedades de Vinculación, active la casilla de verificación Exportar para ActionScript y no cambie el Identificador. 29. Guarde y pruebe la película. Observe que aparece una instancia que gira arriba del todo en la esquina superior izquierda. 30. Cierre la ventana de prueba. 31. En la sección definir funciones, escriba código para asignar los valores de argumento thisX y thisY a las propiedades _x e _y de la instancia que acaba de crear. Use sintaxis de creación dinámica de referencias para hacer referencia a esta nueva instancia a través de la variable denominada thisName, que utilizó para asignarle su nombre de instancia.

function createRotationBox(thisX:Number, thisY:Number, thisName:String):Void {

�� ;

} 32. En la sección ejecutar ahora, llame a su función dos veces más, pasando cada vez diferentes valores para thisX, thisY y thisName.

createRotationBcx(50, 50, mcRotationBoxl); createRotationBox(150, 150, “mcRotationBox2”); createRotationBox(250, 250, “mcRotationBox3”);

33. Guarde el archivo y pruebe la película. Observe que aparecen 3 instancias animadas en las posiciones de _x e_y especificadas. 34. Cierre la ventana de prueba y también el archivo.

UNIDAD 4: Utilizar texto, matemática y rutas Objetivos de la unidad

Después de completar esta unidad, usted podrá: • Crear instancias (objetos) de clases visuales y no visuales. • Crear nuevas instancias TextField mediante ActionScript. • Crear instancias de la clase TextFormat. • Recuperar y mostrar información de la fecha/hora del sistema usando la clase

Date. • Comprender y utilizar operadores compuestos para la concatenación de

Cadenas • Generar números aleatorios o enteros dentro de los rangos deseados. • Comprender las líneas de tiempo anidadas y cómo moverse por las rutas

entre ellas. Temas de la unidad

• ¿Qué es un objeto? • ¿Cómo obtengo la fecha y la hora? • ¿Cómo puedo generar números aleatorios? • ¿Cómo me comunico con cosas que están en otro MovieClip?

¿Qué es un objeto? Desde la versión, Flash ha evolucionado para convertirse en un entorno de programación orientada a objetos. El punto de partida para comprender la programación orientada a objetos (OOP) es un poco de terminología con la que usted ya estará familiarizado porque viene usándola. aunque sea en pequeñas proporciones, desde la Unidad 2. En esta unidad, profundizaremos algo más en los términos y luego continuaremos empleándolos en este curso, Variable Una variable es un nombre que señala datos en la memoria. El tipo de datos que se señalan puede ser una Cadena, un Número o un valor Booleano. También puede tratarse de datos más complejos, como un clip de película, un campo de texto, un botón, una matriz o alguna otra instancia de algo más.

Función Una función es un fragmento de código con nombre que puede volver a usarse. Puede aceptar argumentos o no. Los argumentos son nombres que señalan datos que se pasan a la función para personalizar lo que hace cada vez que se la llama. Los argumentos no son más que otro tipo de variable. Propiedad Una propiedad es una variable que se asocia con un objeto en particular. Los valores a los que señalan las propiedades de un objeto son lo que lo hacen único y diferente de cualquier otra instancia de la misma clase de objetos. Desde que comenzó a utilizar Flash, ha estado trabajando con propiedades, asignando sus valores en el panel Propiedades y en otros lugares. En este curso, también ha aprendido a asignarlas a través de código. Las propiedades pueden considerarse los adjetivos y sustantivos que describen lo que tiene un objeto en particular. Método Un método es una función que se asocia con un objeto en particular. Como está asociada con el objeto, sabe de todas las propiedades de este objeto. Los métodos son lo que permiten que los objetos se hagan cosas a sí mismos (como asociarse una instancia MovieClip) o hagan cosas a otras coas (como solicitar que se cargue en el navegador una página Web diferente). Los métodos pueden considerarse los verbos que hacen posible lo que hace un objeto. Instancia (“objeto”) La definición clásica dice: “Un objeto es una instancia de una clase”. Cada vezque arrastra un símbolo MovieClip. Cada vez que utiliza attachMovie(), el resultado es un objeto. Los términos instancia y objeto pueden intercambiarse entre sí. Algo que puede confundir es que Flash( y otros lenguajes OOP) tiene una clase que se denomina Object. En Flash la usamos bastante, como veremos en la unidad 6. Por lo tanto, es posible tener “un objeto de la clase Object ”. En esta unidad, aprenderemos como crear objetos no visuales de clases incorporadas en el Flash Player. En la última unidad, creó objetos visuales de la clase MovieClip mediante los métodos createEmptyMovieClip() y attachMovie().

Clase Una clase es un plano. Es una descripción de todas las características y comportamientos que puede tener una clase de objetos en particular y de lo que puede hacer. Para ser más exactos, es un plano de todas las variables y funciones que van a asociarse con cada instancia de esta clase. Una vez que las variables están asociadas. Se llaman propiedades. Y una vez que las funciones están asociadas, se llaman métodos. Los métodos saben de las propiedades del objeto con el que están asociados. Por convención, los nombres de las clases siempre van en mayúscula. En Flash, tenemos clases de objetos como MovieClip, TextField, String, Number, Boolean, Array, etc. También puede escribir sus propias clases personalizadas en ActionScript, aunque eso va más allá del alcance de este curso. Todo diseñador de Flash experimentado ha trabajado con clases durante mucho tiempo, sólo que las ha estado denominando símbolos. Un símbolo MovieClip, por ejemplo, no es más que un plano en la Biblioteca de cómo se verán sus instancias en el escenario. Sin embargo, cada instancia sigue siendo diferente.Son diferentes el valor de sus propiedades _x e _y, además de su profundidad. Asimismo, puede transformar cada instancia con una _rotation o _alpha diferentes, etc.

¿Cómo puedo crear una instancia (un “objeto”) de una clase en particular?

La forma de crear instancias de una clase (crear un objeto de una clase en particular) es diferente en Flash, dependiendo de si el objeto es visual o no.

Los objetos visuales(Buttons, MovieClips y TextFields) se crean en tiempo de diseño o en tiempo de ejecución, usando métodos de MovieClip en ActionScript.

Los objetos que no se ven se crean usando la siguiente sintaxis general: Var instanceName:ClassName = new ClassName();

Clase Como se crea la instancia

Button

Nuevo Símbolo o Convertir en Símbolo luego, se arrastra al escenario

MovieClip

Nuevo Símbolo o Convertir en Símbolo luego, se arrastra al escenario -o- this.createEmptyMovieClip() this.attachMovie() this.duplicateMovieClip()

TextField Herramienta Texto -o- This.createTextField()

TextFormat Date

Transform ColorTransform

Sound Array Object

var instanceName:ClassName = new ClassName

Clases estáticas Hay una cuarta categoría de clases denominada clases estática Una clase estática es aquella en la que únicamente puede haber uno de lo que represente, por lo tanto no tiene sentido crear una nueva instancia ya que todas serían iguales.

Un buen ejemplo de esta clase es la clase Math, que ya hemos usado y que usaremos nuevamente en esta unidad. Las constantes matemáticas no cambian nunca, como tampoco cambia la fórmula para calcular un coseno. No tiene ningún sentido crear una nueva instancia de esta clase porque no habrá nada especial en ella. Las clases Key, Stage, Mouse y otras más se comportan de manera semejante.

¿Cómo doy formato a un TextField?

Para dar formato a un TextField mediante ActionScript, se usa la clase TextFormat. Clase TextFormat

Las instancias de la clase TextFormat(los objetos TextFormat) tienen propiedades que corresponden a valores que está acostumbrado a establecer en el panel Propiedades para cualquier TextField, Por ejemplo:

• Color • Fuente • Negrita • Alinear • Interlineado • … y varias propiedades más.

Flash le permite crear objetos TextFormat para que no tenga que establecer todas estas propiedades en cada TextField y así pueda crear un conjunto de “reglas” de formato, que podrá aplicar a numerosos campos de texto. La creación de un objeto TextFormat y la asignación de sus valores puede hacerse así:

var tfInputStyle:TextFormat = new TextFormat(); tfInputStyle.font = “Courier”; tfInputStyle.bold = true;

setTextFormat(), método Los objetos TextField tienen un método denominado setTextFormat(). Al pasar un objeto TextFormat a este método, está aplicando el formato definido en el objeto a párrafo entero del texto que ya está dentro del TextField en el que llma al método.

var tfInputStyle:TextFormat = new TextFormat(); tfInputStyle.font = “Courier”; tfInputStyle.bold = true; //da format al texto que ya está en txtUserName

txtUserName.setTextFormat(tfInputStyle); También puede aplicar formato a una parte más pequeña del párrafo, como puede ser un carácter o un rango de caracteres, pasando a este método valores de índice de los caracteres inicial y final. Consulte la Ayuda para obyener más detalles.

setNewTextFormat(), método Si pasa un objeto TextFormat a setNewTextFormat(), definirá el formato de texto nuevo insertado en este campo después de que haya aplicado el formato. //da formato a texto nuevo que el usuario puede haber escrito en txtUserName

txtUserName.setNewTextFormat(tfInputStyle);

ENSAYO 4-1: Aplicar formato a TextField mediante ActionScript En este ensayo, llevará a cabo las siguientes tareas:

• Modificará las instancias TextField en tiempo de ejecución usando un objeto TextFormat

Pasos

1. Abra wt2-4.fla y guárdelo como: {Cursos}\AS2.0\flash800\walk\unit04\wt4-1.fla

2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones 3. Convierta en comentario o elimine todo el código en las secciones establecer

valores de propiedades y ejecutar ahora. Crear un Objeto TextFormat 4. En la sección crear objetos, cree una nueva instancia de la claseTextFormat denominada thisFormat.

var thisFormat:TextFormat = new TextFormat(); 5. En la sección establecer valores de propiedades, asigne las siguientes propiedades:

with (thisFormat) {

align = “right”; bold = true; italic = true; color = OxFF0000; size = 18; font = “Arial”;

} 6. En la sección ejecutar ahora, utilice el método setTextFormat() para aplicar estas reglas de formato a txtFieldl1

txtField1.setTextFormat(thisFormat);

7. Pruebe la película. Observe el formato que ha aplicado. 8. Cierre la ventana de prueba. Aplicar formato al texto en tiempo de ejecución 9. Extienda ambas capas del documento hasta el fotograma 36. 10. Inserte fotogramas clave en la capa acciones en los fotogramas 12 y 24.

11. Seleccione el fotograma 12 de la capa acciones y abra el panel Acciones. 12. Aplique thisFormat a txtField2.

txtField2 . setTextFormat(thisFormat);

13. Seleccione el fotograma 24 de la capa acciones y abra el panel Acciones. 14. Aplique thisFormat a txtField3.

txtField3.setTextFormat(thisFormat);

15. Guarde el archivo y pruebe la película. Observe que el objeto de formato de texto está disponible para usarlo en los fotogramas 12 y 24, aun cuando se creó en el fotograma 1.

¿Por qué no se restablece el formato cuando la cabeza lectora vuelve a reproducir el fotograma 1?


¿Cómo puedo crear TextFields usando código? La clase MovieClip tiene un método denominado createTextField(), que permite asociar un nuevo objeto TextField al clip de película con el tamaño. la ubicación y el nombre de instancia especificados. La línea de tiempo del documento principal no es más que otro MovieClip. Por lo tanto, puede invocar este método en this or root (algo que veremos más adelante) en el código de la línea de tiempo para añadir un TextField al Escenario. createTextField(), método Este método asocia un nuevo TextField al Escenario dentro de cualquier MovieClip en el cual se lo llame.

this.createTextField(”instanceName”, depth, x, y, widh, height) Una vez que se ha creado el TextField, establece sus propiedades y le puede dar formato con un objeto TextFormat como si estuviese en el Escenario.

this.createTextField(”txtFirstName”, 1, 50, 100, 100, 30);

var tfInputStyle:TextFormat = new TextFormat(); tfInpuStyle.font = “Courier”; tflnputStyle.bold = true;

type, propiedad La propiedad type (propiedad de tipo) de cualquier objeto TextField — dibujado o creado por medio de código— determina si se trata de un campo de Introducción de texto o de un campo Dinámico (lnput TextField o Dynamic TextField).

txtFirstName.type = “input”; // or “dynamic” txtFirstName. setTextFormat (tfInputStyle);

Como veremos en un próximo ensayo, esta técnica para la creación de TextFields mediante código es muy práctica cuando el nombre y el número de los campos de texto que se necesitan provienen de datos introducidos por el Usuario o de otros datos. Si únicamente está creando un formulario, no cabe duda de que es más sencillo dibujar el TextField en tiempo de diseño.

Ensayo 4-2: Crear TextFields mediante ActionScript En este ensayo, llevará a cabo las siguientes tareas: • Crear instancias TextField en tiempo de ejecución. • Modificar las propiedades de MovieClip en tiempo de ejecución. Pasos 1. Vuelva a wt4-1.fla y guárdelo como: {Cursos}\AS2.0\flas800\walk\unit04\wt4-2.fla 2. Seleccione las tres instancias TextField y elimínelas del Escenario. 3. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 4. Convierta en comentario o elimine las tres declaraciones de nombres de instancias TextField de la sección declarar variables y nombres de instancias. 5. En la sección crear objetos, cree tres nuevas instancias TextField en la línea de tiempo principal utilizando los mismos nombres de instancias que declaró en el ensayo anterior y asígneles a cada uno valores de profundidad, x, y, altura y ancho únicos.

this.createTextField(”txtFieldl”, 1, 20, 40, 200, 30); this.createTextField(”txtField2”, 2, 20, 70, 200, 30); this.createTextField(”txtField3”, 3, 20, 100, 200, 30);

6. En la sección establecer valores de propiedades, asígnele texto a cada TextField recién creado.

txtFieldl.text = “High Score One”; txtField2.text = “High Score Two txtField3.text = “High Score Three;

7. Guarde el archivo y pruebe la película. Observe que el comportamiento sigue siendo el mismo que en el ensayo anterior, excepto que desaparece el formato, pero se le vuelve a aplicar cada vez que la cabeza lectora regresa al fotograma 1. Analice esto con su instructor. 8. Cierre la ventana de prueba y también el archivo.

¿Cómo obtengo la fecha y la hora? El Flash Player le permite consultar la fecha y hora actuales al milisegundo. También admite la hora universal (UTC, que antes se llamaba hora de Greenwich) y le permite calcular la diferencia entre distintas fechas y horas. Clase Date Los objetos Date (instancias de la clase Date) contienen la fecha y hora actuales según informa el navegador Web al Flash Player. También puede configurarlos para representar de forma específica una fecha pasada o futura, lo que puede ser de utilidad al calcular la diferencia entre dos fechas u horas. Cada objeto Date es diferente porque... el tiempo se nos escapa hacia el futuro... Es por eso que deberá crear uno nuevo cada vez.

var instanceName:Date = new Date(); var dtNow:Date = new Date(); trace(“the day of the Month is: + dtNow.getDay());

get/set, métodos En la programación orientada a objetos es muy común que las clases tengan métodos específicos para establecer ciertas propiedades de un objeto y para obtener propiedades desde un objeto. Hay muy buenas razones inteligentes por las que es práctico contar con estos métodos de acceso y mutación (como podrían llamarlos los fanáticos de los equipos de bolsillo), en vez de tener que hacer referencia directa a las propiedades, pero no merece la pena preocuparse por ellas aquí. Los objetos Date tienen métodos y todos devuelven valores numéricos basados en una “instantánea” de la hora real en el navegador al momento en que se crea el objeto Date. • getDate(): día del mes (del 1 al 31)

• getDay(): día de la semana (el 0 es domingo)

• getFullYear(): año de 4 dígitos (como 2005)

• getMonth(): mes como un número (0 es enero)

• getHours(): hora como un número (0 es medianoche, 23 es 11pm)

• getSeconds(): segundos como número (0 a 59)

• getMilliseconds(): milisegundos como número (0 a 999)

Los objetos Date también tienen métodos para establecer o asignar cualquiera de estos valores: setDate() setMonth(), setFullYear(), etc. Puede personalizar un objeto Date en particular para que represente una fecha y una hora en especial, tanto en el pasado como en el futuro. También admiten la hora universal (UTC, que antes se llamaba hora de Greenwich) y compensaciones por el horario de verano. Consulte la Ayuda para obtener más detalles. ¿Cómo puedo dar formato a la fecha (por ejemplo: “10/07/2005”)? Concatenación de compuestos Ya hemos analizado los operadores compuestos: métodos abreviados para cambiar un valor que ya estaba dentro de una variable. Como ya vimos, el operador += admite concatenación de compuestos además de suma de compuestos.

var timeString:String = “The time is: var dtNow:Date = new Date(); timeString = timeString + dtNow.getHours();

- significa lo mismo que - timeString += dtNow.getHours();

Si tiene varios valores para ensamblar como Cadena, esto puede ahorrarle mucho trabajo. Por ejemplo, si necesita una fecha con formato de mes/fecha/año, podría ensamblarla de esta manera:

var txtDate:TextField; var datestring:String = “”; var dtNow:Date = new Date(); dateString += dtNow.getMonth() + “/”; datestring += dtNow.getDay() + “/”; datestring += dtNow.getFullYear(); txtDate.text = dateString; // podría mostrar 10/07/2005

¿Por qué cuesta tanto obtener “10/07/2005”? Una buena razón por la cual Flash Player es el software y entorno de programación más distribuido en la historia del hombre (algo que es un hecho estadístico certero: consulte http:www. macromedia.com/software/player_census/flashplayer) es que es ligero y se descarga rápidamente. Por eso, si puede crear una función “auxiliar” por sí mismo, no estará incorporada en Flash Player. Por medio de las técnicas que ya ha aprendido, puede escribir la siguiente función (código que puede volver a usarse) para dar formato a la fecha en el lugar en el que la necesite.

function formatDate(thisDate:Date) :String {

var dateString:String = ””; dateString += thisDate.getMonth() + “/”; datestring += thisDate.getDay() + “/”; dateString += thisDate.getFu11Year(); return dateString;

} var txtDate : TextField; var dtNow:Date = new Date(); txtDate.text = formatDate(dtNow);

Ensayo 4-3: Ensamblar la información de fecha y hora En este ensayo, llevará a cabo las siguientes tareas:

• Crear una instancia de los objetos Date y usarla para mostrar la información actualizada de la fecha.

• Calcular su propia edad en años. Pasos

1. Abra wt4-1.fla y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit04\4-3.fla

2. Seleccione los fotogramas 2 a 36 de las capas acciones y contenido, haga clic con el botón derecho del ratón y seleccione Quitar fotogramas.

Declarar y utilizar un objeto Date

3. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones.

4. En la sección declarar variables y nombres de instancias, declare una variable String denominada dateString con el valor predeterminado de una cadena vacía.

var dateString:String = “ ”;

5. En la sección crear objetos, cree una nueva instancia de la clase Date denominada thisDate.

��

6. En la sección establecer valores de propiedades, utilice el método getMonth() para asignar el mes numérico al dateString, seguido de una barra diagonal.

dateString = thisDate.getMonth() + “/”

7. Haga un seguimiento de dateString.

8. Pruebe la película. Observe que el mes se compensa con uno, puesto que los valores de meses numéricos que brindan los objetos Date comienzan en cero.

9. En la sección establecer valores de propiedades, añada 1 al valor devuelto por el método getMonth(). Utilice paréntesis para definir el orden de operación.

dateString = (thisDate.getMonth() + 1) + “/”

10. Pruebe la película. Observe que ahora el mes aparece normalmente.


Usar asignación de compuestos para la concatenación

12. Después de haber hecho un seguimiento con código de dateString, utilice el método getDate() para añadir la fecha numérica a dateString seguida de una barra diagonal. Use la asignación de compuestos para que el nuevo valor se concatene al valor actual.

datestring = (thisDate.getMonth() + 1) + “/”; trace (dateString) dateString += thisDate.getdate() +“/”;




16. Después del segundo seguimiento de dateString, utilice el método getFullYear()

para añadir el año numérico al dateString. Use la asignación de compuestos. dateString += thisDate.getFullYearO;


18. Pruebe la película; debería ver el siguiente error: **Error** Scene=Scene 1, layer=actions, frame=l:Line 40: El tipo de la declaración de asignación no coincide, se encontró un número donde se necesitaba una cadena.

dateString += thisDate.getFullYear();


Conversión de valores numéricos en cadenas para la visualización 20. En el código, use la función de conversión String() para convertir el resultado

numérico devuelto por el método getFullYear() en Cadena. dateString += String(thisDate.getFullYear());

21. Asigne dateString al txtFieldl1 con propiedad de texto. 22. El código completo que ha creado hasta este momento en el ensayo debería

verse así: dateString = (thisDate.getMonth() + 1) + “/”; trace (datestring); dateString += thisDate.getDate() + “/”; trace (dateString); dateString += String(thisDate.getFullYear()); trace (dateString); txtField1.text = dateString;

23. Pruebe la película. Observe la cadena de fecha con formato.

24. Cierre la ventana de prueba. Crear y utilizar objetos Date de una fecha específica

25. En la sección crear objetos, cree un nuevo objeto Date llamado birthDate.

var birthDate:Date = new Date();

26. En la sección establecer valores de propiedades, utilice los métodos, setDateü, setMonth() y setYear() para asignar su fecha de nacimiento a este objeto. Recuerde compensar el valor del mes (por ejemplo: enero sería O. mayo sería 4).

with (birthDate) {

setMonth(4) setDate(7); setYear(1966)

} 27. Debajo de este código, escriba una expresión que calcule su edad y la muestre en pantalla en txtField2, precedida por la cadena “Mi edad es:”. Utilice paréntesis para asegurarse de que se haya calculado la edad antes de concatenar las palabras al resultado. txtField2.text = “My age is:” + (thisDate.getFullYear() - birthDate.getFullYear()); 28. Guarde el archivo y pruebe la película. Observe el resultado.


¿Cómo puedo generar números aleatorios? Sobre todo para la creación de juegos, resulta útil generar números aleatorios y enteros (los números tienen comas decimales, los enteros, no). Podemos hacer esto con la clase Math. Clase Math La clase Math es un tipo especial de clase, de la que ya hemos hablado, denominada clase estática. Las clases estáticas representan cosas que no cambian nunca, como la matemática. El valor de Pi está determinado por las leyes de la naturaleza y siempre lo estará. La fórmula de cálculo de un logaritmo no cambia de un día para el otro, ni de un segundo para el otro, como sí lo hace un objeto Date. No hay necesidad de crear un objeto nuevo cuando se utiliza una clase estática. Para hacer referencia a las propiedades y métodos de esa clase, se usa el nombre de la clase y no el nombre de ninguna instancia.

var matMyMath:math =new Math(); var circumference:Number = Math.PI * (2*radius);

Método random() Uno de los métodos de la clase Math se denomina random(). Este método devuelve un número aleatorio (en lenguaje técnico, un número “pseudoaleatorio”) desde el 0 hacia arriba, pero sin incluir el 1. O sea, desde el 0 hasta el 0,9999999999999999.

var randomNumber:Number = Math.random()

Método round() La clase Math también tiene un método denominado round(), que redondea el valor numérico que se le transfiere como argumento al número entero más próximo.

var randomNumber:Number = Math.random(); // lo siguiente devolvería 0 ó 1 dependiendo de si randomNumber es // mayor o menor que 0,5 var randomlnteger:Number = // Math.round(randornNumber);

¿Cómo genero números dentro de un rango de valores? Multiplique el valor aleatorio por el rango que desee y obtendrá valores de 0 al multiplicador. Si quiere un entero, redondee el resultado. A continuación, sume o reste números del resultado para que el rango comience por encima o por debajo de 0.

// random number 0 through 0.9999999999999999 var randomNumber:Number = Math.random(); // número aleatorio en un rango de 0 a 9,999999999999999 var randomRange:Number = Math.random() * 10; // entero aleatorio en un rango de 0 a 10 var randomInteger:Number = Math.round(Math.random() * 10); // entero aleatorio en un rango compensado de -255 a 255 var random0ffset:Number = Math.round(Math.random() * 510) - 255;

Ensayo 4-4: Generar números aleatorios


• Crear números de coma flotante (decimales) aleatorios dentro de un rango especificado, utilizando los métodos estáticos de la clase Math.

• Redondear los valores numéricos a enteros. Pasos 1. Cree un archivo nuevo a partir de la plantilla flas8OO y guárdelo como:


2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones.

3. Declare las siguientes variables en la sección pertinente del código: var randomDecimal:Number; var randomNumber:Number; var randomlnteger:Number; var randomOffset:Number;

Calcular números aleatorios en un rango seleccionado 4. En la sección establecer valores de propiedades, llame al método randon() de la clase Math y asigne el resultado a randomDecimal. No se crea una instancia de la clase Math antes de usarla porque las constantes matemáticas (aplicadas como propiedades) y las fórmulas (aplicadas como métodos) no cambian nunca.

randomDecimal=Math.random();

5. Haga un seguimiento de randomDecimal. 6. Pruebe la película. 7. Pruebe la película varias veces más, pulsando repetidamente Ctrl+Enter mientras está abierta la ventana de prueba. 8. Cierre la ventana de prueba. 9. En la sección establecer valores de propiedades, multiplique randomDecimal por 10, asigne el resultado a randomNumber y, a continuación, haga un seguimiento de esa variable.

randomNumber = randomDecimal * 10; trace (randomNumber);

1 0. Pruebe la película. Observe que, al multiplicar el decimal aleatorio por un entero, obtiene números aleatorios dentro del rango que ha elegido. 11. Pruebe la película varias veces más, pulsando repetidamente Ctrl+Enter mientras está abierta la ventana de prueba. 12. Cierre la ventana de prueba.

Redondear valores decimales a valores enteros

13. En la sección establecer valores de propiedades, use el método round() de la clase Math para redondear el valor de randomNumber y asignar el resultado a randomlnteger. randomInteger = Math.round(randomNumber);

14. Haga un seguimiento de randomInteger.

1 5. Pruebe la película.

1 6. Pruebe la película varias veces más, pulsando repetidamente Ctrl+Enter mientras está abierta la ventana de prueba. Observe la relación entre estos valores y cuáles se redondean hacia arriba o hacia abajo.


18. En la sección establecer valores de propiedades, sume 5 al valor randomlnteger y asigne el resultado a randomOffset. Verá el resultado compensado en un rango de 5 a 15.

randomOffset = randomInteger + 5;

19. l-Iaga un seguimiento de randomOffset.

20. Guarde el archivo y pruebe la película.

21. Pruebe la película varias veces más, pulsando repetidamente Ctrl+Enter mientras está abierta la ventana de prueba.


¿Cómo me comunico con cosas que están en otro MovieClip? Los MovieClips son contenedores o “burbujas” llenas de otras cosas. Puede considerarse que todo lo que esté dentro de un MovieClip y que tenga un nombre es una propiedad de ese MovieClip, ya sea que se trate de variables, nombres de instancias, propiedades o nombres de métodos. De todas maneras, debe aprender cómo hacer referencia al objeto con nombre que está dentro del MovieClip, a través de una palabra clave. _root Se trata de una palabra clave que siempre hace referencia a la línea de tiempo del documento principal del archivo SWF que se está ejecutando en el Flash Player. _level0 Se trata de una palabra clave que significa lo mismo que _root y que Flash usa internamente cuando le presenta información de depuración. Cuando vea level0 en un mensaje de error generado por el Reproductor de depuración de Flash, piense en _root. Es posible que algunos contenidos estén en _level1, level2 u otros niveles. No obstante, esto no es necesario casi nunca y se escapa del alcance del presente curso. _parent Se trata de una palabra clave que hace referencia a la Línea de tiempo Movieclip en la que está anidado el código que la está usando. Si necesitara hacer referencia a una Línea de tiempo MovieClip que encierra la línea de tiempo principal, escribiría _parent._ parent, y así sucesivamente. this Ya hemos analizado la palabra this. La palabra clave this hace referencia a la línea de tiempo MovieClip dentro de la cual se está ejecutando el código. Muchas veces no es necesario usar this porque se supone que cualquier nombre que escriba pertenece a this, ya sea que escriba esta palabra clave en frente de éste o no. Sin embargo, en algunas situaciones, sí hace falta. Por ejemplo, en la creación dinámica de referencias (que vimos en la Unidad 3) o en algunos casos de escritura de archivos de clase personalizados (algo que no veremos en este curso). nombre de instancia Huelga decir que siempre puede hacer referencia a un MovieClip en particular que haya creado en la Línea de tiempo del documento principal o anidado dentro de otro MovieClip por su nombre de instancia.

¿No hay algún gráfico que me aclare esto?

¿Cómo se ve una ruta absoluta? (no es práctica recomendada)

¿Cómo se ve una ruta relativa? (práctica recomendada)

¿Para qué sirve hacer referencia a objetos que están en otras líneas de tiempo? Lo mejor que puede hacer es escribir código en la menor cantidad de lugares posible. En este curso, recomendamos enfáticamente la colocación de todo el código en el primer fotograma de la capa superior (siempre que se pueda). Es importante saber cómo comunicarse con objetos anidados dentro de otros MovieClips desde esa posición, si es posible, a través de rutas relativas. Por ejemplo, desde la capa acciones en la Línea de tiempo del documento principal, puede cambiar el _alpha de mcBall3 por medio de este código.

bigBox.nestedBox.mcBall3._alpha = 70;

Si nestedBox tuviese un TextField adentro, podría escribir texto allí. O también podría cargar un archivo SWF externo en mcBall4.

bigBox.nestedBox.txtFirstName.text = “Ginger”; otherBox.mcBall4.loadMovie(”assets\PulseBall.swf”);

Puede hacer referencia a cualquier cosa que necesite con un código fácil de hallar y mantener, centralizado en una ubicación en la línea de tiempo del documento principal.

¿Por qué las rutas relativas son más seguras que las absolutas? Las rutas relativas (las que comienzan con _parent, this o un Nombre de instancia) siempre se prefieren a las rutas absolutas (las que comienzan con _root o con _IeveI0). Esto se debe a que _root siempre significa la línea de tiempo del documento principal que está dentro del Flash Player en este mismo momento. Por lo tanto, si el archivo SWF se carga en otro SWF (utilizando el método loadMovie()), cambia el significado de _root y, de un momento a otro, se rompe el código entero.

_Iockroot, propiedad Una de las posibilidades para evitar los problemas que surgen cuando se usa _root es escribir lo siguiente en la parte superior del código en la línea de tiempo del documento principal en su archivo FLA:

_lockroot = true; A través de este procedimiento, se cambia el significado de _root en este documento, para que siempre haga referencia (esté “bloqueado” en este punto) a la línea de tiempo en la que ha escrito la sentencia anterior, aun cuando el SWF se cargue en otro SWF. La opiniones sobre si esto es buena idea o no están muy divididas. Lo mejor sigue siendo utilizar rutas relativas, lo que permite prescindir de _Iockroot.

Ensayo 4-5: Comprender las líneas de tiempo anidadas y de sus rutas En este ensayo, llevará a cabo las siguientes tareas:

• Crear MovieClips anidados.

• Usar rutas relativas para explorar las relaciones entre las instancias MovieClip

principales y secundarias.

Pasos 1. Abra wt4-5_start.fla y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit04\wt4-5.fla 2. Abra el panel Biblioteca y coloque una instancia de LinearBox en la capa contenido. 3. En el panel Propiedades, asigne a este objeto el nombre de instancia box. 4. En el panel Biblioteca, haga doble clic en el símbolo Container para editar su Línea de tiempo. 5. Seleccione la capa box dentro de este símbolo. 6. Coloque una instancia de LinearBox en la capa box en el centro del fotograma negro. 7. Llame a este objeto Box dentro del símbolo Container box. 8. Haga clic en Escena 1 para volver a la línea de tiempo del documento principal. 9. Arrastre una instancia de Container desde la Biblioteca y colóquela en la capa contenido. 10. A esta instancia, déle el nombre de container.

11. Seleccione el fotograma 1 de la capa acciones en la línea de tiempo del documento principal y abra el panel Acciones. 12. En la sección establecer valores de propiedades, asigne a box una _rotation de 45.

box.rotation = 45;

13. Pruebe la película. Observe qué instancia de box gira. 14. Cierre la ventana de prueba. 15. Debajo del código anterior, asigne a container una _rotation de 45.

box._rotation = 45; container._rotation = 45;

16. Pruebe la película. Observe que container ha girado, junto con su contenido. 17. Cierre la ventana de prueba. 18. Convierta el código anterior en comentario y asigne a la instancia de box dentro de container una _rotation de 45.

// box._rotation = 45; //container._rotation = 45; container.box._rotation = 45;

19. Pruebe la película. Observe que solamente ha girado box dentro de container.


21. En el panel Biblioteca, haga doble clic en el símbolo Container para editar su

Línea de tiempo.

22. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 23. Asigne al _parent de Container un _alpha de 30.

_parent._alpha = 30; 24. Pruebe la película. Observe que la película entera está parcialmente

transparente.


26. Convierta el código anterior en comentario y asigne a la instancia de box en el

_parent de esta instancia de Container un _alpha de 30. // _parent._alpha = 30; _parent.box._alpha = 30;

27. Guarde el archivo y pruebe la película. Observe que solamente la caja en la línea de tiempo del documento principal está parcialmente transparente: nada más. 28. Cierre el archivo.

Resumen de la unidad • Un objeto es la instancia de una clase.

• Los Objetos se crean en forma visual o a través de código.

• Insertar --> Nuevo símbolo

• createEmptyMovieClip()

• createTextField()

• Los objetos TextFormat dan formato a los objetos TextField.

• Los objetos Date informan sobre el momento actual o sobre una fecha que usted

establezca.

• Math es una clase estática de funciones y constantes (propiedades) útiles.

• var integer0to10:Number= Math.round(Math.random() * 10);

• Un objeto hace referencia a propiedades o métodos de otro a través de una ruta

absoluta o relativa.

Repaso de la unidad

1. ¿Qué es un objeto?

2. ¿Cuál sería la analogía de una clase?

3. ¿Cómo se da formato a TextField a través de código?

4. ¿Cuál es la diferencia entre campos de texto de introducción de texto y campos de texto dinámicos (lnput TextField y Dynamic TextField) cuando se crean mediante código?

5. ¿Cuál es el número del primer día de la semana, la primera hora del día, el primer minuto de la hora, el primer segundo del minuto y el primer milisegundo del segundo?

6. ¿Qué es una clase estática y cómo se usan sus propiedades y métodos?

7. ¿ _root y _parent pueden hacer referencia a la misma Línea de tiempo MovieClip alguna vez?

Laboratorio 4: Visualización de información sobre la fecha en TextFields creados y ubicación aleatoria de instancias MovieClip En este laboratorio, llevará a cabo las siguientes tareas:

• Mostrar información sobre la fecha en un TextField cuya instancia haya creado dentro del símbolo Playerlnfo. • Crear un objeto TextFormat y aplicarlo a todos su texto dinámico. • Modificar la función createRotationBox() para ubicar aleatoriamente cada cuadro (box) creado dentro de rangos calculados.

Objetivos

Después de completar este laboratorio, usted podrá: • Utilizar instancias de la clase Date. • Usar concatenación y asignación de compuestos. • Crear Textfields en tiempo de ejecución. • Dar formato a TextFields creados dinámicamente. • Asignar propiedades a objetos secundarios dentro de otros objetos. • Generar enteros aleatorios dentro de un rango elegido.

Pasos 1. Abra flas800_Iab3.fla y guárdelo como:

{Cursos}\AS2.0\flas800\lab\flas800_lab4.fla Dar formato a la fecha 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 3. En la sección declarar variables y nombres de instancias, declare una nueva variable String denominada dateString y asígnele el valor predeterminado de una cadena vacía.

var dateString:String = “”; 4. En la sección crear objetos, cree una instancia de un objeto Date denominada dtNow.

var dtNow:Date = new Date(); 5. Inmediatamente después de este código, utilice concatenación y asignación de compuesto (+=) para insertar el mes actual en dateString y añada 1 al mes.

dateString += dtNow.getMonth() + 1; 6. Use asignación de compuestos para añadir una barra diagonal (/) a dateString, seguida de la fecha.

dateString += dtNow.getMonth() + 1; dateString += “/” + dtNow.getDate();

7. Use otra asignación de compuestos para añadir otra barra diagonal (/) a dateString, seguida del año completo.

datestring += ”/” + dtNow.getMonth() + 1; datestring += ”/” + dtNow.getDate(); dateString += ”/” + dtNow.getFullYear();

8. Haga un trace de dateString. 9. Guarde la película y pruébela. Asegúrese de que esté viendo la fecha actual correcta. 10. Cierre la ventana de prueba. Crear TextFields en tiempo de ejecución 11. Convierta en comentario su función trace() 12. Vuelva a una vista de panel en la que pueda ver el Escenario. 13. En el panel Biblioteca, haga doble clic en Playerlnfo para entrar en su línea de tiempo. 14. Seleccione Ventana --> Información para abrir el panel Información. 15. Coloque el cursor del ratón a la derecha de txtPlayerScore para determinar las coordenadas _x e _y en las que debe añadirse un nuevo TextField. 16. Escriba esta posición:

x: ________ y: ________ 17. Salga del modo de edición de símbolos y regrese a la línea de tiempo del documento principal. 18. En la sección crear objetos, use el método createTextField() de su MovieClip mcPlayerlnfo para crear un campo de texto dinámico de 100 píxeles de anchura por 20 píxeles de altura en las coordenadas determinadas arriba.

mcPlayerlnfo.createTextField(”txtPlayerDate”, 1, 450, 0, 100, 20);

19. En la sentencia with existente que asigna valores a mcPlayerlnfo, añada código para mostrar el valor de dateString en este nuevo TextField txtPlayerDate dentro de mcPlayerlnfo.

with (mcPlayerlnfo) { _x = 150; _y = 460; txtPlayerName.text = firstName + “ ” + lastName; txtPlayerscore.text = playerScore; txtPlayerDate.text = dateString; }

20. Guarde la película y pruébela. Observe que la fecha actual se muestra en texto simple sin formato en la parte inferior derecha del escenario, donde acaba de crear un nuevo TextField mediante código. 21. Cierre la ventana de prueba. Dar formato al texto en tiempo de ejecución 22. En la sección crear objetos, cree una instancia de un objeto TextFormat denominada tfPlayerlnfo.

var tfPlayerlnfo:TextFormat = new TextFormat();

23. En la parte superior del código, en la sección establecer propiedades, asigne los siguientes valores al nuevo objeto TextFormat:

• fuente: Arial • tamaño: 16 • color: 0xFF9900 • negrita: true with(tfplayerlnfo) { font = “Arial”; size = 16; color = OxFF9900; bold = true; }

24. En la sentencia with existente que asigna valores a mcPlayerlnfo, invoque el método setTextFormat() en mcPlayerlnfo para asignarle este objeto que aplica formalo a txtPlayerName, txtPlayerScore y txtPlayerDate, todos objetos secundarios de mcPlayerlnfo.

with (mcPlayerlnfo) { _x = 150; _y = 460; txtPlayerName.text = firstName + “ ” + lastName; txtPlayerScore.text = playerScore; txtplayerDate.text = dateString; txtPlayerName.setTextFomiat(tfplayerlnfo); txtPlayerScore.setTextFormat(tfPlayerlnfo); txtPlayerDate.setTextFormat(tfPlayerlnfo); }

25. Guarde la película y pruébela. Observe el formato que se ha aplicado a cada campo, los dos creados en tiempo de diseño y el que acaba de crear en tiempo de ejecución. 26. Cierre la ventana de prueba. Ubicar instancias MovieClip asociadas aleatoriamente 27. En la sección declarar funciones, elimine los argumentos thisX y thisY de su función createRotationBox(). 28. En la función, declare una nueva variable denominada thisX y asígnele un entero generado aleatoriamente que esté entre 0 y la anchura del Escenario (700). 29. A continuación, declare thisY y asígnele un entero aleatorio entre 0 y la altura del Escenario (500).

function createRotationBox(thisName:String):Void { var nextDepth:Number = this.getNextHighestDepth(); var thisX:Number = Math.round(Math.random() * 700); var thisX:Number = Math.round(Math.random() * 500); this.attachMovie(”RotationBox”, thisName, nextDepth);

this[thisName]._x = thisX; this[thisName]._y = thisY; }

30. En la sección ejecutar ahora, modifique las tres invocaciones de esta función para quitar los valores que ha pasado en cada una como thisX y thisY.

createRotationBox (“mcRotationBoxl”); createRotationBox (“mcRotationBox2”); createRotationBox (“mcRotationBox3”);

31. Guarde la película y pruébela. 32. Pulse Ctrl+Enter para volver a cargar la película varias veces. Observe el rango de posiciones asignadas a los tres objetos RotationBox. Observe que a veces parecen estar parcialmente fuera del escenario a causa de sus ubicaciones asignadas aleatoriamente. 33. Cierre la ventana de prueba. 34. En la función createRotationBox(), modifique las expresiones que calculan thisX y thisY para que ninguna pueda ser nunca inferior a 50 ni mayor que 50 menos que la anchura o altura del Escenario. Para hacer esto, reste 100 de la dimensión multiplicada y vuelva a sumar 50.

var thisX:Number = Math.round(Math.random() * 600) + 50; var thisY:Nurnber = Math.round(Math.random() * 400) + 50;

35. Guarde el archivo y pruebe la película. 36. Pulse Ctrl+Enter varias veces (incluso puede mantener las techas pulsadas para que se repita la operación) para ver las posiciones asignadas. Ahora los cuadros ya nunca deberían cortarse por los bordes del escenario. 37. Cierre la ventana de prueba y también el archivo.

Unidad 5: Comprensión y gestión de eventos Objetivos de la unidad

Después de completar esta unidad, usted podrá: • Comprender la programación manejada por eventos. • Escribir métodos de controlador de eventos para las clases incorporadas. • Comprender los dos enfoques de la gestión de eventos, y la razón por la que uno es el mejor. • Pasar datos de Flash mediante los parámetros de URL. • Controlar una línea de tiempo del símbolo de MovieClip. • Responder a los eventos de selección TextField.

Temas de la unidad

• ¿Qué es un evento? • ¿Cómo se puede controlar una línea de tiempo de MovieClip? • ¿Cómo sé dónde está seleccionado mi usuario?

¿Qué es un evento? Los eventos son señales que se difunden dentro de flash PIayer cuando se lleva a cabo una serie de acciones impulsadas por el sistema y el usuario. Una gran parte de la programación que se realiza en Flash consta de la escritura de código que se ejecuta cuando un objeto especificado difunde un evento determinado. Dicho código se denomina controlador de eventos. ¿Qué es un controlador de eventos? Los controladores de eventos son métodos, funciones asociadas a un objeto. Cuando Flash Player halla uno de estos métodos asociados a un objeto, automáticamente llama al método cada vez que el objeto difunde el evento especificado (cada vez que el evento se produce “en” el objeto). La sintaxis, por lo general, tiene el siguiente aspecto:

instanceName.onEventName = function():Void { // event code written here }

Los nombres del método del controlador de eventos para las clases incorporadas Flash Player siempre empiezan con “on” y están asociados con el objeto que difunde el evento que le interesa gestionar.

¿Dónde coloco el código de un controlador de eventos?

Existen tres enfoques generales sobre la escritura de controladores de eventos:

• Basado en el símbolo (no aconsejable): Código asociado directamente con un objeto visual y escrito en un controlador de evento “on”. • Basado en la línea de tiempo (recomendado): El código se escribe en los métodos del controlador de eventos en el primer fotograma de la capa principal. • Archivo de clase (no se describe en este curso): El código se escribe en los archivos de clase externos asociados con los símbolos de la Biblioteca.

Basado en el símbolo (controladores de eventos “on”) Si selecciona un objeto del escenario, abra el panel Acciones; el código que escriba se asociará específicamente con ese objeto. Todos los códigos que se escriban de este modo deben colocarse en una función de controlador on, y los eventos específicos que se controlarán deben establecerse como un argumento de esta función. Cuando el objeto difunde uno de estos eventos, se ejecutará el código en la función de controlador on. La sintaxis, por lo general, tiene el siguiente aspecto:

on(event name) {

// event code written here }

Observe detenidamente el panel Acción para ver dónde se inserta su código. Este tipo de controlador de eventos no funcionará si se escribe en la línea de tiempo.

No se aconseja este enfoque sobre la gestión de eventos: existen otras alternativas mejores. Aunque al principio intuitivo, este enfoque del control de eventos rápidamente provoca que el mantenimiento de los archivos FLA sea difícil y de alto costo, ya que los fragmentos del código terminan dispersándose por todo el documento. La práctica más aconsejable para cualquier entorno de programación es mantener el código en la menor cantidad de ubicaciones posibles. Controladores de eventos basados en la línea de tiempo. La práctica recomendada para la gestión de eventos (si no utiliza el desarrollo basado en clases) es escribir los controladores de eventos específicos del objeto en el código basado en la línea de tiempo. Como se ha descrito anteriormente, la sintaxis, por lo general, tiene el siguiente aspecto:

instanceName.onEventName = function():Void {

// event code written here }

Gran parte de las clases incorporadas poseen métodos de controlador de eventos, que se encuentran en la caja de herramientas Acciones.

En la mayoría de los casos, distintas clases admiten los mismos eventos y controladores de eventos. Por ejemplo, los objetos Button y MovieClip admiten los controladores de eventos onPress y onRelease. Los objetos Button. MovieClip y TextField admiten los controladores de eventos onSetFocus y onKillFocus. Puntos clave referentes a los controladores de eventos basados en la línea de tiempo. Un método de controlador de eventos basado en la línea de tiempo es una función asignada al nombre del controlador de eventos deseado. Existen tres puntos importantes que se deben recordar:

• Salvo en algunos casos, los métodos de controlador de eventos no reciben argumentos. (Una de las excepciones es el controlador de eventos onLoad de la clase LoadVars.) • El tipo de devoluciones de los métodos de controlador de eventos es siempre Void. Los controladores de eventos representan el tipo de funciones que realizan una acción, pero no devuelven nada. • La palabra clave this, cuando se utiliza en un método de controlador de eventos, hace referencia al objeto que difundió el evento. Es necesaria si se escribe una ruta relativa desde el controlador de eventos a la línea de tiempo principal de los objetos.

var box1:MovieClip; rotateButton.onPress = function():Void {

this._parent.box1._rotation = 45; }

¿Cómo se solicita una URL a través de Flash? getURL() function getURL() es una función global que se puede llamar en cualquier lugar dentro del código. La sintaxis, por lo general, tiene el siguiente aspecto:

getURL(URL [, window]);

Esta función logra que Flash Player solicite una nueva página a través del navegador Web que está ejecutando en el interior, del mismo modo que se había activado la etiqueta de anclaje HTML. Dado que getURL() es una función global y no un método asociado con algún objeto, no necesita especificar un nombre de instancia antes de utilizarlo. El segundo argumento opcional es similar al atributo de destino de una etiqueta de anclaje HTML y acepta los siguientes valores:

• _self: reemplaza la página Web actual al mostrar esta película Flash. • _blank: carga la página en una nueva ventana del explorador • _parent: carga la página en el elemento principal del fotograma actual, en caso de que se utilicen fotogramas. • _top: carga la página en el fotograma principal del conjunto de marcos actuales, en caso de que se utilicen fotogramas.

¿Cómo pasar datos desde Flash a un servidor de aplicaciones? Flash Player admite diferentes modos de pasar datos por la red, incluyendo:

• Parámetros de URL: como un GET del formulario HTML • Servicios Web: Estándares del sector WSDL y SOAP • Flash Remoting: Protocolo de alta velocidad de formatos de mensaje de la acción (AMF) • XMLSocket: Conexión de red bidireccional con estado

Parámetros de URL Los parámetros de URL son pares de nombre =valor delimitado por el carácter arnpersand al final de una dirección Web (una URL). La lista de parámetros se denomina cadena de consulta y comienza con un solo símbolo de interrogación (?).

ColdFusion, PHP, JSP, Java Servlets, ASP, ASP.Net, Perl y prácticamente las demás plataformas del servidor de aplicaciones Web pueden leer y utilizar la información que se envía de esta manera. Es posible que algunos exploradores Web limiten la longitud total de la URL, logrando que otros

enfoques (como los servicios Web) representen una mejor solución en lo referente al envío de datos largos o complejos.

Ensayo 5-1: Desde los controladores de eventos basados en el símbolo a controladores basados en fotogramas

En este ensayo, llevará a cabo las siguientes tareas: • Escribir un controlador de eventos basado en el símbolo para una instancia Button que concatena el ingreso desde los TextFields de dos entradas en un TextField dinámico. • Migrar el código desde un controlador de eventos ubicado en una instancia del símbolo hasta un controlador de eventos basado en fotogramas. • Modificar el código para enviar la introducción de texto como parámetros a una URL solicitada.

Pasos 1. Abra el archivo wt5-1_start.fla, y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit05\wt5-1.fla 2. Asigne los siguientes nombres de instancia a los TextFields de dos entradas, al TextField dinámico único y a la única de instancia de símbolo Button.

Crear un controlador de eventos basado en el símbolo 3. Seleccione el botón btnSubmit y abra el panel Acciones. 4. Observe el título del panel Acciones.

5. En el cuadro de herramientas Acciones, seleccione Funciones globales

Control del clip de película activado, arrástrelo hasta la página y especifique liberar como el evento que se capturará.

6. En el cuerpo del controlador de eventos basado en el símbolo, escriba el código para concatenar el texto en txtInput1 y txtlnput2 y muestre el resultado en txtDisplay. on (release) {

txtDisplay.text = txtInput1.text + txtInput2.text; } 7. Pruebe la película. 8. Escriba el texto en ambos campos de introducción, pulse el botón y observe el resultado. 9. Cierre la ventana de prueba. Crear un controlador de eventos basado en fotogramas y migrar el código 10. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 11. Observe el título del panel Acciones.

12. Coloque el cursor del ratón en la sección gestión de eventos del código y haga clic en la herramienta Insertar ruta de destino.

13. En el cuadro de diálogo Insertar ruta de destino, seleccione el botón de opción Relativo y btnSubmit y, después, pulse Aceptar.

Esto proporciona una referencia relativa a btnSubmit en el código.

14. Abra la caja de herramientas Acciones. 15. Seleccione Clases de ActionScript 2.0 Película Botón Controladores de eventos onRelease y arrastre este método de controlador de eventos basado en fotogramas hasta el código, inmediatamente después de haber agregado la referencia a btnSubmit.

16. En la ventana Navegador de script, haga clic en Enviar, <btnSubmit> para ver el código en la instancia de botón.

17. Corte la línea de código desde el controlador de eventos basado en el símbolo. 18. Elimine el código restante del controlador de eventos basado en el símbolo. 19. Utilice la ventana Navegador de script para regresar a las acciones: Fotograma 1, y pegue este código en el cuerpo del método de controlador de eventos basado en fotogramas.

20. Pruebe la película; observe que se produce la misma gestión de eventos tanto para el código basado en fotogramas como para el código basado en el símbolo. 21. Cierre la ventana de prueba. 22. Convierta el código en el controlador de eventos basado en fotogramas. Enviar la entrada del usuario como parámetros a una URL 23. Regrese a una vista del panel para ver el escenario. 24. Cambie el nombre de instancia del primer TextFieid de entrada por txtFirstName, y el nombre de instancia del segundo TextField de entrada por txtLastName. 25. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 26. En la sección declarar los nombres de instancia y variables, declare los nombres de instancia de todos los objetos en el escenario.

var txtFirstName:TextField; var txtLastName:TextField; var txtDisplay:TextField; var btnSubmit : Button;

27. A continuación, declare una nueva variable de cadena denominada targetURL con un valor predeterminado de http ://www.macromedia.com.

var targetURL:String = “http://www.macromedia.com”; 28. En el controlador de eventos onRelease, añada pares de nombre/valor sobre targetURL para el texto enviado en txtFirstName como un parámetro de URL denominado fn y el texto enviado en txtLastName como un parámetro de URL denominado In Utilice los operadores de asignación compuestos para concatenar los delimitadores correspondientes y los pares de nombre/valor.

targetURL += “?”; targetURL += “fn=” + txtFirstName.text; targetURL += “&”; targetURL += “ln=” + txtLastName.text;

29. Controle targetURL. 30. Pruebe la película, introduzca los valores, envíe y observe cómo targetURL aparece en el panel Salida. 31. Cierre la ventana de prueba. 32. En el código, convierta en comentario el seguimiento. 33. Utilice la función global getURL() para solicitar targetURL a través del navegador.

// trace (targetURL) getURL (targetURL);

34. Guarde el archivo y pruebe la película. 35. Escriba su nombre y apellido en el primer y segundo campo y pulse el botón Enviar; observe los parámetros de URL en la barra de direcciones del navegador y analice cómo se podrían utilizar con el instructor. 36. Cierre la ventana del navegador y el archivo Flash.

¿Cómo se puede controlar una línea de tiempo de MovieClip? El comportamiento predeterminado de una película Flash es para el contenido de fotogramas siguientes que se mostrarán en un bucle continuo. En primer lugar, se muestra el contenido del primer fotograma, un fotograma clave; después, se muestra el contenido de los fotogramas siguientes (en todas las capas) a la velocidad de fotogramas establecida para FLA hasta el final de la capa más larga; finalmente, se muestra el contenido de regreso en el fotograma 1. La posición de la cabeza lectora determina la posición que se reproduce en todo momento. La cabeza lectora controla qué fotogramas se muestran en todas las capas en una MovieClip determinada, incluso en la línea de tiempo principal del documento. Una línea de tiempo determinada existe dentro de una instancia de la clase MovieClip, ya sea para el documento principal u otro objeto en el escenario. La posición de la cabeza lectora de una línea de tiempo determinada, en el objeto MovieClip en cuestión, se puede controlar mediante cuatro métodos de la clase MovieClip. Método gotoAndPlay()

instanceName.gotoAndPlay(frame number or frame name);

Este método hace que la cabeza lectora detenga la reproducción en el fotograma clave cuando o donde este código se ejecuta y se traslade al fotograma especificado y continúe la reproducción desde allí. El fotograma clave puede ser especificado tanto por el número de fotograma por su posición numérica en la línea de tiempo o por una etiqueta de fotograma asociada con el fotograma clave de destino en el panel Propiedades. Método gotoAndStop()

instanceName.gotoAndStop(frame number or frame name);

Este método hace que la cabeza lectora detenga la reproducción en el fotograma clave cuando o donde este código se ejecuta y se traslade al fotograma especificado y se detenga allí. El fotograma clave puede ser especificado tanto por el número de fotograma por su posición numérica en la línea de tiempo o por una etiqueta de fotograma asociada con el fotograma clave de destino en el panel Propiedades. Método play()

instanceName.play();

Este método hace que la cabeza lectora empiece la reproducción desde el fotograma en que se encuentre, cuando se llama a este método. Método stop()

instanceName.stop();

Este método hace que la cabeza lectora detenga la reproducción en el fotograma clave donde se encuentra ubicado el código. ¿Cómo se asigna una etiqueta de fotograma? Se puede asignar una etiqueta de fotograma a cualquier fotograma clave en el panel Propiedades. Esta etiqueta se trasladará con el fotograma clave, incluso si se producen cambios en la posición numérica de este fotograma clave en particular cuando se añaden o quitan otros fotogramas y fotogramas clave de la línea de tiempo.

Se recomienda utilizar siempre las etiquetas de fotogramas cuando se controla la cabeza lectora mediante los métodos gotoAndPlay() y gotoAndStop(). Si depende de los números de fotogramas, el código se romperá si se añade o quita tan sólo un fotograma de la línea de tiempo que se controla.

Ensayo 5-2: Controlar la línea de tiempo mediante los eventos MovieClip En este ensayo, llevará a cabo las siguientes tareas:

• Utilizar controladores de eventos MovieClip basados en fotogramas para controlar la cabeza lectora de una instancia MovieClip como respuesta a las acciones del usuario. • Crear un controlador de eventos para responder a un evento clic. • Escribir los controladores de eventos para crear un efecto de desplazamiento. • Observar la velocidad estimada de descarga mediante el Visor de anchos de banda.

Pasos 1. Abra el archivo wt5-2_start.fla, y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit05\wt5-2.fla 2. Si el panel Biblioteca no está abierto, ábralo. 3. Haga doble clic en ImageBox del símbolo MovieClip para editar la línea de tiempo. 4. Seleccione el fotograma 1 de La capa de acciones / etiquetas y abra el panel Acciones.eada 5. Añada una función global stop() a este fotograma.

6. Seleccione fotograma 7 de la capa acciones / etiquetas y añada una función global stop() a este fotograma también. 7. Arrastre la cabeza lectora por la línea de tiempo para ver los efectos de interpolación de este clip. Asignar etiquetas de fotograma 8. Abra el panel Propiedades, seleccione fotograma 2 de la capa acciones / etiquetas y establezca la etiqueta de fotograma a fadeImage. 9. Seleccione fotograma 8 de la capa acciones / etiquetas y establezca la etiqueta de fotograma a showlmage.

10. Haga clic en Escena 1 para volver a la línea de tiempo principal del documento. 11. Abra el panel Biblioteca y arrastre una instancia del símbolo MovieClip ImageBox hasta el escenario. 12. Denomine mcImageBox1 a esta instancia. 13. Pruebe la película: todavía no observa ninguna animación porque la cabeza lectora está detenida en fotograma 1 mediante una función global stop(). 14. Cierre la ventana de prueba. Escribir un controlador de eventos 15. Seleccione el fotograma 1 de la capa acciones en la línea de tiempo principal del documento y abra el panel Acciones. 16. En la sección declarar los nombres de instancias y variables, declare la instancia ImageBox como un MovieClip.

var mcImageBox1:MovieClip; 17. En la sección gestión de eventos, escriba un método de controlador de eventos onRelease basado en fotogramas para mclmageBox1. Utilice la caja de herramientas Acciones o las sugerencias sobre el código que se activan al declarar el nombre de instancia para crear el controlador.

mclxnageBoxl.onRelease = function() :Void { }

18. En el cuerpo del método de controlador de eventos, utilice el método gotoAndPlay() de la clase MovieClip para comenzar la reproducción de la línea de tiempo mclmageBox1 en el fotograma con nombre showlmage.

mcImageBox1.onRelease = function() :Void {

mcImageBox1.gotoAndPlay(“fadeImage”); }

19. Pruebe la película. 20. Haga clic en la imagen; observe el efecto de interpolación que empieza en el fotograma 2 de lmageBox y se reproduce hasta la segunda acción stop() en el fotograma 7. 21. Cierre la ventana de prueba. Utilizar la palabra clave this 22. En el método de controlador de evento, convierta en comentario la referencia directa a mclmageBox1, copie el código y cambie la referencia directa de mclmageBox1 por la palabra clave this.

mcImageBox1.onRelease = function() :Void { // mcImageBox1.gotoAndPlay(“fadeImage”); this.gotoAndPlay (“fadeImage”); }

23. Pruebe la película. 24. Haga clic en la imagen, observe que el comportamiento es el mismo. 25. Cierre la ventana de prueba. Implementar un efecto de desplazamiento 26. Cambie el controlador de eventos onRelease por un controlador onRollover.

mcImageBox1.onRollOver function() :Void {

this.gotoAndPlay(“fadeImage”); }

27. Copie y pegue el método de control de eventos inmediatamente debajo de sí mismo. 28. Cambie el segundo controlador de eventos onRollOver por un controlador onRollOut.

mcImageBox1.onRollOver = function() :Void {

this.gotoAndPlay(“fadeImage”); } mcImageBox1.onRollOut = function():Void {

this.gotoAndPlay(“fadeImage”); }

29. Dentro del controlador onRollOut, cambie el destino del método gotoAndPlay() de fadelmage a showlmage.

mcImageBox1.onRollOut = function():Void {

this.gotoAndPlay(“showImage”); }

30. Pruebe la película. 31. Desplácese sobre y luego fuera de la imagen; observe que la imagen pierde intensidad cuando se desplaza sobre ella y luego la recupera cuando deja de desplazarse. 32. Cierre la ventana de prueba. Descargar un MovieClip 33. Regrese a la sección gestión de eventos del código. 34. Escriba un nuevo método para controlar un evento onPress.

mcImageBox1.onPress = function() :Void { }

35. En el cuerpo de este controlador de eventos, invoque el método unloadMovie() para mcImageBox1.

mcImageBox1.onPress = function() :Void {

this.unloadMovie(); }

36. Guarde el archivo y pruebe la película. 37. Pruebe el efecto de desplazamiento y haga clic en algún lugar de la imagen; ésta debe desaparecer por completo. 38. Si aún no se muestra el Visor de anchos de banda, seleccione Ver Visor de anchos de banda en la ventana de prueba. 39. Seleccione Ver Configuración de descarga para ver o cambiar la velocidad de descarga seleccionada para simular cuando se realiza la prueba. 40. Pulse Ctrl+Intro una vez para volver a cargar la película. 41. Pulse Ctrl+lntro dos veces para volver a cargar la película inmediatamente. 42. Cierre la ventana de prueba y también el archivo.

¿Cómo se dónde está seleccionado mi usuario? Todas las instancias de nuestras clases visuales (objetos Button, MovieClip, y TextField) se seleccionan cuando el usuario se desplaza hacia ellas o las selecciona con el tabulador o el ratón. Los objetos de esta clase admiten tanto el controlador de eventos onSetFocus como onKillFocus. Controlador de eventos onSetFocus Si se asigna a un objeto determinado, un controlador de eventos denominado onSetFocus ejecutará el código siempre que el usuario realice un clic o pulse el tabulador en el objeto Button, MovieClip, o TextFieid con el que está asociado.

var mcPlayerPhoto :MovieClip; mcPlayerPhoto.onSetFocus = function() :Void { // remove transparency it User selects the MovieC1ip // object into which their JPG was loaded this._alpha = 100; }

Controlador de eventos onKillFocus Si se asigna a un objeto determinado, un controlador de eventos denominado onKillFocus ejecutará el código siempre que el usuario quite la selección del objeto Button, MovieClip, o TextField con el que está asociado, o bien seleccione otro objeto en el escenario con el ratón.

var mcPlayerPhoto:MovieClip; mcplayerPhoto.onKillFocus = function() :Void {

// add transparency it User focuses away from the // MovieClip object into which their JPG was loaded this._alpha = 65; }

¿Se puede utilizar Flash para reemplazar los formularios HTML? Por supuesto. Además, al hacerlo, es fundamental emplear los controladores onSetFocus y onKillFocus para crear ¡a interactividad del formulario. Por ejemplo, un controlador onKillFocus es un buen lugar para validar lo que el usuario escribió en un campo particular. Por consiguiente, cualquier persona que desee construir formularios Web complejos o extensos en Flash, debe aprender a utilizar los componentes de interfaz de usuario Flash. Proporcionan una gran cantidad de funciones útiles y complementarias que van más allá de los TextFields básicos. Este tema trata aspectos que van más allá del alcance de este curso; se describe en detalles en otros cursos de formación autorizada de Macromedia.

Ensayo 5-3: Respuesta a los eventos de selección TextField En este ensayo, llevará a cabo las siguientes tareas:

• Utilizar los métodos de controlador de eventos TextField para resaltar los campos seleccionados. • Volver a utilizar el código al trasladar el código que se repite a funciones comunes.

Pasos 1. Abrir el archivo wt5-3_start.fla, y guardarlo corno:

{Cursos}\AS2.0\flas800\walk\unitO5\wt5-3.fla Trabajar con los eventos de selección TextField 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 3. En la sección gestión de eventos del código, escriba un método del controlador de eventos onSetFocus para el campo txtFirstName. 4. En el cuerpo de este controlador, utilice los operadores with y this para establecer los siguientes valores de propiedad para txtFirstName:

• border: true • borderColor: OxFF0000 • background: true • backgroundColor: OxFEDFA7

5. El código que se obtiene como resultado debe tener el siguiente aspecto:

txtFirstName.onSetFocus = function():Void {

with(this) {

border = true; borderColor = OxFF0000; background = true; backgroundColor = OxFEDFA7

} }

6. Guarde y pruebe la película.

7. Haga clic en el campo txtFirstName; observe el efecto de resaltado. 8. Introduzca el texto en el primer campo y, después, quite la selección; el campo permanece resaltado. 9. Cierre la ventana de prueba. 10. Copie el controlador onSetFocus y péguelo inmediatamente debajo de sí mismo. 11. Cambie el nombre del nuevo controlador de eventos por onKillFocus y establezca los siguientes valores en su interior:

• border: false • background: false


txtFirstName.onKillFocus = function():Void (

with(this) {

border = false; background = false;

} }

13. Guarde y pruebe la película. 14. Haga clic en el campo txtFirstName, introduzca el texto y, después, pulse el tabulador para dirigirse al próximo campo; ahora el campo queda resaltado sólo cuando se selecciona. 15. Cierre la ventana de prueba. 16. Copie los controladores onSetFocus y onKillFocus y péguelos inmediatamente debajo de si mismos. 17. Cambie las referencias del objeto para los controladores de txtFirstName a txtLastName.

txtLastName.onSetFocus = function() :Void {

with(this) {

border = true; borderColor = OxFF0000; background = true; backgroundColor = OxFEDFA7;

} }

txtLastName.onKillFocus = function():Void {

with(this) {


} }

18. Pruebe la película, observe que cada campo queda resaltado cuando se selecciona. 19. Cierre la ventana de prueba. Trasladar el código que se repite a una función común. 20. En la sección definir funciones, declare dos funciones nuevas denominadas showHighlight() y removeHighlight(); cada una recibe un argumento TextField denominado thisTextField.

function showHighlight(thisTextField:TextField):Void { } function removeHighlight(thisTextField:TextField):Void { }

21. Copie la sentencia with del controlador txtFirstName.onSetFocus y péguela dentro de showHighlight(). 22. Cambie el destino de la sentencia with de this a thisTextField.

function showHighlight(thisTextField:TextField):Void {

with(thisTextField) {

border = true; borderColor = OxFF0000; background = true; backgroundColor = OxFEDFA7;

} }

23. Copie la sentencia with del controlador txtFirstName.onKillFocus y péguela dentro de removeHighlight(). 24. Cambie el destino de la sentencia with de this a thisTextField: function removeHighlight(thisTextField:TextField):Void

{ with(thisTextField) {


} } 25. Elimine el código dentro de cada controlador onSetFocus. 26. Dentro de cada controlador onSetFocus, llame showHighlight(), pasándole a la función una referencia al TextField que difunde el evento.

txtFirstName.onSetFocus = function():Void {

showHighlight(this); } txtLastName.onSetFocus = function():Void {

showHighlight(this); }

27. Elimine el código en cada controlador onKillFocus. 28. En cada controlador onKillFocus, llame removeHighlight(), pasándole una referencia al TextField que difunde el evento. txtFirstName.onKillFocus = function():Void {

removeHighlight(this); } txtLastName.onKillFocus = function() :Void {

removeHighlight(this); } 29. Pruebe la película; compruebe que el resaltado todavía funciona correctamente en ambos campos. 30. Cierre la ventana de prueba. 31. Modifique el valor borderColor establecido en la función showHighlight() de (0xFF0000) rojo a (0x0000FF) azul. function showHighlight(thisTextField:TexField):Void {

with (thisTextField) {

border = true; borderColor = Ox0000FF; background = true;

backgroundColor = OxFEDFA7; }

} 32. Guarde el archivo y pruebe la película; observe que al cambiar un valor en una ubicación, se cambia un efecto que se aplica a varios objetos. 33. Cierre la ventana de prueba y también el archivo.


• Los eventos son señales difundidas por objetos.

• Los controladores de eventos son métodos que se llaman automáticamente cuando un evento específico ocurre en el objeto.

• Los métodos son funciones asociadas con un objeto. • La posición de la cabeza lectora controla lo que el usuario observa. • Se puede referir a los fotogramas clave ya sea por el número o una etiqueta. • Los métodos MovieClip controlan qué fotograma clave se reproduce.

gotoAndPlay(), gotoAndStop(), play(), y stop()

• Los TextFields difunden eventos cuando se seleccionan y dejan de estar seleccionados.

• onSetFocus(), onKillFocus()

Repaso de la unidad 1. ¿Qué es un evento? 2. ¿Qué es un controlador de eventos? 3. ¿Qué significa this cuando se utiliza dentro de un controlador de eventos? 4. ¿Cuál es el tipo de datos de retorno para un controlador de eventos? 5. ¿Qué carácter empieza la cadena de consulta cuando se pasa a los parámetros de URL? 6. ¿Se pueden aplicar las etiquetas de fotogramas a cualquier fotograma?

7.¿Por qué es recomendable utilizar las etiquetas de fotogramas como el destino de una llamada al método gotoAndPlay()?

Laboratorio 5: Crear MovieClips exclusivos como respuesta a un evento impulsado por el usuario En este laboratorio, llevará a cabo las siguientes tareas:

• Escribir un controlador de eventos del botón, de modo que cada vez que se presione. invocará la función para que añada un nuevo RotationBox al escenario.

• Generar a nivel dinámico un nombre de instancia exclusivo cada vez que se pulsa el botón, de modo que las propiedades de la instancia no se sobrescriben.

Objetivos

Después de completar este laboratorio, usted podrá:

• Escribir los métodos de controlador de eventos

• Comprender por qué los nombres de instancia deben ser exclusivos.

• Utilizar los nombres de instancia MovieClip generados de modo dinámico.

• Recuperar los nombres de instancia MovieClip en el tiempo de ejecución.

Pasos

1. Abra flas800_Iab4.fla, y guárdelo como:

{Cursos}\AS2.0\flas800\lab\flas800_lab5.fla 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. Escribir un controlador de eventos 3. En la sección gestión de eventos, escriba un controlador de eventos onRelease para btnNewGame; en el cuerpo del controlador de eventos, escriba la palabra released. btnNewGame.onRelease = function() :Void {

trace (“released”); }

4. Guarde y pruebe la película.

5. Haga clic en el botón; observe que la palabra aparece en el panel Salida. 6. Cierre la ventana de prueba. 7. En la sección ejecutar ahora, elimine las tres invocaciones de la función createRotationBox() con las correspondientes sentencias trace. 8. En el cuerpo del controlador de eventos onRelease, elimine la sentencia trace y llame a la función createRotationBoxO, pasándole mcRotationBox como el argumento thisName.

btnNewGame.onRelease = function() :Void { createRotationBox (“mcRotationBox”); }

9. Guarde y pruebe la película. 10. Haga clic en el botón; aparece una instancia de RotationBox. 11. Haga clic en el botón por segunda vez; aparecerá otra instancia y la primera traslada el punto de registro a la esquina superior izquierda del escenario. Haga clic varias veces. ¿Por qué sucede esto? 12. Cierre la ventana de prueba. Crear nombres de instancia exclusivos 13. En la sección declarar los nombres de instancia y variables, declare una nueva variable Number denominada boxCount con 1 como valor predeterminado.

var boxCount:Number = 1; 14. Por encima del código existente en el controlador de eventos onRelease, declare una variable de Cadena denominada instanceName y asígnele la palabra mcRotationBox concatenada al valor de boxCount.

btnNewGame.onRelease = function():Void {

var instanceName:String = “mcRotationBox” + boxCount; }

15. En el controlador de eventos, llame la función createRotationBoxÇj, pasándole la variable instanceName como el argumento thisName.


var instanceName:String = “mcRotationBox” + boxCount;

createRotationBox(instanceName);

} 16. Determine el valor de la propiedad _name de la nueva instancia creada RotationBox. Utilice la referencia dinámica y una ruta relativa de btnNewGame (this) a_parent, la línea de tiempo principal del documento, para hacer referencia a la nueva instancia creada como propiedad de esa línea de tiempo.


var instanceName:String = “mcRotationBox” + boxCount; createRotationBox(instanceName); trace (this._parent[instanceName]._name);

} 17. Guarde y pruebe la película. 18. Pulse el botón varias veces. Observe que a cada instancia de RotationBox se le asigna el mismo nombre de instancia, lo que provoca que Flash “se olvide” de la instancia anterior cada vez que se crea una nueva. Las instancias olvidadas se dibujan donde estarían si no se les asignaría _x ó _y: el ángulo superior izquierdo del escenario, desde el que se calculan las posiciones. 19. Cierre la ventana de prueba. 20. En el controlador de eventos onRelease, incremente ( ++ ) el valor de boxCount tras cada llamada a createRotationBox().


var instanceName:String = “mcRotationBox” + boxCount; createRotationBox(instanceName); trace (this._parent[instanceName]._name); boxCount++;

}

21. Guarde y pruebe la película. 22. Pulse el botón varias veces; observe que cada instancia ahora tiene un nombre de instancia exclusivo y, por lo tanto, retiene su posición asignada originalmente. 23. Cierre la ventana de prueba. 24. Convierta en comentario la sentencia trace en el controlador de eventos onRelease.

// trace (this._parent [instanceName]._name); 25. Guarde y cierre el archivo.

Unidad 6: Gestionar color, sonido y datos con clases

Objetivos de la unidad

Después de completar esta unidad, usted podrá: • Comprender variables agregadas. • Crear y utilizar matrices. • Crear y utilizar objetos genéricos. • Importar clases para utilizar en Flash. • Utilizar las clases Transform y ColorTransform. • Importar archivos de sonido para utilizar en Flash. • Utilizar la clase Sound para reproducir sonidos controlados por eventos.

Temas de la unidad

• ¿Qué es una variable agregada? • ¿Cómo crear matrices? • ¿Cómo utilizar una matriz? • ¿Cómo crear un objeto genérico? • ¿Cómo transformar objetos visuales mediante código? • ¿Cómo reproducir sonido para el usuario?

¿Qué es una variable agregada? Las variables son cubos de almacenamiento de datos: nombres que señalan algunos datos. Hasta ahora, hemos aprendido que los datos pueden ser una cadena, un número o un valor booleano, y hemos mencionado un nombre que señala un dato. En esta unidad, aprenderemos que ciertas variables, en realidad, instancias de dos clases específicas. Array y Object, pueden alojar múltiples elementos de información.

Una matriz, una instancia de la clase Array. es un cubo de almacenamiento de datos subdivididos. Es el nombre de una sola variable, aunque aloja varios datos. Cada dato se conoce por un número, denominado su número de índice. La numeración comienza en O. Considere esto como la dirección del dato dentro de la matriz. Un objeto genérico, una instancia de la clase Object (sí, un “objeto de la clase Object”), también es un cubo de almacenamiento de datos subdivididos. Es el nombre de una sola variable que aloja varios datos, al igual que una matriz. La diferencia es que cada dato se conoce por un nombre en lugar de un número. El nombre se denomina propiedad del objeto genérico.

¿Por qué existen dos tipos diferentes de variables agregadas? Cada tipo, matriz y objeto es útil para distintos métodos de alojar datos. Las matrices son más útiles cuando hay varios datos del mismo tipo (tales como nombres), y la secuencia de dichos datos (quién fue en primer lugar, etc.) puede ser importante. Los objetos genéricos son útiles cuando es necesario describir las características de una sola cosa (tales como el nombre, la puntuación, etc. de un jugador), aunque la secuencia de dicha información es menos importante. •Un punto para recordar, sin embargo, es que todos los datos en una matriz u objeto podrían ser tipos de datos distintos. No obstante, no se declaran los tipos de datos de los elementos de una matriz ni las propiedades de un objeto genérico. ¿Cómo crear matrices? Las variables Array son ejemplos de la clase Array. Son objetos Array, aunque denominarlos de este modo puede resultarle confuso hasta que se familiarice con la terminología de OOP. Sólo llámelos matrices. Existen tres sintaxis completamente intercambiables para crear matrices.

Instancia y asignación del valor literal

var aColors:Array = new Array(); aColors[0] = 0xFF0000; aColors[1] = 0x00FF00; aColors[2] = 0x0000FF;

En este método, se crea una nueva instancia de la clase Array utilizando el operador new, como ya hemos aprendido. A continuación, podrá asignar valores directamente a índices particulares de la clase Array. Esto funciona bien; puede asignar el valor que desee a cualquier índice de una matriz. Sin embargo, la desventaja de la asignación directa de datos, como se muestra anteriormente, es que se debe hacer un seguimiento de cuál puede ser el siguiente número de índice disponible. Como lo veremos en breve, existe una manera más fácil. Instancia con valores iniciales

var aColors:Array = new Array(0xFF0000, 0x00FF00, 0x0000FF); En este método, también puede crear una nueva instancia de la clase Array utilizando el operador new, como ya hemos aprendido. Sin embargo, también puede pasar los valores iniciales de su matriz como argumentos a la función constructora de la clase Array. Puede pasar tantos valores como desee, separados por comas, cuando llene su Array de esta manera. La desventaja de pasar sus valores como se muestra arriba es que si tiene muchos valores, se dificulta la lectura de su código; su código se ve forzado a ajustarse a una segunda línea. Notación abreviada con lista de valores

var aColors:Array = [0xFF0000, 0x00FF00, 0x0000FF]; En este método, se especifica una lista de valores separada por comas dentro de los corchetes. Esta flotación ordena a Flash que cree una matriz, como si hubiese utilizado uno de los métodos anteriores. La desventaja de la notación abreviada es que lo que ocurre es menos obvio y, por lo tanto, dificulta la lectura de su código para los diseñadores y desarrolladores menos experimentados. Esto aumenta el coste de mantenimiento del código más tarde.

¿Cómo utilizar una matriz? La clase Array tiene varios métodos que le ayudarán a añadir, eliminar y ordenar los datos dentro de su matriz. En realidad, las matrices son mucho más que una variable. Son pequeñas herramientas de manipulación de datos muy útiles. Para utilizar datos dentro de una matriz, debe remitirse a éstos por número de índice. Si se remite a la propia matriz, hace referencia a la instancia completa, no a cualquier valor específico, y Flash no sabrá a qué dato se refiere. Al depurar su código, la función global trace() puede mostrar un valor específico dentro de su matriz o todos los valores en la matriz como una lista.

var aColors:Array = new Array(OxFF0000, 0x00FF00, 0x0000FF) trace(aColors[1]); // muestra 0x00FF00 trace(aColors); // muestra 0xFF0000, 0x00FF00, 0X0000FF

Métodos de gestión de datos y longitud de la clase Array Entre otros, la clase Array tiene cinco métodos muy útiles y una propiedad muy importante.

• push(value): añade un valor en la parte superior de la matriz • pop(): elimina y devuelve el valor más alto en la matriz • unshift(value): añade un valor a la parte inferior de la matriz, desplazando el resto por uno • shift(): elimina y devuelve el valor más bajo en la matriz • slice(start index, end index): corta y devuelve una matriz de otra • length: una propiedad que contiene el recuento de elementos en la matriz

Ensayo 6-1: Gestión de datos con matrices En este ensayo, llevará a cabo las siguientes tareas:

• Aprender a almacenar y recuperar múltiples elementos de información en una sola instancia de la clase Array. • Crear una instancia de la clase Array. • Utilizar diversos métodos diferentes para asignar valores iniciales a elementos de la matriz. • Utilizar métodos de la clase Array para manipular datos.

Pasos

1. Cree un nuevo archivo desde la plantilla flas800 y guárdelo como: {Cursos}\AS2.0\flas800\walk\unit06\wt6-l.Fla

Crear y utilizar una matriz 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 3. En la sección crear objetos del código, escriba código para declarar una nueva instancia de la clase Array llamada thisArray.

var thisArray:Array = new Array(); 4. Siguiendo este código, defina valores para los primeros tres elementos de thisArray en rojo, verde y azul, en ese orden.

thisArray[O] = “red”; thisArray[l] = “green”; thisArray[2] = “blue”;

5. En la sección ejecutar ahora de su código, realice un seguimiento del segundo elemento de thisArray. 6. Guarde y pruebe su película; observe el valor que aparece en el panel Salida. Analice con su instructor por qué el segundo elemento de thisArray está en la posición de índice 1.


8. En la sección ejecutar ahora del código, escriba código para realizar un seguimiento del número total de elementos en thisArray.

trace (thisArray.length); 9. Guarde y pruebe su película; observe cuántos elementos hay en thisArray. 10. Cierre la ventana de prueba. 11. En su código, realice un seguimiento del valor en el índice 3 de thisArray.

trace(thisArray[3]); 12. Guarde y pruebe su película. Analice con su instructor por qué el valor devuelto es no definido.

13. Cierre la ventana de prueba. 14. En su código, realice un seguimiento del primer elemento de thisArray.

trace(thisArray[0]); 15. Guarde y pruebe su película; observe que el primer elemento de thisArray está en el índice 0, no en 1.


Utilizar formas alternativas para crear una clase Array 17. Convierta el código en la sección crear objetos en un comentario que asigne valores a thisArray y, en cambio, asigne valores iniciales a su matriz pasando valores a la función constructora de la clase Array. var thisArray:Array = new Array(“red”, “green”, “b1ue”); 18. Guarde y pruebe su película observe que la salida de la sentencia trace es la misma que antes, aunque ha cambiado la forma de crear una matriz.

19. Cierre la ventana de prueba. 20. Convierta el código en la sección crear objetos en un comentario que cree thisArray y, en cambio, cree y asigne valores iniciales a la matriz utilizando la flotación abreviada de matriz.

var thisArray:Array = [“red”, “green”, “blue”]; 21. Guarde y pruebe su película; observe que la forma en que crea su matriz no tiene efecto en cómo utiliza y muestra valores desde thisArray.

22. Cierre la ventana de prueba. 23. En la sección ejecutar ahora de su código, convierta todo el código existente en un comentario o elimínelo, excepto el seguimiento del elemento 3 de thisArray.

Utilizar métodos de la clase Array para manipular datos 24. En la sección ejecutar ahora, añada un nuevo elemento con el valor magenta a thisArray utilizando el método push(), y realice un seguimiento del valor del objeto thisArray entero.

trace(thisArray[3]); thisArray.push(”magenta”); trace(thisArray);

25. Guarde y pruebe su película; observe el efecto de utilizar el método push() de su matriz y el resultado de realizar un seguimiento a la matriz entera, en lugar de a un solo elemento dentro de ésta.

26. Cierre la ventana de prueba. 27. En la sección ejecutar ahora de su código, convierta todo el código existente en un comentario o elimínelo. 28. Realice un seguimiento del valor de la matriz entera. 29. Realice un seguimiento del valor devuelto por el método pop() de la matriz. 30. Realice un seguimiento del valor de la matriz entera por segunda vez.

trace (thisArray); trace (thisArray.pop()); trace (thisArray);

31. Guarde y coloque texto a la película; observe el efecto de eliminar repentinamente los valores de la matriz.

32. Cierre la ventana de prueba. 33. Revise otros métodos de manipulación de datos de la clase Array con su instructor. 34. Guarde y cierre el archivo.

¿Cómo crear un objeto genérico? Los objetos genéricos son variables agregadas, un nombre, muchos valores, en las cuales se refiere a cada valor utilizando otro nombre, en lugar de un número como lo hizo con las matrices. Este tipo de variable es útil para describir todas las características, todas las propiedades, de un elemento u objeto particular. Podría albergar todas las características de un Reproductor del juego o quizás los datos de cada Libro en una matriz entera de libros que tiene para la venta, O quizás los datos de cada Viaje en un sistema de reserva de viaje, O cada Canción en un jukebox. Aunque no nos expandamos demasiado en este curso, es muy útil considerar la posibilidad de tener una matriz de objetos genéricos. Las matrices pueden albergar cualquier tipo de datos, incluidos los objetos genéricos, como el valor de cada elemento de la matriz. Es una técnica un tanto avanzada aunque muy útil cuando se crean muchos tipos de interfaces de aplicaciones Web. Instancia con asignación directa de propiedad

var oBook:Object = new Object(); oBook.title = “The Golden Bough”; oBook.author = “James George Frazer”; oBook.ISBN = 0684826305; oBook.price = 21.00; oBook.inStock = true;

Con un objeto genérico, asigna directamente nombres y valores de propiedades empleando la misma sintaxis que hemos utilizado durante este curso para asignar valores a cualquier otra propiedad. La diferencia es que está inventando los nombres de propiedades. Todo lo que hemos analizado previamente acerca de utilizar de la notación de corchetes con objetos y hacer referencia a los nombres de propiedades en forma dinámica, también se aplica a objetos genéticos además de cualquier otro objeto. Se aplica la siguiente sintaxis:

var oBook:Object = new 0bect( ); oBook[“title”] = “The Golden Bough”; var propertyName:String= “título”; trace(oBook[propertyName]); // displays “The Golden Bough”

Notación abreviada con lista name:value

var oBook:Object = {name:”The Golden Bough”, author: ”James George Frazer”, ISBN:0684826305, price: 21.00, inStock: true};

Con la notación abreviada, especifica una lista de pares de nombre/valor separados por dos puntos en una lista delimitada por comas. Mientras que esto sirve para códigos ligeramente más breves, también es idiosincrásico para ActionScript, difícil

de leer y no es la práctica más aconsejable si su objetivo es un código que pueda mantenerse fácilmente. ¿Cómo recuperar valores desde un objeto genérico? Hace referencia a éstos como a una propiedad de cualquier otro objeto. En la depuración, la función global trace() puede mostrar cualquier propiedad del objeto. Sin embargo, al utilizar trace() en el propio objeto, sólo se muestra que es un objeto de la clase Object, un objeto genérico.

trace(oBook.title); // displays ‘The Golden Bough” trace(oBook); // displays ‘[object Objec]” txtTitle.text = oBook.title; // show title in TextField txtPrice.tex = oBook.price; // shows price in TextField

métodos get/set y objetos genéricos Como se ha descrito anteriormente en este curso para la clase Date, es común que las clases tengan métodos para recuperar (“get”) y asignar (“set”) valores de propiedad. También puede asociar los métodos personalizados a los objetos genéricos.

var oBook:Object = new Object(); oBook.ft1e = “The Golden Bough”; oBook.author = “James George Frazer’; oBook.ISBN = 0684826305; oBook.price = 21.00; oBook.inStock = true; oBook.getPrice = function():Number {

return this.price; // what does this mean here? }

Este método es realmente más un problema que lo que vale cuando se utilizan objetos genéricos, aunque resulta muy útil cuando desarrolla sus propias clases personalizadas. A pesar de que el método de desarrollo de clases personalizadas es de gran potencia y utilidad, es un tema avanzado que excede el ámbito de este curso.

Ensayo 6-2: Crear y utilizar objetos genéricos para albergar datos En este ensayo, llevará a cabo las siguientes tareas:

• Utilizar una instancia de la clase Object como una variable agregada que contiene múltiples elementos de información a los que se hace referencia por un nombre de instancia. • Crear tina instancia de la clase Object. • Utilizar diversos métodos diferentes para asignar valores iniciales a elementos del objeto.

Pasos 1. Cree un nuevo archivo desde la plantilla flas800 y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit06\wt6-2.fla Crear objetos genéricos 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 3. En la sección crear objetos del código, escriba código para declarar una nueva instancia de la clase Object llamada reproductor.

var player:Object = new Object(); 4. Utilice la notación de puntos o la notación de corchetes para asignar tres propiedades a este objeto con los siguientes valores:

• firstName: Fred • playerScore 1000 • adminStatus true


var p1ayer:Object = new Object(); player.firstName = “Fred”; player[“playerScore”] = 1000; player.adminStatus = true;

6. En la sección ejecutar ahora, realice un seguimiento de cada una de estas propiedades y del valor del propio objeto.

trace (player.firstName); trace (player.playerScore); trace (player.adminStatus); trace (player);

7. Guarde y pruebe la película: observe que los valores de propiedad se asignan y se ubican si utiliza flotación de puntos o flotación de corchetes.

8. Cierre la ventana de prueba. Utilizar sintaxis abreviada de creación de objetos 9. Convierta todo el código en un comentario o elimínelo en la sección crear objetos. 10. En la sección crear objetos, utilice la notación abreviada para crear el mismo objeto que creó antes con los mismos valores de propiedades. var player:Object = {firstName:“Fred”, playerScore:1000, adminStatus:true}; 11. Guarde el archivo y pruebe la pejícula; observe que se crea el mismo objeto y las sentencias trace se comportan al igual que antes.

12. Cierre la ventana de prueba y el archivo.

¿Cómo transformar objetos visuales mediante código? El entorno de Edición de Flash 8 incluye diversos paquetes de clases nuevas de grandes prestaciones que pueden utilizarse para transformar visualmente ¡nstancias MovieClip y otros elementos visuales. Incluyen los siguientes paquetes:

• flash.display • flash.filters • flash.geom • flash.text

¿Qué es un paquete de clases? Todas las clases, proyectos de objetos, que hemos utilizado hasta ahora se han incorporado en Flash Player. Esto significa que si desea una instancia nueva de una de estas clases, sólo lo dice en el código. La clase ya está allí, incorporada en el propio Flash Player.

var aPlayers:Array = new Array(); Sin embargo, no todo está incorporado en Flash Player (por eso es que es mucho más rápido que utilizar Java en un navegador). Potentes funciones adicionales están disponibles mediante el uso de clases de objetos externas. ¿Cómo importar un paquete o una clase? Antes de utilizar una clase externa, debe importar la clase en el código. De este modo, la herramienta de edición de Flash 8 sabe dónde ir a buscarla cuando ésta publica el FLA como un SWF. La clave import se utiliza para importar clases en el código. Los nombres de las clases y el paquete están en la Caja de herramientas Acciones y en los archivos de Ayuda. Los paquetes pueden concebirse como carpetas llenas de clases (porque eso es exactamente lo que son cuando se instalan como parte de la herramienta de edición de Flash 8). Puede importar una clase específica en un paquete particular o el paquete entero usando un comodín si utiliza más de una clase en ese paquete. Los nombres de las clases y el paquete están separados por el operador de punto ( . ). import flash.geom.Transform; // import the Transform class

// of the flash.geom package import flash.geom.*; // import ah classes within

// the flash.geom package

No afecta el tamaño del SWF si utiliza o no un comodín para importar. La herramienta de edición de Flash 8 sólo importará y publicará las clases que realmente utiliza desde el paquete.

¿Cómo transformar el color de un MovieClip? Todas las transformaciones visuales que admite el paquete flash.geom se aplican mediante el uso de un objeto Transform. Un objeto Transform puede concebirse como un panel de control visual sujeto sobre el lado de un MovieClip. Se aplican distintas transformaciones visuales a este MovieClip particular mediante propiedades de configuración de su objeto Transform. Clase Transform Cuando construye un nuevo objeto Transform, pasa el nombre de instancia de un MovieClip al constructor como un argumento. Se aplicarán las transformaciones establecidas corno propiedades de este objeto Transform a este MovieClip.

import flash.geom. *; var mcPlayerPhoto:MovieClip; var ctPlayerPhoto:Transform = new Transform(mcPlayerPhoto);

Clase ColorTransform Un objeto ColorTransform contiene la información de una transformación visual específica que desea aplicar a un MovieClip. Las instancias de la clase ColorTransform tienen las siguientes propiedades:

• alphaMultiplier: un número que se multiplicará por el valor actual del canal alfa • redMultiplier: un número que se multiplicará por el valor actual del canal rojo • greenMultiplier: un número que se multiplicará por el valor actual del canal verde • blueMultiplier: un número que se multiplicará por el valor actual del canal azul • alphaOffset: un valor en el rango -255 al 255 que se añadirá al valor actual del canal alfa, después de aplicar el multiplicador (si hay alguno) • redOffset: un valor en el rango -255 al 255 que se añadirá al valor actual del canal rojo, después de aplicar el multiplicador (Si hay alguno) • greenOffset: un valor en el rango -255 al 255 que se añadirá al valor actual del canal verde, después de aplicar el multiplicador (si hay alguno) • blueOffset: un valor en el rango -255 al 255 que se añadirá al valor actual del canal azul, después de aplicar el multiplicador (si hay alguno) • rgb: un valor hexadecimal RGB específico para aplicar (como, por ejemplo, OxA3O4D9, etc.)

Para aplicar la transformación a un MovieClip, construya un objeto ColorTransform y asígnelo a la propiedad colorTransform de un objeto Transform. La transformación se aplicará al MovieClip de destino del objeto Transform.

import flash. geom.*; var mcPlayerPhoto:MovieClip; var tfPlayerPhoto:Transform = new Transform(mcPlayerPhoto); var ctPlayerPhoto:ColorTransform = new ColorTransform(); with (ctPlayerPhoto) {

alphaOffset = -100; redOffset = 255; greenOffset = 0; blueOffset = 0;

} tfPlayerPhoto.colorTransform = ctPlayerPhoto;

Utilización de valores de desplazamiento RGB Los colores en Flash se expresan como una serie de cuatro valores, rojo, verde, azul y alfa (transparencia), cada uno en un rango del 0 al 255. Sin embargo, los valores RGB generalmente se expresan en notación hexadecimal como un único número, como, por ejemplo, 0xFF0000.

El valor 00 en la notación hexadecimal significa 0 en la notación decimal regular. El valor FF en la notación hexadecimal significa 255 en la notación decimal regular. Cada color puede expresarse en un rango del 0 al 255 a través de tres canales de color: rojo, verde y azul. El valor que se muestra arriba significa rojo y es 255, el verde es 0 y el azul es 0. Los objetos con esta configuración de color aparecerán en rojo primario. Los valores alfa se establecen independientemente de los valores hexadecimales que pueda haber asignado a través de una herramienta de selección de color en el entorno de edición de Flash. Sin embargo, en un objeto ColorTransform, se establecen simplemente como tina propiedad más del objeto ColorTransform. Cuando utiliza un objeto ColorTransform, multiplica los valores actuales de cada canal por los valores que especifica para intensificar o reducir el color en uno de los canales o desplaza los valores actuales, añadiéndolos al valor de desplazamiento que especifica o reduciéndolos por el mismo.

Ensayo 6-3: Transformar colores de MovieClip mediante ActionScript En este ensayo, llevará a cabo las siguientes tareas:

• Importar las clases Transform y ColorTransform para utilizarlas en el documento. • Transformar el color de una instancia de MovieClip utilizando instancias de las clases Transform y ColorTransform.

Pasos 1. Cree un nuevo archivo desde la plantilla flas800 y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit06\wt6-3.fla 2. Seleccione la herramienta Óvalo y establezca el trazo y los valores del color de relleno en negro: #000000.

3. En el escenario, dibuje un círculo de 100 x 100 píxeles. 4. Haga doble clic en la forma para seleccionar el trazo y el relleno. 5. Seleccione Modificar ---> Convertir en símbolo. 6. En el cuadro de diálogo Convertir en símbolo, cree un símbolo de MovieClip llamado BlackBall y haga clic en Aceptar.

7. En el panel Propiedades, designe un nombre a la instancia BlackBall en el escenario mcBlackBall.

Importar clases para uso 8. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 9. En la sección importar sentencias, importe las clases Transform y ColorTransform desde el paquete flash.geom.

10. En la sección declarar variables y nombres de instancias, declare la instancia del símbolo BlackBall de MovieClip.

var mcBlackBall:MovieClip; Usar objetos Transform y ColorTransform 11. En la sección crear objetos, declare y cree una instancia de la clase Transform llamada tfBlackBall y diríjala a la instancia mcBlackBall.

var tfBlackBall:Transform = new Transform(mcBlackBall); 12. En la siguiente línea, cree una instancia de la clase Transform llamada ctBlackBall.

var ctBlackBall:ColorTransform = new ColorTransform(); 13. Utilice el operador with para asignar los siguientes valores de propiedades a ctBlackBall:

• redOffset: 255 • greenOffset: 0 • blueOffset: 0 • alphaOffset: 0

with(ctBlackBall) {

redOffset = 255; greenOffset = 0; blueOffset = 0; alphaOffset =0;

} 14. En la sección establecer valores de propiedades, asigne ctBlackBall a la propiedad colorTransform del objeto Transforrn de tfBlackBall.

tfBlackBall.colorTransform = ctBlackBall; 15. Guarde y pruebe la película; la instancia ahora es en rojo primario. 16. Cierre la ventana de prueba. 17. En el código, cambie la propiedad redOffset a 0 y la propiedad blueOffset a 255.

with(ctBlackBall) { redOffset = 0; greenOffset = 0; blueOffset = 255; alphaOffset = 0; }

18. Guarde y pruebe la película; la instancia ahora es en azul primario. 19. Cierre la ventana de prueba. 20. En el código, convierta la asignación de las cuatro propiedades en un comentario y, en cambio, asigne a ctBlackBall una propiedad rgb de 0xFF9900 (naranja industrial).

with(ctBlackBall) {

rgb = OxFF9900; /* redOffset = O; greenOffset = 0; blueOftset = 255; alphaOffset = O; */

} 21. Guarde el archivo y pruebe la película; la instancia ahora es en naranja industrial. 22. Cierre la ventana de prueba y también el archivo.

¿Cómo reproducir sonido para el usuario? Flash Player sólo reproduce sonido con el formato de archivo MP3. Sin embargo, la herramienta de edición de Flash 8 puede importar distintos formatos de archivo y convertirlos en formato MP3 para que el sonido pueda incorporarse dentro del SWF. A continuación, puede reproducir estos sonidos utilizando instancias de la clase Sound. Importar archivos de sonido para incorporar dentro de un SWF Puede importar a Flash los siguientes formatos de archivo de sonido:

• WAV (sólo en Windows) • AJFF (sólo en Macintosh) • MP3 (Windows o Macintosh)

Si tiene QuickTime 4 o una versión posterior instalado en su sistema, podrá importar los siguientes formatos de archivo de sonido:

• AIFF (Windows o Macintosh) • Sound Designer II (sólo en Macintosh) • Películas QuickTime sólo sonido (Windows o Macintosh) • Sun AU (Windows o Macintosh) • Sonidos System 7 (sólo en Macintosh) • WAV (Windows o Macintosh)

Para importar un archivo de sonido a la Biblioteca:

1. Seleccione Archivo ---> Importar - Importar a Biblioteca. 2. Busque el archivo de sonido. 3. Haga clic en Abrir.

El archivo de sonido aparecerá ahora en la Biblioteca y podrá colocarse en una capa en la línea de tiempo. Sin embargo, para utilizar el sonido en ActionScript, hay un paso más (que lo hemos hecho antes). Exportar archivos de sonido para utilizar en ActionScript Un sonido sólo puede utilizarse en ActionScript si se ha exportado para uso en ActionScript. Si no hace esto, el código no podrá utilizarlo en el SWF, ya que no se incluirá en el proceso de publicación porque la herramienta de edición de Flash 8 no verá una instancia en ninguna parte del escenario y, por lo tanto, no sabrá incluirla. Para exportar un archivo de sonido desde la Biblioteca para ActionScript:

1. Haga clic con el botón derecho sobre el sonido en la biblioteca. 2. Seleccione Vinculación. 3. Marque Exportar para ActionScript. 4. No cambie el identificador. 5. Haga clic en Aceptar.

¿Cómo utilizar la clase Sound? Debe crear un objeto Sound para cada sonido que desee reproducir, asociando un sonido exportado desde la Biblioteca o cargando un MP3 externo. attachSound(), método Una vez que se crea el objeto Sound, utilice el método attachSound() para asociar el sonido desde la Biblioteca.

var instanceName:Sound = new Sound(); instanceName.attachSound (Identifier);

Una vez que el sonido se asocia al objeto Sound, utilice los métodos start() y stop() para reproducir el sonido y detener la reproducción. Para crear acoplamiento acústico para interacciones de los usuarios, inicie Sound en un controlador de eventos apropiado.

var btStartGame:Button; var sndBoing:Sound= new Sound(); sndnoing.attachSound(“boing.wav”); btStartGame.onRelease=function():Void {

sndBoing.start(); // plays boing.wav }

IoadSound(), método Flash Player también puede cargar y reproducir archivos MP3 externos. Debe especificar la URL al archivo MP3 como un argumento para el método loadSound(). Cuando se ejecuta el controlador de eventos onLoad, el sonido se carga y está preparado para reproducirse.

var instanceName:Sound = new Sound(); instanceName.loadSound(URL, isStreaming);

Si el argumento isStreaming es true, el sonido comenzará a reproducirse cuando se carga. Si es false, el sonido no se reproducirá hasta que se llame al método start() También puede llamar al método start() en el controlador de eventos onLoad, de modo que reproduzca de inmediato cuando está completamente cargado, en lugar de reproducir mientras se carga (se pone en riesgo el sonido interrumpido si se obstruye el tráfico en Internet). También puede iniciar el sonido en un controlador de eventos Button, haciendo que el botón sólo sea visible una vez que se ha cargado el sonido.

var btPlaySound:Button; var sndTrack:Sound = new Sound(); sndTrack.loadSound(“sounds/gametrack.wav”, false); sndTrack.onLoad = function() :Void {

btPlaySound._visible = true; }

btPlaySound.onPress = function():Void sndTrack.start();

Ensayo 6-4: Mejorar la experiencia con sonidos controlados por eventos En este ensayo, llevará a cabo las siguientes tareas:

• Importar dos archivos de sonido a la Biblioteca y exportarlos para uso en ActionScript. • Escribir dos controladores de eventos Button que reproduzcan dos sonidos distintos en respuesta a eventos generados por usuarios.

Pasos 1. Abrir wt6-4_start.fla y guardarlo como:

{Cursos}\AS2.0\flas800\walk\unit06\wt6-4.fla 2. Abrir el panel Biblioteca (si aún no está abierto) y arrastrar una instancia del símbolo del botón GlowBall al escenario. 3. En el panel Propiedades, asigne a la instancia el nombre btnGlowBall. 4. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 5. En la sección declarar variables y nombres de instancias, declare la instancia Button que colocó en el escenario.

var btnGlowBall:Button; Importar archivos de sonido y exportados para uso 6. Seleccione Archivo ---> Importar ---> Importar a Biblioteca. 7. Importe los siguientes archivos desde el directorio {Cursos}\AS2.0\flas800\assets\a la biblioteca:

• electro_rollover.wav • electro_press.wav

8. Guarde y pruebe la película. 9. En la ventana de prueba, seleccione Ver--->Visor de anchos de banda (si el Visor de anchos de banda aún no está abierto) y observe el tamaño del archivo SWF cargado.

10. Cierre la ventana de prueba. 11. En el panel Biblioteca, haga clic con el botón derecho en electro_press.wav y seleccione Vinculación. 12. En el cuadro de diálogo Propiedades de vinculación, marque Exportar para ActionScript, no cambie el identificador predeterminado que coincide con el nombre de biblioteca de este activo y haga clic en Aceptar.

13. Repita los últimos pasos para exportar electro_rollover.wav. 14. En el panel Biblioteca, haga clic con el botón derecho en cada uno de estos archivos, seleccione Propiedades y, en el cuadro de diálogo Propiedades de sonido, observe el tamaño original de estos archivos WAW.

15. Guarde y pruebe la película. 16. En el Visor de anchos de banda, observe el cambio en el tamaño del archivo SWF cargado; los archivos de sonido se reducen cuando se comprimen de formato WAW a MP3.


Usar objetos Sound 18. En la sección crear objetos del código, cree dos nuevas instancias de la clase Sound llamadas sndRollOver y sndPress.

var sndRollOver:Sound = new Sound(); var sndPress:Sound = new Sound ();

19. En la misma sección del código, utilice el método attachSound() para asociar archivos de sonido que ha exportado de sus objetos Sound correspondientes; debe hacer referencia a los sonidos por sus nombres de vinculación (que coinciden con los nombres de bibliotecas, de forma predeterminada, a menos que los cambie).

var sndRollOver:Sound = new Sound() var sndPress:Sound = new Sound() sndRollOver.attachSound(“electro_rollover.wav”) sndPress .attachSound(”electro_press.wav”);

20. En la sección controlar eventos, cree un controlador de eventos onPress y uno onRollOver para btnGlowBall.

btnGlowBall.onRollOver = function():Void { } btnGlowBall.onPress = function():Void { }

21. En el controlador onRollOver, invoque el método start() del objeto sndRollOver.

btnGlowBall.onRollOver = function():Void {

sndRollOver.start(); }

22. En el controlador onPress, invoque el método start() del objeto sndPress.

btnGlowBall.onPress = function() :Void {

sndPress.start(); }

23. Guarde y pruebe la película; los efectos de sonido ocurren cuando desplaza y presiona btnGlowBall. Observe que ambos sonidos puedan reproducirse simultáneamente y que el sonido desplazado continúa aún después de desplazarlo desde el botón. 24. Cierre la ventana de prueba.

25. En el código, copie el controlador de eventos onRollOver, péguelo debajo de sí mismo, cámbielo a un controlador onRollOut y cambie la invocación del método sobre sndRollOver de start() a stop().

btnGlowBall.onRollOver = function() :Void {

sndRollOver.start(); } btnGlowBall.onRollOut function():Void {

sndRollOver.stop(); }

26. Guarde el archivo y pruebe la película; el sonido desplazado ahora se detiene si se sitúa afuera desde el botón antes de que se complete el sonido. 27. Cierre la ventana de prueba y el archivo. Resumen de la unidad • Las variables agregadas pueden albergar un número indefinido de valores. • Una instancia de Array tiene un nombre pero puede contener valores múltiples; se hace referencia a cada uno de ellos por un número de índice. • Manipular una matriz mediante la propiedad y los métodos de la clase Array.

• Push(), pope(), shift(), unshift(), length • Una instancia de Object tiene un nombre pero puede contener valores múltiples; se hace referencia a cada uno de ellos por un nombre de propiedad. • Las propiedades de Object pueden albergar cualquier tipo de datos: Cadena, número, función, etc. • Los objetos Tranform tienen como destino a una instancia MovieClip particular. • Los objetos ColorTransform albergan los valores a aplicar, de algún modo como un objeto TextFormat. • La herramienta de edición de Flash 8 puede importar muchos formatos de archivos de sonido. • Los sonidos están compilados a MP3 en el SWF. • Los objetos Sound asocian y reproducen sonidos MP3.

Repaso de la unidad

1. ¿Qué similitud existe entre las matrices y los objetos genéricos?

2. ¿Qué diferencia existe en la forma en que las matrices y los objetos genéricos tratan sus datos?

3. ¿Cómo se elimina el elemento más alto de una matriz?

4. ¿Cuál es la diferencia entre las clases que deben importarse en Flash?

5. ¿Cuál es el equivalente decimal del valor hexadecimal FF?

6. ¿Qué paso debe seguir antes de poder asociar un sonido desde la Biblioteca utilizando ActionScript?

Laboratorio 6: Transformaciones aleatorias de color y sonidos controlados por eventos En este laboratorio, llevará a cabo las siguientes tareas:

• Transformar cada RotationBox recién creado a un color distinto, basado en valores de desplazamiento de ColorTransform generados en forma aleatoria. • Tener una reproducción de sonido cuando se crea cada cuadro.

Objetivos Después de completar este laboratorio, usted podrá:

• Importar paquetes de clases. • Crear objetos Transform que tengan como objetivo instancias a las que se hace referencia dinámicamente. • Crear objetos ColorTransform personalizados utilizando una función definida de usuario. • Generar enteros aleatorios dentro de un rango positivo/negativo. • Crear objetos Sound y reproducirlos en respuesta de eventos de usuario

Pasos 1. Abra flas800_lab5.fla y guárdelo como: {Cursos}\AS2.0\flas800\lab\flas800_lab6.fla 2. En el panel Biblioteca, haga doble clic en el símbolo Background para editar su línea de tiempo. 3. Seleccione la forma cuadrada en este símbolo y cambie el color de relleno a blanco (0xFFFFFF). 4. Vuelva a la línea de tiempo del documento principal. Crear y aplicar efectos ColorTransform con valores de desplazamiento generados en forma aleatoria 5. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 6. En la sección importar sentencias, importe el paquete de las clases flash.geom.

import flash.geom.*; 7. En la sección declarar funciones, escriba una nueva función denominada createRandomColorTransform() que devuelva un objeto ColorTransform. En los siguientes pasos, escribirá el cuerpo de la función que creará un objeto ColorTransform con valores de desplazamiento generados en forma aleatoria. function createRandomColorTransform():ColorTransform { }

8. Dentro de la función, cree un nuevo objeto ColorTransform y utilice un operador with para asignar las propiedades redOffset, greenOffset y blueOffset con valores enteros aleatorios en un rango desde -255 a 255 (multiplique por dos el valor de rango y reste el valor de rango).

function createRandomColorTransform():ColorTransform { var thiscolorTransform:ColorTransform = new ColorTransform(); with (thiscolorTransform)

{ redOffset = Math.round(Math.random()*510)- 255; greenOffset = Math.round(Math.random()*510) - 255; blueOffset = Math.round(Math.random()*510)- 255;

} }

9. Luego, asigne un valor entero aleatorio en el rango -255 a 0 a la propiedad alphaOffset (multiplique por el valor de rango y reste el valor de rango). Esto garantiza que cada instancia sea parcialmente transparente.

function createRandomColorTransform():ColorTranstorm {

var thisColorTransform:ColorTransform = new ColorTransform(); with (thisColorTransform) {

redOffset = Math.round(Math.random() * 510) - 255; greenOffset = Math.round(Math.random()* 510) - 255; blueOffset = Math.round(Math.random() * 510) - 255; alphaOffset = Math.round(Math.random()* 255) - 255;

} }

10. Después de la sentencia with, realice un seguimiento a cada propiedad de desplazamiento del objeto ColorTransform y, después, a una cadena de línea discontinua “---------------“ Esto garantiza que cada conjunto de propiedades rastreadas estará separado en el panel Salida. function createRandomColorTransform():ColorTranstorm {

var thiscolorTransform:ColorTransform = new ColorTransform(); wjth (thisColorTransform) {

redOffset = Math.round(Math.random() * 510) - 255; greenOftset = Math.round(Math.random() * 510) - 255; blueOftset = Math.round(Math.random() * 510) - 255; alphaOffset = Math.round(Math.random() * 255) - 255;

}

trace(thisColorTransform.redOffset); trace (thisColorTransform.greenOffset); trace(thiscolorTransforin.blue0ffset); trace(thiscolorTransforin.alphaOffset); trace(”---------------“) }

11. Después de las sentencias trace, devuelva thisColorTransform desde la función.

function createRandomColorTransform () : ColorTransforrn { [ … ] trace (thisColorTransform.redOff set) trace (thisColorTransform.greenOffset) trace (thisColorTransform.blueOffset) trace (thisColorTransform.alphaOffset); trace (“------”); return thisColorTransform; }

12. En la función createRotationBox(), debajo del código que crea y posiciona RotationBox, cree una nueva instancia de la clase Transform llamada thisTransform y pase al constructor una referencia para su nuevo objeto RoationBox (no simplemente su nombre de instancia). Nota: Debido a que debe pasar una referencia a su objeto RotationBox, no sólo su nombre de instancia literal, como una cadena, utilice referencia dinámica, como lo hizo al aSignar-su posición _x y _y: this[thisName]. function createRotationBox (thisName:String):Void { […]

this.attachMovie(”RotationBox”, thisName, nextDepth); this[thisName]._x = thisX; this[thisName)._y = thisY; var thisTransform:Transform = new Transform(this[thisName]);

} 13. Después del código que crea thisTransform, invoque la función createRandomColorTransformÇ) y asigne el objeto que devuelve a la propiedad colorTransform del objeto thisTransform.

function createRotationBox(thisName : String) :Void {

[ ... ]

this.attachMovie(“RotationBox”, thisName, nextDepth); this[thisName]._x = thisX; this[thisName]._y = thisY;

var thisTransform:Transform = new Transform(this [thisName]); thisTransform.colorTransform = createRandomColorTransform(); }

14. Guarde y pruebe la película; cada objeto RotationBox ahora tiene un color exclusivo. 15. Cree unas pocas docenas de cuadros y observe cómo sus transparencias (_alpha) actúan unas contra otras. 16. Cierre la ventana de prueba. Reproducir un sonido en respuesta a un evento de usuario 17. Seleccione Archivo ---> Importar ---> Importar a Biblioteca. 18. Desde el directorio {Cursos} \AS2.0\flas800\assets\directory, importe el archivo chime_up.wav. 19. En el panel Biblioteca, haga clic con el botón derecho en chime_up.wav y seleccione Vinculación. 20. En el cuadro de diálogo Propiedades de vinculación, seleccione Exportar para ActionScript, no cambie el identificador predeterminado y haga clic en Aceptar. 21. En la sección crear objetos del código, cree un nuevo objeto Sound llamado sndChime.

var sndChime:Sound = new Sound(); 22. Utilice el método attachSound() para asociar chime_up.wav desde la biblioteca.

sndChime.attachSound(“chime_up.wav”); 23. En el controlador de eventos onRelease para btnNewGame, invoque el método start() de sndChime. btnNewGame.onRelease= function() :Void {

var instanceName:String = “mcRotationBox” + boxCount; createRotationBox(instanceName); boxCount++; sndChime.start();

} 24. Guarde el archivo y pruebe la película; debe oír un sonido de campanadas cada vez que se asocia un nuevo RotationBox al escenario. 25. Cierre la ventana de prueba y también el archivo.

Unidad 7: Tomar decisiones y repetirse Objetivos de la unidad

Después de completar esta unidad, usted podrá: • Escribir y utilizar bucles de índice y variables de índice. • Utilizar valores de índice de bucles para asignar la ubicación y la profundidad

a las instancias MovieClip asociadas. • Comprender sentencias condicionales. • Comprender comparaciones condicionales y operadores lógicos. • Escribir sentencias if/then. • Escribir sentencias else if. • Escribir sentencias else. • Utilizar código condicional para alternar el estado visual de una instancia

MovieClip. Temas de la unidad

• ¿Qué es una sentencia de bucle? • ¿Qué es una sentencia condicional?

¿Qué es una sentencia de bucle? Una sentencia de bucle o repetición hace que Flash Player ejecute repetidamente el mismo bloque de código hasta que se cumpla alguna condición en especial. Controlando los requisitos de esa condición, controla cuántas veces se ejecuta el bucle. ActionScript admite cuatro tipos diferentes de sentencias de bucle. Bucle for (o de índice)

var aPlayers:Array = new Array(”Jan’, “Sue”, “Bob”); var playerCount:Number = aPlayers.length; for(var i:Number = 0; i < playerCount; i++) { trace (aPlayers [i]); }

El bucle for es el más usado en ActionScript. Es la herramienta principal para extraer datos de una matriz. Hay tres datos que se usan para determinar cómo se ejecuta un bucle for. 1. La declaración: Declare la variable de índice que se va a probar y asígnele su valor inicial. Esta configuración sólo se ejecuta una vez. 2. La condición: Establezca uia condición que debe ser verdadera para que el código del bucle se ejecute. La condición se prueba primero cada vez, antes de que se ejecute el código del bucle.

3. El procesamiento posterior al bucle: Cambie la variable de índice para que la condición sea falsa en algún punto y así finalice el bucle. El procesamiento posterior al bucle se ejecuta después de cada ejecución del código del bucle.

Observe que cada sentencia de la configuración está separada por punto y coma y no por coma. Si bien esto no suele hacerse, es posible declarar múltiples variables de índice, múltiples condiciones y múltiples procesos posteriores al bucle. Bucle for --- in

var oBook:Object = new Object( ); oBook.title = “The Golden Bough”; oBook.author = “James George Frazer”; oBook.ISBN = 0684826305; oBook.price = 21.00; oBook.inStock = true; for ( var prop in oBook) {

trace (prop) ; // displays “title”, “author”, “ISBN’, etc. trace(oBook[prop]); // displays “The Golden Bough”, etc.

} El bucle for-in repite (reproduce indefinidamente) las propiedades de un objeto. La variable del bucle contiene los nombres de propiedad y puede utilizarse para hacer referencia de forma dinámica a los valores de cada propiedad. Se trata de un herramienta de depuración muy útil cuando se está trabajando con objetos genéricos. Bucle while

var aNames:Array = [“Fred”, “Ginger”, “Sam”] while(aNames.length > 0) {

trace(”Names in array: ” + aNames.length) trace (aNames.pop());

}

El bucle while se ejecuta mientras su condición sea verdadera. Si nunca cambia nada en el código del bucle como para que la condición pase a ser falsa, se estará creando un bucle sin fin. Por regla general, el Flash Player anula los bucles sin fin. Bucle do --- while

var aNames:Array = []; do {

trace(“Names in array: ” + aNames.length); trace (aNames.pop()); while(aNames.length > 0)

} El bucle do-while siempre se ejecuta por lo menos una vez. Después, continúa ejecutándose mientras su condición siga siendo verdadera. En el código anterior, vería “Names in array: 0”, aun cuando la condición es falsa, porque la longitud de aNames no supera 0 y la condición no se ha comprobado hasta después de que el código del bucle se ha ejecutado.

Ensayo 7-1: Asociar múltiples MovieClips de una matriz de datos


• Reproducir indefinidamente una matriz para mostrar sus valores. • Crear nuevas instancias MovieClip pulsando un botón. Denominar y

ubicar estas instancias dinámicamente. según los datos de la matriz. Pasos 1. Abra wt7-1_start.fla y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit07\wt7-l.fla 2. En el panel Biblioteca, haga doble clic en el símbolo MovieClip PlayerName para acceder a su línea de tiempo. 3. Seleccione Campo de texto dinámico (Dynamic Textfield) en la capa texto y observe su nombre de instancia: txtPlayerName.

4. Haga clic en Escena 1 para volver a la línea de tiempo del documento principal. Exportar símbolos para usarlos en ActionScript 5. En el panel Biblioteca, haga clic en PlayerName y seleccione Vinculación. 6. En el cuadro de diálogo Propiedades de Vinculación, active la casilla de verificación Exportar para ActionScript, no cambie el Identificador predeterminado y haga clic en Aceptar. 7. Seleccione la instancia de botón GlowBall en el escenario y observe su nombre de instancia btnShowNames en el panel Propiedades.

Crear una matriz y usar sus valores

8. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 9. En la sección crear objetos, declare y cree una matriz denominada aNames con tres valores String: Fred, Ginger y Dean.

var aNames:Array = new Array(“Fred”, “Ginger”, “Dean”); 10. En la sección controlar eventos, escriba un controlador de eventos onRelease para btnShowNames.

btnShowNames.onRelease = function() :Void { }

11. En el cuerpo del controlador de eventos, escriba un bucle de índice que comience en 0 y se reproduzca hasta que la variable de índice i sea menor que la longitud de aNames. btnShowNames.onRelease = function (): Void {

for (var i:Number = 0; i < aNames.length; i++) { }

} 12. En el cuerpo de este bucle, haga un seguimiento del valor de su variable de índice. 13. Guarde y pruebe la película. 14. Pulse el botón y observe los valores de los que hizo un seguimiento en el panel Salida.

15. Cierre la ventana de prueba. 16. En el código, elimine la sentencia de seguimiento actual. 17. Inmediatamente antes del bucle dentro del controlador de eventos, declare una nueva variable String denominada instanceName. var instanceName:String; for(var i:Number = 0; i < aNames.length; i++) { } 18. Dentro del bucle, asigne la palabra literal player concatenada con el valor de su variable de índice como su valor.

var instanceName:String;

for (var i:Number = 0; i < aNames.length; i++) {

instanceName = “player” + i; }

19. Dentro del bucle, haga un seguimiento del valor de instanceName concatenado con un dos puntos, seguido del valor de aNames para este número de índice.

var instanceName : String; for(var i:Number = 0; i < aNames.length; i++) { instanceName = “player” + i; trace(instanceName + “: “ + aNames[i]; }

20. Guarde y pruebe la película. 21. Haga clic en el botón y observe los valores de los que hizo un seguimiento en el panel Salida.

22. Cierre la ventana de prueba. Crear IvlovieClips usando datos de matriz 23. En el código, elimine la sentencia de seguimiento actual. 24. Inmediatamente antes del bucle dentro del controlador de eventos, declare tres nuevas variables Number: thisX. thisY y thisDepth y asigne a thisX un valor de 60.

var instanceName:String; var thisX:Number = 60; var thisY:Number; var thisDepth:Number; for (var i:Number = 0; i < aNames.length; i++) {

instanceNane = “p1ayer” + i ; }

25. Dentro del bucle, asigne a thisY el valor de 60 multiplicado por el valor de su variable de índice y asigne a thisDepth el valor de la variable de índice: i.

var instanceName : String; var thisX:Number = 60; var thisY:Number; var thisDepth:Number; for (var i:Number = 0; i < aNames.length; i++) {

instanceName = “player” + i; thisY = 60 * i; thisDepth = i ;

}

26. Siempre dentro del bucle, utilice el método attachMovie( ) de la línea de tiempo del documento principal para asociar tres instancias de PlayerName al escenario. Use las variables instanceName y thisDepth para asignar estos valores.

for(var i:Number = 0; i < aNames.length; i++) {

instanceName = “player” + i; thisY = 60 * i; thisDepth = i; _root.attachMovie (“PlayerName”, instanceName, thisDepth);

}

27. Guarde y pruebe la película. 28. Haga clic en el botón y observe qyé aparece y dónde. 29. En la ventana de prueba, seleccione Depurar ---> Mostrar objetos. Observe qué objetos existen en la memoria, independientemente de lo que usted ve en el escenario.

30. Cierre la ventana de prueba. 31. Siempre dentro del bucle, haga referencia de forma dinámica a la instancia que acaba de crear y establezca sus propiedades _x e _y como thisX y thisY.

_root.attachMovie(”PlayerName”, instanceName, thisDepth); _root [instanceName] ._x = thisX; _root [instanceName] ._y = thisY;

32. A continuación, vuelva a hacer referencia de forma dinámica a la instancia que acaba de crear y establezca la propiedad text del TextField anidado playerName con el valor en la matriz aNames al valor actual de la variable de índice.

_root.attachMovie (”PlayerName”, instanceName, thisDepth); _root[instanceName] ._x = thisX; _root[instanceName] ._y = thisY; _root[instanceName] .txtPlayerName.text = aNames[i];

33. Guarde y pruebe la película. 34. Haga clic en el botón y observe qué instancias MovieClip aparecen, dónde lo hacen y qué texto contienen. Analice con su instructor los motivos por los que la primera instancia está alineada contra la parte superior del escenario.

35. Cierre la ventana de prueba. 36. En el controlador de eventos Button, por encima del bucle, añada un cuarto nombre a la matriz aNames.

btnShowNames.onRelease = function (): Void {

var instanceName:String; var thisX:Number = 60; var thisY:Number; var thisDepth:Number; aNames.push(“Sammy”); for(var i:Number = 0; i < aNames.length; i++) {

[…]

37. Guarde y pruebe la película. 38. Haga clic en el botón y observe el efecto. 39. Vuelva a hacer clic en el botón y analice lo que ve con el instructor. 40. Cierre la ventana de prueba. 41. En el controlador de eventos Button, cambie las referencias absolutas _root a referencias relativas del botón _parent de this cuyos eventos está controlando. btnShowNames.onRelease = function() :Void {

var instanceName : String; var thisX:Number = 60; var thisY:Number; var thisDepth:Number; aNames .push(“Sammy”); for(var i:Number = 0; i < aNames.length; i++) {

instanceName = “player’ + i; thisY = 60 * i; thisDepth = i; this.parent.attachMovie(“PlayerName”, instanceName, thisDepth) this._parent[instanceName] ._x = thisX; this._parent[instanceName] ._y = thisY; this._parent[instanceName].txtplayerName.text = aNames[i];

} } 42. Guarde el archivo y pruebe la película. 43. Haga clic en el botón; el efecto debería ser el mismo que antes. 44. Repase con el instructor las ventajas y desventajas de usar rutas absolutas o relativas. 45. Cierre la ventana de prueba y también el archivo.

¿Qué es una sentencia condicional? En cualquier programa, las sentencias condicionales son lo que permiten que el software aparente pensar tomando decisiones. Las Expresiones condicionales --sentencias que deben evaluarse respecto de un valor booleano de true o false -- se prueban de varias maneras. Si una expresión es verdadera, sucede una cosa: si es falsa, otra. ActionScript admite tres tipos de sentencias condicionales:

• if/else: Si (If) una expresión es true (verdadera), hace una cosa, si no (else), hace otra. • switch / case: Se evalúa una única expresión y su valor se hace coincidir con varias posibilidades diferentes (casos). Cuando se encuentra una coincidencia, se ejecuta el código para ese caso. Las sentencias Switch / case no se estudian en este curso. • operador condicional: Se prueba una condición y se devuelve un valor diferente dependiendo de si la condición es verdadera (true) o falsa (false). El uso del operador condicional no se estudia en este curso.

¿Cómo pregunto si algo es verdadero (true)? Las sentencias condicionales (e incluso los bucles, como ya hemos visto) operan sobre la base de corroborar si las cosas son verdaderas (true) o falsas (false). Para formular estas preguntas, se comparan cosas de cierta manera. Si las expresiones de comparación son verdaderas, entonces la condición es verdadera y el código se ejecuta. Si no (else), sucede otra cosa. ActionScript admite siete operadores de comparación distintos. Estos operadores se usan para escribir expresiones de comparación: sentencias que son o verdaderas (true) o falsa (false). Para estudiar condiciones, lo más fácil es simplemente escribir una expresión como si le estuviese haciendo una pregunta a alguien. En este caso, le está hablando a Flash Player. ¿Es verdad (true) que:

• x > y x es mayor que y? • x >= y x es mayor o igual a y? • x < y x es menor que y? • x <= y x es menor o igual a y? • x== y x equivale a (no “es igual a”) y? • x != y x no equivale a y? • x instanceof y x es una instancia de una clase denominada y?

En código, una sentencia condicional (una sentencia if) se vería como éstas:

var password:String = “fly”; if(txtPassword.text == password) {

// runs it User typed “fly” in the password field } if(aPlayers instanceof Array) {

// runs if aPlayers is an instance of the Array class }

En toda sentencia condicional (sentencia if), si la expresión se evalúa respecto de un valor booleano de true, se ejecuta el código que está en las llaves que aparecen a continuación. Si es false, el código se omite y la ejecución continua después de que se cierra la llave. ¿Cómo pregunto si algo es falso (false)? El operador lógico not ( ! ) permite escribir una expresión que pregunte si una expresión de comparación no es verdadera (true) (es decir, si es falsa:false). ¿Es verdad (true) que:

• !( x > y) x NO es mayor que y? • !(x >= y) x NO es mayor o igual a y? • !(x <y) x NO es menor que y? • !(x <= y) x NO es menor o igual a y? • !(x== y) x NO equivale a (no “es igual a”) y? • !(x != y) x NO no equivale a y? (raro, pero válido) • !(x instanceof y) x NO es una instancia de una clase denominada y?

En código, una sentencia condicional de este tipo se vería como éstas:

var password:String = “fly”; if(! (txtpassword.text == password)) {

// runs it User typed anything but “fly” in txtPassword } if(!(aPlayers instanceof Array)) {

// runs it aPlayers is anything but an Array }

¿Cómo pregunto más de una cosa cada vez? Hay varias maneras diferentes en que puede hacer esto, según lo que desee saber en concreto. Cuando hace varias preguntas, ¿desea saber si:

• dos o más cosas son todas verdaderas (true)? • al menos una de estas cosas es verdadera (true)?

• si una cosa es verdadera (true), entonces otra más también es verdadera (true)?

ActionScript admite dos operadores lógicos: and ( && ) y or (II) que pueden utilizarse para crear sentencias condicionales compuestas: sentencias que comparan más de una cosa en una sola condición. Además, ActionScript también nos permite anidar una condición dentro de otra, lo que nos permite formular preguntas según la tercera modalidad que se ha descrito antes. Operador lógico AND ( && ) Si desea saber si dos cosas o más son todas verdaderas (true), lo que está preguntando es lo siguiente: ¿estoy esto y esto es verdadero (true)? En ActionScript, dos & (&&) significan y. Lo que está preguntando es lo siguiente:

if(expression1 AND expression2) { // runs it comparison expressions 1 and 2 are both true }

En código real, este tipo de condición compuesta podría verse así:

var password:String = “fly” var oPlayer:Object = new Object(); oPlayer.name = “Ginger”; oPlayer.admin = true; if(txtPassword.text == “fly” && player.adrnin == true) {

// because the password is correct and this player // is an administrator, ,Iet them use cheat codes adminMode(true);

} Cuando se utiliza el operador lógico &&, las dos expresiones de comparación deben ser verdaderas (true) para que toda la sentencia condicional compuesta (sentencia if) sea verdadera (true). Si alguna de las dos sentencias de comparación es falsa (false), entonces toda la condición es falsa (false), porque no es verdad (true) que la primera sentencia Y la segunda sentencia sean verdaderas (true), que es justamente lo que se está preguntando. Operador lógico OR ( || ) Si desea saber si una de dos cosas (o más) es verdadera (true), lo que está preguntando es lo siguiente: ¿esto o esto o esto es verdadero (true)? En ActionScript, dos | (|| ) significan o (el carácter | suele ser mayúsculas-barra invertida, justo encima de la tecla Intro). Lo que está preguntando es lo siguiente: if (expression3 OR !(expression4)) { // runs it expression 3 is true or 4 is not true }

En código real, este tipo de condición compuesta podría verse así:

if(player.highScore < 200 || !(player.status == “expert”)) {

// it their high score is low, or their status // is not “expert”, take it easy on them easyMode(true);

} Cuando se usa el operador lógico ||, por lo menos una de las expresiones de comparación a cada lado del operador debe ser verdadera (true). También pueden ser verdaderas (true) las dos. Si alguna de las dos sentencias es verdadera, entonces toda la condición es verdadera (true), porque es verdadero (true) que la primera o la segunda sentencia es verdadera (true) y esa es la pregunta que se está haciendo. Condiciones anidadas En ocasiones sólo tiene sentido hacer una segunda pregunta después de que se sepa que la respuesta a otra pregunta ya es verdadera (true). ActionScript le permite anidar sentencias condicionales una dentro de la otra para que pueda hacer preguntas de esta manera. Lo que está preguntando es lo siguiente:

if(algo es verdad) {

// puesto que lo primero es verdadero, realice algo, // entonces haga otra pregunta relacionada if(entonces algo más también es verdad?) {

// haga algo que sólo tiene sentido si las dos // condiciones previas son verdaderas

} }

En código real, las sentencias condicionales anidadas se verían como ésta: if(this._rotation <= 0) {

// if I’ve rotated more than 180 degrees // then shrink me a little bit this._xscale = this. xscale - 10; if(this._xscale <= 0) {

// okay, now if I’ve shrunk to small I’m // invisible, then unload me from the Flash // Player to save memory this.unloadMovie();

} }

¿Puedo hacer algo solamente si una condición es falsa (false)? Sí, claro. ActionScript permite sentencias else y else if que únicamente se ejecutan si la condición es falsa (false). Sentencias else Una sentencia else brinda una alternativa a una sentencia condicional, por si acaso ésta resultara falsa (false). Se las puede considerar sentencias predeterminadas, que únicamente se ejecutan si la condición que se está probando no es verdadera (true). Lo que está diciendo es lo siguiente:

si (algo es verdadero) {

// realice algo adecuado } else {

// no fue verdad, por lo tanto realice otra cosa }

En código real, una sentencia else se vería como ésta: if (txtPassword.text == “fly”) {

adminMode(true); } else {

// okay, we know the player’s not. an admin, // so give ‘em a regular game regularMode (true);

} Sentencia else if También puede hacer varias preguntas (condiciones) en las que la segunda pregunta únicamente tenga sentido si la respuesta a la anterior ha sido falsa (false). Para ello, combinamos else con otro if.

si (algo es verdadero) // do something appropriate

else if(something else is true) {

// okay, do something different } else {

// none of the aboye were true, so do this }

En código real, una sentencia else if y else se vería como ésta:

if (txtPassword.text == “fly”) {

// give ‘em the cheats adminMode(true)

} else if(player.highScore < 200) {

// newbie, so take it easy easyMode (true);

} else {

// serve em up regular style regularMode(true);

} ¿Cómo sé cuál de todas usar? Si bien siempre resulta práctico pensar en el código ActionScript como una conversación con Flash Player, esto es especialmente así con la lógica condicional. Flash Player tiene las respuestas. Entonces, piense en las preguntas que le haría a alguien que tuviese todas las respuestas en español común, usando las palabras si (if) y si no (else). Piense en qué casos más de una cosa debería ser verdad y si estaría bien que una sola fuese verdad. Piense en qué casos algo debe ser verdad antes de que tenga sentido preguntar otra cosa. Formule las preguntas en voz alta y es posible que el código casi se escriba solo.

Ensayo 7-2: Alternar el estado visual de un MovieClip usando código condicional En este ensayo, llevará a cabo las siguientes tareas:

• Escribir código para alternar entre dos estados visuales diferentes de una instancia MovieClip. • Usar una sentencia condicional para examinar el valor actual de la propiedad _alpha y responder según este valor cada vez que el clip de película difunda un evento onRelease.

Pasos

1. Abra wt7-2_start.fla y guárdelo como: {Cursos}\AS2.0\flas800\walk\unit07\wt7-2.fla 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 3. En la sección controlar eventos del código, escriba un controlador de eventos onRelease para la instancia MovieClip en el Escenario. Utilice la herramienta Insertar ruta de destino para determinar su nombre de instancia.

4. Dentro del controlador de eventos, haga un seguimiento del valor de la propiedad _alpha del MovieClip cuyo evento se está controlando.

mcSalad.onRelease = function():Void {

trace(this._alpha); }

5. Guarde la película y pruébela. Haga clic en salad para visualizar el valor predeterminado de la propiedad _alplia que se muestra en el panel Salida. 6. Cierre la ventana de prueba.

Utilizar una condición para controlar el comportamiento visual 7. En su código, rodee la sentencia trace con una sentencia condicional para que el seguimiento sólo se ejecute si la propiedad _alpha de MovieClip es equivalente a 100.


if(this._alpha ==100) {

trace (this._alpha); }

} 8. En el escenario, seleccione mcSalad y abra el panel Propiedades. 9. Seleccione Alfa del menú desplegable Transformaciones de Color y establezca este valor en 30%

10. Guarde la película y pruébela. Haga clic Salad y observe que no se muestra ningún valor en el panel Salida. 11. Cierre la ventana de prueba. 12. En su código, modifique la sentencia condicional para que si el valor de _alpha es equivalente a 100, esta propiedad se establezca en 30; si no, se vuelve a establecer en 100.


if(this._alpha == 100) {

this._alpha = 30; } else {

this._alpha = 100; } }

13. Guarde el archivo y pruebe la película. Haga clic varias veces en salad.

Ahora puede hacer que el clip de película que en un principio aparece desvanecido pase a un color pleno y vuelva a desvanecerse.



• Los bucles for (de índice) cuentan desde un valor hasta el otro. • Por lo general, hay tres sentencias en un buclefor:

• Setup: declara e inicializa las variables de índice • Condition: prueba si el bucle debe ejecutarse • Post-loop: cambia la variable de índice

• Los bucles for suelen utilizarse para hacer referencia a valores de matriz. • Las expresiones pueden comparar dos valores: > >= << == != instanceof. • Si una expresión es verdadera (true), se ejecutará un bloque de código. Si no, puede ejecutarse un bloque de código predeterminado. • Las condiciones pueden anidarse.

Repaso de la unidad

1. ¿Cuándo deja de ejecutarse un bucle?

2. ¿Cómo se reproducen indefinidamente los índices de una matriz?

3. ¿Cómo se pregunta si dos cosas son, las dos, verdaderas (true)?

4. ¿Cómo se hace para que el código se ejecute solamente si algo es falso (false)?

5. ¿Cómo formularía tres preguntas diferentes en las que sólo una de ellas pudiera ser verdad (true)?

Laboratorio 7: Analizar el cambio de propiedades, responder a los cambios y llamar reiteradamente a las funciones En este laboratorio, llevará a cabo las siguientes tareas: • Usar sentencias condicionales anidadas para probar la rotación de cada instancia RotationBox, lo que hace que se reduzca de tamaño y se descargue en un punto específico. • Utilizar un bucle de índice para determinar cuántas cajas aparecen cada vez que comienza un juego nuevo. Objetivos Después de completar este laboratorio, usted podrá:

• Utilizar sentencias condicionales para asegurar que se establezca un valor sólo una vez. • Utilizar sentencias condicionales anidadas para evaluar y responder a los valores de propiedad que cambian en tiempo de ejecución. • Utilizar bucles de índice para ejeutar repetidamente las líneas de código.

Pasos 1. Abra flas800_lab6.fla y guárdelo como:

{Cursos}\AS2.0\flas800\lab\flas800_lab7.fla 2. En el panel Biblioteca, haga doble clic en RotationBox para editar su línea de tiempo. 3. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. Crear tasas de rotación variable 4. Declare una nueva variable Number denominada changeRate y asígnela a un entero aleatorio dentro de un rango de 5 a 15.

var changeRate:Number = Math.round(Math.random() * 10) + 5;

5. Modifique la sentencia existente incrementando la propiedad _rotation de esta instancia según el valor changeRate. Utilice un operador de asignación compuesto.

this._rotation += changeRate; 6. Guarde la película y pruéhela. Haga clic en el botón juego nuevo varias veces para crear algunos objetos RotationBox.

Observe que cada instancia se mueve bruscamente, porque su changeRate se vuelve a calcular cada vez que la cabeza lectora vuelve a reproducir el fotograma 1 dentro de la línea de tiempo en la que ha colocado el código. 7. Cierre la ventana de prueba. 8. Regrese al código que está dentro de RotationBox. 9. Modifique el código para que después de que haya declarado changeRate, sólo le asigne un valor si éste no está definido.

var changeRate:Number; if(changeRate == undefined) {

changeRate = Math.round(Math.random() * 10) + 5; } this._rotation += changeRate;

10. Guarde la película y pruébela. Cree varios objetos RotationBox. Observe que cada objeto gira a diferente velocidad, pero se mueve suavemente dentro de su velocidad. Esto se debe a que changeRate se calcula ahora una vez sola, a medida que se crea cada instancia. Después, su valor ya no está indefinido, por lo que la sentencia condicional impide que vuelva a calcularse. 11. Cierre la ventana de prueba. 12. Vuelva al código de la Línea de tiempo del documento principal. 13. En la sección definir funciones, busque la función createRandomColorTransformO y elimine todas las sentencias trace que haya dentro de ésta (y en cualquier otro lugar del código). 14. En la Biblioteca, haga doble clic en RotationBox para volver a editar su línea de tiempo y regrese al código en su capa acciones. 15. Al final del código, haga un seguimiento del valor de la propiedad _rotation.

this._rotation += changeRate; trace (this._rotation);

16. Guarde la película y pruébela. Cree una instancia de RotationBox. En el panel Salida, observe cómo aumenta el valor _rotation según su changeRate hasta 180, pero luego salta a -1 80. La propiedad _rotation de MovieClip acepta valores dentro del rango -180 a 180, no de O a 360. 17. Cierre la ventana de prueba.

Responder a cambios en los valores de propiedad 18. Regrese a su código RotationBox. 19. Al final del código, escriba una condición que establezca que si esta instancia ha girado 180 grados o más —si su propiedad _rotation es menor que 0— entonces deben reducirse sus _xscale y su _yscale, en 10 cada uno.

if(this._rotation <= 0) {

this._xscale -= 10; this._yscale -= 10;

} 20. Dentro de esta condición, escriba una condición anidada: si _xscale desciende a 0 o por debajo de 0 (es menor o igual a 0) descargue este objeto RotationBox en particular.

if (this._rotation <= 0) {

this._xscale -= 10; this._yscale -= 10; if(this.xscale <= 0) {

this.unloadMovie(); } }

21. Guarde la película y pruébela. Cree varias instancias RotationBox. Observe sus velocidades de rotación y cómo se relaciona eso con el momento y los motivos por los que se reducen en tamaño y desaparecen. Observe el efecto de “desaparecer hacia el fondo” que se genera. 22. Cierre la ventana de prueba. 23. Vuelva a la línea de tiempo del documento principal. 24. Seleccione Modificar --->Documento en el cuadro de diálogo Propiedades del documento, suba la velocidad de fotogramas a 24 fps y haga clic en Aceptar. 25. Guarde y pruebe la película. Observe el efecto que causa la velocidad de fotogramas en la manera en que aparece la animación basada en la línea de tiempo, aun cuando el cambio está ocurriendo a través de código. ¿Cómo se relaciona esto con el lugar en el que está ubicado su código ActionScript?

26. Cierre la ventana de prueba. Ejecutar código un número especificado de veces 27. En la sección declarar variables y nombres de instancias del código de la línea de tiempo principal, declare una nueva variable Number denominada boxesPerGame y asígnele un valor predeterminado de 10. var boxesPerGame:Number = 10; 28. En el controlador de eventos de btnNewGame onRelease, utilice un bucle de índice para crear el número de cajas especificado en boxesPerGame cada vez que se suelta el botón btnNewGame (aunque sólo debe reproducir el objeto Sound una vez). Recuerde que cada instancia debe tener un nombre de instancia único.

btnNewGame.onRelease = function():Void { for(var i:Number = 0; i < boxesPerGame; i++) {

var insanceName:String = “mcRotationBox” + boxCount; createRotationBox (instanceName) boxcount÷+;

} sndChime.start(); }

29. Mueva la declaración de la variable instanceName fuera del bucle, pero mantenga la asignación dentro, para que la variable no deba volver a crear instancias todo el tiempo en el bucle, sino que simplemente se le asigne un valor nuevo.


var instanceName:String; for (var i:Number =0; i < boxesPerGame; i++) {

instanceName = “mcRotationBox” + boxCount; createRotationBox (instanceName); boxCount++;

} sndchime.start ();

} 30. Guarde el archivo y pruebe la película. 31. Haga clic en el botón juego nuevo y observe que, aun cuando todas las cajas se crearon a la vez, cada una tiene una posición y tina velocidad de rotación únicas. 32. Cierre la ventana de prueba y también el archivo.

Unidad 8: Animación con ActionScript Objetivos de la unidad

Después de completar esta unidad, usted podrá:

• Arrastrar instancias MovieClip con el ratón. • Colocar MovieClips arrastrados. • Probar cuándo un MovieClip alcanza a otro. • Usar el controlador de eventos onEnterFrame para crear una animación basada en el código.

Temas de la unidad

• ¿Cómo hago para que mi usuario arrastre y suelte un MovieClip? • ¿Cómo sé si dos objetos se tocan? • ¿Cómo animar instancias MovieClip usando ActionScript?

¿Cómo hago para que mi usuario arrastre y suelte un MovieClip? Cualquier instancia MovieClip puede ser recogida, arrastrada y soltada por el usuario. La clase de MovieClip tiene métodos llamados startDrag() y stopDrag para permitir esta funcionalidad. Método startDrag() El método startDrag() permite que la instancia de MovieClip sobre la que se le solicita “se asocia al ratón” y se arrastre alrededor del escenario de su película a medida que mueve el ratón. Aunque esta función se puede solicitar en cualquier código, normalmente se llame dentro de un controlador de eventos onPress. Los usuarios esperan hacer clic en el botón de su ratón cuando el cursor se encuentra sobre un objeto para “recogerlo”. En código, esto puede tener un aspecto como el siguiente:

var mcBal1:MovieClip; mcBal1.onPress = function() :Void {

this.startDrag(); }

Aunque no se requiere, y como ya hemos visto, es una práctica común usar la palabra clave this dentro de los controladores de eventos para referirse al objeto que difunde el evento.

Método stopDrag() El método stopDrag() permite que la instancia MovieClip sobre la que se le llama “se separe desde el ratón” y se sitúe en cualquier coordenada x e y ocupadas por su punto de registro ocurre una llamada al método. Al igual que con startDrag(),este método se puede solicitar en cualquier código, pero más a menudo se llame en un controlador de eventos onRelease; los usuarios esperan poder soltar algo al dejar de pulsar el botón del ratón. En código, esto puede tener un aspecto como el siguiente:

var mcBal1 :MovieClip; mcBal1.onRelease = function() :Void {

this.stopDrag(); }

Funciones globales startDrag() y stopDrag() Por razones de compatibilidad con versiones anteriores, también es posible llamar a startDrag() y stopDrag() como funciones globales, más que como métodos, aunque ésta no es una buena práctica. Al hacer esto, el MovieClip de destino que va a ser arrastrado debe especificarse como un argumento. Debido a esta sutil distinción, siempre debe llamar previamente a los métodos startDrag() o stopDrag() con un nombre de instancia específico o con la palabra clave this. ¿Cómo sé si dos objetos se tocan? Al diseñar interfaces interactivas, se combinan tres técnicas visuales para permitir que el usuario trabaje con el escritorio: las opciones arrastrar y colocar recién cubiertas, más colisión o prueba de zona activa. Usadas en conjunto, estas técnicas le permiten crear metáforas visuales para su usuario y determinar cómo éstos usan esas metáforas: ¿qué se está moviendo, dónde y que está tocando? ¿Han arrastrado el libro y lo han soltado en la cesta de finalización de la compra o lo han devuelto a la estantería? ¿Han tomado y colocado la pieza de ajedrez del caballo en un cuadrado legal? ¿Han puesto el indicador en el registro? Método hitTest() Las instancias MovieClip poseen un método llamado hitTest(). El nombre de instancia de otro MovieClip se pasa como un argumento a este método, y el método devuelve como verdadero o falso dependiendo de si el primer objeto toca el recuadro de delimitación o la forma interna del segundo objeto. Si desea probar si la forma del primer objeto está tocando, más que el recuadro de delimitación, pase un segundo argumento opcional, conocido como el indicador de forma de verdadero.

instanceName.hitTest(targetInstance [, shape flag]);

Por otra parte, puede probar si el primer objeto está tocando una coordinada específica x e y en el escenario.

instanceName.hitTest(target X, target Y); Comúnmente, a este método se llamaría en una condición escrita dentro de un controlador de eventos onRelease que está colocando una instancia MovieClip. Desea saber dónde se colocó un MovieClip. En código, la prueba para la colisión con MovieClip podría tener el siguiente aspecto:

var mcNeedle : MovieClip; var mcRecord : Movieclip; mcNeedle.onRelease = function() :Void {

this.stopDrag() //Han puesto el mcNeedle en el mcRecord? if(this.hitTest(mcRecord)) {

trace (“Han puesto el indicador en el registro…”); } else {

trace(”sssscrrraaaaaatccchhh!!!”); }

} Por otra parte, si estuviera probando para la colisión con una coordenada específica su código podría tener el siguiente aspecto:

var mcPuzzlePiece :MovieClip mcPuzzlePiece.onRelease = function():Void {

this.stopDrag(); if(this.hitTest(0,0)) {

trace (“pieza del rompecabezas tocando la parte superior izquierda del escenario”);

} }

Observe que en ambos ejemplos presentados más arriba, hitTest() se solicita directamente en la sentencia condicional. Cuando un método devuelve un valor booleano, puede ser solicitado directamente en una condición. Aunque puede probar si el método devuelve el valor verdadero, hacerlo es redundante e innecesario.

[ … ] si (this.hitTest(mcRecord) == verdadero) // ==verdadero es

redundante {

trace (“Han puesto el indicador en el registro…” ); }

¿Qué es un recuadro de delimitación y qué es una forma? Cada MovieClip tiene una región alrededor que se conoce como su recuadro de delimitación. Esta es el área que, de forma predeterminada, Flash Player mira para determinar si dos objetos se tocan en un hitTest(). Como se observa más arriba, puede probar opcionalmente contra la forma interna de un MovieClip, que puede ser menor que el área del recuadro de delimitación.

Si desea probar si una forma interna está tocando al MovieClip de destino, coloque al argumento indicador de forma opcional en verdadero. El código puede ser similar al siguiente:

var mcFork:MovieClip; var mcFruitCup:MovieClip; mcFork.onRelease = function() :Void {

this.stopDrag(); // ¿está la forma de tenedor tocando la copa de la

fruta? if(this.hitTest(mcFruitCup, true)) {

trace(“mmmm … tasty”); stickFruitToFork ();

} }

Ensayo 8-1: Arrastrar, soltar y realizar una prueba de zona activa a un MovieClip En este ensayo, llevará a cabo las siguientes tareas:

• Crear una instancia MovieClip que se pueda arrastrar y soltar. • Probar dónde se encuentra el MovieClip y si se encuentra en la zona equivocada, reproducir un sonido y enviarlo de nuevo a su posición inicial.

Pasos 1. Abra wt8-1 start.fla, y guárdelo como:

{Cursos}\AS2.0\flas800\walk\unit08\wt8-1.fla 2. Si no ha completado el laboratorio 7, revise los activos, los nombres de instancias y ActionScript en FLA. 3. Pruebe la película para observar el comportamiento actual; cierre la ventana de prueba. Arrastrar y soltar una instancia MovieClip 4. Seleccione Ver Reglas. 5. En la capa contenido, dibuje una forma circular de aproximadamente 50 píxeles de diámetro con cualquier trazo y rellénela como desee. 6. Seleccione toda la forma (el trazo y el relleno); a continuación, seleccione Modificar convertir en símbolo; en cuadro de diálogo Convertir, cree un símbolo de MovieClip llamado BoxExploder y haga clic en Aceptar. 7. Seleccione la instancia de BoxExploder en el escenario y en el panel Propiedades asigne los siguientes valores:

• Nombre de la instancia mcBoxExploder • x: 50 • y: 50

8. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 9. En las secciones del código Declarar variables y nombres de instancia, declare esta instancia MovieClip.

var mcBoxExploder:MovieClip; 10. En la sección controlar eventos, cree un método de controlador de eventos onPress y un método de controlador de eventos onRelease para esta instancia.

mcBoxExploder.onPress=function():Void { } mcBoxExploder.onRelease=function():Void { }

11. Dentro del método onPress, invoque el método startDrag() de la clase MovieClip en esta instancia.

mcBoxExploder.onPress = function():Void {

this.startDrag(); }

12. Dentro del método onRelease, invoque el método stopDrag().

mcBoxExploder.onRelease = function() :Void {

this.stopDrag(); }

13. Guarde y pruebe la película: haga clic en el círculo, arrástrelo alrededor de la ventana y suéltelo. 14. Cierre la ventana de prueba. Responder cuando una instancia MovieClip alcanza a otra. 15. Seleccione Archivo Importar Importar a Biblioteca. 16. Desde el directorio \flas800\assets , importe los siguientes archivos:

• boing.wav • cork_pop.wav

17. Haga clic con el botón derecho del ratón sobre cada uno de estos archivos WAV importados en el panel Biblioteca, seleccione Vinculación; en el cuadro de diálogo Propiedades de vinculación, seleccione Exportar para ActionScript y haga clic en Aceptar. 18. En la sección del código crear objetos, cree una nueva instancia de la clase de Sonido llamada sndBoing y use el método attachSound() para adjuntar boing.wav desde la Biblioteca.

var sndBoing:Sound = new Sound(); sndBoing.attachSound (“boing.wav”);

19. En la sección del código crear objetos, cree una nueva instancia de la clase de Sonido llamada sndPop y use el método attachSound() para adjuntar cork_pop.wav desde la Biblioteca.

var sndPop:Sound = new Sound(); sndPop.attachSound (“cork_pop.wav”);

20. En el controlador onRelease para mcBoxExploder, escriba una condición probando si esta instancia de BoxExploder está colisionando con (“golpeando”) el cuadro de delimitación del objeto mcPlayerlnfo, silo está, realice un seguimiento de “golpeando mcPlayerlnfo” o “no golpeando mcPlayerlnfo”.

mcBoxExploder.onRelease = function() :Void {

this.stopDrag() if(this.hitTest(mcPlayerInfo)) {

trace (“hitting mcPlayerInfo”); } else {

trace(“not hitting mcPlayerInfo”); }

} 21. Guarde y pruebe la película, arrastre y libere el círculo en diferentes partes de la ventana. Observe que se traza una frase en el panel Salida cada vez que coloca mcBoxExploder. Observe lo que ocurre cuando está o no golpeando mcPlayerlnfo (los campos de texto en la parte inferior de la ventana) 22. Cierre la ventana de prueba. 23. En su código, convierta cada sentencia trace en un comentario en el controlador de eventos onRelease; a continuación, convierta en un comentario todo el bloque else. 24. En la sentencia condicional, use el método start() de sndBoing para reproducir el sonido y coloque las propiedades _x e _y de esta instancia de vuelta en 50. mcBoxExploder.onRelease = function():Void {

this.stopDrag(); if(this.hitTest(mcPlayerInfo, false)) {

// trace (“golpeando mcPlayerInfo”) sndBoing.start(); this._x = 50; this._y = 50;

} /* else {

// trace(”no golpeando mcPlayerInfo”) } */

} 25. Guarde el archivo y pruebe la película; arrastre y libere el círculo en diferentes partes de la ventana. Observe el nuevo comportamiento si coloca el círculo sobre mcPlayerlnfo. 26. Cierre la ventana de prueba.

¿Cómo animar instancias MovieClip usando ActionScript? En las animaciones Flash clásicas basadas en línea de tiempo, el cambio visual ocurre en el escenario cada vez que la cabeza lectora accede a un nuevo fotograma clave que tiene diferente contenido visual que el fotograma clave anterior.

Para lograr el mismo resultado usando ActionScript, creamos un controlador de eventos para escuchar y responder cada vez que la cabeza lectora accede a un nuevo fotograma clave. controlador de eventos onEnterFrame Cada vez que la cabeza lectora accede a un nuevo fotograma, no un fotograma clave, pero si un fotograma, se difunde un evento onEnterFrame. Porque toda la película se ejecuta a la velocidad de fotogramas programada en el panel Propiedades, todos los controladores de eventos onEnterFrame se ejecutan efectivamente de manera simultánea a la velocidad de fotogramas de la película. Los cambios hechos en las propiedades de los objetos visuales en un controlador de eventos onEnterFrame aparecerán en el escenario. Para hacer que una instancia MovieClip se mueva a través del escenario, por ejemplo, simplemente cambie su propiedad _x en un controlador onEnterFrame.

var mcBal1 :MovieClip; var velocity:Number = 10; mcBal1.onEnterFrame = function():Void {

// mover una bola 10 píxeles hacia la derecha de cada fotograma. this._x += velocity;

}

¿Cómo controlo la dirección y la velocidad de una animación? La esquina superior izquierda del escenario es x:0 e y:0. Si aumentando _y, se mueve un objeto hacia abajo, y, si aumentando _x, se mueve un objeto hacia la derecha a través del escenario. Si disminuya _y, se mueve un objeto hacia arriba en el escenario. Si disminuya _y, se mueve un objeto hacia la izquierda a través del escenario. Aunque no es requerido, es una práctica común crear una variable para mantener y controlar la cantidad de cambio (la frecuencia de cambio o velocidad) que ha de aplicarse a la propiedad visual, como _x o _y, para cada fotograma. Manteniendo este valor en una variable, es fácil cambiarlo matemáticamente. Por ejemplo, puede hacer que su bola vaya en la dirección contraria si está dentro de los 50 píxeles del borde del escenario. Para hacer esto, pruebe su posición en cada fotograma; si está dentro de los 50 píxeles desde el borde más alejado, multiplique la velocidad por -1, de manera que agrega un número negativo, cambiando la dirección de su movimiento.

En código, esta técnica puede tener un aspecto como el siguiente:

var mcBal1 :MovieClip; var velocity:Number = 10; mcBal1.onEnterFrame = function():Void {

// mover por píxeles de velocidad hacia la derecha/izquierda (_x) de cada fotograma. this._x += velocity; if(this._x >= 450) {

//cambiar la velocidad desde 10 a -10. velocidad *= -1;

} }

Este mismo enfoque se puede aplicar para casi cualquier propiedad visual que acepta valores numéricos: _rotation, _alpha, _xscale, _yscale, etc. Dentro del controlador de eventos onEnterFrame, cree sentencias condicionales para probar el valor de una propiedad particular de cada fotograma y, a continuación, responda cuando cualquier valor dado alcanza un umbral en el que está interesado (como superar un número que ha determinado dentro de los 50 píxeles del borde derecho de su escenario). ¿Cómo puedo animar objetos múltiples? En este curso, ya hemos tratado el método attachMovie() Este método le permite crear nuevas instancias MovieClip desde un símbolo (una clase) en la Biblioteca. Como parte de este proceso, aseguramos que cada nueva instancia tenga una profundidad única.

var nextDepth:Number = his.getNextHighestDepth(); this.attachMovie (“Box”, “mcBox1”, nextDepth);

Inicialización de objetos El método attachMovie() le permite asignar cualquier propiedad, y cualquier controlador de eventos que desee a cada instancia recién asociada. Esto se hace creando un objeto genérico y asignando las propiedades y controladores de eventos que desee a su nueva iñstancia para tener ese objeto. Luego pasa ese objeto genérico, llamado un objeto de inicialización, como el cuarto argumento opcional para el método attachMovie().

var init:Object=new Object(); init._x = Math.round(Math.random() * 100); init._y = Math.round(Math.random() * 100); init.onPress = function() :Void {

this._alpha = 30 } this.attachMovie(“Box”, “mBox1”, nextDeph, init);

En este ejemplo, mcBox1 aparecerá en una posición _x y _x calculada de manera aleatoria, cada uno entre 0 e 100, y tendrá un controlador de eventos onPress asociado a él. Si el usuario presiona mcBox1, desaparecerá a un _alpha de 30. Este enfoque se puede usar para asignar el valor inicial de cada propiedad del nuevo MovieClip. También puede inventar nuevas propiedades, añadirlas al objeto de inicialización y pasarlas a una nueva instancia asociada. También puede usar este enfoque para agregar cualquier controlador de eventos que desee a cada nueva instancia creada, incluyendo onEnterFrame. Si desea una instancia recién asociada para mover de manera aleatoria, su código puede tener un aspecto como el siguiente:

var init:Object = new Object(); init._x = Math.round(Math.random() * 100); init._y = Math.round(Math.random() * 100); init.xVelocity = Math.round(Math.random() * 20) * 10; init.yVelocity = Math.round(Math.random() * 20) * 10; init.onEnterFrame = function():Void {

this._x += this.xVelocity; this._y += this.yVelocity;

} this.attachMovie (“Box”, “mcBox1”, nextDepth, init);

Ensayo 8-2: Iniciar los MovieClip asociados con un controlador onEnterFrame

En este ensayo, llevará a cabo las siguientes tareas: • Permitir que cada instancia RotationBox se mueva libremente sobre el escenario, rebotando fiera de los bordes del escenario. • Comprobar si un RotationBox alcanza el BoxExploder. • Si una RotationBox alcanza el BoxExploder, hacerla crecer, aparecer y, a continuación, agregar puntos a la puntuación.

Pasos 1. Regrese a wt8-1.fla y guárdelo como:

{Cursos)\AS2.0\flas800\walk\unit08\wt8-2.fla

Animar individualmente objetos de MovieClip usando un objeto de inicialización. 2. Seleccione el fotograma 1 de la capa acciones y abra el panel Acciones. 3. En la sección crear objetos, declare un nuevo objeto genérico llamado init.

var init:Object = new Object(); 4. En la función createRotationBox(), cree dos propiedades en init, xVelocity y yVelocity, y asigne a cada una un entero aleatorio en un rango entre -10 y 10.

function createRotationBox(thisName:String) :Void {

var nextDepth:Number = this.getNextHighestDepth(); var thisX:Number = Math.round(Math.random() * 600) + 50; var thisY:Number = Math.round(Math.random() * 400) + 50; init.xVelocity = Math.round(Math.random() * 20) - 10; init.yVelocity = Math.round(Math.random() * 20) - 10;

} 5. Pase init como el cuarto argumento al método attachMovie() en la función createRotationBox().

this.attachMovie(“RotationBox”, thisName, nextDepth, init); 6. En la sección controlador de eventos, cree un método de controlador de eventos onEnterFrame para init.

init.onEnterFrame = function() :Void { }

7. En este controlador, asigne el valor de la propiedad xVelocity del objeto this a su propiedad _x y su propiedad yVelocity a _y.

init.onEnterFrame = function() :Void {

this._x += this.xVelocity; this._y += this.yVelocity;

} 8. ¡Guarde y pruebe la película; haga clic en el botón juego nuevo y vea volar sus cuadros!

Analice con su instructor por qué cada cuadro se mueve a una velocidad diferente.


Probar los límites del escenario durante la animación 10. En el controlador onEnterFrame (que ha asociado a cada nuevo RotationBox), cree una condición de prueba si _x o _y han excedido los límites del escenario de 500 x 700 píxele del escenario; si lo han hecho, cambie su velocidad multiplicándola por -1. init.onEnterFrame function():Void {

this._x += this.xVeloc±ty; this._y += this.yVelocity;

if(this._x <= O ||this._x >= 700) {

this.xVelocity *= -1; } if(this._y <= O || this._y >= 500) {

this.yVelocity *= -1; }

} 11. Guarde y pruebe la película: haga clic en el botón de juego nuevo y observe que los cuadros ahora rebotan cuando su centro alcanza el borde del escenario. Analice de qué manera este efecto puede parecer diferente basándose en el punto de registro del símbolo RotationBox. 12. Cierre la ventana de prueba. Responder a una prueba de zona activa durante una animación 13. Al final del código dentro del controlador onEnterFrame, pruebe si esta instancia de RotationBox está alcanzando el recuadro de delimitación del objeto mcBoxExploder (no añada el argumento indicador de forma), si lo está haciendo, aumente la _xscale y _yscale de la instancia this por 10.

init.onEnterFrame = function():Void {

[ … ] if(this.hitTest(mcBoxExploder)) {

this._xscale += 10; this._yscale += 10;

} }

14. Dentro de la condición precedente, tras aumentar _xscale y _yscale, cree una condición de prueba para comprobar si _xscale ha llegado o excedido 200 (dos veces el tamaño original de la instancia); si es así, invoque el

método start() para ejecutar sndPop y use unloadMovie() para quitar esta instancia desde el escenario.

init.onEnterFrame = function():Void { [ … ]

if(this.hitTest(mcBoxExploder)) {

this._xscale += 10.; this._yscale += 10; if(this._xscale >= 200) {

sndPop.start(); this.unloadMovie();

} }

} 15. Guarde y pruebe la película; haga clic en el botón juego nuevo. Observe que ahora puede hacer que los cuadros crezcan y reboten. Observe cómo esto se reproduce contra el código dentro del símbolo RotationBox que está tratando de hacer que los cuadros se contraigan y desaparezcan. 16. Cierre la ventana de prueba. 17. Vuelva al controlador onEnterFrame en su código. 18. Tras descargar la instancia, escriba el código para los procedimientos siguientes:

• Establecer el playerScore al valor igual que txtPlayerScore (que está anidado dentro de mcPlayerlnfo); asegúrese de usar la función de conversión Number()

• Agregar 1 a playerScore. • Asignar el resultado de nuevo en la propiedad de texto

txtPlayerScore; asegúrese de usar la función de conversión String().

init.onEnterFrame = function():Void {

[ … ] if(this.hitTest(mcBoxExploder)) {

this._xscale += 10; this._yscale += 10; if(this._xscale >= 200) { sndPop.start(); this.unloadMovie();

playerScore=Number(mcPlayerInfo.txtPlayerScore.text); playerScore = playerScore + 1; mcPlayerInfo.txtplayerScore.text= String(playerScore); }

} }

19. Guarde y pruebe la película; comience un juego nuevo y trate de saltar los cuadros. ¿Puede atraparlos antes que desaparezcan? Observe que está manteniendo la puntuación en el juego y que ésta cambia de color en txtPlayerScore, de naranja a negro, cuando asigna un nuevo valor. ¿Cómo haría el juego más fácil o más difícil? 20. Cierre la ventana de prueba. Formato de texto adecuado que cambia en el momento de la eecución. 21. En la sección colocar los valores adecuados, tras asignar el formato de texto para cada campo, use el método setNewTextFormat() para asignar tfPlayerlnfo para que también sea el formato aplicado al nuevo texto añadido a txtPlayerScore, no sólo el texto predeterminado que ya hay en él. with(mcPlayerInfo) { [ … ]

txtPlayerName.setTextFormat (tfPlayerInfo); txtPlayerScore.setTextFormat (tfPlayerInfo); txtCurrentDate.setTextFormat (tfPlayerInfo); txtPlayerScore.setNewTextFormat (tfPlayerInfo);

}

22. Guarde y pruebe la película; comience un juego nuevo y trate de saltar algunos cuadros. Observe que los valores de la nueva puntuación tienen el mismo formato que el texto predeterminado inicial. 23. Cierre la ventana de prueba. 24. Analice si el código en la línea de tiempo en el símbolo RotationBox, que rota y se reduce en cada instancia, puede ser migrado a su controlador onEnterFrame y cómo se hace, y, si el código recién escrito, puede migrarse a su símbolo. 25. Cierre el archivo.

Resumen de la unidad • startDrag() y stopDrag() son métodos que “asocian” y “separan” un

objeto MovieClip desde el ratón. • hitTest() devuelve verdadero si el recuadro de delimitación o la forma

está tocando una posición específica u otro objeto. • Los objetos MovieClip asociados heredan las propiedades y los

métodos de sus objetos de inicial ización. • El controlador de eventos onEnterFrame se ejecuta a la velocidad de

fotograma de toda la película. • Los cambios visuales hechos en un controlador de eventos

onEnterFrame aparecerán en el escenario. Repaso de la unidad

1. ¿De qué manera cambia el argumento indicador de forma la manera en que ocurre un hitTest? 2. ¿Se ejecuta un controlador de eventos onEnterFrame para cada fotograma o fotograma clave de la línea de tiempo del MovieClip al que está asociado? 3. ¿En qué tipo de código es más probable que se soliciten los métodos startDrag() y stopDrag() de la instancia MovieClip? 4. ¿En qué tipo de código es más probable que solicite el método hitTest() de la instancia MovieClip? 5. ¿Cómo hace para que se asigne una posición inicial y un controlador de eventos a un MovieClip recientemente asociado? 6. ¿Por qué mantendría la velocidad, es decir, el cambio de velocidad que deber aplicarse en cada fotograma, en una variable separada, en vez de en los valores numéricos específicos de código duro en su controlador de eventos onEnterFrame?

Apéndice A: Guía de configuración para el alumno En este apéndice encontrará los requisitos y las instrucciones para que los estudiantes completen los ejercicios en Macromedia Flash 8: ActionScript. Cubre lo siguiente:

1. Requisitos del hardware 2. Requisitos del software 3. Instrucciones de configuración

Requisitos de hardware Su equipo debe contar con el siguiente hardware:

• Tarjeta de audio • Monitor, teclado y ratón

Requisitos de software Debe tener instalado el siguiente software:

• Herramienta de edición Macromedia Flash Professional 8 • Macromedia Flash Player 8 (o una versión posterior) Nota: Para revisar su versión Flash Player, diríjase a http://www.macromedia.com, haga clic con el botón derecho del ratón en el anuncio publicitario principal, y seleccione Acerca de Macromedia Flash Player o diríjase a http://www.macromedia.com/software/flash/about/. • Uno de los siguientes navegadores:

o Mozilla Firefox 1.0 + o Internet Explorer 5.0 + o Netscape Navigator 6.2 + o AOL 8 +

Instrucciones de configuración

Macintosh Copie la carpeta flas800 ubicada en el CD de los archivos de curso para el alumno a una carpeta local en su equipo. Windows Copie la carpeta flas800 ubicada en el CD de los archivos de curso para el alumno a una carpeta local en su equipo, o utilice Winzip u otra herramienta de extracción de archivos para abrir el archivo flas800_StudentHandsOnFiles_14Oct05.zip y extraer sus contenidos a una carpeta local en su equipo. Ambos Para ambos sistemas operativos, el equipo del alumno debe tener la siguiente estructura de directorios, bajo cualquier caso se usa como el directorio raíz del curso:

flas800 / / activos / laboratorio

¡ solución del laboratorio / ejercicios

/unidad 02 /unidad 03 /unidad 04 /unidad 05 /unidad 06 /unidad 07 /unidad 08

/solución de los ejercicios /unidad 02 /unidad 03 /unidad 04 /unidad 05 /unidad 06 /unidad 07 /unidad 08

Apéndice B: Recursos adicionales Este apéndice contiene una lista de recursos adicionales de Macromedia Flash Professional 8. Sitios Web

Centro de desarrollo de Macromedia Flash http://www.macromedia.com/devnet/flash/ Centro de recursos de Macromedia Flash http://www.macromedia.com/go/flash_resources Centro de servicio técnico de Macromedia Flash http://www.macromedia.com/support/flash Página Programas de servicio técnico de Macromedia Flash http://www.rnacromedia.com/support/programs Centro de desarrollo de Macromedia Flash http://www.macromedia.com/devnet/flash/ Página Producto Macromedia Flash http://www.macromedia.com/software/flash/

Documentación

La documentación para Flash está disponible en versiones de PDF electrónicas e imprimibles. Los tres documentos siguientes están disponibles en: http://www.macromedia.com/support/documentation/en/flash/.

Primeros pasos con Flash Esta guía brinda una introducción detallada sobre el espacio de trabajo de Flash y los procesos esenciales utilizados para crear el contenido de Flash. Si es la primera vez que utiliza Flash, debe comenzar por esta guía. Utilización de Flash Esta guía brinda información detallada sobre cómo utilizar las características y funciones de Flash Basic 8 y Flash Professional 8, una herramienta de edición multimedia que le permite crear cualquier cosa, desde animaciones simples hasta complejas aplicaciones Web interactivas. Utilización de Flash brinda descripciones detalladas sobre las características y los procedimientos de Flash necesarios para poder usarlo.

Flash 8 Video Encoder Esta guía brinda información detallada sobre cómo utilizar las características y funciones de Flash 8 Video Encoder, una aplicación independiente que permite codificar vídeo con el formato Macromedia Flash Video (FLV). La documentación y los recursos adicionales están disponibles corno libros impresos de Macromedia. Vea http://www.rnacromedia.com/support/mmpress/.

Comunidad

http://www.macromedia.com/community/ ApéndiceC: Respuestas a las preguntas de repaso Este apéndice contiene respuestas a las preguntas de repaso que se encuentran al final de cada unidad en Macromedia Flash 8: Curso ActionScript. Unidad 2

1. ¿Cuál es la diferencia entre una variable, un nombre de instancia y una propiedad? Una variable es un nombre que apunta a los datos. Un nombre de instancia es un nombre que apunta a un objeto. Una propiedad es una variable asociada a un objeto, del que describe una característica. 2. ¿De qué manera son similares las variables, los nombres de instancia y las propiedades? Estos tres son nombres que indican algo en la memoria. 3. ¿Cómo se mira “dentro” de una variable al depurar su código? Usa la función global trace() o la herramienta interactiva de depuración incluida en la herramienta de edición de Macromedia Flash Professional 8 (que no se trata en este curso) 4. ¿Qué tipo de datos son cada uno de estos?

a. “Super-Silly Disco Soda” String

b. 3.1415926 Number c. Un campo de texto nombrado “txtFirstName” TextField

5. ¿Qué verá si sigue estas expresiones? a. trace(9 + 2 + “ducks”) 11 ducks b. trace(true * 2) 2

Unidad 3

1. ¿Cuál es la diferencia entre una función y un método? Una función no se asocia a un objeto específico, por lo tanto, todos los valores externos deben pasar a ella como argumentos. Un método es una función asociada a un objeto específico, dándole acceso directo a las propiedades de dicho objeto; es necesario que pasen como argumentos para ser utilizados en el método. 2. ¿Cuál es la diferencia entre un argumento y un parámetro? Ninguna. Son simplemente términos diferentes. 3. ¿Qué paso debe realizar antes de utilizar el método attachMovie() para crear una nueva instancia de símbolo MovieClip desde su Biblioteca? Debe ir al cuadro diálogo Propiedades de vinculación y seleccionar Exportar para ÁctionScript. 4. ¿Deben ser diferentes su identificador de vinculación y el nombre del símbolo? Nunca, a menos que pretenda que su FLA sea más difícil y más caro de mantener. 5. ¿Cuál es el tipo de datos de retorno de una función que no devuelve nada? Cualquier función o método que no devuelve ningún valor, no tiene palabra clave de retorno dentro de ella, es Void. 6. ¿Qué significa this? La palabra clave this se refiere a cualquier objeto que esté dentro del código usado. Más comúnmente, this se refiere a la línea de tiempo sobre la que se creó el código. También puede referirse al objeto que provoca el controlador de eventos dentro del cual se usa this para ejecutarlo.

Unidad 4

1. ¿Qué es un objeto? Un objeto es la instancia de una clase. Los términos objeto e instancia son intercambiables. En Flash, los símbolos son una forma de clase. 2. ¿Cuál es una analogía para una clase? Un proyeto, o tal vez un molde. 3. ¿Cómo le da formato a un TextField a través de un código? Creando un objeto TextFormat y pasándolo a los métodos setTextFormat() o setNewTextFormat() de una instancia de clase TextField. 4. ¿Cuál es la diferencia entre un TextField de entrada y uno dinámico, cuando se crean usando el código?

Ninguna, excepto el valor del tipo de propiedad, ya sea de entrada o dinámico, lo que determina si el usuario puede o no editar este TextField en particular. 5. ¿Cuál es el número para el primer día de la semana, la primera hora del día, el primer minuto de la hora, el primer segundo del minuto y el primer milisegundo del segundo? 0 6. ¿Qué es una clase estática y cómo utiliza las propiedades y los métodos de uno? Una clase estática es aquella que no necesita (no puede) crear una instancia antes de utilizar sus propiedades y método. En cambio, usted se refiere a sus propiedades y métodos directamente a través del nombre de clase. Por ejemplo: Math.random() o Math.PI.

Unidad 5

1. ¿Qué es un evento? Un evento es una señal difundida dentro de Flash Player avisando de que el usuario o el sistema han hecho algo con cualquier objeto que difunde la señal. 2. ¿Qué es un controlador de eventos? Un controlador de eventos es un método que (casi siempre) se asocia al objeto que difunde el evento al que desea responder ejecutando algún código. Al utilizar el nombre de método especifco, que siempre comienza con la palabra on para clases incorporadas de Flash Player, Flash Player sabe ejecutar automáticamente estos métodos cuando el objeto al que se asocian difunde su evento correspondiente. 3. ¿Qué significa this cuando se utiliza dentro de un controlador de eventos? Dentro de un controlador de eventos, this indica el objeto que difunde el evento, provocando que Flash Player ejecute el código en el controlador de eventos. 4. ¿Cuál es el tipo de datos de retorno para un controlador de eventos? Void Porque Flash Player, en vez de su propio código, llama a los controladores de eventos, no hay nada para recibir ningún valor que puedan devolver. 5. ¿Qué caracter comienza la cadena de consulta al pasar los parámetros URL? Un signo de interrogación (?). 6. ¿Se pueden aplicar las etiquetas de fotogramas a cualquier fotograma? No. Las etiquetas de fotogramas sólo se pueden aplicar a los fotogramas clave. 7. ¿Por qué es la mejor práctica utilizar etiquetas de fotogramas como el destino de una llamada al método gotoAndPlay? Porque las etiquetas de fotogramas se mueven con sus fotogramas clave, aún si el recuento del fotogramas cambia. Si busca un fotograma específico por el número, dicho número puede cambiar si se agregan fotogramas o si se extraen tras haber creado su código.

Unidad 6 1. ¿Qué similitudes tienen las matrices y los objetos genéricos? Ambos son variables agregadas: nombres que indican varios valores, en vez de un solo valor. 2. ¿Qué diferencia hay en la manera en que obtienen sus datos? Las matrices se refieren a los valores mediante un número, un número de índice comenzando en 0, que significa que los valores de las matrices tienen una secuencia inherente. Los objetos genéricos (como todos los objetos) se refieren sus valores mediante una palabra, un nombre de propiedad, que por convención siempre comenzará con una letra minúscula, y será una combinación de adjetivos y sustantivos que describen los contenidos de la propiedad. 3. ¿Cómo se extrae el elemento de mayor jerarquía en una matriz? Llame a su método popo() 4. ¿Cuál es la diferencia entre las clases que deben importarse a Flash? No están incorporadas en el mismo Flash Player. En cambio, son definidas en archivos ActionScript externos o símbolos de MovieClip compilados (no se cubre en este curso). 5. ¿Cuál es el equivalente decimal para el valor hexadecimal FF? 255 6. ¿Qué paso debe realizar antes de poder adjuntar un sonido desde la Biblioteca usando ActionScript? Debe abrir el cuadro de diálogo Propiedades de vinculación, seleccionar Exportar para ActionScript y asignar un identificador (que debe ser el mismo que su nombre de Biblioteca).

Unidad 7

1. ¿Cuándo se detiene un bucle? Cuando la condición del bucle se devuelve como falsa. 2. ¿Cómo puede recorrer los índices de una matriz? Normalmente, usando un bucle for, una variable de índice inicializada en 0, una condición de prueba si la variable de índice es menor que el largo de la matriz y un proceso posterior al bucle para incrementar la variable del índice en 1. 3. ¿Cómo pregunta si dos cosas son verdaderas? Usando el operador y (||) en una oración condicional. 4. ¿Cómo hace que se ejecute el código si algo es falso? Usando el operador lógico no (!) delante de una expresión de comparación. 5. ¿Cómo haría tres preguntas diferentes, cuando sólo una de ellas podría ser verdadera? Probablemente utilizando una oración condicional si/algo si/ algo si.

Unidad 8 1. ¿De qué manera cambia el argumento indicador de forma la manera en que ocurre un hitlest?

Si está probando la colisión con una instancia de MovieClip (y no una posición x/y) y pasa verdadero como el segundo argumento opcional al hitTest(), Flash Player probará la colisión con la forma dentro del MovieClip sobre el que llama el método hitTest() en lugar de su recuadro de delimitación.

2. ¿Se ejecuta un controlador de eventos onEnterFrame para cada fotograma o fotograma clave de ‘la línea de tiempo del MovieClip al cual está asociado?

El controlador de eventos onEnterFrame se ejecuta para cada fotograma (se ejecuta a la velocidad de fotograma de toda la película). Hoy hay distinción entre fotogramas y fotogramas clave en ActionScript, sólo la posibilidad de etiquetas de fotogramas, que sólo se pueden agregar a los Jóto gramas clave.

3. ¿En qué tipo de código es más probable que llame los métodos startDrag() y stopDrag() de una instancia MovieClip?

En controladores de evento onPress y onRelease, porque la acción de presionar y soltar el botón del ratón es cómo se espera normalmente que un usuario agarre y suelte los objetos visuales en la pantalla del equipo.

4. ¿En qué tipo de código es más probable que llame el método hitTest() de una instancia MovieClip?

En un controlador de eventos onRelease después de invocar el método topDrag() para probar dónde el usuario dejó lo que se arrastraba alrededor del escenario.

5. ¿Cómo hace para que se asigne una posición inicial y un controlador de eventos a un MovieClip que se ha adjuntado recientemente?

Creando un objeto de inicial ización, un objeto genérico con propiedades asignadas a él, que puede corresponder a las propiedades o a los controladores de eventos de MovieCiip, asignándole una propiedad _x ej, que define un controlador de eventos en ella, y pasando a continuación ese objeto como el cuarto argumento opcional al método attachMovie() asociado.

6. ¿Por qué mantendría la velocidad, es decir, la velocidad de cambio que debe aplicarse en cada fotograma, en una variable separada, en vez de en los valores numéricos específicos de código duro en su controlador de eventos onEnterFrame?

Para que pueda ser modjficado matemáticamente. Por ejemplo, puede multiplicarlo por 1 para invertir la dirección del cambio para cualquier propiedad a la que se está agregando.

macromedia flash 8: actionscript guía para los...

Documents