Aprire una popup con Flash CS3 e javascript

[Flep]

Spesso capita di avere l' esigenza di aprire una popup da Flash .
In questo articolo vedremo come fare, utilizzando un file html che contiene un' immagine e che verrà aperto come popup da Flash con Actionscript 3.0 e Javascript.
Chiaramente, per andare a buon fine l' utente deve avere Javascript e popups abilitati sul suo browser.

Vedremo inoltre come aprire diverse popups concatenando Actionscript e Javascript.

Vediamo gli esempi...

Creo un FLA che salvo con nome ' single.fla '.
Al suo interno ho 2 livelli: in uno un bottone sullo stage con nome istanza ' pop_btn ' nell' altro scriveremo il codice Actionscript 3.0

Ora creo il file html che contiene un immagine e che verrà aperto da Flash come una popup.
Lo chiamo ' image.html '.
Al suo interno inserisco una immagine e nelle proprietà imposto a zero tutti i margini, come mostra la seguente immagine:

in questo modo abbiamo tolto ogni spazio di margine in tutti e quattro i lati del file html.

Ora torno a single.fla, seleziono il keyframe del livello dove non 'è il bottone, apro il pannello azioni e scrivo:

var js:URLRequest=new URLRequest();
js.url="javascript:window.open('image.html','popper1','width=540,height=360');newWindow.focus(); void(0);";

pop_btn.addEventListener(MouseEvent.CLICK,openPopUp);

function openPopUp(evt:MouseEvent):void
{
	navigateToURL(js,'_self');
}

Risultato:

Analizziamo il codice

