Glassify din tekst med Flash Filters - Basix
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil du bli konvertere teksten å gi den en glass-lignende effekt, ved hjelp av filtre i Flash. Denne teknikken fungerer også på vektorgrafikk. Vi vil oppnå det med en ganske enkel metode for å overliggende flere lag med ulike effekter.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot. Dette er en SWF-fil og teksten nedenfor er valgbar, så gå videre, velger glass teksten for å se et glass-aktig høydepunkt:
Trinn 1: Lag din tekst Feltet
Åpne din versjon av Flash og åpne en ny Flash-fil. Action versjon spiller ingen rolle for denne opplæringen, så det er ingen kode. I filen, sette et tekstfelt på scenen. For å gjøre dette, klikker du på tekstknappen (T) på Verktøy-menyen og dra et rektangel på scenen som vist på bildet under:
Trinn 2: Velg en stor og fet skrift
< p> Når trekkes, kan du skrive inn ditt valg av teksten i feltet og angi egenskapene deretter. Glasset effekten er mer fremtredende på større og dristigere skrifter så jeg har valgt Elephant her, men du kan velge en font du liker. Klikk på valgbar knappen for å gjøre teksten valgbar i finalen SWF. Fargen på skriften ikke saken her
Trinn 3: Legg Enkelte Vector Graphics
Eventuelt kan det være lurt å se hvordan effekten fungerer på vektorgrafikk. Så jeg vil bare trekke en liten grafisk ved hjelp av enkel Flash tegneverktøy. Merk at glass effekten vil ikke ta hensyn til de skisserer eller farger, så vanlig gamle grafikk i én farge er nok for øyeblikket. Når dette er gjort med trinn 1 og 2, vil du ha noe som dette på scenen:
Du kan importere vektorgrafikk til Flash overflaten også, men ta oppmerksom på at fargeforskjeller er ikke oppdaget av denne effekten
.
Trinn 4: Konverter Alt til en Symbol
Nå skal vi lage vår første symbol. Velg tekst og alle vektorgrafikk (du kan gjøre det ved å dra et rektangel rundt alt). Med alle ting valgt, høyreklikk og klikk på " Convert to Symbol " som vist nedenfor:
Navnet ditt symbol som noe du liker og sette sitt slag til Movie Clip; Jeg har kalt det som " gtext ". Så når du klikker på vinduet og åpne bibliotekvinduet, kan du vise et element som heter gtext der inne. Herfra på, vil jeg henvise til dette symbolet som " gtext ". Dette vil være et godt poeng å lagre arbeidet ditt
Trinn 5:. Konverter til Symbol Igjen
Igjen, høyreklikk den nyopprettede gtext symbol og konvertere til symbol, denne gangen skriver du inn navnet som " glass ". Vi gjør dette for å skape en annen container film.
Nå vil vi ha et glass symbol, innenfor der har vi en gtext symbol. Begge disse symbolene er synlige i biblioteket.
Nå dobbeltklikker du på glass symbolet for å vise den i redigeringsmodus. Alle de resterende trinnene vil bli utført i løpet av denne glass symbol
Trinn 6:. Legg et lag
Dobbeltklikk på blå firkant-ikonet ved siden av glass symbol i biblioteket panelet (Vindu > Library). Dette vil åpne glass symbol i redigeringsmodus. Vi har ett lag som heter Layer 1 i dette vinduet. Legg et nytt lag ved å klikke på Ny Layer-knappen i nedre venstre hjørne av tidslinjen vinduet. Klikk og hold museknappen over det nye laget å begynne å dra den og dra dette nye laget til under vår nåværende Layer 1. Gi den nye lag til " bakgrunnen " ved å dobbeltklikke lagnavnet
Trinn 7:. Legg en farget bakgrunn
Det kan hende du vil skjule eller låse Layer 1 for å kunne redigere bakgrunnslaget lett. Klikk på prikk under øyet /lås-ikonet i tidslinjen for å gjøre det. Nå velger bakgrunnslaget i tidslinjen, og klikk på rektangelverktøyet fra verktøy panel; satt omrisset til null og farge til blå i Properties panelet som vist på bildet nedenfor. Jeg har valgt hjørne avrunding i tillegg til å gjøre min rektangel se bedre.
TIPS: Du kan også bruke et bilde for bakgrunnen her, i stedet for en vanlig fylle
Trinn 8:. Lag tre Flere lag
Mens du redigerer glasset symbol, i tidslinjen panel, klikker du på New Layer-knappen tre ganger for å opprette tre nye lag. Du har nå fem lag: bakgrunnslaget, lag 1 og tre nye lag. Rename Layer 1 til bevel2 og de andre nye lag til skygge Fra Properties panelet, merk x- og y-koordinatene gtext allerede plassert på scenen som nå er på bevel2 lag ved x = 75 og y = 10 for min tegning. Neste låse alle lagene bortsett fra den du jobber med (ved å klikke på prikk under lås i tidslinjen vindu) for å være sikker på at du ikke flytter rundt på ting ved et uhell. Du kan skjule noen lag så vel ved å klikke på prikk under øyet i tidslinjen vinduet. Velg bevel2 lag, åpner biblioteket panelet og dra gtext Når plassert på scenen, Klikk på den nye gtext symbol for å velge det og sette x og y posisjon i panelet Egenskaper > tab posisjon til å være nøyaktig det samme som i forrige lag, som var på x = 75 og y = 10 for filmen min. Når dette er gjort med posisjonering, låse nåværende lag så det er ikke endret i vanvare. Gjenta de to siste trinn (trinn 6 og trinn 7) for de resterende to lagene så på slutten, hver av de fire lagene vil ha samme element plassert på de samme koordinater. Bildet under viser at ved å angi koordinatene akkurat i egenskapsboksen, vi har ingen overlappende kanter Lås og skjule alle lag (ved å klikke prikker under øyet og låsen i tidslinjen) og låse opp og vise bare skygge Juster skrå innstillingene til Blur = 20px, Strength = 80%, Angle = 90-graders;, Avstand = 10px, og merk mot Knockout. Hvis du ønsker å bruke justeringen på en mindre skala, med mindre tekst, kan du endre Blur og avstand Properties i forhold, men generelt vil Blur under 10px ikke være egnet Lås og skjule alle andre lag og låse opp og viser bare omrisset lag. Velg gtext Lås og skjule alle andre lag og låse opp og viser bare omrisset lag. Velg gtext Lås og skjule alle andre lag og låse opp og vise bare disposisjon Velg gtext Avslør alle lagene og teste filmen i Flash, vil sluttresultatet være noe som ligner på filmen vist under Filmen ser ikke altfor imponerende med akkurat den teksten. La oss endre teksten litt; gå til Vindu > Bibliotek og dobbeltklikker på ikonet ved siden av gtext Resultatet kan sees ved å eksportere SWF. Vi kan endre mengden av synlig refleksjon på glass som vi ønsker. Lås opp skygge Ah, men sollys er gul, ikke hvit. Vi kan endre refleksjon lys farge ved å redigere filterinnstillingene for skygge Hvis du vil endre fargen på glasset selv, begynner du med en gang velge Bevel filter i skygge TIPS:.. Du kan også være lurt å endre skyggen farge og bakgrunn for å matche disse innstillingene Så vi nå har to symboler i vårt bibliotek. Den ene er glass Hvorfor ikke prøve deg på å lage en JSFL script som automatisk kan legge til Glassify effekt på noen av dine vektor symboler med et enkelt klikk? Anmeldelser
, disposisjon
, bevel1
, og bevel2
som vist under (du kan endre navn lagene ved å dobbeltklikke på navnene deres)
Trinn 9:. Sett inn symbol på et nytt lag
på scenen
Trinn 10:. Sett koordinatene til Symbol
Trinn 11: Plasser en kopi på alle 4 Layers
Trinn 12:. Påfør Bevel Filter til Shade Layer
lag. Velg gtext
symbol på dette laget og åpne panelet Egenskaper. I egenskapene, utvide " filtre " Kategorien hvis minimert. Nederst i venstre hjørne er det en en Add Filter-knappen; Klikk på denne og velg Bevel filter.
Trinn 13: Juster Bevel Filter Settings
Trinn 14.: Outline Layer Påfør Glow Filter
symbol på dette laget, åpne fanen Filtre i Properties panelet og legge en Glow filter. Angi glød filteregenskapene til Blur = 2px, Strength = 50%; sette farge til hvit og sjekke det indre og Knockout alternativer. Dette er vist på bildet under, og du kan se den resulterende omrisset samt
Trinn 15:. Bevel1 Layer Påfør Bevel Filter
symbol på dette laget, åpne kategorien Filter i Properties panelet og legge til en annen Bevel filter. Angi skråfilteregenskapene til Blur = 2px, Angle til 69-graders;, Avstand til 1px, og sjekk Knockout alternativet. Dette er demonstrert i bildet nedenfor
Trinn 16:. Bevel2 Layer Påfør Bevel Filter
lag. Velg gtext
symbol på dette laget, åpne kategorien Filter i Properties panelet og legge en mer Bevel filter. Angi skråfilteregenskapene til Blur = 6PX, Strength = 45%, Angle til 45-graders;, Avstand til 2PX og igjen sjekk Knockout alternativet. Dette er vist i bildet nedenfor
Trinn 17:. Shade Layer Legg Shadow
symbol eksempel i skyggen lag, låse alle andre lag slik at de ikke blir forstyrret. I panelet Egenskaper velg kategorien Filter, og legge til en Shadow filter i tillegg til den eksisterende fas. Still Blur til 0px, Styrke til 150%, Angle til en verdi avhengig av hvor du vil at solen og avstanden til å være (prøv mellom 10px og 20px). Innstillingene og sluttresultatet er synlig i bildet nedenfor
Trinn 18:. Teste din første versjon
Trinn 19:. Tweaking Din gtext
symbol for å redigere den i visningsruten. Nå er det opp til deg å endre elementer innenfor dette symbolet. For eksempel kan du legge til nye tekstfelt med forskjellige skriftstørrelser, legge til flere grafikk eller animasjoner. Jeg har gjort litt av å spille med gtext Hotell og lagt til et par ting, inkludert ulike fonter, rektangler, animert grafikk med å endre form, et fett stiplet linje og et par grafikk med alfaverdi på 50%. Her er hva jeg har på tegnebrettet i gtext
symbol
Trinn 20: Endre Refleksjon Beløp
lag og låse alle andre lag. Velg gtext
på dette laget, og klikk på " Color Effect " fanen i Egenskaper-panelet. Velg Lysstyrke
fra rullegardinmenyen og endre beløpet til rundt -30; Dette vil redusere mengden av refleksjonen fra glassoverflaten. Følgende bilde viser før og etter at effekten av å gjøre det:
Trinn 21: Endre Reflection Color
lag. Angre endringen lysstyrken fra forrige trinn ved å endre stilen i Color Effect tilbake til ingen
. Hold gtext
på skygge
laget valgt som i dette trinnet, velg deretter kategorien Filter, modifisere Uthev fargen på skrå filter til gult og sette Alpha til 60%.
Trinn 22: Endre farge of Glass
lag som i foregående trinn. Denne gangen i stedet for å endre Uthev, modifisere Shadow eiendommen for å velge farge. For den beste fargeeffekt, matche høylys og skygge farger tett med en god skygge variant: med en gul høydepunkt jeg kan velge mellom alle nyanser av gult, oransje, grønn eller rød uten å gjøre mitt glass ser urealistisk. Nok en gang stiller Alpha verdi som i forrige trinn til noe i nærheten av 50% i henhold til fargen din. Jeg har valgt 50% rødt her
Konklusjon
symbol og andre er gtext
symbol. Glass symbol kan redigeres for å endre glass egenskaper mens gtext symbol kan endres for å endre innholdet som skal glassified. Du kan dra og slippe glasset symbol i alle Flash animasjon av ditt eget valg å bruke denne effekten og endre innholdet i gtext tilsvarende. Kort sagt har du en fin og hendig glassifier komponent for hånden. Jeg vil anbefale deg å leke seg med innstillingene og slå av lag eller legge til nye lag for å se hvordan du kan tilpasse dette glasset.