MANUAL DE MACROMEDIA DIRECTOR - Presentación ...jfernand/0405/tsm/director.pdf · Tecnologías...

ANEXO – Manual de Macromedia Director.

Tecnologías para los Sistemas Multimedia – Curso 2004/05 - 1/32

Manual de MACROMEDIA DIRECTOR.-



Índice ÍNDICE........................................................................................................................................................................ 2

MANUAL DE MACROMEDIA DIRECTOR. ........................................................................................................ 3

1. COMPONENTES DE DIRECTOR. ................................................................................................................. 3 1.1. LA VENTANA CAST (MENU -> WINDOWS -> CAST)....................................................................................... 3 1.2. LA VENTANA TOOL PALETTE (MENU WINDOW -> TOOL PALETTE). ............................................................ 4 1.3. INSPECTOR DE TEXTO (MENU WINDOW -> INSPECTOR -> TEXT). ................................................................ 5 1.4. LA VENTANA BEHAVIOUR (MENU WINDOW -> INSPECTOR -> BEHAVIOUR)................................................. 5 1.5. LA VENTANA SCORE (MENU WINDOW -> SCORE)......................................................................................... 6

2. INCORPORAR GRÁFICOS EN LA PELÍCULA........................................................................................... 6 2.1. INTRODUCCIÓN. ............................................................................................................................................. 6 2.2. IMPORTAR GRÁFICOS (MENÚ -> FILE -> IMPORT). ......................................................................................... 7 2.3. TRANSFORMACIÓN DE BITMAPS (MENÚ -> MODIFY -> TRANSFORM BITMAP). .............................................. 9

3. INCORPORAR SONIDOS EN LA PELÍCULA............................................................................................ 10 3.1. INTRODUCCIÓN. ........................................................................................................................................... 10 3.2. IMPORTAR SONIDOS (MENÚ –> FILE -> IMPORT). ........................................................................................ 10

4. INCORPORAR VÍDEOS EN LA PELÍCULA. ............................................................................................. 11 4.1. INTRODUCCIÓN. ........................................................................................................................................... 11 4.2. IMPORTAR VÍDEOS (MENÚ –> FILE -> IMPORT). .......................................................................................... 11

5. TRABAJAR EN EL SCORE. .......................................................................................................................... 13 5.1. DEFINICIÓN DE LAS PROPIEDADES DE NUESTRA PELÍCULA. .......................................................................... 13 5.2. INCORPORACIÓN DE LOS MIEMBROS DEL REPARTO EN EL STORE. ................................................................ 14

6. PRIMERAS ANIMACIONES EN DIRECTOR. ........................................................................................... 15 6.1. CREACIÓN DE UNA ANIMACIÓN SIMPLE........................................................................................................ 16 6.2. ASIGNAR EL TIEMPO DE REPRODUCCIÓN A LA PELÍCULA.............................................................................. 18 6.3. FILMLOOPS. ................................................................................................................................................. 19

7. SPRITES............................................................................................................................................................ 21

8. INTRODUCCIÓN A LINGO. ......................................................................................................................... 21 8.1. VARIABLES. ................................................................................................................................................. 21

8.1.1. Ámbito de las variables (locales y globales)....................................................................................... 23 8.2. OPERADORES. .............................................................................................................................................. 24 8.3. ESTRUCTURAS DE CONTROL......................................................................................................................... 26

8.3.1. Estructuras if....................................................................................................................................... 26 8.3.2. Declaraciones case. ............................................................................................................................ 27 8.3.3. Iteraciones........................................................................................................................................... 28

8.4. EVENTOS Y MANEJADORES DE EVENTOS (HANDLERS).................................................................................. 30 8.4.1. Eventos de teclado. ............................................................................................................................. 31 8.4.2. Eventos de ratón.................................................................................................................................. 31



Manual de Macromedia Director.

1. Componentes de Director.

1.1. La ventana Cast (Menu -> Windows -> Cast). En esta ventana es donde almacenamos los elementos importados o creados en el mismo

Director, que formarán parte de la pelicula. Este es el "almacén" de nuestro proyecto.

Figura 1.- Ventana de Cast.

Los diferentes elementos que podemos encontrar en esta ventana son:

• Navegación por el Cast: Nos permite avanzar y retroceder a través de los miembros del reparto.

• Utilidad para mover los miembros del reparto: Esta es una herramienta muy útil cuando tenemos un gran número de elementos en el cast y queremos mover alguno a otra posicion no visible. Para hacerlo, seleccionamos el miembro del cast que queremos mover y luego arrastramos el cuadradito hacia el lugar del Cast a donde queremos mover este miembro seleccionado. Al soltar sobre la casilla que queramos, veremos que el miembro que teniamos seleccionado se coloca en esa casilla.

• Script e Info del miembro de reparto: Estos son dos botones fundamentales para trabajar en el Cast.

En el primero (script) podemos asignar un Script al miembro seleccionado. De esta forma este miembro, al ser colocado en el escenario se comportará tal y como se le haya asignado en el script de Cast, independientemente de donde este colocado. Por ejemplo, si a un miembro le asignamos el script:

on mouseDown beep end

este personaje siempre reproducirá un sonido de alerta del sistema cada vez que se haga clic sobre él.



El segundo botón (info) nos sirve para asignar propiedades particulares al miembro del reparto. Más adelante veremos ejemplos en donde utilizaremos estas dos herramientas.

1.2. La ventana Tool Palette (Menu Window -> Tool Palette). Esta es la paleta de herramientas de Director. Las diferentes herramientas que nos

encontramos en ella son:

• La primera herramienta es el puntero. Sirve para seleccionar y mover objetos por el Stage (escenario).

• La segunta es la herramienta de giro. Sirve para girar de forma libre los sprites que hemos colocado en el escenario.

• Luego tenemos las figuras con relleno y sin relleno. Estas figuras tiene la particularidad de ocupar muy poca memoria, lo que agilizará nuestra pelicula si se reproduce en internet, por ejemplo, en donde la velocidad de ejecución en un punto crítico.

