Slutför Blinkie med Flash Motion Tweens

• Maj 2, 2024

När vi senast arbetade med Flash blinkie-animationen hade vi precis avslutat texteffekterna. Den sista texteffekten som inträffade i animationen var utseendet och försvinnandet av webbplatsnamnet “J3 Designs”. Den försvinner från scenen till vänster med en tidslinjeövergångseffekt (övergång 3 på tidslinjen). Det fanns en anledning till detta och du håller på att ta reda på vad den anledningen var.

Kom ihåg att vi har de två nyckelpigorna som en del av designdetaljerna. Det är dags att sätta dem på jobbet. När vi byggde lagren till vårt blinkieprojekt lägger vi till guld nyckelpiga till Bug 1-lagret. Det första vi kommer att göra är att lägga till den andra nyckelpigan till ett nytt lager som vi kommer att kalla Bug 2. Vi vill att den röda nyckelpigan ska dyka upp under komo. Därför måste vi placera det nya lagret under lagret Static Details.

Öppna blinkie2.fla i Flash CS3 och låt oss börja fungera. Vi vill att nyckelpigan börjar flytta från under theo eftersom webbplatsens namn börjar försvinna. Vi vill att den ska se ut som texten försvinner på grund av nyckelpigan. Så vi lägger till denna nya nyckelpiga på Frame 110, som är när texten börjar försvinna.

1. Klicka på File - Import - Import to Library för att öppna dialogrutan Importera och lägga till den röda nyckelpigan i vårt bibliotek.
   
   
2. Lägg till ett nytt lager under lagret Static Details och namnge det "Bug 2". Lägg till en nyckelbild (infoga - tidslinje - nyckelbild) till ram 110. Dra den röda nyckelpigan från biblioteket till under komo och ur sikte för tillfället.
   
   Vi vill att denna nyckelpiga ska flytta till vänster tills den försvinner från scenen när texten försvinner. Så vi vill ha nyckelpiga hela vägen till vänster och utanför scenen när vi når Frame 160.
   
   
3. Klicka på Frame 160 på Bug 2-lagret, lägg till en Keyframe och dra den röda nyckelpiga till vänster och hela vägen från scenen. Högerklicka mellan Frame 110 och 160 och välj Create Motion Tween från popup-menyn.
   
   Testa filmen så ser du att texten försvinner när nyckelpiga rör sig över den. När den röda nyckelpiga är av scenen flyttar vi guld nyckelpiga (Bug 1-lager) upp och till höger tills den också försvinner från scenen.
   
   
4. Klicka på Frame 160 på Bug 1-lagret och lägg till ett Keyframe för startpunkten för guld nyckelpigaens animering. Låt oss använda 20 ramar för att flytta guld nyckelpiga från scenen. Klicka på Frame 180 och lägg till en Keyframe. Flytta guld nyckelpiga upp och utanför scenen.
   
   
5. Högerklicka mellan ram 160 och 180 och skapa en Motion Tween. Klicka på ram 180 och lägg till en ram i lagren Static Details och Background för att göra innehållet på dessa lager synliga igen.
   
   Slutligen vill vi flytta guld nyckelpiga tillbaka till sitt ursprungliga läge längst ner till vänster på scenen. Men vi vill inte att felet ska gå ner från toppen av scenen. Vi vill att det ska gå upp från scenen. Så vi måste först placera guld nyckelpiga till vänster och under scenen. Då behöver vi bara flytta den uppåt till sin ursprungliga position så att animationen kan upprepa. Vi kommer att använda 10 ramar för att flytta nyckelpiga på plats.
   
   
6. Gå tillbaka till ram 1 på Bug 1-lagret och välj guld nyckelpiga. Klicka på Redigera - Kopiera för att spara den ursprungliga positionen för guld nyckelpiga.
   
   
7. Fortfarande på Bug 1-lagret lägger du till en Keyframe till Frame 190. Klicka på Redigera - Rensa för att ta bort guld nyckelpiga som redan finns. Klicka sedan på Redigera - Klistra in på plats för att sätta tillbaka guld nyckelpigan till den ursprungliga positionen.
   
   
8. Fortfarande på Bug 1-skiktet, klicka på Frame 181 och lägg till en Keyframe. Ta sedan bort guld nyckelpiga som redan finns. Sätt tillbaka den gyllene nyckelpigan i den ursprungliga positionen på den här ramen (Klistra in på plats). Dra sedan denna nyckelpiga till under scenen. Lägg till en Motion Tween mellan ram 181 och 190 som kommer att flytta denna nyckelpiga upp och in på scenen.
   
   
9. Klicka på Frame 190 och lägg till en Frame i Static Details- och Background-lagren för att synliggöra innehållet på dessa lager igen.
   
   

Testa och spara blinkan som blinkie3.fla. Publicera sedan din blinkie som en .swf-fil och njut av din nya blinkie.

J3-mönster

Copyright 2018 Adobe Systems Incorporated. Alla rättigheter förbehållna. Adobes produktskärmbild (ar) tryckta om med tillstånd från Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst och Flash Paper är / är antingen [a] registrerat varumärke [s] eller ett varumärke [s] från Adobe Systems Incorporated i USA och / eller andra länder.