Adăugați o scânteie animată la textul dvs. - Basix

Acest tutorial acoperă crearea unui efect de text strălucitor, care poate fi apoi editat cu ușurință pentru prototipuri rapide.

Animația poate fi publicată în Flash Player 8 și în sus și poate fi creată în Flash 8 și în sus. Nu există niciun ActionScript care rulează această animație, astfel încât poate fi ușor implementat în ambele proiecte AS2 și AS3. Acesta poate servi ca un joc amuzant Flash intro logo, anunț banner sau oricum considerați potrivit. Distrează-te cu asta!.


Rezultatul final al rezultatelor

Să aruncăm o privire asupra rezultatului final pe care îl vom strădui:


Pasul 1: Creați un nou document Flash

Utilizând Fișier> Nou> Creați un nou document Flash ActionScript 2 sau 3.

În fereastra Proprietăți, faceți dimensiunea scenei 590 cu 300.

Editați, de asemenea, cadrele pe secundă la 30.


Pasul 2: Forma de gradient

Cu ajutorul instrumentului Rectangle (R), plasați un pătrat pe scenă cu gradientul radial alb-negru presetat și fără un accident vascular cerebral.

Nu contează cât de mare este pătratul pe care îl creați.

Etichetați acest strat "gradient".


Pasul 3: Re-dimensionați și aliniați

Selectați pătratul dvs. de gradient și deschideți opțiunile de aliniere utilizând CTRL + K.

Asigurați-vă că este bifată opțiunea "Aliniere la scenă".

Mai întâi se potrivesc lățimea și înălțimea pătratului cu etapa.

Rezultatul dvs. ar trebui să fie ceva de genul:

Apoi aliniați marginea din stânga a formei la scenă.

Rezultatul dvs. ar trebui să fie acum după cum urmează:

Apoi aliniați marginea superioară a formei la scenă.

Bingo:


Pasul 4: Editați dimensiunea și culorile

Selectați instrumentul de transformare a gradientului (F).

Faceți clic pe panta de pe scenă.

Folosind mânerele de control al gradientului, modificați mărimea și forma gradientului astfel încât acesta să fie distribuit mai uniform pe întreaga scenă.

Deschideți fereastra Culoare (Alt + Shift + F9).

Modificați culoarea albă pe gradient la un # 333333 gri și glisați culoarea spre dreapta, astfel încât să existe un cerc gri în mijlocul gradientului.

Aceasta este ceea ce ar trebui să vedeți:


Pasul 5: Adăugați linii orizontale

Creați un strat nou deasupra gradientului și denumiți-l "linii".

Folosind instrumentul Rectangle (R), desenați un dreptunghi pe scenă fără curse și o umplere albă opacă de 9%.

Folosind panoul de proprietăți, modificați dimensiunea formei la 590 cu 5.

Folosind opțiunile Aliniere, aliniați forma la centrul orizontal al scenei.

Apoi, utilizând opțiunile Aliniere, aliniați forma la marginea superioară a scenei.

Cu această formă încă selectată, copiați-o și lipiți-o (CTRL + Shift + V).

Deplasați această nouă formă în jos cu zece pixeli sub prima formă și duplicați-o din nou folosind aceeași metodă. Acum aveți ceva de genul:

Duplicați acest proces de mai sus până când aveți întregul ecran acoperit cu aceste forme orizontale. Veți sfârși cu ceva de genul:


Pasul 6: Logo Animation Movieclip

Creați un nou strat denumit "logo".

Desenați un dreptunghi (R) cu un accident alb, dar fără umplere.

Sub Proprietăți, schimbați dimensiunile la 590 cu 300 de pixeli.

Folosind fereastra Align (CTRL + K), aliniați forma la marginea stângă și superioară astfel încât rezultatul să fie următorul:

Selectați dreptunghiul alb și convertiți-l la un simbol din Modify> Convert to Symbol.

Denumiți "masterClip" și asigurați-vă că punctul de înregistrare se află în colțul din stânga sus. Apoi faceți clic pe "OK".


Pasul 7: Faceți dreptunghiul un ghid

Faceți dublu clic pe masterClip de pe scenă pentru al edita în context.

Faceți dublu clic pe numele stratului și îl modificați la "mărimea etapei".

Faceți clic dreapta pe strat și alegeți "Ghid".

Blocați stratul făcând clic pe al doilea cerc alb.

