Scritte magiche in Flash
Lunedì 22 Ottobre, 2007Questo che propongo è un articolo che scrissi nell'agosto del 2003 (titolo originale: Scritte magiche in Flash MX). Nonostante sia "datato" (ora userei un codice ActionScript differente), è a mio avviso un simpatico strumento utile per effetti davvero suggestivi. Proporrò più avanti, o fatelo voi, la versione aggiornata con l'uso delle classi...
MovieClip dinamici
L'elemento che gioca un ruolo fondamentale nell'architetura Flash è l'oggetto MovieClip. La possibilità di creare questo tipo di oggetti da codice conferisce a Flash una notevolissima potenzialità, rendendolo un decoroso ambiente di sviluppo davvero divertente. Grazie alla possibilità di aggiungere run-time oggetti di tipo MovieClip, vedremo quanto sia semplice realizzare l'effetto mostrato in figura 1.
Fig. 1 - Esempio di testo ad effetto
La classe MagicText_class
Visto che stiamo utilizzando la versione MX di Flash, facciamo le cose per bene e creiamo una classe MagicText_class da riutilizzare a nostro piacimento. Quello che stiamo per fare è definire una nuova classe MagicText_class, che erediterà tutte le caratteristiche di una classe MovieClip. In questo modo avremmo a disposizione un vero e proprio oggetto, la base per creare successivamente un componente Flash vero e proprio! Se lo desideriamo. Per ora soffermiamoci solo sulla nostra classe e vediamo come costruirla.
Aprite Flash e impostate le dimensioni dello stage a 300 x 100 pixel a 25 fotogrammi al secondo, con sfondo bianco. Ricordo che potete direttamente scaricare il sorgente se lo desiderate.
Create un nuovo simbolo MovieClip e chiamatelo MagicText_class, come mostrato in figura 2. Impostate anche la proprietà Linkage, con esattamente lo stesso nome utilizzato per il simbolo. Per chi ha Flash MX in italiano il pannello sarà con l'etichette diverse, quindi fare riferimento alla figura 2.
Linkage permetterà di aggiungere questo simbolo in modo dimanico da ActionScript. In pratica stiamo rendendo disponibile questa classe all'ambiente di sviluppo Flash, unico modo per farlo tra l'altro.
Ora è il momento di inserire il codice necessario per far diventare questo simbolo un vero e proprio oggetto, con proprietà e metodi da noi definiti. Per far questo (procedimento simile alla creazioni di componenti Flash MX) è necessario informare ActionScript che si sta scrivendo codice per una classe e non per un normale frame Flash. Selezionate il primo frame del simbolo MagicText_class che avete creato ed inserite il seguente codice:
-
#initclip
-
function MagicText() {
-
trace("MagicText::constructor");
-
this.sx = 0;
-
this.index = 0;
-
}
-
//
-
// Eredito la classe MovieClip
-
MagicText.prototype = new MovieClip();
-
//
-
MagicText.prototype.ShowText = function(myStr_str) {
-
this.sx = 0;
-
this.index = 0;
-
this.onEnterFrame = function() {
-
this.attachMovie("letteraanim_mc", "l" + this.index, this.index);
-
var obj = eval("this.l" + this.index);
-
obj.lettera_mc.lettera_txt.autoSize = true;
-
obj.lettera_mc.lettera_txt.text = myStr_str.substr(this.index, 1);
-
obj._x = this.sx;
-
this.sx += (obj.lettera_mc.lettera_txt.textWidth);
-
this.index++;
-
if (this.index> myStr_str.length) {
-
this.onEnterFrame = "";
-
}
-
};
-
};
-
//
-
// (LinkageID, className)
-
Object.registerClass("MagicText_class", MagicText);
-
#endinitclip
-
//
-
// Blocco l'esecuzione
-
stop();
La classe MagicText_class non è il cuore del sistema. In realtà avremmo potuto fare tutto senza di essa. Così, però, ho colto l'occassione di mostrare come sia semplice creare oggetti con Flash MX. Inoltre vedremo come sia molto più comodo utilizzare questi oggetti invece dei MovieClip Drag & Drop...
Il cuore del sistema
Passiamo alla creazione degli ultimi due simboli MovieClip, il vero cuore di tutto il sistema. Questi produrranno concretamente l'effetto o gli effetti video desiderati. Come si evince dal codice, la classe MagicText_class non fa altro che manovrare questi particolari MovieClip. Create ora un nuovo simbolo MovieClip e chiamatelo lettera_mc. Inserite al suo interno, alle coordinate (0,0) un testo dinamico, che chiameremo lettera_txt.
Questo potrà avere qualsiasi dimensione e qualsiasi FONT. Inserite un "A", così da avere un'idea di quello che sarà il risultato finale.
Per far funzionare tutto correttamente, includete tutti i caratteri nel filamto Flash, dall'apposito pannello nelle proprietà del testo dinamico. Questo è l'unico limite, che aumenta purtroppo le dimensioni del file .swf. Se non si procede con l'inclusione delle informazioni del carattere, il giochino non funzionerà come dovrebbe. Il simbolo lettera_mc non deve essere esportato in ActionScript. Esso fornisce un contenitore al simbolo lettera_txt, il quale non potrebbe essere utilizzato direttamente.
Con questo simbolo, dunque, abbiamo creato un contenitore per il nostro carattere. Ora è giunto il momento di creare il simbolo che produrrà l'effetto speciale desiderato.
Creiamo un nuovo simbolo MovieClip e chiamiamolo letteraanim_mc. Questo, come accadeva per la classe MagicText_class, va esportato per essere utilizzato da ActionScript. Dal pannello proprietà selezionate nuovamente Linkage inserendo come nome identificatore lo stesso utilizzato per il simbolo: letteraanim_mc (se non toccate nulla Flash imposta automaticamente il nome identificatore del simbolo esportato con il nome del simbolo).
Animazione ed effetti
All'interno del simbolo letteraanim_mc inserite nel primo frame un'istanza del simbolo lettera_mc, come mostrato nella figura qui a sinistra. Nominate l'istanza di lettera_mc con lo stesso nome: lettera_mc.
A questo punto posizionatevi qualche frame più avanti, ad esempio sul 25, e dal menu Insert (Inserimento per la versione italiana) selezionate KeyFrame (fotogramma chiave). Su quest'ultimo frame inserite in ActionScript uno stop();.
Ora potete divertirvi ed eseguire gli effetti che volete; create una dissolvenza (utilizzando Tween) agendo sul parametro _alpha, ingrandite la scritta, insomma potete fare davvero quello che volete.
Nel file sorgente che potete scaricare si è utilizzata una dissolvenza insieme ad una rotazione parziale con ingrandimento.
Fig. 5 - Ecco come si presenta il MovieClip letteraanim_mc. Provate anche a lasciare un solo fotogramma senza nessuna animazione...
Ultimo sforzo
Se siete arrivati fino a qui abbiamo fatto davvero tutto, o almeno la parte relativamente più complessa. Possiamo dunque provare il nostro duro lavoro. Tornate sulla scena principale, selezionate il primo fotogramma ed inserite questo codice:
-
stop();
-
//
-
attachMovie("MagicText_class", "mt", 1);
-
mt._x = 84;
-
mt._y = 35;
-
mt.ShowText("Hello World!");
-
//
-
function repeat() {
-
mt.ShowText("Hello World!");
-
}
-
//
-
I_repeat = setInterval(repeat, 3000);
Il codice sul primo frame del nostro Movie crea l'oggetto mt come istanza della classe MagicText_class tramite l'struzione attachMovie(). Le righe successive riposizionano il MovieClip (a vostro piacimento), ed invocano il metodo ShowText(), con il testo che vogliamo mostrare. Ultima nota: la funzione repeat() ripropone l'animazione ogni 3 secondi.
Download
| Sistema Operativo |
 Microsoft  Apple |
| Ambiente |
 Macromedia Flash MX
|
| Sorgente |  sorgenti.zip (36 K)
|
volevo solo essere sicuro che non ci fosse qualche altro...
Lascia un commento