Introducción a Macromedia Director 8.0

M.C. Angelina Covarrubias Valdez

Universidad Autónoma de Baja California

Ensenada, B. C., 21 de septiembre del 2005

angie@uabc.mx

Introducción a Macromedia Director

• Es una de las mejores herramientas para la producción multimedia; es ideal para desarrolladores de sitios Web, productores de multimedia y educadores.

• Permite crear contenido interactivo como sitios Web, CD-ROM de entretenimiento y educacionales, simulaciones y presentaciones interactivas.

• Los usuarios pueden ver las películas de Director a través de un navegador de Internet, o en CD-ROM.

Elementos del ambiente

• Los archivos que Director crea se les conoce como Movies o películas y tienen la extensión (.dir).

Elementos del ambiente

Escenario Stage ctrl+1 Panel de control Control Panelctrl+2 Reparto Cast ctrl+3 Edición Score ctrl+4

Ambiente de Director MX

Reparto - Cast

• En esta ventana es donde se almacenan los elementos importados o creados en el mismo Director, que formarán parte de la película.

Los miembros del reparto pueden ser:

Textos Bitmaps Figuras vectoriales Sonidos Vídeos Transiciones Scripts en Lingo Etcétera

Escenario - Stage

• Es el área visible de una película, donde se van colocando los elementos del cast que deseamos aparezcan en nuestra película.

Edición - Score

• En el score se coordinan los elementos de la película; es decir, indica cuando un elemento debe aparecer en el escenario.

• Los canales de efectos (Effect channels) permiten controlar el ritmo de las películas, del sonido, la paleta de color, transiciones y comportamientos del Lingo, asignados a un frame.

Panel de control – Control panel

• El control panel controla como la película es ejecutada en el ambiente de edición.

Inspector de propiedades

• Con el inspector de propiedades se pueden ver y cambiar las propiedades de un elemento del sprite, elementos del reparto, de la película, etcétera.

• Un sprite es una instanciade un elemento del reparto.

• Cada sprite puede tener sus propios valores y no afectar a los elementos.

• Si editas un elemento, todos lossprites creados con ese

elementoson actualizados.

Paleta de herramientas – Tool Palette

• Esta es la paleta de herramientas de Director (Ctrl + 7).

• En ella se puede encontrar el puntero, la herramienta de giro, figuras con relleno y sin relleno, texto, líneas, los botones de selección y radio, herramientas que permiten asignar color a las figuras, etcétera.

Ventana de texto – Text window

• La ventana de texto (Ctrl+6) permite, entre otras cosas, asignar el tipo y tamaño de letra, la alineación, espacio entre líneas, para los textos y campos de texto.

Ventana de dibujo - Image

• En esta ventana se pueden crear dibujos.

Figuras vectoriales-Vector shape

• Se pueden crear figuras vectoriales con las herramientas de dibujo que se encuentran en la ventana Vector Shape.

Ejemplos de aplicaciones

• Aplicaciones desarrolladas con Macromedia Director.

Importando archivos

• En Director se pueden importar imágenes, como por ejemplo: GIF, JPGE, PNG, etcétera.

• Es importante pensar para qué se van a utilizar las imágenes, para decidir el formato correcto. Una pantalla funcionando a 256 colores corresponde a 8 bits de resolución, a miles de colores corresponde a 16 bits, y a millones de colores corresponde a 32 bits.

Importando archivos

• Si se quieren mostrar fotografías a alta resolución se puede optar por 16 ó 32 bits, pero si lo que se importa son imágenes para animación será suficiente importarlas a 8 bits de profundidad de color, de este modo se ocupará menos memoria y funcionará más rápido la película.

• Si se quiere importar un solo archivo, se debe seleccionar y después presionar el botón Add. En caso de querer importar todas las imágenes, se presiona el botón Add All.

• Si se desea eliminar un archivo, se presiona el botón Remove.

• Por último, el botón Import.

Importando archivos

• Después, aparece la ventana “Image Options..”, donde se van a definir algunos ajustes para las imágenes: Profundidad de color (Color Depth): En el ejemplo es de 32 bits (millones

de colores). Paleta de color (Palette): Lo más usual es asignar la paleta de color del

sistema, ya sea Macintosh ó PC. Imagen (Image): Se recomienda activar la opción Dither para que los

degradados de color de la imagen sean lo más suaves posible. Trim White Space: Remueve los píxeles blancos de las esquinas o bordes

de las imágenes.

Si se desea aplicar las opcionespara todas las imágenes, debeseleccionar Same SettingsFor Remaining Images.

Animación

• Tweening. Es una técnica que se utiliza para modificar algunas propiedades de un sprite, como el tamaño o la posición.

• Ejercicio

Utilizando la ventana Vector Shape, generar un recuadro.

Cambiar las características de la película (640 X 480) utilizando el inspector de propiedades.

Colocar el recuadro en el escenario. Con el cursor del ratón seleccionar el punto

que aparece y arrastrarlo hasta generar el recorrido que tendrá el elemento.

Animación

