Le Full-Browser

Il va vous falloir tout d'abord renseigner certaines propriétés, elles sont ciblées sur la classe Stage ( Scène ) et influent sur le swf. Ce code doit être présent sur toutes vos animations utilisant le full-browser !

Stage.align = "LT"; // indique au swf de se positionner en haut à gauche.
Stage.scaleMode = "noScale"; // fixe la taille du contenu : même si on redimensionne le swf, la taille de son contenu ne sera pas redimensionnée.

Notez que vous pouvez également définir ces options dans les paramètres de publication.

S'il y a un événement que vous vous devez de retenir pour créer un full-browser, c'est bien le onResize de la classe Stage. Nous allons utiliser un objet écouteur pour un code plus propre et manipulable.

Un objet écouteur va récupérer l'événement d'un objet à sa place. Dans notre cas, on définit la fonction d'événement onResize appartenant à la classe Stage sur l'objet écouteur listenerObject,puis on indique à flash que cet objet transmettra l'événement à la classe Stage grâce à la méthode : Stage.addListener(listenerObject);

Voici tout de suite un exemple :  (également téléchargeable ici)

// nous créons notre objet écouteur :
var listenerObject:Object = new Object (); 
 
// nous lui ajoutons un événement onResize
listenerObject.onResize = function (Void):Void {
      trace("Je suis resizé !"); // ce trace est exécuté lors du resize.
}
Stage.addListener(listenerObject); // on définit notre objet écouteur en temps qu'écouteur de l'objet Stage.

L'intérêt d'utiliser un objet écouteur plutôt que de déclarer l'événement directement sur Stage, se révélera plus tard. En effet, si vous voulez arrêter cet événement par exemple, il vous suffira alors de supprimer l'objet écouteur.

