Terminando el Blinkie con Flash Motion Tweens

• Abril 19, 2024

La última vez que trabajamos en la animación Flash Blinkie, acabábamos de terminar los efectos de texto. El último efecto de texto que se produjo en la animación fue la aparición y desaparición del nombre del sitio web "Diseños J3". Desaparece del escenario a la izquierda con un efecto de transición de línea de tiempo (Transición 3 en la línea de tiempo). Había una razón para esto y estás a punto de descubrir cuál era esa razón.

Recuerde que, como parte de los detalles de diseño, tenemos esas dos mariquitas. Bueno, es hora de ponerlos a trabajar. Cuando creamos las capas para nuestro proyecto blinkie, agregamos la mariquita dorada a la capa Bug 1. Ahora, lo primero que haremos es agregar la segunda mariquita a una nueva capa que llamaremos Bug 2. Queremos que esta mariquita roja aparezca debajo del cameo. Por lo tanto, necesitaremos colocar la nueva capa debajo de la capa Detalles estáticos.

Abra blinkie2.fla en Flash CS3 y comencemos a trabajar. Queremos que la mariquita comience a moverse debajo del cameo a medida que el nombre del sitio web comienza a desaparecer. Queremos que parezca que el texto está desapareciendo debido a la mariquita. Entonces agregaremos esta nueva mariquita en el Marco 110, que es cuando el texto comienza a desaparecer.

1. Haga clic en Archivo - Importar - Importar a la Biblioteca para abrir el cuadro de diálogo Importar y agregar la mariquita roja a nuestra Biblioteca.
   
   
2. Agregue una nueva capa debajo de la capa Detalles estáticos y asígnele el nombre "Error 2". Agregue un fotograma clave (Insertar - Línea de tiempo - Fotograma clave) al fotograma 110. Arrastre la mariquita roja desde la Biblioteca hasta debajo del cameo y fuera de la vista por ahora.
   
   Queremos que esta mariquita se mueva hacia la izquierda hasta que desaparezca del escenario a medida que desaparece el texto. Entonces, queremos que la mariquita esté completamente a la izquierda y fuera del escenario para cuando lleguemos al Cuadro 160.
   
   
3. Haga clic en el cuadro 160 en la capa Bug 2, agregue un fotograma clave y arrastre la mariquita roja hacia la izquierda y fuera del escenario. Haga clic derecho entre los cuadros 110 y 160 y elija Crear interpolación de movimiento en el menú emergente.
   
   Prueba la película y deberías ver desaparecer el texto a medida que la mariquita se mueve sobre ella. Una vez que la mariquita roja esté fuera del escenario, moveremos la mariquita dorada (capa Bug 1) hacia arriba y hacia la derecha hasta que también desaparezca del escenario.
   
   
4. Haga clic en el cuadro 160 en la capa Bug 1 y agregue un fotograma clave para el punto de partida de la animación de la mariquita dorada. Usemos 20 cuadros para mover la mariquita dorada fuera del escenario. Haga clic en el cuadro 180 y agregue un fotograma clave. Mueve la mariquita dorada hacia arriba y fuera del escenario.
   
   
5. Haga clic derecho entre los cuadros 160 y 180 y cree una interpolación de movimiento. Haga clic en el Marco 180 y agregue un Marco a las capas de Detalles estáticos y Fondo para que el contenido de estas capas sea visible nuevamente.
   
   Finalmente, queremos mover la mariquita dorada nuevamente a su posición original en la parte inferior izquierda del escenario. Pero no queremos que el error baje desde la parte superior del escenario. Queremos que suba desde debajo del escenario. Entonces, primero debemos colocar la mariquita dorada a la izquierda y debajo del escenario. Entonces, todo lo que tenemos que hacer es moverlo hacia arriba a su posición original para que la animación pueda repetirse. Usaremos 10 cuadros para volver a colocar la mariquita en su lugar.
   
   
6. Regrese al Cuadro 1 en la capa Bug 1 y seleccione la mariquita dorada. Haga clic en Editar - Copiar para guardar la posición original de la mariquita dorada.
   
   
7. Aún en la capa Bug 1, agregue un Keyframe al Frame 190. Haga clic en Editar - Borrar para eliminar la mariquita dorada que ya está allí. Luego, haga clic en Editar - Pegar en el lugar para volver a colocar la mariquita dorada en su posición original.
   
   
8. Aún en la capa Bug 1, haga clic en el Marco 181 y agregue un Keyframe. Luego, retire la mariquita dorada que ya está allí. Vuelva a colocar la mariquita dorada en la posición original en este marco (pegar en el lugar). Luego, arrastre esta mariquita debajo del escenario. Agregue un Motion Tween entre Frame 181 y 190 que moverá a esta mariquita hacia arriba y hacia el escenario.
   
   
9. Haga clic en el Marco 190 y agregue un Marco a las capas Detalles estáticos y Fondo para que los contenidos de estas capas sean visibles nuevamente.
   
   

Prueba y guarda el blinkie como blinkie3.fla. Luego publique su blinkie como un archivo .swf y disfrute de su nuevo blinkie.

Diseños J3

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: LLEGAMOS AL FINAL DEL JUEGO | Slime Rancher #19 (Final) (Abril 2024).