Creazione di contenuti Animate da usare su dispositivi mobili

Per creare contenuti Animate per dispositivi mobili, seguite alcuni principi di base. Ad esempio, gli sviluppatori di Animate spesso evitano una grafica estremamente complessa e interpolazione o trasparenza eccessiva.

Gli sviluppatori di Flash Lite affrontano sfide aggiuntive, poiché le prestazioni sui dispositivi portatili variano enormemente. Se il contenuto deve essere pubblicato su molti dispositivi diversi, talvolta gli sviluppatori devono eseguire l’authoring per il denominatore meno comune.

L’ottimizzazione del contenuto sui dispositivi portatili richiede dei compromessi. Ad esempio, utilizzando una tecnica specifica il contenuto può avere un aspetto migliore, mentre un’altra tecnica può offrire prestazioni migliori. Quando si valutano tali compromessi, saranno eseguiti test ripetuti nell’emulatore e sul dispositivo di destinazione. È necessario visualizzare il contenuto sul dispositivo effettivo per valutare la fedeltà dei colori, la leggibilità del testo, le interazioni fisiche, la sensibilità dell’interfaccia utente e altri aspetti dell’esperienza effettiva sul dispositivo portatile.

Nota:

I contenuti su Flash Lite non è applicabile a Flash CC e versioni successive. 

Indicazioni su Flash Lite per l’animazione nei dispositivi portatili

Quando create contenuto animato per i dispositivi portatili, tenete presenti le limitazioni della CPU. Le indicazioni seguenti contribuiscono a evitare che il contenuto Flash Lite creato venga eseguito troppo lentamente:

  • Quando create un nuovo file Flash Lite, verificate che il documento sia configurato correttamente. Sebbene i file Animate siano facilmente ridimensionabili, le prestazioni possono risentirne negativamente se il file non viene eseguito nella sua dimensione stage nativa e deve essere ridimensionato nel lettore. Provate a impostare la dimensione Stage del documento in modo che corrisponda alla risoluzione del dispositivo di destinazione. Impostate inoltre Flash Player in base alla versione corretta di Flash Lite.

  • Flash Lite è in grado di eseguire il rendering della grafica vettoriale con qualità bassa, media e alta. Migliore è la qualità di rendering, più facile ed accurata sarà l’esecuzione del rendering della grafica vettoriale da parte di Flash Lite e maggiore sarà l’utilizzo della CPU del dispositivo. Per utilizzare animazione complessa, provate a modificare l’impostazione di qualità del lettore, quindi testate completamente il file SWF. Per controllare la qualità di rendering di un file SWF, utilizzate la proprietà _quality o il comando SetQuality. Valori validi per la proprietà _quality sono LOW, MEDIUM e HIGH.

  • Limitate il numero di interpolazioni simultanee. Riducete il numero di interpolazioni oppure disponete in sequenza l’animazione in modo che un’interpolazione inizi solo quando termina la precedente.

  • Utilizzate con parsimonia gli effetti di trasparenza (alfa) sui simboli, poiché richiedono numerose risorse della CPU. In particolare, evitate simboli di interpolazione con livelli alfa non completamente opachi (inferiori al 100%).

  • Evitate gli effetti visivi che richiedono molte risorse della CPU, quali le maschere di grandi dimensioni, i movimenti estesi, la fusione dell’alfa, i gradienti di grandi dimensioni e i vettori complessi.

  • Sperimentate con varie combinazioni di interpolazioni, animazioni di fotogrammi chiave e movimenti guidati da ActionScript per produrre i risultati più efficienti.

  • Il rendering di ovali e cerchi vettoriali è molto più costoso del rendering dei quadrangoli. Anche l’utilizzo di tratti rotondi e ovali aumenta notevolmente l’uso della CPU.

  • Testate spesso le animazioni sui dispositivi di destinazione effettivi.

  • Quando viene tracciata un'area animata con Animate, viene definito un rettangolo di selezione intorno a tale area. Ottimizzate il disegno riducendo il rettangolo il più possibile. Evitate di sovrapporre le interpolazioni, poiché l'area unita viene interpretata da Animate come un singolo rettangolo e, pertanto, l'area complessiva risultante è molto più grande. Utilizzate la funzione Show Redraw Region (Mostra area ridisegnata) di Animate per ottimizzare l'animazione.

  • Evitate di utilizzare _alpha = 0 e _visible = false per nascondere le clip video sullo schermo. Se la visibilità della clip video viene semplicemente disattivata oppure se il relativo alfa viene cambiato in zero, sarà ancora incluso nei calcoli di rendering in linea, che possono influire sulle prestazioni.

  • Analogamente, non tentate di nascondere una clip video oscurandola dietro ad altra grafica. Sarà comunque inclusa nei calcoli del lettore. Al contrario, eliminate completamente le clip video dallo Stage oppure rimuovetele richiamando removeMovieClip.