Si se desea cambiar la trayectoria, debe presionar la tecla alt y seleccionar un punto de la trayectoria.

Definir el nuevo tamaño del elemento una vez que termine el recorrido; para esto debe seleccionar el último sprite que abarca el elemento (poner valores W y H a la mitad del original).

Salvar el archivo, generar el proyecto y visualizar la película.

Agregar un script para que se detenga la película:on exitFrame me go to the frameend

Director

• DIA 3

Ejercicio 1

• Importar una imagen.• Generar los siguientes textos:

Hola Cómo Estas ???

• Colocar todos los textos y la imagen en la misma posición del escenario.

• En el score, deben abarcar 5 frames.

Ejercicio 1

• En la imagen, agregar un comportamiento que permitirá regresar al frame 1; por lo tanto, se repetirá la película.

• La ventana que se despliega es la siguiente: Seleccionar el signo +

para generar un nuevo comportamiento: Regresar

Evento: ExitFrame Actions: Navigation-Go

to frame

Ejercicio 1

• Reproducir la película.• Agregar 5 frames a cada elemento.

Seleccionar el elemento y después el menú Insert y la opción Frames.

Capturar el no. de frames que se agregarán.

• Copiar la imagen y pegarla a un lado.• La nueva copia, debe abarcar un solo

frame.

Ejercicio 1

• Eliminar el comportamiento de la imagen original. Seleccionar la imagen. En el inspector de propiedades, en la

etiqueta Behavior seleccionar el comportamiento a eliminar, después el signo – y por último la opción remove behavior.

Salvar el archivo y generar el proyecto.

Ejercicio 2

• Crear una nave utilizando la ventana Paint.

• Crear el fondo utilizando la ventana Vector Shape. Debe tener el efecto gradient.

• Crear el texto con la ventana Text. Debe decir: Bienvenidos a Director 8!

Ejercicio 2

Para generar la animación/efectos:• Colocar el fondo en el escenario

Debe cubrirlo por completo (640 x 480). En el score, debe abarcar los frames del 1-30. Poner candado al fondo para que no se

mueva.• Colocar la nave en la parte superior

derecha, fuera del escenario. Score 5-30• Colocar el texto en medio del escenario,

en la parte de abajo. Score 5-30

Ejercicio 2

• Con la nave, trazar la línea de tal forma que quede arriba del texto, al centro del mismo.

