GUÍA DE FLASH 2004 MX

Transcripción

1 Guía Flash 1 de 7 GUÍA DE FLASH 2004 MX ANIMACIÓN FOTOGRAMA A FOTOGRAMA Dibuje en un fotograma clave. Inserta un fotograma clave en la línea de tiempo. Añade otro objeto y así sucesivamente. Ejemplo flash1.fla ANIMACIONES INTERPOLADAS: Conceptos: Fotograma clave: Es aquel en el que se definen cambios en la animación. Se representan mediante círculos rellenos. Los fotogramas clave vacíos aparecen como círculos vacíos. Capas: Se utilizan para crear movimientos de diferentes objetos a la vez. Cada escena pude contener varias capas y normalmente las capas de fondo suelen contener objetos estáticos. Pasos: A) INTERPOLACIÓN DE MOVIMIENTO. Una línea discontinua indica interpolación incompleta Crea el primer fotograma clave. Inserta otro fotograma clave en otra posición. Seleccione un fotograma intermedio y crea interpolación de movimiento. Vaya al último fotograma y crea interpolación de movimiento. Modifica la forma y la posición de este. Se pueden aplicar giros en las propiedades Ejemplo: flash2.fla Guías de movimiento Se pueden crear trayectorias para una interpolación de movimiento. Primero crea una animación de movimiento. A esta capa desde el menú insertar, añade una guía de movimiento y dibuja con la herramienta lápiz la trayectoria. Finalmente ajuste los fotogramas claves inicial y final, al comienzo y fin de la trayectoria respectivamente. Todas las capas situadas debajo de la guía de movimiento se pueden asignar a este trazado. Ejemplo: flash5.fla y flash5a.fla (stop())

2 Guía Flash 2 de 7 B) INTERPOLACIÓN DE FORMA. Cree la forma original en un fotograma clave. Inserta un fotograma clave vacío en la línea tiempo y dibuje otra forma. Modifica en este fotograma la propiedad animar Forma. Vaya al primer fotograma y cambia la propiedad animar forma. EFECTOS DE LA LÍNEA DE TIEMPO. Selecciona un fotograma clave y marque el objeto con botón derecho de ratón para agregar efectos de línea de tiempo (Asistente, Efectos, Transición). Ejemplo: flash4.fla EFECTO SOBREEXPOSICION. Crea una animación de movimiento con las imágenes deseadas y cambia la propiedad color -> avanzado de cada símbolo a valores R=255 V=255 A=255 en un extremo y en otro extremo R=1 V=1 A=1 Ejemplo sobreexponer.fla EDICIÓN DE FOTOGRAMAS. Sólo se pueden editar los fotogramas clave de la animación. Podremos insertar nuevos fotogramas claves en los puntos intermedios de la línea de tiempo. Utilice el papel cebolla para ver de forma simultánea todos los fotogramas de la línea de tiempos. USO DE CAPAS MÁSCARAS. Se pude diseñar una capa de máscara para crear un agujero a través del cual ver las capas colocadas por debajo. Crea una capa con texto e inserta fotograma clave en posición ej. 60. Crea una segunda capa dibuja una forma y crea animación, en diferentes fotogramas, de esta de forma que recorra todo el gráfico. Convierte esta capa en máscara. Ejemplo: mascara.fla ventana.fla SECUENCIA DE IMÁGENES. En una carpeta añade la colección de imágenes con el nombre imagenxx.jpg Inserta la primera imagen en flash y déjale que cree la secuencia. Procura dimensionar las imágenes al mismo tamaño de pixels.