Acum aveți un strat de referință, care vă spune cât de mare este scena, în contextul masterClip.


Pasul 8: Adăugați textul

Creați un strat nou și adăugați textul la acest film cu ajutorul instrumentului de text (T). am ales SF Sport Night pentru această animație.

Acestea sunt setările de tip care se aplică câmpului text (setările disponibile pot fi ușor diferite, în funcție de versiunea Flash pe care o utilizați):

Pentru a realiza ruperea liniei în text, introduceți manual nouă spații goale pe a doua linie pentru a obține textul în ordine în modul afișat.


Pasul 9: Rotiți textul

Selectați textul și, utilizând fereastra Transformare (CTRL + T), rotiți textul la -6.5.


Pasul 10: Reglați distanța

Selectați textul, mutați-l în jos, astfel încât să se afle în centrul cadrului.


Pasul 11: Conversia textului într-un Movieclip

Selectați textul pe scenă și convertiți-l la un simbol cu ​​Modify> Convert to Symbol (sau F8).

Denumiți clipul "sourceText" și asigurați-vă că este un clip video, nu un buton sau un clip grafic. Apoi faceți clic pe "OK".


Pasul 12: Plasați pe patru mai multe straturi

Selectați clipul text și copiați-l utilizând CTRL + C.

Creați patru straturi noi folosind butonul "New Layer" din panoul temporal.

.

Puneți clipul text pe care l-ați copiat pe fiecare strat, utilizând Edit> Paste in Place.

Acum aveți cinci straturi identice.

Redenumiți fiecare strat făcând dublu clic pe numele fiecărui strat. Utilizați imaginea de mai jos ca ghid pentru denumirea fiecăruia.

Blocați și ascundeți toate straturile utilizând butoanele de blocare și vizibile comutând în cadrul cronologiei.

Prin ascunderea și blocarea fiecărui strat, vom putea izola și edita fiecare strat independent.


Pasul 13: Editați stratul "Glows"

Faceți vizibil stratul de "strălucire" și deblocați-l. Faceți clic pe acest strat pentru a vă asigura că îl editați.

Selectați clipul text de pe scenă și asigurați-vă că filtrele sunt deschise în panoul Proprietăți.

Adăugați o strălucire în clipul text, utilizând butonul Adăugați filtru. Alegeți opțiunea "Glow".

Aplicați aceste setări la strălucirea care a fost creată.

Acum aveți acest efect:

Acum, folosind aceeași metodă, aplicați un al doilea filtru strălucitor la același clip.

Aplicați aceste setări la noua strălucire care a fost creată.

Acum aveți acest efect:

Aplicați acum o Shadow Drop în același clip.

Aplicați aceste setări la umbra care a fost creată.

Acum aveți acest efect:


Pasul 14: Editați layerul "Mask3"

Cu stratul "strălucește" încă vizibil și selectat, adăugați un nou strat. Denumiți-o "verde".

.

Acum blocați și ascundeți și "strălucește" stratul. Faceți vizibil stratul "mask3" și deblocați-l.

Faceți stratul "mask3" o mască făcând clic dreapta pe strat și selectând "mască".

Stratul verde va fi acum blocat temporar. Deblocați-l făcând clic pe pictograma de blocare a stratului.

Utilizați instrumentul dreptunghi (R) pentru a desena o formă pe stratul "verde".

Aplicați nici un accident vascular cerebral și gradientul linear de la negru la alb.

Desenați forma, astfel încât să fie mai mare decât dimensiunea scenei.

Selectați instrumentul de transformare a gradientului (F) și faceți clic pe gradientul de pe scenă.

Folosind manerul de transformare a gradientului, rotiți gradientul 90 degresiv și schimbați intervalul gradientului astfel încât acesta să acopere numai zona de text a scenei.

Modificați culorile gradientului folosind fereastra de culoare. (Alt + Shift + F9).

Verdele din dreapta este # 8CD566.

Verde din stânga este # 43851F.

Acum blocați stratul "verde" și asigurați-vă că și stratul "mask3" este blocat. De asemenea, întoarceți vizibilitatea stratului "strălucitor" ...

Rezultatul este acum:


Pasul 15: Editați stratul "Inner Glow"

Faceți vizibil stratul "strălucire interioară" și deblocați-l.

Selectați clipul de pe stratul de "strălucire interioară" și adăugați o strălucire sub filtrele din fereastra de prospectare.

Aplicați aceste setări la noua strălucire:

