manual m2 sm2 informática

71
Manual del estudiante MODULO II: Creación de productos multimedia a través de software de diseño SUBMÓDULO II: Generar animaciones con elementos multimedia Centro de Bachillerato Tecnológico agropecuario No. 138 Centro de Bachillerato Tecnológico agropecuario No. 138 Villa Hidalgo, Villa Hidalgo, Zac. Zac. Elaboró: IQ. Pablo Chávez Cruz Elaboró: IQ. Pablo Chávez Cruz Periodo de creación: Agosto 08 – Enero 09 Periodo de creación: Agosto 08 – Enero 09 1

Upload: guest141c75

Post on 18-Nov-2014

3.908 views

Category:

Education


6 download

DESCRIPTION

Informática

TRANSCRIPT

Page 1: Manual M2 Sm2 InformáTica

Manual del estudiante

MODULO II: Creación de productos multimedia a través de software de diseño

SUBMÓDULO II: Generar animaciones con elementos multimedia

Centro de Bachillerato Tecnológico agropecuario No. 138Centro de Bachillerato Tecnológico agropecuario No. 138

Villa Hidalgo,Villa Hidalgo, Zac. Zac.

Elaboró: IQ. Pablo Chávez CruzElaboró: IQ. Pablo Chávez Cruz

Periodo de creación: Agosto 08 – Enero 09Periodo de creación: Agosto 08 – Enero 09

1

Page 2: Manual M2 Sm2 InformáTica

Justificación: La informática se ha convertido en una herramienta indispensable en cualquier faceta de nuestra vida, el trabajo, la escuela, el hogar, diversión, etc. Las animaciones de imágenes o la creación de videos, pueden llegar a ser una actividad remuneradora para quien pudiera dedicarse profesionalmente en ello.

Este manual pretende ser solo una guía para el estudiante y para el docente, sobre conceptos básicos de dibujo, animación y video. Existen programas especializados y con interfaces poderosas, por lo que al llevar a cabo las prácticas aquí citadas nos ayudará a entender el funcionamiento de algunos de ellos.

Cabe señalar que el uso y creación de productos en cualquier programa generador de multimedia, está limitado a la imaginación del usuario, por lo tanto prueba, practica, explora, configura, transforma todo lo que tu desee.

Este manual impreso viene acompañado de un CD con el manual electrónico, el cual a través de vínculos facilita su exploración tanto del material instructivo y prácticas, como también la visualización de una serie de animaciones y videos vinculados al manual. El uso del manual electrónico facilitara mucho el aprendizaje, navegación por los temas y ver ejemplos de cómo podrían verse tus productos multimedia generados.

Objetivo: Que el estudiante adquiera los conocimientos y las habilidades en el manejo de programas generadores de productos multimedia. Al mismo tiempo que entrena la creatividad y la capacidad de transformar y proponer productos multimedia.

2

Page 3: Manual M2 Sm2 InformáTica

INDICE

1. Elementos de la ventana del programa de diseño. 1.1 Barra de Menús 1.2 Barra de Herramientas 1.3 Ventanas Acoplables

…………………3…………………6

…………………8……………….10

2. Manipular el dibujo con herramientas de diseño 2.1 Configuración de la página. 2.2 Crear el dibujo utilizando herramientas de Diseño 2.3 Retocar el dibujo utilizando herramientas de diseño. 2.4 Convertir objetos a símbolos. 2.5 Edición del dibujo utilizando herramientas de

diseño.2.6 Importar y exportar imágenes

……………….12……………….13……………….14……………….16……………….19……………….21

……………….23

3. Aplicar animación al dibujo 3.1 Aplicar movimiento al dibujo 3.2 Modificar tamaño del dibujo 3.3 Manipular formas del dibujo

……………….24……………….25……………….29……………….32

4. Manipular Botones. 4.1 Creación de botones. 4.2 Creación de botones con relieve. 4.3 Creación de botones activos.

……………….39……………….40……………….41……………….42

5. Manipular sonido ……………….446. Manipular video ……………….467. Publicar película

7.1 Descripción de las herramientas de Windows Movie Maker.

7.2 Los paneles. 7.3 El guión gráfico y la línea del tiempo. 7.4 Creación y publicación de un proyecto.

……………….50

……………….50……………….51……………….51.………………52

8. Bibliografía ……………….569. Agradecimientos .……………..57

3

Page 4: Manual M2 Sm2 InformáTica

1. Elementos de la ventana del programa de diseño.

Introducción: Desde hace algunos años se ha popularizado un sencillo término que engloba muchas tecnologías: multimedia. Se encuentra en las presentaciones electrónicas, las películas animadas por computadora, los juegos electrónicos, las páginas Web, las enciclopedias y diccionarios virtuales, la realidad virtual y muchas aplicaciones más.

Podríamos definir en términos claros lo que es multimedia como el conjunto de programas y equipos que utilizan de manera conjunta y simultanea diversos medios como texto, imágenes, sonido, video y animaciones para transmitir información.

La conectividad que proporcionan los hipertextos hace que los programas multimedia no sean meras presentaciones estáticas con imágenes y sonido, sino una experiencia interactiva infinitamente variada e informativa.

Hipertexto: Marcas de texto que permiten, mediante una simple pulsación del ratón sobre ellas, pasar de una página a otra de un mismo documento a otro en la misma computadora, o de un documento en una computadora a otro ubicado en una terminal remota.

Hipermedia: Se trata del mismo principio del hipertexto, solo que las ligas o vínculos asociados abren un archivo de sonido, activan un video o muestran un gráfico.

El hipertexto permite leer de manera no lineal, siguiendo os temas de interés, sin importar un orden. Los documentos están relacionados mediante hipervínculos. Como se muestra en la siguiente figura.

4

Page 5: Manual M2 Sm2 InformáTica

Actividad 1.1

EVALUACIÓN DIAGNÓSTICAMODULO: 2 Creación de productos multimedia a través de software de diseño SUBMODULO: 2 Generación de animaciones con elementos multimediaNombre del estudiante: ______________________________________________ Semestre: ____________ Grupo: ________Nombre del Facilitador: _____________________________Fecha: ___________

En la vida diaria nuestra mente es bombardeada constantemente mediante imágenes, tanto estáticas como en movimiento, con la finalidad de despertad nuestro interés en un artículo de consumo o de entretenimiento, así como a expresiones artísticas.

Contesta el siguiente cuestionario.

Menciona un logotipo de algún producto comercial que te guste y describe sus características, como colores, forma, tamaño, etc.____________________________________________________________________________________________________________________________________________________________________________________Cuál es la página Web que visitas con frecuencia y menciona el tipo de imágenes o animaciones que contiene. ____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Menciona los programas que has utilizado en la elaboración de dibujos o presentaciones animadas.

5

Page 6: Manual M2 Sm2 InformáTica

____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Cuáles son las barras principales de cada programa de elaboración de dibujos o animaciones que has utilizado. ____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Describe brevemente el procedimiento para abrir un programa._______________________________________________________________________________________________________________________________________________________________________________Describe brevemente como guardar un documento elaborado en cualquier programa._______________________________________________________________________________________________________________________________________________________________________________________Menciona como insertas una imagen en un documento._______________________________________________________________________________________________________________________________________________________________________________________Menciona como aplicas color a objetos en un documento_______________________________________________________________________________________________________________________________________________________________________________________

