Legg til litt animert gnist til teksten din - Basix

Denne opplæringen dekker opprettelsen av en skinnende tekst-effekt, som deretter lett kan redigeres for rask prototyping.

Animasjonen kan bli publisert til Flash Player 8 og opp, og kan opprettes i Flash 8 og opp. Det er ingen ActionScript som kjører denne animasjonen, slik at den enkelt kan implementeres i både AS2- og AS3-prosjekter. Det kan tjene som et morsomt Flash-spill intro-logo, bannerannonse, eller likevel, du ser passende. Ha det gøy med det!.


Endelig resultatforhåndsvisning

La oss se på det endelige resultatet vi vil jobbe for:


Trinn 1: Opprett et nytt Flash-dokument

Bruke Fil> Nytt> Opprett et nytt Flash ActionScript 2 eller 3-dokument.

I vinduet Egenskaper gjør du scenestørrelsen 590 med 300.

Rediger også rammene per sekund til 30.


Trinn 2: Gradientform

Bruk rektangulærverktøyet (R) ved å plassere et firkant på scenen med den forhåndsinnstilte sort / hvite radialgraden, og ingen slag.

Det spiller ingen rolle hvor stor plassen du lager, er.

Merk dette laget "gradient".


Trinn 3: Re-størrelse og Juster

Velg gradientfeltet, og åpne justeringsalternativene ved hjelp av CTRL + K.

Pass på at "Juster til scenen" er merket.

Først matcher bredden og høyden på torget til scenen.

Ditt resultat burde være noe slikt:

Neste juster den venstre kanten av formen til scenen.

Ditt resultat bør nå være som følger:

Juster deretter forkant av formen til scenen.

Bingo:


Trinn 4: Rediger størrelse og farger

Velg ditt gradienttransformeringsverktøy (F).

Klikk på stigningen på scenen.

Bruk gradientkontrollhåndtakene, endre størrelsen og formen på graden slik at den blir jevnt fordelt over scenen.

Åpne Fargevinduet (Alt + Skift + F9).

Endre den hvite fargen på gradienten til en # 333333 grå, og skyv fargen til høyre slik at det er en grå sirkel midt i gradienten.

Dette er hva du bør se:


Trinn 5: Legg til horisontale linjer

Lag et nytt lag over gradienten, og nevn det "linjer".

Bruk rektangulærverktøyet (R) ved å tegne et rektangel på scenen uten strekk, og en 9% ugjennomsiktig hvit fyll.

Bruk egenskapspanelet til å endre størrelsen på formen til 590 med 5.

Bruk justeringsalternativene, og juster formen til scenens horisontale midtpunkt.

Deretter justere formen til toppkanten av scenen ved hjelp av alternativene Juster.

Med denne formen fortsatt valgt, kopier den og lim den inn på plass (CTRL + Shift + V).

Flytt denne nye figuren ned ti piksler under den første formen, og dupliser den igjen med samme metode. Du har nå noe slikt:

Dupliser denne prosessen over til du har hele skjermen dekket med disse horisontale figurene. Du vil ende opp med noe slikt:


Trinn 6: Logo Animasjon Movieclip

Lag et nytt lag kalt "logo".

Tegn et rektangel (R) med et hvitt slag, men ingen fylling.

Under Egenskaper, endre dimensjonene til 590 ved 300px.

Bruk justeringsvinduet (CTRL + K) til å justere formen til venstre og toppkanten slik at resultatet er dette:

Velg det hvite rektangelet, og konverter det til et symbol under Endre> Konverter til symbol.

Navngi filmklippet "masterClip", og kontroller at registreringspunktet er øverst til venstre. Deretter klikker du på "OK".


Trinn 7: Gjør rektangelet en guide

Dobbeltklikk på masterClip på scenen for å redigere det i kontekst.

Dobbeltklikk på lagnavnet og endre det til "scenestørrelse".

Høyreklikk på laget og velg "Guide".

Lås laget ved å klikke på den andre hvite sirkelen.

Du har nå et referanselag som forteller deg hvor stor scenen er, i sammenheng med masterClip.


Trinn 8: Legg til teksten