Grafica bitmap e vettoriale di Flash Lite nei dispositivi portatili

Flash Lite è in grado di eseguire il rendering sia della grafica vettoriale che della grafica bitmap. Tutti i tipi di grafica includono sia vantaggi che svantaggi. La decisione di utilizzare la grafica vettoriale anziché quella bitmap non è sempre chiara e spesso varia in base a diversi fattori.

La grafica vettoriale è rappresentata in modo compatto nei file SWF come equazione matematica e sottoposta a rendering in fase di esecuzione dal lettore Flash Lite. Al contrario, la grafica bitmap è rappresentata da un array di elementi di immagine (pixel), che richiede un numero maggiore di byte di dati. Pertanto, utilizzando la grafica vettoriale in un file è possibile ridurre la dimensione del file e l’utilizzo di memoria.

La grafica vettoriale mantiene inoltre le forme morbide quando la dimensione viene scalata. Al contrario, le immagini bitmap possono apparire squadrate o pixelate quando vengono scalate.

Rispetto alle bitmap, la grafica vettoriale richiede maggiore potenza di elaborazione per il rendering, specialmente quando sono presenti forme complesse o riempimenti. Di conseguenza, talvolta l’uso frequente di forme vettoriali può ridurre le prestazioni complessive del file. Poiché, a differenza della grafica vettoriale, la grafica bitmap non richiede molto tempo di elaborazione per eseguire il rendering, viene preferita, ad esempio, per alcuni file in cui una carta stradale deve essere animata e fatta scorrere su un telefono cellulare.

Tenete presenti le seguenti considerazioni:

  • Evitate di utilizzare contorni nelle forme vettoriali. I contorni presentano bordi interni ed esterni (i riempimenti ne hanno solo uno) e richiedono il doppio del tempo per il rendering.

  • Gli angoli sono più semplici da sottoporre a rendering rispetto alle curve. Se possibile, utilizzate bordi piatti, specialmente con forme vettoriali di dimensioni molto ridotte.

  • L’ottimizzazione è particolarmente utile nel caso di forme vettoriali piccole, come le icone. I dettagli delle icone complesse possono andare persi dopo il rendering, pertanto il tempo impiegato per il rendering dei dettagli risulterà sprecato.

  • In genere, si consiglia di utilizzare le bitmap per le immagini piccole e complesse, come le icone, e la grafica vettoriale per le immagini più grandi e semplici.

  • Importate le immagini bitmap nella dimensione corretta. Non importate immagini di grandi dimensioni per poi ridimensionarla in Animate per evitare uno spreco di memoria in fase di esecuzione e l'utilizzo di file di dimensioni eccessive.

  • Il lettore Flash Lite non supporta la sfumatura bitmap. Se una bitmap viene scalata o ruotata avrà un aspetto squadrato. Se è necessario scalare o ruotare un’immagine, prendete in considerazione l’utilizzo della grafica vettoriale.

  • Il testo è essenzialmente una forma vettoriale molto complessa. Naturalmente, il testo ricopre spesso un’importanza fondamentale, pertanto non può essere evitato completamente. Quando è necessario inserire del testo, evitate di animarlo o di posizionarlo sopra un’animazione. Prendete in considerazione l’idea di utilizzare il testo come una bitmap. Per il testo di input e dinamico a più righe, l’interruzione di riga della stringa di testo non è memorizzata nella cache. In Animate le righe vengono interrotte in fase di esecuzione e le interruzioni vengono ricalcolate ogni volta che il campo di testo deve essere ridisegnato. I campi di testo statico non rappresentano un problema, poiché l’interruzione di riga viene precalcolata in fase di compilazione. Per il contenuto dinamico è inevitabile utilizzare campi di testo dinamico, tuttavia provate a utilizzare campi di testo statico, ove possibile.

  • Riducete al minimo l'uso della trasparenza nei file PNG, poiché in Animate le aree ridisegnate devono essere ricalcolate anche per le parti trasparenti della bitmap. Ad esempio, con un file PNG trasparente che rappresenta un elemento in primo piano, non esportate il PNG trasparente con la dimensione a schermo interno. Al contrario, esportatelo con la dimensione effettiva dell’elemento in primo piano.

  • Provate a raggruppare i livelli bitmap e i livelli vettoriali. In Animate è necessario implementare diversi programmi di rendering per i contenuti bitmap e vettoriale e il passaggio da un programma di rendering all'altro richiede tempo.

