Marcello Surdi

 [ Esistono altre versioni di ASBox: vedi il registro delle versioni ] Riprende lo sviluppo del progetto ASBox. Ho deciso di fare tesoro dei consigli tratti dai commenti alle prime due versioni dello script e ho aggiunto un paio di interessanti funzionalità, aggiornando per il momento soltanto la prima release, quella più elementare, che consente la visualizzazione di un singolo elemento. ASBox1.1 è scritto in AS3 e necessita di Flash Player 10 o superiore, non esiste una versione in AS2.

1. Il codice è stato totalmente revisionato rendendolo modulare e più efficiente.
2. Con l’uso del metodo Loader.unloadAndStop() è migliorata la gestione degli SWF: ASBox 1.1 è ora in grado di visualizzare SWF contenenti video o file di immagine (JPG, GIF e PNG), in altre parole tutti i file consentiti dalla classe Loader.
3. L’elemento esterno caricato si adatta alla risoluzione della finestra in modo da essere sempre visibile nella sua interezza.
4. Il campo di testo della didascalia oltre a disporsi all’occorrenza su più righe di testo come nella seconda versione di ASBox, ora supporta inoltre il sottoinsieme di tag HTML consentito dalla proprietà htmlText. I tag <a> verranno formattati automaticamente in rosso con sottolineatura.
5. Ho aggiunto infine altre migliorie derivate da ASBox 2.0: l’animazione per l’adattamento del box alle dimensioni dell’elemento esterno dopo il suo caricamento,  il supporto alla navigazione da tastiera (il box si chiude premendo ESC) e la possibilità di cambiare il testo del pulsante di chiusura tramite il file Configuration.as.

Passo dopo passo

Passo 1

Nonostante una vera e propria rivoluzione a livello di codice, la procedura d’uso di ASBox è rimasta praticamente immutata. Scaricare il file zip contenente il FLA d’esempio e tutto il codice ActionScript necessario e scompattarlo. L’esempio è stato creato con Flash CS4 e non sarà possibile aprirlo con una versione precedente.

Passo 2

Creare un nuovo file Flash (ActionScript 3.0).

Passo 3

Predisporre il pulsante da cliccare. Questo deve essere un clip filmato con nome di istanza, poniamo mc. Non importa che sia creato manualmente o dinamicamente sullo stage.

Passo 4

Nella Document Class del documento (o in un livello del FLA) inserire queste linee di codice:

import asbox.*;

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

Con la prima linea si importa il codice necessario (che ancora dobbiamo copiare nella directory del nostro FLA), quindi si impostano i settaggi necessari per lo stage. Nella scheda HTML delle Impostazioni pubblicazione del nuovo file (File>Impostazioni pubblicazione…), scegliere inoltre il valore Percentuale nella casella di scelta Dimensioni (Larghezza e Altezza 100 percento). Come nelle altre versioni di ASBox questi accorgimenti hanno lo scopo di consentire all’SWF di espandersi per tutta l’area della finestra del browser mantenendo invariate le dimensioni degli oggetti contenuti al suo interno.

Passo 5

Associare al pulsante appena creato questo codice:

mc.buttonMode = true;
mc.lbl = 'Didascalia opzionale per l\'immagine o video, questa riga può essere omessa!';
// Indirizzo relativo o assoluto del file da caricare
mc.path = 'stewie.jpg';
mc.addEventListener(MouseEvent.CLICK,f);

Accertarsi sempre che path corrisponda ad un indirizzo valido.
La funzione f associata come listener dell’evento CLICK può essere impostata come segue:

function f(e:MouseEvent):void  {
 var btn:MovieClip = e.target as MovieClip;
 new ASBox11(btn,550,400);
}

Fin dalla primissima versione di ASBox i parametri richiesti dalla classe sono sempre gli stessi: l’oggento pulsante target dell’evento e la larghezza e l’altezza dello stage in design time, ovvero le dimensioni dello stage nell’ambiente di sviluppo di Flash, in quanto nel browser, come già detto, queste si estenderanno a tutta l’area utile della finestra del browser.

Passo 6

Copiare infine le cartelle caurina e asbox nella stessa directory del nuovo file FLA e copiare la cartella ASBox1.1 del file asbox1.1.fla di esempio nella Libreria del proprio FLA.

Passo 7

Assicurarsi infine di rimuovere le impostazioni di margine predefinite della pagina html che conterrà l’swf in modo che il box possa estendersi per tutto lo spazio della finestra senza lasciare spazi vuoti. Aggiungere quindi al foglio di stile associato alla pagina la riga:

html, body { margin: 0; padding: 0; }

Passo 8

Dal file Configuration.as è possibile variare la distanza del box dal bordo superiore della finestra del browser e l’etichetta di testo del pulsante di chiusura.

Tra qualche giorno l’aggiornamento per la seconda versione.