Lag et nytt lag, og legg til teksten din i denne filmklippet med tekstverktøyet (T). jeg velger SF Sports Night for denne animasjonen.

Dette er typen innstillinger som skal gjelde for tekstfeltet (dine tilgjengelige innstillinger kan være litt forskjellige, avhengig av hvilken versjon av Flash du bruker):

For å oppnå linjeskiftet i teksten, skriv inn 9 tomme mellomrom manuelt på den andre linjen for å få teksten til å linje opp som vist.


Trinn 9: Roter teksten

Velg teksten, og bruk transformasjonsvinduet (CTRL + T) til å rotere teksten til -6.5.


Trinn 10: Juster mellomrom

Velg teksten, flytt den ned slik at den er i midten av rammen.


Trinn 11: Konverter teksten til en filmklipp

Velg teksten på scenen, og konverter den til et symbol med Endre> Konverter til symbol (eller F8).

Navn klippet, "sourceText" og sørg for at det er en filmklipp, ikke en knapp eller et grafikklipp. Deretter klikker du på "OK".


Trinn 12: Plasser på fire flere lag

Velg tekstklippet og kopier det ved hjelp av CTRL + C.

Opprett fire nye lag ved hjelp av "New Layer" -knappen i tidslinjepanelet.

.

Sett tekstklippet du kopierte på hvert lag, ved å bruke Rediger> Lim inn i sted.

Du har nå fem identiske lag.

Gi nytt navn til hvert lag ved å dobbeltklikke på hvert lags navn. Bruk bildet nedenfor som en veiledning for å navngi hver enkelt.

Lås og skjul alle lagene dine ved hjelp av lås og synlige vinkler innenfor tidslinjen.

Ved å gjemme og låse hvert lag, kan vi isolere og redigere hvert lag uavhengig.


Trinn 13: Rediger "Glows" -laget

Lag "gløder" laget synlig, og låse opp det. Klikk på dette laget for å sikre at du redigerer det.

Velg tekstklippet på scenen, og kontroller at filtre er åpne i Egenskaper-panelet.

Legg til en glød i tekstklippet, ved hjelp av knappen Legg til filter. Velg "Glow" -alternativet.

Bruk disse innstillingene til gløden som nettopp ble opprettet.

Du har nå denne effekten:

Nå bruker du samme metode, bruker du et nytt lysfilter til samme klipp.

Bruk disse innstillingene til den nye gløden som nettopp ble opprettet.

Du har nå denne effekten:

Bruk nå en Drop Shadow til dette samme klippet.

Bruk disse innstillingene til drop shadow som nettopp ble opprettet.

Du har nå denne effekten:


Trinn 14: Rediger "Mask3" -laget

Med «gløder» -laget fortsatt synlig og valgt, legg til et nytt lag. Gi det navnet "grønn".

.

Lås og skjul nå og "glø" lag. Lag "mask3" -laget synlig, og låse opp det.

Lag "mask3" -laget en maske ved å høyreklikke på laget, og velg "maske".

Det grønne laget blir nå midlertidig låst. Lås opp den ved å klikke på lagets låsikon.

Bruk Rectangle-verktøyet (R) til å tegne en form på det "grønne" laget.

Påfør ikke slag, og standard svart-hvitt lineær gradient.

Tegn formen, slik at den er større enn scenens størrelse.

Velg Gradient Transform Tool (F) og klikk på graden på scenen.

Bruk Gradient Transform Handles, roter graden 90 degress, og endre spenningen på graden slik at den bare dekker tekstområdet av scenen.

Endre fargene på graden ved hjelp av fargevinduet. (Alt + Skift + F9).

Den grønne til høyre er # 8CD566.

Den grønne til venstre er # 43851F.

Lås nå det "grønne" laget, og sørg for at "mask3" -laget også er låst. Skru også synligheten til "gløder" -laget tilbake på ...

Resultatet er nå dette:


Trinn 15: Rediger "Inner Glow" -laget

Lag "indre gløden" laget synlig, og låse opp det.

Velg klippet på "indre glød" -laget, og legg til en glød til det under filtre i proffisjonsvinduet.