Forma equipos de 5 y discute tus respuestas, den una respuesta en base a la de todos para cada pregunta y plantéenla al grupo.En éste capítulo analizaremos los principales componentes de las ventanas de nuestro programa de animaciones, cabe señalar que muchas de sus características y componentes son muy similares a las de otros programas que ya has manejado tal es el caso de las aplicaciones de Office (Word, Excel, Power Point, etc.).

Los principios son aplicables a varios programas de animación o edición de videos.

Empezaremos abriendo nuestro programa, para los cual seguiremos el siguiente procedimiento.

1. Pulsa en el botón inicio.2. Selecciona la opción Todos los programas.3. Ejecuta el programa de animación instalado en tu computadora.4. Inmediatamente aparece la interfaz mostrándote la página de inicio, que te permite

abrir un elemento reciente o crear un nuevo documento.Ahora veamos los principales componentes de la interfaz.

6

Page 7: Manual M2 Sm2 InformáTica

En la imagen se puede ver la interfaz que nos encontraremos la primera vez que abramos el programa.

En esta imagen faltan algunos menús. Todos se irán viendo a lo largo de este curso aunque no aparezcan en esta imagen, que sólo pretende mostrar las partes principales de la interfaz. Veamos cuáles son:

1.1 Barra de menús

Archivo: Permite crear nuevos archivos, abrirlos, guardarlos... Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos, vídeo, imágenes e incluso otras películas).Edición: Es el clásico menú que te permite Cortar, Copiar, Pegar... tanto objetos o dibujos como fotogramas; también permite personalizar algunas de las opciones más comunes del programa.Ver: Además de los típicos Zooms, te permite moverte por los fotogramas y por las escenas.Insertar: Te permite insertar objetos en la película, así como nuevos fotogramas, capas, acciones, escenas...

7

Línea de tiempo

Barra de menús

Capas Zoom

Bar

ra d

e H

erra

mie

ntas

Escenario

Área de Trabajo

Panel de propiedades

Ventanas acoplables

Mod

ific

ador

es d

e la

s H

erra

mie

ntas

Page 8: Manual M2 Sm2 InformáTica

Modificar: La opción Transformar permite modificar los gráficos existentes en la película. El resto de opciones permite modificar características de los elementos de la animación Suavizar, Optimizar o de la propia película (Capa, Escena...).Texto: Sus contenidos afectan a la edición de texto. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación.Control: Desde aquí se modifican las propiedades de reproducción de la película. Reproducir, Rebobinar, Probar Película....Ventana: Este menú, además de las opciones clásicas acerca de cómo distribuir las ventanas, incluye accesos directos a TODOS los Paneles.

Actividad 1.1.1

1. Inicia una sesión en el programa de animación2. Selecciona el menú Archivo.3. Selecciona la opción Importar. 4. Selecciona la opción Importar a escenario.

5. Del cuadro de selección Importar, ubica la carpeta donde guardes imágenes, y selecciona la que desees.

6. Pulsa Abrir.

8

Page 9: Manual M2 Sm2 InformáTica

Como puedes observar hemos transferido una imagen a nuestro programa y podemos manipularlo para darle animación.

Actividad 1.1.2

1. Encuentra el menú donde se encuentran los siguientes comandos u opciones y escríbelo en la columna Menú, recuerda que pueden estar en un submenú.

Menú ComandoProbar películaEditar símbolosFotograma ClaveBiblioteca, Mezclador de coloresCombinar objetos, AgruparPublicar

1.2 Barra de herramientas.

9

Contiene todas las Herramientas necesarias para el dibujo. Veamos cuáles son las más importantes y cómo se usan:

Herramienta Selección (flecha): Su uso principal es para seleccionar objetos. Permite seleccionar los bordes de los objetos, los rellenos, los bordes.

Herramienta Línea: Permite crear líneas rectas de un modo rápido. Las líneas se crean como en cualquier programa de dibujo, se hace clic y se arrastra hasta donde queramos que llegue la línea recta.

Herramienta Texto: Crea un texto en el lugar en el que hagamos clic.

Herramienta Óvalo: La herramienta Óvalo permite trazar círculos o elipses de manera rápida y sencilla. Para hacer un círculo perfecto mantenemos presionada la tecla SHIFT mientras dibujamos el círculo.

Herramienta Rectángulo: Su manejo es idéntico al de la Herramienta Óvalo, tan solo se diferencian en el tipo de objetos que crean.

Herramienta Lápiz: Permite dibujar líneas con la forma que decidamos, modificando la forma de estas a nuestro gusto.

Herramienta Brocha: Su funcionalidad equivale a la del lápiz, pero su trazo es mucho más grueso. Se suele emplear para aplicar rellenos. Se puede modificar su grosor y forma de trazo.

Page 10: Manual M2 Sm2 InformáTica

Actividad 1.2.1

1. Inicia una sesión en el programa de animaciones.2. Crea un nuevo documento.3. En la barra de herramientas selecciona la herramienta rectángulo y dibuja un rectángulo

de cualquier tamaño en el escenario.

4. Ahora seleccione la herramienta de selección y rodeando todo el rectángulo selecciónalo, cabe señalar que con la herramienta selección, si solo das clic sobre el objeto el borde no se selecciona, y al moverlo o modificarlo, con el borde no se realizarán éstas acciones.

5. Ahora selecciona la herramienta Color de relleno , y aplica cualquier color del panel de colores.

10

Page 11: Manual M2 Sm2 InformáTica

6. Puedes utilizar también la Herramienta de Ovalo y dibujar círculos y colorearlos. Realiza diferentes pruebas con rectángulos y círculos.

1.3 Ventanas acoplablesLas ventanas acoplables nos son de gran utilidad para guardar objetos o animaciones que podemos utilizar de manera independiente para crear una animación compuesta de varias animaciones u objetos. Dichos elementos los llamamos símbolos que veremos más adelante. El lugar donde almacenamos dichos símbolos se llama Biblioteca.

Otras ventanas son el panel de propiedades que nos muestra el formato que estamos trabajando en nuestra área de trabajo (Escenario) como es: el nombre del documento, el tamaño del escenario, color del fondo, velocidad de reproducción de los fotogramas (animación en un momento determinado), etc.

11

Existe otra ventana que es el mezclador de colores donde podremos aplicar rellenos de color sólido, degradado (Mezcla de diferentes colores) y Transparencias

Page 12: Manual M2 Sm2 InformáTica

En el panel de filtros podemos aplicar diferentes efectos a los objetos para hacerlos más reales, como son las sombras, desenfoque para dar sensación de distancia, iluminación, ajuste de color, etc.

Por último veremos el panel de Acciones, en el cuál alimentaremos etiquetas para lograr efectos de animación automáticos a nuestros objetos.

Estas son las principales ventanas acoplables que usaremos en la creación de animaciones. No te preocupes por entenderlas ahora, veremos su uso en cada práctica que realizaremos, solo identifica cuales son éstas.