Impostazione della compressione delle bitmap Flash Lite per i dispositivi portatili

Quando utilizzate le bitmap, potete impostare opzioni di compressione delle immagini (per le singole immagini o globalmente per tutte le immagini) per ridurre la dimensione dei file SWF.

Impostazione delle opzioni di compressione per un singolo file bitmap

  1. Avviate Animate e create un documento.

  2. Selezionate una bitmap nella finestra Libreria.
  3. Fate clic con il pulsante destro del mouse (Windows) o premete Ctrl e fate clic (Macintosh) sull’icona della bitmap nella finestra Libreria, quindi selezionate Proprietà dal menu di scelta rapida per aprire la finestra di dialogo Proprietà bitmap.
  4. Nel menu a comparsa Compressione, selezionate una delle opzioni seguenti:
    • Selezionate Foto (JPEG) per le immagini caratterizzate da colori complessi o variazioni di tonalità, ad esempio fotografie o immagini che contengono riempimenti con gradiente. Questa opzione consente di produrre un file JPEG. Selezionate la casella di controllo Use Imported JPEG Data (Usa dati JPEG importati) per utilizzare la qualità di compressione predefinita specificata per l’immagine importata. Per specificare una nuova impostazione della qualità di compressione, deselezionate l’opzione Usa dati JPEG importati e immettete un valore compreso tra 1 e 100 nella casella di testo Qualità. Un’impostazione più elevata produce un’immagine di qualità superiore ma anche un file di dimensioni maggiori, pertanto regolate il valore di conseguenza.

    • Selezionate Senza perdita (PNG/GIF) per le immagini che contengono forme semplici e pochi colori. Questa opzione consente di comprimere l’immagine utilizzando la compressione senza perdite, che non comporta la perdita di dati.

  5. Fate clic su Prova per verificare i risultati della compressione del file.

    Confrontate le dimensioni originali del file con quelle del file compresso per stabilire se l’impostazione selezionata per la compressione è accettabile.

Impostazione della compressione per tutte le immagini bitmap

  1. Selezionate File > Publish Settings (Impostazioni di pubblicazione), quindi fate clic sulla scheda Flash per visualizzare le opzioni di compressione.
  2. Regolate il cursore relativo alla qualità JPEG o immettete un valore specifico. Un valore di qualità JPEG superiore genera un’immagine di maggiore qualità ma anche un file SWF di dimensioni più grandi. Una qualità inferiore produce un file SWF di dimensioni minori. Tentate diverse impostazioni per determinare il miglior compromesso fra dimensioni e qualità.

Ottimizzazione dei fotogrammi di Flash Lite per i dispositivi portatili

  • Nella maggior parte dei dispositivi che supporta Flash Lite, il contenuto viene riprodotto a circa 15-20 fotogrammi al secondo (fps). La frequenza di fotogrammi minima può essere addirittura 6 fps. Durante lo sviluppo impostate la frequenza di fotogrammi del documento su una velocità di riproduzione appropriata per il dispositivo di destinazione. Ciò indica la modalità di esecuzione del contenuto su un dispositivo dalle prestazioni limitate. Prima di pubblicare un file SWF finale, impostate la frequenza di fotogrammi del documento su un valore pari o superiore a 20 fps per evitare di limitare le prestazioni nel caso in cui il dispositivo supporti una frequenza di fotogrammi maggiore.

  • Quando utilizzate gotoAndPlay, tenete presente che tutti i fotogrammi che si trovano tra il fotogramma corrente e quello richiesto devono essere inizializzati prima che il fotogramma richiesto venga riprodotto. Se molti fotogrammi contengono contenuto diverso, può essere più efficace utilizzare clip video diverse anziché la Timeline.

  • Sebbene possa sembrare logico precaricare sul desktop tutto il contenuto inserendolo all’inizio del file, il precaricamento su un dispositivo portatile può rallentare l’avvio del file. Disponete il contenuto in tutto il file, in modo che le clip video vengano inizializzate al momento dell’utilizzo.

