Add Noen Animated Sparkle til Din tekst - Basix
en
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Denne opplæringen omfatter etablering av en skinnende tekst effekt, som deretter kan lett redigeres for rapid prototyping.
Animasjonen kan publiseres til Flash Player 8 og opp, og kan lages i Flash 8 og oppover. Det er ingen Action kjører denne animasjonen, slik at den enkelt kan implementeres i både AS2 og AS3 prosjekter. Det kan tjene som en morsom Flash spill intro logo, banner annonse, eller slik du ønsker. Ha det gøy med det !.
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Lag en ny Flash Document
Ved hjelp av Fil> Ny> Opprett en ny Flash Actionscript to eller tre dokument.
I vinduet Egenskaper, gjør scenen størrelse 590 av 300.
Også redigere bilder per andre til å være 30.
Trinn 2:. Gradient Shape
Ved hjelp av rektangelverktøyet (R), plassere en firkantet på scenen med den forhåndsinnstilte svart og hvitt radial gradient, og ingen slag
Det spiller ingen rolle hvor stor den plassen du oppretter er
Merk denne layer "gradient"
Trinn 3:.. Re-størrelse og Juster
Velg gradient torget, og åpne Juster valg med CTRL + K.
Pass på at "Rett til å iscenesette" er merket.
matche Først bredden og høyden av plassen til scenen.
Din resultat bør være noe sånt som dette:
Neste justere den venstre kanten av formen på scenen
Resultatet skal nå være som følger:..
Deretter justere den øverste kanten av formen på scenen
Bingo:
Trinn 4:.. Rediger størrelse og farger
Velg gradient transform tool (F)
Klikk på graderingen på scenen
Bruke gradient kontrollspak, endre størrelse og form på graderingen, slik at det er mer jevnt fordelt over scenen.
Åpne Color vinduet (Alt + Shift + F9).
Endre hvit . farge på graderingen til en # 333333 grå, og skyv den fargen til høyre slik at det er en grå sirkel i midten av gradient
Dette er hva du bør se:
Trinn 5: Legg Horisontale linjer
Opprett et nytt lag over gradienten, og gi den navnet "linjer"
Ved hjelp av rektangelverktøyet (R), tegne et rektangel på scenen uten slag. og 9% ugjennomsiktig hvit fyll.
Ved hjelp av egenskapsvinduet, endre størrelsen på figuren for å være 590 av 5.
Bruk Juster alternativene, justere formen til den horisontale sentrum av scenen.
Deretter bruker de Juster alternativene, justere formen til den øverste kanten av scenen.
Med denne formen fortsatt er valgt, kopiere den, og lim den på plass (CTRL + Shift + V).
Flytt denne nye formen ned ti piksler under den første formen, og kopiere den igjen ved hjelp av samme metode. Du har nå noe sånt som dette:
Duplicate denne prosessen over til du har hele skjermen dekket med disse horisontale former. Du vil ende opp med noe som dette:
Trinn 6:. Logo Animasjon MovieClip
Lag et nytt lag som heter "logo"
Tegn et rektangel (R) med en hvit strek, men ingen fyll.
Under Egenskaper, endre dimensjonene til 590 av 300px.
Bruke Strek vinduet (CTRL + K), justere formen til venstre og øvre kant slik at resultatet er dette:
Velg den hvite rektangelet, og konvertere den til et symbol i henhold Modify> Convert to Symbol
Navngi MovieClip "masterClip", og sørge for at registreringen punktet. er i øverste venstre hjørne. Klikk deretter på "OK"
Trinn 7:.. Gjør rektangel en guide
Dobbeltklikk på masterClip på scenen for å redigere den i sammenheng
Dobbeltklikk på lagnavnet og endre den til "scenen size".
Høyreklikk på layer og velg "Guide".
Lås lag ved å klikke på den andre hvite sirkelen.
Du har nå en referanse lag, som forteller deg hvor hvor stor scenen er, i sammenheng til masterClip
Trinn 8:. Tilsett Text
Lag et nytt lag, og legge til tekst til denne MovieClip bruke tekstverktøyet (T). Jeg valgte SF Sports Night Dette er type for å søke i tekstfeltet (de tilgjengelige innstillingene kan være litt forskjellig, avhengig av hvilken versjon av Flash du er bruker): For å oppnå linjeskift i teksten, manuelt gå inn ni tomme plasser på den andre linjen for å få teksten til å stille opp som vises Velg tekst, og bruke Transform Window (CTRL + T) rotere teksten til -6,5 Velg teksten, flytte den ned slik at det er i midten av rammen Velg teksten på scenen, og konvertere den til et symbol med Modify> Convert til Symbol (eller F8). navn klippet, "sourceText" og sørge for at det er et filmklipp, ikke en knapp eller en grafisk klipp. Klikk deretter på "OK" Velg teksten klippet og kopiere den, ved hjelp CTRL + C Lag fire nye lag som bruker "Nytt lag" -knappen i tidslinjen ruten. . Sett teksten klippet du kopierte på hvert lag, ved hjelp av Rediger> Lim inn i Place. Du nå har fem identiske lag. Gi nytt navn til hvert lag ved å dobbeltklikke på hvert lag navn. Bruke bildet nedenfor som en veiledning for å navngi hver enkelt Lås. Og skjule alle lagene med låse og synlige veksler innen tidslinjen. Ved å skjule og låse hvert lag Vi vil være i stand til å isolere og redigere hvert lag uavhengig Gjør det "gløder" lag synlig, og låse den opp. Klikk på dette laget for å sikre at du redigerer det. Velg teksten klippet på scenen, og sørge for at filtrene er åpne i Properties panelet. Legg til en glød til tekst klipp, ved hjelp av Legg Filter-knappen. Velg "Glow" alternativet Bruk disse innstillingene til den gløden som nettopp ble opprettet Du har nå denne effekten.. Nå bruker den samme metoden, bruke en . andre glød filter til det samme klippet Bruk disse innstillingene til den ny glød som nettopp ble opprettet Du har nå denne effekten. Nå gjelder en Drop Shadow til . dette samme klippet Bruk disse innstillingene til drop shadow som nettopp ble opprettet Du har nå denne effekten. Med "gløder" lag fremdeles synlig og valgt, legger et nytt lag. Name it "grønn". . Nå låse og skjule og "gløder" lag. Gjør "mask3" lag synlig, og låse den opp. Gjør "mask3" lag en maske ved å høyreklikke på laget, og velge "maske". Den grønne lag vil nå midlertidig stengt. Låse den opp ved å klikke på lagets låseikon. Bruk rektangelverktøyet (R) for å tegne en figur på den "grønne" lag. Bruk no slag, og standard svart-å -white lineær gradient. Tegn formen, slik at den er større enn scenen størrelse. Velg Gradient Transform Tool (F) og klikk på gradient på scenen. Bruke Gradient Transform Håndtak, rotere gradient 90 grader, og endre span av gradient slik at den bare dekker tekstområdet av scenen. Endre fargene på gradient med Color Window . (Alt + Shift + F9). The Green til høyre # 8CD566. The Green til venstre # 43851F. Nå låse "grønn" lag, og sørge for at "mask3" laget er også låst. Slår også synligheten av "gløder" lag igjen. . Resultatet er nå dette: Gjør det "indre glød" lag synlig, og låse den opp Velg klippet på den "indre glød" lag, og legge til en glød til det under filtrene i proerties vinduet Bruk disse innstillingene til den ny glød. Tips : Legg merke til at denne gløden er en indre glød, noe som betyr at det lyser fra innsiden, ikke utsiden Resultatet er nå dette. Med klippet valgt, endre blending modus for å Overlegg under Skjerm i Properties Panel: Med den nye overgangsmodus på plass, er resultatet nå dette: Dette masterClip er foreløpig bare en ramme lang. Vi må legge til flere bilder, slik at vi kan animere glans effekter. Innen tidslinjen, klikke og dra for å markere alle lag på ramme 88. Med rammen likevel valgt, ikke sant -klikk og velg "Sett Frame" fra rullegardinlisten . Tips: Bortsett fra høyreklikke for å legge rammer, kan du også bruke F5 som en snarvei Den tidslinjen nå. har et spenn på 88 rammer Start med første låsing, og gjemmer seg, den "indre glød" lag Med "indre glød" lag fortsatt er valgt, legger et nytt lag med knappen i lag vinduet. Dobbeltklikk på det nye laget navn og navnet "shine". Høyreklikk på bunnen "mask1" laget og gjøre det til en maske. Nå låse opp "shine" laget og klikker på den, slik at du kan begynne å jobbe med dette laget. skinne som vi legger vil begynne å animere omtrent halvveis gjennom animasjon. Bruk scrubber i tidslinjen for å navigere til å ramme 47. Klikk på ramme 47 av "shine" lag, og høyreklikke for å sette inn en keyframe . Tips: Bortsett fra høyre- klikke, kan du også bruke F6 for å sette inn et nøkkelbilde. Dette er nøkkelbilde som vi vil legge vår glans til. La denne nye keyframe valgt, og velg rektangelverktøyet (R) . Velg standard hvit-til-svart lineær gradient for fyll, og ingen slag. Tegn et rektangel på scenen, litt høyere enn scenen høyde, og med en bredde på 150 piksler. Bruk Gradient Transform Tool (F) for å redigere span /rotasjon av denne nye gradient form. Bruk Gradient kontrollhåndtakene for å rotere gradient litt mot venstre. Med denne gradient fortsatt er valgt, åpne Farger-vinduet (Alt + Shift + F9) for å redigere fargene Bruk disse innstillingene til gradient. . Tips: Hvis du vil redigere en farge av en gradient swatch, dobbeltklikker du på swatch selv. Du har nå en svak, falmet hvit gradient av til venstre på scenen. Vi må nå legge til en andre nøkkelbilde til tidslinjen, slik at vi kan animere dette gradient . Klikk på det siste bildet av "shine" lag (ramme 88), og sette inn et nøkkelbilde med F6. Vi er nå klar til å bruke en tween til denne gradienten. Høyreklikk hvor som helst på "shine" lag mellom de to nøkkelbilder, og velg Create Shape Tween. Vi har nå en form tween på lag i tidslinjen. For å faktisk se bevegelse med graderingen, må vi redigere andre nøkkelbilde. Klikk på keyframe i tidslinjen. Stigningen er nå valgt. Bruk høyre piltast for å flytte gradient over til høyre side av scenen . Tips: For å gjøre dette raskt, holder du nede Shift mens du trykker ned høyre piltast. Dette vil flytte formen i 10 trinn pixel. gradient sitter nå på høyre side av scenen. Vi har nå dette på den andre keyframe i tidslinjen. Nå låse "shine" lag, og sørge for at "shine" og nederst "mask1" lag er synlige. Du kan . nå forhåndsvise animasjonen bruker ENTER Animasjonen på dette laget ser slik ut Velg den bunnen "mask1" lag, og legge et nytt lag med New Layer-knappen. Dobbeltklikk på det nye laget, og gi den navnet "fade". Høyreklikk på toppen "mask1" lag , og gjøre det til en maske. Nå låse opp "fade" lag. Det er der vi vil legge vår neste glans effekt. Velg rektangel verktøyet (R). Sett strek til null, og gjøre fyllet svart. Tegn et rektangel litt bredere enn på scenen, og med en høyde på 174. Plasser rektangelet like over scenen. Velg Selection Tool (V) fra verktøyene. Hold musen over nedre kant av den svarte formen. Du vil se en buet stiplet linje vises under markøren, som betyr at du kan redigere vektor form. Klikk og dra den nederste kanten litt opp, og du vil nå ha en konkav form. Anmeldelser Nå velger Subselection Tool (A) fra verktøyene. Klikk på den nederste høyre hjørne av svart form. Bezier punktet vil være svart, som betyr at det blir redigert. Du kan også se kontrollhåndtakene som endrer kurvene i denne formen. . Klikk på kurven håndtaket og dra den ned for å produsere denne formen. Nå klikker på håndtaket for venstre hjørne. Dra den opp og til høyre å produsere denne formen. Legg merke til at kurven lapper scenen litt. Bruk Selection Tool (V) for å bevege figuren opp så det ikke dekker scenen. Velg form og gi det en gradient fylle ved å velge standard svart til hvit fill. Anmeldelser Dette er vårt resultat. Velg Gradient Transform Tool (F) og klikk på gradient form. Bruk gradient kontrollhåndtakene for å rotere det, og klem den vertikalt. Åpne opp Farger-vinduet (Alt + Shift + F9) for å redigere fargene på gradient Flytt de to graderingsprøver tettere sammen, og angi følgende:. Dette er nå vårt resultat. I tidslinjen på "fade" lag, som nå setter inn en keyframe (F6) på rammen 48. Sett inn en tom keyframe (F7) på ramme 49. Høyreklikk hvor som helst mellom de to første nøkkelbilder og velg Create Shape Tween. Vi har nå dette på "fade" lag. Velg den andre keyframe i tidslinjen. Bruke Selection Tool (V), flytte formen ned til bunnen av scenen. . Tips: Legg merke til at bare den hvite delen av gradienten er av bunnen av scenen. Den gjennomsiktige området er ikke synlig. Nå låse "fade" lag og spille av animasjonen ved hjelp av ENTER. Du vil se dette. Nå sørge for at alle lagene er låst og gjøre dem alle synlige Nå når du spiller av animasjonen, vil du se dette: Vi er nesten ferdig! Alt vi har igjen å gjøre er å legge gnisten animasjoner Klikk på den øverste "mask1" lag Nå kan du legge tre- lag ved hjelp av New Layer-knappen. navn dem "gnisten" 1, 2 og 3. Sett keyframes på disse tre nye lag. På keyframe på "sparkle1" lag, kommer vi til å trekke en rød linje. Klikk på Linje Tool (N) og tegne en linje som det vises til her. Klikk på den røde tråd med Selection Tool (V) og konvertere den til et symbol med Modify> Convert to Symbol (F8) . Sørg for at det er et filmklipp, og gi den navnet "sparkleMove". Nå dobbeltklikker du på den nye MovieClip å redigere det i sammenheng. Name " Lag 1 "" referanse "ved å dobbeltklikke på lag navn. Deretter oppretter du en ny layer og kall den "gnisten". Nå utvider rammene ved å klikke på rammer 25 på begge lag, og deretter høyreklikk og velg Sett Frame (F5). Lås referanselaget og tegne en firkant uten slag og en svart fill på gnisten laget. Roter den svarte firkanten 90 grader med Free Transform verktøyet (Q). Bruke Selection Tool (V), musen over hver side av plassen, og klikk og dra i kantene på, skape subtile buer. Din Resultatet er et lite stjerneskudd form. Klikk på figuren, og tilordne den standard svart til hvit radial gradient fra fyllingene. Zoom inn på starburst med Zoom Tool (Z). Deretter Velg Gradient Transform Tool (F). Klikk på starburst å redigere den Åpne opp Farger-vinduet (Alt + Shift + F9) for å redigere fargene på gradient Bruk disse innstillingene til radial gradient:.. Resultatet er dette. Klikk på denne formen med Selection Tool (V), og konvertere den til et symbol med Modify> Convert to Symbol (F8). Kontroller at registreringspunktet er i sentrum, og gi den navnet "gnisten". Zoom ut og sentrere gnisten klippet over den venstre kanten av den røde linjen. Sett inn en keyframe på "gnisten" lag på ramme 25. På denne nye keyframe, bruke Free Transform Tool (Q) for å rotere starburst form 90 grader til høyre. Også bruke Selection Tool til å flytte formen og sentrere den over på høyre side av linjen. Høyreklikk mellom de to nøkkelbilder på dette laget og velg "Create 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 sette strek farge til en alfa nivå på null. Nå låse referanselaget, og klikk på "gnisten" lag for å redigere den. Sett nøkkel på rammer 6 og 20. På ramme 1, klikk på starburst MovieClip. I Egenskaper under Color Effect, Velg Alpha fra Stil nedtrekkslisten. Sett Alpha til null. Gjør det samme på ramme 25. Nå starburst blekner i når den beveger seg over scenen. Det forsvinner også ut. Gå tilbake til masterClip nivå ved å dobbeltklikke på scenen. Klikk på knappen disposisjonsvisning på "sparkle1" lag, og sette inn en Blank Keyframe (F7 ) på rammen 59. Sett gnisten lag 2 og 3 i disposisjonsvisning i tillegg. På "sparkle2" lag, sett inn en tom keyframe (F7) på rammen 69. På "sparkle3" lag, sett inn en tom keyframe (F7) på rammen 79. Kopier og lim inn sparkleMove klippet til den andre to lag. Fordi vi er for tiden i utkastmodus, er det lett å plassere animasjonene der de trenger å være. Linjen viser varigheten av animasjon, og vi vil bruke det som referanse. Fordi disse sparkle animasjoner er ment å være små høydepunkter, vi plassere dem på kantene av teksten. Sett sparkleMove klippet på "sparkle2" nedanfor bokstavene L og E. Nå når du publiserer animasjon (CTRL + ENTER), vil du se dette: Og vi er ferdig! Det flotte med dette oppsettet, er at det er svært enkelt å redigere denne animasjonen. Å endre type innhold, font, etc, trenger du bare å redigere sourceText filmklipp i biblioteket og justere plasseringen av gnisten filmklipp. Lek litt med fargene på hvert element for å gjøre den til din egen: Tusen takk for at du tok deg tid til å gå gjennom denne opplæringen, jeg håper du har lært noen nyttige teknikker. Hvis du har noen spørsmål, ikke nøl med å la dem bak i kommentarfeltet! Anmeldelser
for denne animasjonen.
Trinn 9:. Roter Text
Trinn 10:. justere avstanden
Trinn 11:. konvertere teksten til en MovieClip
Trinn 12:. Place on Fire Flere lag
Trinn 13:. Rediger "Gløder" Layer
Trinn 14: Rediger "Mask3" Layer
Trinn 15:. Rediger "Inner Glow" Layer
Trinn 16: Øk Tidslinje Span
Trinn 17:.. Legg den første animerte Shine
swatch til venstre på gradienten er en hvit fyll, på 0% Alpha.
Klikk like under midten av gradient, for å legge en middel swatch. Gjør det til en hvit fyll, 50% Alpha.
Den prøven på høyre på graderingen er en hvit fyll, på 0% Alpha
Trinn 18:. Legg den andre Animated Shine
< li> swatch til venstre på gradienten er en hvit fyll, på 0% Alpha.
Den prøven på høyre på graderingen er en hvit fyll, 50% Alpha.
Trinn 19:.. Legg den første Sparkle Marker
Sparkle 1 lag har en keyframe på ramme 33.
Sparkle to lag har en keyframe på ramme 43.
Sparkle tre lag har en keyframe på ramme 53.
swatch til venstre på gradienten er en hvit fyll, ved 65% Alpha.
Den prøven på høyre på graderingen er en hvit fyll, på 0% Alpha. < .no>
Trinn 20: Legg de to siste Kles
< p> Plasser sparkleMove klippet på "sparkle3" lag over bokstavene T og E.
Konklusjon