Para activar cada una de estas ventanas seguiremos el procedimiento siguiente:

1. En la barra de menús selecciona el menú Ventana.2. Activa cada ventana dando clic en la opción, line de tiempo, mezclado de colores,

propiedades, biblioteca, deberá aparecer una palomita en las ventanas seleccionadas.

12

Page 13: Manual M2 Sm2 InformáTica

2. Manipulación del dibujo utilizando herramientas de diseño.Después de que creamos dibujos simples podemos manipularlos con las herramientas de diseño, para darle color ya sea sólido o degradado, cambiar de tamaño, forma, agrupar o crear a partir de éstos dibujo simples dibujos con efecto realista o dibujos animados.Algunos dibujos que crearemos serán los siguientes:1.- Bolas de Billar

2.- Mariposa

13

Page 14: Manual M2 Sm2 InformáTica

3.- Burbujas

4.- Logotipo personal

2.1 Configuración de la página.

Para empezar a trabajar los dibujos primero adecuaremos el escenario de acuerdo a nuestras necesidades.1. Inicia una sesión con el programa de animación.2. Crea un nuevo documento.3. En el panel de propiedades da clic en el botón de tamaño.

14

Page 15: Manual M2 Sm2 InformáTica

4. En la casilla de dimensiones cambia los valores de dimensiones a 600 de anchura y 400 de altura, el fondo selecciona el color negro y da clic sobre el botón transformar en predeterminado, da clic en aceptar.

5.- Nuestro escenario quedara configurado de la siguiente manera:

2.2 Crear el dibujo utilizando herramientas de Diseño.Ahora crearemos el primer dibujo que es más complicado que el resto, la idea es utilizar el mayor número de herramientas que te ayudaran a crear los demás.

Actividad 2.2.1

15

Page 16: Manual M2 Sm2 InformáTica

Dibujaremos en primer lugar las Bolas de Billar. Iniciaremos con el Tapete1. Inicia una sesión con el programa de animaciones.2. Crea un nuevo documento.3. Dibuja un rectángulo de cualquier tamaño en el escenario.4. Selecciona totalmente el rectángulo y en el panel de propiedades cambia el

tamaño a 600 de anchura X 400 de altura, y con las coordenadas X=0.0 y Y=0.0

5. Con el rectángulo seleccionado da clic en el botón de tipo y selecciona lineal en el mezclador de colores. El rectángulo quedará de la siguiente manera.

6. Ahora vamos a darle el color del tapete es decir verde, pero de manera realista para dar la sensación de fondo. En el mezclador de colores seleccionamos el marcador del lado izquierdo en la línea de ajuste, y aplicamos color verde dando clic en la paleta de colores sobre el color verde.

16

Page 17: Manual M2 Sm2 InformáTica

7. Realizamos el mismo procedimiento en el marcador del lado derecho y aplicamos color negro, nuestro rectángulo debe verse así:

8. Seleccionamos el rectángulo, y con la herramienta Transformación de relleno giramos nuestro degradado hacia la izquierda.

Lo hacemos presionando sobre el círculo de la esquina superior derecha y sin soltar arrastramos hacia la izquierda. Finalmente nuestro rectángulo quedará de la siguiente manera.

Este es el tapete de la mesa de billar. Hemos aprendido a aplicar colores degradados a nuestros dibujos, el que aplicamos fue lineal, pero también podemos aplicar el radial. También aprendimos como transformar el relleno. Lo veremos a más detalle al dibujar las bolas de billar.

9. En el menú Archivo selecciona la opción Guardar como y dale el nombre billar, guárdalo en la carpeta Dibujos.

2.3 Retocar el dibujo utilizando herramientas de diseño.

Ahora crearemos las bolas de Billar siguiendo el siguiente procedimiento:

17

Línea de ajuste

Marcador

Ajustamos la intensidad del color en la barra de intensidad.

Page 18: Manual M2 Sm2 InformáTica

Actividad 2.3.1

1. Abre una sesión en el programa de animaciones.2. Crea un nuevo documento.3. Dibuja un círculo de cualquier tamaño. Selecciona el borde del círculo y elimínalo.4. Aplica con la herramienta de Color de Relleno un degradado verde y negro,

presionando en la paleta de colores la esfera verde.

1. Invierte los colores haciendo uso de los marcadores de la línea de ajuste en el mezclador de colores. Presiona sobre el marcador izquierdo y sin soltar deslízalo hacia la derecha totalmente, haz lo mismo con el marcador derecho hacia la izquierda, pero que quede en el centro de la línea de ajuste.

2. El circulo debe quedar así:

3. En el panel de propiedades cambia el color de fondo a blanco4. Con la herramienta de transformación de relleno cambia el relleno coma en la ilustración

jalando la flecha del centro hasta fuera del círculo hasta que quede de color negro totalmente

5. Posteriormente del punto central mueve el relleno hasta que quede como en la siguiente figura

18

Page 19: Manual M2 Sm2 InformáTica

6. Ahora vamos a dibujar otro circulo con degradado gris con brillo en la parte superior y con la herramienta de transformación de relleno ajustar igual que en paso anterior el degradado hasta tenerlo como se muestra en la figura

Ahora con la herramienta de texto coloca un 8 en el centro del segundo círculo

7. Ahora selecciónalos y del menú modificar seleccione agrupar para convertirlos en un solo objeto y arrástralo hacia el círculo negro en la posición y tamaño que se indica

19

Page 20: Manual M2 Sm2 InformáTica

Ahora vamos a darle brillo para hacerlo más real, dibujamos entonces un rectángulo con relleno degradado y con la herramienta transformación de relleno ajusta el degradado de manera horizontal y lo más oscuro quede en la parte inferior

8. Con el rectángulo seleccionado utiliza la herramienta de envoltura y con los nodos centrales distorsiona el rectángulo de la manera siguiente.

9. En el mezclador de colores ajusta el alfa a 40%, con esto daremos transparencia al objeto, este efecto lo utilizarás al hacer el dibujo de Burbujas posteriormente.

10. Ajusta el tamaño y arrástralo a el círculo como se muestra en la figura

Vemos que nuestro dibujo tiene una presentación más profesional.Recuerda seleccionar dando un clic sobre él borde y elimínalo de los objetos para dar efecto de volumen.

11. Selecciona todos los objetos con la herramienta Selección selecciona el menú modificar y presiona la opción agrupar.

12. Guarda tu dibujo como bola 8 en la carpeta de dibujos.

20

Page 21: Manual M2 Sm2 InformáTica

2.4 Convertir objetos a símbolos.Para poder manipular los dibujos u objetos de manera independiente es necesario crear símbolos, los cuales son como dibujos o animaciones independientes. Un símbolo puede ser un gráfico, un botón o un clip de película y es posible reutilizarlo en el documento y en otros archivos creados en el programa de animaciones. Los símbolos creados se añaden automáticamente a la biblioteca del documento (Ventana > Biblioteca), por lo que es posible utilizarlo varias veces en un mismo documento.Para crear un símbolo seguimos el siguiente procedimiento:

