Full-Browser Flash Layout

//------------------------------------------------------------------------------------------//
// Gestione del Liquid-layout, by And80, V2online.it										//
//------------------------------------------------------------------------------------------//
/*
# Quanto segue è un codice di esempio per l'applicazione pratica di un liquid-layout,
# attraverso il quale è possibile posizionare gli elementi sullo Stage, 
# svincolandoli da una posizione statica decisa in partenza, 
# per operare al meglio con il liquid-layout è preferibile utilizzare gli strumenti 
# messi a disposizione da AS per creare, attaccare, caricare dall'esterno i MovieClip,
# i quali sono lo strumento più indicato (forse l'unico se escludiamo i Button e i _level)
# per creare un liquid-layout facilmente gestibile, perciò nel nostro esempio andremo ad
# utilizzare i metodi propri dei MovieClip quali createEmptyMovieClip, attachMovie, loadMovie 
# (quest'ultimo visto che lavoriamo con Flash MX 2004 lo possiamo tranquillamente sostituire 
# con loadClip della classe MovieClipLoader), per l'approfondimento sull'uso di questi metodi
# consiglio di guardare direttamente la guida in linea interna (F1) o di leggere l'articolo 
# all'indirizzo http://www.v2online.it/articoli/moviecliploader.html .
# Per il resto, per quanto mi sia possibile, cercherò di commentare al meglio l'esempio che segue
*/
//------------------------------------------------------------------------------------------//
//
//------------------------------------------------------------------------------------------//
// Opzioni di routine, per portare in alto a sinistra il punto 0,0 del filmato,
// per bloccare il menù tasto destro e per rendere fissa la scala del filmato
//------------------------------------------------------------------------------------------//
Stage.scaleMode = "noScale";
Stage.align = "TL";
Stage.showMenu = false;
//------------------------------------------------------------------------------------------//
//
//------------------------------------------------------------------------------------------//
// Gestione dello sfondo e degli elementi:
//------------------------------------------------------------------------------------------//
// creo un mc vuoto che occupi il primo livello (per noi il più basso) nello Stage
var sfondo:MovieClip = _root.createEmptyMovieClip("sfondo", 1);
// ne creo altri quattro che saranno i miei elementi "a spasso" nello Stage,
// e gli attacco subito i clip che ho creato e concatenato dalla libreria
var altoSinistra:MovieClip = _root.createEmptyMovieClip("altoSinistra", 2);
var altoDestra:MovieClip = _root.createEmptyMovieClip("altoDestra", 3);
var bassoSinistra:MovieClip = _root.createEmptyMovieClip("bassoSinistra", 4);
var bassoDestra:MovieClip = _root.createEmptyMovieClip("bassoDestra", 5);
var inMezzo:MovieClip = _root.createEmptyMovieClip("inMezzo", 6);
altoSinistra.attachMovie("altoSinistra", "dentro", 1);
altoDestra.attachMovie("altoDestra", "dentro", 1);
bassoSinistra.attachMovie("bassoSinistra", "dentro", 1);
bassoDestra.attachMovie("bassoDestra", "dentro", 1);
inMezzo.attachMovie("inMezzo", "dentro", 1);
// per gestire il caricamento dell'immagine che ci farà da sfondo utilizzo la classe MovieClipLoader
// per approfondimenti prego di consultare la guida in linea (F1) o http://www.v2online.it/articoli/moviecliploader.html
var mObj:Object = new Object();
mObj.onLoadInit = function(target) {
	target._alpha = 100;
	target._width = Stage.width;
	target._height = Stage.height;
};
mObj.onLoadStart = function(target) {
	target._alpha = 0;
};
var mLoad:MovieClipLoader = new MovieClipLoader();
mLoad.addListener(mObj);
mLoad.loadClip("Immagini1.jpg", sfondo);
//
// creo una funzione per gestire i MovieClip che non caricano filmati o immagini esterne
// questo in modo da poterla richiamare all'inizio del filmato e ogni volta dentro il listener
// che gestisce l'onResize del filmato, non posso fare tutto solo con la funzione del listener
// perchè i clip che caricano immagini esterne creano problemi finchè la jpeg/swf non è completamente caricata
// perciò ogni movimento relativo ai clip "neutri" (chiamiamoli così :E ) và qui dentro
// diciamo che io ho quattro clip che indicano quattro frecce e ognuno di essi ha il proprio punto di registrazione in alto a sinistra
// e un clip che sta in mezzo allo stage, sempre con il punto di registrazione in alto a sinistra
var controlloNeutro:Function = function () {
	altoSinistra._x = 0;
	altoSinistra._y = 0;
	bassoSinistra._x = 0;
	bassoSinistra._y = Stage.height-bassoSinistra._height;
	altoDestra._x = Stage.width-altoDestra._width;
	altoDestra._y = 0;
	bassoDestra._x = Stage.width-bassoDestra._width;
	bassoDestra._y = Stage.height-bassoDestra._height;
	inMezzo._x = Stage.width/2-inMezzo._width/2;
	inMezzo._y = Stage.height/2-inMezzo._height/2;
};
// ora "attivo" la gestione dell' onResize, il fulcro del layout Liquido, per farlo devo creare un oggetto che
// "ascolti" gli eventi di ridimensionamento (in pratica quando c'è una variazione di dimensione nella finestra ch contiene il filmato)
var liquid:Object = new Object();
liquid.onResize = function() {
	// ok eccoci, qui dentro mettiamo il richiamo alla funzione preparata precedentemente
	// e tutte le azioni riguardanti anche i clip caricati dall'esterno
	controlloNeutro();
	sfondo._width = Stage.width;
	sfondo._height = Stage.height;
};
Stage.addListener(liquid);
// dopodichè richiamo la funzione almeno una volta per risolvere alcune incompatibilità e problemi con browser differenti
controlloNeutro();
//------------------------------------------------------------------------------------------//
//
//------------------------------------------------------------------------------------------//
/*
# Fondamentalmente non occorre altro se non un po' di progettazione prima di iniziare a scrivere 
# il codice per "creare" il filmato e tanta fantasia per i mille modi di sfruttare questo tipo di 
# impostazione, io vi ho dato uno spunto, ora sta a voi. Buon Lavoro ;-) 
*/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>liquid_layout_fmx2004</title>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color:#FFFFFF;
}
object {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<object id='flashpage' type='application/x-shockwave-flash' data='liquid_layout_fmx2004.swf'>
<param name="movie" value="liquid_layout_fmx2004.swf" />
</object>
</body>
</html>