Ecco un tutorial che molti di voi troveranno molto utile.
Ho ricevuto diversi messaggi privati sul forum con richieste di aiuto su come lavorare con un menu in Flash CS3 e i frames in HTML.
Con Actionscript 2.0 funzionava benissimo utilizzando il metodo getURL();
Con Actionscript 3.0 si hanno molti problemi.
Ad esempio, supponiamo di avere una pagina main.html con 2 frames ( nav.html e content.html ).
Poi abbiamo altre 5 pagine html: frame_1.html, frame_2.html, frame_3.html, frame_4.html, frame_5.html .
Il frame nav.html contiene un menu in flash sulla parte sinistra della pagina main.html.
Il frame content.html sarà la porzione della pagina html che visualizzerà una delle 5 pagine che vogliamo chiamare.
Ho notato che sul web ci sono molti tutorials su come fare tutto ciò con javascript, ma con un menu in Flash come fare ?!?
Per arrivare allo scopo, bisogna chiamare una funzione javascript dal menu in Flash CS3 che chiamerà la pagina html che vogliamo e la caricherà nel nostro frame content.html.
SEZIONE FLASH
Creo un file FLA che salvo con nome "menu.fla".
Creo 5 Movieclip che saranno i bottoni del nostro menu.
Apro il pannello azioni e scrivo:
Code:
var clips_array:Array=new Array(frame_1_mc,frame_2_mc,frame_3_mc,frame_4_mc,frame_5_mc);
var frames_array:Array=new Array("frame_1.html","frame_2.html","frame_3.html","frame_4.html","frame_5.html");
for(var i:int=0;i < clips_array.length;i++)
{
clips_array[i].id=i;
clips_array[i].mouseChildren=false;
clips_array[i].buttonMode=true;
clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
}
function setDown(evt:MouseEvent):void
{
ExternalInterface.call("openAlert",frames_array[evt.target.id]);
}
Analizziamo il codice:
creo un Array in cui inserisco tutti i nomi delle 5 Movieclip del menu
var clips_array:Array=new Array(frame_1_mc,frame_2_mc,frame_3_mc,frame_4_mc, frame_5_mc);
creo un Array in cui inserisco i nomi delle 5 pagine HTML che voglio caricare nel frame content.html :
var frames_array:Array=new Array("frame_1.html","frame_2.html","frame_3.html","frame_4.html","frame_5.html");
apro un ciclo for nel quale eseguo alcune azioni:
for(var i:int=0;i < clips_array.length;i++)
{
assegno un id numerico ( pari al valore della i del ciclo in base alla iterazione del momento )
clips_array[i].id=i;
faccio in modo che venga visualizzata la manina al passaggio del mouse sulle Movieclip del menu
clips_array[i].mouseChildren=false;
clips_array[i].buttonMode=true;
al click del mouse su una delle Movieclip del menu chiamo una funzione che si chiama setDown
clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
}
creo la funzione setDown
function setDown(evt:MouseEvent):void
{
questa funzione chiamerà una funzione Javascript che risiede nel file nav.html ( lo vedremo di seguito ) e gli passa il corrispettivo frame recuperato da frames_array con l' id della Movieclip che è stata cliccata
ExternalInterface.call("openAlert",frames_array[evt.target.id]);
}
SEZIONE HTML E JAVASCRIPT
main.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=macintosh" />
<title>flash and html frames</title>
</head>
<frameset rows="*" cols="16%,*">
<frame src="nav.html" name="nav" />
<frame src="content.html" name="content" />
</frameset>
<noframes></noframes>
Questo file continene i 2 frames ( nav e content ).
nav.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>nav</title>
<script language="JavaScript">
function openAlert(s)
{
parent.content.location.href=s;
}
</script>
</head>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" name="obj1" width="200" height="500" border="0" id="obj1">
<param name="movie" value="menu.swf" />
<param name="quality" value="High" />
<embed src="menu.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="200" height="500"> </embed>
</object>
Da notare che questo file contiene la funzione Javascript che verrà chiamata da Actionscript.
Questa funzione caricherà la pagina HTML ( il cui nome gli viene passato da Actionscript ) nel frame content.
Inoltre contiene il file SWF del nostro menu ( perchè Actionscript e Javascript riescano a comunicare, sia l' SWF che la funzione Javascript devono risiedere nella stessa pagina PS: per saperne di più consiglio di leggere questo tutorial Actionscript chiama Javascript - classe ExternalInterface di Flash CS3
content.html
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>content</title>
</head>
Questo file come potete vedere è vuoto ( verranno caricate le pagine html al suo interno ).
Inoltre abbiamo le pagine :
frame_1.html
frame_2.html
frame_3.html
frame_4.html
frame_5.html
"decoratele" a vostro piacere".
Allego i files sorgente:
25-08-08, 08:38
Linear Mode