1. Abrimos una sesión en nuestro programa de animaciones.2. Creamos un nuevo documento.3. Seleccionamos el menú insertar, y seleccionamos la opción nuevo símbolo.

4. Le asignamos un nombre que en este caso será esfera, y damos clic en la casilla de selección de acuerdo al símbolo que deseamos crear, seleccionamos por los pronto Gráfico y oprimimos Aceptar.

Como puedes observar nuestra área de trabajo cambia, ya no estamos en el escenario, sino que ahora es el área de trabajo del símbolo. Se distingue por la cruz en el centro

21

Page 22: Manual M2 Sm2 InformáTica

Observa que en la biblioteca aparece el icono del símbolo, y si dibujamos un objeto éste se visualiza también en ésta ventana.

Hemos creado un símbolo con comportamiento de Gráfico.

También podemos convertir un objeto ya creado en símbolo, para ello seguimos el procedimiento siguiente:

1. Abrimos un archivo ya creado, por ejemplo el de Billar de nuestra carpeta de dibujos, seleccionamos el menú Archivo, y elegimos la opción Abrir… buscamos la carpeta de Dibujos y presionamos Abrir

2. Una vez abierto presionamos con el botón secundario sobre el objeto y elegimos del menú emergente Convertir en símbolo…

3. En el cuadro de dialogo que aparece le damos nombre,

seleccionamos la casilla de selección Clip de película y damos clic en aceptar.

Ahora tenemos en nuestra biblioteca el símbolo de clip de película tapete.

22

Page 23: Manual M2 Sm2 InformáTica

2.5 Edición del dibujo utilizando herramientas de diseño.

Con las herramientas de dibujo podemos crear efectos realistas en ellos, tales como brillo, sombras, desenfoque para efectos de distancia, transparencias, entre otros. En la siguiente actividad veremos cómo se logra cada uno de ellos.

Actividad 2.5.1

Vamos a terminar nuestro dibujo de las bolas de billar, para ello seguimos los siguientes pasos:

1. Abre el archivo bola 8.2. Convierte en símbolo Clip de película la bola 8, siguiendo el procedimiento que ya hemos

visto. Ponle como nombre 83. En la Biblioteca presiona el botón secundario del ratón sobre el símbolo y selecciona la

opción copiar.

4. Cierra el archivo bola 85. Abre el archivo billar, donde ya creamos el símbolo tapete.6. En la biblioteca pega el símbolo 8 que copiaste en el paso 3.

23

Page 24: Manual M2 Sm2 InformáTica

Ahora tenemos 2 símbolos en nuestra biblioteca en el archivo billar

7. Presiona sobre el símbolo 8 y sin soltar arrástralo hacia el escenario.8. Selecciona la bola y en el panel de propiedades cambia su tamaño a 70 de anchura y 70

de altura es decir a 70x70, que es la manera que expresaremos de aquí en adelante las dimensiones.

9. En el panel de filtros presiona el símbolo + selecciona la opción sombra, y ajusta los valores como sigue:

a. Intensidad 40%b. Ángulo 90c. Distancia 10

24

Page 25: Manual M2 Sm2 InformáTica

10. Agrega otras bolas que sean también símbolos con comportamiento de clip de película en el panel de filtros aplica sombras y desenfoque para dar efecto de distancia, tu dibujo final debe quedar así:

2.6 Importar y exportar imágenesPara apoyar nuestras creaciones, podemos usar imágenes, fotos u objetos, que al ser utilizados como fondo o parte de nuestro escenario obtenemos dibujos o películas de gran calidad. También podremos crear efectos de animación a nuestras fotos. Para poder trabajar con ellos es necesario importarlas a nuestro programa de animaciones, lo podemos hacer directamente al escenario o a la biblioteca, veamos cómo.

Para importar al escenario:

1. Abrimos una sesión en nuestro programa de animaciones.2. Podemos crear un nuevo documento o abrir uno existente.3. En el menú Archivo seleccionamos la opción Importar…, del menú emergente

seleccionamos Importar a escenario.4. Seleccionamos la imagen deseada y presionamos abrir.5. Nuestra imagen aparece directamente en el escenario, ajustamos su tamaño a 600x400 y

coordenadas X=0 y Y=0 en el panel de propiedades.

Para importar a la biblioteca:

1. Abrimos una sesión en nuestro programa de animaciones.2. Podemos crear un nuevo documento o abrir uno existente.3. En el menú Archivo seleccionamos la opción Importar…, del menú emergente

seleccionamos Importar a biblioteca.4. Seleccionamos la imagen deseada y presionamos abrir.

25

Page 26: Manual M2 Sm2 InformáTica

Actividad 2.6.1 Con las herramientas adquiridas en la unidad 2 lleva a cabo los siguientes dibujos:

10.Mariposa.11.Burbujas.12.Logotipo personal.

26

Page 27: Manual M2 Sm2 InformáTica

3. Aplicar animación al dibujo.Para ir creando animaciones se requiere ante todo mucha práctica, veremos por separado la aplicación de algunas técnicas sencillas por si solas, la unión de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones.Para poder entender como llevaremos a cabo una animación primero analizaremos la línea de tiempo de nuestro programa de animaciones.

En ella diferenciaremos los elementos más importantes:

a) Las capas: Cada una de las capas pueden funcionar para llevar una animación o colocar un objeto que actuará de manera independiente a las animaciones u objetos de las demás capas. Cuando activamos la animación completa todas las animaciones u objetos de cada una de las capas aparecerán como se los hayamos indicado en nuestra secuencia. Para insertar una capa seleccionamos el menú Insertar y seleccionamos la opción Capa, o presionamos con el botón derecho sobre un capa y seleccionamos Insertar capa.

b) Fotogramas: Es por decirlo así las fotografías de nuestro dibujo que aparecen en un determinado momento y que nuestro ojo es capaz de percibir como movimiento, cuando éstos se van cambiando uno después de el otro a una velocidad de 18 fotogramas por segundo nuestro cerebro lo procesa como un imagen visible nítidamente.

c) Tendemos diferentes fotogramas de acuerdo a lo que pueden contener o no.i. Fotograma clave: Es aquel fotograma donde colocamos un objeto o símbolo, es decir

puede o no contener objetos. ii. Fotograma vacío: Es aquel que necesariamente no contendrá objetos o símbolos.

Para insertar fotogramas de acuerdo a nuestras necesidades usaremos dos procedimientos, el primero es en el menú Insertar seleccionamos la opción Línea de tiempo y seleccionamos fotograma clave (u otro tipo de fotograma). En los ejercicios

27

CapasFotogramasPapel cebolla Panel Zoom o vistas

Page 28: Manual M2 Sm2 InformáTica

veremos cómo se utilizan éstos fotogramas. La segunda opción es seleccionando el fotograma y presionar la tecla F6 para fotograma clave y F5 para fotograma vacío.

d) Papel cebolla. En general, nuestro programa de animaciones sólo muestra un fotograma de la secuencia de animación en el escenario. Para facilitar la ubicación y edición de la animación fotograma a fotograma, puede ver varios fotogramas a la vez en el escenario. El fotograma situado bajo la cabeza lectora aparece de color normal, mientras que los fotogramas circundantes aparecen atenuados; cada fotograma parece estar dibujado sobre hojas de papel traslúcido (papel cebolla) colocadas una encima de otra. Los fotogramas atenuados no pueden editarse.

