Share
In questo tutorial convertirai il tuo testo per dargli un effetto simile al vetro, usando i filtri in Flash. Questa tecnica funziona anche con la grafica vettoriale. Lo realizzeremo con un metodo abbastanza semplice di sovrapposizione di più livelli con effetti diversi.
Diamo un'occhiata al risultato finale su cui lavoreremo. Questo è un file swf e il testo qui sotto è selezionabile, quindi vai avanti, seleziona il testo in vetro per vedere un evidenziatore simile al vetro:
Apri la tua versione di Flash e apri un nuovo file Flash. La versione di ActionScript non ha importanza per questo tutorial, in quanto non esiste alcun codice. Nel tuo file, metti un campo di testo sul palco. Per fare ciò, fai clic sul pulsante di testo (T) nel menu Strumenti e trascina un rettangolo sul palco come mostrato nell'immagine seguente:
Una volta disegnato, puoi inserire la tua scelta di testo nel campo e impostare le sue proprietà di conseguenza. L'effetto vetro è più evidente nei font più grandi e più audaci, quindi ho scelto Elephant qui, ma puoi scegliere qualsiasi carattere che ti piace. Fare clic sul pulsante Selezionabile per rendere il testo selezionabile nel file SWF finale. Il colore del carattere non importa qui
Opzionalmente, potresti voler vedere come funziona l'effetto sulla grafica vettoriale. Quindi disegnerò una piccola immagine utilizzando lo strumento di disegno di base di Flash. Si noti che l'effetto vetro non terrà conto dei contorni o dei colori, quindi per ora è sufficiente una vecchia grafica semplice in un singolo colore. Una volta fatto con i passaggi 1 e 2, avrai qualcosa di simile sul tuo palco:
È possibile importare grafica vettoriale anche su superficie Flash, ma prendere nota che le differenze di colore non vengono rilevate da questo effetto.
Ora creeremo il nostro primo simbolo. Seleziona il tuo testo e tutta la grafica vettoriale (puoi farlo trascinando un rettangolo attorno a tutto). Con tutte le cose selezionate, fare clic con il tasto destro del mouse e fare clic su "Converti in simbolo" come mostrato di seguito:
Assegna un nome al simbolo come qualsiasi cosa desideri e imposta il suo tipo su Clip filmato; L'ho chiamato "gtext". Quindi, quando fai clic sulla finestra e apri la finestra della biblioteca, puoi visualizzare un oggetto chiamato gtext lì dentro. Da qui in poi, mi riferirò a questo simbolo come "gtext". Questo sarà un buon punto per salvare il tuo lavoro.
Ancora una volta, fai clic con il tasto destro del mouse sul simbolo gtext appena creato e converti in simbolo, questa volta inserisci il nome come "vetro". Lo facciamo per creare un altro film contenitore.
Ora avremo un simbolo di vetro, all'interno del quale abbiamo un simbolo gtext. Entrambi questi simboli sono visibili nella libreria.
Ora fai doppio clic sul simbolo del vetro per visualizzarlo in modalità di modifica. Tutti i passaggi rimanenti verranno eseguiti all'interno di questo simbolo di vetro.
Fare doppio clic sull'icona quadrata blu accanto al simbolo del vetro nel pannello della libreria (Finestra> Libreria). Questo aprirà il simbolo del vetro in modalità modifica. Abbiamo un livello chiamato Layer 1 in questa finestra. Aggiungi un nuovo livello facendo clic sul pulsante Nuovo livello nell'angolo in basso a sinistra della finestra della timeline. Fai clic e tieni premuto il pulsante del mouse sul nuovo livello per iniziare a trascinarlo e trascinare questo nuovo livello sotto il livello corrente 1. Rinominare il nuovo livello in "sfondo" facendo doppio clic sul nome del livello.
Potresti voler nascondere o bloccare il livello 1 per poter modificare facilmente il livello di sfondo. Fare clic sul punto sotto l'icona occhio / lucchetto nella timeline per farlo. Ora seleziona il livello di sfondo nella timeline e fai clic sullo strumento Rettangolo dal pannello degli strumenti; imposta il contorno su null e colora su blu nel pannello Proprietà come mostrato nell'immagine sottostante. Ho selezionato anche l'arrotondamento degli angoli per rendere il mio rettangolo un aspetto migliore.
MANCIA: Puoi anche usare un'immagine per lo sfondo qui, invece di un semplice riempimento.
Durante la modifica del simbolo del vetro, nel pannello Timeline, fai clic tre volte sul pulsante Nuovo livello per creare tre nuovi livelli. Ora hai cinque livelli: il livello di sfondo, il livello 1 e tre nuovi livelli. Rinomina livello 1 a Bevel2 e gli altri nuovi livelli a ombra, schema, Bevel1, e Bevel2 come mostrato di seguito (puoi rinominare i livelli facendo doppio clic sui loro nomi).
Dal pannello Proprietà, notare le coordinate x e y di gtext già posizionato sul palco, che è ora attivo Bevel2 layer a x = 75 ey = 10 per il mio disegno.
Quindi blocca tutti i livelli tranne quello su cui stai lavorando (facendo clic sul punto sotto il lucchetto nella finestra della timeline) per assicurarti di non spostare le cose per sbaglio. Puoi anche nascondere alcuni livelli facendo clic sul punto sotto l'occhio nella finestra della timeline. Selezionare Bevel2 livello, aprire il pannello della libreria e trascinare gtext sul palco.
Una volta posizionato sul palco, fai clic sul nuovo gtext simbolo per selezionarlo e impostare la sua posizione xey nel pannello Proprietà> scheda posizione per essere esattamente uguale al livello precedente, che era x = 75 e y = 10 per il mio filmato.
Una volta terminato il posizionamento, blocca il livello corrente in modo che non venga modificato accidentalmente.
Ripeti i due passaggi precedenti (Passaggio 6 e Passaggio 7) per i due livelli rimanenti, quindi alla fine, ciascuno dei quattro livelli avrà lo stesso oggetto posizionato alle stesse coordinate. L'immagine sotto mostra che specificando le coordinate esattamente nella casella delle proprietà, non abbiamo bordi sovrapposti.
Blocca e nascondi tutti i livelli (facendo clic sui punti sotto l'occhio e il lucchetto nella timeline) e sblocca e mostra solo il ombra strato. Seleziona il gtext simbolo su questo livello e aprire il pannello Proprietà. Nelle proprietà, espandere la scheda "filtri" se è ridotta a icona. Nell'angolo in basso a sinistra, c'è un pulsante Aggiungi filtro; fare clic su questo e selezionare il filtro Smusso.
Regola le impostazioni di smusso su Sfocatura = 20px, Forza = 80%, Angolo = 90 °, Distanza = 10px e seleziona la casella contro Knockout. Se si desidera applicare la regolazione su una scala più piccola, con testo più piccolo, è possibile modificare Sfocatura e Proprietà distanza in proporzione, ma in generale, Sfocatura sotto 10 px non sarà adatto.
Blocca e nascondi tutti gli altri livelli e sblocca e mostra solo il livello del contorno. Seleziona il gtext simbolo su questo livello, apri la scheda Filtri nel pannello Proprietà e aggiungi un filtro Bagliore. Imposta le proprietà del filtro glow su Blur = 2px, Forza = 50%; imposta il Colore su bianco e controlla le opzioni Interno e Knockout. Questo è mostrato nell'immagine qui sotto e puoi anche vedere il contorno risultante.
Blocca e nascondi tutti gli altri livelli e sblocca e mostra solo il livello del contorno. Seleziona il gtext simbolo su questo livello, apri la scheda Filtri nel pannello Proprietà e aggiungi un altro filtro Smusso. Impostare le proprietà del filtro smusso su Sfocatura = 2 pixel, Angolo su 69 °, Distanza su 1 pixel e selezionare l'opzione Taglio. Questo è dimostrato nell'immagine qui sotto.
Blocca e nascondi tutti gli altri livelli e sblocca e mostra solo il schema strato. Seleziona il gtext simbolo su questo livello, apri la scheda Filtri nel pannello Proprietà e aggiungi un altro filtro Bevel. Imposta le proprietà del filtro smusso su Sfocatura = 6px, Forza = 45%, Angolo su 45 °, Distanza su 2px e ancora una volta controlla l'opzione Knockout. Questo è mostrato nell'immagine qui sotto.
Seleziona il gtext istanza di simbolo in ombra livello, blocca tutti gli altri livelli in modo che non siano disturbati. Nel pannello Proprietà, seleziona la scheda Filtri e aggiungi un filtro Ombra oltre allo smusso esistente. Imposta Sfocatura su 0px, Forza su 150%, Angolo su qualsiasi valore a seconda di dove vuoi che siano il sole e la distanza (prova tra 10px e 20px). Le impostazioni e il risultato finale sono visibili nell'immagine sottostante.
Rivela tutti i livelli e metti alla prova il tuo filmato in Flash, il risultato finale sarà qualcosa di simile al film mostrato sotto.
Il film non sembra troppo impressionante con solo quel testo. Cambiamo un po 'il testo; vai su Finestra> Libreria e fai doppio clic sull'icona accanto a gtext simbolo per modificarlo nel pannello Vista. Ora tocca a te modificare gli elementi all'interno di questo simbolo. Ad esempio, puoi aggiungere nuovi campi di testo con dimensioni di carattere diverse, aggiungere più grafica o animazioni. Ho giocato un po 'con il gtext e ha aggiunto alcune cose tra cui diversi tipi di carattere, rettangoli, grafica animata con forme mutevoli, una linea tratteggiata grassa e alcuni elementi grafici con valore alfa al 50%. Ecco quello che ho sul tavolo da disegno all'interno gtext simbolo.
Il risultato finale può essere visto esportando il file SWF:
Possiamo cambiare la quantità di riflesso visibile sul vetro come desideriamo. Sblocca il ombra strato e blocca tutti gli altri livelli. Seleziona il gtext su questo livello e fare clic sulla scheda "Effetto colore" nel pannello Proprietà. Selezionare Luminosità dal menu a discesa e cambia l'importo a circa -30; questo ridurrà la quantità di riflesso dalla superficie del vetro. L'immagine seguente mostra l'effetto prima e dopo di farlo:
Ah, ma la luce del sole è gialla, non bianca. Possiamo cambiare il colore della luce di riflessione modificando le impostazioni del filtro per ombra strato. Annulla la modifica della luminosità dal passaggio precedente modificando lo stile in Color Effect nessuna. Mantieni il gtext sopra ombra livello selezionato come in quel passaggio, quindi selezionare la scheda Filtro, modificare il colore di evidenziazione del filtro smussatura in giallo e impostare l'Alpha al 60%.
Per cambiare il colore del vetro stesso, iniziare nuovamente selezionando il filtro Smusso nel ombra strato come nel passaggio precedente. Questa volta invece di modificare l'evidenziazione, modifica la proprietà Ombra per selezionare il colore. Per ottenere il miglior effetto cromatico, abbina i colori Highlight e Shadow con una buona variazione di tonalità: con un evidenziatore giallo posso scegliere tra qualsiasi tonalità di giallo, arancione, verde o addirittura rosso senza rendere il mio vetro non realistico. Ancora una volta impostare il valore Alfa come nel passaggio precedente a qualcosa vicino al 50% in base al colore. Ho scelto il 50% di rosso qui.
MANCIA: potresti anche voler cambiare il colore dell'ombra e lo sfondo per abbinare queste impostazioni.
Quindi ora abbiamo due simboli nella nostra libreria. Uno è il bicchiere simbolo e altro è il gtext simbolo. Il simbolo del vetro può essere modificato per modificare le proprietà del vetro mentre il simbolo gtext può essere modificato per cambiare il contenuto da glassare. Puoi trascinare e rilasciare il simbolo del vetro in qualsiasi animazione Flash di tua scelta per riutilizzare questo effetto e modificare di conseguenza il contenuto del gtext. In breve, hai a portata di mano un componente di glassifier bello e maneggevole. Ti consiglierei di giocare con le impostazioni e disattivare i livelli o aggiungere nuovi livelli per vedere come personalizzare ulteriormente questo vetro.
Perché non provare a creare uno script JSFL in grado di aggiungere automaticamente l'effetto Glassify a uno dei simboli vettoriali con un solo clic?
Accentsconagua