Voeg een geanimeerde sprankeling toe aan uw tekst - Basix

Deze tutorial behandelt het creëren van een glanzend teksteffect, dat vervolgens gemakkelijk kan worden bewerkt voor snelle prototyping.

De animatie kan worden gepubliceerd naar Flash Player 8 en hoger en kan worden gemaakt in Flash 8 en hoger. Er is geen ActionScript met deze animatie, dus het kan eenvoudig worden geïmplementeerd in zowel AS2- als AS3-projecten. Het kan dienen als een leuk Flash-spelintro-logo, banneradvertentie of hoe u maar wilt. Veel plezier ermee!.


Eindresultaat voorbeeld

Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:


Stap 1: Maak een nieuw Flash-document

Bestand gebruiken> Nieuw> Een nieuw Flash ActionScript 2 of 3-document maken.

Maak in het venster Eigenschappen de werkgebiedgrootte 590 bij 300.

Bewerk ook de frames per seconde als 30.


Stap 2: verloopvorm

Plaats met behulp van het gereedschap Rechthoek (R) een vierkant op het werkgebied met het vooringestelde zwart-witte radiale verloop en geen streek.

Het maakt niet uit hoe groot het vierkant is dat u maakt.

Label deze laag "verloop".


Stap 3: Formaat aanpassen en uitlijnen

Selecteer uw verloopvak en open de opties Uitlijnen met CTRL + K.

Zorg ervoor dat "Uitlijnen op fase" is aangevinkt.

Vergelijk eerst de breedte en hoogte van het vierkant met het podium.

Uw resultaat zou ongeveer zo moeten zijn:

Plaats vervolgens de linkerrand van de vorm op het werkgebied.

Uw resultaat zou nu als volgt moeten zijn:

Lijn vervolgens de bovenrand van de vorm uit met het werkgebied.

Bingo:


Stap 4: bewerk de grootte en kleuren

Selecteer je verlooptransformatie tool (F).

Klik op het verloop in het werkgebied.

Gebruik de hendels van de verloopsturing om de grootte en de vorm van de helling te wijzigen zodat deze gelijkmatiger over het werkgebied wordt verdeeld.

Open het venster Kleur (Alt + Shift + F9).

Verander de witte kleur op het verloop in een # 333333 grijs en schuif de kleur naar rechts zodat er een grijze cirkel in het midden van het verloop is.

Dit is wat u zou moeten zien:


Stap 5: voeg horizontale lijnen toe

Maak een nieuwe laag boven het verloop en noem het "lijnen".

Teken met behulp van het gereedschap Rechthoek (R) een rechthoek op het podium zonder streep en een 9% ondoorzichtige witte vulling.

Gebruik het eigenschappenvenster om de grootte van de vorm te wijzigen in 590 bij 5.

Pas de vorm aan het horizontale midden van het werkvlak aan met behulp van de opties Uitlijnen.

Pas vervolgens, met behulp van de uitlijnopties, de vorm op de bovenste rand van het werkvlak.

Met deze vorm nog steeds geselecteerd, kopieer deze en plak deze op zijn plaats (CTRL + Shift + V).

Verplaats deze nieuwe vorm tien pixels onder de eerste vorm naar beneden en dupliceer opnieuw met dezelfde methode. Je hebt nu zoiets als dit:

Dupliceer dit proces hierboven totdat u het volledige scherm bedekt met deze horizontale vormen. Je krijgt zoiets als dit:


Stap 6: Logo Animation Movieclip

Maak een nieuwe laag met de naam "logo".

Teken een rechthoek (R) met een witte lijn, maar geen vulling.

Wijzig onder Eigenschappen de dimensies naar 590 bij 300 px.

Gebruik het uitlijnvenster (CTRL + K) om de vorm uit te lijnen met de linker- en bovenrand, zodat uw resultaat als volgt is:

Selecteer de witte rechthoek en converteer deze naar een symbool onder Wijzigen> Converteren naar symbool.

Noem de filmclip "masterClip" en zorg ervoor dat het registratiepunt zich in de linkerbovenhoek bevindt. Klik vervolgens op "OK".


Stap 7: Maak van de rechthoek een gids

Dubbelklik op de masterClip op het werkgebied om deze in de context te bewerken.

Dubbelklik op de laagnaam en wijzig deze in "stage size".

Klik met de rechtermuisknop op de laag en kies "Gids".

Vergrendel de laag door op de tweede witte cirkel te klikken.

U hebt nu een referentielaag, die u vertelt hoe groot de fase is, in samenhang met de masterClip.