Ottimizzazione di ActionScript per il contenuto di Flash Lite sui dispositivi portatili

A causa delle limitazioni della velocità di elaborazione e della memoria, seguite le indicazioni riportate di seguito quando sviluppate ActionScript per il contenuto Flash Lite utilizzato sui dispositivi portatili:

  • Mantenete il file e il relativo codice il più semplici possibile. Rimuovete le clip video non utilizzate, eliminate loop di fotogrammi e codici non necessari ed evitate la presenza di un numero eccessivo di fotogrammi o di fotogrammi non essenziali.

  • L’utilizzo del loop FOR può essere costoso a causa delle spese necessarie quando la condizione viene verificata con ciascuna iterazione. Quando i costi dell’iterazione e quelli del loop sono simili, eseguite più operazioni separatamente anziché utilizzare un loop. Il codice può essere più lungo, ma le prestazioni saranno migliori.

  • Interrompete la ripetizione ciclica basata sui fotogrammi quando non è più necessaria.

  • Quando possibile, evitate l’elaborazione di stringhe e array che può richiedere eccessive risorse della CPU.

  • Tentate sempre di accedere alle proprietà direttamente anziché utilizzando i metodi getter e setter di ActionScript, che hanno costi superiori rispetto ad altre chiamate di metodo.

  • Gestite gli eventi prudentemente. Mantenete gli array event listener compatti utilizzando condizioni per verificare se un listener esiste (non è null) prima di chiamarlo. Cancellate eventuali intervalli attivi chiamando clearInterval e rimuovete eventuali listener attivi chiamando removeListener prima di rimuovere il contenuto utilizzando unloadapplication o removeapplicationClip. Se alcune funzioni di ActionScript fanno ancora riferimento ai dati SWF durante lo scaricamento di un clip filmato, Animate non raccoglie la memoria dei dati SWF (ad esempio, da intervalli e listener).

  • Quando le variabili non sono più necessarie, eliminatele o impostatele su null per contrassegnarle per la raccolta cestino. L’eliminazione delle variabili aiuta a ottimizzare l’uso della memoria in fase di esecuzione perché le risorse non più necessarie vengono rimosse dal file SWF. È preferibile eliminare le variabili anziché impostarle su null.

  • Rimuovete esplicitamente i listener dagli oggetti chiamando removeListener prima della raccolta cestino.

  • Se una funzione viene chiamata in modo dinamico e passa un insieme fisso di parametri, utilizzate call anziché apply.

  • Rendete gli spazi dei nomi, come i percorsi, più compatti per ridurre il tempo di avvio. Tutti i livelli nel pacchetto sono compilati in un’istruzione IF e causano una nuova chiamata Object, pertanto la presenza di un numero inferiore di livelli nel percorso consente di risparmiare tempo. Un percorso con i livelli com.xxx.yyy.aaa.bbb.ccc.funtionName, ad esempio, causa l’instanziazione di un oggetto per com.xxx.yyy.aaa.bbb.ccc. Alcuni sviluppatori di Flash utilizzano software preprocessore per ridurre il percorso a un identificatore univoco, come 58923409876.functionName, prima di compilare il codice SWF.

  • Se un file è costituito da più file SWF che utilizzano le stesse classi ActionScript, escludete tali classi dalla selezione di file SWF durante la compilazione. Ciò consente di ridurre il tempo di download del file e i requisiti di memoria in fase di esecuzione.

  • Evitate di utilizzare Object.watch e Object.unwatch, poiché qualsiasi modifica alla proprietà di un oggetto richiede al lettore di determinare se è necessario inviare una notifica della modifica.

  • Se il completamento del codice ActionScript eseguito su un fotogramma chiave nella timeline richiede più di 1 secondo, prendete in considerazione la divisione del codice da eseguire su più fotogrammi chiave.

  • Rimuovete l’istruzione trace dal codice quando pubblicate il file SWF. Per eseguire questa operazione, selezionate la casella di controllo Omit Trace Actions (Ometti azioni di analisi) nella scheda Flash della finestra di dialogo Impostazioni di pubblicazione.

  • L’eredità aumenta il numero di chiamate di metodo e utilizza più memoria: una classe che include tutte le funzionalità necessarie è più efficace in fase di esecuzione rispetto a una classe che eredita alcune funzionalità da una superclasse. Pertanto, può essere necessario arrivare a un compromesso di design tra l’estensibilità delle classi e l’efficacia del codice.

  • Quando un file SWF carica un altro file SWF che contiene una classe ActionScript personalizzata (ad esempio, foo.bar.CustomClass), quindi scarica il file SWF, la definizione della classe rimane in memoria. Per salvare la memoria, eliminate in modo esplicito tutte le classi personalizzate nei file SWF scaricati. Utilizzate l’istruzione delete e specificate il nome della classe completo, ad esempio: delete foo.bar.CustomClass.

  • Limitate l’uso delle variabili globali, poiché non vengono contrassegnate per la raccolta cestino se la clip video che le ha definite viene rimossa.

  • Evitate di utilizzare i componenti standard dell’interfaccia utente, disponibili nel pannello Componenti di Flash. Tali componenti sono progettati per essere eseguiti sui computer desktop e non sono ottimizzati per l’esecuzione sui dispositivi portatili.

  • Evitate funzioni molto nidificate, se possibile.

  • Evitate di fare riferimento a variabili, oggetti o funzioni non esistenti. A differenza della versione desktop di Flash Player, in Flash Lite 2 la ricerca dei riferimenti alle variabili non esistenti è lenta, pertanto le prestazioni possono risentirne negativamente.

  • Evitate di definire le funzioni utilizzando sintassi anonima. Ad esempio, myObj.eventName = function{ ...}. Le funzioni definite in modo esplicito sono più efficaci, ad esempio function myFunc { ...}; my Obj.eventName = myFunc;.

  • Riducete al minimo l’utilizzo di funzioni matematiche e di numeri con virgola mobile. Il calcolo di tali valori rallenta le prestazioni. Se è necessario utilizzare le routine matematiche, prendete in considerazione il ricalcolo dei valori e la memorizzazione in un array di variabili. Il recupero dei valori da una tabella dati è molto più veloce del calcolo in Flash in fase di esecuzione.

