Share
I denne opplæringen konverterer du teksten din for å gi den en glasslignende effekt, ved hjelp av filtre i Flash. Denne teknikken fungerer også på vektorgrafik. Vi vil oppnå det med en ganske enkel metode for overlagring av flere lag med forskjellige effekter.
La oss se på det endelige resultatet vi skal jobbe for. Dette er en swf-fil, og teksten nedenfor er valgbar, så velg glasset for å se et glasslignende høydepunkt:
Åpne din versjon av Flash og åpne en ny Flash-fil. ActionScript-versjonen har ingen betydning for denne opplæringen, siden det ikke er noen kode. I din fil, legg et tekstfelt på scenen. For å gjøre det, klikk på tekstknappen (T) på Verktøy-menyen og dra et rektangel på scenen som vist på bildet nedenfor:
Når du har tegnet, kan du skrive inn ditt valg av tekst i feltet og angi egenskapene tilsvarende. Glass-effekten er mer fremtredende på større og dypere skrifter, så jeg har valgt Elephant her, men du kan velge hvilken som helst skrifttype du liker. Klikk på Selectable-knappen for å gjøre teksten valgbar i endelig SWF. Skriftens farge er ikke viktig her
Eventuelt vil du kanskje se hvordan effekten fungerer på vektorgrafikk. Så jeg vil bare tegne en liten grafikk ved hjelp av grunnleggende Flash tegneverktøy. Vær oppmerksom på at glass-effekten ikke tar hensyn til konturene eller farger, så det er nok for gammel grafikk i en enkelt farge for øyeblikket. Når du er ferdig med trinn 1 og 2, vil du ha noe slikt på scenen din:
Du kan også importere vektorgrafik til Flash-overflate, men ta i betraktning at fargevariasjoner ikke oppdages av denne effekten.
Nå lager vi vårt første symbol. Velg tekst og alle vektorgrafik (du kan gjøre det ved å dra et rektangel rundt alt). Med alle valgte ting, høyreklikk og klikk på "Konverter til symbol" som vist nedenfor:
Gi symbolet ditt navn som alt du liker og sett det til Filmklipp; Jeg har kalt det som "gtext". Så når du klikker på vinduet og åpner biblioteksvinduet, kan du se et element som heter gtext der inne Herfra vil jeg referere til dette symbolet som "gtext". Dette vil være et godt poeng for å redde arbeidet ditt.
Høyreklikk på det nyopprettede GText-symbolet igjen og konverter til symbol, skriv inn navnet som "glass" denne gangen. Vi gjør dette for å skape en annen containerfilm.
Nå vil vi ha et glassymbol, der vi har et gteksymbol. Begge disse symbolene er synlige i biblioteket.
Dobbeltklikk nå glasssymbolet for å vise det i redigeringsmodus. Alle de resterende trinnene vil bli utført innenfor dette glasssymbolet.
Dobbeltklikk på det blå firkantikonet ved siden av glassymbolet i bibliotekspanelet (Vindu> Bibliotek). Dette vil åpne glasssymbolet i redigeringsmodus. Vi har ett lag kalt Lag 1 i dette vinduet. Legg til et nytt lag ved å klikke på Ny lag-knappen i nedre venstre hjørne av tidslinjevinduet. Klikk og hold museknappen over det nye laget for å begynne å dra det og dra dette nye laget til under vårt nåværende lag 1. Gi nytt navn til det nye laget til "bakgrunn" ved å dobbeltklikke lagnavnet.
Du vil kanskje gjemme eller låse Lag 1 for å kunne redigere bakgrunnslaget enkelt. Klikk på prikken under øye / låsikonet i tidslinjen for å gjøre det. Velg nå bakgrunnslaget på tidslinjen, og klikk på rektangulærverktøyet fra verktøylinjen. sett oversikten til null og farge til blå i Egenskaper panelet som vist på bildet nedenfor. Jeg har også valgt hjørneavrunding for å få min rektangel til å se bedre ut.
TIPS: Du kan også bruke et bilde for bakgrunnen her, i stedet for en vanlig fylling.
Mens du redigerer glasssymbolet, klikker du på New Layer-knappen tre ganger for å lage tre nye lag i tidslinjepanelet. Du har nå fem lag: bakgrunnslaget, lag 1 og tre nye lag. Gi nytt navn til lag 1 til bevel2 og de andre nye lagene til skygge, omriss, bevel1, og bevel2 som vist nedenfor (du kan gi nytt navn til lagene ved å dobbeltklikke på navnene deres).
Legg merke til x- og y-koordinatene for gtext allerede plassert på scenen som nå er på bevel2 lag ved x = 75 og y = 10 for tegningen min.
Deretter låser du alle lagene unntatt det du jobber med (ved å klikke prikken under låsen i tidslinjevinduet) for å sikre at du ikke beveger deg rundt ved et uhell. Du kan også skjule et par lag i tillegg ved å klikke på prikken under øyet i tidslinjevinduet. Å velge bevel2 lag, åpne bibliotekspanelet og dra gtext på scenen.
Når du er plassert på scenen, klikk på den nye gtext symbol for å velge det og angi sin x og y-posisjon i Egenskaper panel> Posisjonskategorien for å være nøyaktig det samme som i forrige lag, som var på x = 75 og y = 10 for min film.
Når du er ferdig med posisjonering, låser du det nåværende laget slik at det ikke ved et uhell blir endret.
Gjenta de ovennevnte to trinnene (trinn 6 og trinn 7) for de resterende to lagene, slik at hver ende av de fire lagene vil ha samme gjenstand plassert på de samme koordinatene. Bildet under viser at ved å spesifisere koordinatene nøyaktig i egenskapsboksen, har vi ingen overlappende kanter.
Lås og skjul alle lag (ved å klikke på prikkene under øyet og låsen i tidslinjen) og låse opp og vis bare skygge lag. Velg gtext symbol på dette laget og åpne Egenskaper panelet. I egenskapene, utvid fanen "filters" hvis den er minimert. Nederst til venstre er det en Add Filter-knapp; klikk dette og velg kommandofiltret.
Juster kantinnstillingene til Blur = 20px, Styrke = 80%, Vinkel = 90 °, Avstand = 10px, og merk av i boksen mot Knockout. Hvis du vil bruke justeringen i mindre skala, med mindre tekst, kan du endre uskarphet og avstandsegenskaper i forhold, men generelt vil uskarphet under 10 px ikke være egnet.
Lås og skjul alle andre lag og låse opp og vis bare disposisjonslaget. Velg gtext symbol på dette laget, åpne Filters-fanen i Egenskaper-panelet og legg til et Glow-filter. Angi glødfilteregenskapene til Blur = 2px, Styrke = 50%; sett fargen til hvit og sjekk alternativene Inner og Knockout. Dette er vist i bildet nedenfor, og du kan også se den resulterende omrisset.
Lås og skjul alle andre lag og låse opp og vis bare disposisjonslaget. Velg gtext symbol på dette laget, åpne Filters-fanen i Egenskaper-panelet og legg til et annet kommandofilter. Angi kantfiltreegenskapene til Blur = 2px, Vinkel til 69 °, Avstand til 1px, og sjekk Knockout-alternativet. Dette er vist i bildet nedenfor.
Lås og skjul alle andre lag og låse opp og vis bare omriss lag. Velg gtext symbol på dette laget, åpne Filtrer-fanen i Egenskaper-panelet og legg til ett ekstra kommandofilter. Angi avfallsfilteregenskapene til Blur = 6px, Styrke = 45%, Vinkel til 45 °, Avstand til 2px og en gang til, velg Knockout-alternativet. Dette er vist i bildet nedenfor.
Velg gtext symbol forekomst i skygge lag, lås alle andre lag slik at de ikke forstyrres. I panelet Egenskaper velger du kategorien Filtre og legger til et skyggefilter i tillegg til den eksisterende skråningen. Angi uskarphet til 0px, styrke til 150%, vinkel til hvilken som helst verdi avhengig av hvor du vil ha sol og avstand for å være (prøv mellom 10px og 20px). Innstillingene og sluttresultatet er synlige i bildet nedenfor.
Vis alle lagene og test filmen din i Flash, sluttresultatet blir noe som ligner på filmen vist nedenfor.
Filmen ser ikke så imponerende ut med bare den teksten. La oss endre teksten litt; gå til Vindu> Bibliotek og dobbeltklikk på ikonet ved siden av gtext symbol for å redigere det i Vis-panelet. Nå er det opp til deg å endre elementene i dette symbolet. For eksempel kan du legge til nye tekstfelter med forskjellige skriftstørrelser, legge til flere grafikk eller animasjoner. Jeg har gjort litt å leke med gtext og lagt til noen få ting, inkludert forskjellige skrifter, rektangler, animert grafikk med skiftende form, en fett stiplede linje og noen grafikk med alfa verdi på 50%. Her er det jeg har på tegnebrettet i gtext symbol.
Sluttresultatet kan sees ved å eksportere SWF:
Vi kan endre mengden synlig refleksjon på glasset som vi ønsker. Lås opp skygge lag og lås alle andre lag. Velg gtext på dette laget og klikk på "Fargeeffekt" -fanen i Egenskaper-panelet. Å velge lysstyrke fra rullegardinmenyen og endre beløpet til rundt -30; Dette vil redusere mengden refleksjon fra glassoverflaten. Følgende bilde viser før og etter effekt av det:
Ah, men sollys er gult, ikke hvitt. Vi kan endre refleksjonslysets farge ved å redigere filterinnstillingene for skygge lag. Løsne lysstyrkeendringen fra forrige trinn ved å endre stilen i fargeeffekt tilbake til ingen. Hold gtext på skygge lag valgt som i det trinnet, velg deretter Filter-fanen, endre Highlight-fargen på avfallsfilteret til gult og sett Alpha til 60%.
For å endre fargen på selve glasset, start ved å velge Endre filteret i skygge lag som i forrige trinn. Denne gangen i stedet for å endre høydepunktet, må du endre skyggeegenskapen for å velge fargen din. For den beste fargeeffekten, samsvarer høylys og skyggefargene tett med en god nyansevariation: med en gul høydepunkt kan jeg velge mellom hvilken som helst nyanse av gul, oransje, grønn eller rød, uten at glasset mitt blir urealistisk. Sett igjen Alpha-verdien som i forrige trinn til noe nær 50% i henhold til fargen din. Jeg har valgt 50% rød her.
TIPS: Du kan også endre skyggefarge og bakgrunn for å matche disse innstillingene.
Så vi har nå to symboler i vårt bibliotek. En er den glass symbol og annet er gtext symbol. Glass-symbolet kan redigeres for å endre glassegenskapene mens gtext-symbolet kan endres for å endre innholdet som skal glasseras. Du kan dra og slippe glasssymbolet i en hvilken som helst Flash-animasjon av eget valg for å gjenbruke denne effekten, og endre innholdet i teksten i samsvar med dette. Kort sagt, du har en fin og praktisk glassifier komponent for hånden. Jeg vil anbefale deg å leke med innstillingene og slå av lag eller legge til nye lag for å se hvordan du kan tilpasse dette glasset ytterligere.
Hvorfor ikke prøve hånden ved å lage et JSFL-skript som automatisk kan legge til Glassify-effekten til noen av vektorsymbolene dine med ett enkelt klikk?
Accentsconagua