• Programmazione » PHP » Script PHP e Tutorial

Gestione del testo

Abbiamo dunque visto come inserire forme di tutti i tipi, gestire simboli, ma per immettere del semplice testo? Neanche in questo caso la procedura è particolarmente complessa: è necessario impostare innanzitutto un nuovo font di caratteri, creando un nuovo oggetto della classe SWFFont(), e successivamente attribuirlo ad una porzione di testo definita da un nuovo oggetto SWFText(). Per quanto riguarda i font, potremmo utilizzare quelli denominati "device fonts" , ovvero quelli che il Flash Player richiama direttamente dal browser, determinando alcuni vantaggi come una notevole riduzione delle dimensioni del filmato, ed alcuni svantaggi come la mancata possibilità di anti-aliasing. I device font sono tre, _sans, _serif, e _typewriter, ovvero i primi che compaiono nella lista del software di authoring Flash, e che richiamano rispettivamente Helvetica, Times e Courier su MacOS, Arial, Times New Roman, e Courier New su Windows, e font simili su Linux.

Per incorporare font personalizzati, con MING dovremo effettuare una conversione in speciali file .fdb.
La distribuzione in sorgenti di MING contiene infatti delle speciali utility, tra cui una di nome makefdb, in grado di creare un nuovo font fdb a partire da un filmato contenente alcuni caratteri e salvato come template Generator (.swt) in Macromedia Flash (il template infatti conterrà l'intero set di caratteri, a differenza del semplice filmato SWF che avrebbe incluso solo i caratteri effettivamente utilizzati): basterà dunque procurarsi il file .swt da cui estrarre il font, compilare le utility presenti nell'archivio dei sorgenti, nel caso di utilizzo con Linux/Unix.

Ottenuto in qualche modo il font fdb (che sta per Font Definition Block), bisognerà creare un nuovo oggetto SWFFont() in modo da incorporarlo nel filmato; a questo punto potremo definire il testo vero e proprio, creando un nuovo oggetto SWFText(), a cui oltre all'attribuzione del font con la funzione setFont(), imposteremo proprietà come il colore, tramite la funzione setColor(), la dimensione del carattere, con setHeight(), e la spaziatura fra i caratteri, con setSpacing(). Il testo da inserire sarà specificato per mezzo della funzione addString(), e con moveTo() abbiamo la possibilità di posizionare il cursore nelle coordinate specificate, e relative all'area dell'oggetto testo. Un esempio completo:

$font=new SWFFont("arial.fdb");
/* Il font è presente nella stessa cartella
del file .php */
$testo=new SWFText();
$testo->setFont($font);
$testo->setHeight(12);
$testo->setColor(50, 50, 255);
$testo->addString("Esempio");

Gestione delle immagini bitmap
MING può gestire anche immagini bitmap in filmati Flash. Tuttavia il supporto attuale si riferisce solo ai formati JPEG e PNG, per cui comunque bisogna attenersi ad alcune semplici procedure. Innanzitutto, per quanto riguarda le immagini di tipo JPEG, bisogna accertarsi che esse siano senza compressione o interlacciamento: nel caso volessimo inserire un'immagine JPEG ad esempio ottimizzata per il web, molto probabilmente sarà il caso di risalvarla senza queste caratteristiche, in formato JPEG baseline.

Nel caso invece delle immagini PNG, non ci sono particolari restrizioni se non quella di convertirla nel formato DBL tramite l'utility png2dbl, presente nell'archivio dei sorgenti di MING oppure in quello dei binari per Win32. Successivamente, basterà importare l'immagine tramite un nuovo oggetto della classe SWFBitmap(), con cui sarà utilizzata la funzione standard di apertura file fopen(); dopo quest'operazione, non resterà che aggiungerla al filmato come di consueto:

$immagine = new SWFBitmap(fopen
("immaginepng.dbl" , "rb")));
/* il secondo parametro di fopen(), "rb" ,
indica l'apertura in sola lettura e in
modalità binaria */
$filmato->add($immagine);

