Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Interazione tra Flash, PhotoShop e Illustrator

Con la nuova versione, della Creative Suite, Flash si apre maggiormente ai software di grafica PhotoShop e Illustrator. In questo articolo vediamo come far interagire i tre e come importare i file PSD e AI nei progetti di Flash CS3.
Con la nuova versione, della Creative Suite, Flash si apre maggiormente ai software di grafica PhotoShop e Illustrator. In questo articolo vediamo come far interagire i tre e come importare i file PSD e AI nei progetti di Flash CS3.
Link copiato negli appunti

Una delle novità più apprezzate in Flash CS3 è la possibilità di importare nativamente file PSD (Photoshop) o AI (Illustrator) mantenendo la struttura dei livelli, convertendo direttamente alcuni elementi in movieclip e lasciando intatta l'editabilità dei testi.

Queste possibilità consentono di convertire layout in Flash con pochi click differentemente da quanto era necessario fare con le precedenti versioni dove, a meno di non utilizzare plugin come PSD2FLA, ricreare un layout poteva richiedere molto tempo.

In questo articolo vedremo nel dettaglio le opzioni messe a disposizione da Flash CS 3 per importare un PSD o un AI all'interno di un progetto.

Importazione di un file PSD

Iniziamo dalla situazione più comune, ovvero dalla necessità di convertire un layout PSD all'interno di un progetto Flash, per poterlo poi eventualmente animare.

Il pannello di importazione

Una volta salvato il nostro PSD, possiamo aprire Flash CS3 e selezionare, dal menu File, la voce Import -> Import to Stage. Selezionando un file PSD verrà automaticamente aperto il pannello:

Figura 1. Pannello di importazione PSD
Pannello di importazione

Vediamo sulla sinistra la lista di tutti i livelli del PSD, mentre in basso possiamo scegliere se convertire i livelli del file in livelli di Flash o in fotogrammi chiave. La prima opzione è decisamente consigliata, specialmente nel caso di grafiche piuttosto complesse.

Da questa stessa lista possiamo selezionare i livelli da escludere dall'importazione levando il segno di spunta presente accanto a ognuno.

Abbiamo, infine, a disposizione l'opzione per impostare gli oggetti nella stessa posizione del file PSD e quella per impostare lo stage alle stesse dimensioni del file grafico che stiamo importando: entrambe queste opzioni sono consigliate.

Livelli di immagine

La vera potenza di questa importazione sta però nelle opzioni disponibili per ogni livello. Supponiamo di selezionare un livello di immagine e la parte destra del pannello cambierà così:

Figura 2. Opzioni relative ad un livello immagine
Opzioni di importazione

Abbiamo delle opzioni sul tipo di importazione e sulla qualità.

Bitmap image with editable layer styles è l'opzione consigliata qualora avessimo dei livelli che facciano uso dei metodi di fusione (Blending modes), che possono essere riprodotti e mantenuti modificabili anche da Flash.

Alcuni metodi di fusione però non sono supportati da Flash e non saranno quindi modificabili.

Questo metodo di importazione convertirà il livello in un movieclip.

Flattened bitmap image importa l'oggetto come immagine bitmap.

Create movieclip for this layer permette di inglobare il livello importato all'interno di un movieclip. Consigliato per gli elementi che verranno animati in Flash o controllati tramite Actionscript; è anche possibile assegnare un nome istanza e impostare il punto di registrazione del clip filmato.

Nei Publish settings (settaggi di pubblicazione) troviamo le opzioni relative alla qualità Lossy (con perdita) e Lossless (senza perdita). Selezionando la prima opzione potremo controllare il livello di compressione basandolo sui settaggi di pubblicazione del progetto (use publish settings) o impostare un valore personalizzato (Custom). Queste opzioni sono particolarmente importanti per evitare di avere un filmato troppo pesante una volta importato il PSD.

Livelli di testo

Per i livelli testuali abbiamo opzioni leggermente diverse.

Figura 3. Opzioni relative ad un livello di testo
Opzioni di importazione

