Share
Två gånger i månaden besöker vi några av våra läsares favoritinlägg från hela Activetuts + historia. Denna handledning publicerades först i augusti 2009.
I denna handledning ser vi på hur man skapar en logotyp som innehåller alfasgradientmaskering i animationen. Jag ska förklara några tips och tricks om hur man får det att fungera och undvika några vanliga problem.
Först en snabb titt på vad vi strävar efter:
Detta är en handledning på nybörjarnivå under vilken jag förklarar i detalj hur man skapar denna logotyp och dess animering. Längs vägen kommer jag att nämna några ord om gradientmaskering, bitmap och former inom flash och ActionScript det kräver. Initialt kommer vi kortfattat att hantera vissa Photoshop-tekniker, men det mesta avbildningsredigeringsprogrammet ska vara tillräckligt.
Låt oss börja!
Se till att du börjar med att hämta källfilerna. Öppna Logo.psd i zip-filen.
Du kan också hämta och installera teckensnittet som används i det här exemplet, Lubalin Graph Bold. Detta är valfritt, som när du öppnar filen, kommer Photoshop att ge dig en varning om att teckensnittet saknas, men för den här övningen kan du fortfarande följa perfekt utan det.
Öppnar Logo.psd du borde se detta:
Som du kan se har vi ett grått bakgrundsskikt och ett textlager som heter "Text". Om du har installerat Lubalin-teckensnittet kan du ändra texten till något mer personligt, eller du kan ändra teckensnittet efter eget tycke. Det grå bakgrundsskiktet är mycket ytligt och jag valde bara det för att hjälpa till med att illustrera slutresultatet.
(Du kan hoppa över det här steget om du använder Photoshop.)
Här ska jag kortfattat förklara de lagstilar som används i Photoshop, så att de som vill kopiera logotypen så ordentligt som möjligt har möjlighet att göra det i din egen bildredigeringsprogram. Det är dock inte viktigt att din logotyp liknar varandra.
Förhoppningsvis kommer detta att ge dig en uppfattning om hur man skapar något liknande. Återigen är det inte viktigt för att förstå tekniken som förklaras i denna handledning.
Innan vi hoppar in i Flash kan vi lika bra göra den sista sak som behövs i Photoshop; Det är att skapa en skiss för den effekt vi ska göra. Oroa dig inte om det inte är meningslöst än, så ser du hela bilden snart!
Du borde sluta med det här:
Välj skiktet Skikt och tryck "V" för att välja flyttningsverktyget. Med hjälp av tangentbordet justerar du konturerna så att de sitter perfekt ovanpå originaltexten, så här:
Se till att konturen är helt vit.
Dölj skiktet och bakgrundsskiktet. Gå till "Spara för webb och enheter" och spara som en PNG-fil. Namn den logo.png. Det ska se ut så här:
Dölja sedan Textlagret och ta tillbaka översiktsskiktet. Spara som "outline.png". Det ska se ut så här:
Se till att du sparar högkvalitativ, transparent-aktiverad PNG!
Starta upp Flash och skapa en ny AS3-fil. Eftersom logotypen vi skapar är 580 vid 170 pixlar i Photoshop, använder vi samma dimensioner för vår Flash-fil. Lämna FPS och bakgrundsfärg som det är.
Skapa och namnge dessa lager:
Sätt dem i ordning som i listan, så att "Åtgärder" ligger på lägsta Z-nivå och "Shine" på högst. Välj nu bakgrundsskiktet och skapa en rektangel som täcker scenen. Gör färgen en gradient som går från mörkgrå (# 222222) till ljusgrå (#AAAAAA). Använd Gradient Transform Tool (snabbtangent F) för att justera det så här:
Låsa bakgrundsskiktet eftersom vi inte kommer att ändra det längre.
Välj logglagret. Gå till Arkiv> Importera> Importera till steg eller tryck Ctrl + R. Välj den logo.png du tidigare exporterat från Photoshop. Bilden ska stämma perfekt i din Flash-fil. Du kan nu låsa logogret också.
Välj översiktsskiktet och tryck igen Ctrl + R, den här gången importerar du outline.png. Det också borde ordna precis rätt. Eftersom konturen för närvarande är vald, skulle det nu vara en bra tid att slå F8 och göra den till en MovieClip. Namn MovieClip "Outline", och fortsätt sedan och sätt in ett instansnamn för "disposition" inuti egenskapspanelen. Du borde se något liknande det här:
Nu går du vidare till bibliotekspanelen och kontrollerar egenskaperna hos din logo.png. Personligen skulle jag sätta detta till förlustfri kvalitet, eftersom den här logotypen är någonting som sannolikt kommer att användas som en rubrik eller något liknande, och jag känner att i så fall har du råd att inte skämma på kvaliteten. Det är ditt samtal, men det kommer säkert att vara det bästa med förlustfri kvalitet!
Välj din konturinstans och lägg till en suddfilter. Ställ in den till 2 pixlar i både X och Y-oskärpa egenskaper, och välj hög kvalitet. Detta kommer att göra slutresultatet mycket bättre.
Vänligen notera Att lägga till suddfiltret tvingar automatiskt Flash för att göra konturen som en bitmapp. Om du inte lägger till suddfiltret måste du åtminstone kolla kryssrutan "Cache as bitmap". Mer om detta i steg 10.
Du kan fortsätta och låsa även detta lager. Det skulle också vara en bra tid att spara din Flash-fil!
Välj maskeringsskiktet och sedan rektangelverktyget. Avmarkera streckfärgen om du har en aktuell applikation.
Rita en rektangel, gör den nära 60 pixlar bred och 320 pixlar lång. Sedan, med din form valda, gå in i färgpanelen och ge den en linjär gradient med tre punkter jämnt fördelad (by poäng Jag menar de små handtag som definierar färgerna i en gradient). Välj vilken färg som helst för punkterna, men se till att du har den mittersta på 100% alfa och de yttre på 0% alfa. Det ska se ut så här:
Hit F8 med formen vald och gör den till en MovieClip kallad "Mask". Nämn maskeringsexemplet "theMask". Slutligen rotera masken 45 grader klockvis. Ett enkelt sätt att göra detta är att först slå Q för transformationsverktyget, håll sedan skiftet medan det roterar så det snäpper till 45 ° hållplatser.
Gå till ram 70 i maskslagret på vår huvudsakliga tidslinje och tryck F5 för att infoga ramar till den här punkten. Högerklicka på någon tidigare bildruta och skapa en rörelseperiod. Håll skiftet och dra sedan masken till höger om vårt stadium. Skapa också ramar för att rama nummer 70 för lagren Backround, Logo och Outline. Masken ska gå härifrån:
Till hit:
Som du förmodligen har tänkt ut nu använder vi maskerna alfa-gradientformen för att gradvis blekna konturen in och ut. Vanligtvis när du har en mask i Flash, har du den på ett lager och gör det till ett maskeringslager. Maskeringsskiktet har då "barn" lager vars innehåll kommer att maskeras. Vad händer nu om vi gör det med vår nuvarande inställning? Detta är resultatet:
Som du kan se är det långt ifrån en smidig övergång. Det finns inget gradient beteende alls.
Varför är det då?
För att alfa-gradienter ska fungera måste Flash göra dina objekt som bitmappar, inte former. Vår nuvarande mask är definitivt en form (om än i en MovieClip) och är gjord som sådan. Det kan lösas på två sätt:
I Flash CS4 har du valt din mask. Under kryssrutan Visa i fliken Egenskaper, kryssrutan "Cache as bitmap".
I Flash CS3 kan du hitta det rätt under blandningslägena som är märkta som "Använd runtime bitmap caching".
Mitt föredragna tillvägagångssätt är att använda ActionScript. För det första eftersom jag som utvecklare (mer än en designer) vill ha kontroll över alla aspekter via kod så att jag kan tillämpa någon effekt på något dynamiskt skapat objekt. Eventuella objektklassificeringar DisplayObject har en booleansk egenskap cacheAsBitmap. Så i vårt exempel med förekomsten heter "theMask" är det helt enkelt:
theMask.cacheAsBitmap = true;
Fortsätt och skapa en keyframe i åtgärdslaget och sätt in den här koden.
Av någon mystisk anledning kan Flash inte uppnå den önskade effekten vi åker utan ActionScript. Maskerade lager på Flash-tidslinjen helt enkelt inte tillåta alfasgradientmaskering!
Lösningen är lyckligtvis mycket enkel:
outline.mask = theMask;
Som du kan läsa bokstavligen från koden, sätter vi vår förekomst "theMask" som mask för vår konturinstans. Gå vidare och sätt det i aktionsskiktet.
Tänk på följande:
Det finns ett fel i Flash angående maskinstanser och tidslinjen. Jag har märkt buggen i följande hypotetiska scenario:
Vår maskinstans sträcker sig från ram 1 till 70. Vår andra tillgång (logotypen) sträcker sig upp till ram 90. När Flash spelar upp mellan ram 71 och 90 är maskexemplet inte på scenen. Om du tittar på logotypen i en Firefox-flik, till exempel, växla till en annan flik och sedan tillbaka igen till logotypen ser du felet. Du får se det om uppspelningen är mellan ram 71 och 90, det vill säga. Felet kommer att visa sig som konturen poppar ut och blir ommaskerad. När uppspelningen återgår till bild 1 återgår den till normal.
Slutsatsen vi kan dra av här är att om du maskerar något av ActionScript, se till att du håller masken på scenen hela tiden för att undvika att objektet maskeras visar sig själv.
Gå vidare och testa filmen nu. Det ska se ut så här:
Effekten är något för stark, så du kan minska alfa av konturinstansen till 75% och det kommer att se lite mer subtil.
Som en sista finish kommer vi att lägga till en liten mousserande glans effekt på logotypen.
Din logotyp bör nu vara 99% komplett. Du kommer fortfarande att vilja justera när animationen startas om genom att lägga in fler ramar efter att masken har animerats. Kom bara ihåg vad jag nämnde tidigare; se till att du håller en förekomst av masken på scenen hela vägen till slutet av animationsslingan för att undvika masskärmsljuset!
Här i slutet av denna handledning kommer du förhoppningsvis att inse hur lätt du kan göra ändringar i logotypen, eller tillämpa effekten på en textlogo med ett tillfredsställande resultat. Försök att experimentera genom att ändra tjockleken på konturen (Kom ihåg? Vi gjorde det 2 pixlar tjockt). Att ändra texten, teckensnitt och färger kan också enkelt göras. Ändra färgerna i färgöverlägget och stroke, eller ännu bättre; Experimentera med egna lagerformat!
Hjärtat i animationen ligger i alfasgradientplanen som ligger inom typsnittet, så när du själv försöker experimentera bör du försöka få någon slags stroke eller yttre kant för att hålla denna effekt. Självklart går allting, det som är bra för dig är bra!
Jag hoppas att du gillade den här handledningen, tack för att du läste!
Accentsconagua