7
INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA INFORMATICA GRADO 11° - TERCER PERIODO Elaborado por: Ing. HAIMER GUTIERREZ M. TEMA: TEMA: FLASH COMPETENCIA: Utiliza de manera creativa el programa Flash en el diseño de animaciones y material multimedia GUIA NO 3. LAS CAPAS. CONCEPTO BASICO. Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente. Clarifiquemos esto con un ejemplo: Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portería de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante están vacíos). Pues bien, esta película nos mostrará inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portería con el portero, para después (durante los fotogramas del 5 al 10) mostrar la portería sin portero. De este modo la portería es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada. Otra razón para separar los objetos en capas, es que Flash nos obliga a colocar cada animación distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarán parte de la animación. Si queremos que un objeto NO forme parte de una animación, deberemos quitarlo de la capa en la que se produce dicha animación. Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningún inconveniente, pero si la portería estuviera en la misma capa que el portero, entonces AMBOS objetos se moverían hacia dicho lado, con lo que resultaría imposible que sólo se moviera el portero. La solución es separar los objetos en 2 capas, como ya hemos hecho. Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos interese).

Guia 3 flash _11_1

  • Upload
    hgm2007

  • View
    39

  • Download
    0

Embed Size (px)

Citation preview

INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA

INFORMATICA GRADO 11° - TERCER PERIODO

Elaborado por: Ing. HAIMER GUTIERREZ M.

TEMA: TEMA: FLASH

COMPETENCIA: Utiliza de manera creativa el programa Flash en el diseño de animaciones y material multimedia

GUIA NO 3. LAS CAPAS. CONCEPTO BASICO. Todo el mundo ha visto alguna vez cómo trabajan los dibujantes de dibujos animados. Y todos hemos visto cómo colocan una hoja semitransparente con dibujos sobre otras y la superposición de todas forman el dibujo final. ¿Por qué no dibujan todo en una misma hoja? ¿Por qué trabajan con varios niveles y con varios dibujos si van a acabar todos juntos? Los motivos son muchos, y estos niveles que emplean los dibujantes, equivalen a las Capas que utiliza Flash. Cada capa es, por tanto, un nivel en el que podemos dibujar, insertar sonidos, textos... con INDEPENDENCIA del resto de capas. Hay que tener en cuenta que todas las capas comparten la misma Línea de Tiempos y por tanto, sus distintos fotogramas se reproducirán simultáneamente. Clarifiquemos esto con un ejemplo: Supongamos que tenemos 2 capas. En una de ellas los fotogramas del 1 al 10 contienen el dibujo de una portería de fútbol. En la otra los fotogramas del 1 al 5 contienen el dibujo de un portero (del 5 en adelante están vacíos).

Pues bien, esta película nos mostrará inicialmente (durante el tiempo que duren los primeros 5 fotogramas) la portería con el portero, para después (durante los fotogramas del 5 al 10) mostrar la portería sin portero. De este modo la portería es independiente del portero, y podemos tratar estos objetos con total libertad, ya que no interfieren entre ellos para nada. Otra razón para separar los objetos en

capas, es que Flash nos obliga a colocar cada animación distinta en una capa. De lo contrario, todos los objetos que se encuentren en dicha capa formarán parte de la animación. Si queremos que un objeto NO forme parte de una animación, deberemos quitarlo de la capa en la que se produce dicha animación. Siguiendo con el ejemplo del portero, si quisiéramos crear un movimiento que haga que el portero se desplace hacia un lado no hay ningún inconveniente, pero si la portería estuviera en la misma capa que el portero, entonces AMBOS objetos se moverían hacia dicho lado, con lo que resultaría imposible que sólo se moviera el portero. La solución es separar los objetos en 2 capas, como ya hemos hecho. Las capas además, tienen otras utilidades, nos permiten ordenar nuestra película de forma lógica, y nos ayudan en la edición de dibujos (evitando que se "fundan" en uno sólo, o bloqueando el resto de capas de modo que sólo podamos seleccionar la capa que nos interese).

INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA

INFORMATICA GRADO 11° - TERCER PERIODO

Elaborado por: Ing. HAIMER GUTIERREZ M.

TRABAJAR CON CAPAS

La vista standard de una capa es la que muestra la imagen. Veamos para qué sirven los distintos botones y cómo usarlos.

Insertar Capas : Como su nombre indica, sirve para Insertar capas en la escena actual. Inserta capas normales (en el siguiente punto se verán los distintos tipos de capas).

Añadir Capa Guía : Inserta una capa de tipo guía. Se tratan en profundidad el siguiente punto.

Borrar Capa : Borra la capa seleccionada.

Cambiar Nombre: Para cambiar el nombre a una capa, basta con hacer doble clic en el nombre actual.

