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
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
Top Related