Bruk disse innstillingene til den nye gløden:

Tips: Legg merke til at denne gløden er en indre glød, noe som betyr at den lyser fra innsiden, ikke utsiden.

Ditt resultat er nå dette:

Når klippet fremdeles er valgt, endrer du blandemodus til Overlegg under Skjerm i Egenskaper Panel:

Med den nye blandingsmodusen på plass, er resultatet ditt nå:


Trinn 16: Øk tidslinjespenningen

Denne masterClip er for tiden bare en ramme lang. Vi må legge til flere rammer, slik at vi kan animere skinneeffekter.

På tidslinjen klikker du og drar for å markere alle lagene på ramme 88.

Med rammen fortsatt valgt, høyreklikk og velg "Sett inn ramme" fra rullegardinlisten.

Tips: Bortsett fra høyreklikk for å legge til rammer, kan du også bruke F5 som en snarvei.

Tidslinjen har nå et span på 88 rammer.


Trinn 17: Legg til den første animerte skyggen

Begynn med å først låse og gjemme det "indre glødet" laget.

Med det "innvendige glødet" laget som er valgt, legger du til et nytt lag ved hjelp av knappen i lagvinduet.

Dobbeltklikk på det nye lagets navn og betegn det "skinne".

Høyreklikk på bunnen "mask1" -laget og gjør det til en maske.

Lås opp "skinn" -laget og klikk på det, så du kan begynne å jobbe på dette laget.

Skinnet som vi legger til, begynner å animere omtrent halvveis gjennom animasjonen. Bruk skrubberen på tidslinjen for å navigere til ramme 47.

Klikk på rammen 47 i "skinne" -laget, og høyreklikk for å sette inn en keyframe.

Tips: Bortsett fra høyreklikk, kan du også bruke F6 til å sette inn en keyframe.

Dette er keyframe som vi vil legge til vår glans til.

La denne nye keyframe velges, og velg Rectangle Tool (R).

Velg standard hvit-til-svart lineær gradient for fyllingen, og ingen strekk.

Tegn et rektangel på scenen, litt høyere enn scenens høyde, og med en bredde på 150 piksler.

Bruk Gradient Transform Tool (F) til å redigere span / rotasjon av denne nye gradientformen.

Bruk Gradient-kontrollhåndtakene for å rotere gradienten litt til venstre.

Med denne gradienten fremdeles valgt, åpner du farger-vinduet (Alt + Skift + F9) for å redigere fargene.

Bruk disse innstillingene til din gradient:

  • Stikket til venstre for gradienten er en hvit fyll, ved 0% Alpha.
  • Klikk rett under midten av gradienten, for å legge til en mellomstorlek. Gjør det en hvit fyll, ved 50% Alpha.
  • Fargeprøven til høyre for gradienten er en hvit fyll, ved 0% Alpha.

Tips: Hvis du vil redigere en farge på en gradientprøver, dobbeltklikker du på selve prøven.

Du har nå en svak, bleknet hvit gradient av til venstre for scenen.

Vi må nå legge til en ny keyframe på tidslinjen, slik at vi kan animere denne gradienten. Klikk på den siste rammen av "skinne" -laget (ramme 88), og sett inn en keyframe med F6.

Vi er nå klare til å bruke en tween til denne gradienten.

Høyreklikk hvor som helst på "skinne" -laget mellom de to nøkkelrammene, og velg Opprett formtween.

Vi har nå en form tween på laget innenfor tidslinjen.

For å faktisk se bevegelse med gradienten, må vi redigere den andre keyframe. Klikk på keyframe i tidslinjen.

Graden er nå valgt. Bruk høyre piltast for å flytte overgangen til høyre side av scenen.

Tips: For å gjøre dette raskt, hold nede SHIFT mens du trykker ned høyre piltast. Dette vil flytte formen i trinn på 10 piksler.

Gradienten sitter nå på høyre side av scenen. Vi har nå dette på den andre keyframe på tidslinjen.

Lås nå "shine" -laget, og sørg for at "shine" og det nederste "mask1" -laget er synlige.

Du kan nå forhåndsvise animasjonen med ENTER-tasten.

