Introducción a Macromedia Director 8.0

1. 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

2. 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.

3. 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 Stagectrl+1 • Panel de control Control Panel ctrl+2 • Reparto Castctrl+3 • Edición Score ctrl+4

4. Ambiente de Director MX

5. 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

6. 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.

7. 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.

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

9. 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.

10. 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.

11. 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.

12. Ventana de dibujo - Image • En esta ventana se pueden crear dibujos.

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

14. Ejemplos de aplicaciones • Aplicaciones desarrolladas con Macromedia Director.

15. 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.

16. 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.

17. 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.

18. 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.

19. 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

20. Director • DIA 3

21. 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.

22. 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

23. 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.

24. 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.

25. 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!

26. 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

27. 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.

28. 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”

29. 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.

30. Ejercicio 2 • La ventana que se despliega es la siguiente: • Seleccionar el signo + para generar un nuevo comportamiento. Salir • Evento: MouseDown • Actions: Navigation-Exit

31. Ejercicio 2 • Cambiar en el Control Panel, a 10 FPS. • Generar el proyecto y visualizar la película.

32. Director 8 • Día 4. • Realizar un ejercicio similar, utilizando los elementos de que disponen.

33. 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.

34. 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.

35. 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.

36. 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

37. 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á.

38. 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.

39. 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.

40. 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.

41. 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.

42. 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 end

43. 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 end

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

45. 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

46. 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.

47. 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

48. 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

49. 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

50. 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)