Aggiungi un po 'di Sparkle animato al tuo testo - Basix

Questo tutorial copre la creazione di un effetto di testo lucido, che può quindi essere facilmente modificato per la prototipazione rapida.

L'animazione può essere pubblicata su Flash Player 8 e versioni successive e può essere creata in Flash 8 e versioni successive. Non esiste alcun ActionScript che esegue questa animazione, quindi può essere facilmente implementato in entrambi i progetti AS2 e AS3. Può essere un divertente logo introduttivo in Flash, un banner pubblicitario o comunque lo ritieni opportuno. Divertiti con esso!.


Anteprima del risultato finale

Diamo un'occhiata al risultato finale su cui lavoreremo:


Passaggio 1: crea un nuovo documento Flash

Utilizzo di File> Nuovo> Crea un nuovo documento Flash ActionScript 2 o 3.

Nella finestra Proprietà, imposta la dimensione dello stage 590 per 300.

Inoltre, modifica i fotogrammi al secondo in 30.


Passaggio 2: forma sfumata

Usando lo strumento Rettangolo (R), posiziona un quadrato sullo stage con il gradiente radiale bianco e nero preimpostato e nessun tratto.

Non importa quanto sia grande il quadrato che crei.

Etichetta questo livello "gradiente".


Passaggio 3: ridimensiona e allinea

Seleziona il tuo quadrato sfumato e apri le opzioni di allineamento usando CTRL + K.

Assicurarsi che "Allinea allo stage" sia selezionato.

Per prima cosa abbina la larghezza e l'altezza del quadrato allo stage.

Il tuo risultato dovrebbe essere qualcosa del genere:

Quindi allinea il bordo sinistro della forma allo stage.

Il tuo risultato dovrebbe essere ora come segue:

Quindi allinea il bordo superiore della forma allo stage.

Bingo:


Passaggio 4: modifica le dimensioni e i colori

Seleziona lo strumento di trasformazione del gradiente (F).

Clicca sul gradiente sul palco.

Usando le maniglie di controllo del gradiente, altera le dimensioni e la forma del gradiente in modo che sia distribuito più uniformemente sullo stage.

Apri la finestra Colore (Alt + Maiusc + F9).

Cambia il colore bianco sulla sfumatura con un grigio # 333333 e fai scorrere il colore verso destra in modo che ci sia un cerchio grigio nel mezzo del gradiente.

Questo è ciò che dovresti vedere:


Passaggio 5: aggiungere linee orizzontali

Crea un nuovo livello sopra il gradiente e chiamalo "linee".

Usando lo strumento Rettangolo (R), disegna un rettangolo sullo stage senza tratti e un riempimento bianco opaco al 9%.

Utilizzando il pannello delle proprietà, modifica la dimensione della forma in 590 per 5.

Utilizzando le opzioni di allineamento, allinea la forma al centro orizzontale dello stage.

Quindi, utilizzando le opzioni di allineamento, allinea la forma al bordo superiore dello stage.

Con questa forma ancora selezionata, copialo e incollalo in posizione (CTRL + MAIUSC + V).

Sposta questa nuova forma di dieci pixel sotto la prima forma e duplicala nuovamente usando lo stesso metodo. Ora hai qualcosa di simile a questo:

Duplica questo processo sopra finché non hai coperto l'intero schermo con queste forme orizzontali. Finirai con qualcosa di simile a questo:


Passaggio 6: Logo Animation Movieclip

Crea un nuovo livello chiamato "logo".

Disegna un rettangolo (R) con un tratto bianco, ma senza riempimento.

In Proprietà, modifica le dimensioni in 590 x 300 px.

Usando la finestra Allinea (CTRL + K), allinea la forma a sinistra e il bordo superiore in modo che il risultato sia questo:

Seleziona il rettangolo bianco e convertilo in un simbolo in Modifica> Converti in simbolo.

Assegna un nome al Movie Clip "MasterClip" e assicurati che il punto di registrazione sia nell'angolo in alto a sinistra. Quindi fare clic su "OK".


Passaggio 7: rendere il rettangolo una guida

Fare doppio clic sulla MasterClip sullo stage per modificarla nel contesto.

Fai doppio clic sul nome del livello e modificalo in "dimensioni dello stage".

Fai clic con il tasto destro sul livello e scegli "Guida".

