• Web Design » Flash » Tutorial Flash

Questo non è un tutorial vero e proprio, ma una seriedi consigli su come procedere per ottimizzare un movie.
Sarebbe meglio se aveste un'infarinatura generale diFlash prima di proseguire, altrimenti alcune parti di questapagina vi suoneranno "strane".

Come lavora Flash - Lo STREAMING

Flash usa lo streaming per trasferire dati dal server allamacchina client e cioè genera un flusso di daticostante (o quasi...).

Quando sviluppate un movie dovete tenere a mente chel'utenza finale potrebbe essere connessa da fare schifoin termini di velocità (e qui in Italia più cheuna possibilità sembra una certezza...).

Esempio: Flash sta scaricando il movie e sembra andare tuttobene, quando ad un certo punto BAM!!! raggiunge ilframe 50 dove c'è una animazione grossa dapaura.
Sapete cosa succede ?
Che Flash ferma il movie, scarica TUTTAl'animazione e poi riprende.
Tutto questo si trasforma in pause indesiderate, lunghitempi di caricamento e in un brutto aspetto generale.

La tattica giusta è cercare di tenere bassa ladimensione dello swiff il più possibile senzastravolgere le idee che vi siete preposti divisualizzare.
Analizzate ogni frame e non solo l'insiemegenerale del movie.
Togliete di mezzo tutte le linee e i symbols nonutilizzati.
Ottimizzate il suono, magari comprimendolo un po' dipiù.
Fate tutto quello che potete per rosicchiare qua e làe vedrete che alla fine la differenza si farà notare.

Come tenere bassi i KB e avere una riproduzioneveloce

Disegnando o importando la grafica
Eliminate tutte le linee non necessarie.

• La maggior parte delle volte quando disegnate in Flash e connettete due linee rimangono poi delle "scorie".
  Cancellatele, questo aiuterà a mantenere bassa la dimensione del file e comunque lavorerete nel pulito.
  
• Quando importate una bitmap, quasi sempre importate anche delle parti che alla fine non si vedranno.
  Ingrandite, guardate da vicino e eliminate tutto il non necessario.
• Da Menu, sotto Modify > Curves ci sono le voci Smooth, Straighten e Optimize.
  Queste funzioni comprimono ulteriormente la vostra grafica, quindi usatele spesso.
   

• Riciclate i symbols ogni volta che potete.
  Tutte le volte che create un oggetto, anche una semplice linea, aumentate la dimensione del file.
  Se questa linea viene usata più di una volta all'interno del movie, rendetela symbol.
  Così facendo, sarà disponibile nella libreria per tutte le volte che necessiterà ma sarà sempre e solo una.
   
• Evitate di avere troppe animazioni in una botta sola.
  Le animazioni sono CPU intensive, cioè fanno lavorare di brutto la CPU.
  Se avete troppa roba che si muove sullo schermo, Flash rallenta (e non tutti hanno un Athlon o un PIII super pompato...).
  Ecco alcuni suggerimenti:
  • Evitate di usare l'Alpha se riuscite ad ottenere lostesso effetto con il comando Tint.
    Molta gente usa l'Alpha per far sparire oggetti,ma questo comando frega molta CPU.
  • Evitate di usare tante Tween in un colpo solo.
  • Evitate di usare tanti cambi colore in un colpo solo.
  • Evitate di ingrandire (scaling) gli oggetti a dellepercentuali da paura, se possibile.
  • Non abusate del riempimento a gradienti.
     
• Pre-caricate le immagini.
  Se avete una grossa animazione:
  • Potete "nascondere" le immagini prima chearrivi l'animazione.
    Basta aggiungere un layer, metterlo dietro a qualcosae aggiungere le immagini che servono.
    Quando arriverà il momento dell'animazione,le immagini saranno già state caricate.
  • Fate un preload di tutto il movie.
     
• Testate il vostro movie su tutte le versioni di tutti i browser che riuscite a trovare.
  Se potete, cercate anche computer differenti con differenti velocità di CPU.
   
• Usate la stessa font il più possibile.
  Più fonts usate e più il file si ingrossa... non di tanto ma tutto fa brodo.

  Immagini Bitmap

Flash NON E' un programma bitmap.
Le immagini Bitmap devono essere usate solo in caso difotografie o cose del genere.
Se potetetracciare una bitmap, fatelo.
Questo abbasserà la dimensione del file, saràpiù facile lavorarci sopra e avrà anche unaspetto più pulito.

