Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i august 2009.
I denne opplæringen ser vi på hvordan man lager en logo som inkorporerer alfa-gradientmaskering i animasjonen. Jeg vil forklare noen tips og triks på hvordan du får det til å fungere og unngå noen vanlige problemer.
Først en rask titt på hva vi sikter mot:
Dette er en nybegynnernivåopplæring hvor jeg forklarer i detalj hvordan du lager denne logoen og dens animasjon. Underveis skal jeg nevne noen ord om gradientmasker, bitmap og former innen flash, og ActionScript det krever. I utgangspunktet vil vi kort avtale med noen Photoshop-teknikker, men de fleste bilderedigeringsprogrammer bør være tilstrekkelig.
La oss komme i gang!
Pass på at du starter med å laste ned kildefilene. Åpne Logo.psd i zip-filen.
Du kan også laste ned og installere skrifttypen som brukes i dette eksemplet, Lubalin Graph Bold. Dette er valgfritt, da når du åpner filen, vil Photoshop gi deg en advarsel om at skrifttypen mangler, men for denne øvelsen kan du fortsatt følge med perfekt uten det.
Åpner opp Logo.psd du bør se dette:
Som du kan se, har vi et grått bakgrunnslag og et tekstlag som heter "Tekst". Hvis du har installert Lubalin-skriften, kan du endre teksten til noe mer personlig, eller du kan endre skrifttypen etter eget ønske. Det grå bakgrunnslaget er veldig overfladisk og jeg valgte det bare for å hjelpe med å illustrere sluttresultatet.
(Du kan hoppe over dette trinnet hvis du bruker Photoshop.)
Her skal jeg kortfattet forklare lagstilene som brukes i Photoshop, slik at de som ønsker å kopiere logoen så oversatt som mulig, har mulighet til å gjøre det i din egen bilderedigeringsprogramvare. Det er imidlertid ikke viktig at logoen din ligner likevel.
Forhåpentligvis vil dette gi deg en ide om hvordan du oppretter noe lignende. Igjen er det ikke viktig for å forstå teknikken som er forklart i denne opplæringen.
Før vi hopper inn i Flash, kan vi like godt gjøre det siste som trengs i Photoshop; Det er å skape en oversikt over effekten vi skal gjøre. Ikke bekymre deg hvis det ikke gir mening enda, du vil se hele bildet veldig snart!
Du burde ende opp med dette:
Velg oversiktslaget og trykk "V" for å velge flytteverktøyet. Bruk tastaturet til å justere omrisset slik at det sitter perfekt på toppen av den opprinnelige teksten, slik som dette:
Pass på at konturen er helt hvit.
Skjul oversiktslaget og bakgrunnslaget. Gå til "Lagre for web og enheter" og lagre som en PNG-fil. Navn den logo.png. Det skal se slik ut:
Deretter gjemmer du tekstlaget og bringer tilbake oversiktslaget. Lagre som "outline.png". Det skal se slik ut:
Pass på at du sparer høy kvalitet, gjennomsiktig aktivert PNG!
Start opp Flash og opprett en ny AS3-fil. Siden logoen vi lager, er 580 x 170 piksler i Photoshop, bruker vi de samme dimensjonene for vår Flash-fil. La FPS og bakgrunnsfarge være som det er.
Opprett og navngi disse lagene:
Sett dem i rekkefølge som i listen, slik at "Handlinger" er på laveste Z-nivå og "Shine" på høyest. Velg nå bakgrunnslaget og lag et rektangel som dekker scenen. Gjør farge en gradient som går fra mørkegrå (# 222222) til lysegrå (#AAAAAA). Bruk Gradient Transform Tool (hurtigtast F) for å justere det slik:
Låse bakgrunnslaget da vi ikke vil endre det lenger.
Velg Logo-laget. Gå til Arkiv> Importer> Importer til trinn, eller trykk Ctrl + R. Velg logo.png du tidligere eksporterte fra Photoshop. Bildet skal være perfekt i din Flash-fil. Du kan nå låse Logo-laget også.
Velg oversiktslaget og trykk på Ctrl + R igjen, denne gangen importerer du outline.png. Det også burde ordne akkurat. Siden omrisset er valgt, vil det nå være en god tid å slå F8 og slå den inn i en MovieClip. Navngitt MovieClip "Outline", og deretter fortsett og sett inn et instansnavn på "disposisjon" inne i egenskapspanelet. Du bør se noe som ligner på dette:
Gå nå over til Bibliotekspanelet og kontroller egenskapene til logoen.png. Personlig ville jeg sette dette til lossless kvalitet, siden denne logoen er noe som sannsynligvis vil bli brukt som en topptekst eller noe lignende, og jeg føler at i disse tilfellene har du råd til ikke å snakke om kvaliteten. Det er ditt anrop, men det vil se best ut på lossless kvalitet!
Har din oversikt forekomst valgt og legg til en uskarpt filter. Sett den til 2 piksler i både X- og Y-bluregenskaper, og velg høy kvalitet. Dette vil gi sluttresultatet mye bedre utseende.
Vær oppmerksom på Når du legger til uskarphetsfilteret, kreves Flash automatisk for å gjøre omrisset som en bitmap. Hvis du ikke legger til uskarphetsfilteret, må du i det minste merke avkryssingsboksen "Cache as bitmap". Mer om dette i trinn 10.
Du kan gå videre og låse dette laget også. Også, nå vil det være en flott tid å lagre Flash-filen din!
Velg maskeringslaget og deretter rektangelverktøyet. Fjern avmerkingen for strekkfargen hvis du har en aktuell applikasjon.
Tegn et rektangel, gjør det nær 60 piksler bredt og 320 piksler høyt. Deretter går du i fargepanelet med den valgte formen, og gir den en lineær gradient med tre punkter jevnt fordelt (ved punkter Jeg mener de små håndtakene som definerer fargene i en gradient). Velg hvilken som helst farge for poengene, men sørg for at du har den midterste på 100% alfa og de ytre på 0% alfa. Det skal se slik ut:
Hit F8 med formen valgt og gjør den til en MovieClip kalt "Mask". Navn forekomsten av masken "theMask". Til slutt, roter masken 45 grader klokvis. En enkel måte å gjøre dette på er å først trykke Q for transformeringsverktøyet, og hold deretter skift mens du roterer slik at det snaps til 45 ° stopp.
Gå til ramme 70 i maskeslaget på vår viktigste tidslinje, og trykk F5 for å sette inn rammer til dette punktet. Høyreklikk på hvilken som helst forrige ramme og lag en bevegelsestween. Hold skift og dra deretter masken til høyre side av scenen. Lag også rammer for å ramme nummer 70 for lagene Backround, Logo og Outline. Masken skal gå herfra:
Til her:
Som du sikkert har funnet ut nå, bruker vi maskenes alfa-gradient-form for å gradvis fade oversikten inn og ut. Vanligvis når du har en maske i Flash, har du den på ett lag og gjør det til et maskelag. Maskelaget har da "barn" lag hvis innhold vil bli maskert. Nå, hva skjer hvis vi gjør dette med vårt nåværende oppsett? Dette er resultatet:
Som du kan se, er det langt fra en jevn overgang. Det er ingen gradientadferd overhodet.
Hvorfor er dette da?
For at alfa-gradienter skal virke, må Flash gjøre objektene dine som Bitmaps, ikke former. Vår nåværende maske er definitivt en form (om enn innenfor en MovieClip) og gjengis som sådan. Det kan løses på to måter:
I Flash CS4, velg masken din. Under Visnings-delen i egenskapspanelet, merk av i boksen "Cache as bitmap".
I Flash CS3 kan du finne det riktig under blandingsmodusene som er merket som "Bruk kørekortbitmap-caching".
Min foretrukne tilnærming er ved å bruke ActionScript. Hovedsakelig fordi jeg som en utvikler (mer enn en designer) vil ha kontroll over alle aspekter via kode, så jeg kan bruke hvilken som helst effekt til et dynamisk opprettet objekt. Enhver objekt underklasse VisObject har en boolean egenskap cacheAsBitmap. Så i vårt eksempel med forekomsten "TheMask" er det ganske enkelt:
theMask.cacheAsBitmap = true;
Gå videre og opprett en keyframe i handlingslaget og sett inn den linjen med kode.
Av en mystisk grunn kan Flash ikke oppnå den ønskede effekten vi skal til uten ActionScript. Maskerte lag i Flash-tidslinjen ikke tillat alfa-gradient maskering!
Løsningen er heldigvis veldig enkel:
outline.mask = theMask;
Som du kan bokstavelig talt lese fra koden, setter dette vår eksempel "theMask" som masken for vår disposisjon. Gå videre og legg det i handlingslaget.
Vær oppmerksom på følgende:
Det er en feil i Flash angående maskeinstanser og tidslinjen. Jeg har lagt merke til feilen i følgende hypotetiske scenario:
Vår mask forekomst strekker seg fra ramme 1 til 70. Vår andre ressurs (logoen) spenner opp til rammen 90. Når Flash spiller tilbake mellom ramme 71 og 90, er maske-forekomsten ikke på scenen. Hvis du ser logoen på en Firefox-fane, for eksempel, bytt til en annen fane, og deretter tilbake til logoen, vil du se feilen. Du ser det, hvis avspillingen er mellom ramme 71 og 90, det vil si. Feilen vil vise seg som omrisset dukker opp og blir ubemannet. Når avspillingen går tilbake til ramme en, går den tilbake til normal.
Konklusjonen vi kan trekke fra dette er at hvis du maskerer noe av ActionScript, må du sørge for at du holder masken på scenen til enhver tid for å unngå at objektet blir maskert, viser seg selv.
Gå videre og test filmen nå. Det skal se slik ut:
Effekten er litt for sterk, slik at du kan redusere alfabetet av disposisjonen til 75%, og det vil se litt mer subtilt ut.
Som en siste etterbehandling legger vi til en liten glitrende effekt på logoen.
Din logo skal nå være 99% fullført. Du vil fortsatt sannsynligvis justere når animasjonen starter på nytt ved å sette inn flere rammer etter at masken har animert. Bare husk hva jeg nevnte tidligere; sørg for at du holder en forekomst av masken på scenen hele veien til slutten av animasjonssløyfen for å unngå maskevisningsfeilen!
Her på slutten av denne opplæringen vil du forhåpentligvis innse hvor lett du kan gjøre endringer i logoen, eller bruke effekten til enhver tekstlogo med tilfredsstillende resultat. Prøv å eksperimentere ved å endre tykkelsen på omrisset (Husk? Vi gjorde det 2 piksler tykk). Endring av teksten, skrifttype og farger kan enkelt gjøres også. Endre fargene i fargeoverlegget og slaget, eller enda bedre; eksperimentere med dine egne lagstiler!
Hjertet av animasjonen ligger i alfa-gradient-omrisset som ligger innenfor typefeltet, så når du eksperimenterer på egenhånd, bør du prøve å ha en slags slag eller ytre kant for å holde denne effekten. Selvfølgelig, alt går, det som er fint for deg er bra!
Jeg håper du likte denne opplæringen, takk for å lese!
Accentsconagua