Le site “fullscreen” ou “fullpage”

Pour avoir un site qui tient dans toute la page, il y a 2 procédures à respecter : définir les dimensions dans le fla et utiliser le css pour éliminer toute marge, et avoir le site visible à 100%.

Dans flash

Choisir lors de la publication :
Fichier > parametres de publication (ctlr+maj+F12) > Onglet HTML
Dimensions : pourcentage
Largeur et hauteur à 100%
Echelle : pas redimensionnement (ou en actionscript : Stage.scaleMode = “noScale”;)

EXEMPLE

LE FICHIER FLA

Dans la feuille de style externe ou le style de la page

html, body {
margin = 0px;
padding = 0px;
width:100%;
height:100%;
}

La gestion des éléments dans le flash

Supposons que nous ayons un site avec un menu un contenu central et un footer que nous voulons toujours visibles et positionnés au même endroit (par rapport aux navigateur) lors du redimmensionnement de la fenêtre : c’est-à-dire toujours en haut pour le menu, au centre pour le contenu central et en bas pour le footer.
Pour cela nous avons besoin d’utiliser les propriétés Stage.onResize, Stage.height, Stage.addListener(); et Stage.align .

EXEMPLE

Stage.scaleMode = "noScale"; // pas de redimmensionnement de la fenêtre
Stage.align = "TL"; // on aligne le site : Haut Gauche

var menu:MovieClip = this.attachMovie("menu","menu_mc",1); // on place le menu sur la scène en l'"attachant". On lui donne comme nouveau nom menu_mc et il sera au niveau 1 de profondeur.
var ecouteur:Object = new Object(); // on crée l'écouteur
ecouteur.onResize = function(){ // monsieur l'écouteur quand la fenetre se resize veuillez appliquer la fonction ci dessous
menu._y = Stage.height/2 - menu._height/2;
}
Stage.addListener(ecouteur);
ecouteur.onResize();

Rappel : Positionnement du site :
“T” haut centre
“B” bas centre
“L” centre gauche
“R” centre droite
“TL” haut gauche
“TR” haut droite
“BL” bas gauche
“BR” bas droite

Code complet

Stage.scaleMode = "noScale"; // pas de redimmensionnement de la fenêtre
Stage.align = "TL";  //on aligne le site : Haut Gauche

var menu_mc:MovieClip = this.attachMovie("menu","menu_mc",1); // on place le menu sur la scène en l'"attachant". On lui donne comme nouveau nom menu_mc et il sera à 1 de profondeur
var footer_mc:MovieClip = this.attachMovie("central","central_mc",2); // on place le footer sur la scene
var footer_mc:MovieClip = this.attachMovie("footer","footer_mc",3); // on place le footer sur la scene

var ecouteur:Object = new Object(); // on crée l'écouteur
ecouteur.onResize = function(){ // monsieur l'écouteur quand la scène se resize veuillez appliquer la fonction ci dessous
menu_mc._x = Stage.width/2 - menu_mc._width/2;
menu_mc._y = Stage.height-(Stage.height-3) ;// -3 pour décaler un peut vers le bas

central_mc._x = Stage.width/2 - central_mc._width/2;
central_mc._y = Stage.height/2 - central_mc._height/2;

footer_mc._width = 2000; // Le footer fait 2OOOpx de large, c'est pour l'exemple
footer_mc._x = Stage.width/2 - footer_mc._width/2;
footer_mc._y = Stage.height - footer_mc._height ;// placer tout en bas

  //le footer prendra toute la largeur

}
Stage.addListener(ecouteur); // ecouteur d'évènement sur la scene
ecouteur.onResize(); 

Faire un site “fullpage” avec gestion du placement des éléments
Inscrivez vous aux flux RSS pour rester informé des news du site.