Universidad Autónoma de Baja California Introducción a Macromedia Director 8.0 M.C. Angelina Covarrubias Valdez angie@uabc.mx Ensenada, B. C., 21 de septiembre del 2005

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 Panel ctrl+2 Reparto Cast ctrl+3 Edición Score ctrl+4

Ambiente de Director MX

Reparto - Cast Los miembros del reparto pueden ser: 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 instancia de un elemento del reparto. Cada sprite puede tener sus propios valores y no afectar a los elementos. Si editas un elemento, todos los sprites creados con ese elemento son 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 opciones para todas las imágenes, debe seleccionar Same Settings For Remaining Images.

Animación Utilizando la ventana Vector Shape, generar un recuadro. 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 frame end

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=EMPTY

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=EMPTY

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

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 frame end

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