Nel realizzare un contenuto per internet non si può non tener conto del peso finale, specialmente se si opera con Flash e con contenuti multimediali. In questo articolo esaminiamo gli elementi che più influiscono sulle dimensioni dei filmati e vediamo come risparmiare memoria e rendere i nostri filmati più fluidi e veloci da caricare.
Le risorse che occupano banda
Audio e video
I contenuti multimediali sono croce e delizia per gli sviluppatori di servizi web: se da un lato consentono un'esperienza più coinvolgente per l'utente finale e sono semplici da integrare (anche grazie alle novità introdotte nelle ultime versioni di Flash), di contro essi impegnano banda e, anche nel caso di connessioni veloci, i tempi di attesa possono rivelarsi molto lunghi se non si presta particolare attenzione alla compressione dei contenuti, specie se si tratta di contenuti audio o video particolarmente lunghi.
Immagini
Anche le immagini a volte causano lunghi tempi di attesa a causa di una scarsa ottimizzazione. Il disagio è sicuramente minore dato che un'immagine anche mal compressa raramente supera il megabyte, ma dal punto di vista dell'utente un'attesa più lunga è giustificabile per un bel video o per la musica piuttosto che per un'immagine.
Grafica e animazioni vettoriali
Flash mette a disposizione un'ampia quantità di strumenti per il disegno e per l'animazione vettoriale (solitamente più leggere di quella raster), però spesso il disegno eseguito a mano contiene dei punti non necessari che potrebbero essere eliminati, risparmiando così memoria: specialmente le animazioni infatti, per quanto a livello di kilobyte raramente si rivelino pesanti (a meno che non si tratti di disegni e movimenti molto complessi o prolungati nel tempo) possono causare rallentamenti al pc, poiché è il processore che si occupa di calcolare ed eseguire gli spostamenti dei vettori.
I font
Nei progetti che prevedono l'utilizzo di campi di testo dinamico o di input capita spesso di dover incorporare i caratteri (font), perché non vengono usati quelli di sistema oppure perché vengono usate le maschere per creare qualche effetto particolare.
Flash mette a disposizione diverse opzioni per l'incorporamento dei caratteri, ma molti utenti erroneamente scelgono di incorporare tutto il font anche quando non è realmente necessario. Più avanti vedremo come scegliere quali e quanti caratteri incorporare a seconda delle diverse situazioni.
Come comprimere i contenuti
Dopo questa carrellata sugli elementi che solitamente appesantiscono un filmato in Flash, andiamo ad analizzare per ognuno di essi le soluzioni più comuni, siano esse già integrate in Flash oppure disponibili con software di terze parti.
Ricordiamoci sempre che anche le esigenze di ottimizzazione possono variare da progetto a progetto, per cui non esiste un rapporto qualità/peso valido per tutti, ad esempio per il sito di una ditta di produzione video potrebbe essere meglio una maggior qualità video, con tempi di attesa leggermente più lunghi ma con un'impressione finale sugli utenti decisamente buona; al contrario un sito di notizie che offra anche la visione dei video per alcune notizie non ha esigenze di qualità elevate dato che il suo scopo principale è quello di diffondere informazioni e non di mostrare video di alta qualità.
I consigli proposti nell'articolo sono quindi generici e spiegano su quali opzioni agire per regolare la compressione dei diversi contenuti, ma il livello di tale compressione dovrà essere valutato di volta in volta. Dopo questa doverosa premessa, passiamo alla pratica.
Comprimere l'audio
Per quanto riguarda la compressione dell'audio, vi sono essenzialmente due vie
- utilizzare un software esterno
- utilizzare le opzioni messe a disposizione da flash
La prima soluzione permette una maggior versatilità nel caso volessimo applicare anche qualche effetto o correzione all'audio, inoltre un software dedicato ha più opzioni per la compressione dell'audio, ad esempio è possibile per gli Mp3 scegliere tra CBR e VBR e impostare il valore di Kbps desiderato, oltre ad avere una maggior varietà di formati.
Il valore di Kbps è impostabile anche in Flash, inoltre è possibile scegliere se convertire il suono da Stereo a Mono, mentre per quanto riguarda i formati è possibile scegliere tra Mp3, ADPCM, Raw e Speech. Le modifiche possiamo apportarle dal pannello di "Proprietà del suono", raggiungibile dalla libreria (click destro sul file nella libreria>proprietà).
È possibile utilizzare la qualità del file importato (spuntando la casella "used imported MP3 quality") oppure impostare compressione, formato, bitrate e qualità qualora non venisse spuntata tale casella. Una volta impostata la qualità, basterà provare il filmato (ctrl+invio) per valutare la qualità finale del suono.
Nota: nel caso si volesse importare una musica da usare come sottofondo musicale in ripetizione (loop), è consigliabile utilizzare un file wav e poi impostare la compressione come Mp3 da Flash: questo perché normalmente gli mp3 hanno un piccolo spazio vuoto all'inizio del file, che impostando la musica in loop risulta fastidioso. I file wav non hanno questo spazio, e Flash nella conversione finale in Mp3 non inserire lo spazio ad inizio file, dando come risultato un file leggero (viene usata la compressione dell'mp3 e quindi il file risulta più leggerlo del wav, formato troppo pesante per il web) e senza alcuno stacco fastidioso.
Comprimere i video
Il campo in cui Flash ha fatto i più grossi passi avanti nelle ultime versioni è probabilmente quello del video: se fino alla versione Mx era necessario importare file .avi, .mov o altri formati e convertirli in swf, dalla versione Mx 2004 si può usare l'FLV, formato pensato principalmente per il web e che con la versione 8 di Flash ha visto un'ulteriore evoluzione, grazie all'adozione di un codec più performante e che offre un miglior rapporto qualità/peso.
Con Flash 8 inoltre è stato introdotto un piccolo ma potente tool esterno, il Flash Video Encoder, che permette di creare file FLV in maniera semplice e veloce, consentendo una grande quantità di impostazioni e la scelta tra i codec On2 VP6 (introdotto in Flash 8) e Sorenson Squeeze (già presente in Flash Mx 2004).
Inoltre all'interno di Flash sono stati introdotti i componenti MediaDisplay (Flash Mx 2004) e FLV Playback (Flash 8), che consentono con pochi click di inserire il video all'interno del proprio progetto; questa facilità nella creazione dei contenuti, unita al diffondersi di linee veloci, ha portato molti webmaster ad inserire contenuti video nei propri siti web. Bisogna però considerare che i video possono essere molto pesanti da caricare, pertanto bisogna prestare particolare attenzione in fase di creazione e compressione.
Avere un buon video di partenza
Per un risultato ottimale è molto importante avere già in partenza un buon video. Alcuni software offrono l'esportazione diretta in FLV (ad esempio Adobe After Effects). Questa è la soluzione migliore, poiché possiamo esportare direttamente il video nel formato che ci interessa, applicando così una sola compressione al video così da avere una maggiore qualità, mentre se dovessimo partire da un file .avi avremmo un file presumibilmente già compresso in partenza a cui andremmo ad applicare un'ulteriore compressione, con conseguente perdita di qualità.
Cerchiamo quindi quando possibile di esportare direttamente in FLV o, qualora i software in nostro possesso non lo consentissero, di applicare la minor compressione possibile al file che convertiamo.
Un altro aspetto particolarmente importante sono le dimensioni del filmato: se sappiamo che lo spazio a disposizione è di 300 pixel, è inutile esportare un video di dimensioni maggiori e poi ridimensionarlo: per quanto il Flash Video Encoder consenta il ridimensionamento di un video, questo porta ad un maggior tempo per il rendering del video e ad una probabile perdita di qualità; cerchiamo quindi di esportare già al primo tentativo il file alle giuste dimensioni, così da dover usare il Flash Video Encoder solo per la conversione in FLV e non per altre operazioni.
Il Flash Video Encoder
Vediamo ora la struttura di questo piccolo tool:
Da questa interfaccia è possibile aggiungere uno o più file alla "coda di rendering": per ogni file sarà possibile impostare diversi settaggi (vedi figura 3).
La scelta è veramente ampissima: possiamo scegliere codec, qualità, frame rate, se codificare o meno l'audio, impostare dei cue points, ritagliare il video e molto altro. Come accennato in precedenza però è importante avere un buon video di partenza, tale per cui in questa schermata dovrebbe bastarci scegliere il codec e la qualità senza bisogno di agire su ulteriori opzioni: ricordiamoci infatti che più impostazioni si traducono in un maggior tempo di rendering e soprattutto possono causare un deterioramento della qualità.
Una volta "renderizzato" il file controlliamone sia il peso che la qualità: qualora il risultato non fosse quello voluto dovremo agire sulle impostazioni del Flash Video Encoder e ricreare il file FLV. Con un po' di pratica comunque dovremmo essere in grado di ottenere il risultato voluto già dal primo tentativo.
Riassumendo, la soluzione ideale per la qualità è quella di esportare già dal software di authoring video l'flv. Qualora non fosse possibile andremo ad esportare un file (ad esempio AVI) con la minor compressione possibile, dopo aver impostate le dimensioni appropriate per lo spazio a nostra disposizione. Infine con il Flash Video Encoder creeremo il file FLV.
Possiamo dire che la qualità "Media" è adatta nella maggior parte dei casi: per video molto lunghi è meglio usare una qualità più bassa per ottenere un file più leggero, mentre dove è particolarmente importante la qualità possiamo utilizzare il profilo "Alta" (o crearne uno personalizzato).
Comprimere le immagini
Per quanto riguarda le immagini, possiamo rifarci ad alcuni punti visti per la compressione di video ed audio: è infatti importante, come per il video, avere una buona immagine di partenza (dimensioni appropriate per lo spazio disponibile e scelta del formato ottimale tra gif, jpg, png, ...), inoltre come per l'audio possiamo agire su alcune impostazioni dalla libreria di Flash attraverso il pannello "Proprietà bitmap", anch'esso raggiungibile dalla libreria (click destro sul file immagine>Proprietà).
Possiamo vedere come anche in questo caso sia possibile impostare un livello di compressione personalizzato (levando la spunta da "Usa qualità predefinita documento"), oppure spuntare questa casella e utilizzare quindi la qualità di default per il progetto corrente; tale qualità si può impostare selezionando dal menu File>Impostazioni pubblicazione, quindi selezionare la scheda "Flash".
Possiamo scegliere una qualità di predefinita per le immagini impostando un valore da 0 a 100. La possibilità di esportare i contenuti a diverse qualità è molto utile, poiché possiamo impostare un livello di compressione di default per gli elementi che useremo più spesso e poi impostare una qualità maggiore o minore per ogni singolo elemento, così da ottimizzare al meglio i diversi elementi ed ottenere un risultato finale col miglior compromesso tra qualità e peso.
Consideriamo anche in questo caso che due compressioni portano ad un maggior decadimento di qualità, pertanto se possibile già dal software di grafica impostiamo la compressione con cui esporteremo poi il file da Flash, così che il livello di compressione non vari. Ovviamente va sempre evitato importare un file di qualità bassa (ad esempio 60) e poi esportarlo da Flash a qualità maggiore: nella maggior parte dei casi finisce per sgranare visibilmente.
Un'altra possibilità per ottimizzare le immagini è quella di vettorializzarle, utilizzando il comando Elabora>Bitmap>Ricalca bitmap. Solitamente si ottengono risultati apprezzabili con immagini semplici e prive di particolari sfumature di colore, in questo caso si risparmiano anche diversi Kilobyte, mentre con immagini complesse si rischia di ottenere il risultato opposto, ovvero un aumento anche molto elevato del peso del progetto.
Consideriamo inoltre che le immagini vettoriali vengono elaborate dal processore tramite calcoli matematici, per cui ad esempio un'immagine soggetta ad animazioni, se convertita in vettoriale, potrebbe impegnare notevolmente il processore, per cui si rischia di risparmiare qualche kilobyte ma avere problemi molto più gravi come il rallentamento dell'animazione, quindi la vettorializzazione delle bitmap è da utilizzare sempre con molta attenzione!
Ottimizzare disegni e animazioni vettoriali
Come detto Flash mette a disposizione una gran quantità di strumenti per il disegno vettoriale, questo non vuol dire che gli oggetti creati con questi strumenti siano automaticamente ottimizzati, anzi spesso disegnando con il mouse può capitare di inserire qualche punto o tratto di troppo, o comunque non bene ottimizzato.
Fortunatamente lo stesso Flash mette a disposizione alcuni strumenti per correggere i disegni in modo da rendergli più leggeri, lasciandone inalterato l'aspetto. La voce di menu Elabora>Forma, offre diverse opzioni tra cui "Ottimizza".
Ognuna di queste opzioni permette di variare leggermente l'aspetto della forma, ad esempio attenuando le curve, convertendo i bordi in riempimenti, e molto altro. Agendo su una forma con questi parametri è possibile ridurne il peso: chiaramente il risultato diventa apprezzabile con disegni e animazioni di una certa complessità, mentre per forme semplici la riduzione di peso può non essere particolarmente rilevante.
Optimaze!: un tool estrno
Chiaramente agire con i singoli comandi può richiedere un po' di tempo prima di raggiungere il risultato ottimale: esiste un'alternativa, che si chiama "Optimaze!": è un software creato appositamente per ottimizzare i disegni vettoriali e consente una riduzione relativamente elevata, anche su disegni piuttosto semplici si arrivano a risparmiare decine di Kilobyte.
Optimaze! è prodotto dalla Electric Rain, per maggiori informazioni sul software è possibile visitare il sito ufficiale del software. Secondo le stime del produttore, è possibile ridurre il peso dei propri progetti fino al 60%. Ricordiamoci che questo software agisce esclusivamente sul disegno vettoriale, pertanto in progetti che non facciano massiccio uso di disegni od animazioni la riduzione di peso sarà praticamente nulla.
Ottimizzare i font
Per quanto riguarda i font, più che ottimizzare il carattere in se quello che si può migliorare è la scelta dei set di caratteri da includere. Il pannello "Incorporamento caratteri", disponibile per i campi di testo dinamici e input, consente di includere all'interno del proprio filmato Flash le informazioni su un determinato font.
Come districarsi tra una scelta così ampia? Vicino ad ogni opzione è indicato il numero di glifi (simboli del set dei caratteri) che verranno incorporati. Partiamo dicendo che l'opzione "Tutto" è quasi sempre da evitare: incorpora tutti i glifi ed è quasi impossibile che vengano utilizzati tutti, per cui otterremmo solo di appesantire inutilmente il filmato.
Se vogliamo lasciare una scelta di caratteri molto ampia (ad esempio nel caso di testi input compilabili dall'utente) scegliamo "Minuscolo", "Maiuscolo e "Numeri" ed eventualmente "Punteggiatura"; in questo modo saranno incorporate maiuscole, minuscole, numeri e segni di punteggiatura. Ad esempio nel caso del font "Arial" questi gruppi in totale comprendono 117 caratteri, se avessimo scelto l'opzione "Tutto" ne avremmo inclusi 39447!.
Gli altri set possono tornare utili nel caso vadano utilizzate lingue straniere, infatti riguardano cinese, giapponese, coreano, etc.
Nel caso di testi dinamici possiamo restringere ancora il campo; supponiamo di avere un testo che mostra determinati messaggi a seconda dell'azione dell'utente: a seconda del tipo di messaggi che vogliamo mostrare possiamo tranquillamente regolarci sui caratteri da incorporare così da tralasciare tutti quelli non necessari (e quindi ottenere un peso finale inferiore).
Molto utile è anche il campo "Includi questi caratteri", che troviamo sotto alla scelta dei set da includere: questo campo permette di scegliere determinati caratteri, così che sia possibile ad esempio importare caratteri maiuscoli e minuscoli selezionando l'apposito set e poi ad esempio solamente il punto, inserendolo nel campo "Includi questi caratteri".
La combinazione di questo pannello con uno o più set permette l'importazione dei soli caratteri da utilizzare nel filmato, consentendo così un risparmio in kilobyte spesso ragguardevole.
Cosa appesantisce il nostro filmato?
Spesso ci si trova con un progetto dal peso finale troppo elevato, ma non si riesce ad individuare quali siano gli elementi a causare questo problema: Flash mette a disposizione uno strumento molto importante, il rapporto sulle dimensioni, che permette di visualizzare il peso di ogni singolo elemento nel filmato finale; per attivarlo è necessario portarsi nelle impostazioni di esportazione, sempre nel tab Flash già visto in precedenza e quindi mettere il segno di spunta all'opzione "Genera rapporto dimensioni". Tale rapporto verrà mostrato nel pannello Output ogni qualvolta testeremo il filmato e sarà salvato come file di testo nella stessa cartella del file .swf .
Conclusione
Abbiamo visto quali siano gli elementi che più spesso causano un peso eccessivo ai progetti realizzati con Flash e abbiamo analizzato alcune delle possibili soluzioni a disposizione dello sviluppatore per risolvere il problema. Ricordiamo ancora una volta che ogni lavoro ha caratteristiche diverse per cui non c'è una compressione che vada universalmente bene, è quindi molto importante saper utilizzare gli strumenti a propria disposizione così da impostare la compressione in base alle esigenze del cliente.
