Share
Per la maggior parte dei neofiti, il concetto di simboli in Flash può essere piuttosto confuso. Conosco abbastanza designer che - anche dopo aver lavorato con Flash per anni - sono piuttosto ignoranti sul modo migliore di usare i simboli nel loro lavoro. Diamo uno sguardo più da vicino a simboli e testo.
Benvenuti alla seconda parte della nostra serie di suggerimenti Flash e best practice per i progettisti. Nella prima parte abbiamo esaminato il disegno, che di solito è la prima cosa da affrontare quando si inizia con Flash. Una volta che hai padroneggiato gli strumenti di creazione, però, non ci vuole troppo tempo per capire che le forme da sole sono piuttosto inutili. Certo, puoi applicare colori e tratti e manipolarli nel modo desiderato, ma probabilmente sei lì per far muovere le cose. E il modo migliore per iniziare è convertire le forme in simboli.
Un altro aspetto critico del design in Flash di cui parleremo oggi è il testo. Nel corso degli anni, la capacità di Flash di creare e rendere il testo ha fatto passi da gigante. Ricordo ancora i giorni in cui non esisteva l'impostazione "anti-alias per l'animazione" e il pensiero di avere blocchi di testo era a dir poco un incubo. Ora tutto è finito e con la possibilità di applicare i filtri direttamente al testo, ora è una routine molto meno dolorosa. Eppure, oggi c'è molto che si può fare con lo strumento di testo in Flash. Vedremo alcuni di questi trucchi.
Sebbene questo post sia stato scritto per Flash Professional CS5, la maggior parte dei suggerimenti dovrebbe funzionare bene nelle versioni precedenti. Cercherò di renderlo un punto da evidenziare ovunque qualcosa sia molto specifico per l'ultima versione di Flash.
Per cominciare, ci sono tre tipi di simboli che puoi creare in Flash: grafica, pulsante e clip filmato. Anche se i nomi dovrebbero essere abbastanza auto-esplicativi, non è sempre ovvio qual è la differenza tra i tre. Per favore, sopportami se questo sembra troppo semplice, ma conosco molti designer di Flash che non sono del tutto sicuri di cosa sia. Quindi ecco qui:
Nota: È possibile impostare il comportamento di un'istanza di qualsiasi simbolo singolarmente. Hai posizionato un filmato sul palco ma non lo vuoi animare? Basta selezionare l'istanza e modificare il comportamento nel pannello 'Proprietà'.
Le modalità di fusione portano una delle funzionalità più amate dalle applicazioni di modifica delle immagini allo spazio di lavoro vettoriale di Flash. Come Photoshop, Fireworks, Illustrator e altri, è possibile modificare l'aspetto degli elementi sovrapponendoli e scegliendo diverse modalità di trasparenza. Ad esempio, potresti voler scurire una parte di un oggetto in base a ciò che è sopra di esso, o magari alleggerirlo. Un modo comune per usarlo è quando si ha un'immagine del logo raster importata con uno sfondo bianco che vorrebbe mostrare. Basta cambiare la modalità di fusione in "Moltiplica" nella sezione "Visualizza" del pannello Proprietà.
Si noti che i metodi di fusione possono essere applicati solo ai simboli dei clip filmato e dei pulsanti. Per ulteriori informazioni sulle modalità di fusione in Flash, prova questo screencast.
Supponiamo che tu abbia bisogno di uno sfondo in legno realistico per il tuo design. Ci sono tonnellate di trame gratuite disponibili, ma un problema comune è che tendono tutte a sembrare piatte. Ora, se stai cercando di ricreare un tavolo, ci deve essere una parvenza di una fonte di luce da uno dei lati, giusto? Proviamo a ricreare quell'effetto in Flash usando le modalità di fusione.
Una delle prime cose che si impara sull'animazione in Flash è come svanire la roba dentro e fuori. E la tecnica predefinita per farlo è cambiare il valore 'Alfa' di un simbolo. Ma c'è molto di più per gli altri elementi in quell'elenco a discesa, noti insieme come Effetti colore.
Anche se Alpha sembra il modo migliore per svanire la roba dentro e fuori, non è sempre l'opzione più adatta. Ad esempio, se il tuo simbolo è un disegno con una serie di forme sovrapposte, Alpha riduce la trasparenza di ogni forma individualmente, che porta artefatti negli stati semi-trasparenti. In questi casi, se la grafica è su uno sfondo bianco, la modifica dei valori di luminosità funziona molto meglio per ottenere l'effetto dissolvenza. Se lo sfondo è di un altro colore piatto, puoi anche usare Tinta e riempire la grafica con il colore di sfondo. Sfortunatamente, se lo sfondo è una sfumatura, un motivo o qualsiasi altra cosa, la tua unica opzione è quella di entrare nel simbolo, spezzare tutte le forme e i gruppi e portarli su un singolo livello per creare un oggetto.
Si noti che, a differenza delle modalità di fusione, gli effetti colore possono essere applicati a qualsiasi simbolo: clip, pulsanti e grafica.
Quando si progettano interfacce in Photoshop o Fireworks, una tecnica che uso molto spesso è creare un elemento di interfaccia di base, come un pulsante, e apportare variazioni di colore utilizzando i filtri Hue-Saturation. Recentemente ho trovato un modo per fare qualcosa di simile in Flash. L'idea è di creare un singolo simbolo neutro e quindi utilizzare gli effetti colore avanzati per creare variazioni di esso.
Per cominciare, crea un simbolo con qualsiasi sfumatura, evidenziazione, ombra e sovrapposizione che desideri. Puoi farlo in qualsiasi colore, ma io preferisco usare solo le sfumature di grigio. Quindi il risultato è un pulsante opaco, in plastica o qualsiasi altro stile, ma in grigio. Quindi, posiziona un paio di istanze del simbolo sul palco. Quindi seleziona semplicemente un'istanza, applica l'effetto colore "Avanzato" e inizia a giocare con i valori dei colori RGB. Se stai lottando per farlo bene, un modo è selezionare Tinta, scegliere il colore che ti serve e poi andare al pannello Avanzate per modificarlo in base alle tue esigenze. Risciacquare e ripetere per gli altri simboli.
Per molto tempo, i progettisti di Flash sono rimasti fedeli agli strumenti di creazione rigorosamente vettoriale in Flash. Le ombre sfumate e le sfocature del movimento erano cose che hai violato insieme usando gradienti scomodi o immagini raster importate da Photoshop. Poi sono arrivati i filtri in Flash 8 e tutto è cambiato. Oggi, praticamente all'interno di Flash è possibile praticamente un effetto sgargiante con una buona quantità di controllo su tutti gli aspetti del filtro. Diamo un'occhiata ad alcuni modi in cui puoi utilizzare i filtri per aggiungere un po 'di jazz ai tuoi progetti.
Certo, ci sono ombre esterne per quando vuoi che un elemento si distingua dallo sfondo o lo distingui da tutto il resto. Ma per le occasioni in cui una semplice ombra non è sufficiente, puoi giocare un po 'con la sfumatura per aggiungere quel tocco in più di stile. Un modo per farlo è creare una copia della tua forma e modificarla per ottenere la curvatura di cui hai bisogno. Quindi convertirlo in un simbolo, aggiungere un effetto di colore tinta nero al 100% e una sfocatura gaussiana. Quindi regola semplicemente il valore alfa per ottenere l'intensità necessaria dall'ombra. Dai un'occhiata a un paio di esempi qui sotto.
Ricordarsi di impostare la qualità su "Alta" ogni volta che si utilizza un filtro. L'effetto è molto molto meglio. Mi batte totalmente perché "Low" è impostato come impostazione di qualità predefinita. Ho usato filtri in animazioni seriamente complesse e l'impatto sulle prestazioni è appena percettibile.
Quando si parla di testo grande, l'effetto tipografico è piuttosto popolare. Con la possibilità di aggiungere più filtri dello stesso tipo (qualcosa che persino Photoshop non ha ancora), l'effetto di stampa tipografica è piuttosto facile da ottenere in Flash. Tutto quello che devi fare è semplicemente aggiungere due filtri ombra-ombra, uno con un'ombra 1px bianca a 90 gradi e un nero a 270 gradi. Guarda l'immagine qui sotto per tutti i dettagli.
Un'altra funzionalità introdotta in Flash 8 è il ridimensionamento a 9 sezioni: la possibilità di ridimensionare un oggetto senza influire su alcune parti di esso. Il miglior esempio in cui funziona sono i rettangoli arrotondati. Se hai provato a creare rettangoli arrotondati e ridimensionarli, sai come gli angoli tendono ad andare fuori forma se il ridimensionamento non è proporzionato. Il ridimensionamento a 9 porzioni risolve questo problema. Vediamo come.
Ecco come funziona. Ho etichettato ciascuna delle 9 sezioni che ora abbiamo diviso per le linee tratteggiate. Quando tornate sul palco e ridimensionate l'oggetto - proporzionalmente o in altro modo - A, C, E & G non scaleranno affatto. Manterranno la loro dimensione e forma. B & F scalerà solo orizzontalmente, mentre D & H scalerà solo verticalmente. In questo modo, qualunque cosa tu faccia, il rettangolo arrotondato conserva la sua personalità principale. Questa tecnica può fare miracoli quando hai bisogno di un mucchio di elementi simili a diverse dimensioni - come pulsanti, popup o fumetti.
Nota che il ridimensionamento a 9 porzioni non funzionerà in ogni contesto. Se la grafica presenta forme complesse o angoli molto arrotondati con riflessi curvi o persino riempimenti a motivo, il ridimensionamento potrebbe non essere coerente.
Se c'era una lamentela su Flash che ha sopraffatto qualsiasi altra cosa in passato, era il modo in cui Flash gestiva il testo. Nelle versioni precedenti, specialmente prima dell'acquisizione di Adobe, il rendering del testo in Flash è stato risucchiato, per dirla in modo appropriato. Tanto che ha respinto un'intera industria di caratteri pixel che sono stati progettati per aggirare l'incapacità di Flash di rendere il testo piccolo uniformemente. Per fortuna, con l'aggiunta di "anti-alias per la leggibilità" le cose sono diventate molto più sopportabili. L'unico consiglio che do a chiunque io abbia mai avuto a che fare con Flash è di evitare qualsiasi cosa che non sia l'anti-alias per la leggibilità, come la peste. In effetti, non so nemmeno perché abbiano questa opzione più da quando il rendering del testo nel player è stato ora ottimizzato abbastanza per rendere facilmente il testo 'leggibile' in qualsiasi scenario.
Un fenomeno molto nuovo e potenzialmente innovativo è il Text Layout Framework (o TLF), l'API ad alto livello di Adobe per il nuovo motore di testo Flash introdotto in Flash Player 10. A partire dalla versione CS5, è possibile scegliere di il blocco di testo è "Testo classico" o "Testo TLF". Lo so, come se già non ci fossero troppe scelte da fare, giusto !? Bene, sebbene TLF sia chiaramente il futuro del testo in Flash, non è compatibile con le versioni precedenti di Flash Player o con AS2 e versioni successive. Quindi, se vuoi la retrocompatibilità, il testo classico è la soluzione migliore.
In pratica, TLF aggiunge un carico di funzionalità alle vecchie parole in Flash. Vuoi mantenere uno stretto controllo sulla guida e sul tracciamento del tuo testo? Hai bisogno di un orientamento verticale per il testo? Che ne dici di più colonne? Diamine, hai solo bisogno che il tuo testo si mostri bene in una lingua indiana (o la maggior parte degli script non latini, per quello)? TLF è la risposta. Ci sono troppe opzioni per modificare l'aspetto di un blocco di testo TLF, molto più di quello che possiamo coprire qui. Direi di andare avanti e giocarci un po '. Ricorda solo che questo non è stato troppo lungo - né nello strumento di creazione né nel giocatore - e ci sono sicuramente alcuni problemi con il modo in cui funziona al momento.
Ecco alcuni suggerimenti rapidi e le best practice consigliate per sfruttare al meglio gli strumenti di testo in Flash:
Ed è così che fai simboli e testo in Flash. Naturalmente, c'è un sacco di più a questi che abbiamo coperto, ma il tentativo è stato quello di provare e compilare alcuni dei migliori consigli e best practice quando si lavora con simboli e testo. Sentiti libero di aggiungere i tuoi suggerimenti e scorciatoie nella sezione commenti. O sfidare qualsiasi cosa abbia detto. Sarò il primo a riconoscere che non conosco tutto ciò che c'è da sapere su Flash, quindi qualsiasi cosa nuova o diversa è sempre la benvenuta.
La prossima volta entreremo nella funzionalità principale e nel punto di vendita unico di Flash: l'animazione. Rimanete sintonizzati!
Accentsconagua