• Los botones de selección y radio, son los tipicos botones que encontramos en aplicaciones y páginas web. Mas adelante veremos como utilizarlos para recoger información a través de Lingo.

• Las herramienta siguiente nos sirve para asignar un color de fondo y frontal a nuestras figuras, campos de texto, etc..

• Las últimas herramientas son las de color y grosor de linea.

Figura 2.- Ventana Tool Palette.



1.3. Inspector de texto (Menu Window -> Inspector -> Text). Aqui asignamos tipos de letra, alineación, espacio entre lineas, etc, para los textos y

campos de texto.

Figura 3.- Ventana de Inspector de Texto.

1.4. La ventana Behaviour (Menu Window -> Inspector -> Behaviour). Es un pequeño asistente que nos permite asignar Scripts de Lingo, sin necesidad de

escribir el código, sino seleccionando los handlers y las acciones que queramos ejecutar. Mas adelante veremos los conceptos de handler y script con mucho más detalle.

Utilizar la ventana Behavior no es la forma más limpia de programar en Director, y

siempre que podamos, debemos escribir el código nosotros mismos. Esto no es una simple cuestión de estilo, sino que el abuso de los scripts generados en la ventana behavior puede llegar a saturar proyectos medianamente grandes, provocando comportamientos inesperados.

Las indicaciones del gráfico, de momento, son lo suficientemente explicativas. Cuando

entremos en temas de Lingo, aprenderemos a utilizar los scripts de forma extensa y pormenorizada.

Figura 4.- Ventana Behaviour.



1.5. La ventana Score (Menu Window -> Score). El Score, es sin duda, la ventana que más intimida a los principiantes que se acercan a

Director. Sin embargo, una vez que comprendemos sus funciones, y empezamos a hacer nuestros primeros juegos en ella, se va transformando simplemente en una herramienta poderosa y versátil.

Debemos entender el Score, como un secuenciador, o una partitura, en donde

colocamos todos los elementos de nuestra pelicula. Cuando la cabeza de reproducción comienza, va leyendo todo lo que encuentra, a la

velocidad que le hayamos asignado, interpretando y obedeciendo a los scripts que hayamos puesto en su camino y moviendo o mostrando los sprites que hayamos colocado en los canales.

En el gráfico inferior vemos las partes principales de la ventana score.

Figura 5.- Ventana Score.

2. Incorporar gráficos en la película.

2.1. Introducción. En este apartado vamos a ver como se importan bitmaps de Photoshop o cualquier otro

editor de imagenes en Director. También veremos algunas propiedades de los bitmaps. En la versión 7 de Director podemos importar una serie muy amplia de formatos gráficos,

como por ejemplo, GIF, JPEG, PNG, BMP, PICT, etc. A la hora de importar imágenes en Director es muy importante pensar para qué las vamos

utilizar, para decidir el formato correcto. Una pantalla de ordenador funcionando a 256 colores corresponde a 8 bits de profundidad de color, una pantalla a miles de colores corresponde a 16 bits, y una pantalla a millones de colores corresponde a 24-32 bits.



Si queremos mostrar fotografías de gran calidad podemos optar por 16, 24 ó 32 bits, pero

si lo que importamos son imágenes para animación será suficiente importarlas a 8 bits de profundidad de color, de este modo nuestra película ocupará menos memoria y funcionará más rápido.

No tiene en absoluto ningún sentido que realicemos una animación con imágenes a 32

bits, porque por un lado nuestra película ocupará demasiado y se arrastrará muy lentamente en un CD-ROM de 4X velocidad, e incluso en CD-ROM de mayor velocidad. Por eso es conveniente probar las películas directamente en CD antes de distribuirlas para evitarnos sorpresas.

2.2. Importar gráficos (Menú -> File -> Import). Supongamos que tenemos los gráficos que vamos a introducir en nuestra película

preparados en su carpeta o directorio correspondiente. Seleccionamos la opción del menú File -> Import, y obtendremos una ventana similar a la mostrada en la figura siguiente:

Figura 6.- Ventana de Menú File -> Import.

En el ejemplo vemos una película QuickTime, un gráfico en formato PICT, una película de

Director 7, y un archivo de sonido en formato AIF. Si queremos importar un solo archivo, seleccionamos en la parte superior el archivo y

pulsamos "IMPORT", de este modo pasaremos a la pantalla siguiente en función del tipo de archivo que hayamos importado.

Si queremos importar más de un archivo a la vez, vamos seleccionando los archivos y

pulsando el botón "ADD", de este modo los archivos que serán importados se van alineando en la parte inferior, y al pulsar "IMPORT", se importarán todos los archivos que hayan sido pasados a la ventana inferior.



Si queremos eliminar algún archivo de la selección, lo seleccionamos en la parte inferior y

pulsamos "REMOVE". Una vez le hemos dado al botón "IMPORT" y le hemos expresado nuestra conformidad a

Director, nos aparece una ventana similar a la siguiente en donde podemos fijar algunos ajustes.

Figura 7.- Ventana de ajustes de la importación del gráfico.

Como podemos ver, en esta ventana podemos ajustar la profundidad de color (en el

ejemplo 8 bits - 256 colores) y podemos asignarle una paleta de color. Lo más usual para empezar es asignarle la paleta de color de nuestro sistema, bien sea

Macintosh ó PC y activar la opción "Dither" para que los degradados de color de la imagen sean lo más suaves posible.

También podemos hacer que el resto de imágenes que importamos mantengan las

propiedades definidas para esta. Una vez le damos a n el proceso de importar se ha terminado y el gráfico pasa a ser parte

de la ventana Cast. El gráfico se colocará por defecto en la primera casilla libre que encuentre el la ventana

Cast, o bien, si teníamos seleccionada una casilla concreta antes de importar, el gráfico se colocará en esta casilla.

