|
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 |