e) Panel Zoom o de vistas: En esta casilla seleccionaremos la escala a la que queremos ver nuestro escenario. Escribimos el porcentaje de aumento o decremento, seleccionamos en la pestaña de selección la opción que deseamos.Conociendo éstos elementos podemos iniciar con nuestra primera animación.

3.1 Aplicar movimiento al dibujoEmpezaremos con un ejercicio sencillo para entender los principios:

1. Inicia una sesión con el programa de animaciones.2. Crea un documento nuevo.3. Selecciona el fotograma 1 de la capa 1 presionando sobre él, dibuja un círculo y dale un

color de relleno degradado que tú desees.

4. Selecciona el fotograma 5 e inserta un fotograma clave con la tecla F6, mueve el círculo hacia abajo sin que se mueva hacia los lados.

5. Selecciona el fotograma 1 y con el botón secundario da clic y selecciona la opción copiar, con el botón secundario da clic en fotograma 10 y selecciona pegar.

6. Selecciona el fotograma 1 y en el panel de propiedades en la casilla de animar selecciona Movimiento. Si no aparece una flecha del fotograma 1 al 5, en lugar de escoger Movimiento escoge Forma. Selecciona el fotograma 5 y elige la opción que funcionó en la casilla animar.

28

Page 29: Manual M2 Sm2 InformáTica

Cuando hacemos lo anterior le decimos a nuestro programa de que fotograma a que fotograma realizar la interpolación de movimiento o forma.Nuestra línea del tiempo se verá de la siguiente manera.

7. Guardamos el trabajo con el nombre Pelota, en una carpeta que se llame animaciones.8. Presiona al mismo tiempo las teclas CTRL+ENTER para visualizar el trabajo. En la ventana

que se abre selecciona el menú Ver y luego la opción Aumentar y el trabajo se guardará también en un proyecto autoejecutable.

COLOCA EL PUNTERO SOBRE LA IMAGEN Y PRESIONA LA TECLA CTRL+CLIC CON EL BOTÓN IZQUIERDO DEL RATÓN PARA VER LA ANIMACIÓN.

Actividad 3.1.11. Abre el programa de animaciones.2. Crea un nuevo documento.3. Escribe tu nombre con la Herramienta Texto.4. Siguiendo el procedimiento anterior has que se deslice de izquierda a derecha.5. Presenta tu trabajo a otros compañeros.

29

Page 30: Manual M2 Sm2 InformáTica

MÁSCARASAhora veamos una manera diferente dar movimiento a un objeto, esto es con la creación de una máscara, es decir visualizar como a través de una ventana de la forma que queramos se mueve un objeto.

Para crear una máscara seguimos el procedimiento siguiente:1. Iniciamos una sesión con nuestro programa de animaciones.2. Creamos un nuevo documento.3. Seleccionamos el fotograma 1 de la capa 1 e importamos una imagen al escenario,

ajustamos su tamaño en el panel de propiedades de 600x200, arrastra la imagen que quede fuera del escenario a la mitad de éste. Para que se facilite visualizar selecciona en el panel de Zoom 50%.

4. Selecciona el fotograma 35 e inserta un fotograma clave F6, la imagen ahora arrástrala al lado izquierdo del escenario.

30

Page 31: Manual M2 Sm2 InformáTica

5. Selecciona el fotograma 1 y aplica animación de movimiento en el panel de propiedades.

6. Inserta una capa 2.7. Selecciona el fotograma 1 y escribe tu nombre en el escenario con un tamaño de letra

que abarque lo más posible del escenario sin salirse.

8. Con el botón secundario presiona sobre la capa 2 y del menú emergente selecciona Máscara.

9. Guarda el trabajo con el nombre máscara en la carpeta de animaciones.10. Presiona las teclas CTRL+ENTER, y en la ventana que aparece en el menú Ver

selecciona Aumentar para que se convierta en proyecto autoejecutable.

(CTRL+CLIC SOBRE LA IMAGEN PARA VER LA ANIMACIÓN)

Actividad 3.1.21. Aplica movimiento a las letras del fotograma 1 al fotograma 30.2. Varía el movimiento que crezca, que gire, que cambie de lugar, etc.3. Aplica animaciones diferentes sigue ahora del fotograma 30 al 60, del 60

al 90, etc.

31

Page 32: Manual M2 Sm2 InformáTica

3.2 Modificar tamaño del dibujoAhora veamos cómo podemos dar la sensación de cambio de tamaño de un objeto, esto puede servirnos para visualizar tal vez un álbum fotográfico. En primer lugar analizaremos el principio con n dibujo simple. Por lo cual seguimos el procedimiento siguiente:

1. Abrimos una sesión con nuestro programa de animación.2. Creamos un nuevo documento.3. Dibujamos un círculo con un relleno degradado.4. Seleccionamos el borde del círculo y lo eliminamos.5. Seleccionamos el círculo y en el panel de propiedades ajustamos el tamaño a 100X100 y

coordenadas X=230 y Y=120.

6. Seleccionamos el fotograma 60 e insertamos un fotograma clave F6.

7. Seleccionamos el círculo en éste fotograma (cuida de no seleccionar otro fotograma) y con la herramienta de transformación libre lo cambiamos de tamaño, estirando de una esquina.

32

Page 33: Manual M2 Sm2 InformáTica

8. Seleccionamos el fotograma 1 y en el panel de propiedades aplicamos animación de forma.

9. Presionamos las teclas CTRL+ENTER, para visualizar la animación.

Presiona CTRL+CLIC sobre la figura para ver la animación.10. Puedes hacer diferentes cambios en los fotogramas que continúan.

Presiona CTRL+ clic aquí para verPresiona CTRL+ clic aquí para ver

33

Page 34: Manual M2 Sm2 InformáTica

Actividad 3.2.11. Abre una sesión con el programa de animaciones.2. Crea un nuevo documento.3. Importa varias fotografías a la biblioteca.4. En el fotograma 1 inserta una fotografía.5. En el fotograma 30 inserta un fotograma clave F6 cambia la foto

de tamaño.6. Aplica animación de forma seleccionando cualquier fotograma del

1 al 30.7. En el fotograma 31 inserta un fotograma clave y en éste otra

fotografía y en el fotograma 60 inserta un fotograma clave y cambia el tamaño de la foto.

8. Aplica animación de forma seleccionando cualquier fotograma del 31 al 60.

9. Repite esto con varias fotografías.10.Presiona CTRL+clic aquí para ver un ejemplo

Nota: Si la animación de forma no se activa intenta con la animación de movimiento.

34

Page 35: Manual M2 Sm2 InformáTica