Figura 8.- Imagen importada como miembro del Cast.

Una vez que hemos importado la imagen en el Cast, podemos ajustar alguna de sus

propiedades. Para ello, seleccionamos el miembro del Cast que contiene la imagen y pulsamos

sobre el botón con el símbolo . Con esto accedemos a las propiedades del miembro seleccionado en la ventana Cast.

Conviene recordar que estos ajustes son distintos según que tipo de miembro tengamos

en el Cast.



La ventana que se muestra a continuación es la que nos aparece para los miembros de reparto gráficos.

Figura 9.- Propiedades de los miembros de reparto gráficos.

En primer lugar vemos, que tanto en la ventana Cast como aquí, Director ha recordado el

nombre original del gráfico, pero siempre podemos cambiarlo en esta ventana o directamente en la ventana Cast.

• La Opción "Highlight When Clicked", hará que nuestro grafico se ilumine,

invirtiendo sus colores al hacer clic sobre él, cuando sea colocado en el escenario. • La opción "Dither" aplica el efecto "Dithering" (Suavizado) a los gráficos. • Luego tenemos los ajustes de transparencia Alpha para los gráficos de 32 bits. • Por último tenemos las preferencias de descarga en memoria “Unload” de ese

miembro cuando sea utilizado.

2.3. Transformación de bitmaps (Menú -> Modify -> Transform bitmap).

En esta ventana siempre podemos cambiar en última instancia, las particularidades del gráfico. Esta opción del menú "Modify" se encuentra desactivada, si no está seleccionado un gráfico en la ventana Cast. La forma que presenta esta ventana la podemos ver en el gráfico siguiente:

Figura10.- Ventana de Menú Modify -> Transform bitmap.



3. Incorporar sonidos en la película.

3.1. Introducción. El sonido apenas tiene particularidades a la hora de importarlo dentro de nuestra película,

pero debemos tener muy en cuenta el tamaño del archivo de sonido que importamos. Por lo general, en un editor de sonido podemos ajustar la resolución del sonido de igual modo que hacemos con los gráficos en un editor de imágenes. Los principales parámetros que podemos configurar en un sonido son:

• Frecuencia de muestreo (Khz). • Número de bits utilizado para codificar cada muestra (resolución). • Mono o estéreo.

En Macintosh podemos importar básicamente sonidos AIFF o System 7 Sound, y en la

versión 7 de Director también en Formato Sun .au, que es el formato de sonido utilizado por las applets Java.

Para ambas plataformas Macintosh y PC el formato de sonido recomendado es AIFF. Así

mantendremos la máxima compatibilidad entre las dos plataformas. La frecuencia de muestreo recomendada para el sonido (a ajustar en nuestro editor de

sonido preferido), es de 22,050 Khz ó 11,025 Khz. Los sonidos con frecuencia superior a esta, pueden bloquear una película ya que hay que tener en cuenta que por lo general cuando ponemos en una película una animación gráfica y un sonido, estamos obligando al procesador a realizar dos operaciones, una actualizar el gráfico y otra leer y reproducir el archivo de sonido.

Cuando desarrollamos una producción multimedia, tenemos que tener en cuenta que este

material debe poder reproducirse en sistemas inferiores a aquellos con los que estamos desarrollando la aplicación, como PC´s con procesadores más lentos, menor capacidad de memoria, lector de CD/DVD de menor velocidad, etc.

3.2. Importar sonidos (Menú –> File -> Import). El proceso de importar sonido es exactamente el mismo que a la hora de importar un

gráfico, pero el sonido tiene menos peculiaridades en este proceso que los gráficos.

Figura 11.- Ventana de Cast con un sonido importado.

En la ventana de Cast, vemos ahora, al lado del gráfico, nuestro primer sonido importado.

Los iconos de ambos son diferentes , y esto nos ayuda a identificar los miembros de reparto en el Cast de forma rápida.



Si hacemos clic sobre el botón , con el miembro sonido seleccionado en el Cast, veremos que nos aparece la ventana de propiedades del sonido.

Figura 12.- Propiedades de los miembros de reparto sonidos.

La ventana de propiedades del sonido es más simple que la de los gráficos. Prácticamente

tenemos sólo la opción de "Loop", que hace que nuestro sonido se reproduzca de forma repetitiva, y la opción "Unload" que de forma similar al caso de los gráficos regula la prioridad en la descarga de memoria de miembros del reparto que no son utilizados en un momento dado.

4. Incorporar vídeos en la película.

4.1. Introducción. El vídeo es el componente multimedia de más peso en una producción, es decir, a

cualquier ordenador le cuesta mucho esfuerzo reproducir video. Con el video digital debemos tener aún más cuidado que con el sonido, ya que aparte de que un vídeo de unos pocos segundos a 320 X 240 pixels ocupa varios megas en el disco duro, la reproducción de este en pantalla es una tarea pesada para cualquier tipo de ordenador.

Si el vídeo además tiene sonido, debemos vigilar que el formato del sonido también sea el

adecuado, si no queremos que nuestro video vaya a saltos y pierda fotogramas intentando sincronizar la imagen con el sonido.

Sobra decir que es tarea imposible intentar reproducir a la vez dos videos con sonido en

pantalla a un tiempo y esperar un resultado lejanamente aceptable. Aunque podemos hacer video digital al tamaño que queramos en un programa editor de

video, como Adobe Premiere, hay algunos formatos estándares que nos convendrá usar, como el estándar QuickTime (320 X 240 pixels). Este formato es el más grande recomendable a la hora de insertar video en nuestra aplicación multimedia.

4.2. Importar vídeos (Menú –> File -> Import).



El proceso de importar video es el mismo que el de importar sonido e imágenes, pero disponemos de muchas opciones de variarlo, modificar y dirigir su reproducción en Lingo, y ajustar sus propiedades en la ventana Cast.

Abordaremos las capacidades del lenguaje Lingo para controlar el video, más adelante,