Selezionando l'opzione Flatten bitmap image il testo verrebbe importato come immagine bitmap (e infatti abbiamo le stesse opzioni viste per un livello immagine), ma abbiamo altre due possibilità: Editable text, che manterrà il testo modificabile e quindi creerà nel nostro filmato un campo di testo statico (con impostato anche il font usato nel PSD) e Vector outlines, che creerà un gruppo di vettori.

L'opzione Vector outlines è particolarmente consigliata qualora a livello di testo fossero stati applicati degli effetti, come ad esempio un'ombreggiatura.

Unione di più livelli

In alcuni casi potremmo voler unire due o più elementi, ad esempio per animarli insieme o semplicemente per ridurre il numero di elementi separati sullo stage: per farlo sarà sufficiente selezionare due o più livelli (sfruttando la combinazione Shift + click), quindi premere il bottone posto sotto la lista dei livelli oppure eseguire un click col tasto destro e selezionare la voce Merge Layers.

I livelli saranno riuniti in un'unica bitmap che potremo importare solo come Flatten Image, eventualmente convertendola in movieclip.

Importazione di un file AI

Il pannello di importazione dei file AI è quasi identico a quello relativo ai file PSD.

Figura 4. Pannello di importazione di un file AI
Pannello di importazione AI

Notiamo una diversa struttura nella parte sinistra, dovuta al fatto che Illustrator gestisce i livelli diversamente da Photoshop.

Oltre alla conversione in layer di flash o in fotogrammi chiave avremo l'opzione Single Flash Layer, per cui tutti i livelli del file AI verrebbero importati in un unico livello di Flash.

Nella parte bassa del pannello abbiamo due opzioni in più: import unused symbols, che permette di importare elementi presenti nella libreria di Illustrator ma non presenti sull'area di lavoro (nel qual caso verranno importati nella libreria di Flash), e Import as a single bitmap image, che converte l'intero file AI in una singola immagine bitmap.

Poiché Illustrator permette la creazione di percorsi, avremo opzioni che ci permetteranno di convertire il percorso in un'immagine bitmap oppure di mantenerlo modificabile all'interno di Flash (sarà importato come forma o disegno vettoriale).

Figura 5. Opzioni di importazione di un percorso
Opzioni di importazione percorso

Le impostazioni per l'importazione di un testo sono identiche a quelle per i PSD, mentre nel caso di immagini possiamo solo selezionare l'opzione Flatten Bitmap to Mantain Appearance, sempre con eventuale inclusione in un movieclip.

Importazione di effetti ottenuti tramite plugin

Qualora un livello, sia in Photoshop che in Illustrator, presentasse degli effetti grafici ottenuti tramite plugin di terze parti (come ad esempio la suite Eye Candy), questo verrà importato senza particolari problemi sfruttando la conversione in bitmap. Non vi sono quindi particolari limitazioni riguardo gli effetti di terze parti, per quanto non essendo nativi dei due software in qualche caso potrebbero verificarsi alcuni problemi.

Conclusioni

Abbiamo visto come sia l'importazione di PSD che quella di AI, all'interno di Flash CS3, siano in grado di gestire tutti i tipi di elementi generati dai rispettivi software (Photoshop e Illustrator), importando anche particolari effetti grafici pur senza mantenerli editabili (ad eccezione di alcuni metodi di fusione). Questa nuova possibilità di importazione è in grado di sveltire notevolmente il lavoro e il flusso produttivo di un team dove grafica, animazione e programmazione sono affidati a persone diverse: i rischi di errori nella conversione dalla grafica iniziale al progetto in Flash saranno minimi e grazie alla possibilità di settare la qualità e la compressione degli elementi importati anche l'ottimizzazione del peso finale in termini di kilobyte è garantita.

La possibilità di modificare anche all'interno di Flash i parametri degli effetti (almeno quelli offerti di default da Photoshop e Illustrator) sarebbe stata la ciliegina sulla torta, ma le opzioni già messe a disposizione, in questa versione, faranno la gioia di molti utenti.


Ti consigliamo anche