Universidad Autónoma de Baja California
Introducción a Macromedia Director 8.0
M.C. Angelina Covarrubias Valdez
[email protected]
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, CDROM 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
 Panel de control
 Reparto
 Edición
Stage
Control Panel
Cast
Score
ctrl+1
ctrl+2
ctrl+3
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
ejecutada en el ambiente de edición.
es
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
• 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
end
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
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 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
Descargar

Document