Animasjonen på dette laget ser slik ut.


Trinn 18: Legg til den andre animerte skyggen

Velg det nederste "mask1" -laget, og legg til et nytt lag ved hjelp av knappen Ny lag.

Dobbeltklikk på det nye laget, og navnet "fade".

Høyreklikk på toppen "mask1" -laget, og gjør det til en maske.

Lås opp "fade" -laget. Dette er hvor vi vil legge til vår neste skinneeffekt.

Velg rektangelverktøyet (R). Still slaget til null, og fyll fyllet svart.

Tegn et rektangel litt bredere enn scenen, og med en høyde på 174.

Plasser rektanglet like over scenen.

Velg valgverktøyet (V) fra verktøyene.

Hold musen over den nederste kanten av den svarte formen. Du ser at en buet prikket linje vises under markøren, noe som betyr at du kan redigere vektorformen.

Klikk og dra den nederste kanten opp litt, og du vil nå ha en konkav form.

Velg nå Subselection Tool (A) fra verktøyene.

Klikk på nederste høyre hjørne av den svarte formen. Den bezier punktet vil være svart, noe som betyr at den blir redigert. Du kan også se kontrollhåndtakene som endrer kurvene i denne formen ...

Klikk på kurvehåndtaket og dra det ned for å produsere denne formen.

Klikk nå på håndtaket til venstre hjørne.

Dra den opp og til høyre for å produsere denne formen.

Legg merke til at kurven overlapper scenen litt. Bruk markeringsverktøyet (V) til å flytte formen opp, slik at den ikke dekker scenen.

Velg formen og gi den en gradientfyll ved å velge standard svart-hvitt-fyll.

Dette er vårt resultat.

Velg Gradient Transform Tool (F) og klikk på gradientformen.

Bruk lutningskontrollhåndtakene for å rotere den og klem det vertikalt.

Åpne vinduet Farger (Alt + Skift + F9) for å redigere fargene på gradienten.

Flytt de to gradientprøverne tettere sammen og sett inn følgende:

  • Stikket til venstre for gradienten er en hvit fyll, ved 0% Alpha.
  • Stikket til høyre for gradienten er en hvit fyll, ved 50% Alpha.

Dette er nå vårt resultat.

I tidslinjen på "fade" -laget legger du nå en keyframe (F6) på ramme 48.

Sett inn et tomt keyframe (F7) på ramme 49.

Høyreklikk hvor som helst mellom de to første nøkkelrammene og velg Opprett formtween.

Vi har nå dette på "fade" -laget.

Velg den andre keyframe på tidslinjen.

Bruk markeringsverktøyet (V) ved å flytte formen ned til bunnen av scenen ...

Tips: Legg merke til at bare den hvite delen av gradienten er utenfor bunnen av scenen. Det gjennomsiktige området er ikke synlig.

Lås nå "fade" -laget og spill animasjonen med ENTER-tasten. Du ser dette:

Nå sørg for at alle lagene er låst og gjør dem synlige.

Nå når du spiller animasjonen, ser du dette:

Vi er nesten ferdige! Alt vi har igjen å gjøre er å legge til gnist animasjoner.


Trinn 19: Legg til første Sparkle Highlight

Klikk på det øverste "Mask1" laget.

Legg nå tre lag med knappen New Layer.

Gi dem navnet "sparkle" 1, 2 og 3.

Sett inn nøkkelrammer på disse tre nye lagene.

  • Sparkle 1-laget har en keyframe på rammen 33.
  • Sparkle 2-laget har en keyframe på rammen 43.
  • Sparkle 3-laget har en keyframe på rammen 53.

På keyframe på "sparkle1" laget, skal vi tegne en rød linje. Klikk på Linjeverktøyet (N) og tegne en linje som det vises her.

Klikk på den røde linjen med valgverktøyet (V) og konverter den til et symbol med Modify> Convert to Symbol (F8).

Sørg for at det er en filmklipp, og nev det "sparkleMove".

Dobbeltklikk nå på den nye filmklippet for å redigere den i kontekst.

Navn "Lag 1" "referanse" ved å dobbeltklikke på lagnavnet. Deretter oppretter du et nytt lag og heter det "sparkle".

