Site en Flash à 100%
Écrit par BSK & Key | 05-09-2007


Un site fait avec un Swf 100% c'est la classe, encore faut-il que ce soit bien fait.

Exemples:
http://www.dunun.com/

http://www.soleilnoir.com/
http://dgezeo.alvheol.net

Dans ce tutoriel, nous allons voir comment réaliser un site Flash à 100%...

1. l'Objet Sage


Bon, alors pour bien commencer son site avec un flash à 100% dans le html, il faut définir dans la première frame quelques propriétés de l'objet Stage:

// pour empêcher l'utilisateur de zoomer sur la scène, le dézoomage ne fonctionnant pas correctement.
Stage.showMenu = false;
// pour empêcher que le swf se redimensionne en fonction de la page html qui le contient
Stage.scaleMode = "noscale";
// permet de placer le x 0 et le y 0 en haut à gauche (Top Left) du html, c'est aussi plus pratique pour positionner ses éléments dynamiquement
Stage.align = "TL";


Voilà, ça c'est pour la base, en mettant ce code dans le flash, et en intégrant le flash à 100% dans le html, aucun élément du flash ne sera redimmensionné.
Ha oui j'oubliais, pour que la scroll barre n'apparaisse pas sous firefox, il faut aligner le flash à gauche, ça ne change rien ça fait juste disparaitre la scrollbar.

2. l'évènement onResize


Ensuite, il faut pouvoir replacer les éléments si l'utilisateur redimensionne la fenêtre de sont navigateur, pour ça, 2 solutions:

- un onEnterFrame qui est gourmand en ressources (déprécié).
- un listener plus économique en ressources (et recommandé).

a. Voici le code avec le onEnterFrame en AS1/AS2 :


//"lancement" du onEnterFrame:

this.onEnterFrame = function (){

// ensuite on replace les éléments comme on veut
// en fonction le la taille de la scène (Stage)

// la si le clip nommé "monClip" se retrouvera au milieu de la scène

monClip._x = Stage.width/2;
monClip._y = Stage.height/2;
}

 

b. voici le code avec le listener (recommandé) en AS1/AS2 :

 

Bien plus pratique, il permet de gérer l'évènement de façon plus précise:


// hop on commence par déclarer le listener, dans le cas présent je l'ai nommé redim, mais ça
// aurait très bien pû être Sylvain, mais j'ai choisi redim, et ça, ça ne se discute pas

redim = new Object ();

// on dit au listener ce qu'il doit écouter, là c'est onResize
// (quand la scène est redimensionnée), et on précise également ce qu'il doit faire, en l'occurence

// il mettra le clip "monClip" au centre de la scène

redim.onResize = function (){
monClip._x = Stage.width/2;
monClip._y = Stage.height/2;
}

// enfin, on ajoute le listener à la scène
Stage.addListener (redim);


Voici enfin une source avec différents exemples de redimensionnement / repositionnement d'éléments "classiques" (logo, footer, clip centré, etc...) : resize_exemple.zip
 
Dernière mise à jour : 07-09-2007