cuando estemos aprendiendo Lingo, ahora vamos a ver que propiedades del video podemos ajustar en el Cast una vez importado.

Figura 13.- Ventana de Cast con un vídeo importado.

Como vemos, el video se ajusta como otro miembro del reparto más, disponible desde

ahora en nuestra pelicula.

Si pulsamos el botón info del cast, obtendremos la ventana siguiente y podemos modificar alguna de sus propiedades:

Figura 14.- Propiedades de los miembros de reparto vídeos.

Aqui vemos las propiedades del video a las que podemos acceder en la ventana Cast:

• Playback: Este es el principal control de la reproducción de vídeo en Director. Sus diferentes opciones son:

o Video: Indicamos si queremos que se vea el vídeo en el escenario, o bien sea invisible, pero conservando las propiedades del sonido.

o Sound: Indicamos si nuestro vídeo tendrá sonido o no. Es conveniente desactivar esta opción si el vídeo que hemos importado no tiene sonido, así



QuickTime no intentará ajustar la imagen a un sonido hipotético, y el vídeo funcionará más fluidamente.

o Paused: Con esta opción definimos si el video, por defecto comienza en pausa. Siempre podemos arrancarlo luego con Lingo.

o Loop: Con esta propiedad activada el vídeo se reproducirá de forma continua, volviendo al principio cada vez que haya terminado, a no ser que eliminemos esta caracteristica desde Lingo, o volvamos a la ventana Cast para desactivarla.

• Options:

o Direct To Stage: Es una propiedad por defecto del video. Normalmente el video nunca deja que otro elemento se ponga sobre él, bien sea texto, un gráfico, etc. Si un gráfico pasa por delante del video, el video se pondrá sobre él de forma que no podremos verlo mientras se encuentre en el ámbito del video. Si desactivamos esta opción, el vídeo dejará pasar sobre él a los demás miembros de la película pero, en contrapartida, funcionará a saltos y de forma poco fluida, por lo que no conviene desactivar esta opción.

o Show Controler: Nos mostrará la barra de progreso de la película QuickTime, mientras funciona en el escenario.

• Video: En este menu tenemos dos opciones: o Sync to Soundtrack, habilita que QuickTime ajuste el sonido a la imagen,

de forma que una no vaya más rápido que la otra. o Play Every Frame (No Sound), elimina el sonido del video, caso de

tenerlo, e inhabilita el intento de QuickTIme por sincronizar imagen y sonido, con lo que el video irá más fluido en pantalla.

Las Opciones Enable Preload y Unload, son para la gestión de la carga y descarga en

memoria del video.

5. Trabajar en el Score.

5.1. Definición de las propiedades de nuestra película. Ya hemos visto todo el proceso de importar los diferentes componentes multimedia para

nuestra producción. El siguiente paso consiste en colocar los diferentes actores en el Score y en el escenario. Supongamos que nuestra producción dispone de los tres miembros del Cast que se muestran en la figura siguiente.

Figura 15.- Miembros del reparto de nuestra producción.



Veamos como colocar nuestros personajes (miembros del reparto) en el escenario de la

pelicula:

• Para empezar vamos a definir las propiedades principales de nuestra película o producción seleccionando la opción del menú: Modify -> Movie -> Properties. Las propiedades principales de esta ventana que se muestra en el gráfico siguiente se describen a continuación:

Figura 16.- Ventana de propiedades de la película.

o Stage Size: En este apartado podemos modificar el tamaño del escenario

de la pelicula. El tamaño por defecto es 640 X 480 pixels, que corresponde a un monitor de 15 pulgadas, pero podemos ajustar el tamaño según se acomode mejor a nuestras necesidades.

o Stage Location: Aqui ajustamos la colocación del escenario con respecto a la pantalla.

o Stage Color: En este menu podemos variar el color de fondo del escenario.

o Default Palette: Esta es la paleta de color de sistema por defecto de la pelicula.

5.2. Incorporación de los miembros del reparto en el Store. Una vez que tenemos todos los miembros del reparto de nuestra producción en el Cast,

podemos incorporarlos en la película arrastrando el miembro del reparto desde la ventana del Cast sobre la ventana Score o sobre el escenario directamente. De esta forma tan simple ya



habremos colocado el miembro en el escenario, por lo que a partir de ahora cuando nos refiramos a este personaje, colocado en el Score le llamaremos "Sprite".

Figura 17.- Colocación de un miembro del Cast en el escenario (Stage) y en el Score. Como vemos en el ejemplo, se ha colocado el sprite en el cuadro 5 y se extiende en el

tiempo tres cuadros hasta el cuadro 7. Los puntos blancos señalan una posición del sprite y los cuadros blancos del final, señalan el punto final del sprite. Si quisiéramos estirar en el tiempo (hasta el cuadro 20 por ejemplo) la presencia del Sprite, simplemente debemos coger el Sprite por su punto final y arrastrarlo hasta el cuadro 20, de forma que, durante la película, este sprite ahora será visible desde el cuadro 5 hasta el cuadro 20.

Figura 18.- Ampliación de la duración de un sprite.

Colocar sonido es similar a colocar un gráfico pero solamente podemos arrastrarlo sobre

alguno de los dos canales de sonido del Score. Para prolongarlo en el tiempo procederemos de la misma manera que con los sprites gráficos del ejemplo anterior.

Figura 19.- Incorporar un sonido en el Score.

En Director tenemos dos canales para el sonido, que podemos usar al mismo tiempo.

Ambos canales sonarán juntos si tienen ambos sonido en una misma porción de tiempo.

6. Primeras animaciones en Director.



6.1. Creación de una animación simple. En este apartado vamos a ver como se crean animaciones elementales en Macromedia

Director. Para ello vamos a importar un gráfico de un ciclista en formato pict como se muestra en la figura siguiente y lo vamos a poner a correr por el escenario.

Para conseguir esto, podemos arrastrar el ciclista desde la ventana Cast hasta el

