Share
C'è una compulsione fin troppo familiare tra i designer digitali per identificarsi con il loro strumento di scelta. Questo è un peccato perché, quando si tratta di Flash, uno strumento che viene trascurato invariabilmente è Fireworks CS4.
In questo tutorial, scoprirai come utilizzare Fireworks CS4 per accelerare il tuo flusso di lavoro in Flash e, allo stesso tempo, aiutare un segno al neon situato sul muro di un teatro in rovina a Los Angeles sfarfallio tristemente su un piuttosto occupato strada.
Apri il MusicHall.jpg file in Fireworks CS4. Il piano è di estrarre ogni lettera nelle parole "Musica" e "Sala" usando i vettori prodotti da Fireworks.
Seleziona lo strumento Zoom e ingrandisci le parole nel segno. In alternativa, è possibile selezionare il 150% dalla finestra a comparsa dell'ingrandimento nell'angolo in basso a destra della tela.
Fare clic sul chip Colore tratto nel pannello Strumenti per aprire il Selettore colore. Selezionare FF3300 (un'arancia), quindi premere Invio / Invio per accettare la scelta. Imposta il colore di riempimento su Nessuno. Questo imposterà il colore delle lettere mentre le disegniamo. Anche se il tubo sembra essere di colore grigio, sospetto che la luce reale fosse, in una volta, rossa.
Fare clic e tenere premuto sullo strumento Penna. Seleziona lo Strumento traccia vettoriale dall'elenco a discesa. La selezione di questo strumento consente di trattare la penna come un pennello. Anche se questo strumento è più adatto a chi utilizza Penne e tavolette, questo progetto fa sì che anche quelli di noi che disegnano con i topi si divertano un po '.
Nella finestra di ispezione Proprietà, imposta la larghezza del pennello su 4 pixel e seleziona il Morbido arrotondato pennello dalla categoria Base in Tipo di pennello menu a comparsa. Impostare il Precisione valore a 2. La precisione è la precisione con cui vengono disegnati i vettori. Più alto è il numero (il valore massimo è 10) più nodi vettoriali ci saranno nella linea
Selezionare il livello di caratteri e, usando lo strumento, tracciare la lettera "M". Quando finisci ci sarà un nuovo sottolivello chiamato Sentiero. Fai doppio clic sul nome del livello "Percorso" e cambialo in "M".
Se il percorso sembra utilizzare un "Tweak", passare allo strumento sottoselezione, la freccia Hollow nel pannello Strumenti e fare clic sulla forma. Vedrai i vettori. Fare clic su un punto di ancoraggio per rivelare le maniglie e apportare le "modifiche". Per rimuovere un punto selezionalo con lo strumento sottoselezione e premi il tasto Canc. Per cambiare un punto d'angolo in un punto arrotondato, passare allo strumento Penna e fare clic sul punto per aggiungere l'handle mancante.
Se si finisce con punti senza maniglie, selezionare lo strumento Penna e fare clic / trascinare il punto. I fuochi d'artificio hanno la brutta abitudine di voler sempre chiudere il percorso per te. Basta fare doppio clic sul punto finale del percorso per rimuovere la linea. Per eliminare un punto sul percorso, selezionalo con lo strumento Sottoseleziona e premi il tasto Canc.
Ripetere i passaggi da 4 a 7 per le lettere rimanenti nel segno.
Al termine, seleziona File> Salva con nome. Si aprirà la finestra di dialogo Salva. Assegna un nome al file - ho usato "MusicHall" - e seleziona FireworksPNG (*. Png) dal pop-down. Questo ti darà un documento multistrato con trasparenza per ogni livello. Fare clic sul pulsante Salva e uscire da Fireworks.
Come ho sottolineato all'inizio di questo tutorial, Fireworks CS4 tende ad essere considerato dai designer come "un membro della famiglia di Photoshop che preferiamo non discutere". Come stai per scoprire, forse si potrebbe chiedere un po 'più di chiacchiere su Fireworks CS4. Iniziamo.
Avvia Flash CS4 e crea un nuovo documento Flash ActionScript 3.0.
Seleziona File> Importa> Importa in libreria e vai alla cartella in cui hai salvato l'immagine .png. Seleziona l'immagine e fai clic sul pulsante Importa nella libreria. Si aprirà la finestra di dialogo Importa documento Fireworks. Perché la biblioteca? È ampiamente considerata una best practice per importare tutto nella Libreria. In effetti, qualsiasi cosa importata nello Stage rimane bloccata nella Libreria, quindi risparmia un passaggio.
Quando si apre la finestra di dialogo Importa documento Fireworks, fare clic su OK. Se non hai mai visto questa finestra di dialogo prima, esaminala.
Aprire la libreria Flash e aprire Oggetti di Fireworks> MusicHall.png> Pagina 1. Fare doppio clic sul MovieClip Page 1 per aprirlo nell'Editor dei simboli.
Quando guardi il Movie Clip scoprirai perché Fireworks CS4 può semplificarti la vita. Ciascuna delle lettere è sul proprio livello nel Movie Clip. Il MusicHall.png Il simbolo grafico nella libreria è strettamente un segnaposto e non lo useremo. Se fai clic su ogni lettera con lo strumento Sottoselezione di Flash, vedrai che ognuno di essi è un oggetto di disegno vettoriale che significa che puoi apportare ulteriori "ritocchi" se necessario. Quello che non vuoi fare è eliminare il Bitmap 3 immagine nel Oggetti di fuochi d'artificio cartella. È quello che contiene l'immagine di sfondo.
Le lettere sono importanti e avranno bisogno di avere un certo numero di filtri applicati per creare l'effetto. Inoltre, lo sfarfallio sarà controllato da ActionScript 3.0. Questo ti dice che le lettere, nella loro forma attuale, non funzioneranno. Devono essere contenuti in un Movie Clip perché i filtri possono essere applicati solo a testo o Movie Clip. Ecco come:
Seleziona i livelli caratteri, non la cartella, nella cartella Lettering sulla timeline e tagliali.
Incolla le lettere negli Appunti in un nuovo Movie Clip chiamato Lettere.
Torna al Movie Clip 1, elimina il livello Lettering, aggiungi un nuovo livello e trascina il Movie Clip di Lettering sul nuovo layer.
Fai clic una volta sul Movie Clip sul palco e trascinalo in posizione. Usa i tasti freccia per un controllo più preciso. (Immagine 13)
Salva il file nella cartella in cui hai salvato l'immagine importata.
Una cosa che cerco di battere nelle teste dei miei studenti è che "l'arte di Flash è l'arte della sottigliezza". Fai attenzione a come le cose funzionano nel mondo reale e vedrai questo in azione. La creazione di un effetto neon implica molto più del semplice schiaffo delle lettere. C'è un po 'di più quando si tratta di creare un effetto realistico. Iniziamo.
Utilizza i valori mostrati nella figura per aggiungere un filtro smussato al Movie Clip. Questo crea la base per l'effetto dando alle lettere un aspetto 3D e aggiungendo un po 'di luce sui bordi.
Usa i valori mostrati nella figura per aggiungere un filtro bagliore gradiente al Movie Clip ... Impostando il Glow X e Glow Y valori a 0, il tubo neon diventa più definito.
Ora utilizza i valori mostrati nella figura per aggiungere un filtro bagliore al Movie Clip ... I due passaggi precedenti hanno creato il tubo, questo passaggio aggiunge la luce. Assicurati che il colore del bagliore - FFCC00 - corrisponde al colore delle lettere aggiunte in Fireworks.
Un altro filtro; usa i valori mostrati nella figura per aggiungere un filtro Ombra esterna al Movie Clip ... Il colore della goccia Shadow non è nero ma #CCCCCC. Questo dà l'illusione di un po 'di illuminazione - che spiega i valori di Blur a 2 pixel - dietro la luce.
Con il Movie Clip selezionato sullo stage, assegnagli il nome Istanza di "segno" nella finestra di ispezione Proprietà. Questo ora imposta il Movie Clip per ActionScript che controllerà lo sfarfallio dei tubi al neon.
Creare il tipico sfarfallio di un'insegna al neon non è qualcosa che può essere fatto sulla timeline. In questo caso, il bagliore lampeggerà in un modo che simula un'insegna al neon sulle ultime gambe. Per aggiungere l'effetto sfarfallio, attenersi alla seguente procedura.
Aggiungi un nuovo livello chiamato Azioni alla timeline del Movie Clip. Blocca il livello.
Seleziona il primo fotogramma nel livello azioni e seleziona Finestra> Azioni o premi i tasti F9 (PC) o Opzione-F9 (Mac) per aprire il riquadro Script.
Inserisci il seguente codice:
import flash.filters. *; addEventListener (Event.ENTER_FRAME, flickerIt); function flickerIt (evt: Event): void var filters: Array = sign.filters; var glow: GlowFilter = filtri [2]; glow.strength = Math.random () *. 5 + .35; sign.filters = filtri; ;
Se sei nuovo in ActionScript, passa attraverso questo blocco di codice.
Sappiamo che il filtro Glow è quello usato per fornire lo sfarfallio. Per fare ciò devi prima caricare nella classe dei filtri. Quella * è chiamata jolly e indica a Flash di caricare l'intera classe di filtri. Se si desidera utilizzare solo un filtro, si utilizzerà invece il nome del filtro. In questo caso abbiamo quattro filtri nel Movie Clip, quindi un carattere jolly è il modo migliore per andare.
La riga successiva è come avviene lo sfarfallio. Comprendiamo chiaramente qualcosa: ActionScript è piuttosto stupido. Non farà nulla a meno che non senta qualcosa. In questo caso, stiamo dicendo a ActionScript di ascoltare un evento ENTER_FRAME e quando sente quell'evento eseguire qualcosa chiamato flickerIt. È possibile dedurre da ciò che il filmato Flash è un loop frame e, quando la testa di riproduzione entra nel frame dopo aver fatto ciò che deve essere fatto, lo fa di nuovo.
La funzione è dove avviene la magia e viene creato lo sfarfallio.
La prima riga prende i nomi di tutti i filtri che sono stati applicati al Movie Clip del segno e li inserisce in un elenco. Quando ActionScript crea un elenco, chiamato Array, non utilizza i nomi dei filtri. Invece li mette in ordine numerico, il termine è ordine indicizzato, seguendo l'ordine in cui sono stati aggiunti. Se si potesse vedere l'elenco, i quattro filtri apparirebbero come questo: 0,1,2,3 non Bevel, GradientGlow, Glow, DropShadow.
La riga successiva conferisce a GlowFilter il nome variabile di "glow" indicando ad ActionScript di entrare nell'elenco e utilizzare la voce indice etichettata 2 in quella lista.
Ora che ActionScript sa quale filtro usare, creiamo lo sfarfallio "giocando" con il forza proprietà del GlowFilter.
Il valore per la proprietà strength - Math.random () *. 5 + .35- potrebbe sembrarti un po 'misterioso. Davvero non lo è. Il casuale() metodo del Matematica la classe sceglie un numero compreso tra 0 e 1. Quando quel numero viene selezionato, viene diviso a metà e poi aumentato di 0,35. Ciò significa che ogni volta che la testina entra nel primo fotogramma, il colore arancione avrà una forza diversa. Supponiamo che il numero scelto casualmente sia 0,95. Il calcolo sarebbe:
Il bagliore risultante avrebbe un valore di forza dell'83% se dovessimo inserire il valore direttamente nel filtro. Ogni volta che la testina entra nel fotogramma, la luminosità della luce aumenta o diminuisce a seconda del numero casuale.
Chiudere il riquadro Script e fare clic sul pulsante Scena 1 per tornare alla linea temporale principale.
Trascina il Page 1 movielcip sullo stage e seleziona Modifica> Documento. Quando viene visualizzata la finestra di dialogo Proprietà documento, fare clic sul pulsante di opzione Sommario. Ora salva e prova il film.
Rendiamo un po 'più realistico tutto questo e aggiungiamo il ronzio di un'insegna al neon sullo sfondo.
Copia il file Buzz.mp3 dal download nella stessa cartella di .fla.
Aprire il Movie Clip 1, selezionare il primo fotogramma nel livello azioni e aprire il riquadro degli script.
Fare clic una volta dopo la prima riga di codice, premere il tasto Invio / Invio e aggiungere il seguente blocco di codice:
Accentsconagua
var audio: Sound = new Sound (); var req: URLRequest = new URLRequest ("Buzz.mp3"); audio.load (req); audio.play (); Di nuovo, se sei nuovo in ActionScript, passiamo insieme a questo blocco di codice.
È un dato di fatto nella comunità Flash che l'aggiunta di audio alla timeline sia una "pratica malvagia". Questo significa che dobbiamo chiamare il file audio nel filmato usando ActionScript. La prima riga di codice avvia questo processo creando un oggetto audio denominato Audio. Questo oggetto verrà utilizzato in seguito per riprodurre effettivamente il file audio.
Ancora una volta, sappiamo che Flash è stupido, quindi dobbiamo dirgli quale file audio sarà usato. Questo è realizzato attraverso il URLRequest oggetto chiamato req. Il parametro è il nome del file che useremo. Assicurati che le virgolette siano presenti e che il nome corrisponda esattamente al nome del file. Se stai andando altrove sul tuo sito per prendere il file audio, devi inserire un indirizzo assoluto per il file.
Ora che Flash sa quale file riprodurre, starà lì a guardarti con uno stupido sorriso sul suo viso, a meno che tu non gli dica di alimentare quel file audio nel lettore Flash usando il caricare() metodo della classe Sound. Infine, devi dire a Flash di riprodurre effettivamente il suono.
Ora puoi salvare e testare il film!
In questo tutorial hai esplorato il flusso di lavoro tra Fireworks CS4 e Flash CS4. Hai scoperto come utilizzare alcuni degli strumenti di disegno di Fireworks e come viene realizzato il layering in Fireworks. Inoltre, hai importato un documento Fireworks .png in Flash e apprendi che i documenti Fireworks .png aggiungono un Movie Clip alla Flash Library. Hai aperto il MovieClip di Fireworks e, con alcuni filtri e un trattino di ActionScript, hai creato un'insegna al neon lampeggiante con un suono di ronzio al neon accompagnato.
Grazie per la lettura, sentiti libero di lasciare commenti e domande qui sotto :)
