Share
Twee keer per maand bekijken we enkele van onze favoriete lezers uit de geschiedenis van Activetuts +. Deze tutorial werd voor het eerst gepubliceerd in augustus 2009.
In deze zelfstudie bekijken we hoe u een logo kunt maken met alpha gradient-maskering in de animatie. Ik zal enkele tips en trucs uitleggen over hoe je het kunt laten werken en een aantal veelvoorkomende problemen kunt voorkomen.
Eerst een snelle blik op wat we nastreven:
Dit is een tutorial op beginnersniveau waarin ik in detail zal uitleggen hoe dit logo en de bijbehorende animatie te maken. Onderweg noem ik een paar woorden over gradiëntmasking, bitmaps en vormen binnen de flits en het ActionScript dat het vereist. In eerste instantie zullen we een aantal Photoshop-technieken kort behandelen, maar de meeste beeldbewerkingssoftware zou voldoende moeten zijn.
Laten we beginnen!
Zorg ervoor dat je begint met het downloaden van de bronbestanden. Open Logo.psd in het zipbestand.
U kunt ook het in dit voorbeeld gebruikte lettertype Lubalin Graph Bold downloaden en installeren. Dit is optioneel, want wanneer u het bestand opent, geeft Photoshop u een waarschuwing dat het lettertype ontbreekt, maar voor deze oefening kunt u nog steeds zonder perfect volgen.
Open Logo.psd en u zou dit moeten zien:
Zoals u kunt zien, hebben we een grijze achtergrondlaag en een tekstlaag met de naam "Tekst". Als u het Lubalin-lettertype hebt geïnstalleerd, kunt u de tekst wijzigen in iets persoonlijks, of u kunt het lettertype naar wens wijzigen. De grijze achtergrondlaag is erg oppervlakkig en ik heb er alleen voor gekozen om het eindresultaat te illustreren.
(U kunt deze stap overslaan als u Photoshop gebruikt.)
Hier zal ik de laagstijlen die in Photoshop worden gebruikt kort uitleggen, zodat degenen onder u die het logo zo letterlijk mogelijk willen kopiëren, de kans krijgen om dit in uw eigen beeldbewerkingssoftware te doen. Het is echter niet belangrijk dat uw logo er hetzelfde uitziet.
Hopelijk geeft dit je een idee hoe je iets soortgelijks kunt maken. Nogmaals, het is niet belangrijk om de techniek uitgelegd in deze tutorial te begrijpen.
Voordat we in Flash springen, kunnen we net zo goed het enige doen wat nodig is in Photoshop; dat is om een overzicht te maken van het effect dat we gaan bereiken. Maak je geen zorgen als het nog geen zin heeft, je zult heel snel het hele plaatje zien!
Je zou dit moeten eindigen:
Selecteer de overzichtslaag en druk op "V" om het verplaatsgereedschap te selecteren. Verbind de omtrek met behulp van je toetsenbord zodat deze perfect bovenop de originele tekst zit, zoals dit:
Zorg dat de omtrek volledig wit is.
Verberg de omtreklaag en de achtergrondlaag. Ga naar "Opslaan voor web en apparaten" en sla op als een PNG-bestand. Noem het logo.png. Het zou er zo uit moeten zien:
Verberg vervolgens de tekstlaag en breng de omtreklaag terug. Sla op als "outline.png". Het zou er zo uit moeten zien:
Zorg ervoor dat u opslaat als PNG met transparantie van hoge kwaliteit!
Start Flash en maak een nieuw AS3-bestand. Omdat het logo dat we maken 580 bij 170 pixels is in Photoshop, gebruiken we dezelfde afmetingen voor ons Flash-bestand. Laat de FPS en de achtergrondkleur zoals ze zijn.
Maak en benoem deze lagen:
Zet ze in de volgorde zoals in de lijst, zodat "Acties" op het laagste Z-niveau staat en "Shine" op het hoogste niveau. Selecteer nu de achtergrondlaag en maak een rechthoek die het werkgebied bedekt. Maak van de kleur een verloop gaande van donkergrijs (# 222222) naar lichtgrijs (#AAAAAA). Gebruik de tool Verlooptransformatie (sneltoets F) om het als volgt uit te lijnen:
Vergrendel de achtergrondlaag omdat we deze niet meer zullen veranderen.
Selecteer de logo-laag. Ga naar Bestand> Importeren> Importeren naar werkgebied of druk op Ctrl + R. Selecteer het logo.png dat u eerder vanuit Photoshop hebt geëxporteerd. De afbeelding moet perfect in je Flash-bestand worden geplaatst. U kunt nu ook de logolaag vergrendelen.
Selecteer de overzichtslaag en druk nogmaals op Ctrl + R, deze keer importeer de outline.png. Het zou ook precies goed moeten aansluiten. Omdat de contour momenteel is geselecteerd, zou het nu een goed moment zijn om op F8 te drukken en er een MovieClip van te maken. Noem de MovieClip "Outline", voer dan een instantienaam in van "outline" in het eigenschappenvenster. Je zou iets dergelijks moeten zien als:
Ga nu naar het bibliotheekpaneel en controleer de eigenschappen van uw logo.png. Persoonlijk zou ik dit instellen op kwaliteit zonder kwaliteitsverlies, aangezien dit logo waarschijnlijk als een header of iets dergelijks wordt gebruikt en ik vind dat je in die gevallen het je kunt veroorloven om niet te beknibbelen op de kwaliteit. Het is uw oproep, maar het zal er absoluut het beste uitzien zonder kwaliteitsverlies!
Laat uw outline-instantie selecteren en voeg een toe vervaag filter. Stel deze in op 2 pixels in zowel X- als Y-wazigheidseigenschappen en kies hoge kwaliteit. Dit zal het eindresultaat er veel beter uit laten zien.
Houd er rekening mee dat dat het toevoegen van het vervagingfilter automatisch zorgt dat Flash de omtrek als een bitmap rendert. Als u het vervagingfilter niet toevoegt, moet u in elk geval het selectievakje 'Cachegeheugen als bitmap' aanvinken. Meer hierover in stap 10.
Je kunt doorgaan en deze laag ook vergrendelen. Het zou ook een goed moment zijn om je Flash-bestand op te slaan!
Selecteer de laag Masker en vervolgens het gereedschap Rechthoek. Maak de selectie van de lijnkleur ongedaan als u er momenteel een hebt toegepast.
Teken een rechthoek, maak deze bijna 60 pixels breed en 320 pixels lang. Ga vervolgens met je geselecteerde vorm naar het kleurenpaneel en geef het een lineair verloop met drie gelijkmatig verdeelde punten (door points Ik bedoel de kleine handvatten die de kleuren van een verloop definiëren). Kies een kleur voor de punten, maar zorg ervoor dat je de middelste op 100% alpha en de buitenste op 0% alpha hebt. Het zou er zo uit moeten zien:
Druk op F8 met de geselecteerde vorm en maak er een MovieClip van, genaamd "Mask". Geef de instantie van het masker "theMask" een naam. Draai tot slot het masker 45 graden met de klok mee. Een eenvoudige manier om dit te doen, is door eerst op Q te drukken voor de transformatietool en vervolgens tijdens het draaien shift ingedrukt te houden zodat deze naar 45 ° stops stopt.
Ga naar frame 70 van de maskerlaag in onze hoofdtijdlijn en druk op F5 om frames op dit punt in te voegen. Klik met de rechtermuisknop op een vorig frame en maak een bewegings-tween. Houd Shift ingedrukt en sleep het masker naar de rechterkant van onze etappe. Maak ook frames aan frame nummer 70 voor de lagen Backround, Logo en Outline. Het masker zou van hieruit moeten gaan:
Naar hier:
Zoals je waarschijnlijk al hebt doorgenomen, gebruiken we de alpha-verloopvorm van de maskers om de omtrek geleidelijk aan uit en weer te laten vervagen. Meestal als je een masker in Flash hebt, heb je het op één laag en verander je dat in een maskerlaag. De maskerlaag heeft dan "onderliggende" lagen waarvan de inhoud gemaskeerd zal zijn. Wat gebeurt er als we dit doen met onze huidige instellingen? Dit is het resultaat:
Zoals je ziet, is het verre van een soepele overgang. Er is helemaal geen gradiënt gedrag.
Waarom is dit dan??
Als alfagradiënten werken, moet Flash uw objecten renderen als bitmaps, geen vormen. Ons huidig masker is absoluut een vorm (zij het in een MovieClip) en wordt als zodanig weergegeven. Dat kan op twee manieren worden opgelost:
Schakel in Flash CS4 uw masker in. Vink onder het gedeelte Weergave in het eigenschappenvenster het selectievakje "Cache als bitmap" aan.
In Flash CS3 vindt u het recht onder de overvloeimodi met het label "Gebruik runtime bitmap-caching".
Mijn voorkeur gaat uit naar het gebruik van ActionScript. Vooral omdat ik als ontwikkelaar (meer dan een ontwerper) alle aspecten via code wil beheersen, zodat ik elk effect op elk dynamisch gemaakt object kan toepassen. Elk object met een subclassificatie van DisplayObject heeft de eigenschap boolean cacheAsBitmap. Dus in ons voorbeeld met het exemplaar met de naam "theMask" is het gewoon:
theMask.cacheAsBitmap = true;
Ga door en maak een keyframe in de laag Actions en voeg die regel code in.
Om een of andere mysterieuze reden kan Flash het gewenste effect niet bereiken zonder ActionScript. Gemaskeerde lagen in de Flash-tijdlijn gewoon niet doen alpha gradient maskering toestaan!
De oplossing is gelukkig heel eenvoudig:
outline.mask = theMask;
Zoals je letterlijk uit de code kunt lezen, stelt dit onze instantie "theMask" in als masker voor onze outline-instantie. Ga je gang en zet het in de acties laag.
Houd rekening met het volgende:
Er is een bug in Flash met betrekking tot maskerinstanties en de tijdlijn. Ik heb de bug opgemerkt in het volgende hypothetische scenario:
Ons maskerexemplaar loopt van frame 1 tot 70. Ons andere item (het logo) loopt over naar frame 90. Wanneer Flash wordt afgespeeld tussen frame 71 en 90, bevindt de maskerinstantie zich niet op het werkgebied. Als u bijvoorbeeld het logo op een Firefox-tabblad bekijkt, ga dan naar een ander tabblad en dan weer terug naar het logo, u zult de fout zien. Je zult het zien, als het afspelen tussen frame 71 en 90 is. De bug zal zichzelf laten zien als de omtrek eruit springt en wordt ontmaskerd. Wanneer het afspelen terugkeert naar frame 1, keert het terug naar normaal.
De conclusie die we hieruit kunnen trekken, is dat als je iets maskeert met ActionScript, je ervoor zorgt dat je het masker altijd op het podium houdt om te voorkomen dat het gemaskeerde object zichzelf laat zien.
Ga je gang en test de film nu. Het zou er zo uit moeten zien:
Het effect is iets te sterk, dus je kunt de alpha van de outline-instantie reduceren tot 75% en het ziet er wat subtieler uit.
Als laatste finishing touch voegen we een beetje sprankelend glanseffect toe aan het logo.
Uw logo moet nu voor 99% zijn voltooid. U zult waarschijnlijk nog steeds willen aanpassen wanneer de animatie opnieuw wordt opgestart door meer frames in te voegen nadat het masker is geanimeerd. Onthoud gewoon wat ik eerder heb genoemd; zorg ervoor dat je een instantie van het masker op het podium houdt tot aan het einde van de animatielus om te voorkomen dat het masker bug weergeeft!
Hier aan het einde van deze tutorial realiseert u zich hopelijk hoe gemakkelijk u wijzigingen aan het logo kunt aanbrengen of past u het effect toe op elk tekstlogo met een bevredigend resultaat. Probeer te experimenteren door de dikte van de omtrek te wijzigen (Vergeet niet dat we deze 2 pixels dik hebben gemaakt). Het wijzigen van de tekst, het lettertype en de kleuren kan ook gemakkelijk worden gedaan. Verander de kleuren in de kleuroverlay en lijn, of zelfs beter; experimenteer met je eigen laagstijlen!
Het hart van de animatie ligt in de alfa-verloopcontour die in het lettertype ligt, dus wanneer u zelf experimenteert, moet u proberen om een soort van streek of buitenrand te hebben om dit effect te behouden. Alles gaat natuurlijk, wat je mooi vindt, is goed!
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Accentsconagua