escenario o hasta la ventana Score. De forma que pasara a ocupar uno o varios cuadros por defecto en el score, apareciendo tambien en el escenario.

Esta animación queremos que comienze en el cuadro 5 y vamos a extender la animación

hasta el cuadro 15. Para esto cogemos el sprite por su punto final en el Score y lo encogemos para que solo

ocupe de principio un cuadro, que será el punto de partida de la animación.

Figura 20.- Una pequeña animación.

Para dar una sensación de continuidad entre la imagen y el fondo del escenario, vamos a

definir un color para el fondo de la película (Modify -> Movie -> Properties) y vamos a asignar fondo transparente al sprite del ciclista (Background Transparent), para que sus partes blancas pasen a ser transparentes.

Ahora que tenemos un único cuadro de partida de la animación seleccionado en el score,

colocamos en el escenario el ciclista en el punto de partida de la animación, en este caso entrando por la parte izquierda del escenario.



Figura 21.- Colocación del sprite en el punto de partida de la animación.

Una vez colocado el cuadro 5 en su punto de partida vamos a asignar un punto

intermedio en la animación en el cuadro 10, en donde el ciclista ya se encontrará en el centro del escenario, a medio camino de su animación completa.

Para esto, pulsando la tecla "ALT" y arrastramos el sprite hasta el cuadro 10. Vemos

como no movemos el cuadro 5 hasta la posicion 10 sino que nos llevamos una copia del sprite hasta esta posición. Si no hubiéramos pulsado la tecla "ALT" simplemente habríamos movido el cuadro 5 hasta la posición 10.

Con esto estamos asignando un nuevo tiempo en la pelicula, en el que nuestro actor

estará en otra posición.

Figura 22.- Alargamos la duración del sprite al instante 10.

Con el sprite seleccionado en el cuadro 10, vamos de nuevo al escenario y colocamos el

ciclista en otra posición del escenario. En la figura siguiente se muestra la posición que ocupará el ciclista en el escenario en el instante 10.



Figura 23.- Ubicación del ciclista en el escenario en el instante 10.

Como vemos Director ha creado una línea de animación, desde el punto inicial, hasta la

nueva posición en el cuadro 10, generando todos los pasos intermedios. Ahora vamos a hacer la misma operación pero estirando el sprite hasta la posición 15, en donde el ciclista ya desaparecerá del escenario por la parte derecha.

Para esto hacemos lo mismo que en el caso anterior: estiramos una copia del sprite con la

tecla "ALT” pulsada hasta la posición 15, y en esa posición colocamos el sprite en el escenario, desapareciendo ya por la parte derecha de la pantalla.

Figura 24.- Alargar la duración del sprite y cambio de posición.

Con esto tenemos una primera animación básica. Si vamos al menú "Control > Play"

veremos como el ciclista recorre el escenario de izquierda a derecha. Si queremos ajustar la trayectoria de movimiento, podemos recurrir al menú "Modify > Sprite > Tweening", para definir la trayectoria del sprite como mejor nos convenga.

6.2. Asignar el tiempo de reproducción a la película.



En primer lugar, la ventana "Control Panel" no la debemos usar para asignar tiempo a la película, porque lo hará de forma virtual, no real. La película solo responde y conserva los controles de velocidad asignados en el score o con Lingo.

Para ajustar la velocidad de reproducción, seleccionamos un cuadro en el canal de tiempo

del score, en el principio de la animación del ciclista (cuadro 5).

Figura 25.- Selección de un cuadro del canal del tiempo en el score.

Con este cuadro seleccionado vamos al menú "Modify > Frame > Tempo", en donde

nos sale esta siguiente ventana en donde podemos asignar el tiempo, en el ejemplo 5 fps (frames per second). Debemos cuidar que la velocidad de la película no sea excesiva, para que no sobrepase la capacidad de un procesador poco potente, más aún cuando está corriendo sobre un CD.

Figura 26.- Ventana de Frame -> Tempo.

Para prolongar el área de tiempo especificado en la película, simplemente seleccionamos

el canal de tiempo, y con la tecla "ALT" pulsada, arrastramos el sprite, estirándolo, por ejemplo, hasta el cuadro 15, en donde termina la animación de ciclista. Así podemos asignar diferentes velocidades a diferentes partes de la película.

Conviene probar uno mismo a hacer animaciones, metiendo gráficos de fondo y

superponiendo personajes. Conviene recordar que conforme ponéis sprites en el escenario, el sprite del cuadro 2 estará por delante del sprite del cuadro 1 y así sucesivamente.

6.3. Filmloops. Hasta ahora hemos visto como crear animaciones sencillas a partir de una imagen

estática. Si queremos reproducir una animación más compleja, como una persona o un perro caminando, necesitamos combinar varias imágenes estáticas para conseguir sensación de movimiento. Por ejemplo, en el caso de de un muñeco, debe ir moviendo los brazos y las piernas mientras avanza hacia delante, con lo cual en cada paso tenemos cuatro movimientos para los brazos y piernas, a la vez tendremos que hacer avanzar el muñeco hacia delante con todos sus movimientos de andar. Para conseguir estas animaciones podemos usar los FilmLoops.



Los Filmloops son animaciones creadas mediante la composición de imágenes individuales que, utilizadas de forma conjunta, nos dan sensación de movimiento. Para ello hacemos lo siguiente:

1. Incorporamos como miembros del reparto individuales las diferentes imágenes

que van a formar parte del Filmloop. En los ejemplos siguientes vemos el caso de una animación que refleja el movimiento de un gato.

Figura 27.- Incorporación de las imágenes individuales en el Cast.

2. Colocamos todos los elementos del Cast (imágenes individuales) en el Score uno

a continuación de otro con una duración de 1 frame.

Figura 28.- Colocación de las imágenes individuales en el Score.

3. Seleccionamos todos los sprites consecutivos que hemos insertado en el Score

