Share
În acest tutorial vă veți transforma textul pentru a da un efect de sticlă, folosind filtre în Flash. Această tehnică funcționează și pe grafica vectorială. O vom realiza printr-o metodă destul de simplă de suprapunere a mai multor straturi cu efecte diferite.
Să aruncăm o privire asupra rezultatului final la care vom lucra. Acesta este un fișier swf și textul de mai jos este selectabil, deci mergeți mai departe, selectați textul de sticlă pentru a vedea un aspect de sticlă:
Deschideți versiunea dvs. Flash și deschideți un nou fișier Flash. Versiunea ActionScript nu contează pentru acest tutorial, deoarece nu există cod. În fișierul dvs., puneți un câmp text pe scenă. Pentru a face acest lucru, faceți clic pe butonul de text (T) din meniul Instrumente și trageți un dreptunghi pe scenă după cum se arată în imaginea de mai jos:
După tragere, puteți introduce textul în câmp și puteți seta proprietățile acestuia în mod corespunzător. Efectul de sticlă este mai proeminent pe fonturi mai mari și mai îndrăznețe, așa că am ales Elephant aici, dar puteți alege orice font doriți. Faceți clic pe butonul Selectabil pentru a selecta textul în SWF finală. Culoarea fontului nu contează aici
Opțional, poate doriți să vedeți cum funcționează efectul asupra graficii vectoriale. Deci, voi desena doar un mic grafic cu ajutorul instrumentului de bază de desen Flash. Rețineți că efectul de sticlă nu va lua în considerare contururile sau culorile, astfel încât grafica veche simplă într-o singură culoare este suficientă pentru moment. După ce ați terminat cu pașii 1 și 2, veți avea ceva de genul ăsta pe scenă:
Puteți importa grafice vectoriale pe suprafața Flash, dar luați notă că diferențele de culoare nu sunt detectate de acest efect.
Acum vom crea primul nostru simbol. Selectați textul și toate graficele vectoriale (puteți face acest lucru trăgând un dreptunghi în jurul valorii de tot). Cu toate lucrurile selectate, faceți clic dreapta și faceți clic pe "Conversia la simbol" după cum se arată mai jos:
Denumiți-vă simbolul ca pe orice doriți și setați tipul acestuia la Film Clip; Am numit-o ca "gtext". Deci, când faceți clic pe fereastră și deschideți fereastra bibliotecii, puteți vizualiza un element numit gtext acolo. De aici încoace, mă voi referi la acest simbol ca la "gtext". Acesta va fi un punct bun pentru a vă salva munca.
Încă o dată, dați clic dreapta pe simbolul nou creat și convertiți la simbol, de această dată introduceți numele ca "sticlă". Facem acest lucru pentru a crea un alt film pentru containere.
Acum vom avea un simbol de sticlă, în cadrul căruia avem un simbol gtext. Ambele simboluri sunt vizibile în bibliotecă.
Acum faceți dublu clic pe simbolul de sticlă pentru al vizualiza în modul de editare. Toți pașii rămași vor fi executați în acest simbol de sticlă.
Faceți dublu clic pe pictograma pătrată albastră de lângă simbolul de sticlă din panoul bibliotecii (Fereastră> Bibliotecă). Aceasta va deschide simbolul de sticlă în modul de editare. Avem un strat numit Layer 1 în această fereastră. Adăugați un nou strat făcând clic pe butonul Strat nou în colțul din stânga-jos al ferestrei cronologie. Faceți clic și țineți apăsat butonul mouse-ului peste stratul nou pentru a începe să îl trageți și trageți acest strat nou sub nivelul actual al layerului 1. Redenumiți noul strat pe "fundal" făcând dublu clic pe numele stratului.
Poate doriți să ascundeți sau să blocați stratul 1 pentru a putea edita cu ușurință stratul de fundal. Faceți clic pe punctul de sub pictograma ochi / blocare în cronologie pentru a face acest lucru. Acum, selectați stratul de fundal din cronologie și faceți clic pe instrumentul Rectangle din panoul de instrumente; setați conturul la nulă și culoarea spre albastru în panoul Proprietăți, după cum se arată în imaginea de mai jos. Am selectat și rotunjirea colțurilor pentru a face dreptunghiul meu să arate mai bine.
BACSIS: De asemenea, puteți utiliza o imagine pentru fundal aici, în loc de o umplere simplă.
În timpul editării simbolului de sticlă, în panoul temporal, faceți clic de trei ori pe butonul Strat nou pentru a crea trei straturi noi. Aveți acum cinci straturi: stratul de fundal, stratul 1 și trei straturi noi. Redenumiți layerul 1 la bevel2 și celelalte straturi noi umbră, contur, bevel1, și bevel2 după cum se arată mai jos (puteți redenumi straturile făcând dublu clic pe numele acestora).
Din panoul Proprietăți, rețineți coordonatele x și y din gtext deja plasat pe scena, care este acum pe bevel2 strat la x = 75 și y = 10 pentru desenul meu.
În continuare, blocați toate straturile, cu excepția celei pe care lucrați (făcând clic pe punctul de sub fereastra de blocare din fereastra de timp) pentru a vă asigura că nu mutați lucrurile în jur. Puteți ascunde și câteva straturi făcând clic pe punctul de sub ochi în fereastra cronologică. Selectați bevel2 strat, deschideți panoul bibliotecii și trageți gtext pe scenă.
Odată plasat pe scenă, faceți clic pe noul gtext simbolul pentru ao selecta și a seta pozițiile x și y în panoul Proprietăți> fila poziției pentru a fi exact la fel ca în stratul anterior, care era la x = 75 și y = 10 pentru filmul meu.
După ce ați terminat cu poziționarea, blocați stratul curent, astfel încât acesta să nu se schimbe accidental.
Repetați cei doi pași de mai sus (Pasul 6 și Pasul 7) pentru celelalte două straturi, astfel încât la sfârșit, fiecare dintre cele patru straturi să aibă același element plasat la aceleași coordonate. Imaginea de mai jos arată că, prin specificarea coordonatelor exact în caseta de proprietăți, nu avem marginile care se suprapun.
Blocați și ascundeți toate straturile (făcând clic pe punctele de sub ochi și blocând linia temporală) și deblocați și afișați numai umbră strat. Selectează gtext simbol pe acest strat și deschideți panoul Proprietăți. În proprietăți, extindeți fila "filtre" dacă este minimizată. În colțul din stânga jos, există un buton Adăugare filtru; faceți clic pe acesta și selectați filtrul Bevel.
Reglați setările Bevel la Blur = 20px, Forța = 80%, Unghiul = 90 °, Distanța = 10px și bifați caseta împotriva Knockout. Dacă doriți să aplicați ajustarea la o scară mai mică, cu text mai mic, puteți modifica Blur și distanța Proprietăți în proporție, dar, în general, Blur sub 10px nu va fi potrivit.
Blocați și ascundeți toate celelalte straturi și deblocați și afișați numai stratul conturului. Selectează gtext pe acest strat, deschideți fila Filtre din panoul Proprietăți și adăugați un filtru Glow. Setați proprietățile filtrului strălucitor la Blur = 2px, Forța = 50%; setați Culoarea la alb și verificați opțiunile Inner și Knockout. Acest lucru este arătat în imaginea de mai jos și puteți vedea și conturul rezultat.
Blocați și ascundeți toate celelalte straturi și deblocați și afișați numai stratul conturului. Selectează gtext simbol pe acest strat, deschideți fila Filtre din panoul Proprietăți și adăugați un alt filtru Bevel. Setați proprietățile filtrului înclinat la Blur = 2px, Angle la 69 °, Distanță până la 1px și verificați opțiunea Knockout. Acest lucru este demonstrat în imaginea de mai jos.
Blocați și ascundeți toate celelalte straturi și deblocați și afișați numai contur strat. Selectează gtext pe acest strat, deschideți fila Filtre din panoul Proprietăți și adăugați încă un filtru Bevel. Setați proprietățile filtrului înclinat la Blur = 6px, Forța = 45%, Unghi până la 45 °, Distanță până la 2px și verificați din nou opțiunea Knockout. Acest lucru este prezentat în imaginea de mai jos.
Selectează gtext simbol în instanță umbră strat, blocați toate celelalte straturi astfel încât acestea să nu fie deranjate. În panoul Proprietăți, selectați fila Filtre și adăugați un filtru Umbre în plus față de teșitura existentă. Setați Blur la 0px, Forța de rezistență la 150%, Angle la orice valoare, în funcție de locul în care doriți soarele și distanța de a fi (încercați între 10px și 20px). Setările și rezultatul final sunt vizibile în imaginea de mai jos.
Revelați toate straturile și testați-vă filmul în Flash, rezultatul final fiind ceva similar cu filmul prezentat mai jos.
Filmul nu arată prea impresionant doar cu acel text. Să schimbăm puțin textul; accesați fereastra> Bibliotecă și faceți dublu clic pe pictograma de lângă gtext simbol pentru al edita în panoul Vizualizare. Acum, depinde de dvs. să modificați elementele din acest simbol. De exemplu, puteți adăuga câmpuri text noi cu dimensiuni diferite de fonturi, adăugați mai multe grafice sau animații. Am făcut un pic de joc cu gtext și a adăugat câteva lucruri, inclusiv fonturi diferite, dreptunghiuri, grafică animată cu formă în schimbare, linie grasă punctată și câteva grafice cu valoare alfa la 50%. Iată ce am pe desenul interior gtext simbol.
Rezultatul final poate fi văzut prin exportul SWF:
Putem schimba cantitatea de reflexie vizibilă pe sticlă așa cum dorim. Deblocați umbră strat și blocați toate celelalte straturi. Selectează gtext pe acest strat și faceți clic pe fila "Color Effect" în panoul Properties. Selectați strălucire din meniul derulant și modificați valoarea la aproximativ -30; acest lucru va reduce cantitatea de reflexie de pe suprafața de sticlă. Următoarea imagine prezintă efectele anterioare și ulterioare:
Ah, dar lumina soarelui este galbenă, nu albă. Putem schimba culoarea luminii de reflecție editând setările pentru filtru pentru umbră strat. Renunțați la schimbarea luminozității de la pasul anterior schimbând stilul din Color Effect înapoi la nici unul. Păstrează gtext pe umbră selectați stratul selectat ca în acel pas, apoi selectați fila Filtru, modificați Culoarea evidențierii filtrului înclinat spre galben și setați valoarea Alpha la 60%.
Pentru a schimba culoarea sticlei în sine, începeți din nou selectând filtrul Bevel din umbră ca în etapa anterioară. De data aceasta, în loc să schimbați Evidențiați, modificați proprietatea Shadow pentru a selecta culoarea. Pentru cel mai bun efect de culoare, potriviți îndeaproape culorile Highlight și Shadow cu o variație bună a nuanței: cu o lumină galbenă pot alege între orice nuanță galbenă, portocalie, verde sau chiar roșie, fără a face ca geamul să arate nerealist. Încă o dată, setați valoarea Alpha ca în pasul anterior la ceva aproape de 50%, în funcție de culoarea dvs. Am ales 50% roșu aici.
BACSIS: este posibil să doriți și să modificați culoarea și fundalul umbrelor pentru a se potrivi cu aceste setări.
Așa că acum avem două simboluri în biblioteca noastră. Unul este sticlă simbol și altele este gtext simbol. Simbolul de sticlă poate fi modificat pentru a modifica proprietățile sticlei, în timp ce simbolul gtext poate fi modificat pentru a schimba conținutul care urmează să fie sticlosificat. Puteți să trageți și să aruncați simbolul de sticlă în orice animație Flash de la alegerea dvs. pentru a reutiliza acest efect și pentru a schimba conținutul textului în mod corespunzător. Pe scurt, aveți o componentă de sticlă plăcută și la îndemână la îndemână. Vă recomandăm să jucați cu setările și să dezactivați straturile sau să adăugați straturi noi pentru a vedea cum puteți personaliza mai mult acest geam.
De ce nu încercați să faceți o lucrare JSFL care poate adăuga automat efectul Glassify la oricare dintre simbolurile dvs. vectoriale cu un singur clic?
Accentsconagua