Le Full-Browser
Date de publication : 08/10/2006
Par
Morgan Loyer (pyrrha.developpez.com)
Ce cours est destiné à vous apprendre à créer des applications Flash en full-browser c'est-à-dire remplissant en totalité le navigateur.
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 etre visible entièrement pour les petites résolutions d'écran).
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.
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";
Stage.scaleMode = "noScale"; |
Notez que vous pouvez également définir ces options dans les paramètres de publication.
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);
var listenerObject:Object = new Object ();
listenerObject.onResize = function (Void):Void {
trace("Je suis resizé !");
}
Stage.addListener(listenerObject); |
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'occurence).
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'évenement 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.
var _this:MovieClip = this
var listenerObject:Object = new Object ();
var monInterval:Number;
listenerObject.onResize = function (Void):Void {
clearInterval(monInterval)
monInterval = setInterval(_this, "onResizeFinished", 100);
}
Stage.addListener(listenerObject);
function onResizeFinished (Void):Void {
clearInterval(monInterval)
trace("Je suis resizé !");
} |
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.
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é.
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.
Stage.align = "LT";
Stage.scaleMode = "noScale";
var listenerObject:Object = new Object ();
listenerObject.onResize = function (Void):Void {
reposionner();
}
function reposionner () {
this.fenetre_mc._x = ( Stage.width / 2 ) - ( fenetre_mc._width / 2 );
fenetre_mc._y = ( Stage.height / 2 ) - ( fenetre_mc._height / 2 );
}
Stage.addListener(listenerObject); |
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éclencherons à la fin du redimensionnement.
II-B. La reproduction d'un fond
La deuxieme 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é : 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.
import flash.display.BitmapData;
Stage.align = "LT";
Stage.scaleMode = "noScale"
var morceau:BitmapData = BitmapData.loadBitmap("morceau");
function dessineLeFond () {
this.beginBitmapFill(morceau);
this.moveTo(0, 0);
this.lineTo( Stage.width, 0 );
this.lineTo( Stage.width, Stage.height );
this.lineTo( 0, Stage.height );
this.lineTo( 0, 0 );
this.endFill();
}
dessineLeFond();
var ecouteur:Object = new Object ();
ecouteur.onResize = function (Void):Void {
dessineLeFond();
}
Stage.addListener(ecouteur); |
Vous avez à présent les 2 principales techniques du full-browser sous la main, passons pour finir à l'intégration de votre animation dans la page web.
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 ).
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
</style> |
Vous devez ensuite modifier la taille du swf à 100% dans les balises object et embed :
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'integration 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
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.
. Remerciements
Je remercie Arnolem, Roikku, Nico, Thuliad, bref tous mes ainés du projet FLOG, avec lequels 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.
 
Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur.
La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur. Sans cela vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérets.
|