(pulsando la tecla MAYUS) y seleccionamos la opción del menú: Insert -> Film Loop. Nos aparecerá un prompt en el que nos preguntará el nombre que queremos darle al FilmLoop y lo incorporará como un nuevo miembro del Cast. A partir de este momento, este nuevo elemento del Cast es una pequeña animación formada por la composición de las imágenes individuales anteriores.

Figura 29.- FilmLoop en el Cast.



7. Sprites. Una vez que colocamos los actores del Cast (reparto) sobre un canal del Stage

(escenario), se convierten en sprites (actores con guión). Los sprites tienen una serie de propiedades que podemos consultar y modificar en la película en tiempo real.

Los sprites también presentan dos eventos: comienzo y final del sprite, que los

capturamos mediante on beginSprite y on endSprite respectivamente. Dentro de estos eventos podemos programas las acciones que se llevarán a cabo al comienzo y final del sprite.

La forma de referirnos a las propiedades de un sprite es: Sprite(numero).NombrePropiedad, donde

• Numero: número del canal que ocupa el sprite. • NombrePropiedad: propiedad del sprite.

Las propiedades más significativas de los sorites son las siguientes:

• loch: Nos proporciona la coordenada horizontal del sprite en el stage. • locv: Nos proporciona la coordenada vertical del sprite en el stage. • height: Nos proporciona la anchura del sprite del stage. • width: Nos proporciona la altura del sprite en el stage. • memberNum: Indica el índice u orden que ocupa en el Cast el actor que

representa este sprite. Podemos modificar el miembro del reparto Cast que forma parte de un determinado sprite

en un momento determinado. Para ello utilizamos la propiedad memberNum con el valor del índice del Cast que ocupa el actor que queremos incorporar en el sprite.

Tenemos varias formas de cambiar el valor asignado a una propiedad de un sprite. Por

ejemplo, si queremos cambiar el valor de la propiedad loch del sprite 2 lo podemos hacer de las dos formas siguientes:

• sprite(2).loch = 10. • Set the loch of sprite 2 to 10.

Cada vez que realizamos una modificación sobre propiedades de los actores en el stage,

tenemos que actualizar el contenido del mismo por medio del comando updatestage. En caso contrario, los sprites contendrían los nuevos valores pero no se verían reflejados en el escenario.

8. Introducción a Lingo. A continuación vamos a ver los fundamentos de programación del lenguaje proporcionado

por Macromedia Director llamado Lingo.

8.1. Variables.



Una variable es una forma de guardar datos. Es un almacén de datos que se nos permite recuperar y actualizar su contenido. Las variables se componen de dos partes: nombre y valor.

Para trabajar con variables vamos a utilizar la ventana Message (CTRL + M). Por medio

del comando put podemos mostrar información del valor de una variable en un momento determinado en esta ventana. Por medio del comando set podemos asignar valores a las variables. Por ejemplo, podemos definir la variable miNumero a la que damos el valor 10. Posteriormente escribimos su contenido en pantalla por medio del comando put. En el gráfico siguiente podemos ver esta secuencia de acciones.

Figura 30.- Asignación y visualización de valores de las variables.

Las principales características que deben tener los nombres de las variables son:

• El nombre de una variable puede tener hasta 256 caracteres de longitud (aunque nunca es recomendable tener un nombre tan largo).

• Han de empezar con una letra (a-z) o con guión bajo y pueden tener mayúsculas o minúsculas. A continuación se pueden escribir números

• Los nombres de las variables únicamente tienen una palabra, es decir, no se pueden utilizar espacios en blanco.

Conviene asignar a las variables nombres que tengan algún significado, como: Nombre,

Edad, Fecha_Nacimiento, etc. Lingo no diferencia entre mayúsculas y minúsculas, por lo que las variables Nombre,

nombre y NOMBRE son la misma. Los tipos de datos de las variables pueden ser: Integer (entero), Float (decimal con

coma flotante), String (cadena), Lista. En la figura siguiente podemos ver la forma que presentan las listas y como podemos referenciar sus datos de manera individual.



Figura 31.- Variables de tipo lista.

8.1.1. Ámbito de las variables (locales y globales). Entendemos por variables locales aquellas que son accesibles únicamente en la función o

procedimiento donde se han definido. Estas variables no pueden perdurar o no son accesibles fuera de ese procedimiento o función.

Por ejemplo, si declaramos una variable dentro de un Handler mouseDown como se

muestra en el ejemplo siguiente:

on mouseDown set pulsacion = pulsacion + 1

end

Esta variable no perdurará fuera de este handler. Podemos realizar operaciones con ella en el ámbito del handler mouseDown pero no podemos usarla en otra parte del programa.

Si utilizáramos la variable pulsacion en otra parte del programa no conservaría los

valores asignados a la misma en el handler donde se ha inicializado. Para tener variables perdurables en memoria durante todo el programa, usamos las

variables globales.

global pulsacion set pulsacion = 0

Esta variable la hemos declarado como global, por lo tanto permanecerá en memoria

hasta la finalización del programa. Si por ejemplo queremos llevar la cuenta de los clicks que hace el usuario con el ratón, podemos crear un Handler donde inicializar la variable global, como por ejemplo al comenzar la ejecución:

on startMovie

global numClics set numClics = 0

end Y establecer la cuenta de esta variable en otro handler mouseDown:

on mouseDown global numClics



set numClics = numClics + 1 end

Así podemos incluir en el handler una sentencia de comprobación para saber si el usuario

ha pulsado el botón del ratón diez veces:

on mouseDown global numClics set numClics = numClics + 1 if ( numClics = 10 ) then

alert "has pulsado el ratón 10 veces" end if

end O llamar a esta variable desde otra parte del programa u otro Handler.

on exitFrame global numClics if ( numClics = 10 ) then

alert "has pulsado el ratón 10 veces" end if

end Para destruir de la memoria las variables globales, por ejemplo al cerrar el programa,