3.3 Manipular formas del dibujo.Ahora veremos cómo crear algunos escenarios con objetos en movimiento, para darle vida a una fotografía o dibujo que hagamos.Primero analizaremos el concepto de guía de movimiento, esto se refiere a determinar una trayectoria de desplazamiento de un objeto por el escenario. Este objeto puede o no tener movimiento independiente, es decir llevar dos tipos de movimiento a la vez, por ejemplo una mariposa realiza dos movimientos al mismo tiempo, el primero es el de abrir y cerrar las alas, y el segundo la trayectoria de vuelo. Veamos cómo se lleva a cabo esto.

1. Abre una sesión con el programa de animaciones.2. Crea un nuevo documento.3. Inserta un símbolo con comportamiento de clip de película y dale el nombre

mariposa.4. Dibuja una mariposa como tú quieras, puede quedar así.

Recuerda seleccionar todo el dibujo y en el menú modificar selecciona agrupar para que sea un solo objeto.

5. Selecciona el fotograma 5 e inserta un fotograma clave F6, ahora con la herramienta de transformación libre has más angosto el objeto procurando que el centro quede igual, que no se mueva.

35

Page 36: Manual M2 Sm2 InformáTica

6. Selecciona el fotograma 1 y aplica animación de movimiento.7. Ahora nos trasladamos al escenario.8. Importa una imagen o fotografía de un paisaje a la biblioteca.9. Selecciona el fotograma 1 de la capa 1 y arrastra la imagen al escenario.10. Inserta un fotograma vacío F5 en el fotograma 100.

11. Inserta una capa 2.12. Con el botón secundario haz clic sobre la capa 2 y del menú emergente selecciona

añadir guía de movimiento, verás que aparece una capa con el nombre guía.

13. Selecciona el fotograma 1 de la capa guía y con la herramienta lápiz dibuja un semicírculo, selecciona el fotograma 100 e inserta un fotograma vacío F5.

36

Page 37: Manual M2 Sm2 InformáTica

14. Selecciona el fotograma 1 de la capa 2 ahora arrastramos el símbolo mariposa a nuestro escenario reduce el tamaño de la mariposa y colócala en el extremo izquierdo de la línea que dibujaste, el centro del símbolo debe quedar exactamente en el extremo.

15. Selecciona el fotograma 100 de la capa 2 e inserta un fotograma clave F6, arrastra el objeto al extremo derecho cuidando que el centro del objeto ajuste exactamente en el extremo.

16. Selecciona el fotograma1 de la capa 2 y aplica animación de movimiento. 17. Guarda el trabajo con el nombre Mariposa, presiona CTRL+ENTER para ver la

animación, en el menú ver de la ventana de la animación selecciona aumentar para que se guarde como proyecto autoejecutable.Haz CTRL+Clic aquí para ver la animación.

Ahora veamos cómo podemos transformar objetos a otro objeto de manera secuenciada.

1. Abre una sesión con el programa de animaciones.2. Crea un documento nuevo.3. Inserta tantas capas como letras tenga tu nombre, asigna a cada capa el nombre de cada

una de las letras de tu nombre.4. Selecciona el fotograma 1 de la capa de la primera letra, escribe la primera letra.5. Con la herramienta selección selecciona la letra y da un clic sobre ella con el botón

secundario, selecciona separar.

37

Page 38: Manual M2 Sm2 InformáTica

6. La letra quedará separada, ahora inserta un fotograma clave F6 en el fotograma 30, elimina la letra y dibuja un globo del mismo color de la letra, utiliza un color diferente para cada letra.

7. Selecciona el fotograma 1 y aplica animación de forma. Lleva a cabo el mismo procedimiento en cada una de las capas.Haz CTRL+clic aquí para visualizar el ejemplo.

Actividad 3.3.1

Ahora lleva a cabo la siguiente práctica por tu cuenta, si tienes dudas consulta a tu facilitador.

NUBES

1. Activa el programa de animaciones.

38

Page 39: Manual M2 Sm2 InformáTica

2. Exporta a la biblioteca la imagen de un paisaje con cielo en el menú Archivo-Importar a biblioteca.

3. Crea un símbolo con comportamiento de clip de película y dale el nombre de nubes, dibuja una nube usando degradados grises

4. Insertar un nuevo símbolo con comportamiento de clip de película y darle el nombre de nubes componente, desde la biblioteca con el botón derecho del ratón haz clic sobre este y selecciona del menú desplegado definición de componente

39

Page 40: Manual M2 Sm2 InformáTica

5. Al aceptar el paso anterior se abrirá el siguiente panel Definición de componente, agregar 3 Parámetros presionando el signo +.a)-. Cambiar el Nombre de cada uno de los parámetros por vel, alfa y x_max.b)-. Cambiar el Valor de los parámetros 10, 100 y -900. el panel tiene más complementos pero por el momento solamente nos ocuparemos de estas dos variables Nombre y Valor

6. Una vez que se cambio el tipo Clip de película por del de Componente, también cambiará el icono como lo podrás apreciar en la biblioteca.

7. Ahora arrastra el símbolo nubes al símbolo nubes componente, ajusta las coordenadas en X=0.0 y Y=0.0

8. Abre el panel de acciones e inserta el siguiente código

onClipEvent (load) {_alpha = _parent.alfa;}onClipEvent (enterFrame) {(_x>_parent.x_max) ? (_x -= _parent.vel) : (_x=0);}

40

Page 41: Manual M2 Sm2 InformáTica

9. Regresa a la escena 1 capa 1 y arrastra la imagen del paisaje y ajusta el tamaño un poco más grande que el escenario

10. Ahora inserta una nueva capa (capa 2 ) arrastra desde la biblioteca 2 veces el Componente nube componente.a)-. Colocarlos fuera de la Escena en la parte superior derecha.

11. Prueba ahora la película con ctrl+enter. Hemos terminado la animación.Presiona CTRL+ clic aquí para ver un ejemplo.

4. Manipular botonesSon elementos que se prestan a que el usuario los presione, desencadenando al hacerlo una serie de acciones. También es habitual ver como este tipo de elementos reaccionan cuando se les pasa el ratón por encima o cuando se les está pulsando, por ejemplo.

Al igual que los otros símbolos de, los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, está formada únicamente por cuatro fotogramas, uno para cada estado posible del botón.

41

Page 42: Manual M2 Sm2 InformáTica

Reposo. Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él. Sobre. Aspecto del botón cuando situamos el puntero sobre él. Presionado. Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado. Zona activa. Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante. Parece que la limitación de fotogramas podría implicar una limitación en la capacidad de espectacularidad y utilidad de estos símbolos, pero no es así. Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos dota a los botones de gran espectacularidad.

Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata como vimos en el punto anterior, también hay otros muchos tipos de botones que, pese a ser menos utilizados, es muy habitual verlos en multitud de páginas web.

Entre estos están los creados mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes motivos, etc. Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece.

Hay varias formas de botón también muy extendidas, como el botón con relieve sencillo o los botones en forma de píldora.

4.1. Creación de botonesVamos a crear un botón sencillo para comprender los principios, posteriormente haremos botones con acciones determinadas, como es el de enviarnos a una determinada página Web.1. Inicia una sesión con el programa de animaciones.2. Abre un nuevo documento.3. Inserta un símbolo con comportamiento de botón, dale el nombre de botón_1. Da clic