Bacsis: Observați că această strălucire este o strălucire interioară, ceea ce înseamnă că strălucește din interior, nu din exterior.

Rezultatul dvs. este acum:

Cu clipul selectat, schimbați modul de amestecare la Suprapunere sub Afișare în panoul Proprietăți:

Cu noul mod de amestecare în loc, rezultatul dvs. este acum:


Pasul 16: Creșteți intervalul temporal

Acest masterClip are în prezent doar un cadru lung. Trebuie să adăugăm mai multe cadre, astfel încât să putem anima efectele stralucirii.

În linia de timp, faceți clic și trageți pentru a evidenția toate straturile de pe cadrul 88.

Cu cadranul selectat, faceți clic dreapta și alegeți "Inserați cadru" din lista derulantă.

Bacsis: În afară de clic-dreapta pentru a adăuga cadre, puteți utiliza, de asemenea, F5 ca o comandă rapidă.

Cronologia are acum un interval de 88 de cadre.


Pasul 17: Adăugați primul Shine animat

Începeți cu prima închidere și ascunderea stratului "strălucire interioară".

Cu stratul "strălucire interioară" încă selectat, adăugați un nou strat utilizând butonul din fereastra straturilor.

Faceți dublu clic pe numele noului strat și denumiți-l "străluciți".

Faceți clic dreapta pe stratul de jos "mask1" și faceți o mască.

Acum, deblocați stratul de "strălucire" și faceți clic pe acesta, pentru a putea începe să lucrați cu acest strat.

Stralucirea pe care o adaugam va incepe sa animeze cam jumatate in animatie. Utilizați epuratorul din linia temporală pentru a naviga la cadrul 47.

Faceți clic pe cadrul 47 al stratului "strălucire", apoi faceți clic dreapta pentru a insera un cadru cheie.

Bacsis: În afară de clic-dreapta, puteți utiliza și F6 pentru a insera un cadru cheie.

Acesta este cheia cheie pe care o vom adăuga strălucirea noastră.

Lăsați acest nou keyframe selectat și selectați Tool Rectangle (R).

Alegeți gradientul liniar standard alb-negru pentru umplere, fără nici un accident vascular cerebral.

Desenați un dreptunghi pe scenă, puțin mai înalt decât înălțimea scenei și cu o lățime de 150 de pixeli.

Utilizați instrumentul de transformare a gradienților (F) pentru a modifica deschiderea / rotirea acestei forme de gradient nou.

Utilizați mânerele de control pentru Gradient pentru a roti gradientul ușor spre stânga.

Cu acest gradient selectat, deschideți fereastra de culori (Alt + Shift + F9) pentru a edita culorile.

Aplicați aceste setări în gradient:

  • Specimenul din stânga gradientului este o umplutură albă, la 0% Alpha.
  • Dați clic chiar sub mijlocul gradientului, pentru a adăuga un specimen de mijloc. Faceți o umplere albă, la 50% Alpha.
  • Specimenul din partea dreaptă a gradientului este o umplutură albă, la 0% Alpha.

Bacsis: Pentru a edita o culoare a unui swatch de gradient, faceți dublu clic pe specimenul.

Aveți acum un gradient alb slab și estompat în stânga scenei.

Acum trebuie să adăugăm un al doilea cadru cheie la cronologie, astfel încât să putem anima acest gradient. Faceți clic pe ultimul cadru al stratului "strălucire" (cadru 88) și introduceți un cadru cheie cu F6.

Suntem gata să aplicăm o adăugare la acest gradient.

Faceți clic dreapta oriunde pe stratul de "strălucire" dintre cele două cadre cheie și alegeți Creare formă tween.

Acum avem o formă de tween pe stratul din linia temporală.

Pentru a vedea efectiv mișcarea cu gradientul, trebuie să editați al doilea cadru cheie. Faceți clic pe cadrul cheie din linia temporală.

Gradientul este acum selectat. Utilizați tasta săgeată dreapta pentru a muta gradientul spre partea dreaptă a scenei.

Bacsis: Pentru a face acest lucru rapid, țineți apăsată tasta SHIFT când apăsați tasta săgeată dreapta. Aceasta va muta forma în creșteri de 10 pixeli.

Gradientul se află acum pe partea dreaptă a scenei. Acum avem acest lucru pe cel de-al doilea cadru cheie din cronologie.

