S.E.P. D.G.E.T.I. S.E.M.S. CENTRO DE BACHILLERATO TECNOLOGICO industrial y de servicios No.

1 PRACTICA 14 GENERAR ANIMACIONES CON ELEMENTOS DE MULTIMEDIA NOMBRE DE LA MAESTRA_______________________________________________ NOMBRE_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ GRUPO:_ _ _ _ _ __ AC.__ _ CAL._ _ _ _

Movie Clips
1.- Abrir el archivo Movimiento.fla. 2.- En un documento nuevo insertar un nuevo smbolo llamado MovieClip,

cuando se abra el nuevo stage, nos vamos al archivo que acabamos de abrir y seleccionamos todos los frames, y los copiamos dentro del movie clip que creamos.

3.- Volver a la escena principal y cerrar Movimiento.fla, si el movie clip creado no esa visible, presionar F11 para mostrar la biblioteca, desde ah se puede arrastrar hasta el stage, si se prueba la pelcula, vera que la animacin se repite continuamente, para evitar esto (no es que sea algo malo), damos doble clic sobre el movie clip, para entrar a modo edicion, y seleccionamos el ultimo frame para agregarle un stop, presionamos F9 para abrir el panel de acciones y seleccionamos stop.

4.-Guardar archivo como Clip.fla.

S.E.P. D.G.E.T.I. S.E.M.S. CENTRO DE BACHILLERATO TECNOLOGICO industrial y de servicios No. 1 PRACTICA 15 GENERAR ANIMACIONES CON ELEMENTOS DE MULTIMEDIA NOMBRE DE LA MAESTRA_______________________________________________ NOMBRE_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ GRUPO:_ _ _ _ _ __ AC.__ _ CAL._ _ _ _

BOTN CON COMPORTAMIENTO MOVIE CLIP

Comenzar por crear un documento de dimensiones 160 x 125 pxeles de ancho y alto respectivamente, insertar un color de fondo negro. Esto puede resultar montono para algunos, pero tambin tomar en cuenta que hay personas que es la primera vez que intentan hacer una animacin en este fantstico y fabuloso programita den ominado flash.

En este botn involucrare un color de gradiente, para hacer un poco ms llamativo el efecto en la animacin. Crear un smbolo nombrarlo gradiente y de comportamiento clip de pelcula, presionar ctrl. + F8 Insertar >> Nuevo smbolo para tal efecto.

En los siguientes dos pasos esta la explicacin para hacer el gradiente el cual ser usado en al clip de pelcula. Primero comenzar por hacer visible el panel llamado Mezclador de colores, presionando shift + F9 Ventana >> Paneles de diseo >> Mezclador de colores. Seleccionar en estilo

de relleno la opcin Lineal despus de esto seleccionar el color del lado izquierdo e insertar el numero de color el cual va hacer #072E2E .

El segundo paso para terminar de hacer el gradiente es selecciona r el color de lado derecho y escribir el nmero de color el cual ser #2547BA . Si encuentran otra combinacin de colores hganlo saber a travs de sus comentarios.

El siguiente paso es hacer un rectngulo de dimensiones 150 de ancho x 35 de alto y colocarlo en coordenadas X=0 y Y=0. Si siguen los paso vern que el gradiente queda de izquierda a derecha, es por eso que debern rotarlo y ajustarlo a como se muestra en la imagen. Si desean mayor informacin de cmo rotar y ajustar un gradiente visitar el tutorial llamado dibujar_menu.

Crear un nuevo smbolo nombrarlo boton y con un comportamiento de clip de pelcula, para crear el smbolo es presionar ctrl. + F8 Insertar >> Nuevo smbolo .

Abrir el panel de acciones, luego seleccionar el fotograma de d e capa 1 y en el panel acciones de fotograma escribir stop();

Insertar un fotograma clave vaco en el frame # 2 presionando F7 Insertar >> Lnea de tiempo >> Fotograma clave vaco. En el fotograma insertado arrastrar desde la biblioteca el clip de pelcula de nombre gradiente si la biblioteca no esta visible resionar F11, ctrl. + L Ventana >> Biblioteca, y colocarlo en coordenadas X=0 y Y=0

Insertar 2 fotogramas clave en los frames # 7 y # 12 presionando simplemente F6

Seleccionar la imagen del fotograma # 2 luego en la opcin de Color seleccionar Alfa y posterior a esto, en la opcin de porcentaje escribir 0 %N, repetir la misma operacin pero ahora con la imagen del fotograma # 12.

