Share
Non posso dirvi quanti articoli e tutorial mi sono imbattuto su come utilizzare i simboli in Flash che scaricano immediatamente il simbolo grafico come privo di scopi pratici, relegandolo come un gradino sopra al raggruppamento degli elementi. Questo articolo tenterà di dissipare questo mito mostrando che il simbolo grafico ha in realtà alcune funzioni piuttosto interessanti e interessanti e sapere come e quando utilizzarle è uno strumento utile quando si creano animazioni in Flash.
Tutorial ripubblicatoOgni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nell'ottobre del 2011.
Ho iniziato a utilizzare Flash con la versione MX. E attraverso tutti i miglioramenti e le funzionalità aggiunte in ogni versione, una cosa che è rimasta costante è il simbolo grafico. Ma ciò che è rimasto costante, abbastanza sorprendentemente, è il numero di utenti Flash che non sanno cosa fa realmente il simbolo grafico. Da qualche parte lungo la linea, questo simbolo ha ricevuto un brutto colpo come totalmente inutile. Se ti sei mai chiesto quale sia esattamente lo scopo del simbolo grafico e perché Adobe continui a tenerlo in Flash, questo articolo è per te.
Inizieremo con le cose più conosciute e basilari che puoi fare con il simbolo grafico che è inerente a tutti i simboli Flash. Proprio come i clip filmato e i pulsanti, un simbolo grafico può avere effetti cromatici applicati come alfa e tinta, diviso tra i suoi elementi comprendenti tramite CMD / CTRL-B e, naturalmente, ha le sue proprietà di interpolazione del movimento.
So che è lontano da una rivelazione, ma menziono questi attributi perché penso che sia importante tenere a mente che un simbolo grafico nel suo nucleo è proprio come qualsiasi altro simbolo Flash, ma con un proprio set unico di funzionalità.
Uno dei più grandi malintesi sul simbolo grafico è che non può contenere animazioni - o che, se lo fa, Flash lo ignorerà semplicemente in fase di runtime. Non solo è completamente falso, ma in realtà i simboli grafici sono molto potenti e flessibili quando si tratta di creare un'animazione della timeline.
Proprio come un filmato, un simbolo grafico può contenere animazioni nidificate in aggiunta alle animazioni annidate di altri simboli grafici e clip filmato. È il simbolo di scelta utilizzato dalla maggior parte degli animatori Flash professionali, soprattutto quando si tratta di creare animazioni complesse della timeline con molte risorse vettoriali. Vediamo perché.
Il vero potere del simbolo grafico si trova nel pannello Proprietà. Qui è dove puoi controllare l'animazione all'interno di un simbolo grafico, che è uno dei gioielli nascosti e sconosciuti in Flash. L'approccio che sto per descrivere è in realtà una tecnica di animazione indicata da molti come il metodo di Chris Georgenes.
Se non hai familiarità con Chris Georgenes, è un animatore Flash molto rispettato che ha innovato questo approccio all'animazione con simboli grafici e ho avuto la fortuna di seguire un corso di animazione dei personaggi di cui è stato istruttore. Consiglio vivamente di leggere molte delle sue tecniche e trucchi di animazione Flash.
Sono sufficienti informazioni di base, quindi cerchiamo di fare i conti con le cose buone. Quando crei un simbolo grafico (Modifica> Converti in simbolo), hai tre opzioni per gestire come il simbolo riprodurrà la sua animazione; per vederli, con il simbolo selezionato, vai al pannello Proprietà e guarda sotto la categoria Looping.
Quando fai clic sul menu a discesa Opzioni, ti verranno presentate tre opzioni tra cui scegliere: Loop, Play Once e Single Frame. Inoltre, sotto il menu a discesa, vedrai un campo di input piccolo con l'etichetta "First". Prima di arrivare a questo, comprendiamo le tre opzioni di loop, ma tieni a mente quel piccolo campo di input mentre passiamo attraverso ogni opzione in quanto si uniranno tutti.
Nota: Se non vedi il campo Opzioni, fai clic sulla freccia a sinistra di Looping per visualizzare il menu a discesa.
Ciclo continuo: Loop è l'impostazione predefinita per ogni nuovo simbolo grafico che viene creato. Fondamentalmente questa opzione consente di eseguire il ciclo continuo di tutte le animazioni nidificate al suo interno. In altre parole, la sequenza temporale del simbolo riprodurrà la sua durata e quindi ricomincerà, proprio come un filmato.
Gioca una volta: Questa impostazione è abbastanza auto-esplicativa pure. Riprodurrà la sequenza temporale del simbolo una volta e poi si fermerà. Consideralo come il modo in cui il simbolo grafico aggiunge un'azione stop () sul fotogramma finale della sua timeline.
Frame singolo: Un singolo fotogramma consente di visualizzare solo un determinato fotogramma all'interno della timeline del simbolo. Mentre la sequenza temporale del simbolo è effettivamente in riproduzione quando è impostata su Loop o Play Once, l'opzione Single Frame salta la timeline su una specifica cornice all'interno del simbolo e rimane lì. Mi piace pensarlo come la versione dell'uso del simbolo grafico gotoAndStop (frame). Quindi come è fatto? Se stai richiamando quel piccolo campo di input etichettato "Primo" che ti ho detto di tenere a mente qualche paragrafo indietro, stai andando nella giusta direzione.
Sebbene molto ambiguo e facilmente inosservato, questo campo di input è il luogo in cui tutto il divertimento si verifica per il controllo della timeline di un determinato simbolo. Questa è una delle mie funzioni preferite del simbolo grafico perché puoi scegliere come target un frame specifico sulla timeline del simbolo digitando un numero di frame nel campo di input.
Quando viene creato per la prima volta un simbolo grafico, il primo campo di immissione del fotogramma viene impostato su 1 per impostazione predefinita, come indicato dal numero 1 all'interno del campo. Ciò significa che il fotogramma 1 sulla timeline del simbolo sarà il primo fotogramma in cui inizierà l'animazione. È qui che entra in gioco l'etichetta First; pensala come il primo fotogramma che desideri visualizzare o il primo fotogramma da cui vuoi giocare. Quindi, se hai un simbolo impostato su Single Frame e scrivi 6 nel primo campo frame, verrà visualizzato ciò che si trova sul frame 6. Se il numero di frame fornito è vuoto o se il simbolo non ha nemmeno più frame nella sua timeline , quindi non verrà visualizzato nulla.
Puoi anche utilizzare il primo campo del fotogramma con le opzioni Loop e Riproduci una volta. Se si imposta un simbolo su Riproduci una volta e si digita un determinato numero di fotogramma nel campo di inserimento, esso partirà da quella cornice. Lo stesso vale se lo si imposta su loop. Il simbolo inizierà il ciclo iniziando dal numero di frame che hai fornito nel campo di input. Tieni presente però che se hai inserito 6, inizierà il ciclo dal frame 6, ma una volta raggiunta la fine della timeline continuerà a frame 1 nella sua solita maniera.
Ora, se ti sei affidato a te stesso per provare tutto ciò con Flash, probabilmente ti starai chiedendo perché la tua animazione non stia giocando nel modo in cui ho descritto. Apri il file chiamato looping_basics.fla nel pacchetto sorgente. Fare doppio clic sul simbolo grafico che si trova sullo stage per controllare l'animazione che si trova all'interno di esso. Nella timeline vedrai due livelli che si estendono su 239 fotogrammi, con un nuovo fotogramma chiave su entrambi i livelli ogni 30 fotogrammi (vale a dire ogni secondo). Quindi, se si pulisce la testina, vedremo che fondamentalmente abbiamo un'animazione di 8 secondi in cui ogni secondo il numero nel centro aumenta di uno e lo sfondo circolare cambia colore. Con ogni mezzo niente di stravagante.
Dopo aver visualizzato l'essenza dell'animazione, tornare alla timeline principale, fare clic sul simbolo grafico e controllare il pannello delle proprietà per assicurarsi che il simbolo sia impostato su Loop e 1 nel campo del primo frame. Ora prova il film.
Cosa sta succedendo qui? Il nostro simbolo non si anima anche se lo abbiamo impostato su Loop. Giusto per ora potresti voler dire che mi hai detto così su Flash semplicemente ignorando l'animazione di un simbolo grafico. Prima di farlo, andiamo alla fine di questo.
Questa è la trappola comune che molte persone sperimentano quando creano un'animazione all'interno di un simbolo grafico. Ed è probabilmente la ragione per cui il simbolo è considerato inutile. Crei un'animazione sulla timeline del grafico quindi posiziona il simbolo sulla timeline principale proprio come faresti con un clip filmato. Ma quando esci per esportare il tuo film, il simbolo rimane semplicemente immobile sul palco. È qui che risiede l'equivoco: ci aspettiamo che il simbolo grafico si comporti come un filmato.
Il trucco per il simbolo grafico è che lo è timeline guidata - il che significa che la sua timeline coincide con la timeline su cui è posto il simbolo. Quindi, se è posizionato sul palcoscenico, ha bisogno di altrettanti fotogrammi sulla timeline principale come se fosse sulla propria timeline per riprodurre l'animazione nella sua interezza. In altre parole, mentre un filmato verrà riprodotto indipendentemente dalla timeline, un simbolo grafico verrà riprodotto solo fino a quando la timeline del genitore lo consentirà.
In poche parole, un simbolo grafico ha bisogno di frame.
Se torni al nostro esempio in Flash, la ragione per cui il nostro simbolo grafico non viene riprodotto è perché c'è un solo fotogramma sulla timeline principale. Quindi aggiungiamo alcuni fotogrammi. Solo a scopo dimostrativo, vai al frame 30 e aggiungi i frame. Ora vai al frame 60 e fai lo stesso. Vedi cosa sta succedendo qui? Poi vai al frame 90. Molto bello, eh? Continua ad aggiungere tutti i frame che vuoi e prova il film. Dovresti vedere l'animazione iniziare a suonare, a seconda di quanti fotogrammi hai sulla tua timeline principale. Ricorda che il nostro simbolo ha 239 fotogrammi sulla sua timeline, quindi per poter vedere l'intera animazione, ci deve essere la stessa quantità sulla timeline principale.
Nota: Tieni presente che questo principio di cui abbiamo discusso non si applica solo alla linea temporale principale. La linea temporale in cui viene effettivamente posizionato il simbolo grafico ne determinerà la riproduzione. Quindi, per esempio, se la tua grafica è all'interno di un filmato, hai bisogno di fotogrammi sulla timeline del filmato per rendere l'animazione grafica. Provalo tu stesso.
Come probabilmente hai notato dal file di esempio, puoi effettivamente vedere il simbolo grafico animato mentre fai scorrere la timeline dallo stage. Sì, molto bello. Questo ci porta ad un'altra caratteristica unica che differenzia un simbolo grafico da un clip filmato e probabilmente lo troverai più utile. Poiché il simbolo grafico è guidato dalla timeline, un vantaggio è che l'animazione si aggiorna automaticamente in Flash. Finché hai una grande quantità di fotogrammi sulla timeline in cui si trova il tuo simbolo, puoi sempre vedere il tuo simbolo grafico animato dal vivo.
Esploriamo queste tecniche un po 'di più per darti un altro sguardo su come incorporare un simbolo grafico in un progetto. Apri il file chiamato facial_expressions.fla questo è nel pacchetto sorgente. Sarai salutato con una bella faccia sorridente sul palco che faceva parte di un'illustrazione per un personaggio animato che ho creato qualche anno fa.
Se fai clic sul simbolo, vedrai che è un elemento grafico con il nome di una libreria espressioni, e che è impostato su Single Frame 1. Vai all'interno del simbolo e vedrai tre livelli: occhi, bocca e capo, ognuno dei quali contiene simboli grafici. Il capo il livello contiene tutti gli altri elementi che compongono il volto sorridente di questo piccolo ragazzo, e se sblocchi il livello e fai doppio clic sul simbolo, vedrai che ci sono anche tutti i simboli grafici. Per i nostri scopi, però, ci concentreremo sui simboli grafici per la bocca e gli occhi. Vai dentro il bocca simbolo e vedrai che contiene varie forme di bocca in vari punti della timeline, e lo stesso vale per gli occhi. Permettetemi di precisare che gli occhi destro e sinistro sono istanze dello stesso simbolo esatto.
Entra dentro entrambi i simboli della bocca e degli occhi e dai un'occhiata in giro. Noterai che ho un etichette del telaio strato corrispondente ad ogni espressione facciale e che ho scelto di mettere ciascuno di essi su un fotogramma chiave che si trova a 10 fotogrammi. Non c'è motivo per impostare la sequenza temporale come questa al di fuori del mio modo di cercare di mantenerlo pulito e organizzato. Probabilmente non avrei usato le etichette dei fotogrammi in ActionScript (anche se potrei se convertissi la mia grafica in un filmato) ma avere un'etichetta per ogni nuova espressione mi permette di sapere a colpo d'occhio dove una certa espressione si trova sulla timeline. E oltre a darmi un po 'di spazio in modo che le etichette possano effettivamente essere lette, il divario di 10 fotogrammi tra ogni fotogramma chiave mi rende semplicemente facile ricordare dove si verifica una nuova espressione di bocca o occhi sulla timeline.
Ora salta di un livello verso il espressioni grafica in cui abbiamo solo i nostri tre strati di bocca, occhi e testa, e inizia a usare questi simboli per creare animazioni. Ci sono molti modi in cui puoi impostare le cose qui, a seconda di cosa vuoi fare, ma cerchiamo di mantenerlo semplice e fare in modo che il nostro ragazzo lampeggi.
Inserisci un nuovo frame su tutti e tre i livelli. Verificare che entrambi i simboli della bocca e degli occhi siano impostati su Fotogramma singolo 1 e quindi inserire un nuovo fotogramma chiave su occhi livello e imposta entrambi gli occhi su Single Frame 10.
Torna sul palco, dai circa 45 fotogrammi, crea un nuovo fotogramma chiave sul fotogramma 30 e modifica il 1 nel primo fotogramma field to a 2. Ricorda che i tuoi keyframe dovrebbero essere impostati su Single Frame. Ora provalo e il tuo ragazzo dovrebbe battere le palpebre. So che non è niente di speciale, ma il punto qui non è tanto su ciò che può essere creato con il simbolo grafico, ma piuttosto sulla convenienza e flessibilità che fornisce. Ne parleremo tra un po ', ma spero che questo esempio cambierà il tuo modo di lavorare.
Personalmente, ogni volta che sto lavorando a un progetto che richiede la creazione di numerose animazioni della timeline, considero l'utilizzo del simbolo grafico. Qualsiasi utente Flash che abbia trascorso innumerevoli ore ad armeggiare con numerosi clip filmato che contengono tutte le proprie animazioni probabilmente si è imbattuto in una situazione in cui desiderava poter individuare dove si trovava qualcosa sulla timeline di un certo clip filmato da un altro punto del film. Dalla mia esperienza, ci sono state molte volte in cui ho un'animazione all'interno di un filmato e voglio usarlo in un'altra clip, ma avevo bisogno di sapere quando è stato raggiunto un certo punto dell'animazione in modo che possa accadere qualcos'altro. Dovrei ricorrere a un noioso processo di salto avanti e indietro tra i filmati e il conteggio dei fotogrammi, così ho potuto capire dove posizionarlo sulla timeline del secondo clip. Usare la mia animazione come grafica mi permetterebbe di vedere tutto senza dover esportare il mio intero film.
Mancia: Anche quando sto usando un filmato per un'animazione della timeline, a volte lo imposto temporaneamente come grafica nel pannello delle proprietà solo così posso visualizzare la riproduzione dell'animazione mentre altri oggetti si animano attorno ad essa. Posso quindi ottenere un migliore senso del tempo complessivo e apportare alcune modifiche; quando ho finito, l'ho impostato per agire come un filmato.
Per fare ciò, basta fare clic sul simbolo, andare nella parte superiore del pannello Proprietà e fare clic sul menu a discesa. Qui è dove puoi cambiare il comportamento del tuo simbolo al volo, alternandolo tra un filmato e un grafico. Questo è molto utile quando si desidera utilizzare lo stesso simbolo di un clip filmato e di una grafica per tutto il progetto. Nota: Questa tecnica non funzionerà se si tenta di passare da un clip filmato a un pulsante o tra un elemento grafico e un pulsante.
Ecco alcuni altri usi pratici di quando potresti voler considerare l'utilizzo di un simbolo grafico:
Presentazioni animate: Le presentazioni sono i progetti in cui mi trovo a usare i simboli grafici di più. La maggior parte delle presentazioni flash tendono ad essere pesanti nell'animazione e nella sincronizzazione di immagini in uno script. Il simbolo grafico si presta bene a progetti come questi che sono di natura lineare e hanno un'interazione utente limitata.
Sincronizzare l'audio con un'animazione: Questa è un'estensione del punto precedente. Ogni volta che si desidera una sincronizzazione precisa tra un suono e un'animazione, l'esecuzione dell'audio insieme al simbolo grafico animato ti darà quel tipo di controllo. Molte presentazioni di voiceover in cui sono stato coinvolto hanno utilizzato simboli grafici animati.
Animazione personaggio: Ogni volta che creerai intricate animazioni con illustrazioni vettoriali con molti livelli, il simbolo grafico è la strada da percorrere. Molte animazioni di cartoni animati sono state realizzate con il flash e scommetterei su qualsiasi cosa che, se dovessi esaminare il FLA in cui sono state realizzate, la biblioteca sarebbe stata piena zeppa di simboli grafici. Proprio come le espressioni facciali, creare sequenze per cicli di camminata e sequenze di sincronizzazione labiale sono lavori ideali per l'utilizzo del simbolo grafico.
Creazione di più varianti di un simbolo: Abbiamo già toccato questo concetto in tutto l'articolo, ma penso che valga la pena di dare ulteriori spiegazioni. Se ricordate nell'esempio delle espressioni facciali di prima, la grafica della bocca e degli occhi è stata utilizzata per alloggiare tutte le nostre diverse forme di bocca e occhi per facilitare l'animazione. Bene, a volte uso il simbolo grafico per tenere solo un mucchio di filmati simili che sono leggermente diversi, o che mi piace riferirsi come pose.
In alcuni casi, non sto cercando di sequenziare queste pose per un'animazione come nell'esempio di espressioni facciali, ma di agire come detentore dei miei elementi, il che semplificherà il processo di accesso a loro in seguito. Trovo molto più facile fare riferimento ad ogni posa se sono tutte sul proprio fotogramma all'interno di un grafico invece di dover setacciare una timeline di un filmato lungo con numerosi livelli. Tutto quello che devo fare è indirizzare il numero di fotogramma di quello che voglio nel primo campo del fotogramma, come abbiamo fatto nell'esempio delle espressioni facciali. E se ho bisogno di controllare una qualsiasi delle mie pose con actionscript, trasformo la mia grafica in un filmato.
Il simbolo grafico non è privo di limiti e svantaggi. Mentre il simbolo grafico può essere molto utile in determinate situazioni, non lo suppongo in sostituzione del filmato. Nella maggior parte dei casi, un clip filmato sarà il tuo simbolo di scelta e andrà benissimo anche per creare la maggior parte delle animazioni della timeline. Ecco alcune cose da tenere a mente quando usi il simbolo grafico:
Non può essere controllato da ActionScript: Questo è un punto ovvio, ma è un grosso problema. A differenza di un clip filmato, non è possibile assegnare un simbolo grafico a un nome di istanza e qualsiasi script inserito nella relativa sequenza temporale verrà ignorato. Tieni presente che puoi comunque utilizzare un clip filmato con ActionScript sulla timeline come elemento grafico e verrà riprodotto normalmente.
Non è possibile applicare i filtri: Per qualche motivo, Flash non consente di applicare alcuno dei filtri o delle modalità di fusione a un simbolo grafico. Per aggirare questo problema, puoi semplicemente inserire il simbolo grafico in un clip filmato e quindi applicare il filtro alla clip.
I simboli grafici di interpolazione classica con animazione nidificata possono essere problematici: Questo è uno che ho imparato nel modo più duro ed è un problema che può accadere facilmente senza che tu te ne renda conto. Supponiamo che tu abbia un simbolo grafico con un'animazione piuttosto coinvolta al suo interno e che tu voglia interpolare il simbolo sulla timeline principale da sinistra a destra sullo stage mentre l'animazione nidificata viene riprodotta. Crei il tuo primo fotogramma chiave sulla timeline e lo imposti su Riproduci una volta a partire dal fotogramma 1 nel pannello Proprietà. Quando crei il tuo secondo fotogramma chiave, Flash lo imposterà automaticamente su Riproduci una volta e aggiornerà il primo fotogramma di conseguenza con il numero di fotogramma corretto in sequenza.
Quindi, usando l'esempio precedente se il tuo primo fotogramma chiave è sul fotogramma 10 sulla timeline principale e il tuo fotogramma chiave successivo è sul fotogramma 40, il simbolo grafico su questo fotogramma sarà impostato su Riproduci una volta con il primo campo fotogramma già impostato su 30. Scaricalo ? Ha inserito il numero di fotogramma da cui eri rimasto? Ora se si desidera aggiungere o eliminare i fotogrammi all'interno dell'interpolazione, il simbolo su quel secondo fotogramma chiave avrà ancora 30 set come primo fotogramma da riprodurre, eliminando completamente l'ordine dell'animazione nidificata. È solo qualcosa da tenere a mente; quando inizialmente crei fotogrammi chiave, il primo numero di fotogramma verrà aggiornato correttamente, ma una volta che inizi a spostare i fotogrammi chiave su e giù nella timeline, le cose verranno eliminate.
Nota: Questo vale solo per le interpolazioni classiche. Se si utilizza il metodo per la creazione di interpolazioni di movimento introdotto in Flash CS4, ciò non costituirà un problema.
Spero che dopo aver letto questo articolo abbiate un'opinione diversa sul simbolo grafico. Anche se potrebbe non essere qualcosa che puoi vedere usando spesso tutto ciò, la cosa da tenere a mente con il simbolo grafico è che si tratta di sapere quando usarlo. Come sviluppatore, non lo uso spesso, ma so di averlo come opzione se la situazione lo richiede. Come con la maggior parte delle cose in Flash, si tratta di una questione di preferenze personali. Se scegli e scegli saggiamente i tuoi punti, usare il simbolo grafico può essere comodo e un risparmio di tempo.
.
Accentsconagua