Stap 8: voeg de tekst toe

Maak een nieuwe laag en voeg je tekst toe aan deze filmclip met behulp van de teksttool (T). ik kies SF Sports Night voor deze animatie.

Dit zijn de type-instellingen die van toepassing zijn op het tekstveld (uw beschikbare instellingen kunnen enigszins afwijken, afhankelijk van de versie van Flash die u gebruikt):

Als u de regeleinde in de tekst wilt bereiken, voert u handmatig negen lege spaties in op de tweede regel om de tekst op een lijn te krijgen zoals weergegeven.


Stap 9: draai de tekst

Selecteer de tekst en gebruik het Transform Window (CTRL + T) om de tekst naar -6.5 te draaien.


Stap 10: pas de afstand aan

Selecteer de tekst, verplaats deze naar beneden zodat deze zich in het midden van het kader bevindt.


Stap 11: Converteer de tekst naar een filmclip

Selecteer de tekst op het werkgebied en converteer het naar een symbool met Wijzigen> Omzetten in symbool (of F8).

Geef de clip de naam 'sourceText' en zorg ervoor dat het een filmclip is, geen knop of grafische clip. Klik vervolgens op "OK".


Stap 12: plaats op vier extra lagen

Selecteer de tekstclip en kopieer deze met CTRL + C.

Maak vier nieuwe lagen met behulp van de knop "Nieuwe laag" in het tijdlijnvenster.

.

Plaats de tekstclip die u op elke laag hebt gekopieerd met Bewerken> Plakken op zijn plaats.

Je hebt nu vijf identieke lagen.

Hernoem elke laag door te dubbelklikken op de naam van elke laag. Gebruik de onderstaande afbeelding als richtlijn voor het benoemen van elke afbeelding.

Vergrendel en verberg al uw lagen met behulp van de vergrendeling en zichtbare schakelaars binnen de tijdlijn.

Door elke laag te verbergen en te vergrendelen, kunnen we elke laag afzonderlijk isoleren en bewerken.


Stap 13: Bewerk de laag 'Gloed'

Maak de "gloei" -laag zichtbaar en ontgrendel deze. Klik op deze laag om ervoor te zorgen dat u deze bewerkt.

Selecteer de tekstclip op het werkgebied en zorg ervoor dat de filters open zijn in het paneel Properties.

Voeg een gloed toe aan de tekstclip met behulp van de knop Filter toevoegen. Kies de optie "Gloeien".

Pas deze instellingen toe op de gloed die zojuist is gemaakt.

Je hebt nu dit effect:

Gebruik nu dezelfde methode en pas een tweede gloeifilter op dezelfde clip toe.

Pas deze instellingen toe op de nieuwe gloed die zojuist is gemaakt.

Je hebt nu dit effect:

Breng nu een slagschaduw op dezelfde clip aan.

Pas deze instellingen toe op de slagschaduw die zojuist is gemaakt.

Je hebt nu dit effect:


Stap 14: Bewerk de laag "Mask3"

Voeg de laag 'Gloei' nog steeds zichtbaar en geselecteerd toe en voeg een nieuwe laag toe. Noem het "groen".

.

Nu vergrendelen en verbergen en "gloeien" laag. Maak de laag "mask3" zichtbaar en ontgrendel deze.

Maak de "mask3" -laag een masker door met de rechtermuisknop op de laag te klikken en "masker" te kiezen.

De groene laag wordt nu tijdelijk vergrendeld. Ontgrendel het door op het slotpictogram van de laag te klikken.

Gebruik het gereedschap Rechthoek (R) om een ​​vorm op de "groene" laag te tekenen.

Pas geen lijn toe en de standaard zwart-wit lineaire gradiënt.

Teken de vorm, zodat deze groter is dan de grootte van het werkgebied.

Selecteer het gereedschap Gradiënttransformatie (F) en klik op het verloop in het werkgebied.

Gebruik de Verloop Verloopgrepen om het verloop 90 graden te draaien en de lengte van het verloop te wijzigen zodat het alleen het tekstgebied van het werkgebied beslaat.

Verander de kleuren van het verloop met behulp van het kleurenvenster. (Alt + Shift + F9).

De groene aan de rechterkant is # 8CD566.

De groene aan de linkerkant is # 43851F.

Vergrendel nu de "groene" laag en zorg ervoor dat de laag "mask3" ook is vergrendeld. Schakel ook de zichtbaarheid van de laag "gloeien" weer in ...

Het resultaat is nu dit:


Stap 15: Bewerk de laag "Innerlijke gloed"