Propiedades de Capa: Si hacemos doble clic en el icono , podremos acceder a un panel con las propiedades de la capa en la que hayamos hecho clic. Podremos modificar todas las opciones que hemos comentado anteriormente y alguna más de menor importancia.

Aquí puedes cambiar diferentes opciones sobre la capa, como su nombre o su color. También puedes bloquearla u ocultarla.

Pero haremos especial hincapié en la opción Tipo cuyas opciones, Guía y Máscara , veremos más adelante en el curso.

REORGANIZAR LAS CAPAS

INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA

INFORMATICA GRADO 11° - TERCER PERIODO

Elaborado por: Ing. HAIMER GUTIERREZ M.

Como ya se ha comentado, las distintas capas tienen muchas cosas en común unas con otras. Lo primero y principal es la Línea de tiempos, todas las capas de una misma escena comparten la misma línea de tiempos y por tanto, los objetos de todos los fotogramas 1 de todas las capas se verán al mismo tiempo en la película superpuestos unos sobre otros. ¿y qué objeto está delante de los demás? Pues este criterio viene dado por la colocación de las Capas en la película. Los objetos que se mostrarán delante de todos los demás serán aquellos que se encuentren en la capa situada más arriba.

Es decir, si nos fijamos en el ejemplo anterior:

El portero aparece delante de la portería, porque la capa "Portero" está situada encima de la capa "Portería", como puede apreciarse en la imagen. Si quisiéramos cambiar esta distribución, basta con hacer clic en la capa que queramos mover y arrastrarla hacia arriba o hacia abajo hasta la posición deseada.

Veremos como los objetos se colocan delante o detrás de los de la capa seleccionada según su capa se encuentre por encima o por debajo de la nuestra.

Para mover un fotograma de una capa a otra, basta con seleccionar el fotograma a mover y arrastrarlo hasta la capa donde queramos pegarlo. También se puede Copiar el fotograma y luego pegarlo en la capa de destino.

ANIMACIÓN CON CAPAS MÁSCARA

Con la Animación con Capas Máscara, cualquier forma que dibujemos en la capa máscara, será la forma a través de las que se muestre el contenido de las capas enmascaradas

En otras palabras, quedará visible sólo lo que quede dentro de esta forma - a modo de agujero a través del cual se puedan ver las capas situadas por debajo-. e invisiblelo que quede fuera

Para insertar una capa máscara (con la capa activada) hacer clic con botón izquierdo sobre ella y elegir máscara.

INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA

INFORMATICA GRADO 11° - TERCER PERIODO

Elaborado por: Ing. HAIMER GUTIERREZ M.

Para llevar a cabo un efecto máscara 1. Dibujamos -o escribimos- en el escenario la imagen -o el texto- que queremos sea

mostrado a través de la máscara (p.e: el texto: "Realización Multimedia") e identificamos esta capa (p.e.: "texto", o "RealMulti", o similar)

2. Insertar una nueva capa, por encima de la del texto (la identificamos como

"máscara") 3. En la capa máscara dibujar el objeto máscara través del cual queremos

que se muestre el contenido de la capa texto "realización multimedia" (por

ejemplo un círculo ovalado que rellenamos de color rojo), y lo agrupamos (modificar>agrupar).

4. Situamos el objeto máscara dibujado en el punto inicial de la trayectoria a seguir. (p.e.: parte izquierda del escenario sin que tape al texto)

5. En la Línea de Tiempo colocamos un fotograma clave (F6) en el final de la trayectoria (fotograma 25), del objeto máscara (que hemos agrupado), y otro en el mismo fotograma de la capa del texto (fotograma 25).

6. En el fotograma final de la capa "máscara" (fotograma 25), disponemos al objeto máscara en la situación final de su trayectoria.

7.En la misma capa "máscara" volvemos al primer fotograma para Interpolar el movimiento del objeto máscara

8.Transformamos la capa "máscara" que, hasta el momento es una capa normal (que en el ejemplo tiene el texto: "Realización Multimedia") en una capa máscara.

Para transformar una capa normal a una capa máscara :

Clic con el botón derecho del ratón sobre el nombre de la capa a transformar (que en

el ejemplo tiene el círculo ovalado rojo, esto es el "objeto máscara") y escoger la opción "máscara".

Observamos:

INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA

INFORMATICA GRADO 11° - TERCER PERIODO

Elaborado por: Ing. HAIMER GUTIERREZ M.

- como la capa "máscara" obtiene, delante de su nombre, un icono cuadrado negro con un círculo azul en su interior

- como la capa "texto:RealMulti" obtiene, delante de su nombre, un icono cuadrado azul con una esquina medio doblada y se coloca ligeramente deslazada hacia el interior indicando su dependencia de la "capa máscara".

EJERCICIO 1. 1. Cree una animación que incluya por lo menos tres capas. 2. La primera capa debe tener un escenario dibujado con las herramientas ovalo,

cuadro y lápiz. 3. La segunda capa debe tener una figura que haga una animación de forma,

