FlashEff 2, effetti su immagini e testi

Il "mondo Flash" ha da sempre beneficiato del contributo di componenti ed estensioni, messe online dagli utenti, gratuitamente o meno. Un'azienda molto attiva nello sviluppo di estensioni per Flash è la JumpEye Components, autrice di una tra le estensioni probabilmente più diffuse al momento per Flash CS3 e CS4: FlashEff, di cui è stata recentemente rilasciata la versione 2.

FlashEff è un set di effetti per testi e movieclip, disponibile sia in versione commerciale sia in versione gratuita; in questo articolo parleremo della versione free, le cui limitazioni sono relative principalmente al numero di effetti, alle minori possibilità di personalizzazione e soprattutto all'impossibilità di usare gli effetti per progetti commerciali, cosa invece consentita delle versioni a pagamento.

Caratteristiche di FlashEff 2

Questa estensione si è diffusa molto velocemente grazie al numero di effetti disponibili (più di 3000, personalizzabili) e soprattutto alla semplicità di utilizzo. Un'aspetto che sicuramente interesserà gli sviluppatori è la possibilità di gestire gli effetti tramite ActionScript (FlashEff è utilizzabile solo con ActionScript 3), mentre per gli utenti più interessati al lato design è possibile utilizzare la modalità visuale, usufruibile tramite un componente e un intuitivo pannello, come vedremo a breve.

Installazione di FlashEff 2

Per prima cosa scarichiamo la versione gratuita, per farlo sarà necessario registrarsi al sito (o effettuare il login). È utile ricordare i dati di login, perchè dovremo utilizzarli anche per accedere al pannello di FlashEff in Flash!

Una volta autenticati, clicchiamo pulsante "Free Download", e otteniamo l'archivio zip contenente l'estensione accompagnata da una ricca di documentazione ed esempi. Lanciando il file FlasshEff2.mxp, e attendiamo che l'estensione venga installata (è necessario l'Extension Manager, solitamente installato con Flash o con una qualsiasi edizione della Creative Suite).

A questo punto avviamo Flash e creiamo un nuovo File Flash (ActionScript 3), quindi apriamo il pannello Componenti (Ctrl+F7), dovremmo trovare le nuove categorie FlashEff2 e FlashEff2 Patterns.

Figura 1. Il pannello componenti con le nuove categorie

Installazione delle estensioni su Flash CS4

In alcuni casi, specialmente con Flash CS4, può capitare che l'installazione non vada a buon fine (lo noteremo proprio perchè non troveremo i nuovi componenti), in questo caso è necessario andare a controllare nella cartella di configurazione di Flash.

C:/Documents and settings/nome utente/Impostazioni locali/Dati Applicazioni/Adobe/Flash CS4

C:/Utenti/nome utente/Impostazioni locali/Dati Applicazioni/Adobe/Flash CS4

In questa cartella dovremmo avere solo una sottodirectory relativa alla lingua in cui abbiamo installato il programma (esempio en per l'inglese), tuttavia può capitare che venga creata una nuova cartella basata sulla lingua del sistema operativo (per esempio it), in questo caso sarà necessario spostare i file. Quindi se troviamo una cartella it con al suo interno dei file e la nostra versione di Flash è in inglese, spostiamo la cartella Configuration da dalla cartella it alla cartella en, diamo il permesso di sovrascrivere gli eventuali file uguali (in realtà saranno solo i nuovi file relativi all'estensione installata) e riavviamo Flash.

