Blinkien viimeistely Flash Motion Tweens -sovelluksella

• Huhtikuu 25, 2024

Kun työskentelimme viimeksi Flash-blinkie-animaatiossa, olimme juuri viimeistelleet tekstiefektit. Viimeisin animaatiossa esiintynyt tekstitehoste oli verkkosivun nimen ”J3 Designs” ilmestyminen ja katoaminen. Se katoaa vaiheesta vasemmalle aikajanan siirtymätehosteella (siirtymä 3 aikajanalla). Sillä oli syy ja aiot selvittää, mikä tämä syy oli.

Muista, että osana suunnittelun yksityiskohtia meillä on nämä kaksi leppäkerttua. No, on aika laittaa heidät töihin. Kun rakensimme kerroksia blinkie-projektiimme, lisäsimme kultaisen leppäkertun Bug 1 -kerrokseen. Nyt ensimmäinen asia, jonka teemme, on lisätä toinen leppäkerttu uuteen kerrokseen, jota kutsumme Bugiksi 2. Haluamme, että tämä punainen leppäkerttu ilmestyy kameon alla. Siksi meidän on asetettava uusi kerros staattisten yksityiskohtien kerroksen alle.

Avaa blinkie2.fla Flash CS3: een ja siirrytään töihin. Haluamme leppäkertun alkavan liikkua kameran alta, kun verkkosivuston nimi alkaa kadota. Haluamme sen näyttävän siltä, ​​että teksti katoaa leppäkertun takia. Joten lisäämme tämän uuden leppäkertun runkoon 110, jolloin teksti alkaa kadota.

1. Napsauta Tiedosto - Tuo - Tuo kirjastoon -painiketta avataksesi Tuo-valintaikkunan ja lisätäksesi punaisen leppäkertun kirjastoomme.
   
   
2. Lisää uusi taso staattisten tietojen kerroksen alle ja nimeä se ”Bug 2”. Lisää avainrunko (lisää - Aikajana - avainruutu) kehykseen 110. Vedä punainen leppäkerttu kirjastosta kameran alle ja näkyviin toistaiseksi.
   
   Haluamme, että tämä leppäkerttu liikkuu vasemmalle, kunnes se katoaa lavalta, kun teksti katoaa. Joten me haluamme ladybugin aina lavalle vasemmalle ja poispäin mennessä kun saavutamme Frame 160: n.
   
   
3. Napsauta Kehys 160 Bug 2 -kerroksessa, lisää avainkehys ja vedä punainen leppäkerttu vasemmalle ja kokonaan pois lavalta. Napsauta hiiren kakkospainikkeella kehyksen 110 ja 160 välillä ja valitse ponnahdusvalikosta Luo liike keskenään.
   
   Testaa elokuva ja sinun pitäisi nähdä teksti katoavan, kun leppäkerttu liikkuu sen yli. Kun punainen leppäkerttu on pois lavalta, siirrämme kultaista leppäkerttua (Bug 1 -kerros) ylös ja oikealle, kunnes se myös katoaa lavalta.
   
   
4. Napsauta Kehys 160 Bug 1 -kerroksessa ja lisää avainkehys kultaisen leppäkertun animaation lähtökohdaksi. Käytämme 20 kehystä kultaisen leppäkertun siirtämiseen lavalta. Napsauta Kehys 180 ja lisää avainruutu. Siirrä kultainen leppäkerttu ylös ja pois lavalta.
   
   
5. Napsauta hiiren kakkospainikkeella kehyksen 160 ja 180 välillä ja luo Motion Tween. Napsauta Kehys 180 ja lisää kehys staattisiin yksityiskohtiin ja taustatasoihin, jotta näiden kerrosten sisältö näkyy uudelleen.
   
   Lopuksi haluamme siirtää kultaisen leppäkertun takaisin alkuperäiseen asentoonsa lavan vasemmassa alakulmassa. Mutta emme halua, että vika siirtyy alas lavan yläosasta. Haluamme sen liikkuvan lavan alla. Joten meidän on ensin sijoitettava kultainen leppäkerttu vasemmalle ja lavan alle. Sitten meidän on siirrettävä se ylöspäin alkuperäiseen asentoonsa, jotta animaatio voi toistua. Käytämme 10 kehystä ladybugin takaisin paikalleen.
   
   
6. Mene takaisin Bug 1 -kerroksen kehykseen 1 ja valitse kultainen leppäkerttu. Napsauta Muokkaa - Kopioi, kun haluat tallentaa kultaisen leppäkertun alkuperäisen sijainnin.
   
   
7. Lisää vielä Bug 1 -kerroksessa avainkehys kehykseen 190. Napsauta Muokkaa - Poista, jos haluat poistaa jo olemassa olevan kultaisen leppäkertun. Napsauta sitten Muokkaa - Liitä paikoilleen laittaaksesi kultaisen leppäkertun takaisin alkuperäiseen sijaintiin.
   
   
8. Napsauta silti Bug 1 -kerroksessa Frame 181 ja lisää avainruutu. Poista sitten jo kultainen leppäkerttu. Aseta kultainen leppäkerttu takaisin alkuperäiseen asentoonsa runkoon (liitä paikoilleen). Vedä sitten leppäkerttu lavan alle. Lisää liikettä Tween-kehyksen 181 ja 190 väliin, joka siirtää tämän leppäkertun ylös ja lavalle.
   
   
9. Napsauta Kehystä 190 ja lisää kehys Static Details- ja Background-tasoihin, jotta näiden kerrosten sisältö näkyy uudelleen.
   
   

Testaa ja tallenna blinkie nimellä blinkie3.fla. Julkaise sitten blinkiesi .swf-tiedostona ja nauti uudesta blinkististasi.

J3 mallit

Tekijänoikeus 2018 Adobe Systems Incorporated. Kaikki oikeudet pidätetään. Adobe-tuotteen näyttökuva (t) uusitaan Adobe Systems Incorporatedin luvalla. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Ilotulitteet, Contribute, Captivate, Flash Catalyst ja Flash Paper on / on joko [a] rekisteröity tavaramerkki (t) tai Adobe Systems Incorporatedin tavaramerkki (t) Yhdysvalloissa ja / tai muissa maissa.

Video-Ohjeita: Photoshop tutorial: Animating a logo with keyframes in Photoshop | lynda.com (Huhtikuu 2024).