una variabile di tipo URLRequest
var js:URLRequest=new URLRequest();
alla proprietà url di js assegno la chiamata javascript ( notare le dimensioni 560 e 360 sono le stesse dell' immagine inserita nel file image.html )
js.url="javascript:window.open('image.html','popper1','wid th=540,height=360');newWindow.focus(); void(0);";

aggiungo al bottone un listener in ascolto dell' evento CLICK che chiamerà la funzione openPopUp
pop_btn.addEventListener(MouseEvent.CLICK,openPopU p);

questa funzione non fa altro che aprire la popup utilizzando il metodo navigateToURL di Actionscript 3.0 .
function openPopUp(evt:MouseEvent):void
{
navigateToURL(js,'_self');
}



Adesso vediamo come concatenare Actionscript e Javascript qualora avessimo più di un bottone e quindi più di una popup da scegliere.

Creo un FLA che salvo con nome ' multi.fla '.
Al suo interno ho i soliti due livelli. In uno scriverò il codice e nell' altro ho 3 bottoni con nomi istanze: button_0_btn, button_1_btn e button_2_btn.

Creo altri 3 SWF di varie misure con un' animazione giusto per rendere l' idea di questo esempio e che chiamo clip_0.swf, clip_1.swf e clip_2.swf.

Ceo 3 files html che contengono i rispettivi SWF e li chiamo swf_0.html, swf_1.html e swf_2.html.
Ogni file html ha i margini impostati a zero come abbiamo già visto per il precedente esempio.

Adesso torno multi.fla, seleziono il keyframe del liveelo dove non ci sono i bottoni, apro il pannello azioni e scrivo:

var buttons_array:Array=new Array(button_0_btn,button_1_btn,button_2_btn);
var pops_array:Array=new Array('swf_0.html','swf_1.html','swf_2.html');

for(var i:int=0;i < buttons_array.length;i++)
{
	buttons_array[i].addEventListener(MouseEvent.CLICK,openPopUp);
}

function openPopUp(evt:MouseEvent):void
{
	var js:URLRequest=new URLRequest();
	
	switch(evt.target.name)
	{
		case 'button_0_btn':
		js.url="javascript:window.open('"+pops_array[0]+"','popper1','width=300,height=200');newWindow.focus(); void(0);";
		break;
		
		case 'button_1_btn':
		js.url="javascript:window.open('"+pops_array[1]+"','popper2','width=400,height=400');newWindow.focus(); void(0);";
		break;
		
		case 'button_2_btn':
		js.url="javascript:window.open('"+pops_array[2]+"','popper3','width=100,height=350');newWindow.focus(); void(0);";
		break;
	}
	
	navigateToURL(js,'_self');
}

Risultato:

Analizziamo il codice

un Array in cui inserisco i 3 bottoni che ho sullo stage
var buttons_array:Array=new Array(button_0_btn,button_1_btn,button_2_btn);
un Array in cui inserisco gli url dei 3 files html che contengono gli SWF
var pops_array:Array=new Array('http://www.flepstudio.org/swf/mix/aprire_popup/multi/swf_0.html',
'http://www.flepstudio.org/swf/mix/aprire_popup/multi/swf_1.html',
'http://www.flepstudio.org/swf/mix/aprire_popup/multi/swf_2.html');

aggiungo ad ogni bottone un listener in ascolto dell' evento CLICK che chiamerà la funzione openPopUp utilizzando un ciclo
for(var i:int=0;i < buttons_array.length;i++)
{
buttons_array[i].addEventListener(MouseEvent.CLICK,openPopUp);
}

function openPopUp(evt:MouseEvent):void
{
creo una variabile di tipo URLRequest
var js:URLRequest=new URLRequest();

a seconda del nome del bottone cliccato ( che recupero con evt.target.name ) assegno la chiamata Javascript per aprire il corrispettivo popup
switch(evt.target.name)
{
case 'button_0_btn':
js.url="javascript:window.open('"+pops_array[0]+"','popper1','width=300,height=200');newWindow.focu s(); void(0);";
break;

case 'button_1_btn':
js.url="javascript:window.open('"+pops_array[1]+"','popper2','width=400,height=400');newWindow.focu s(); void(0);";
break;

case 'button_2_btn':
js.url="javascript:window.open('"+pops_array[2]+"','popper3','width=100,height=350');newWindow.focu s(); void(0);";
break;
}

chiamo la popup col metodo navigateToURL di Actionscript 3.0
navigateToURL(js,'_self');
}

Alla prossima !

[edo_flash]

grazie flep intuitissimo

[nextpaco]

Non funziona in IE7 !!! mi da Errore: Accesso negato. ...mentre in Firefox va alla grande!!!

Qualcuno sa il perchè???



Tnx

[Flep]

Io IE non ce l' ho, ma mi dicevano che funzionava

[nextpaco]

ecco l'errore, il codice usato è lo stesso di Flep.

[Flep]

Sei sicuro di avere abilitato Javascript ?

[nextpaco]

Originally Posted by Flep

Sei sicuro di avere abilitato Javascript ?

si! mi da proprio errore nel javascript...

anche se ho corretto anche un tuo piccolissimo errore Flep! ma non era questo il problema...

 
r js:URLRequest=new URLRequest();
js.url="javascript:window.open('image.html','popper1','width=540,height=360'); popper1.focus(); void(0);";

pop_btn.addEventListener(MouseEvent.CLICK,openPopUp);

function openPopUp(evt:MouseEvent):void
{
navigateToURL(js,'_self');
}

...e la cosa non cambia

[Flep]

Hai modo di provare anche da un altro PC ?
Te lo chiedo perchè un paio di persone con IE7 mi stanno dicendo che a loro funziona

[totonorthafrica]

Salve a tutti,ho gia postato sul forum un msg con l'argomento ma non ho ricevuto risposta, sigh...
La mia domanda è semplicissima:
Quali valori devo aggiungere allo script se la mia finestra si deve aprire al centro di pagina?
io uso:

request.url="javascript:window.open('home.html','','scrollbars= no, width=987, height=500, top=(screen.availHeight/2)-(500/2), left=(screen.availWidth/2)-(987/2)'); void(0);"

ma non funziona
Grazie a tutti

[Flep]

Ciao

Dovresti consultare una guida Javascript...