Share
La prima volta che ho usato Flash è stato circa 13 anni fa. Era la versione 3 e Flash fu acclamato come il nuovo e fantastico strumento di animazione basato sul vettore che avrebbe presto preso d'assalto il mondo del web design. Nel corso degli anni, Flash è diventato uno strumento di sviluppo di applicazioni completo e completo, pieno di bontà con ActionScript.
Ciò che molte persone sembrano dimenticare, è quanto Flash è ancora lo strumento di un designer, che ci consente di creare opere d'arte e animazioni in stile "vecchio stile"..
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 nel maggio del 2011.
Iniziamo con ciò che praticamente chiunque avrebbe iniziato con Flash (o qualsiasi altra applicazione di progettazione) - il disegno. Sia che disegni linee regolari o linee di tracciamento, il disegno è una delle azioni più fondamentali in Flash. Ciò che rende Flash unico, però, è il modo in cui gestisce le forme. Si comporta in modo del tutto diverso da qualsiasi altro strumento di disegno vettoriale, ed è amato o odiato da molti per questo. Naturalmente, ci sono vantaggi e svantaggi nel separare ciascuna parte di un oggetto per un editing indipendente. Diamo un'occhiata ad alcune piccole cose bizzarre che Flash fa e come usarle a nostro vantaggio.
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.
In genere, quando si disegna una forma regolare (un rettangolo o un'ellisse) in Flash, viene creata una patch con le proprietà di riempimento e traccia selezionate. È quindi possibile selezionare il riempimento e / o il tratto indidually e modificare le loro proprietà. In Flash CS3, Adobe ha introdotto quelli che chiamano strumenti di forma "primitivi". A differenza degli strumenti di forma predefiniti, che separano il tratto dal riempimento, creano una forma che è selezionabile e modificabile nel suo complesso.
Anche se per i progettisti veterani di Flash questo può essere un cambiamento irritante, porta con sé un livello di controllo che non si vedeva in Flash prima di questa versione. Puoi cambiare improvvisamente le proprietà dell'oggetto numericamente attraverso il pannello delle proprietà, aggiungere angoli arrotondati e convertire cerchi in torte con precisione in virgola decimale. Ci sono poche ragioni per tornare ai tradizionali strumenti di forma dopo aver usato i primitivi, tuttavia molti designer che conosco continuano a lavorare alla vecchia maniera. Parte del problema potrebbe essere la decisione sbalorditiva di Adobe di mantenere le forme semplici come strumenti predefiniti, seppellendo i primitivi all'interno di un menu a discesa nella barra degli strumenti.
Proviamo a utilizzare le forme primitive in uno scenario reale in cui l'utilizzo degli strumenti di forma tradizionali avrebbe dimostrato di essere un esercizio di hair-pulling. Supponiamo che tu voglia creare un grafico a torta preciso utilizzando numeri reali - quote di mercato per sistemi operativi mobili nel 2010, ad esempio.
Una volta ottenute le percentuali (che sommano fino a 100), moltiplicheremo ciascuna con 3,6 per equipararle con i 360 gradi totali in un cerchio. Quindi, si tratta semplicemente di incollare sei cerchi uno sopra l'altro e assegnare gli angoli di inizio e di fine appropriati per ognuno in base ai nostri calcoli. Vedi la matematica nella tabella sottostante, così come le proprietà di una delle torte, per una migliore idea.
Per loro stessa natura, gli oggetti in Flash sono liberamente modificabili in tutti i modi. È possibile selezionare il riempimento o il contorno di una forma, trascinarlo e interesserà tutte le altre forme in quell'area finché si trovano sullo stesso piano. Ciò che accade quando selezioni e / o trascini un elemento, dipende da cosa clicchi e dove. Diamo un'occhiata alle varie possibilità:
Proviamo e applichiamo questa conoscenza per rendere complesse le linee ondulate nel modo più semplice - usando linee dritte a zigzag. Inizia semplicemente disegnando linee rette per definire la dimensione e la forma approssimative dell'onda. Assicurati che la linea non sia selezionata. Quindi, fai clic e trascina ciascun segmento di linea per creare una curva per l'onda. Infine, seleziona i punti d'angolo e spostali verso l'alto o verso il basso fino a quando non si agganciano per rendere la curva perfetta su entrambi i lati.
Per qualche ragione, meglio nota ad Adobe, non hanno mai affrontato un problema inerente con il rendering degli angoli arrotondati in Flash. Se il contorno di un rettangolo arrotondato è un numero dispari (1, 3, 5, ecc.), Gli angoli tendono ad avere questi brutti artefatti che rendono l'immagine sfocata. Un tipico hack che ho usato e ho visto essere usato è quello di assicurarmi che i contorni dei rettangoli arrotondati siano sempre 2, 4, 6 o qualsiasi numero pari. Non funziona ancora se la tua forma è su una coordinata sub-pixel - la coordinata x o y è in decimali (2.6, 4.12, 98.57, ecc.) - ma questo è un problema più facile da risolvere.
Ma cosa succede se ho bisogno che il contorno sia un singolo pixel? Una soluzione che ho trovato di recente e che ho utilizzato ampiamente da quando questo è:
Sebbene questa tecnica dovrebbe funzionare nella maggior parte dei casi, non è esente da inconvenienti. È inutile, ad esempio, in situazioni in cui è necessario che un oggetto sia traslucido. Riducendo l'alfa del rettangolo di riempimento mostrerà solo più del colore del contorno dal rettangolo dietro. Un trucco per aggirarlo sarebbe quello di rompere entrambi i rettangoli (convertirli in forme regolari).
Si potrebbe anche prendere in considerazione l'uso di accenni ai tratti per guidare l'utente quando si disegnano tratti sul palco.
A chi non piacciono i gradienti? I disegni di questi giorni sono piuttosto incompleti senza almeno un sottile accenno di sfumatura per dargli un aspetto realistico e spesso contemporaneo. Il problema con il modo in cui Flash gestisce le forme, è che ogni pezzo autonomo è una forma e ha le sue proprietà. Non è possibile applicare riempimenti sfumati a gruppi di oggetti e non è possibile "connettere" due forme disparate. Che cosa succede, quindi, quando hai bisogno di un gradiente per estendersi su più oggetti, ad esempio tutte le parole in un logotipo personalizzato?
Bene, 'Lock Fill' in soccorso. Quando si utilizza lo strumento "Paint Bucket", verrà visualizzata un'icona nella parte inferiore della tavolozza degli strumenti con una sfumatura e un blocco su di essa. Seleziona le forme da riempire, attiva l'icona "Blocca riempimento", seleziona una sfumatura dalla tavolozza dei colori di riempimento e fai clic su una delle forme selezionate. Non preoccuparti se non vedi l'intera pendenza applicata. Più spesso il riempimento bloccato si estende oltre le forme selezionate e devi usare lo 'Strumento di trasformazione gradiente' per ridimensionare la sfumatura nel modo in cui ne hai bisogno.
Questa tecnica però non è priva di problemi. Ecco alcune cose da ricordare quando si utilizzano i riempimenti bloccati:
Flash viene fornito con una serie di stili di tratto di default: Solido, Tratteggiato, Punteggiato, Ragged, Stipples e Covato, che funzionano in gran parte. Per le situazioni in cui è necessario un maggiore controllo sull'arco, tuttavia, c'è un editor di colpi potente e dannatamente efficace fornito con Flash. Per iniziare davvero a giocare con i tuoi tratti, fai clic sull'icona di modifica accanto all'elenco "Stile" nel pannello "Proprietà" di un tratto selezionato.
Supponiamo che tu abbia bisogno di una linea tratteggiata, ma i trattini sono attualmente troppo vicini nello stile predefinito "Tratteggiato". Nel pannello "Modifica tratto", aumenta semplicemente il numero nel secondo campo di inserimento accanto a "Dash" fino a ottenere l'effetto desiderato. E mentre lo sei, controlla la casella "Angoli appuntiti" .Se sei mai stato infastidito dagli angoli strani con la linea tratteggiata predefinita in Flash, questo lo corregge.
Ecco alcuni suggerimenti più utili per ottimizzare il tuo flusso di lavoro quando lavori con forme in Flash.
1. Disegna una linea dove hai bisogno della divisione.
2. Regola lo spessore della linea in base a quanto spazio hai bisogno tra le divisioni.
3. Assicurati che la linea sia selezionata; quindi vai su "Modifica> Forme" nella barra dei menu e seleziona "Converti linee in riempimenti".
4. Elimina la linea.
E questo è un involucro per la prima parte di questa serie sulle best practice di Flash per i designer. Spero che questi suggerimenti ti aiutino a migliorare e ottimizzare il tuo flusso di lavoro in Flash a lungo termine. Non esitate a condividere i vostri suggerimenti e le migliori pratiche nella sezione commenti. Tornerò con la parte successiva di questa serie con suggerimenti su come gestire il testo e i simboli in Flash.
Accentsconagua