para liberar la memoria del ordenador, utilizamos la sentencia clearGlobals.

8.2. Operadores. Un operador es un símbolo o una palabra que actúa sobre uno o más elementos. Los

operadores son parte de Lingo y se utilizan para efectuar cálculos, asignaciones y comparaciones. Los diferentes tipos de operadores que nos podemos encontrar en Lingo son:

• Operador de asignación: El signo igual (=) hace las funciones de operador de

asignación. Cuando queremos asignar un valor a una variable, podemos hacerlo de varias formas diferentes:

o set miNumero to 10. o set miNumero = 10. o put 10 into miNumero. o miNumero = 10. o miNumero = 2 + 2. Cuando hay operaciones a la derecha del operador de

asignación, se resolverán antes de asignar ningún valor a la variable. o Si asignamos valores de tipo cadena en lugar de numéricos, tenemos que

encerrar estos valores entre comillas, como por ejemplo: nombre= “Jesús Valverde”.

• Operadores aritméticos: Se utilizan para realizar cálculos sencillos con los

datos. Los operadores aritméticos son: suma (+), resta (-), multiplicación (*), división (/) y resto o módulo (mod). Las operaciones aritméticas tienen un orden de preferencia similar al álgebra. Podemos modificar la preferencia mediante paréntesis. En la figura siguiente podemos ver varios ejemplos de estas operaciones:



Figura 32.- Operadores aritméticos.

• Operadores de comparación: Son operadores que pueden dar dos valores:

verdadero (true o 1) y falso (false o 0). En la tabla siguiente podemos ver los diferentes operaciones de comparación que podemos usar con Lingo. En el gráfico siguiente podemos ver varios ejemplos de estas operaciones:

Operador Nombre = > < >= <= <>

Igual Mayor que Menor que Mayor o igual que Menor o igual que Distinto de

Figura 33.- Operadores de comparación.

• Operadores lógicos: Los operadores lógicos son aquellos cuyos operandos y

resultados son valores booléanos (true-verdadero y false-falso).

Operador Nombre AND

• Devuelve un valor true-verdadero si



ambos operandos son ciertos. • Devuelve un valor false-falso si alguno

de los operandos es falso. OR

• Devuelve un valor true-verdadero si

cualquiera de los operandos es verdadero.

• Devuelve un valor false-falso si ambos operandos son falsos.

NOT

• Nos devuelve el valor contrario (true o

false) al proporcionado.

Figura 34.- Operadores lógicos.

8.3. Estructuras de control. El control de las estructuras nos permite modificar el flujo de un programa. Hasta ahora,

el flujo de un programa empezaba en la parte superior del mismo y avanzaba linealmente hasta la inferior. Por medio de estructuras de control podemos modificar este flujo de ejecución.

8.3.1. Estructuras if. Por medio de estas estructuras podemos modificar el flujo de ejecución basándonos en

una serie de condiciones. Las diferentes formas que puede presentar son las siguientes:

If condicion then sentencias end if If condicion then sentencias else sentencias end if



If condicion then sentencias else if condicion then sentencias end if

8.3.2. Declaraciones case. Al igual que las sentencias if .. else, nos permite tomar decisiones lógicas mientras

ejecutamos una serie de condiciones. La sintaxis de este tipo de declaración es la que se muestra a continuación:

case (expression) of valor_expresion1: sentencias1 valor_expresion2: sentencias2 ............ valor_expresionn: sentenciasn end case case (expression) of valor_expresion1: sentencias1 valor_expresion2: sentencias2 ............ valor_expresionn: sentenciasn otherwise sentencias end case

Vamos a ver un ejemplo: Supongamos que queremos mover la imagen que aparece en la

figura siguiente mediante la pulsación de las teclas siguientes: J (izquierda), K (derecha), U (arriba) y N (abajo).

Figura 35.- Imagen estática del balón.



Para ello utilizamos el evento KeyDown que se dispara cada vez que pulsamos una tecla.

La solución utilizando estructuras if podría ser la siguiente:

if the key = "J" then

set h = the locH of sprite 1 set the locH of sprite 1 to H -10 updatestage

else if the key = "K" then

set h = the locH of sprite 1 set the locH of sprite 1 to H +10 updatestage

else if the key = "U" then

set V = the locV of sprite 1 set the locV of sprite 1 to V -10 updatestage

else if the key = "N" then

set V = the locV of sprite 1 set the locV of sprite 1 to V +10 updatestage

end if

La solución utilizando estructuras case podría ser la siguiente:

case the key of "J":

set h = the locH of sprite 1 set the locH of sprite 1 to H -10 updatestage

"K": set h = the locH of sprite 1 set the locH of sprite 1 to H +10 updatestage

"U": set V = the locV of sprite 1 set the locV of sprite 1 to V -10 updatestage

"N": set V = the locV of sprite 1 set the locV of sprite 1 to V +10 updatestage

otherwise: put “No has pulsado una tecla correcta) into mensaje updatestage

end case

8.3.3. Iteraciones.



Los bucles o iteraciones se usan en programación para conseguir que un programa repita una serie de pasos o acciones hasta alcanzar un objetivo. Básicamente un bucle es una tarea organizada, un fragmento de código que se encarga de gestionar una tarea repetitiva.

Por ejemplo, si necesitamos declarar como "puppet" todos los sprites del score desde el 1

hasta el 45, un mal programador escribiría:

set the puppet of sprite 1 to true set the puppet of sprite 2 to true set the puppet of sprite 3 to true ........... set the puppet of sprite 45 to true

Y así hasta que se le durmieran los dedos. Para evitar esto debemos usar bucles. Así por ejemplo para el caso anterior, el problema estaría resuelto con el bucle siguiente:

repeat with x = 1 to 45

set the puppet of sprite x to true end repeat

A continuación se describen los dos tipos de bucles que nos podemos encontrar en Lingo.