en aceptar y verás que aparece la línea de tiempo del botón4. Selecciona el estado Reposo, dibuja un círculo con relleno degradado.

42

Page 43: Manual M2 Sm2 InformáTica

5. Selecciona el estado Sobre e inserta un fotograma clave F6, cambia el color de relleno del círculo.

6. Selecciona el estado Presionado e inserta un fotograma clave F6 y cambia el color del círculo nuevamente.

7. Presiona en Escena 1, para trasladarnos el escenario.8. Una vez en el escenario, arrastra el símbolo botón_1 de la biblioteca al área de

trabajo.

9. Guarda tu trabajo como Botón_1Presiona CTRL+clic para visualizar la animación. Pasa el puntero sobre el círculo, presiónalo para probarlo.

4.2 Creación de botones con relieve.

1. Abre el programa.2. Inserta un símbolo con comportamiento de botón.3. En estado reposo dibuja un rectángulo de color gris, de tamaño 340 x 140, recuerda

seleccionar también los bordes del rectángulo.

43

Page 44: Manual M2 Sm2 InformáTica

4. Escribe un texto en el interior del rectángulo.

5. Cambia el color del borde superior y el del lado izquierdo a blanco, y el borde inferior a gris oscuro, el derecho quedara de color negro. El grueso del os bordes que sean de 2 puntos

6. Selecciona el estado “presionado” y cambiamos el color a blanco de los bordes inferior y el derecho. Y cambia a gris oscuro el borde izquierdo y el superior

7. Guarda el documento como botón_28. Arrastra el símbolo al escenario y prueba con ctrl+enter. En el menú Ver de la ventana de

animación selecciona aumentar para que se convierta en autoejecutable.Presiona CTRL+clic aquí para ver el ejemplo.Ahora veamos cómo podemos crear un botón que nos envíe a una página Web

4.3 Creación de botones activos.1. Abre el programa.2. Ajusta el tamaño del escenario a 160x125, y de color negro.3. Inserta un símbolo con comportamiento de clip de película y nómbralo gradiente4. Dibuja un rectángulo de tamaño 150x35 y aplícale un degradado lineal de color azul y con

la herramienta de transformación de relleno gira el relleno hasta quedar horizontal

44

Page 45: Manual M2 Sm2 InformáTica

5. Inserta un símbolo con comportamiento de clip de película y nómbralo botón. Selecciona el fotograma 1 y en panel de acciones escribe stop();

6. En el fotograma 2 presiona F7 para insertar un fotograma clave vacío, arrastra el símbolo gradiente y ajusta las coordenadas X=0 y Y=0

7. Inserta un fotograma clave en el fotograma 7 y en el fotograma 12.8. Selecciona el fotograma 2 y selecciona el rectángulo, en el panel de propiedades

selecciona en la opción color alfa y valor de 0%. Haz lo mismo en el fotograma 12.9. Selecciona el fotograma 2 y en el panel de propiedades en la casilla fotograma pon la

etiqueta avanzar_1 y aplica animación de movimiento.10. Realiza el mismo procedimiento en el fotograma 7 y etiqueta como avanzar_2.11. Abre el panel de acciones, selecciona el fotograma # 7 y escribe stop();12. Ahora selecciona el fotograma # 12 y el panel de acciones escribe gotoAndPlay(1);

13. Inserta una capa 2 y arrastra el símbolo gradiente e invierte su posición con la herramienta de transformación de libre. Ajusta las coordenadas X=0 y Y=0. Cuida que la capa 2 quede debajo de la capa 1.

14. En el escenario arrastra el símbolo botón y ajusta sus coordenadas a X=5.0 y Y=5.0

15. Selecciona el rectángulo y en el panel de acciones copia el siguiente código

on (rollOver) {gotoAndPlay ("Avanzar_1");}

45

Page 46: Manual M2 Sm2 InformáTica

on (rollOut) {gotoAndPlay ("Avanzar_2");}on (press) {getURL("http://www.solophotoshop.com", _blank); }

16. Coloca siguiendo el procedimiento de los pasos 14 y 15, otros dos botones, escribe sobre ellos el número de botón.

17. Guárdalo como botón_318. Prueba con ctrl+enter. Transfórmalo a proyecto autoejecutable.

Presiona CTRL+Clic aquí para ver el ejemplo.

5. Manipular SonidoLos sonidos en una animación le dan vida y crean emociones en quien la observa, veamos cómo podemos importar sonidos y aplicarlos a nuestra animación.

46

Page 47: Manual M2 Sm2 InformáTica

En primer lugar crea una carpeta con la música de tu preferencia para que de ahí puedas tomarla, al igual que una carpeta con muchas imágenes.

Empecemos a crear nuestro pequeño videoclip.1. Abre una sesión en el programa de animaciones.2. Crea un nuevo documento.3. Importa a la biblioteca una melodía de tu preferencia.4. Importa a la biblioteca imágenes de tu preferencia, entre más uses mejor.5. Inserta una capa 2.6. Selecciona el fotograma 1 de la capa 2 y arrastra la melodía de la biblioteca hacia el

escenario.7. Selecciona el fotograma 1 de la capa 1 e inserta una imagen.8. Selecciona el fotograma 100 de la capa 1, inserta un fotograma clave y cambia el tamaño

de la imagen, aplica animación de movimiento entre éstos fotogramas.

9. A partir del fotograma 100 continúa insertando imágenes y dándoles diferentes animaciones cada 100 fotogramas ya sea que las cambies de posición, tamaño, forma, etc.

10. Inserta un fotograma vacío F5 en el fotograma 3000, o hasta donde termine la canción.

11. Guarda tu trabajo con el nombre de videoclip_1.12. Presiona CTRL+Enter para visualizar la película.13. Selecciona del menú Ver la opción Aumentar, para que se convierta en un proyecto

autoejecutable.Presiona CTRL+clic aquí para ver el ejemplo.

6. Manipular VideoAhora veremos cómo podemos crear ventanas videos con sus respectivos controles funcionales de play, stop, rew, vol., etc., como los que tienen los reproductores de sonido y video que tú ya conoces.

47

Page 48: Manual M2 Sm2 InformáTica

Los videos que manejemos deben tener formato MOV, MPEG y un decodificador de video, como el Quick Time, u otro. Este tipo de videos los puedes obtener de tus compañeros con una cámara digital o de alguno ya existente.

Seguiremos el siguiente procedimiento para la creación de un video con controles.1. Abre una sesión en el programa de animaciones.2. Crea un nuevo documento.3. Del menú Archivo selecciona la opción importar video, del menú emergente iremos

configurando nuestro video. Primero en la opción examinar ubicamos el video y lo abrimos. P

4. Ahora seleccionamos la opción de transferencia o implementación del video, en este caso seleccionamos la casilla Flujo de Flash Comunicatión Server. Damos en siguiente.

5. En codificación Flash 8-Calidad media (400 kbps), y damos en siguiente.

48

Page 49: Manual M2 Sm2 InformáTica

6. Ahora vamos a escoger el aspecto de video, en este caso seleccionemos ArticOverOll.swf Damos en siguiente.

7. Finalizamos el trabajo.

8. Damos un nombre y guardamos