Gestione della memoria file di Flash Lite per i dispositivi portatili

In Flash Lite, gli oggetti e le variabili ai quali i file non fanno più riferimento sono cancellati dalla memoria a intervalli regolari. Questo processo è chiamato raccolta cestino. In Flash Lite, il processo di raccolta cestino viene eseguito ogni 60 secondi o quando l’uso della memoria file aumenta improvvisamente del 20% o di una percentuale superiore.

Sebbene non sia possibile controllare la modalità e la tempistica della raccolta cestino in Flash Lite, è tuttavia possibile liberare la memoria non necessaria in qualsiasi momento. Per le variabili di timeline o globali, utilizzate l’istruzione delete per liberare la memoria utilizzata dagli oggetti ActionScript. Per le variabili locali, come ad esempio una variabile specificata all’interno della definizione di una funzione, non è possibile utilizzare l’istruzione delete per liberare la memoria dell’oggetto, tuttavia è possibile impostare su null la variabile che fa riferimento a tale oggetto. In questo modo, è possibile liberare la memoria utilizzata dall’oggetto, ammesso che non vi siano ulteriori riferimenti a tale oggetto.

Nei due esempi di codice riportati di seguito viene mostrato come liberare la memoria utilizzata dagli oggetti eliminando la variabile che fa riferimento a tali oggetti. Gli esempi sono identici, con l’unica differenza che nel primo viene creata una variabile di timeline e nel secondo una variabile globale.