Blocca il livello facendo clic sul secondo cerchio bianco.

Ora hai un livello di riferimento, che ti dice quanto è grande lo stage, nel contesto di MasterClip.


Passaggio 8: aggiungere il testo

Crea un nuovo livello e aggiungi il tuo testo a questo Movie Clip usando lo strumento testo (T). Ho scelto SF Sports Night per questa animazione.

Queste sono le impostazioni del tipo da applicare al campo di testo (le tue impostazioni disponibili potrebbero essere leggermente diverse, a seconda della versione di Flash che stai utilizzando):

Per ottenere l'interruzione di riga nel testo, immettere manualmente nove spazi vuoti sulla seconda riga per allineare il testo come visualizzato.


Passaggio 9: ruota il testo

Seleziona il testo e, utilizzando la finestra Trasforma (CTRL + T), ruota il testo a -6,5.


Passaggio 10: regolare la spaziatura

Seleziona il testo, spostalo verso il basso in modo che si trovi al centro del riquadro.


Passaggio 11: Converti il ​​testo in un MovieSlip

Seleziona il testo sullo stage e convertilo in un simbolo con Modifica> Converti in simbolo (o F8).

Assegna un nome alla clip, "sourceText" e assicurati che si tratti di un filmato, non di un pulsante o di una clip grafica. Quindi fare clic su "OK".


Passaggio 12: posizionare su altri quattro livelli

Seleziona il clip di testo e copialo, usando CTRL + C.

Crea quattro nuovi livelli usando il pulsante "Nuovo livello" all'interno del riquadro della timeline.

.

Metti il ​​clip di testo che hai copiato su ogni livello, usando Modifica> Incolla in posizione.

Ora hai cinque livelli identici.

Rinominare ogni livello facendo doppio clic sul nome di ogni livello. Usa l'immagine sotto come guida per nominare ognuno di essi.

Blocca e nascondi tutti i tuoi livelli usando il lucchetto e i pulsanti visibili all'interno della timeline.

Nascondendo e bloccando ogni livello, saremo in grado di isolare e modificare ogni livello in modo indipendente.


Passaggio 13: modifica il livello "Glows"

Rendi visibile il livello "bagliori" e sbloccalo. Fai clic su questo livello per assicurarti di modificarlo.

Seleziona il clip di testo sullo stage e assicurati che i filtri siano aperti nel pannello Proprietà.

Aggiungi un bagliore al clip di testo, usando il pulsante Aggiungi filtro. Scegli l'opzione "Glow".

Applica queste impostazioni al bagliore appena creato.

Ora hai questo effetto:

Ora usando lo stesso metodo, applica un secondo filtro glow alla stessa clip.

Applica queste impostazioni al nuovo bagliore appena creato.

Ora hai questo effetto:

Ora applica un'ombra esterna a questa stessa clip.

Applica queste impostazioni all'ombra esterna appena creata.

Ora hai questo effetto:


Passaggio 14: modifica il livello "Mask3"

Con il livello "bagliore" ancora visibile e selezionato, aggiungi un nuovo livello. Chiamalo "verde".

.

Adesso blocca e nascondi e "illumina" il livello. Rendi visibile il livello "mask3" e sbloccalo.

Rendi la maschera "maschera3" una maschera facendo clic con il tasto destro sul livello e scegliendo "maschera".

Il livello verde verrà temporaneamente bloccato. Sbloccalo facendo clic sull'icona del lucchetto del livello.

Usa lo strumento Rettangolo (R) per disegnare una forma sul livello "verde".

Applicare nessun tratto e il gradiente lineare nero-bianco standard.

Disegna la forma in modo che sia più grande della dimensione dello stage.

Seleziona lo strumento Trasforma sfumatura (F) e fai clic sul gradiente sullo stage.

Usando le maniglie di trasformazione del gradiente, ruotare il gradiente di 90 gradi e modificare l'estensione del gradiente in modo che copra solo l'area di testo dello stage.

Modificare i colori del gradiente usando la finestra del colore. (Alt + Maiusc + F9).

Il verde a destra è # 8CD566.

Il verde a sinistra è # 43851F.

Ora blocca il livello "verde" e assicurati che anche il livello "maschera3" sia bloccato. Riattiva anche la visibilità del livello "bagliori" ...

Il risultato è ora questo:


Passaggio 15: modifica il livello "Bagliore interno"