• Seleccionar la nave y el texto, y poner el fondo transparente (desde el inspector de propiedades.

• Poner el efecto de la curva, para esto debes presionar la tecla ALT y seleccionar uno de los puntos de la línea.

• En el score, seleccionar el punto inicial del texto y modificar el porcentaje de transparencia a 0% y el punto final a 100%.

• Reproducir la película.

Ejercicio 2

• Quitar el candado y poner el fondo hasta el número 59 y poner nuevamente el candado.

• Seleccionar el sprite de la nave, copiarlo y pegarlo a un lado.

• Con el sprite seleccionado aún, seleccionar en el menú Modify, la opción Reverse Sequence.

• Repetir los pasos para el texto.• Poner tiempo a la película:

En la sección de tiempo (frame no. 30), dar doble click.

Seleccionar la opción “Wait for mouse click or key press”

Ejercicio 2

• Crear un texto que diga: Salir• En el frame número 60 agregar el

texto en cualquier parte del escenario y quitarle el fondo.

• Con el texto seleccionado, dar un click al botón derecho y en el menú que se despliega, seleccionar Behaviors.

Ejercicio 2

• La ventana que se despliega es la siguiente: Seleccionar el signo

+ para generar un nuevo comportamiento. Salir

Evento: MouseDown Actions: Navigation-

Exit

Ejercicio 2

• Cambiar en el Control Panel, a 10 FPS.

• Generar el proyecto y visualizar la película.

Director 8

• Día 4.• Realizar un ejercicio similar,

utilizando los elementos de que disponen.

Marcadores en Director

• Los marcadores (markers) nos permiten ubicar secciones de una película, facilitándonos la navegación y la interacción con el usuario.

Marcadores en Director

• Para mandar llamar un marcador, podemos hacerlo a través de las librerías que tiene el Director (Window>Library Palette).

• En el submenú Controls, seleccionando la opción Jump to Marker Button.

Librerías en Director

• Para lograr que una película se detenga en cierto momento, también se puede utilizar un comportamiento que viene definido en Director (Window>Library Palette).

• En la paleta de librerías, seleccionar el menú Navigation, y la opción Hold on Current Frame.

Terminar una película

• Para terminar de reproducir una película, es necesario utilizar un comportamiento y los pasos a seguir son: Seleccionar el signo +

para generar un nuevo comportamiento. Salir

Evento: MouseDown Actions: Navigation-Exit

Cambiar elementos

• Para cambiar un elemento por otro, se puede utilizar el siguiente comportamiento: Sobre el elemento, botón izquierdo del

mouse, seleccionar Behavior. Asignar el nombre: cambiar. Seleccionar la opción: MouseEnter. En la acción, seleccionar Sprite y ahí Change

Cast Member. En la ventana que se despliega seleccionar el

nuevo elemento que aparecerá.

Reestablecer elementos

• En caso de querer que el cambio se realice solamente al pasar el cursor del mouse, entonces lo que sigue es restablecer el elemento original al salir el mouse, para esto: Sobre el elemento, botón izquierdo del mouse,

seleccionar Behavior. Seleccionamos el comportamiento existente:

cambiar. Seleccionar la opción: MouseLeave. En la acción, seleccionar Sprite y ahí Change Cast

Member. En la ventana que se despliega seleccionar el

elemento original.

Cambiar la imagen del cursor

• Para hacer que cambie la imagen del cursor del mouse al entrar a un elemento se deben realizar los siguientes pasos: Seleccionar el comportamiento: cambiar Seleccionar la opción: MouseEnter. En la acción, seleccionar Cursor y ahí

Change Cursor. En la ventana que se despliega

seleccionar la imagen que se desea.

Reestablecer la imagen del cursor

• Para hacer que la imagen del cursor del mouse se reestablezca al salir del elemento, realizar los siguientes pasos: Seleccionar el comportamiento: cambiar Seleccionar la opción: MouseLeave. En la acción, seleccionar Cursor y ahí

Restore Cursor.

Jugando un poco con Lingo

• Cómo lograr que al pasar el cursor del ratón sobre un elemento, se muestre un texto: En el escenario colocar:

Un elemento texto que diga: Texto 1 Un elemento texto que diga: Mover Un elemento texto pero sin nada escrito. Un recuadro.

Poner nombres adecuados a los elementos.

Jugando un poco con Lingo

• Seleccionar Texto 1 y agregar un script. Posicionar el cursor del ratón sobre el texto. Seleccionar el botón derecho del ratón y

seleccionar script. En la ventana de código que aparece capturar lo

siguiente (no olvides poner nombre al script):

on mouseWithin me member("txt2").text="Aquí dice texto 1"end

on mouseLeave me member("txt2").text=EMPTYend

Jugando un poco con Lingo

• Seleccionar el cuadro y agregar un script. En la ventana de código que aparece

capturar lo siguiente (no olvides poner nombre al script):

on mouseWithin me member("txt2").text="Este es un cuadro"end on mouseLeave me member("txt2").text=EMPTYend

Elementos Movibles

• Para lograr que el usuario pueda mover (arrastrar) elementos, en el inspector de propiedades se debe seleccionar la opción: Moveable

Jugando un poco con Lingo

• Seleccionar el cuadro y agregar un script. En la ventana de código que aparece capturar lo

siguiente (no olvides poner nombre al script):

on mouseUp me if (sprite 4 within sprite 3) then alert "Muy bien" else if not(sprite 4 within sprite 3) then alert "Debes colocar el texto completamente

dentro del recuadro" sprite (4).locH=436 sprite (4).locV=313 end if end if end

Casillas de verificación y sonidos

• Crear un proyecto con tres secciones: Ejemplo 1 Ejemplo 2 Ejemplo 3

• Realizar los respectivos ejercicios en cada sección, tal como se muestra en el proyecto principal.

Casillas de verificación – Ejemplo 1

• Insertar una casilla de verificación y poner el texto: Selecciona la casilla.

• Insertar un elemento: Field (campo)• En la casilla de verificación agregar el siguiente

script:

on exitFrame if the hilite of member "cv1" = TRUE then set member ("campo1").text= "Casilla seleccionada" else set member ("campo1").text= "Casilla no

seleccionada" end if go to the frameend

Casillas de verificación: Ejemplo 2

• Agregar el texto: Selecciona los que consideras que son frutas.

• Agregar un recuadro grande.• Agregar 5 casillas de verificación:

Manzana Tomate Pera Cebolla Sandía

Casillas de verificación: Ejemplo 2

• Agregar los siguientes textos, fuera de la pantalla y verificar su ubicación (X – Y): Texto 1: Bien, es una fruta Texto 2: No, no es una fruta

• Agregar el siguiente scrip, a la primer casilla:on mouseUp me if the hilite of member "manzana" = TRUE then sprite (13).locH=400 sprite (13).locV=200 sprite (14).locH=-111 sprite (14).locV=10 set member ("tomate").hilite= FALSE set member ("pera").hilite= FALSE set member ("sandia").hilite= FALSE set member ("cebolla").hilite= FALSE end if end

Casillas de verificación: Ejemplo 2

• Repetir en cada una de las casillas, cambiando los elementos correspondientes.

• En caso de cambiar a un color diferente al seleccionar la opción, se tendría que agregar el siguiente código:

set member(“Manzana").color = rgb(255, 128, 0)

Sonidos: Ejemplo 3

• Agregar 3 imágenes diferentes.• Importar los sonidos.• Para cada imagen agregar el

comportamiento: New Behavior: Gato Events: MouseEnter Actions: Sound > Play cast member

Seleccionar el archivo. Agregar música de fondo en toda la

película