Închideți acum stratul de "strălucire" și asigurați-vă că stratul de "strălucire" și stratul "mască1" inferior sunt vizibile.

Acum puteți previzualiza animația folosind tasta ENTER.

Animația de pe acest strat arată astfel.


Pasul 18: Adăugați cel de-al doilea strălucitor animat

Selectați stratul de jos "mask1" și adăugați un strat nou utilizând butonul Nou strat.

Faceți dublu clic pe stratul nou și denumiți-l "estompează".

Faceți clic dreapta pe partea superioară a stratului "mask1" și transformați-o într-o mască.

Deblocați acum stratul "fade". Aici vom adăuga următorul efect de strălucire.

Selectați instrumentul dreptunghi (R). Setați cursa la zero și faceți umplerea neagră.

Desenați un dreptunghi ușor mai lată decât scena și cu o înălțime de 174.

Poziționați dreptunghiul chiar deasupra scenei.

Selectați Instrumentul de selecție (V) din unelte.

Plasați mouse-ul peste marginea inferioară a formei negre. Veți vedea o linie curbată punctată sub cursor, ceea ce înseamnă că puteți edita forma vectorului.

Faceți clic și trageți ușor marginea inferioară, iar acum veți avea o formă concavă.

Acum, selectați Instrumentul de selecție (A) din unelte.

Faceți clic pe colțul din dreapta jos al formei negre. Punctul bezier va fi negru, ceea ce înseamnă că acesta este editat. De asemenea, puteți vedea mânerele de control care modifică curbele acestei forme ...

Faceți clic pe mânerul curbei și trageți-l în jos pentru a produce această formă.

Acum faceți clic pe mânerul pentru colțul din stânga.

Trageți-o în sus și spre dreapta pentru a produce această formă.

Observați că curba se suprapune cu ușurință. Utilizați instrumentul de selectare (V) pentru a muta forma în sus, astfel încât să nu acopere etapa.

Selectați forma și dați-i un gradient de umplere prin alegerea umplerii standard negru-alb.

Acesta este rezultatul nostru.

Selectați instrumentul de transformare a gradientului (F) și faceți clic pe forma gradientului.

Utilizați mânerele pentru controlul gradientului pentru ao roti și o stoarceți vertical.

Deschide fereastra de culori (Alt + Shift + F9) pentru a edita culorile gradientului.

Deplasați împreună cele două valori de gradient și setați următoarele:

  • Specimenul din stânga gradientului este o umplutură albă, la 0% Alpha.
  • Specimenul din partea dreaptă a gradientului este o umplutură albă, la 50% Alpha.

Acesta este acum rezultatul nostru.

În linia temporală a stratului "fade", introduceți acum un cadru cheie (F6) pe cadrul 48.

Introduceți o cheie cheie (F7) pe cadrul 49.

Faceți clic dreapta oriunde între primele două cadre cheie și selectați Creare formă tween.

Acum avem acest lucru pe stratul "fade".

Selectați al doilea cadru cheie din linia temporală.

Folosind instrumentul de selecție (V), mutați forma în josul fundului etapei ...

Bacsis: Observați că doar partea albă a gradientului este în afara fundului scenei. Zona transparentă nu este vizibilă.

Acum blocați stratul "fade" și redați animația folosind tasta ENTER. Veți vedea acest lucru:

Acum, asigurați-vă că toate straturile sunt blocate și faceți toate acestea vizibile.

Acum când jucați animația, veți vedea acest lucru:

Aproape am terminat! Tot ce trebuie să facem este să adăugăm animațiile sclipici.


Pasul 19: Adăugați prima evidențiere a scântei

Faceți clic pe stratul "Mask1" de sus.

Acum adăugați trei straturi folosind butonul Nou strat.

Denumiți-le "scânteie" 1, 2 și 3.

Introduceți cadre cheie pe aceste trei straturi noi.

  • Sparkle 1 are un cadru cheie pe cadrul 33.
  • Sparkle 2 are un cadru cheie pe cadrul 43.
  • Stratul Sparkle 3 are o cheie cheie pe cadrul 53.

Pe cadranul cheie din stratul "sparkle1", vom trasa o linie roșie. Faceți clic pe Instrumentul Linie (N) și trageți o linie așa cum apare aici.

Faceți clic pe linia roșie cu Instrumentul de selecție (V) și convertiți-l într-un simbol cu ​​Modify> Convert to Symbol (F8).

Asigurați-vă că este un film Clip și numește-l "sparkleMove".

