Make Din Flash Logo Bling med Alpha Gradient Maske
to
Del
to
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble første gang utgitt i august 2009.
I denne opplæringen vil vi se på hvordan du kan lage en logo som inkorporerer alpha gradient maskering i sin animasjon. Jeg skal forklare noen tips og triks om hvordan du kan få det fungerer og unngå noen vanlige problemer.
Endelig resultat
Først en rask titt på hva Vi tar sikte på:
Innledning
Dette er et nybegynnernivå tutorial der vil jeg forklare i detalj hvordan du oppretter denne logoen og dens animasjon. Underveis vil jeg nevne noen ord om gradient maskering, bitmaps og former innenfor blits og Action det krever. I første omgang vil vi kort ta noen Photoshop teknikker, men de fleste bilderedigeringsprogrammet bør nok
La oss komme i gang
Trinn 1:.! Initial Design
Gjør sikker på at du starter ved å laste ned kildefilene. Åpne Logo.psd i zip-filen.
Du kan også laste ned og installere fonten som brukes i dette eksempelet, Lubalin Graph Fet. Dette er valgfritt, så når du åpner filen, vil Photoshop gi deg en advarsel om at skriften mangler, men for denne øvelsen kan du likevel følge med perfekt uten.
Åpning opp Logo.psd du bør se dette:
Som du ser, har vi en grå bakgrunnslaget og et tekstlag som heter "Text". Hvis du har Lubalin font installert vil du være i stand til å endre teksten til noe mer personlig, eller du kan endre skrift til din smak. Den grå bakgrunnen laget er veldig overfladisk og jeg valgte bare det å hjelpe til med å illustrere sluttresultatet
Trinn 2:. Hvis du ikke har Photoshop
(Du kan hoppe over dette trinn hvis du bruker Photoshop.)
Her vil jeg kort forklare lagstiler brukes i Photoshop, slik at de av dere som ønsker å kopiere logoen som ordrett som mulig har en sjanse til å gjøre det i ditt eget bilde redigering programvare. Det er ikke viktig at logoen ser like, men.
Ytre glød, gulaktig, størrelse 6 px.
Indre oppover bevel, størrelse 32 px, 21% dybde.
Contour, rett, 50% rekkevidde.
Texture, rett og slett en 4x4 pixel diagonal linje mønster.
Color overlay, # A84D4A på teksten.
Stroke, størrelse 2 px, farge # E5C477.
Forhåpentligvis vil dette gi deg en idé om hvordan å lage noe lignende. Igjen, det er ikke viktig for å få til å forstå teknikken forklart i denne opplæringen
Trinn 3:. Opprette Effect Outline
Før vi hopper inn i Flash kan vi like godt gjøre det en siste ting som trengs i Photoshop; det er å lage en disposisjon for den effekten vi er i ferd med å gjøre. Ikke bekymre deg hvis det ikke gir mening ennå, vil du se hele bildet veldig snart!
Ctrl-klikk på tekstlaget til å velge det
Gå til Velg >..; Inverse, eller trykk Shift + Ctrl + I
Gå til Velg > Endre > Utvide, velger 2 piksler, og trykk OK.
Du bør ende opp med dette.
Velg Outline lag og trykk "V" for å velge flytteverktøyet. Ved hjelp av tastaturet, justere omrisset slik at den sitter perfekt på toppen av den opprinnelige teksten, slik:.
Sørg for at disposisjonen er fullt hvit
Trinn 4: Eksportere bilder for Flash
Skjul Outline lag og bakgrunnslaget. Gå til "Save for web og enheter" og lagre som PNG-fil. Name it logo.png. Det skal se slik ut:
Deretter skjule Tekst laget og bringe tilbake Outline lag. Lagre som "outline.png". Det skal se slik ut:
Pass på at du lagrer så høy kvalitet, transparang aktivert PNG
Trinn 5:! Forberedelser i Flash
Start opp Flash og opprette en ny AS3 fil. Siden logoen vi skaper er 580 av 170 piksler i Photoshop, vil vi bruke de samme dimensjoner for vår Flash-fil. La FPS og bakgrunnsfargen som er.
Lag og navngi disse layers:
Shine
Mask
Outline
Logo
Background
Actions
Put dem i den rekkefølgen som står på listen, slik at "Handlinger" er på det laveste Z-nivå og "Shine" på det høyeste. Nå velger bakgrunnslaget og skape et rektangel som dekker scenen. Gjøre sin farge en gradient som går fra mørk grå (# 222222) til lys grå (#AAAAAA). Bruk Gradient Transform Tool (hurtigtast F) for å justere den slik:
Lås bakgrunnslaget som vi ikke skal endre det noe mer
Trinn 6:. Importere Logo til Flash
Velg Logo laget. Gå til Fil > Import > Import Stage, eller trykke Ctrl + R. Velg logo.png du tidligere har eksportert fra Photoshop. Bildet bør stille opp perfekt i Flash-fil. Nå kan du låse Logo lag også.
Velg Outline lag og igjen trykke Ctrl + R, denne gangen importere outline.png. Det også, bør stille opp akkurat. Siden omrisset er valgt, nå ville være et godt tidspunkt å treffe F8 og slå den inn i en MovieClip. Navngi MovieClip "Outline", og deretter gå videre og sette en forekomst navnet "omriss" inne i egenskapsvinduet. Du skal se noe som ligner på dette:
Nå, gå over til Bibliotek-panelet og sjekke egenskapene til din logo.png. Personlig ville jeg satt dette til lossless kvalitet, siden denne logoen er noe som sannsynligvis vil bli brukt som en header eller noe lignende, og jeg føler at i de tilfellene kan du råd til å ikke spart på kvaliteten. Det er opp til deg, men det vil se best på lossless kvalitet for sikker
Trinn 7: A Minor (men nødvendig) Justering
Har din disposisjon eksempel valgt og legge til en blur filter. Sett det til 2 piksler i både X og Y uklarhet egenskaper, og velg høy kvalitet. Dette vil gjøre sluttresultatet mye penere.
Vær oppmerksom på at å legge blur filter tvinger automatisk Flash for å gjengi omrisset som punktgrafikk. Hvis du ikke legge blur filter så må du i det minste sjekke "Cache som bitmap" sjekkheftet. Mer om dette i trinn 10.
Du kan gå videre og låse dette laget også. Også nå ville være et godt tidspunkt å lagre Flash-fil
Trinn 8: Opprette Mask
Velg Mask lag og deretter rektangel verktøyet. Fjern markeringen i slag farge hvis du har en dag påført.
Tegn et rektangel, gjør det nær 60 piksler bred og 320 piksler høy. Så, med figuren din er valgt, gå inn i farger panel og gi det en lineær gradient med tre poeng jevnt spredt ut (med peker Hit F8 med formen valgt og gjøre det til en MovieClip kalt "Mask". Navn forekomsten av masken "theMask". Til slutt, rotere masken 45 grader med klokken. En enkel måte å gjøre dette på er å først trykke Q for transformeringsverktøy, så hold shift mens du roterer slik at det smekker til 45 ° stopper Gå til ramme 70 av maske laget i vår hovedtidslinjen og traff F5 for å sette rammer til dette punktet. Høyreklikk på forrige bilde og skape en bevegelse mellom. Hold shift og dra deretter masken til høyre side av scenen vår. Også skape rammer for å ramme nummer 70 for lagene backround, Logo og Outline. Masken skal gå herfra: Å her: Som du sikkert har funnet ut av nå, vil vi bruke masker alpha gradient form til gradvis omrisset inn og ut. Vanligvis når du har en maske i Flash, har du det på ett lag, og slå den inn i en maske laget. Maske laget har da "barn" lag der innholdet vil bli maskert. Nå, hva skjer hvis vi gjør dette med vår nåværende oppsett? Dette er resultatet: Som du kan se, er det langt fra en myk overgang. Det er ingen gradient oppførsel overhodet. Hvorfor er dette da? For alfa gradienter skal fungere, må Flash gjengi objekter som punktgrafikk, ikke figurer. Vår nåværende masken er definitivt en form (riktignok inne i en MovieClip) og er gjengitt som sådan. Som kan festes på to måter: I Flash CS4, har masken valgt. Under visning i egenskapsvinduet, sjekk "Cache som bitmap" sjekkheftet. Min foretrukne metode er ved hjelp av Actionscript. Hovedsakelig fordi som en utvikler (mer enn en designer), jeg vil ha kontroll over alle aspekter via kode slik at jeg kan bruke noen effekt til enhver dynamisk opprettet objekt. Enhver gjenstand subclassing Displayobject har en cacheAsBitmap boolsk egenskap. Så i vårt eksempel med forekomsten heter "theMask" det er ganske enkelt: Gå videre og lage en keyframe i Handlinger lag og sett at linje med kode. For annen mystisk grunn, kan Flash ikke oppnå ønsket effekt vi går for uten Actionscript. Maskerte lag i Flash tidslinjen rett og slett ikke tillate alpha gradient maske Løsningen er heldigvis veldig enkel: Som du kan bokstavelig talt lese fra koden, dette setter vår forekomst "theMask" som maske for vår disposisjon eksempel. . Gå videre og sette den i handlinger lag Vennligst ta hensyn til følgende: Det er en bug i Flash om maske forekomster og tidslinjen. Jeg har lagt merke til feilen i følgende hypotetiske scenario: Vår maske eksempel spenner fra ramme 1 til 70. Vår andre aktiva (logoen) spenner opp for å ramme 90. Når Flash spiller tilbake mellom ramme 71 og 90 , er masken forekomsten ikke på scenen. Hvis du viser logoen i en Firefox-kategorien, for eksempel, og deretter bytte til en annen kategori, og deretter tilbake igjen til logoen, ser du feilen. Du vil se det, hvis avspillingen er mellom ramme 71 og 90, som er. Feilen vil vise seg som omrisset spratt ut og blir avslørt. Når avspillingen returnerer for å ramme en det tilbake til det normale. Konklusjonen vi kan trekke av dette er at hvis du maskere noe av Actionscript, sørg for å holde masken på scenen til enhver tid for å unngå objektet blir maskert viser seg Gå videre og teste filmen nå. Det skal se slik ut: Effekten er litt for sterk, slik at du kan redusere alpha av omrisset eksempel til 75%, og det vil se litt mer subtil Som en siste. finishen, vil vi legge til en liten glitrende glans effekt til logoen. logoen skal nå være 99% fullført. Du vil fortsatt trolig vil justere når animasjonen starter ved å sette inn flere bilder etter at masken har animert. Bare husk det jeg nevnte tidligere; sørg for å holde en forekomst av masken på scenen helt til slutten av animasjonen sløyfe for å unngå masken skjerm bug! Her på slutten av denne opplæringen vil du forhåpentligvis klar over hvor lett du kan gjøre endringer i logoen, eller bruke effekten til enhver tekst logo med et tilfredsstillende resultat. Prøv å eksperimentere ved å endre tykkelsen på omrisset (Husker du? Vi har gjort det 2 piksler tykk). Endre tekst, font og farger kan enkelt gjøres i tillegg. Endre fargene i farge overlegg og hjerneslag, eller enda bedre; eksperimentere med dine egne lagstiler! Hjertet av animasjon ligger i alpha gradient disposisjon som ligger innenfor den skriftsnitt, så når du eksperimentere på egen hånd bør du prøve å ha noen form for slag eller ytre grensen til holde denne effekten. Selvfølgelig, alt går, det som er pen å du er god! Jeg håper du likte denne opplæringen, takk for lesing!
Jeg mener de små håndtakene som definerer fargene på en gradient). Velg en farge for poengene, men sørg for at du har den mellomste på 100% alfa og ytre seg på 0% alfa. Det skal se slik ut:
Trinn 9:. Animere Mask
Trinn 10: Forstå Alpha Gradienter
The Flash IDE måten:
I Flash CS3, kan du finne det rett under blandingsmodi merket som "Bruk runtime bitmap caching".
< li> Action måten:
theMask.cacheAsBitmap = true;
Trinn 11: "Men det er fortsatt ikke fungerer"
outline.mask = theMask;
Trinn 12:. finpuss
Se i kilde zip-filen, og du vil finne en shine.png.
Gå videre og importere dette til scenen på Shine lag på ramme 59.
Plasser den på øvre høyre hjørne av "g" karakter av logoen vår.
Konverter det til et symbol, slik at vi kan tween det.
Gå til ramme 69 av det samme laget og trykke F5 for å sette en ramme.
Høyreklikk den aktuelle delen og velger Create Motion Tween.
Zoom i rundt området du arbeider med:
Gå til ramme 59 og forvandle bildet til en knapt synlig størrelse
Gå til ramme 64 og forvandle det til. sin opprinnelige størrelse (eller nær).
Gå til ramme 69 og forvandle den til en knapt synlig størrelse.
Legg til en gulaktig fargetone på skinne MovieClip i egenskapsvinduet. Anmeldelser
Sett alpha til ca 70%
Legg til en gulaktig glød filter samt
Trinn 13:.. Oppsummering