Maak de laag 'innerlijke gloed' zichtbaar en ontgrendel deze.

Selecteer de clip op de laag 'innerlijke gloed' en voeg een gloed toe onder de filters in het venster met de eigenschapsrechten.

Pas deze instellingen toe op de nieuwe gloed:

Tip: Merk op dat deze gloed een innerlijke gloed is, wat betekent dat het van binnenuit gloeit, niet van buiten.

Uw resultaat is nu dit:

Terwijl de clip nog steeds is geselecteerd, wijzigt u de overvloeimodus in Overlay onder Weergave in het venster Eigenschappen:

Met de nieuwe overvloeimodus op zijn plaats, is uw resultaat nu dit:


Stap 16: Verhoog de tijdlijnspanwijdte

Deze masterClip is momenteel slechts één frame lang. We moeten meer frames toevoegen, zodat we de glanseffecten kunnen animeren.

Klik binnen de tijdlijn en sleep om alle lagen in frame 88 te markeren.

Terwijl het frame nog steeds is geselecteerd, klikt u met de rechtermuisknop en kiest u 'Frame invoegen' in de vervolgkeuzelijst.

Tip: Afgezien van rechtsklikken om kaders toe te voegen, kunt u F5 ook als snelkoppeling gebruiken.

De tijdlijn heeft nu een reeks van 88 frames.


Stap 17: Voeg de eerste geanimeerde glans toe

Begin met het eerst vergrendelen en verbergen van de laag 'innerlijke gloed'.

Terwijl de laag 'innerlijke gloed' nog steeds is geselecteerd, voegt u een nieuwe laag toe met de knop in het lagenvenster.

Dubbelklik op de naam van de nieuwe laag en noem deze "shine".

Klik met de rechtermuisknop op de onderste laag "mask1" en maak er een masker van.

Ontgrendel nu de "shine" -laag en klik erop, zodat je aan deze laag kunt gaan werken.

De glans die we toevoegen, begint ongeveer halverwege de animatie te animeren. Gebruik de scrubber in de tijdlijn om naar frame 47 te gaan.

Klik op frame 47 van de laag "shine" en klik met de rechtermuisknop om een ​​keyframe in te voegen.

Tip: Naast rechts klikken, kunt u ook F6 gebruiken om een ​​keyframe in te voegen.

Dit is het keyframe waar we onze glans aan zullen toevoegen.

Laat dit nieuwe keyframe geselecteerd en selecteer de Rectangle Tool (R).

Kies de standaard wit-naar-zwart lineaire gradiënt voor de vulling en geen lijn.

Teken een rechthoek op het podium, iets groter dan de hoogte van het podium en met een breedte van 150 pixels.

Gebruik het gereedschap Gradiënttransformatie (F) om de reeks / rotatie van deze nieuwe verloopvorm te bewerken.

Gebruik de hendels van de verloopbediening om het verloop enigszins naar links te draaien.

Terwijl dit verloop nog steeds is geselecteerd, opent u uw kleurenvenster (Alt + Shift + F9) om de kleuren te bewerken.

Pas deze instellingen toe op je verloop:

  • Het staal links van het verloop is een witte vulling, bij 0% alfa.
  • Klik net onder het midden van het verloop om een ​​middelste staal toe te voegen. Maak er een witte vulling van, bij 50% Alpha.
  • Het staal aan de rechterkant van het verloop is een witte vulling, bij 0% alfa.

Tip: Als u een kleur van een verloopstaal wilt bewerken, dubbelklikt u op het staal zelf.

Je hebt nu een vaag, vervaagd wit verloop links van het podium.

We moeten nu een tweede keyframe toevoegen aan de tijdlijn, zodat we dit verloop kunnen animeren. Klik op het laatste frame van de "shine" -laag (frame 88) en voeg een keyframe in met F6.

We zijn nu klaar om een ​​tween toe te passen op dit verloop.

Klik met de rechtermuisknop ergens op de "shine" -laag tussen de twee hoofdframes en kies Shape Tween maken.

We hebben nu een vorm-tween op de laag binnen de tijdlijn.

Om daadwerkelijk beweging met het verloop te zien, moeten we het tweede keyframe bewerken. Klik op het hoofdframe in de tijdlijn.

Het verloop is nu geselecteerd. Gebruik je pijltoets naar rechts om het verloop naar de rechterkant van het werkvlak te verplaatsen.

Tip: Om dit snel te doen, houdt u SHIFT ingedrukt terwijl u op de toets met de pijl naar rechts drukt. Hiermee wordt de vorm in stappen van 10 pixels verplaatst.

