Faire un site « fullpage » avec gestion du placement des éléments avec MC Tween

8 septembre 2007 par Niums dans Action script

Flash redimmensionné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 : pour voir l’effet modifier la taille de la fenêtre de votre navigateur.

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
 
// 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 menu:MovieClip = this.attachMovie("menu","menu_mc",1);
        // on crée l’écouteur
        var ecouteur:Object = new Object();
        //  quand la fenetre se resize la fonction ci dessous est déclenchée
        ecouteur.onResize = function(){
        // statique pas de tween
        menu._y = Stage.height/2 – menu._height/2;
        // avec tween
        menu_mc.tween("_y", Stage.height – (Stage.height-3) , 1, "easeoutBack");
}

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
#include "mc_tween2.as" // on inclue mc tween

 // 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 menu_mc:MovieClip = this.attachMovie("menu","menu_mc",4);
 // on place le bloc central sur la scene
var central_mc:MovieClip = this.attachMovie("central","central_mc",3);
// on place le footer sur la scene
var footer_mc:MovieClip = this.attachMovie("footer","footer_mc",2);
 // on place le background sur la scene
var background_mc:MovieClip = this.attachMovie("background","background_mc",1);

// on crée l’écouteur
var ecouteur:Object = new Object();
//  quand la fenetre se resize la fonction ci dessous est déclenchée
ecouteur.onResize = function(){
        menu_mc.tween("_x", (Stage.width/2) – (menu_mc._width / 2) , 1, "easeoutBack");
        menu_mc.tween("_y", Stage.height – (Stage.height-3) , 1, "easeoutBack");// -3 pour décaler un peut vers le bas

        central_mc.tween("_x", (Stage.width/2) – (central_mc._width / 2) , 1.5, "easeoutBack");
        central_mc.tween("_y", (Stage.height/2) – (central_mc._height / 2) , 1.5, "easeoutBack");              

        footer_mc.tween("_width", Stage.width , 1, "easeInOutCubic");

        footer_mc.tween("_x", 0, 1, "easeOutExpo");
        footer_mc.tween("_y", (Stage.height – footer_mc._height), 1, "easeOutExpo");// placer tout en bas

        background_mc.tween("_width", Stage.width , 1, "easeInOutCubic");
        background_mc.tween("_height", Stage.height , 1, "easeInOutCubic");
        background_mc.tween("_x", 0, 1, "easeOutExpo");
        background_mc.tween("_y", 0, 1, "easeOutExpo");

}

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

ecouteur.onResize();

 

Continuez votre lecture avec



Articles similaires


Laisser un commentaire