Share
De două ori pe lună, revizuim câteva postări preferate ale cititorilor noștri de-a lungul istoriei Activetuts +. Acest tutorial a fost publicat pentru prima oară în august 2009.
În acest tutorial vom analiza modul de creare a unei sigle care încorporează mascarea gradientului alfa în animația sa. Voi explica câteva sfaturi și trucuri cu privire la modul de lucru și evitarea unor probleme comune.
În primul rând, o privire rapidă la ceea ce urmărim:
Acesta este un tutorial de nivel incepator in care voi explica in detaliu cum sa creez acest logo si animatia sa. De-a lungul drumului voi menționa câteva cuvinte despre mascarea gradientului, imagini și forme în flash și acțiunea ActionScript pe care o cere. Inițial vom aborda pe scurt tehnicile Photoshop, dar majoritatea software-urilor de editare a imaginilor trebuie să fie suficiente.
Să începem!
Asigurați-vă că începeți prin descărcarea fișierelor sursă. Deschideți Logo.psd în fișierul zip.
De asemenea, puteți descărca și instala fontul utilizat în acest exemplu, Lubalin Graph Bold. Acest lucru este opțional, deoarece atunci când deschideți fișierul, Photoshop vă va avertiza că fontul lipsește, dar pentru acest exercițiu puteți continua perfect fără el.
Deschiderea Logo.psd ar trebui să vedeți acest lucru:
După cum puteți vedea, avem un strat de fond gri și un strat de text numit "Text". Dacă aveți instalat fontul Lubalin, veți putea schimba textul cu ceva mai personal sau puteți schimba fontul după preferințele dvs. Stratul de fond gri este foarte superficial și l-am ales doar pentru a ajuta la ilustrarea rezultatului final.
(Puteți trece peste acest pas dacă utilizați Photoshop.)
Aici vă voi explica pe scurt stilurile de straturi folosite în Photoshop, astfel încât aceia dintre voi care doresc să copieze logo-ul cât mai deplin posibil să aibă șansa să facă acest lucru în propriul software de editare a imaginilor. Nu este important însă că logo-ul dvs. să arate la fel.
Sperăm că acest lucru vă va oferi o idee despre cum să creați ceva similar. Din nou, nu este important din motive de înțelegere a tehnicii explicate în acest tutorial.
Înainte de a sari în Flash, am putea să facem și ultimul lucru necesar în Photoshop; care este de a crea o schiță pentru efectul pe care suntem pe cale de a face. Nu vă faceți griji dacă nu are sens încă, veți vedea întreaga imagine foarte curând!
Ar trebui să ajungeți la acest lucru:
Selectați stratul Outline și apăsați "V" pentru a selecta instrumentul de mutare. Cu ajutorul tastaturii, aliniați conturul astfel încât acesta să se afle perfect în partea de sus a textului original, cum ar fi:
Asigurați-vă că conturul este complet alb.
Ascundeți stratul Schiță și stratul de fundal. Accesați "Salvare pentru web și dispozitive" și salvați ca fișier PNG. Denumire logo.png. Ar trebui să arate astfel:
Apoi, ascundeți layerul Text și aduceți înapoi stratul Outline. Salvați ca "outline.png". Ar trebui să arate astfel:
Asigurați-vă că salvați PNG cu o calitate superioară!
Porniți Flash și creați un nou fișier AS3. Deoarece logo-ul pe care îl creăm este de 580 x 170 pixeli în Photoshop, vom folosi aceleași dimensiuni pentru fișierul nostru Flash. Lăsați culoarea FPS și culoarea de fundal ca atare.
Creați și denumiți aceste straturi:
Puneți-le în ordine ca în listă, astfel încât "Acțiunile" să fie la cel mai scăzut nivel Z și "Shine" la cel mai înalt nivel. Acum, selectați stratul de fundal și creați un dreptunghi care acoperă etapa. Asigurați-o culoarea ei un gradient mergând de la gri închis (# 222222) la gri deschis (# AAAAAA). Utilizați instrumentul Transformare gradient (tastă rapidă F) pentru al alinia astfel:
Blocați stratul de fundal, deoarece nu îl mai schimbăm.
Selectați stratul Logo. Accesați File> Import> Import to Stage sau apăsați Ctrl + R. Selectați logo.png pe care ați exportat-o anterior din Photoshop. Imaginea trebuie să se potrivească perfect în fișierul dvs. Flash. Acum puteți bloca și stratul Logo.
Selectați stratul Outline și încă o dată apăsați Ctrl + R, de această dată importând outline.png. Și el ar trebui să se alinieze la dreapta. Din moment ce conturul este selectat în prezent, acum ar fi un moment bun pentru a lovi F8 și transforma-l într-un MovieClip. Denumiți MovieClip "Outline", apoi mergeți mai departe și introduceți un nume de instanță de "outline" în panoul proprietăților. Ar trebui să vedeți ceva similar cu acesta:
Acum, mergeți la panoul Bibliotecă și verificați proprietățile logo.png. Personal aș fi stabilit acest lucru la calitate fără pierderi, deoarece acest logo este ceva care este probabil să fie folosit ca un antet sau ceva similar și cred că în aceste cazuri vă puteți permite să nu schimp pe calitate. Este apelul dvs., dar va arata cel mai bine la o calitate fara pierderi sigur!
Alegeți instanța conturului și adăugați o blur filtru. Setați-l la 2 pixeli în ambele proprietăți de estompare X și Y și alegeți o calitate superioară. Acest lucru va face rezultatul final mult mai bine.
Vă rugăm să rețineți adăugarea filtrului de estompare automat forțează Flash pentru a face conturul ca un bitmap. Dacă nu adăugați filtrul neclar, trebuie să bifați cel puțin caseta de validare "Cache as bitmap". Mai multe despre aceasta în Pasul 10.
Puteți trece și să blocați acest strat. De asemenea, acum ar fi un moment bun pentru a salva fișierul dvs. Flash!
Selectați stratul Mască și apoi instrumentul dreptunghi. Deselectați culoarea stroke dacă aveți unul aplicat în prezent.
Desenați un dreptunghi, faceți-l aproape de 60 de pixeli lățime și 320 de pixeli înălțime. Apoi, cu forma selectată, intrați în panoul de culori și dați-i un gradient liniar cu trei puncte împărțite uniform (prin puncte Adică mânerele mici care definesc culorile unui gradient). Alegeți orice culoare pentru puncte, dar asigurați-vă că aveți mijlocul la 100% alfa, iar cele exterioare la 0% alfa. Ar trebui să arate astfel:
Apăsați F8 cu forma selectată și transformați-o într-un filmClip numit "Mască". Denumiți instanța mască "theMask". În cele din urmă, rotiți masca la 45 de grade în ceas. O modalitate ușoară de a face acest lucru este să loviți mai întâi Q pentru instrumentul de transformare, apoi să țineți trecerea în timp ce rotiți astfel încât să se fixeze la 45 ° oprește.
Mergeți la rama 70 a stratului Mască în linia principală de timp și apăsați F5 pentru a introduce cadre în acest punct. Faceți clic dreapta pe orice cadru anterior și creați o mișcare de completare. Țineți trecerea și trageți apoi masca în partea dreaptă a scenei noastre. De asemenea, creați cadre pentru a încadra numărul 70 pentru straturile Backround, Logo și Outline. Masca ar trebui să meargă de aici:
Pana aici:
Așa cum probabil ați dat seama până acum, vom folosi forma de grafit alfa pentru masca pentru a estompa și scoate treptat conturul. De obicei, când aveți o mască în Flash, o aveți pe un singur strat și transformați-o într-un strat de mască. Stratul de mască are apoi straturi "copil" ale căror conținut va fi mascat. Acum, ce se întâmplă dacă facem acest lucru cu configurația noastră actuală? Acesta este rezultatul:
După cum puteți vedea, este departe de o tranziție lină. Nu există nici un comportament de gradient.
De ce este asta, atunci?
Pentru ca gradientele alfa să funcționeze, Flash trebuie să facă obiectele dvs. ca bitmap-uri, nu forme. Masca actuală este cu siguranță o formă (deși în interiorul unui filmClip) și este redată ca atare. Aceasta poate fi rezolvată în două moduri:
În Flash CS4, alegeți masca. Sub secțiunea Afișare din panoul proprietăților, bifați caseta de validare "Cache ca bitmap".
În Flash CS3, îl puteți găsi chiar în modurile de amestecare etichetate ca "Utilizare cache bitmap de utilizare".
Abordarea mea preferată este folosirea ActionScript. În principal pentru că, în calitate de dezvoltator (mai mult decât un designer), vreau să controlez toate aspectele prin cod, astfel încât să pot aplica orice efect oricărui obiect creat dinamic. Orice obiect subclasare DisplayObject are o proprietate booleană cacheAsBitmap. Deci, în exemplul nostru cu instanța numită "TheMask" este pur și simplu:
theMask.cacheAsBitmap = true;
Mergeți mai departe și creați un cadru cheie în stratul Acțiuni și introduceți acea linie de cod.
Din motive misterioase, Flash nu poate atinge efectul dorit pentru care nu mergem fără ActionScript. Straturile mascate din cronometrul Flash sunt pur și simplu nu face permite mascarea gradientului alfa!
Soluția este, din fericire, foarte simplă:
outline.mask =Mascul;
După cum citiți literalmente din cod, aceasta ne fixează instanța "theMask" ca mască pentru instanța noastră de contur. Mergeți și puneți-l în stratul de acțiuni.
Luați în considerare următoarele:
Există o eroare în Flash cu privire la instanțele de mască și la cronologie. Am observat bug-ul în următorul scenariu ipotetic:
Exemplu de mască nostru se întinde de la cadrele 1 la 70. Altul nostru element (logo-ul) se întinde până la cadrul 90. Când Flash-ul se redă între cadrele 71 și 90, instanța mască nu se află pe scenă. Dacă vizualizați logo-ul într-o fila Firefox, de exemplu, apoi treceți la o altă filă, apoi înapoi la logo-ul, veți vedea bug-ul. Veți vedea dacă redarea se află între ramele 71 și 90, adică. Buga se va arăta în timp ce conturul va apărea și va fi demascat. Când redarea revine la primul cadru, acesta revine la normal.
Concluzia pe care o putem trage din aceasta este că, dacă mascați ceva prin ActionScript, asigurați-vă că păstrați masca pe scena în orice moment pentru a evita ca obiectul să fie mascat prezentându-se.
Continuați și încercați acum filmul. Ar trebui să arate astfel:
Efectul este ușor prea puternic, astfel încât să puteți reduce alfa din instanța contur la 75% și va arăta un pic mai subtil.
Ca o ultimă atingere finală, vom adăuga un efect de strălucire strălucitor pe logo-ul.
Sigla dvs. ar trebui acum să fie 99% completă. Veți dori totuși să vă ajustați atunci când animația repornește inserând mai multe cadre după ce animația a fost animată. Doar amintiți-vă ce am menționat mai devreme; asigurați-vă că păstrați o instanță a măștii pe scenă până la sfârșitul ciclului de animație pentru a evita eroarea de afișare a măștii!
Aici, la sfârșitul acestui tutorial, vă veți da seama, cu ușurință, cât de ușor puteți face schimbări în logo sau aplicați efectul pe orice logo de text cu un rezultat satisfăcător. Încercați să experimentați modificând grosimea conturului (Amintiți-vă? Am făcut-o cu 2 pixeli grosime). Schimbarea textului, fontului și culorilor poate fi făcută și cu ușurință. Modificați culorile în stratul de culori și în cursa, sau chiar mai bine; experimentați cu propriile stiluri de straturi!
Inima animației constă în schița de gradient alfa care se află în interiorul textului, astfel că atunci când experimentați pe cont propriu ar trebui să încercați să aveți un anumit tip de accident vascular cerebral sau frontieră externă pentru a menține acest efect. Desigur, orice se întâmplă, orice este bun pentru tine este bun!
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
Accentsconagua