Tutoriel site flash full browser (100% de la fenêtre du navigateur)

Pour l'inauguration de mon Blog je vais commencer par un tutoriel qui explique clairement et en détail comment réaliser un site fullflash (entièrement en flash) et fullbrowser (100 % de la fenêtre du navigateur) . Le tout en gardant le contenu centré correctement et non redimensionné (à part le fond qui prendra toute le fenêtre).

Avant toute chose je tiens à préciser que les tutoriels présenteront tous un code orienté objet avec des classes action script. En effet, bien que la programmation actionscript en séquentielle soit toujours possible Adobe à fait clairement le choix de la programmation objet dans l'évolution d'actionscript. Mes tutoriels sont destinés  à des personnes ayant de bonnes notions d'actionscript, et ils seront difficiles d'accès aux novices.

Je conseil à tous de franchir le pas de la programmation objet pour pouvoir utiliser flash à pleine puissance.

Verion de flash : FLASH CS3/AS3

Au menu de l'article :

1. Création de l'animation main.fla
2. Création de la classe principale Main.as
3. Création de la classe FullBrowser.as
4. Intégration de l'animation du coté HTML
5. Exemple concret

1. Création de l'animation main.fla

Commencons doucement mais sûrement.

• Créez une nouvelle animation flash (1000 px * 720 px dans mon exemple mais libre à vous de faire autrement), et attribuez lui comme classe principale le classe lib.main que nous créerons par la suite (champ classe du document dans l'onglet propriétés).

• Créez un clip qui servera de fond, de la taille de l'animation et positionné en x:0 et y:0. Attribuez lui le nom fond dans l'onglet propriétés.

Nous pouvons passé désormais à la programmation action script et à la création de la classe principale.

2. Création de la classe principale Main.as

Tout d'abord un peu d'organisation.

• Créez un répertoire nommé lib à l'endroit où se trouve l'animation principale, il contiendra les classes que nous créerons. Rappelons que le fait de disposer les classes dans ce répertoire lib implique qu'elles appartiendront aux package lib.

• Créez maintenant un nouveau fichier action script nommé Main.as (attention à la majuscule) dans le répertoire lib. Copiez y le code qui suit sans oublier de bien lire les commentaires pour le comprendre :

/* La ligne suivante est indispensable car la classe Main.as est située dans le dossier lib */
package lib {
    /* Import des classes utilisées, indispensable */
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.display.Stage;
    import flash.display.Shape;
   /* Import de la classe fullscreen que nous créerons par la suite et qui est le coeur de notre tutoriel  */
    import lib.FullBrowser;   

    /* Constructeur de la classe */
    public class Main extends Sprite {
        /* Variables de la classe */
        var fb:FullBrowser; // Objet FulllBrowser qui permettra de gérer la taille de l'animation par rapport au navigateur
        var page:Sprite; // Contiendra le contenu du site flash qui devra resté centré
        var rectangle:Shape; // Pas du tout indispensable mais le rectangle permettra de visualiser la zone du contenu dans le cadre de notre exemple
       
        public function Main() {
            /* Page principale ou se trouvera tout le contenu */
            page = new Sprite();
            addChild(page); // Affichage de la zone de contenu
           
            /* Création du rectangle qui nous sert à visualiser la zone de contenu qui doit rester centrée dans la fenêtre du navigateur */
            rectangle = new Shape();
            rectangle.graphics.beginFill(0x000000, 0.2);
            rectangle.graphics.drawRect(0, 0, stage.width, stage.height);
            page.addChild(rectangle); // Affichage du rectangle dans la zone page
           
            /* Gère le plein écran */
            /* Le constructeur de la classe fullscreen prend en paramètre l'objet de la classe principale (this) ce qui permettra d'accéder aux clips que l'on a créé dans l'animation main.fla (fond) et dans la classe Main.as (page). */
            fb = new FulllBrowser(this);           
        }       
    }       
}


Passons désormais à la seconde et dernière classe de notre tutriel, et qui constitue également le coeur pour gérer le fullbrowser.

3. Création de la classe FullBrowser.as

• Créez maintenant un nouveau fichier action script nommé FullBrowser.as (attention à la majuscule) dans le répertoire lib. Copiez y le code qui suit sans oublier de bien lire les commentaires pour le comprendre :

package lib {
    import lib.Main;
    import flash.system.Capabilities;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.Stage;
    import flash.events.Event;
   
    public class FullBrowser {
       
        var animation:Main;
        var fond:MovieClip;
        var stage:Stage;
        var page:Sprite;
       
        /* Constructeur */
        public function FullBrowser(a:Main) {
           
            /* Initialisation des variables */
            animation = a;
            fond = a.fond;
            stage = a.stage;
            page = a.page;
           
            /* animation non redimensionnée et en haut à droite de la fenêtre du navigateur */
            stage.scaleMode = "noScale";           
            stage.align="LT";
           
            /* Initialisation de la taille du fond en rapport à la taille du lecteur dans le navigateur */
            fond.width = stage.stageWidth;
            fond.height = stage.stageHeight;

            /* On place la page au centre */
            page.x = (stage.stageWidth - page.width)/2;
            page.y = (stage.stageHeight - page.height)/2;
           
            /* Quand on redimensionne la fenêtre il faut redimensionner le fond en conséquence */
            /* Il faut également bien placer le contenu de la page au centre de la fenêtre */
            /* L'écouteur Event.RESIZE permet de détecter le redimensionnement de la fenêtre */
            stage.addEventListener(Event.RESIZE, reSize);
           
        }
       
        /* Redimensionnement de l'animation */
        private function reSize(event:Event) {
            /* Initialisation de la taille du fond en rapport à la taille du lecteur dans le navigateur */
            fond.width = stage.stageWidth;
            fond.height = stage.stageHeight;
           
            /* On place la page au centre */
            page.x = (stage.stageWidth - page.width)/2;
            page.y = (stage.stageHeight - page.height)/2;
        }       
    }       
}

4. Intégration de l'animation du coté HTML

Nous avons fait les 3/4 du travail mais voyons ce qu'il faut faire du coté navigateur (html) pour rendre le site fullbrowser opérationnel.

• Nous allons d'abord supprimer les marges que tous les navigateurs présentent entre le contenu et la fenêtre. Pour cela nous allons appliquer l'attribut CSS margin:0px; à la balise BODY de la page HTML  de la fason suivante :

             <body style="margin:0px;">

• Enfin, il faut attribuer à l'animation flash, à l'endroit ou on l'insère, une largeur et une hauteur de 100%. Au final votre page HTML peut se présenter de la manière suivante  :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Totoriel FullBrowser</title>
</head>
<body style="margin:0px;">

    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="main" align="middle">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="allowFullScreen" value="false" />
    <param name="movie" value="main.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
    <embed src="main.swf" quality="high" bgcolor="#ffffff" width="100%" height="100%" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
    </object>

</body>
</html>

5. Exemple concret

Le tutoriel est terminé et j'espère qu'il vous paraîtra clair et utile. J'insiste encore une fois sur le fait qu'il est destiné à un public initié. Toutefois, si le sujet vous intérêsse et que vous ne comprenez pas tout, je répondrais avec le plus grand plaisir aux commentaires que vous laisserez sur le blog.

Pour finir, comme un bon exemple vaut mieux que 1000 mots, vous pouvez télécharger l'exemple et les codes source de ce tutoriel à l'adresse suivante :

http://tutoriels.dbstudio.fr/fullbrowser.zip

A bienôt

Bruno-D