Interpolazione forma (shape tweening)
Cominciamo a dare un po' di animazione ai nostri filmati: stiamo creando filmati Flash d'altronde. Come credo sicuramente sarà noto tra i lettori che abbiano una qualche conoscenza di Macromedia Flash, durante la creazione di un filmato è possibile gestire basilarmente due tecniche di animazione: la prima è quella "frame-by-frame" ovvero fotogramma per fotogramma, stile gif animate, e raramente utilizzata dai designer per la sua pesantezza in termini di dimensioni finali del filmato, e per la laboriosità che richiede durante le fasi di editing.

La seconda invece, e anche quella più utilizzata, è l'interpolazione o tweening, con cui vengono specificate soltanto una condizione di partenza, una di arrivo, e il numero di frame in cui Flash si preoccuperà di ricostruire matematicamente gli stati intermedi. L'interpolazione può essere di due tipi: quella movimento, in cui l'istanza di un simbolo viene modificata in termini di posizione, oppure di dimensioni, angolazione, colore, o quant'altro; e quella forma, la cui tecnica assomiglia molto al morphing, in cui si parte da una forma iniziale per ottenerne una totalmente nuova. E proprio per l'interpolazione forma, in MING esiste una classe specifica, SWFMorph(), di semplice e immediato utilizzo: sarà sufficiente, infatti, creare un nuovo oggetto SWFMorph(), e specificare le due forme di partenza e di arrivo definendole, anzichè come di consueto con nuovi oggetti SWFShape(), tramite le intuibili funzioni getShape1() e getShape2() del nuovo oggetto SWFMorph(); successivamente, per mezzo della funzione setRatio(), in grado di definire il grado di trasformazione per mezzo di un valore decimale compreso tra 0 e 1, e con un'iterazione progressiva tra i fotogrammi, sarà reso l'effetto visivo del morphing. Un esempio del codice:

/* Definizione di una nuova interpolazione forma */
$interpolazForma = new SWFMorph();
/* Forma di partenza: un quadrato rosso con bordo nero */
$forma = $interpolazForma->getShape1();
$forma->setLine(1, 0, 0, 0);
$forma->setLeftFill($forma->addFill(255, 0, 0));
$forma->movePenTo(-100,-100);
$forma->drawLine(200, 0);
$forma->drawLine(0, 200);
$forma->drawLine(-200, 0);
$forma->drawLine(0,-200);
/* Forma di arrivo: un triangolo giallo */
$forma = $interpolazForma-> getShape2();
$forma->setLine(5, 200, 120, 50);
$forma->setLeftFill($forma-> addFill(250, 180, 100));
$forma->movePenTo(0,-100);
$forma->drawLine(50, 0);
$forma->drawLine(50, 0);
$forma->drawLine(-50, 100);
$forma->drawLine(-50,-100);

A questo punto, definita l'interpolazione, non resta che aggiungerla al filmato, e posizionarla, sia nelle coordinate cartesiane e sia nella linea temporale o timeline. Il risultato del codice si può osservare nel file shapetweening.swf, presente nell'archivio del cdrom in allegato, o comunque lanciando il file shapetweening.php su un server abilitato per PHP/MING.

$istanzaInterpolaz = $filmato-
>add($interpolazForma);
$istanzaInterpolaz->moveTo(160,120);
/* Impostazione del cambiamento di stato
progressivo dell'interpolazione: i passaggi
sono 100, e l'animazione durerà 5 secondi,
perchè il filmato ha velocità 20fps. */
for($i=0.0; $i<=1.01; $i+=0.01){
$istanzaInterpolaz->setRatio($i);
$filmato->nextFrame();
}

Interpolazione movimento (motion tweening) e movieclip
L'interpolazione movimento è dunque una modifica animata delle proprietà di un'istanza di un simbolo grafico, o anche di un movieclip. E spesso proprio l'utilizzo combinato di interpolazioni movimento e clip filmato (che offrono il grande vantaggio di gestire più animazioni indipendentemente dalla timeline principale) consente di ottenere risultati davvero speciali con Flash.