49

Page 50: Manual M2 Sm2 InformáTica

9. Vemos ahora como se lleva a cabo la codificación del video.

10. Nuestro documento tendrá la siguiente apariencia.

11. Ajusta el tamaño del reproductor a 350X300 y en las coordenadas X=120 y Y=50Presiona CTRL+Enter para probar la película, automáticamente se convierte en un proyecto autoejecutable.

Presiona CTRL+clic aquí para visualizar el ejemplo 1Presiona CTRL+clic aquí para visualizar el ejemplo 2

Prueba todos los controles, puedes escucharlos y ajustar el volumen, pausar, adelantar, etc.

50

Page 51: Manual M2 Sm2 InformáTica

7. Publicar Película

Un editor de video muy versátil es el Windows Movie Maker. Puedes utilizar Windows Movie Maker para capturar audio y vídeo en el equipo desde una cámara de vídeo digital y utilizar después el contenido capturado en las películas. También puedes importar audio, vídeo o imágenes fijas existentes a Windows Movie Maker para utilizarlos en las películas que crees.

Una vez editado el contenido de audio y vídeo en Windows Movie Maker, que puede incluir la adición de títulos, transiciones de vídeo o efectos, podrás guardar la película final y compartirla con amigos y familiares.

7.1 Descripción de las herramientas de Windows Movie Maker.

Windows Movie Maker está dividido en tres áreas principales: los paneles, el guión gráfico o la escala de tiempo, y el monitor de vista previa. En la siguiente imagen se muestran las áreas básicas de Windows Movie Maker:

1 Barra de menús.

2 Panel de tareas.

3 Guión gráfico.

4 Monitor de Vista previa.

5 Panel de contenido.

51

1

2

3

4

5

Page 52: Manual M2 Sm2 InformáTica

7.2 Los paneles: El panel de tareas muestra las tareas comunes que deberás llevar a cabo al hacer

una película, incluida la importación de archivos, la edición de la película y la publicación de la película.

El panel de contenido muestra clips, efectos o transiciones con los que trabajas mientras creas la película, en función de la vista en la que estás trabajando. Puedes cambiar la vista para mostrar miniaturas o detalles.

Puedes arrastrar clips, transiciones o efectos del panel de contenido o una colección del panel Colecciones al guión gráfico o la escala de tiempo del proyecto actual.

El monitor de vista previa permite ver clips individuales o un proyecto completo. Mediante el monitor de vista previa, puedes obtener una vista previa del proyecto antes de publicarlo como película

7.3 El guión gráfico y la escala de tiempo:El área en que se crean y editan los proyectos se muestra en dos vistas: el guión gráfico y la escala de tiempo. Puedes cambiar entre estas dos vistas al hacer una película.

Guión gráfico. El guión gráfico es la vista predeterminada de Windows Movie Maker. Puedes utilizar el guión gráfico para ver la secuencia o el orden de los clips del proyecto y reorganizarlos fácilmente si es necesario. Esta vista también permite ver los efectos o las transiciones de vídeo que se han agregado. Los clips de audio que ha agregado a un proyecto no se muestran en el guión gráfico, pero se pueden ver en la vista de escala de tiempo. En la siguiente imagen se muestra la vista de guión gráfico de Windows Movie Maker:

52

Page 53: Manual M2 Sm2 InformáTica

Escala de tiempo. La vista de escala de tiempo proporciona una vista más detallada del proyecto de película y permite realizar ediciones más precisas. Puedes utilizar la vista de escala de tiempo para recortar clips, ajustar la duración de las transiciones entre clips y ver la pista de audio. Puedes utilizar la escala de tiempo para revisar o modificar la temporización de los clips del proyecto. Utiliza los botones de la escala de tiempo para cambiar a la vista de guión gráfico, ajustar el nivel de detalles del proyecto, narrar la escala de tiempo o ajustar los niveles de audio. En la siguiente imagen se muestra la vista de escala de tiempo de Windows Movie Maker:

Ahora que hemos visto los principales componentes de nuestra aplicación procederemos a elaborar un proyecto.

7.4 Generación y publicación de un proyecto.1. Inicia Windows Movie Maker, presionando en el botón inicio, todos los programas,

Windows Movie Maker.2. En la tarea importar multimedia selecciona las imágenes o videos de tu preferencia, entre

más sean mejor. Presiona importar.

3. Siguiendo el mismo procedimiento importa la música de tu preferencia.4. Ahora selecciona el fotograma 1 en el guión gráfico, en el panel de tareas selecciona

títulos y créditos.

53

Page 54: Manual M2 Sm2 InformáTica

5. Selecciona la opción título al principio.

6. En el panel que aparece escribe el título deseado y presiona agregar título.

7. Hora arrastra uno por uno las imágenes o videos a cada uno de los fotogramas.

8. Del panel de tareas ahora selecciona efectos, arrastra diferentes efectos a cada uno de los fotogramas donde colocaste las imágenes. Verás que aparece una estrella de color azul en el fotograma.

54

Page 55: Manual M2 Sm2 InformáTica

9. En el panel de tareas selecciona ahora transiciones, arrástralas a los fotogramas más pequeños que se encuentran entre los que contienen las imágenes.

10. Cambia ahora el guión gráfico a escala de tiempo.

11. Arrastra la melodía que seleccionaste hacia la línea de audio o música.12. Repite los pasos 7,8 y 9 hasta que casi concluya la melodía.13. Presiona en títulos y créditos y en el panel que aparece inserta los nombres de los que

colaboraron en el video o agradecimientos.14. Una vez terminado seleccionamos la opción publicar película.

55

Page 56: Manual M2 Sm2 InformáTica

15. Como puedes observar puedes crear un DVD, CD o lo puedes publicar en el equipo. En éste caso lo publicaremos en el equipo, seleccionamos la ubicación y le damos nombre por ejemplo Película_1, presionamos siguiente.

16. Elegimos la configuración de la película. Y presionamos publicar.

17. Nuestra película empieza a guardarse como un proyecto autoejecutable.

Presiona CTRL+Clic aquí para ver el ejemplo.

Hemos concluido nuestras creaciones. De aquí en adelante depende de tu creatividad.

Puedes elaborar logotipos para negocios, pequeños comerciales, videos de eventos sociales, videoclips divertidos, etc.…

56

Page 57: Manual M2 Sm2 InformáTica

Bibliografía:

Manual Flash 8, Oscar Rodríguez, Roberto Egea, Ed. Anaya Multimedia www.aulaclic.es

Enciclopedia de Informática Activa, Castellanos Ferreira, Tomo III, Ed. REYMO.Manual de ayuda de Flash: Primeros pasos con Flash.Manual de ayuda de Windows Movie Maker

57

Page 58: Manual M2 Sm2 InformáTica

Los gráficos, prácticas, animaciones y videos, fueron creados por el IQ. Pablo Chávez Cruz, a excepción del video del oso, en éste solo se creó la interfaz de controles

Agradecimientos muy especiales a mis estudiantes de los cuales también aprendí mucho.

Sobre todo a todos aquellos creativos, traviesos, inquietos, que le dieron ese toque especial al curso.

58