Rendi visibile il livello "bagliore interno" e sbloccalo.

Seleziona la clip sul livello "bagliore interno" e aggiungi un bagliore sotto i filtri nella finestra delle proiezioni.

Applica queste impostazioni al nuovo bagliore:

Mancia: Si noti che questo bagliore è un bagliore interno, il che significa che si illumina dall'interno, non dall'esterno.

Il tuo risultato è ora questo:

Con la clip ancora selezionata, modificare la modalità di fusione su Sovrapposizione sotto Visualizza nel pannello Proprietà:

Con la nuova modalità di fusione in atto, il risultato è ora questo:


Passaggio 16: Aumentare l'intervallo temporale

Questo masterClip è attualmente solo lungo un frame. Abbiamo bisogno di aggiungere più fotogrammi, in modo da poter animare gli effetti di lucentezza.

All'interno della timeline, fare clic e trascinare per evidenziare tutti i livelli sul fotogramma 88.

Con la cornice ancora selezionata, fare clic con il tasto destro e scegliere "Inserisci cornice" dall'elenco a discesa.

Mancia: Oltre a fare clic con il tasto destro per aggiungere cornici, puoi anche usare F5 come scorciatoia.

La timeline ora ha un'estensione di 88 fotogrammi.


Passaggio 17: aggiungi il primo lustro animato

Inizia prima bloccando e nascondendo il livello "bagliore interno".

Con il livello "bagliore interno" ancora selezionato, aggiungi un nuovo livello usando il pulsante all'interno della finestra dei livelli.

Fare doppio clic sul nome del nuovo livello e denominarlo "brillare".

Fai clic con il tasto destro sul livello inferiore "maschera1" e falla diventare una maschera.

Ora sblocca il livello "lucentezza" e fai clic su di esso, in modo da poter iniziare a lavorare su questo livello.

Lo splendore che stiamo aggiungendo inizierà ad animare all'incirca a metà dell'animazione. Usa lo scrubber nella timeline per navigare al frame 47.

Fai clic sul fotogramma 47 del livello "lucentezza" e fai clic con il pulsante destro del mouse per inserire un fotogramma chiave.

Mancia: Oltre a fare clic con il tasto destro, puoi anche usare F6 per inserire un fotogramma chiave.

Questo è il keyframe a cui aggiungeremo il nostro splendore.

Lasciare questo nuovo keyframe selezionato e selezionare lo Strumento Rettangolo (R).

Scegli il gradiente lineare bianco-nero standard per il riempimento e nessun tratto.

Disegna un rettangolo sul palco, leggermente più alto dell'altezza del palco e con una larghezza di 150 pixel.

Utilizzare lo strumento Trasformazione sfumatura (F) per modificare l'estensione / la rotazione di questa nuova forma gradiente.

Usa le maniglie di controllo del gradiente per ruotare leggermente il gradiente verso sinistra.

Con questa sfumatura ancora selezionata, apri la finestra Colori (Alt + Maiusc + F9) per modificare i colori.

Applica queste impostazioni al tuo gradiente:

  • Il campione a sinistra del gradiente è un riempimento bianco, con lo 0% di Alpha.
  • Fai clic appena sotto la metà del gradiente per aggiungere un campione intermedio. Rendilo un riempimento bianco, al 50% di Alpha.
  • Il campione sulla destra del gradiente è un riempimento bianco, con lo 0% di Alpha.

Mancia: Per modificare un colore di un campione di sfumatura, fai doppio clic sul campione stesso.

Ora hai un debole gradiente bianco sbiadito a sinistra del palco.

Ora dobbiamo aggiungere un secondo keyframe alla timeline, in modo da poter animare questo gradiente. Fare clic sull'ultimo fotogramma del livello "lucentezza" (fotogramma 88) e inserire un fotogramma chiave con F6.

Ora siamo pronti per applicare un'interpolazione a questo gradiente.

Fai clic con il pulsante destro del mouse su un livello "lucido" tra i due fotogrammi chiave e scegli Crea interpolazione di forma.

Ora abbiamo un'interpolazione di forma sul livello all'interno della timeline.

Per vedere effettivamente il movimento con il gradiente, dobbiamo modificare il secondo fotogramma chiave. Fai clic sul fotogramma chiave nella timeline.