• Usate le bitmap con giudizio
• Tentate di comprimerle se potete.
  Quando importate una bitmap (File > Import), questa si inserisce automaticamente come un symbol nella vostra libreria.
  Se selezionate le sue proprietà, potete accedere ad una finestra di dialogo che mostra una serie di settaggi per la compressione di Bitmap e Jpeg.
   
  
   
• Evitate bitmap animate il più possibile.
  Se non potete farne a meno, tracciatele.

SUONI

FATTO ACCERTATO:  I suoniingigantiscono lo swiff, ma non se ne può fare ameno...

• Usate la minor frequenza di campionamento possibile.
  Questo magari abbasserà un po' la qualità della riproduzione ma ne guadagnerà di sicuro la dimensione.
• Usate suoni corti e metteteli in loop.
  Stessa raccomandazione di prima: se potete, fate un preload.

GENERAZIONE DEL SIZE REPORT

Per generare il size report, esportate il movie come file.swf e selezionate la casella Generate size report(occhio che prima dovete dare un nome al file...).
Analizzando questo report, possiamo scoprire quanti bytesoccupa ogni frame.
Viene anche creata una lista di tutti i symbols, suoni efonts che abbiamo usato e quanto spazio occupano.
Qui sotto potete vederne un esempio:

Movie Report

Il Bandwidth Profiler

Un grazie a NRE per questa aggiunta... :-)

COS'E' ?
- è uno strumento che Flash mette a disposizione peravere un controllo totale dell'andamento del movie pertutta la durata dei frame ed è disponibile, in fase ditesting del movie (CTRL+INVIO) accedendovi tramiteview/brandwidth profiler (CTRL+B).

COSA RAPPRESENTA ?
- a seconda di come viene impostata può dareinformazioni diverse:

- Streaming Graph = mostra il grafico di comeverrà distribuito il flusso del filmato in funzionedel tempo e della velocità del modem che si prendecome riferimento.

- Frame by Frame = Il secondo mostra il valore inBytes o KB di ogni singolo frame.

E TUTTI QUEI DATI A FIANCO ?
- beh quelli sono semplici da intuire. a fianco poteteleggere a cosa si rieriscono i dati.

Va beh NRE ma cosa centra sta Brandwidth Profiler con lafluidità?
- centra! e direi che secondo il mio modesto parere èlo strumento che maggiormente andrebbe tenuto inconsiderazione in fase di testing.

Ma veniamo al dunque

- supponiamo di avere una bitmap di 9081 B posizionata alprimo frame del nostro movie.
- il nostro movie è settato a 12 FPS e testiamo conuna velocità di modem a 28,8 (potete settare lavelocità del modem dalla finestra debug in fase ditesting)

Come vedrete il nostro movie presenta l'occupazione di 9k nel singolo frame iniziale e il ritardo di qualche secondonella visualizzazione imputato appunto alla nostrabitmap.
In se per se non conta molto a livello di fluiditàuna sola bitmap, ma se volessi metterne un'altra nelsecondo frame? L'attesa aumenterebbe e saremmo costrettia precaricare l'immagine per ottenere una correttavisualizzazione...
Ma si può fare qualcosa di veramente utile tramite lalettura dei nostri dati.
Flash setta come velocità media di download con unmodem a 28,8, circa 2400b/s.
Quindi prendendo la nostra bitmap e rapportandola allavelocità media di download otterremo:

9081/2400B/s = 3,783..... che a 12 FPS (velocità delnostro movie) 12 * 3,783 = 45,405 frame.

Otteniamo quindi un dato molto importante per noi, ecioè che la nostra immagine per essere vista confluidità ha bisogno di 45 frame (meglio 46).

Ora riprendete il vostro movie e posizionate la vostraimmagine al 45 frame.
Testate e vedrete che non sarà presente alcun tempodi download.

Questo solo per farvi capire che l'uso dei dati che Flashoffre è molto importante al fine di realizzare moviefluidi.
Se avete immagini pesanti a volte basterebbe posizionarlenei punti giusti per evitare di pre-caricarle.

E cosa ci metti nei frame dove non c'èl'immagine?
Simboli (possibilmente riciclati) o forme che servirannosolo ed esclusivamente per "intrattenere"l'utente finchè il movie o gli altri simboli nonsaranno caricati.

Versione originale © Amanda Farr