Le Full-Browser

Morgan Loyer

♪

- Titre : Le Full-Browser

- Auteur : Morgan Loyer

- Parution : 8 octobre 2006

- Mise à jour : 3 janvier 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Morgan Loyer. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Definition

- II. I. Détection du redimensionnement.

- II-A. I-A. Paramétrer le swf

- II-B. I-B. L'événement onResize

- II-C. I-C. Conclusion

- III. II. Les possibilités

- III-A. II-A. Le repositionnement d'objets

- III-B. II-B. La reproduction d'un fond

- IV. IV. Intégration

- V. IV. Conclusion

- VI. . Remerciements

I - Definition

Le full-browser se traduit en français par « explorateur plein ». Il s'agit comme l'indique son nom d'occuper toute la place du navigateur, en modifiant la taille du swf de votre application en temps réel. Je pense que l'on peut parler d'une mode à propos du full-browser, on remarque que de plus en plus de sites Flash l'utilisent, car il permet d'exploiter une plus grande surface, et il est adaptable aux visiteurs possédant une petite résolution d'écran (fini le 800 par 600 pixels forcé, par crainte de ne pas être visible entièrement pour les petites résolutions d'écran).

II - I. Détection du redimensionnement.

Nous allons voir dans cette toute première partie, la création d'un gestionnaire de redimensionnement de fenêtre. Nous allons avoir recours à la classe Stage qui désigne la scène pour réaliser notre gestionnaire de redimensionnement. Cette classe regroupe les éléments essentiels pour réaliser notre full-browser. C'est une classe de niveau supérieur, elle est donc intégrée par défault dans flash et ne demande pas d'instanciation.

II-A - I-A. Paramétrer le swf

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.

II-B - I-B. L'événement onResize

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

II-C - I-C. Conclusion

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.

III - II. Les possibilités

Le repositionnement d'objets et la reproduction d'un fond sur un espace défini sont sans doute les deux méthodes les plus utilisées avec le full-browser. Concernant la reproduction d'un fond, il s'agit par exemple d'un motif de tapisserie qui doit être répété et non pas redimensionné.

III-A - II-A. Le repositionnement d'objets

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.

III-B - II-B. La reproduction d'un fond

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.

IV - IV. Intégration

Il vous faut à présent intégrer votre animation dans une page html, qui va servir de conteneur. Celle-ci nécessitera encore un petit bout de code et de CSS pour indiquer au flash, qu'il doit occuper tout l'espace disponible.

Voici premièrement le code CSS (à placer entre les balises head de votre page html).

Vous devez ensuite modifier la taille du swf à 100 % dans les balises object et embed :

<style type="text/css">
html, body {
/* Nous déclarons la taille des marges intérieure et exterieure de la page à 0px; */
margin: 0px;
padding: 0px;
}
</style>

Attention, ne reprenez pas directement ce code ! il est incomplet et votre swf ne s'afficherait pas ! Cet exemple est là uniquement pour vous indiquer quels paramètres vous devez modifier (height et width)

<object classid="" codebase="" width="100%" height="100%" id="" align="">
<embed src="" quality="high" bgcolor="" width="100%" height="100%" name="" align="" allowScriptAccess="" type="" pluginspage="" />
</object>

Affichez votre page dans votre explorateur favori, normalement le swf s'affiche sur toute la page.

Si vous rencontrez un problème lors de l'intégration de votre animation, vous pouvez vous aider de cet exemple, ou bien si vous souhaitez en savoir plus, je vous recommande de vous rendre dans la FAQ :  section publication

V - IV. Conclusion

Vous allez à présent pouvoir réaliser votre site flash en full-Browser. Vous devrez ensuite, si votre application devient importante, vous devrez sûrement développer un réel gestionnaire de full-browser pour exécuter toutes ces tâches. Il est possible que je joigne prochainement une classe FullBrowser à cet article, patience donc…

Si vous trouvez que certains points sont manquants ou mal expliqués, n'hésitez pas à me contacter par message privé ici, je vous promets de faire ce que je pourrai pour améliorer cela.

VI - . Remerciements

Je remercie Arnolem, Roikku, Nico, Thuliad, bref tous mes ainés du projet FLOG, avec lesquels j'apprends un peu plus chaque jour, notamment dans l'environnement flash.
Je remercie Developpez.com, ce site où chacun peut apprendre et aider son prochain.