Mi sembra sia capitato molto spesso di doverci trovare in situazioni dove il nostro swf dovrebbe stare al centro della pagina, ecco perche' m'e' venuto in mente di mostrare come si potrebbe fare per centrare in vari modi il nostro file.
Uno sguardo all' HTML usato
intanto e' importante capire come andrebbe scritto l' HTML W3C compatibile per posizionare dove vogliamo il nostro swf.
La cosa importante e' 'giocare' con una sola tabella , cosi' da crearci lo spazio che ci interessa, sia questo esattamente al centro, in modo orizzontale, sia in modo verticale.
Ricordate che per l'allineamento verticale abbiamo a nostra disposizione il tag <tr> e che per quello orizzontale il tag <td> , rispettivamente con il valign per il tr ed il solo align per il td.
esempio per swf centrato verticalmente e orizzontalmente
tutto qua', se abbiamo impostato i css per il body e l' html ( poi vedremo come ) abbiamo gia' un swf esattamente al centro della pagina.codice:<table style="width: 100%; height: 100%;"> <tr> <td align="center"> <object .... > </td> </tr> </table>
Non e' necessario, in questo caso, usare il valign perche' la tabella centrera' in automatico, verticalmente , l' swf in questione.
con valign="top" l' swf sarebbe centrato solo orizzontalmente e starebbe in cima alla pagina, senza align="center" starebbe a sinistra con align="right" a destra.
Abbastanza semplice dedurre che valign="top" ed align="left" potrebe tornarci utile qualora avessimo necessita' di mostrare un swf a dimensioni in percentuale quali width="100%" ed height="100%", cosi' da avere una pagina html interamente in flash.
esempio per swf centrato verticalmente e con larghezza in percentuale
se dovessimo centrare solo verticalmente l' swf potremmo semplicemente scrivere cosi'
codice:<table style="width: 100%; height: 100%;"> <tr> <td> <object width="100%" height="300".... > </td> </tr> </table>
esempio per swf centrato orizzontalmente e con altezza in percentuale
insomma nell' insieme mi sembra sia abbastanza semplice capire come muoversi.codice:<table style="width: 100%; height: 100%;"> <tr valign="top"> <td align="center"> <object width="300" height="100%".... > </td> </tr> </table>
esempio di pagina validata W3C
in questo caso il file centered.swf risultara' si largo 100% ma avra' in questo esempio un movieClip sempre centrato, provate voi stessi , questo e' il codice usato per questo esempio:codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>SWF centrato verticalmente HTML 4.01 Transitional</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="robots" content="ALL"> <style type="text/css"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; } table { width: 100%; height: 100%; } </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tr> <td> <object type="application/x-shockwave-flash" data="centered.swf" width="100%" height="300"> <param name="movie" value="centered.swf" /> </object> </td> </tr> </table> </body> </html>
centered.swf
Il risultato potete vederlo on-line in questa pagina.codice:// STAGE PROPRIETIES Stage.scaleMode = "noScale"; Stage.align = "TL"; // BLOCK TIMELINE stop(); // MAIN MOVIE DEFINITIONS var ms_width:Number = new Number( 400 ); var ms_height:Number = new Number( 170 ); var ms_brdColor:Number = 0xDEDEDE; var ms_bgColor:Number = 0xF5F5F5; // MAIN MOVIE CREATION createEmptyMovieClip( 'myStage', getNextHighestDepth() ); with( myStage ) { moveTo( 0, 0 ); lineStyle( 1, ms_brdColor, 100 ); beginFill( ms_bgColor, 100 ); lineTo( ms_width, 0 ); lineTo( ms_width, ms_height ); lineTo( 0, ms_height ); lineTo( 0, 0 ); endFill(); } // FUNCTION TO CENTER MOVIE var centerToStage:Function = function( mc:MovieClip ):Void { mc._x = Math.floor( ( Stage.width / 2 ) - ( mc._width / 2 ) ); mc._y = Math.floor( ( Stage.height / 2 ) - ( mc._height / 2 ) ); } myStage.centerInterval = setInterval( centerToStage, 50, myStage ); // TEXFIELD CREATION WITH TEXTFORMAT DECLARATION myStage.createTextField( 'myTfield', myStage.getNextHighestDepth(), 10, 10, myStage._width, 0 ); myStage.myTfield.autoSize = true; myStage.myTfield.multiline = true; myStage.myTformat = new TextFormat(); myStage.myTformat.font = "_sans"; myStage.myTformat.size = 11; myStage.myTformat.color = 0x006666; // FUNCTION TO WRITE ON TEXTFIELD var showStageInfo:Function = function( myTfield:TextField, myTformat:TextFormat ):Void { myTfield.text = "Stage width: " + Stage.width + "\nStage height: " + Stage.height; myTfield.setTextFormat( myTformat ); } myStage.showStageInterval = setInterval( showStageInfo, 50, myStage.myTfield, myStage.myTformat );
Da notare la funzione che per centrare il movieClip fa riferimento, ovviamente, allo Stage.width/2 ed allo Stage.height/2
Spero sia utile a qualcuno
)
... e' una 'lunga' storia 