Het verloop zit nu aan de rechterkant van het werkgebied. We hebben dit nu op het tweede keyframe in de tijdlijn.

Vergrendel nu de "shine" -laag en zorg ervoor dat "shine" en de onderste "mask1" -laag zichtbaar zijn.

U kunt nu een voorbeeld van de animatie bekijken met de ENTER-toets.

De animatie op deze laag ziet er als volgt uit.


Stap 18: Voeg de tweede geanimeerde glans toe

Selecteer de onderste laag "mask1" en voeg een nieuwe laag toe met behulp van de knop Nieuwe laag.

Dubbelklik op de nieuwe laag en noem deze "vervagen".

Klik met de rechtermuisknop op de bovenste laag "mask1" en maak er een masker van.

Ontgrendel nu de "fade" -laag. Dit is waar we ons volgende glanseffect aan toevoegen.

Selecteer het gereedschap Rechthoek (R). Zet de streek op nul en maak de vulling zwart.

Teken een rechthoek iets breder dan het podium en met een hoogte van 174.

Plaats de rechthoek net boven het podium.

Selecteer het selectiegereedschap (V) uit de tools.

Beweeg uw muis over de onderkant van de zwarte vorm. Je ziet een gebogen stippellijn verschijnen onder de cursor, wat betekent dat je de vectorvorm kunt bewerken.

Klik en sleep de onderkant iets naar boven en je hebt nu een holle vorm.

Selecteer nu het Subselectiehulpmiddel (A) uit de tools.

Klik op de rechterbenedenhoek van de zwarte vorm. Het bezier-punt is zwart, waarmee wordt aangegeven dat het wordt bewerkt. Je kunt ook de bedieningshendels zien die de rondingen van deze vorm wijzigen ...

Klik op de curvehandgreep en sleep deze naar beneden om deze vorm te maken.

Klik nu op het handvat voor de linkerhoek.

Sleep het naar boven en naar rechts om deze vorm te maken.

Merk op dat de curve het podium enigszins overlapt. Gebruik het selectiegereedschap (V) om de vorm omhoog te verplaatsen zodat deze de fase niet bedekt.

Selecteer de vorm en geef deze een verloopvulling door de standaard zwart-witvulling te kiezen.

Dit is ons resultaat.

Selecteer het gereedschap Gradiënttransformatie (F) en klik op de verloopvorm.

Gebruik de hendels van de verloopsturing om deze te draaien en verticaal uit te knijpen.

Open het kleurenvenster (Alt + Shift + F9) om de kleuren van het verloop te bewerken.

Plaats de twee verloopstroken dichter bij elkaar en stel het volgende in:

  • Het staal links van het verloop is een witte vulling, bij 0% alfa.
  • Het staal aan de rechterkant van het verloop is een witte vulling, bij 50% Alpha.

Dit is nu ons resultaat.

Voeg in de tijdlijn op de laag "vervagen" nu een hoofdframe (F6) in frame 48 in.

Plaats een leeg hoofdframe (F7) op frame 49.

Klik met de rechtermuisknop ergens tussen de eerste twee hoofdframes en selecteer Shape Tween maken.

We hebben dit nu op de laag "vervagen".

Selecteer het tweede keyframe in de tijdlijn.

Gebruik het selectiegereedschap (V) om de vorm naar de onderkant van het werkvlak te verplaatsen ...

Tip: Merk op dat alleen het witte deel van de gradiënt van de onderkant van het werkgebied is. Het transparante gebied is niet zichtbaar.

Vergrendel nu de "fade" -laag en speel de animatie af met de ENTER-toets. Je ziet dit:

Zorg er nu voor dat alle lagen vergrendeld zijn en maak ze allemaal zichtbaar.

Wanneer je nu de animatie speelt, zie je dit:

We zijn bijna klaar! Het enige dat we nog hoeven te doen, is de glinsterende animaties toevoegen.


Stap 19: Voeg de eerste sparkle markering toe

Klik op de bovenste laag "Mask1".

Voeg nu drie lagen toe met de knop Nieuwe laag.

Noem ze "fonkelen" 1, 2 en 3.

Voeg hoofdframes toe op deze drie nieuwe lagen.

  • Sparkle 1 laag heeft een keyframe op frame 33.
  • Sparkle 2 layer heeft een keyframe op frame 43.
  • Sparkle 3 layer heeft een keyframe op frame 53.

Op het hoofdframe op de laag "sparkle1" tekenen we een rode lijn. Klik op het lijngereedschap (N) en teken één lijn zoals deze hier wordt weergegeven.