3 Guía Flash 3 de 7 ANIMACIÓN DE TEXTO. Flash solo puede animar gráficos vectoriales, por tanto para hacer animaciones con letras de texto tenemos que seleccionarlas y con el botón derecho SEPARAR. A partir de ahora el texto será vectorial y podremos hacer las animaciones anteriores. Es conveniente a veces colocar cada letra e una capa. BOTÓN. : flash6.fla Inserte una imagen Convierte la imagen en botón. Inserta nueva imagen en el fotograma SOBRE. Inserta nueva imagen fotograma PRESIONADO. Se puede incluir sonido (importado previamente a la biblioteca) e hipervínculos. on (press) { geturl( direccion web ); PELOTA BOTANDO. (pelota.fla) Crea un fondo de tamaño 300x300. Ajusta velocidad a 24 fps. Inserte un círculo 20x20 conviértelo en símbolo, clip de película. Crea el siguiente script sobre este símbolo: onclipevent(load) { vx=20; vy=20; onclipevent(enterframe) { this._x+=vx; this._y+=vy; if (this._x>=280){ vx=-vx; if (this._y>=280){ vy=-vy; if (this._x<10){ vx=-vx; if (this._y<10){ vy=-vy;

4 Guía Flash 4 de 7 JUEGO FRONTON. (fronton.fla) Usando el ejercicio anterior, añade una barra al escenario en el fotograma 1, grosor 4 y conviértela en clip de película, denomina a esta instancia barra. Añade el evento a este clip: on(press){ startdrag(this); Si quisiéramos detener el arrastre de la barra al soltar el botón del ratón añadiríamos el código: on(release) { stopdrag(); Añade el siguiente código en el evento onclipevent(enterframe) del ejercicio anterior. onclipevent (enterframe) { // Detecta el choque entre el objeto bola y barra // Si chocan devuelve el valor TRUE por tanto se invierte la velocidad en x if(this.hittest(_root.barra)){ vx=-vx; POSICIÓN DE RATON. (posraton.fla) Crea dos textos dinámicos ratonx y ratony e inserta el código en el fotograma: onenterframe=function(){ ratonx.text=_xmouse; ratony.text=_ymouse; ARRASTRE CON EL RATÓN (RATON.FLA) Inserte un círculo 20x20 conviértelo en símbolo, clip de película. Crea el siguiente script sobre este símbolo: onclipevent (load) { Mouse.hide(); //Puntero de raton oculto startdrag(this, true); onclipevent(mousemove){ updateafterevent(); //Actualiza cuando el puntero se mueve //independiente de los fps haciendo movimiento mas suave

5 Guía Flash 5 de 7 MOVIMIENTO ARMÓNICO. (armonico.fla) Disponemos de un moviclip en nuestra biblioteca llamado esfera. Ajustamos la velocidad de la escena a 24 fps En un fotograma clave vacío insertamos el código: // incluimos en la escena el objeto 'esfera' previamente vinculado _root.attachmovie( "esfera", "esfera", 10 ); angulo = 0; amplitud = 100; eje_y = 20; // ángulo de inicio // amplitud de la onda // eje vertical de la onda onenterframe = function() { // calculamos la posición en Y según el seno del ángulo, // lo multiplicamos por la amplitud de la onda // y lo colocamos en relación al eje en Y y1 = ( Math.sin( angulo * ( Math.PI / 180 ) ) * amplitud ) + eje_y; esfera._y = y1; // actualizamos la posición en Y angulo = angulo + 5; // incrementamos el ángulo Si actuamos de la misma manera en el eje x tendremos una composición de movimientos que dependiendo del desfase entre ellos obtendremos diferentes formas. DIBUJA CON EL RATÓN (dibuja.fla) Dibuja a mano alzada con el puntero de ratón. Se incluye en el escenario un botón denominado clear_btn para borrar la imagen. _root.onmousedown = function() { _root.linestyle(5, 0xFF0000, 100); _root.moveto(_root._xmouse, _root._ymouse); isdrawing = true; ; _root.onmousemove = function() { if (isdrawing == true) { _root.lineto(_root._xmouse, _root._ymouse); updateafterevent(); ; _root.onmouseup = function() { isdrawing = false; ; clear_btn.onrelease = function() { _root.clear(); ;

6 Guía Flash 6 de 7 RELOJ DIGITAL. (relojdigital.fla) Insertamos en una capa tres textos dinámicos llamados respectivamente hora, minutos, segundos. Insertamos el siguiente código en el fotograma: onenterframe = function() { time = new Date(); hora.text = time.gethours(); minutos.text = time.getminutes(); segundos.text = time.getseconds(); RELOJ ANALÓGICO (reloj1.fla) Crea cinco capas llamadas código, esfera, segundos, minutos y horas. En la capa esfera crea un movie clip llamado mcesfera con el fondo del reloj. Llama a la instancia de este fondo mcesfera. En la capa segundos dibuja una línea vertical, conviértela en símbolo movi clip mcsegundos y a su instancia también. Haz que el punto de rotación se encuentre en el extremo inferior y llévala dentro de la esfera. Análogamente para las otras capas y llama a los movieclip y a sus instancias mcminutos, y mchoras. En la capa código inserta: onenterframe = function() { mydate = new Date(); mchoras._rotation = mydate().gethours()*360/12 + mydate().getminutes()*360/720; mcminutos._rotation = mydate().getminutes()*360/60; mcsegundos._rotation = mydate().getseconds()*360/60; ;

7 Guía Flash 7 de 7 JUEGO DISPARO (helicoptero.fla) En la capa1 insertamos una instancia del misil y la explosión junto al código. En otra capa una instancia del helicóptero. En ambas capas insertamos un segundo fotograma clave y ajustamos fps a 66. setproperty(explocion, _visible, false); _root.helicoptero.play(); _root.helicoptero._visible = true; if (Key.isDown(Key.RIGHT)) { helicoptero._x = helicoptero._x+5; if (Key.isDown(Key.LEFT)) { helicoptero._x = helicoptero._x-5; if (Key.isDown(Key.UP)) { helicoptero._y = helicoptero._y-5; if (Key.isDown(Key.DOWN)) { if (helicoptero._y<=280) {helicoptero._y = helicoptero._y+5; else { helicoptero._y = 5; status = _root.helicoptero.hittest(_root.rocket); if ((status == false) and (rocket._y<=0)) { rocket._y = 380; rocket._x = random(500); if (status == false) { rocket._y = rocket._y-25; if (status == true) { stopallsounds(); _root.helicoptero._visible = false; duplicatemovieclip("explocion", "ex1", 0); ex1._y = helicoptero._y; ex1._x = helicoptero._x; ex1.play(); rocket._y = 380; rocket._x = random(500);