Share
Due volte al mese, rivisitiamo alcuni dei post preferiti dei nostri lettori da tutta la storia di Activetuts +. Questo tutorial è stato pubblicato per la prima volta nell'agosto 2009.
In questo tutorial vedremo come creare un logo che incorpori il mascheramento del gradiente alfa nella sua animazione. Spiegherò alcuni suggerimenti e trucchi su come farlo funzionare ed evitare alcuni problemi comuni.
In primo luogo, una rapida panoramica su ciò a cui miriamo:
Questo è un tutorial per principianti durante il quale spiegherò in dettaglio come creare questo logo e la sua animazione. Lungo il percorso menzionerò alcune parole sul mascheramento del gradiente, le bitmap e le forme all'interno del flash e il codice ActionScript richiesto. Inizialmente tratteremo brevemente alcune tecniche di Photoshop, ma la maggior parte del software di modifica delle immagini dovrebbe essere sufficiente.
Iniziamo!
Assicurati di iniziare scaricando i file di origine. Apri Logo.psd nel file zip.
È anche possibile scaricare e installare il font utilizzato in questo esempio, Lubalin Graph Bold. Questo è opzionale, poiché quando apri il file, Photoshop ti avviserà che il carattere è mancante, ma per questo esercizio puoi comunque seguirlo perfettamente senza.
Aprendo Logo.psd dovresti vedere questo:
Come puoi vedere, abbiamo un livello di sfondo grigio e un livello di testo chiamato "Testo". Se hai installato il font Lubalin, sarai in grado di cambiare il testo in qualcosa di più personale, oppure potresti cambiare il font a tuo piacimento. Lo strato di sfondo grigio è molto superficiale e l'ho scelto solo per aiutare a illustrare il risultato finale.
(Puoi saltare questo passaggio se usi Photoshop.)
Qui spiegherò brevemente gli stili di livello usati in Photoshop, in modo che quelli di voi che vogliono copiare il logo il più fedelmente possibile abbiano la possibilità di farlo nel proprio software di editing delle immagini. Tuttavia, non è importante che il tuo logo sia simile.
Spero che questo ti dia un'idea di come creare qualcosa di simile. Ancora una volta, non è importante per il gusto di comprendere la tecnica spiegata in questo tutorial.
Prima di passare a Flash, potremmo fare l'ultima cosa necessaria in Photoshop; è quello di creare una struttura per l'effetto che stiamo per fare. Non ti preoccupare se non ha ancora senso, vedrai l'intera immagine molto presto!
Dovresti finire con questo:
Seleziona il livello Struttura e premi "V" per selezionare lo strumento sposta. Usando la tastiera, allinea il contorno in modo che si trovi perfettamente in cima al testo originale, in questo modo:
Assicurati che il contorno sia completamente bianco.
Nascondi il livello Struttura e il livello Sfondo. Vai su "Salva per web e dispositivi" e salva come file PNG. Denominalo logo.png. Dovrebbe sembrare come questo:
Quindi, nascondi il livello Testo e riporta il livello Struttura. Salva come "outline.png". Dovrebbe sembrare come questo:
Assicurati di salvare come PNG di alta qualità e abilitato per la trasparenza!
Avvia Flash e crea un nuovo file AS3. Poiché il logo che stiamo creando è 580 per 170 pixel in Photoshop, utilizzeremo le stesse dimensioni per il nostro file Flash. Lascia il FPS e il colore di sfondo così com'è.
Crea e rinomina questi livelli:
Mettili nell'ordine come nella lista, in modo che "Azioni" sia al livello Z più basso e "Shine" al più alto. Ora seleziona il livello Sfondo e crea un rettangolo che copre il livello. Rendi il suo colore una sfumatura che va dal grigio scuro (# 222222) al grigio chiaro (#AAAAAAA). Usa lo strumento Trasformazione sfumatura (tasto di scelta rapida F) per allinearlo in questo modo:
Blocca il livello Sfondo in quanto non lo cambieremo più.
Seleziona il livello Logo. Vai su File> Importa> Importa nello stage o premi Ctrl + R. Seleziona il logo.png precedentemente esportato da Photoshop. L'immagine dovrebbe allinearsi perfettamente nel tuo file Flash. Ora puoi bloccare anche il livello Logo.
Seleziona il livello Struttura e premi ancora Ctrl + R, questa volta importando il contorno.png. Anche, dovrebbe allinearsi giusto. Poiché lo schema è attualmente selezionato, ora sarebbe il momento giusto per colpire F8 e trasformarlo in un MovieClip. Denominare la MovieClip "Outline", quindi andare avanti e inserire un nome di istanza di "outline" all'interno del pannello delle proprietà. Dovresti vedere qualcosa di simile a questo:
Ora vai al pannello Libreria e controlla le proprietà del tuo logo.png. Personalmente l'ho impostato sulla qualità lossless, dal momento che questo logo è qualcosa che potrebbe essere usato come intestazione o qualcosa di simile e ritengo che in questi casi puoi permetterti di non lesinare sulla qualità. È una tua chiamata, ma sicuramente avrà un aspetto sicuramente migliore!
Avere la tua istanza di contorno selezionata e aggiungere a filtro sfocatura. Impostalo su 2 pixel in entrambe le proprietà di sfocatura X e Y e scegli l'alta qualità. Questo renderà il risultato finale molto più bello.
notare che che aggiungendo il filtro sfocatura automaticamente forza Flash a rendere il contorno come una bitmap. Se non si aggiunge il filtro sfocatura, è necessario selezionare la casella di controllo "Cache come bitmap". Maggiori informazioni su questo nel passaggio 10.
Puoi andare avanti e bloccare anche questo livello. Inoltre, ora sarebbe un ottimo momento per salvare il tuo file Flash!
Seleziona il livello Maschera e poi lo strumento rettangolo. Deseleziona il colore del tratto se ne hai uno attualmente applicato.
Disegna un rettangolo, rendilo vicino a 60 pixel di larghezza e 320 pixel di altezza. Quindi, con la tua forma selezionata, vai nel pannello dei colori e dargli un gradiente lineare con tre punti distribuiti uniformemente (di punti Intendo le piccole maniglie che definiscono i colori di un gradiente). Scegli qualsiasi colore per i punti, ma assicurati di avere quello centrale al 100% alfa e quello esterno al 0% alfa. Dovrebbe sembrare come questo:
Premi F8 con la forma selezionata e trasformalo in una Movie Clip chiamata "Maschera". Denominare l'istanza della maschera "theMask". Infine, ruota la maschera di 45 gradi in senso orario. Un modo semplice per farlo è quello di colpire per primo Q per lo strumento di trasformazione, quindi tenere premuto il tasto MAIUSC durante la rotazione in modo che scatti a fermi a 45 °.
Vai al frame 70 del livello Mask nella nostra timeline principale e premi F5 per inserire i frame fino a questo punto. Fare clic con il tasto destro su qualsiasi fotogramma precedente e creare un'interpolazione di movimento. Tieni premuto Maiusc e trascina la maschera sul lato destro del nostro palco. Inoltre, crea cornici sul numero di telaio 70 per i livelli Backround, Logo e Outline. La maschera dovrebbe andare da qui:
A qui:
Come probabilmente avrai capito, useremo la forma sfumata alfa delle maschere per sfumare gradualmente il contorno dentro e fuori. Di solito quando si ha una maschera in Flash, lo si ha su un livello e lo si trasforma in un livello maschera. Il livello maschera ha quindi livelli "figli" il cui contenuto verrà mascherato. Ora, cosa succede se lo facciamo con la nostra attuale configurazione? Questo è il risultato:
Come puoi vedere, è tutt'altro che una transizione graduale. Non c'è alcun tipo di comportamento gradiente.
Perché è questo, allora?
Per far funzionare i gradienti alfa, Flash deve renderizzare i tuoi oggetti come bitmap, non come forme. La nostra maschera corrente è sicuramente una forma (anche se all'interno di una MovieClip) ed è resa come tale. Questo può essere risolto in due modi:
In Flash CS4, hai selezionato la tua maschera. Sotto la sezione Display nel pannello delle proprietà, seleziona la casella "Cache come bitmap".
In Flash CS3, puoi trovarlo proprio sotto le modalità di fusione etichettate come "Usa cache di bitmap di runtime".
Il mio approccio preferito è l'utilizzo di ActionScript. Principalmente perché come sviluppatore (più che come designer), voglio il controllo su tutti gli aspetti tramite il codice in modo da poter applicare qualsiasi effetto a qualsiasi oggetto creato dinamicamente. Qualsiasi sottoclasse di oggetti DisplayObject ha una proprietà booleana cacheAsBitmap. Quindi nel nostro esempio con l'istanza chiamata "theMask" è semplicemente:
theMask.cacheAsBitmap = true;
Vai avanti e crea un fotogramma chiave nel livello Azioni e inserisci quella riga di codice.
Per qualche misterioso motivo, Flash non può ottenere l'effetto desiderato senza ActionScript. Livelli mascherati nella timeline di Flash semplicemente non consenti mascheramento del gradiente alfa!
La soluzione è fortunatamente molto semplice:
outline.mask = theMask;
Come puoi letteralmente leggere dal codice, questo imposta la nostra istanza "theMask" come maschera per la nostra istanza di schema. Vai avanti e mettilo nel livello delle azioni.
Si prega di prendere in considerazione quanto segue:
C'è un bug in Flash per quanto riguarda le istanze di maschera e la timeline. Ho notato il bug nel seguente scenario ipotetico:
La nostra istanza maschera si estende dal fotogramma 1 al 70. L'altra risorsa (il logo) si estende fino al fotogramma 90. Quando Flash viene riprodotto tra i fotogrammi 71 e 90, l'istanza maschera non si trova sullo stage. Ad esempio, se visualizzi il logo in una scheda di Firefox, quindi passa a un'altra scheda, quindi di nuovo al logo, vedrai il bug. Lo vedrai, se la riproduzione è tra i frame 71 e 90, cioè. Il bug mostrerà se stesso come il contorno che si apre e viene smascherato. Quando la riproduzione ritorna al fotogramma 1, torna alla normalità.
La conclusione che possiamo trarre da questo è che se mascherate qualcosa con ActionScript, assicuratevi di tenere sempre la maschera sul palco per evitare che l'oggetto mascherato si mostri.
Vai avanti e prova il film ora. Dovrebbe sembrare come questo:
L'effetto è leggermente troppo forte, quindi puoi ridurre l'alfa dell'istanza del contorno al 75% e sembrerà un po 'più sottile.
Come ultimo tocco finale, aggiungeremo un piccolo effetto brillante al logo.
Il tuo logo dovrebbe ora essere completo al 99%. Probabilmente vorrai comunque aggiustare quando l'animazione si riavvia inserendo più fotogrammi dopo che la maschera è stata animata. Ricorda solo quello che ho menzionato prima; assicurati di mantenere un'istanza della maschera sul palco fino alla fine del ciclo di animazione per evitare il bug di visualizzazione della maschera!
Qui alla fine di questo tutorial spererai di capire con quanta facilità puoi apportare modifiche al logo o applicare l'effetto a qualsiasi logo di testo con un risultato soddisfacente. Prova a sperimentare modificando lo spessore del contorno (ricorda che lo abbiamo reso di 2 pixel di spessore). È anche possibile modificare il testo, i caratteri e i colori. Cambia i colori nella sovrapposizione colore e tratto, o anche meglio; sperimenta con i tuoi stili di livello!
Il cuore dell'animazione si trova nel contorno gradiente alfa che si trova all'interno del carattere tipografico, quindi quando sperimenterai da solo dovresti provare ad avere una sorta di tratto o bordo esterno per mantenere questo effetto. Certo, tutto va bene, tutto ciò che è bello per te è buono!
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
Accentsconagua