Buon Lunedì a tutti!
Abbiamo già visto come
aprire una popup utilizzando Actionscript e Javascript.
La tecnica rimane sempre la stessa, cambia solo la sintassi Actionscript 3.0 che invece di sare il metodo getURL usa navigateToURL.
In questi giorni però mi sono nate alcune domande dopo aver letto un post di un utente, precisamente
questo .
Per chi non avesse dimestichezza con l' inglese, l' autore del post mi ha posto di fronte ad una problematica, e cioè:
supponiamo di avere 300 immagini che vengono caricate in Flash ed usate come anteprime. Ognuna di esse al click deve aprire una popup con l' immagine a dimensioni originali ( come ad esempio succede nello
Scroller di immagini creato da FlepStudio ).
In questo caso dovremmo creare una pagina html per ogni immagine con inserita appunto l' immagine corrispondente e poi aprirla da Flash come una popup.
300 immagini ??? Fare 300 pagine html ??? Eh già... decisamente scomodo e lento.
Studiandoci sopra, ho trovato una soluzione utilizzando la classe ExternalInterface di ActionScript 3.0 ed una funzione Javascript.
Questa soluzione mi permette di creare una popup in runtime, quindi senza dover creare la pagina html per ogni immagine.
Vediamo come fare...
Prima di tutto bisogna capire bene come funziona la classe ExternalInterface di Actionscript 3.0 .
Questa classe mette in comunicazione Actionscript e Javascript tramite la pagina HTML in cui è inserito l' SWF.
Con ExternalInterface ( che è la sostituta del vecchio metodo fscommand() ) possiamo facilmente eseguire le seguenti operazioni:
Da Actionscript a javascript:
Chiamare qualsiasi funzione Javascript.
Passare qualsiasi numero o argomento con qualsiasi nome.
Passare qualsiasi tipo di variabile ( Boolean, String, Number, ecc ecc ).
Ricevere dei valori dalla funzione Javascript.
Da Javascript ad Actionscript:
Chiamare una funzione Actionscript.
Passare argomenti.
Ricevere dei valori dalla funzione Actionscript.
L' SWF e le funzioni Javascript devono risiedere nello stesso file HTML.
Oggi vediamo un esempio concreto di Actionscript che chiama Javascript.
creo un FLA che salvo con nome ' main.fla '.
Al suo interno inserisco sullo stage un bottone con nome istanza ' send_btn ' al quale assegno la seguente azione:
Code:
send_btn.addEventListener(MouseEvent.MOUSE_DOWN,callJS);
function callJS(evt:MouseEvent):void
{
ExternalInterface.call("createPopup","http://www.flepstudio.org/swf/mix/ExternalInterface/pic.jpg","500","333");
}
Questo comando, al click del bottone, chiamerà tramite il metodo statico call() della classe ExternalInterface una funzione Javascript con nome createPopup e gli passerà 3 valori: l' url di una immagine, la larghezza dell' immagine e l' altezza dell' immagine.
Pubblico questo SWF ed lo inserisco in una pagina HTML che chiamo main.html e che avrà implementata la funzione Javascript createPopup.
In questo esempio, guarda caso, ho scritto una funzione Javascript che crea un popup e gli inerisce una immagine ( vuole 3 parametri: immagine, width ed height ) e posiziona la popup al centro del monitor.
Quindi, subito dopo il tag
della pagina HTML che contiene l' SWF, inserisco la funzione:
HTML Code:
<script language="JavaScript">
function createPopup(image,ww,hh)
{
var winleft = (screen.width - ww) / 2;
var contentWindowBEGIN='<html><head><title>Image</title></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><img src="';
var contentWindowEND='" alt="" onclick="window.close()" style="cursor: pointer;"></body></html>';
var winUp = (screen.height - hh) / 2;
var style = 'left='+winleft+',top='+winUp+', width='+ww+', height='+hh+', status=no, menubar=no, toolbar=no, scrollbars=0';
newwin=window.open("", "", style);
newwin.document.write(contentWindowBEGIN+image+contentWindowEND);
}
</script>
Carico sul server: main.html, main.swf e una immagine che per questo esempio io ho chiamato pic.jpg .
Potete provare il mio esempio, andando al seguente url:
http://www.flepstudio.org/swf/mix/Ex...face/main.html
Domani vedremo un esempio in cui sarà Javascript a chiamare Actionscript.
Stay tuned!
22-10-07, 07:41
Linear Mode