• El bucle "repeat while": Este es un bucle que ejecuta su código mientras se cumpla una expresión de control. Esta expresión puede ser cualquier variable o expresión que se pueda evaluar como verdadera (TRUE) o falsa (FALSE). El formato de este bucle es el siguiente:

repeat while condición

sentencias end repeat

Por ejemplo:

repeat while the mouseH > 40 -- acciones--

end repeat repeat while not terminado

-- acciones --- end repeat

En el bucle que se muestra a continuación se detiene la película durante cinco segundos.

startTimer repeat while the timer < 5 * 60

put "Esperando cinco segundos" end repeat

Hay que tener cuidado con los bucles repeat while, ya que mientras están funcionando,

absorverán toda la atención del programa por lo que, las pulsaciones del ratón, las animaciones y el resto de acciones de la película se detendrán.

• El bucle "repeat with": Este es un "bucle contador". Realiza una serie de acciones

hasta que un contador alcanza un número predefinido por el programador. El formato de este bucle es el siguiente:



repeat with variable=inicio to final

sentencias end repeat

Por ejemplo:

repeat with x = 1 to the number of words in field "textos" if word x of field "textos" = "lingo" then alert "Has escrito Lingo"

end repeat Este bucle repite la acción de búsqueda desde 1 hasta el numero de palabras que hay en el campo "textos". El bucle siguiente simplemente realiza una cuenta de 1 a 260, contando de uno e uno, y la imprime en un campo de texto.

repeat with cuenta = 1 to 260 set cuenta = cuenta + 1 put cuenta into field "msg"

end repeat Este otro, realiza la misma cuenta de 1 a 260, pero contado de dos en dos, ya que el valor de la variable "cuenta" es aumentada en 2 en cada iteración del bucle.

repeat with cuenta = 1 to 260 set cuenta = cuenta + 2 put cuenta into field "msg"

end repeat

Es fácil imaginarse cientos de utilidades para los bucles, desde una simple cuenta, hasta la programación de la trayectoria de una pelota de fútbol o un proyectil en un juego. Siempre que queramos realizar acciones repetitivas en un programa debemos recurrir a los bucles, ya que estos forman parte de cualquier estructura de código en cualquier lenguaje de programación.

8.4. Eventos y manejadores de eventos (handlers). Entendemos por eventos aquellas acciones que pueden ocurrir en nuestra película y que

podemos capturar y manipular por medio de un manejador de eventos o handler. Algunos ejemplos de eventos son: pulsación de una tecla del teclado, pulsar sobre alguno de los botones del ratón, comenzar la película, etc.

Cada vez que ocurre alguno de estos eventos, son capturados por medio de un handler o

manejador que nos permite programar el conjunto de acciones que queremos que se ejecuten. Algunos ejemplos de manejadores de eventos son: on KeyDown, on KeyUp, on MouseDown, on MouseUp, on exitframe, etc.

A continuación vamos a describir alguno de los eventos más significativos que podemos

manejar en Lingo.



8.4.1. Eventos de teclado.

• on keyDown: o Sintaxis:

On KeyDown Sentencias

End

o Descripción: Es el manejador usado por Director cuando se pulsa una tecla. Si queremos aplicar este handler a un sprite que sea un campo editable, debemos poner el handler en un script de sprite. Si queremos aplicar este handler a un miembro del reparto que sea un campo editable, debemos poner el handler en un script del miembro del cast. Si queremos aplicar este handler a un todo un frame, debemos poner el handler en un frame script. Si queremos aplicar este handler a toda la película, debemos poner el handler en un movie script.

o Ejemplo: on keyDown if the key = RETURN then go to frame 5 end keyDown Comprueba si la tecla que se ha pulsado es la tecla de retorno y en caso de ser así, salta al frame 5.

• on keyUp: o Sintaxis:

On KeyUp Sentencias

End

o Descripción: Es el manejador usado por Director cuando soltamos una tecla pulsada. Si queremos aplicar este handler a un sprite que sea un campo editable, debemos poner el handler en un script de sprite. Si queremos aplicar este handler a un miembro del reparto que sea un campo editable, debemos poner el handler en un script del miembro del cast. Si queremos aplicar este handler a un todo un frame, debemos poner el handler en un frame script. Si queremos aplicar este handler a toda la película, debemos poner el handler en un movie script.

o Ejemplo: on keyUp if the key = RETURN then go to frame 5 end keyUp Comprueba si la tecla que se ha soltado es la tecla de retorno y en caso de ser así, salta al frame 5.

8.4.2. Eventos de ratón.

• on MouseDown: o Sintaxis:

On MouseDown Sentencias



End

o Descripción: Es el manejador usado por Director cuando pulsamos un botón del ratón.

• on MouseEnter: o Sintaxis:

On MouseEnter Sentencias

End

o Descripción: Es el manejador usado por Director cuando el puntero del ratón entra en el área activa de un sprite, aun cuando no pulsemos ningún botón del mismo.

• on MouseLeave: o Sintaxis:

On MouseLeave Sentencias

End

o Descripción: Es el manejador usado por Director cuando el puntero del ratón sale del área activa de un sprite.

• on MouseWithin: o Sintaxis:

On MouseWithin Sentencias

End

o Descripción: Es el manejador usado por Director cuando el puntero del ratón se encuentra dentro del área activa de un sprite.

• on rightMouseDown: o Sintaxis:

On rightMouseDown Sentencias

End

o Descripción: Es el manejador usado por Director cuando pulsamos sobre el botón derecho del ratón.

• on rightMouseUp: o Sintaxis:

On rightMouseUp Sentencias

End

o Descripción: Es el manejador usado por Director cuando soltamos el botón derecho del ratón que hemos pulsado previamente.

MANUAL DE MACROMEDIA DIRECTOR - Presentación ...jfernand/0405/tsm/director.pdf · Tecnologías...

Documents

Transcript of MANUAL DE MACROMEDIA DIRECTOR - Presentación ...jfernand/0405/tsm/director.pdf · Tecnologías...