Nel file simboli.php, il cui output swf è sempre come in figura 4, sono presenti anche due piccoli movieclip, entrambi con un'interpolazione movimento: l'animazione di uno dei poligoni blu che viene riscalato progressivamente, e la rotazione di un'istanza del quadrato giallo.
Per ottenere questi due movieclip, sono stati creati nuovi oggetti della relativa classe SWFSprite(), e analogamente a come avremmo fatto per il movie principale, le forme sono state inserite e modificate ad ogni fotogramma successivo (operazione resa semiautomatica grazie ad un'iterazione con controllo for). Ad esempio per la rotazione del quadrato, è stato utilizzato il seguente codice:

/* Creazione di un nuovo movieclip vuoto */
$movieQuadrato = new SWFSprite();
/* Inserimento del quadrato nel nuovo
movieclip */
$clipQuadrato=$movieQuadrato->
add($quadrato);
/* Animazione del movieclip: rotazione
di 360 gradi */
for($i=0; $i<=36; $i++){
$movieQuadrato->nextFrame();
$clipQuadrato->rotateTo(10*$i);
}

Terminata la rotazione, sono stati inseriti alcuni altri fotogrammi, non chiave, soltanto con lo scopo di fermare per qualche istante l'immagine:

for($i=0; $i<18; $i++){
$movieQuadrato->nextFrame();
}

Risultati simili, con un po' di fantasia, si possono ottenere anche tramite alcune linee di codice ActionScript, il linguaggio di scripting simile a JavaScript ideato da Macromedia per Flash, e il cui compilatore in MING è davvero di buon livello e probabilmente migliorerà ancora in futuro. Effetti avanzati: riempimento con gradiente, utilizzo di testo come forma. Nel file effetti_motiontweening.php presente nel cdrom in allegato, è stata realizzata un interpolazione movimento di una frase contornata e riempita con gradiente: normalmente in Flash non è possibile colorare del testo se non con colore solido, e nè tantomeno disegnarne il contorno, se prima non viene convertito in forma. In MING creeremo una nuova forma, un nuovo font, e utilizzeremo la funzione drawGlyph(), in grado di disegnare come forma un carattere per volta: servendoci di un'iterazione basata sull'array della stringa, potremmo automatizzare il disegno di un'intera frase.

$formaTesto = new SWFShape();
$formaTesto->setLine(1, 0, 0, 0);
$font=new SWFFont("arial.fdb");
$stringa="Testo contornato e sfumato";
for($i=0; $i drawGlyph($font,
$stringa[$i]);
$formaTesto->movePen($font->
getWidth($stringa[$i]), 0);

La funzione getWidth() dell'oggetto SWFFont() consente di conoscere la larghezza di un carattere passato per argomento, dato necessario per posizionare correttamente i caratteri della frase, che altrimenti sarebbero disegnati uno sull'altro.
Per quanto riguarda invece la creazione di gradienti, esiste una classe dedicata, SWFGradient(), e una funzione, addEntry(), con cui specificare un colore membro del gradiente, passando come parametri la sua collocazione, secondo un valore decimale compreso tra 0 e 1, e i valori da 0 a 255 per ogni componente RGB e per il canale alpha. Ad esempio:

$gradiente = new SWFGradient();
$gradiente->addEntry(0.0, 0, 0, 255);
$gradiente->addEntry(0.5, 255, 0, 0);
$gradiente->addEntry(1.0, 255,
255, 0, 100);

per definire un gradiente da blu a rosso, e da rosso a giallo semitrasparente. Successivamente il gradiente potrà essere modificato come angolazione ed estensione, per mezzo delle stesse funzioni di trasformazione di un'istanza, e sarà attribuito ad un riempimento con la funzione addFill(), con cui è possibile specificare anche un flag per definirlo come lineare o circolare:

$riempimentoTesto=$formaTesto->
addFill($gradiente,
SWFFILL_LINEAR_GRADIENT);

Adesso il riempimento potrà essere applicato come di consueto con le funzioni setLeftFill() o setRightFill().

Interattività: pulsanti, campi di testo, azioni
Flash è uno strumento molto apprezzato anche per l'elevato grado di interattività che offre all'utente: scopriamo dunque come gestire l'input dell'utente per mezzo di un esempio che ci consente di presentare sia la gestione dei campi di testo, che quella dei pulsanti e di semplici azioni scritte in ActionScript. Il file pulsante_campo.php (il cui output SWF è visualizzato nell'immagine 8) contiene l'esempio di una casella di testo in cui l'utente può inserire un indirizzo web, al quale sarà rediretto, in una nuova finestra del browser, cliccando sul pulsante. Ma vediamo innanzitutto come inserire una casella di testo.
È necessario creare un nuovo oggetto della classe SWFTextField(), con la possibilità di specificare alcuni flag al momento della sua creazione, combinabili con l'operatore OR binario (|):

1. SWFTEXTFIELD_DRAWBOX per disegnare il contorno alla casella;
2. SWFTEXTFIELD_HTML per utilizzare alcuni semplici tag HTML di formattazione;
3. SWFTEXTFIELD_MULTILINE per linee mutiple;
4. SWFTEXTFIELD_NOEDIT per rendere il campo non modificabile dall'utente;
5. SWFTEXTFIELD_NOSELECT per rendere il campo non selezionabile;
6. SWFTEXTFIELD_PASSWORD per mascherare il contenuto, ad esempio nel caso di una password;
7. SWFTEXTFIELD_WORDWRAP per andare a capo automaticamente.

Ad esempio nel caso della casella per l'inserimento dell'URL, dovremmo scrivere le seguenti linee di codice:

$campo = new SWFTextField
(SWFTEXTFIELD_DRAWBOX);
$campo->setFont(new WFFont("_sans"));
$campo->
addString("http://www.itportal.it");
$campo->setBounds(250, 24);$campo->
setHeight(20);$campo->setColor(0, 0,255);
$campo->setName("stringa_url");

La funzione setBounds() determina le dimensioni della casella; le altre funzioni ci ritornano familiari, perché il loro utilizzo avviene analogamente all'inserimento di semplice testo con la classe SWFText(); alla casella abbiamo inoltre attribuito un nome, in quanto avremo bisogno di riferirci al suo contenuto per l'azione di reindirizzamento. E adesso... vuoi creare un pulsante? Scopri come nel box di questa pagina.

Chiusura del filmato e incorporazione nella pagina HTML
Terminata la creazione del filmato, resterà scegliere se salvarlo in un file, tramite la funzione save() della classe SWFMovie(), oppure inviarlo direttamente in output per mezzo della funzione output(), che, unita all'invio al browser dell'intestazione MIME sul tipo di contenuto della pagina, application/x-shockwave-flash, consente di riprodurre al volo il filmato appena creato:

header('Content-type: application/
x-shockwave-flash');
$filmato->output();

Anche utilizzando queste funzioni il filmato può essere normalmente integrato direttamente in una pagina HTML, tramite il consueto codice cross-browser con doppio tag <EMBED> e <OBJECT>: il file PHP indicato, al momento dell'inserimento, sarà eseguito dal server, e fornirà l'output SWF previsto.

<OBJECT classid="clsid:D27CDB6E-AE6D-
11cf-96B8-444553540000"
codebase="http://download.macromedia.
com/pub/shockwave/cabs/flash/swflash.
cab#version=4,0,0,0"
width="180" height="135">
<PARAM name="Movie"
value="filmato.php">
<PARAM name="loop" value="false">
<EMBED src="filmato.php" width="180"
height="135" pluginspage=
"http://www.macromedia.com/
shockwave/download/index.cgi?P1_Prod_
Version=ShockwaveFlash" LOOP="FALSE">
</EMBED></OBJECT>

Conclusioni
È grande la soddisfazione dopo aver creato un filmato flash on demand con PHP e MING: combinando la potenza del PHP con la multimedialità e l'interattività di Flash riusciamo infatti ad ottenere il massimo della dinamicità dei contenuti e della grafica della nostra applicazione web, e anche un ottimo sostituto a Generator, il software di Macromedia per la creazione server-side di SWF. E una volta apprese le nozioni base di MING, sarà discretamente facile realizzare filmati anche complessi: senza dubbio non disponiamo dell'interfaccia WYSIWYG del software di authoring Flash, ma abbiamo l'indiscutibile vantaggio di creare tutto con un linguaggio di programmazione. Buon divertimento!