Il gradiente è ora selezionato. Usa il tasto freccia destra per spostare la sfumatura sul lato destro dello stage.

Mancia: Per eseguire questa operazione rapidamente, tenere premuto MAIUSC mentre si preme il tasto freccia destra. Questo sposta la forma con incrementi di 10 pixel.

Il gradiente è ora seduto sul lato destro del palco. Ora lo abbiamo sul secondo keyframe nella timeline.

Ora blocca il livello "lucentezza" e assicurati che siano visibili "lucentezza" e il livello inferiore "maschera1".

È ora possibile visualizzare l'anteprima dell'animazione utilizzando il tasto INVIO.

L'animazione su questo livello è simile a questa.


Passaggio 18: aggiungi il secondo lustro animato

Seleziona il livello inferiore "maschera1" e aggiungi un nuovo livello usando il pulsante Nuovo livello.

Fare doppio clic sul nuovo livello e denominarlo "dissolvenza".

Fai clic con il tasto destro del mouse sul livello "maschera1" in alto e fallo diventare una maschera.

Ora sblocca il livello "dissolvenza". Questo è dove aggiungeremo il nostro prossimo effetto brillante.

Seleziona lo strumento rettangolo (R). Impostare il tratto su null e rendere il riempimento nero.

Disegna un rettangolo leggermente più largo del palco e con un'altezza di 174.

Posiziona il rettangolo appena sopra il palco.

Seleziona lo strumento di selezione (V) dagli strumenti.

Passa il mouse sul bordo inferiore della forma nera. Verrà visualizzata una linea tratteggiata curva sotto il cursore, a indicare che è possibile modificare la forma vettoriale.

Fai clic e trascina leggermente il bordo inferiore verso l'alto, e ora avrai una forma concava.

Ora seleziona lo strumento Sottoselezione (A) dagli strumenti.

Fare clic sull'angolo in basso a destra della forma nera. Il punto Bezier sarà nero, a indicare che è in corso di modifica. Puoi anche vedere le maniglie di controllo che alterano le curve di questa forma ...

Fare clic sulla maniglia della curva e trascinarla verso il basso per produrre questa forma.

Ora clicca sulla maniglia per l'angolo sinistro.

Trascinalo verso l'alto e verso destra per produrre questa forma.

Si noti che la curva si sovrappone leggermente allo stage. Usa lo strumento Selezione (V) per spostare la forma verso l'alto in modo che non copra il livello.

Seleziona la forma e assegnagli un riempimento sfumato scegliendo il riempimento standard da nero a bianco.

Questo è il nostro risultato.

Seleziona lo strumento Trasforma sfumatura (F) e fai clic sulla forma della sfumatura.

Usa le maniglie di controllo del gradiente per ruotarlo e schiaccia verticalmente.

Apri la finestra Colori (Alt + Maiusc + F9) per modificare i colori del gradiente.

Sposta i due campioni gradiente più vicini e imposta quanto segue:

  • Il campione a sinistra del gradiente è un riempimento bianco, con lo 0% di Alpha.
  • Il campione sulla destra del gradiente è un riempimento bianco, al 50% di Alpha.

Questo è ora il nostro risultato.

Nella timeline sul livello "dissolvenza", ora inserisci un fotogramma chiave (F6) sul fotogramma 48.

Inserire un fotogramma chiave vuoto (F7) sul fotogramma 49.

Fai clic con il pulsante destro del mouse su qualsiasi punto tra i primi due fotogrammi chiave e seleziona Crea interpolazione forma.

Ora abbiamo questo sul livello "dissolvenza".

Seleziona il secondo fotogramma chiave nella timeline.

Usando lo strumento Selezione (V), sposta la forma verso il basso dello stage ...

Mancia: Si noti che solo la parte bianca del gradiente è fuori dal fondo del palco. L'area trasparente non è visibile.

Ora blocca il livello "fade" e riproduci l'animazione usando il tasto ENTER. Vedrai questo:

Ora assicurati che tutti i livelli siano bloccati e rendili tutti visibili.

Ora quando riproduci l'animazione, vedrai questo:

Abbiamo quasi finito! Tutto ciò che resta da fare è aggiungere le animazioni sparkle.


Passaggio 19: aggiungi la prima evidenziazione a Sparkle

Fai clic sul livello superiore "Maschera1".

Ora aggiungi tre livelli usando il pulsante Nuovo livello.