transformando de una figura inicial a una final, minimo de 40 fotogramas. 4. La tercera capa debe contener una interpolación de movimiento de minimo 40

fotogramas. 5. El punto es individual e independiente para cada estudiante.

EJERCICIO 2:

Crear una animación por interpolación de movimiento.

1. Cree, una nueva película. 2. Inserte un nuevo símbolo, llamado Avión, con un dibujo similar al de la figura. 3. De vuelta en la escena, inserte un rectángulo que ocupe todo el fondo de la

escena y asígnele un color con un degradado.

4. En la línea de tiempo, cambie el nombre de la capa; llámela Fondo. 5. La película durará 10 fotogramas. Para conseguirlo, haga clic en el fotograma 10 y

seleccione la opción Insertar> Línea de tiempo>Fotograma. 6. Inserte una nueva capa pulsando en el botón Insertar capa en la parte inferior de la

línea de tiempo. 7. Utilice la palabra Avión como nombre para la nueva capa. 8. Arrastre el símbolo Avión desde la biblioteca hasta la esquina inferior izquierda de

la escena. 9. Haga clic en la casilla 10 de esta capa e inserte un fotograma clave pulsando la

tecla F6.

INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA

INFORMATICA GRADO 11° - TERCER PERIODO

Elaborado por: Ing. HAIMER GUTIERREZ M.

10. Desplace el avión hasta la esquina superior derecha. Ya está todo preparado. Ha llegado el momento de aplicar la interpolación. Para ello necesita utilizar el panel Propiedades.

EJERCICIO 3:

Crear una interpolación de movimiento (continuación),

1. Seleccione la casilla 1 de la capa Avión. Observará que el avión vuelve a su posición original.

2. En el panel Propiedades, seleccione la opción Movimiento en el cuadro Animar. En la línea de tiempo las casillas intermedias se vuelven de color azul, atravesadas por una flecha que une los dos fotogramas clave.

3. Pulse Intro para reproducir la animación o Control-Intro para probar la escena. EJERCICIO 4: CREAR UNA MÁSCARA EN MOVIMIENTO.

1. Cree una nueva película, con tamaño 500 por 300 píxeles y seleccione un tono naranja para el fondo.

2. Dibuje en una capa adicional una máscara sonriente la cual inicia de derecha a izquierda de la escena.

3. Añada un símbolo más, con una máscara triste de izquierda a derecha en la escena.

4. En una capa adicional añada un nuevo símbolo que contenga el texto “Las máscaras en Flash”. El símbolo debe quedar centrado entre las mascaras

5. Utilice dos colores, negro para el principio y rojo para la palabra “Flash’. 6. Amplíe la duración de la película a 60 fotogramas, 7. Realice la interpolación de movimiento de tal forma que las máscaras se desplacen

sobre el texto.

EJERCICIO 5. ACELERACION DE OBJETOS ANIMADOS 1. Primero vamos a crear la interpolación sobre la que aplicaremos el efecto. Vamos

a basarnos en un Clip de Película cualquiera. 2. Importa un Clip de Película ya creado o bien lo creas tú mismo (creas un dibujo y

lo conviertes en Clip de Película). 3. Lo sitúa en el escenario si no lo está ya. 4. Pulsa el botón derecho del ratón sobre el fotograma que contiene el clip de película

INSTITUCION EDUCATIVA COLEGIO DEPARTAMENTAL LA ESPERANZA

INFORMATICA GRADO 11° - TERCER PERIODO

Elaborado por: Ing. HAIMER GUTIERREZ M.

5. Selecciona Crear interpolación de Movimiento del menú emergente. 6. Selecciona el fotograma 20 y pulsa F6 7. Desplaza el Clip de Película de ese fotograma a la parte derecha del área de

trabajo. 8. Pulsa Intro para ver la animación sin salir del entorno de trabajo 9. Ahora selecciona el fotograma 1 con el botón derecho y selecciona Propiedades

para abrir el panel Propiedades del fotograma. (si no está ya abierto) 10. Introduce un 100 en la casilla Aceleración (fuera) , para hacer que acelere al

principio y vaya frenando poco a poco 11. Introduce ahora un -100 en la casilla Aceleración (dentro) , para hacer que

aumente progresivamente su velocidad EJERCICIO 6. 1. Cree una animación que contenga dos capas 2. En una capa se tiene un fondo estático, puede ser importado 3. En otra capa se tiene una figura que acelera al inicio y desacelera al final rotando

por la escena 4. La duración de la escena debe ser de por lo menos 60 fotogramas. EJERCICIO 7. ANIMACION POR CAPA 1. Cree una capa con un fondo estático, puede importarlo o dibujarlo 2. Cree una máscara con una forma de figura inicial para los 30 primeros fotogramas,

los siguientes 30 se aplica una segunda figura como mascara.