Acum, faceți dublu clic pe noul videoclip pentru ao edita în context.

Denumiți "referință" "Layer 1" făcând dublu clic pe numele stratului. Apoi creați un strat nou și numiți-l "scânteie".

Acum extindeți cadrele făcând clic pe cadrele 25 pe ambele straturi, apoi faceți clic dreapta și selectați Inserare cadru (F5).

Blocați stratul de referință și desenați un pătrat fără curgere și o umplutură neagră pe stratul de strălucire.

Rotiți pătratul negru la 90 de grade cu instrumentul Transformare liberă (Q).

Folosind Instrumentul de Selecție (V), rotiți mouse-ul peste fiecare parte a pătratului, faceți clic și trageți marginile, creând arce subtile. Rezultatul tău este o mică formă a starburst.

Faceți clic pe formă și alocați-i gradientul radial de culoare alb-negru implicit din Umpleri.

Apropiați camera cu Zoom Tool (Z). Apoi selectați instrumentul de transformare a gradientului (F). Faceți clic pe starburst pentru ao edita.

Deschide fereastra de culori (Alt + Shift + F9) pentru a edita culorile gradientului.

Aplicați aceste setări la gradientul radial:

  • Specimenul din stânga gradientului este o umplutură albă, la 65% Alpha.
  • Specimenul din partea dreaptă a gradientului este o umplutură albă, la 0% Alpha.

Rezultatul este acesta.

Faceți clic pe această formă cu Instrumentul de selecție (V) și convertiți-l într-un simbol cu ​​Modify> Convert to Symbol (F8). Asigurați-vă că punctul de înregistrare este în centru și denumiți-l "scânteie".

Micșorați și centrați clema strălucitoare peste marginea din stânga a liniei roșii.

Introduceți un cadru cheie pe stratul "scânteie" pe cadrul 25.

În acest nou keyframe, utilizați Instrumentul de transformare liberă (Q) pentru a roti forma de izbucnire a stelei la 90 de grade spre dreapta. Utilizați, de asemenea, Instrumentul de selecție pentru a muta forma și pentru ao centra în partea dreaptă a liniei.

Faceți clic dreapta pe cele două cadre cheie din acest strat și selectați "Creare Clasic Tween".

Acum puteți viziona animația. Veți vedea că steaua se mișcă și se rotește din partea stângă spre dreapta.

Deblocați stratul de referință și setați culoarea cursei la un nivel alfa de zero.

Acum, blocați stratul de referință și faceți clic pe stratul "scânteie" pentru ao edita.

Introduceți cadrele cheie pe cadrele 6 și 20.

Pe cadrul 1, dați clic pe movieclipul cu stea. În Proprietăți, sub Color Effect, alegeți Alpha din lista derulantă Style. Setați Alpha la zero.

Faceți același lucru pe cadrul 25.

Acum izbucnirea starburstului se estompează în timp ce se mișcă pe scenă. De asemenea, se estompează.

Reveniți la nivelul masterClip făcând dublu clic pe etapa.

Faceți clic pe butonul de vizualizare a conturului de pe stratul "sparkle1" și introduceți o cheie cheie neagră (F7) pe cadrul 59.

Puneți straturile de strălucire 2 și 3 și în vederea conturului.

În stratul "sparkle2", introduceți o cheie cheie (F7) pe cadrul 69.

În stratul "sparkle3", introduceți o cheie cheie (F7) pe cadrul 79.


Pasul 20: Adăugați ultimele două scânteiere

Copiați și lipiți clipul sparkleMove la celelalte două straturi.

Pentru că suntem în prezent în modul de schiță, este ușor să plasați animațiile acolo unde trebuie. Linia arată durata animației și o vom folosi ca referință. Deoarece aceste animații cu strălucire ar trebui să fie mici, scoateți-le pe marginile textului.

Plasați clipul "scânteie" în stratul "sparkle2" sub literele L și E.

Așezați clema de tip sparkleMove pe stratul "sparkle3" deasupra literelor T și E.

Acum, când publicați animația (CTRL + ENTER), veți vedea următoarele:


Concluzie

Și am terminat! Lucrul grozav despre această configurație este că este extrem de ușor să editați această animație. Pentru a schimba conținutul de tip, fontul etc., trebuie doar să editați sourceText film clip în bibliotecă și tweak locația scânteie clipuri video. Redați-vă cu culorile fiecărui element pen

Cod