1 / 47

Introducción a Macromedia Director 8.0

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

jamar
Download Presentation

Introducción a Macromedia Director 8.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Universidad Autónoma de Baja California Introducción a Macromedia Director 8.0 M.C. Angelina Covarrubias Valdez angie@uabc.mx Delia Esquer Meléndez desquer@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. Introducción a Macromedia Director • Es un programa de autor. • Es un ambiente completo para el desarrollo de aplicaciones Multimedia. • Programa diseñado para crear contenido y prográmas autónomos y ejecutables. • Crea “proyectores” que permiten ver las aplicaciones en cualquier computadora sin necesidad de tener el Director instalado • Es un programa “integrador” de recursos que combina texto, gráficos, sonido, video.

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

  5. Metáfora del Teatro

  6. Metáfora del Cine

  7. Ambiente de Director 8

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

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

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

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

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

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

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

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

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

  17. Importando archivos • En Director se pueden importar imágenes, como por ejemplo: GIF, JPG, 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.

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

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

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

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

  22. Director • DIA 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  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 mouseWithin me member("txt2").text="Este es un cuadro" end on mouseLeave me member("txt2").text=EMPTY end

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

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

More Related