Ahora etiquetar el fotograma # 2 con el nombre de Avanzar_1, una vez hecho lo anterior proceder a animar con la opcin de movimiento.

En este paso crear la animacin para el fotograma # 7, primero seleccionar dicho fotograma y luego etiquetarlo con el nombre de Avanzar_2 y la animacin ser de movimiento.

Abrir el panel de acciones, seleccionar el fotograma # 7 y escribir stop();

Ahora seleccionar el fotograma # 12 y el panel de acciones escribir gotoAndPlay(1);

Insertar una segunda capa por debajo de la primera, y en el la capa 2 arrastrar nuevamente desde la biblioteca el clip de pelcula gradiente y colocarlo en coordenadas X=0 y Y=0. En este paso tendrn que rotar el clip de pelcula de modo que el gradiente q uede de forma invertida al gradiente original, esta operacin se puede realizar de forma manual con la ayuda de la herramienta de transformacin libre esto es presionando la letra Q, va Modificar >> Transformar >> Voltear verticalmente.

Trasladarnos a la escena, y en esta arrastrar desde la biblioteca del clip de pelcula boton, colocarlo en coordenadas X=5.0 y Y=5.0

Este paso es de suma importancia ya que de este depende el xito de la pelcula, seleccionar la imagen no el fotograma e insertar el siguiente cdigo en el panel de acciones on (rollOver) {

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

Repetir la operacin anterior dos veces ms, y para darle un t oque de botn escribir Botn_01, Botn_02 y Botn_03. Y como vern sean creado un men de botones con efecto, sin ser botones si no dos clips de pelcula.

S.E.P. D.G.E.T.I. S.E.M.S. CENTRO DE BACHILLERATO TECNOLOGICO industrial y de servicios No. 1 PRACTICA 16 GENERAR ANIMACIONES CON ELEMENTOS DE MULTIMEDIA NOMBRE DE LA MAESTRA_______________________________________________ NOMBRE_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ GRUPO:_ _ _ _ _ __ AC.__ _ CAL._ _ _ _

Enmascarado
1.- En un documento nuevo dibujar un rectngulo de color negro y nombrar la capa mascara. 2.- agregar una interpolacin de movimiento al rectngulo con duracin de 10 frames de un lado a otro del stage. 3.- Agregar una capa nueva con el nombre enmascaramiento, agregar su nombre con la herramienta texto , de manera que abarque el trayecto del rectngulo:

4.- Realizar un enmascaramiento de 2 capas, hacer clic en el icono al lado del nombre de la capa , en el cuadro de dialogo seleccionar mascara :

5.- Hacer lo mismo con la capa enmascaramiento, pero seleccionar Con mascara en lugar de mascara. Probar pelcula. Entre mas pequeo sea el rectngulo o la forma que elijamos menos parte del texto se muestra, este es un efecto muy til en la animacin. 6.- Guardar el archivo como Mascara.fla

S.E.P. D.G.E.T.I. S.E.M.S. CENTRO DE BACHILLERATO TECNOLOGICO industrial y de servicios No. 1 PRACTICA 17 GENERAR ANIMACIONES CON ELEMENTOS DE MULTIMEDIA NOMBRE DE LA MAESTRA_______________________________________________ NOMBRE_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ GRUPO:_ _ _ _ _ __ AC.__ _ CAL._ _ _ _

Mscara e Insertar Imagen

Crea un Nuevo Documento Flash, luego importa la imagen que usaras de fondo. Presiona Ctrl + R o: Archvo > Importar > Importar a Escenario Selecciona el archivo y d clic en Abrir

Inserta una Nueva Capa haciendo clic sobre el icono con circulo rojo. Acomoda la imagen donde desees que inicie la animacin.

Selecciona la capa 2, Frame 1, e inserta el texto.

Sobre la capa 1 que es la imagen inserta un fotograma clave en el frame 30, presionando F6 o: Insertar > Lnea de Tiempo > Fotograma Clave Y mueve tu imagen a la segunda posicin de la animacin; en esta caso mov de derecha a izquierda.

Selecciona cualquier frame entre el 1 y el 30 de la capa 1 y en la barra de Propiedades haz clic en Animar > Movimiento.

Sobre la capa 2, en el frame 30 Inserta un fotograma presionando F5 o: Insertar > Lnea de Tiempo > Fotograma

Selecciona la capa 2 y haz clic sobre esta con el botn derecho del ratn. A continuacin aparecer un men de opciones, de donde selecciona Mscara y en automtico notars el cambio y la aparicin de la mscara. Y Voila, tenemos una mscara animada.

S.E.P. D.G.E.T.I. S.E.M.S. CENTRO DE BACHILLERATO TECNOLOGICO industrial y de servicios No. 1 PRACTICA 18 GENERAR ANIMACIONES CON ELEMENTOS DE MULTIMEDIA NOMBRE DE LA MAESTRA_______________________________________________ NOMBRE_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ GRUPO:_ _ _ _ _ __ AC.__ _ CAL._ _ _ _

El Efecto Mariposa
Trabaja con flash en el movimiento de una mariposa. El ejemplo SWF aqu presentado posee unas guas de movimiento. El ejercicio tiene la complejidad de que primero se tienen que hacer las imgenes de la mariposa para simular el vuelo, sin embargo, como soy demasiado gener oso las incluir por una mdica cantidad $$$ jajajaja. Las imgenes estn en el archivo zip de descarga. Good luck!! comenzamos?. 1-. Hacer un documento (ctrl. + J) con las siguientes propiedades. a)-. Las dimensiones del documento son 150 * 150 pxeles de ancho y alto. b)-. Color de fondo #FFFFFF. c)-. Colocar como velocidad de fotogramas 8 fps.