Klik op de rode lijn met het selectiegereedschap (V) en converteer het naar een symbool met Wijzigen> Omzetten in symbool (F8).

Zorg ervoor dat het een filmclip is en noem deze "sparkleMove".

Dubbelklik nu op de nieuwe filmclip om deze in de context te bewerken.

Noem "Layer 1" "reference" door te dubbelklikken op de Layer Name. Maak vervolgens een nieuwe laag en noem deze "sprankelen".

Breid nu de frames uit door in beide lagen op frames 25 te klikken en klik met de rechtermuisknop en kies Frame invoegen (F5).

Vergrendel de referentielaag en teken een vierkant zonder streep en een zwarte vulling op de sparkle-laag.

Draai het zwarte vierkant 90 graden met het gereedschap Vrije transformatie (Q).

Gebruik het selectiegereedschap (V) om met uw muis over elke kant van het vierkant te bewegen en klik en sleep de randen naar binnen om subtiele bogen te maken. Je resultaat is een kleine starburst-vorm.

Klik op de vorm en wijs deze de standaard zwart-witte radiale gradiënt toe vanuit de vullingen.

Zoom in op de starburst met de Zoom Tool (Z). Selecteer vervolgens het gereedschap Gradiënttransformatie (F). Klik op de starburst om deze te bewerken.

Open het kleurenvenster (Alt + Shift + F9) om de kleuren van het verloop te bewerken.

Pas deze instellingen toe op de radiale gradiënt:

  • Het staal links van het verloop is een witte vulling, bij 65% Alpha.
  • Het staal aan de rechterkant van het verloop is een witte vulling, bij 0% alfa.

Het resultaat is dit.

Klik op deze vorm met het selectiegereedschap (V) en converteer het naar een symbool met Wijzigen> Omzetten in symbool (F8). Zorg ervoor dat het registratiepunt in het midden staat en noem het "sprankelen".

Zoom uit en centreer de sparkclip over de linkerrand van de rode lijn.

Plaats een keyframe op de "sparkle" -laag op frame 25.

Gebruik op dit nieuwe hoofdframe het gereedschap Vrije transformatie (Q) om de starburst-vorm 90 graden naar rechts te draaien. Gebruik de selectiegereedschap om de vorm te verplaatsen en centreer deze over de rechterkant van de lijn.

Klik met de rechtermuisknop tussen de twee hoofdframes in deze laag en selecteer 'Klassieke tween maken'.

Je kunt nu de animatie bekijken. Je ziet de ster bewegen en roteren van links naar rechts.

Ontgrendel de "referentie" -laag en stel de lijnkleur in op een alfaniveau van nul.

Vergrendel nu de referentielaag en klik op de "sparkle" -laag om deze te bewerken.

Voeg hoofdframes in frames 6 en 20 in.

Klik op frame 1 op de starburst-filmclip. Kies in Eigenschappen onder Kleureffect de optie Alfa kiezen in de vervolgkeuzelijst Stijl. Zet de Alpha op nul.

Doe hetzelfde op frame 25.

Nu valt de vuurwerktoestand binnen terwijl deze over het podium beweegt. Het vervaagt ook.

Ga terug naar het masterClip-niveau door op het werkgebied te dubbelklikken.

Klik op de knop voor de overzichtsweergave op de laag "sparkle1" en plaats een leeg sleutelframe (F7) in frame 59.

Zet ook de glanslagen 2 en 3 in een overzichtsweergave.

Plak op de laag "sparkle2" een leeg hoofdframe (F7) in frame 69.

Plak op de laag "sparkle3" een leeg hoofdframe (F7) in frame 79.


Stap 20: voeg de laatste twee sparkles toe

Kopieer en plak de sparkleMove-clip in de andere twee lagen.

Omdat we momenteel in de overzichtsmodus staan, is het eenvoudig om de animaties te plaatsen waar ze moeten zijn. De regel toont de duur van de animatie en we gebruiken die als referentie. Omdat deze sprankelende animaties kleine hoogtepunten zouden moeten zijn, plaatsen we ze op de randen van de tekst.

Plaats de sparkleMove-clip op de "sparkle2" -laag onder de letters L en E..

Plaats de sparkleMove-clip op de laag "sparkle3" boven de letters T en E.

Wanneer u nu uw animatie publiceert (CTRL + ENTER), ziet u dit:


Conclusie

En we zijn klaar! Het mooie aan deze opstelling is dat het uiterst eenvoudig is om deze animatie te bewerken. Om de inhoud van het type, het lettertype, enz. Te wijzigen, hoeft u alleen maar de brontekst