// First case: variable attached to a movie or 
// movie clip timeline 
// 
// Create the Date object. 
var mcDateObject = new Date(); 
// Returns the current date as a string. 
trace(mcDateObject); 
// Delete the object. 
delete mcDateObject; 
// Returns undefined. 
trace(mcDateObject); 
// 
// Second case: global variable attached to a movie or 
// movie clip timeline 
// 
// Create the Date object. 
_global.gDateObject = new Date(); 
// Returns the current date as a string. 
trace(_global.gDateObject); 
// Delete the object. 
delete _global.gDateObject; 
// Returns undefined. 
trace(_global.gDateObject);

Come spiegato precedentemente, non è possibile utilizzare l’istruzione delete per liberare la memoria utilizzata da una variabile di funzione locale. Impostate invece il riferimento alla variabile su null, per eseguire le stesse operazioni eseguibili con delete.

function func() 
{ 
    // Create the Date object. 
    var funcDateObject = new Date(); 
    // Returns the current date as a string. 
    trace(funcDateObject); 
    // Delete has no effect. 
    delete funcDateObject; 
    // Still returns the current date. 
    trace(funcDateObject); 
    // Set the object reference to null. 
    funcDateObject = null; 
    // Returns null. 
    trace(funcDateObject); 
} 
// Call func() function. 
func();

Caricamento di dati dai dispositivi portatili in Flash Lite

Quando sviluppate i file per i dispositivi portatili, riducete al minimo la quantità di dati da caricare contemporaneamente. Se caricate dati esterni in un file Flash Lite (ad esempio, utilizzando XML.load), il sistema operativo del dispositivo può generare un errore di memoria se la memoria allocata per i dati in arrivo non è sufficiente. Questa situazione può verificarsi nel caso in cui la quantità totale di memoria rimanente non è sufficiente.

Un esempio è il caso in cui un file tenta di caricare un file XML di 100 KB, ma il sistema operativo del dispositivo ha allocato solo 30 KB per gestire il flusso di dati in arrivo. In tal caso, in Flash Lite viene visualizzato un messaggio di errore, in cui è indicato che la memoria disponibile non è sufficiente.

Per caricare grandi quantità di dati, raggruppate i dati in insiemi più piccoli, ad esempio in più file XML, ed eseguite diverse chiamate di caricamento dei dati per ciascun insieme. La dimensione di ciascun insieme di dati e, pertanto, il numero di chiamate di caricamento dei dati necessarie variano in base al dispositivo e al file. Per determinare un equilibrio appropriato tra il numero di richieste di dati e la possibilità di un errore della memoria, testate i file su più dispositivi di destinazione.

Per prestazioni ottimali, evitate di caricare e analizzare i file XML, se possibile. Memorizzate invece i dati in coppie nome/valore semplici e caricateli da un file di testo mediante loadVars o dai file SWF precompilati.

Esclusione delle classi dalla compilazione per Flash Lite

Per ridurre la dimensione dei file SWF, escludete le classi dalla compilazione ma conservate la possibilità di accedervi e utilizzarli per la verifica del tipo. Questa procedura è consigliabile, ad esempio, se sviluppate un file che utilizza più file SWF o librerie condivise, in particolare se accedono a molte classi uguali. L’esclusione di classi consente di impedirne la duplicazione all’interno dei file.

  1. Create un nuovo file XML.
  2. Assegnate al file XML il nome FLA_nomefile_exclude.xml, dove FLA_nomefile corrisponde al nome del file FLA senza estensione. Se il file FLA, ad esempio, è sellStocks.fla, il nome del file XML sarà sellStocks_exclude.xml.
  3. Salvate il file nella stessa directory del file FLA.
  4. Inserite i tag seguenti nel file XML:
    <excludeAssets> 
        <asset name=”className1” /> 
        <asset name=”className2” /> 
    </excludeAssets>

    I valori specificati per gli attributi del nome nei tag <asset> sono i nomi delle classi che dovrebbero essere esclusi dal file SWF. Aggiungete tutti quelli richiesti dal file. Con il file XML seguente, ad esempio, vengono escluse dal file SWF le classi mx.core.UIObject e mx.screens.Slide:

    <excludeAssets> 
        <asset name=”mx.core.UIObject” /> 
        <asset name=”mx.screens.Slide” /> 
    </excludeAssets>

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online