Chiamali "sparkle" 1, 2 e 3.

Inserisci i fotogrammi chiave su questi tre nuovi livelli.

  • Sparkle 1 layer ha un keyframe sul frame 33.
  • Sparkle 2 layer ha un keyframe sul frame 43.
  • Sparkle 3 layer ha un keyframe sul frame 53.

Sul fotogramma chiave sul livello "sparkle1", disegneremo una linea rossa. Fare clic sullo strumento Linea (N) e tracciare una linea come appare qui.

Fare clic sulla linea rossa con lo strumento Selezione (V) e convertirlo in un simbolo con Modifica> Converti in simbolo (F8).

Assicurati che si tratti di un filmato e chiamalo "sparkleMove".

Ora fai doppio clic sul nuovo Movie Clip per modificarlo nel contesto.

Nome "Livello 1" "riferimento" facendo doppio clic sul Nome livello. Quindi crea un nuovo livello e chiamalo "sparkle".

Ora estendi i fotogrammi facendo clic sui fotogrammi 25 su entrambi i livelli, quindi fai clic con il pulsante destro del mouse e scegli Inserisci fotogramma (F5).

Blocca il livello di riferimento e disegna un quadrato senza tratto e un riempimento nero sullo strato di scintillio.

Ruota il quadrato nero di 90 gradi con lo strumento Trasformazione libera (Q).

Usando lo strumento Selezione (V), fai scorrere il mouse su ciascun lato del quadrato e fai clic e trascina i bordi all'interno, creando archi sottili. Il tuo risultato è una piccola forma a stella.

Fai clic sulla forma e assegnagli il gradiente radiale predefinito da nero a bianco dei Riempimenti.

Ingrandisci lo starburst con lo Zoom Tool (Z). Quindi selezionare lo strumento Trasforma sfumatura (F). Clicca sullo starburst per modificarlo.

Apri la finestra Colori (Alt + Maiusc + F9) per modificare i colori del gradiente.

Applica queste impostazioni al gradiente radiale:

  • Il campione a sinistra del gradiente è un riempimento bianco, al 65% di Alpha.
  • Il campione sulla destra del gradiente è un riempimento bianco, con lo 0% di Alpha.

Il risultato è questo.

Fare clic su questa forma con lo strumento Selezione (V) e convertirlo in un simbolo con Modifica> Converti in simbolo (F8). Assicurati che il punto di registrazione sia al centro e chiamalo "sparkle".

Rimpicciolire e centrare la clip della scintilla sul bordo sinistro della linea rossa.

Inserisci un fotogramma chiave sul livello "sparkle" sul frame 25.

In questo nuovo fotogramma chiave, utilizzare lo strumento Trasformazione libera (Q) per ruotare la forma a stella di 90 gradi a destra. Utilizzare anche lo strumento Selezione per spostare la forma e centrarla sul lato destro della linea.

Fai clic con il tasto destro tra i due fotogrammi chiave su questo livello e seleziona "Crea Tween classico".

Ora puoi guardare l'animazione. Vedrai la stella muoversi e ruotare da sinistra a destra.

Sblocca il livello "riferimento" e imposta il colore del tratto su un livello alfa pari a zero.

Ora blocca il livello di riferimento e fai clic sul livello "sparkle" per modificarlo.

Inserire i fotogrammi chiave sui fotogrammi 6 e 20.

Sul fotogramma 1, fai clic sul Movie Clip di Starburst. In Proprietà, sotto Effetto colore, scegli Alfa dall'elenco a discesa Stile. Imposta l'Alpha su zero.

Fai lo stesso sul frame 25.

Ora lo starburst si attenua mentre attraversa il palco. Inoltre svanisce.

Tornare al livello MasterClip facendo doppio clic sul palco.

Fare clic sul pulsante della vista struttura sul livello "sparkle1" e inserire un fotogramma chiave vuoto (F7) sul riquadro 59.

Metti anche gli strati di scintillio 2 e 3 in vista.

Sul livello "sparkle2", inserire un fotogramma chiave vuoto (F7) sul fotogramma 69.

Sul livello "sparkle3", inserire un fotogramma chiave vuoto (F7) sul frame 79.


Passo 20: aggiungi le ultime due scintille

Copia e incolla la clip sparkleMove sugli altri due livelli.

Poich