Utvid nå rammene ved å klikke på rammer 25 på begge lagene, og høyreklikk deretter og velg Sett ramme (F5).

Lås referanselaget og tegne et firkant uten strekk og en svart fyll på glitterlaget.

Vri den svarte firkanten 90 grader med Free Transform-verktøyet (Q).

Bruk markeringsverktøyet (V) ved å rulle musen over hver side av torget, og klikk og dra kantene inn, og opprett subtile buer. Ditt resultat er en liten starburst form.

Klikk på formen og tilordne den standard svart-hvitt radialgradienten fra fyllingene.

Zoom inn på stjernen med Zoom-verktøyet (Z). Velg deretter Gradient Transform Tool (F). Klikk på starburst for å redigere den.

Åpne vinduet Farger (Alt + Skift + F9) for å redigere fargene på gradienten.

Bruk disse innstillingene til radialgradienten:

  • Stoffet til venstre for graden er en hvit fyll, ved 65% alfa.
  • Fargeprøven til høyre for gradienten er en hvit fyll, ved 0% Alpha.

Resultatet er dette.

Klikk på denne formen med valgverktøyet (V), og konverter den til et symbol med Endre> Konverter til symbol (F8). Kontroller at registreringspunktet er i midten, og nevn det "sparkle".

Zoom ut og senter gnistklippet over den venstre kanten av den røde linjen.

Sett inn en keyframe på "sparkle" -laget på rammen 25.

På denne nye keyframe, bruk Free Transform Tool (Q) for å rotere stjerneglassformen 90 grader til høyre. Bruk også valgverktøyet til å flytte formen og senter den over høyre side av linjen.

Høyreklikk mellom de to nøkkelrammene på dette laget og velg "Opprett Classic Tween".

Du kan nå se animasjonen. Du vil se stjernen flytte og rotere fra venstre til høyre.

Lås opp "referanse" -laget og sett slagfargen til et alfa-nivå på null.

Lås nå referanselaget, og klikk på "sparkle" -laget for å redigere det.

Sett inn nøkkelrammer på rammene 6 og 20.

På rammen 1 klikker du på starburst-filmklippet. I Egenskaper, under Fargeeffekt, velger du Alpha fra rullegardinlisten Stil. Still alfa til null.

Gjør det samme på ramme 25.

Nå blinker starburstet som det beveger seg over scenen. Det fades også ut.

Gå tilbake til masterClip-nivået ved å dobbeltklikke på scenen.

Klikk på oversiktsvisningsknappen på "sparkle1" -laget, og sett inn et tomt keyframe (F7) på rammen 59.

Sett gnisten lag 2 og 3 i omriss også.

På "sparkle2" -laget legger du inn et tomt keyframe (F7) på rammen 69.

På "sparkle3" -laget legger du inn et tomt keyframe (F7) på rammen 79.


Trinn 20: Legg til de siste to gnistene

Kopier og lim inn sparkleMove-klippet til de to andre lagene.

Fordi vi for tiden er i kontrastmodus, er det enkelt å plassere animasjonene der de trenger å være. Linjen viser varigheten av animasjonen, og vi bruker det som referanse. Fordi disse glitrende animasjonene skal være små høydepunkter, plasserer vi dem på kantene av teksten.

Plasser sparkleMove-klippet på "sparkle2" -laget under bokstavene L og E.

Plasser sparkleMove-klippet på "sparkle3" -laget over bokstavene T og E.

Nå når du publiserer animasjonen din (CTRL + ENTER), ser du dette:


Konklusjon

Og vi er ferdige! Det flotte med dette oppsettet er at det er ekstremt enkelt å redigere denne animasjonen. For å endre type innhold, skrift osv., Trenger du bare å redigere sourceText filmklipp i biblioteket og juster plasseringen av gnisten filmklipp. Spill rundt med fargene til hvert element for å gjøre det til ditt eget:

Takk så mye for at du tok deg tid til å gå gjennom denne opplæringen, jeg håper du har lært noen praktiske teknikker. Hvis du har noen spørsmål, ikke nøl med å legge igjen dem i kommentarene!