Nous avons vu comment détecter le redimensionnement de notre animation, et comment exécuter une fonction lors de ce redimensionnement (la fonction trace() en l'occurrence). Comme vous l'aurez remarqué en testant le code, la fonction trace() est exécutée à chaque redimensionnement au niveau du pixel, ce qui peut occuper le CPU si les calculs à effectuer à chaque onResize sont importants. Pour éviter cela, nous pouvons déclencher notre fonction (ici trace();) uniquement à la fin du redimensionnement. 
Nous allons pour cela passer par la fonction setInterval qui a la propriété de décaler dans le temps l'exécution d'une méthode.

Le principe est le suivant : on initialise notre « intervalle de temps ». Si lorsque l'événement onResize est appelé, la méthode de fin de redimensionnement appelée par le setinterval n'a pas été exécutée, on détruit cet intervalle puis on en recrée immédiatement un autre. L'appel de la méthode de fin de redimensionnement n'est pas encore effectif. Dès que l'événement onResize ne sera plus appelé, l'intervalle ne sera plus détruit et notre méthode sera alors appelée. Il faudra bien entendu ne pas oublier de détruire l'intervalle dans notre méthode pour éviter qu'elle s'exécute en boucle.

Afin de vous aider à comprendre, voici un exemple de code :  (également téléchargeable ici)

// variable équivalent à notre image clé.( pour cibler la fonction de setInterval sur notre image clé )
var _this:MovieClip = this;// nous créons notre objet écouteur :
var listenerObject:Object = new Object (); 
var monInterval:Number; // nous déclarons la variable monInterval// nous lui ajoutons un événement onResize
listenerObject.onResize = function (Void):Void {
 
        clearInterval(monInterval) ;// nous supprimons l'intervalle déclaré sur la variable monInterval.
  monInterval = setInterval(_this, "onResizeFinished", 100); // nous redéclarons l'intervalle sur la variable monInterval.
}
Stage.addListener(listenerObject); // on définit notre objet écouteur en temps qu'écouteur de l'objet Stage.
 
function onResizeFinished (Void):Void { // fonction à exécuter à la fin du redimensionnement.
 
        clearInterval(monInterval);// nous supprimons l'intervalle déclaré sur la variable monInterval.
        trace("Je suis resizé !"); // ce trace est exécuté lors de la fin du redimensionnement.
}

Nous avons vu comment exécuter une fonction en détectant le redimensionnement de la fenêtre, ainsi que comment exécuter une fonction après un redimensionnement. Ce que nous allons voir à présent, c'est ce que peut exécuter notre fonction, en étudiant la création d'une méthode de repositionnement d'objets, ainsi que la reproduction d'un fond sur les nouvelles dimensions de l'animation.

Le repositionnement d'objets va vous permettre de replacer un menu, une bannière, afin que l'intégralité de votre site s'adapte à la résolution d'écran du visiteur, ou lors d'un redimensionnement du navigateur.

Nous allons étudier ce repositionnement tout d'abord très simplement.

Voici un exemple de repositionnement d'un clip Fenetre :  (également téléchargeable ici)

Stage.align = "LT"; 
Stage.scaleMode = "noScale"; 
 
// nous créons notre objet écouteur :
var listenerObject:Object = new Object (); // nous lui ajoutons un événement onResize
listenerObject.onResize = function (Void):Void {
      // on appelle la fonction reposionner();
      reposionner();
}
 
function reposionner () {
       // on repositionne le clip fenetre_mc
       this.fenetre_mc._x = ( Stage.width / 2 ) - ( fenetre_mc._width / 2 );
       fenetre_mc._y = ( Stage.height / 2 ) - ( fenetre_mc._height / 2 );
}
Stage.addListener(listenerObject); // on définit notre objet écouteur en temps qu'écouteur de l'objet Stage.

Remarques

• Vous remarquerez que l'on divise la taille de l'animation afin d'obtenir son milieu, mais que l'on y soustrait la taille de la fenêtre par 2, afin d'obtenir le centre de celle-ci et qu'elle apparaisse parfaitement cadrée.
• Remarquez que les propriétés height et width de la classe Stage ne possèdent pas d'underscore, contrairement à celles des movie-clips.

Si vous souhaitez que le repositionnement s'effectue à la fin du redimensionnement et non pendant, vous pouvez utiliser la deuxième méthode décrite dans le chapitre « l'élément onResize ». 
Vous pouvez également utiliser les Tweens pour déplacer vos clips  ( voir mon autre tutoriel sur les Tweens ici ). Dans ce cas, vous pourrez vous passer de l'utilisation des setInterval(), expliquée dans le chapitre « I-B. L'événement onResize », les Tweens se déclencheront à la fin du redimensionnement.

La deuxième méthode dont vous pourrez profiter avec votre full-Browser est la reproduction d'un fond, une tapisserie par exemple. Pour cette méthode, nous allons utiliser un morceau de « tapisserie », que nous allons utiliser pour recouvrir la totalité de la surface de notre animation. Nous allons utiliser ce morceau de tapisserie dans ce tutoriel : ().
Il provient du site  www.squidfingers.com , ces motifs sont libres d'utilisation.

Nous allons utiliser une des grandes nouveautés de flash 8, c'est la classe BitmapData. Elle permet de manipuler un objet bitmap grâce à ses méthodes, et permet de faire certaines choses plus proprement et de façon plus optimisée : dans notre cas la duplication d'une image.

C'est ensuite la méthode beginBitmapFill qui va nous permettre de tracer un grand rectangle de la taille de l'animation, où va être dupliqué notre morceau de tapisserie automatiquement. Nous déclarerons aussi l'événement onResize sur le stage, afin de mettre à jour la taille de notre fond instantanément.

Voici un exemple de code :  (également téléchargeable ici)

import flash.display.BitmapData; // on importe la classe BitmapData
 
// on spécifie les paramètres indispensables :
Stage.align = "LT";
Stage.scaleMode = "noScale";// on déclare un objet BitmapData.
// on y charge l'image "morceau" qui est dans la bibliothèque. ( il vous faut avoir exporté cette image pour l'actionscript sans la bibliothèque :
// ( bouton droit/liaison/exporter pour actionscript )
var morceau:BitmapData = BitmapData.loadBitmap("morceau");
 
// fonction destinée à remplir l'animation avec le fond
function dessineLeFond () {
        // on appelle la méthode qui va remplir le fond avec l'objet BitmapData "morceau".
        // on indique que l'on va tracer le fond grâce à la méthode beginBitmapFill();
     this.beginBitmapFill(morceau);
 
        // on trace la forme du donc ( afin qu'il recouvre l'ensemble de l'animation )
     this.moveTo(0, 0);
     this.lineTo( Stage.width, 0 );
     this.lineTo( Stage.width, Stage.height );
     this.lineTo( 0, Stage.height );
     this.lineTo( 0, 0 );
 
        // on indique que l'on a terminé de tracer la forme grâce à endFill();
        this.endFill();
}
 
// on appelle la fonction dessineLeFond, afin de tracer le fond
dessineLeFond();
 
// on déclare un objet écouteur du onResize :
var ecouteur:Object = new Object ();
 
ecouteur.onResize = function (Void):Void {
        // on exécute la fonction lors du onResize, afin de tracer le fond.
        dessineLeFond();
}
 
// on définit l'objet ecouteur comme écouteur de Stage :
Stage.addListener(ecouteur);

Vous avez à présent les deux principales techniques du full-browser sous la main, passons pour finir à l'intégration de votre animation dans la page web.