2-. Crear el nico smbolo (ctrl. + F8) de que consta la pelcula. a)-. Nombrar al smbolo animacin de mariposa. b)-. Dar como Comportamiento Clip de pelcula.

3-. Importar (ctrl. + R) la serie de imgenes. Aqu presento un pequeo truco, nombrar a las imgenes con el mismo nombre y un

nmero consecutivo. Luego seleccionar solamente la primera imagen para importarla.

4-. Una vez que se acepta importar la primera imagen Flash MX preguntara que la imagen forma parte de una secuencia de imgenes, luego aceptar importar la secuencia de imgenes

5-. Al aceptar importar la secuencia de imgenes Flash MX automticamente colocara cada imagen en cada frame y en las mismas coordenadas X = 0.0 y Y = 0.0. Nota si se importan las imgenes una por una se tendr que insertar manualmente cada uno de los frames vacos (F7) y luego acomodar las imgenes una por una en coordenadas X = 0.0 y Y = 0.0 que prefieres de forma manual o de forma automtica.

6-. Regresar a la Escena y arrastrar de la biblioteca el smbolo animacin de mariposa. a)-. Colocar el smbolo en coordenadas X = 40.0 y Y = 40.0. Con este paso queda concluido el sper tutorial mariposa voladora well done!!.

P.D. Presionar ctrl. + Enter para visualizar el trabajo final. Se agradecen en demasa los comentarios emitidos a los tutoriales aqu presentados. La frase del tutorial es Casarte es como ir a un restaurante con amigos. Pides lo que deseas y cuando ves lo que el tu amigo tiene, te gustara haber pedido eso.

S.E.P. D.G.E.T.I. S.E.M.S. CENTRO DE BACHILLER ATO TECNOLOGICO industrial y de servicios No. 1 PRACTICA 19 GENERAR ANIMACIONES CON ELEMENTOS DE MULTIMEDIA NOMBRE DE LA MAESTRA_______________________________________________ NOMBRE_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ GRUPO:_ _ _ _ _ __ AC.__ _ CAL._ _ _ _

Importacin de Imgenes
1.- En un documento nuevo importar una imagen cualquiera desde el men Archivo Importar o presionado Ctrl+R. 2.- Agregar 9 frames presionando F5. 3.- Seleccionar el ltimo frame y presionar F6 para copiarlo, borrar la imagen e importar en ese frame otra diferente. 4.- Agregar una interpolacin de movimiento con guia a las imgenes. 5.- Guardar archivo como Imagen.fla.

S.E.P. D.G.E.T.I. S.E.M.S. CENTRO DE BACHILLERATO TECNOLOGICO industrial y de servicios No. 1 PRACTICA 20 GENERAR ANIMACIONES CON ELEMENTOS DE MULTIMEDIA NOMBRE DE LA MAESTRA____________________________________________________ NOMBRE_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ GRUPO:_ _ _ _ _ __ AC.__ _ CAL._ _ _ _

Importacin de Sonido
1.- Abrir el archivo Mascara.fla. 2.- Crear una capa nueva con el nombre sonido. 3.- Importar un archivo de msica cualquiera, presionar F11 y arrastrar el archivo al primer frame de la capa sonido.

4.- Utilizar ADPCM para comprimirlo.

5.- Ajustar la duracin del sonido agregando o quitando frames, para que se sincronice con la interpolacin de movimiento de la enmascaracin.