Il problema evidenziato non è dovuto a FlashEff, ma può verificarsi con qualsiasi estensione per Flash (risulta essere un errore comune con l'Extension Manager CS4), pertanto se capitasse di non trovare i nuovi componenti o pannelli dopo aver installato un'estensione, ricordiamoci di eseguire questa verifica, in particolar modo se usiamo Flash CS4 o comunque una versione del programma in una lingua diversa da quella del sistema operativo.

Un'alternativa che sembra funzionare è quella di non lanciare il file MXP, ma installare l'estensione da Flash, dal menu Help -> Manage Extensions. Sembra infatti che in questo modo l'Extension Manager CS4 consideri la lingua dell'applicazione, mentre installando direttamente dal file MXP venga presa in considerazione la lingua del sistema operativo.

Pannelli e strumenti di FlashEff 2

Conclusa l'installazione possiamo finalmente utilizzare i nuovi effetti. Anzitutto creiamo un oggetto da animare. FlashEff può funzionare con diversi tipi di elementi, disegniamo ad esempio un elemento sullo stage e convertiamolo in clip filmato.

Apriamo quindi il pannello componenti e dalla categoria FlashEff2 selezioniamo il componente FlashEff2, quindi trasciniamo sopra al movieclip che vogliamo animare. Noteremo che il componente di "aggancerà" al movieclip (potremo comunque spostare in seguito l'istanza del componente qualora ci fosse più comodo).

Figura 2. Effetto "aggangiato" sul movieclip

Abbiamo appena associato un effetto al nostro oggetto, ora dobbiamo impostarlo e stabilire con precisione che tipo di animazione vogliamo utilizzare: per questo è disponibile il pannello FlashEff2 Panel, che possiamo aprire dal menu Window > Other panels.

Al primo avvio del pannello è possibile che venga richiesto di eseguire il login con il proprio nome utente e password scelti in fase di registrazione sul sito JumpEye.

Figura 3. Il pannello FlashEff2

Gli effetti sono divisi in

• Symbol pattern, che funzionano con movieclip e pulsanti
• Text pattern, che si possono invece applicare ai campi di testo dinamici. È importante ricordare di incorporare i caratteri nel campo di testo, perchè gli effetti funzionino

Non è possibile applicare i Symbol Patterns ai campi di testo (e viceversa).

Alcuni effetti sono evidenziati da una "fascetta" gialla, questa indica gli effetti compatibili solo con il Flash Player 10 (ad esempio effetti che sfruttano le nuove funzioni 3D non disponibili nel Flash Player 9), si tratta di un riferimento piuttosto utile per quei lavori che richiedono compatibilità con specifiche versioni del player.

Per ottimizzare l'uso della memoria, in FlashEff2 gli effetti non sono subito visibili, ma basta passare con il mouse su una delle caselle degli effetti per vederne un'anteprima, mentre cliccando sul riquadro si accederà alla finestra delle impostazioni dell'effetto.

Figura 4. Dettagli di un effetto

Da questa schermata possiamo scegliere se usare l'effetto per mostrare l'elemento sullo stage (Show) o per nasconderlo (Hide), è possibile applicare degli effetti aggiuntivi (Filters), utilizzare l'oggetto come pulsante (Button), con determinati effetti, e si possono impostare alcune opzioni extra come ad esempio caricare le impostazioni dell'effetto da un file XML (Misc).

Per ognuna delle voci del menu superiore abbiamo poi a disposizione un sotto-insieme di opzioni, in figura ad esempio vediamo che per la scheda Show possiamo impostare l'effetto (Effect): abbiamo a disposizione alcuni preset (nella versione commerciale è anche possibile personalizzare i singoli parametri con il tasto Edit settings), anche in questo caso con un rollover del mouse possiamo ottenere l'anteprima. Il tooltip vicino al nome dell'effetto permette, passandovi sopra col mouse, di leggere una breve descrizione dell'effetto che abbiamo scelto.

Cliccando su Tween potremo personalizzare la durata dell'animazione e applicare eventuali effetti di accelerazione, questa opzione però, nella versione gratuita, è limitata.

Da Command possiamo impostare alcune azioni da eseguire all'inizio o alla fine dell'animazione, infine dalla scheda Options è possibile impostare un'eventuale ritardo dell'animazione e attivare o a disattivare il relativo autoPlay.

Una volta impostate le opzioni per l'effetto non ci resterà che testare il nostro filmato per poter vedere l'animazione.

L'associazione di un effetto a un campo di testo segue lo stesso procedimento, ovviamente dobbiamo selezionare un Text Pattern anzichè un Symbol pattern e, come detto, dobbiamo ricordarci di incorporare i caratteri nel nostro campo di testo dinamico.

Nella prima parte abbiamo visto come impostare un effetto di FlashEff su un movieclip e come personalizzarlo dall'apposito pannello: in questo caso il procedimento è semplice e comodo, praticamente per tutti gli step abbiamo già un'anteprima di come verrà rappresentato l'effetto, quindi la scelta della transizione e l'applicazione dei parametri sono molto rapide.

Tra gli aspetti principali di FlashEff c'è, però, la possibilità di applicare transizioni ed effetti tramite ActionScript 3. FlashEff, infatti, non trasforma gli oggetti in fotogrammi come avviene ad esempio con i "timeline effects" di Flash o con altre librerie ed estensioni, ma lascia intatti gli elementi e li manipola tramite script, il che lo rende ovviamente particolarmente versatile e controllabile.

Un esempio di gestione via script è anche lo showcase di effetti che troviamo sul sito dell'estensione: è stato realizzato senza creare una ad una tutte le clip, con relativo risparmio di tempo.

In questo articolo seguiremo i passaggi necessari a utilizzare FlashEff via codice, applicheremo alcuni effetti ad un oggetto e sfrutteremo gli eventi di FlashEff per creare delle sequenze di animazioni.

Impostazioni preliminari

Per prima cosa per utilizzare FlashEff 2 via codice è necessario istanziare un componente FlashEff2Code. Questo componente contiene tutti gli elementi necessari per accedere agli effetti via ActionScript, non utilizzarlo potrebbe generare errori di compilazione.

Apriamo quindi il pannello Componenti e dalla categoria FlashEff2 selezioniamo FlashEff2Code, quindi trasciniamone un'istanza sullo stage; eventualmente possiamo trascinare l'istanza anche nella libreria (oppure trascinarla sullo stage e poi cancellarla), non è infatti obbligatoria la sua presenza nell'area di lavoro.

Figura 5. Il componente FlashEff2Code

A questo punto è necessario creare un'istanza dell'oggetto FlashEff2Code. Quindi aggiungiamo il componente allo stage tramite il metodo addChild, inoltre possiamo impostare alcune proprietà come ad esempio l'autoPlay o il ritardo nella partenza di un effetto.

Il modo più semplice, quindi con l'uso delle proprietà di default, è il seguente:

var effetto:FlashEff2Code = new FlashEff2Code();
addChild(effetto);

Se vogliamo aggiungere delle proprietà, come l'autoPlay per le transizioni di tipo "show" (ovvero quelle che mostrano l'oggetto a cui è applicata l'animazione tramite l'effetto scelto), il codice diventa questo:

var effetto:FlashEff2Code = new FlashEff2Code();
effetto.showAutoPlay = true;
addChild(effetto);

In questa fase possiamo già anche indicare il target cui applicare le animazioni: ad esempio possiamo creare un MovieClip sullo stage con nome istanza mc e utilizzare il codice

effetto._targetInstanceName = "mc";

Scelta dell'effetto

Una volta impostato FlashEff2 e scelta la clip cui applicare l'animazione, dobbiamo scegliere l'effetto da usare; possiamo sceglierne anche più di uno, sia che vogliamo applicarlo ad un singolo oggetto, sia che abbiamo oggetti diversi da animare

Occorre sceliere gli effetti prima della stesura del codice, perchè è necessario inserire nella libreria del filmato i pattern che utilizzeremo, altrimenti otterremo errori in compilazione. Questo è forse il maggiore svantaggio nell'uso di FlashEff2 via ActionScript: rende relativamente scomodo un cambiamento in corso d'opera.

Per scegliere l'effetto da applicare può essere molto utile visualizzare le anteprime nel pannello FlashEff che abbiamo visto all'inizio dell'articolo, altrimenti possiamo utilizzare lo showcase appena visto.

Scelto l'effetto, apriamo dal pannello Componenti la categoria FlashEff2 Patterns, cerchiamo l'effetto che abbiamo selezionato e trasciniamone un'istanza in libreria.

Figura 6. I pattern di FlashEff

Importiamo per prima cosa l'effetto nel nostro codice ActionScript:

import com.jumpeye.flashEff2.symbol.wavy.FESWavy

Assicuriamoci che l'effetto e il percorso siano corretti, altrimenti riceveremo un errore di compilazione. Per sapere quale percorso usare nel codice, nel pannello della libreria possiamo controllare il valore dell'attributo Export del pattern scelto.

Figura 7. Percorso per l'importazione della classe

Questo passaggio di scelta e importazione del pattern è valido per tutti i pattern.

Non ci resta che creare un'istanza del nostro effetto FESWavy, impostarne le proprietà (ad esempio la durata) e quindi associarla all'oggetto FlashEff2Code creato in precedenza. Queste operazioni si possono fare in poche righe di codice:

var wavyEff:FESWavy = new FESWavy();
wavyEff.tweenDuration = 1;
effetto.showTransition = wavyEff;

Abbiamo impostato l'effetto wavyEff per mostrare l'oggetto (showTransition) e abbiamo definito la durata della transizione (tweenDuration) a un secondo.

Ovviamente possiamo associare gli effetti per nascondere l'oggetto (hideTransition) maniera del tutto analoga. Supponiamo per esempio di voler applicare l'effetto Wavy prima in entrata e poi dopo alcuni secondi in uscita, dobbiamo modificare il codice in questo modo:

var wavyEff:FESWavy = new FESWavy();
wavyEff.tweenDuration = 1;
effetto.showTransition = wavyEff;
effetto.hideTransition = wavyEff;
effetto.hideDelay = 3;

Le due nuove righe di codice associano l'effetto wavyEff come transizione per nascondere l'oggetto e un ritardo di 3 secondi. Il fatto che le due proprietà siano separate ci permette di associare eventualmente diversi effetti ad entrata ed uscita.

In questo modo il filmato verrà avviato, partirà l'animazione di entrata dell'oggetto (e durerà un secondo) e dopo 2 secondi (3 in totale dall'inizio del filmato) l'oggetto sparirà sempre tramite la transizione Wavy. È possibile associare anche il ritardo alla transizione in entrata usando la proprietà showDelay.

Gli eventi collegati alle transizioni

Per un maggior controllo delle animazioni, in particolar modo nel caso di sequenze, quando un effetto parte solo alla conclusione di un altro, l'utilizzo del ritardo in secondi non è la soluzione migliore: potremmo non avere un sincronismo assoluto. Inoltre, se dobbiamo allungare o accorciare una transizione, dobbiamo controllare e modificare anche gli altri valori. Per questo FlashEff mette a disposizione due eventi, TRANSITION_START e TRANSITION_END, tramite i quali possiamo sapere quando una transizione viene avviata o giunge al termine.

L'uso di tali eventi è uguale a quello dei classici eventi di ActionScript 3, per prima cosa è necessario importare il relativo package:

import com.jumpeye.Events.FLASHEFFEvents;

Quindi associamo al nostro oggetto gli eventi e le relative funzioni di risposta

effetto.addEventListener(FLASHEFFEvents.TRANSITION_START, inizioEffetto);
effetto.addEventListener(FLASHEFFEvents.TRANSITION_END,   fineEffetto);

function inizioEffetto(evt:FLASHEFFEvents):void
{
  trace("Effetto avviato");
}

function fineEffetto(evt:FLASHEFFEvents):void
{
  trace("Effetto concluso");
} 

Entrambi gli eventi hanno una proprietà currentTransitionType, che può assumere i valori show e hide, permettendoci di sapere se a iniziare (o a finire) sia stata un'animazione di entrata o di uscita di un oggetto.