La gestion de sites Full Flash

Par gestion de sites Full Flash, nous entendons le recours exclusif à la technologie Flash pour mettre en forme un contenu web. Le contenu affiché est étendu à la surface de la fenêtre du navigateur la plus large possible, voire, sur toute la surface de l’écran. Naturellement, même dans un site tout en Flash, une première page HTML sera nécessaire pour le contenir (généralement « index.html »). C’est, entre autres, dans cette page – à l’aide de paramètres HTML – que nous spécifions aussi la manière dont le contenu Flash peut être déployé, avec un affichage élastique ou en mode plein écran. Nous complétons ces paramétrages à l’aide d’instructions codées naturellement en ActionScript. Réaliser un site tout en Flash peut rapidement isoler l’utilisateur dans un dispositif hermétique. Nous vous recommandons de répondre aux exigences minimales des règles d’ergonomie et d’accessibilité lorsque vous choisissez ce type de présentation. Dans ce chapitre, nous proposons une option pour basculer l’affichage en mode plein écran, à un mode normal. Ceci afin de permettre à l’utilisateur de revenir librement à d’autres tâches sur son poste de travail sans se sentir obligé de subir un mode de navigation imposé. Nous allons voir aussi comment organiser les contenus dans Flash, afin de rendre le site structurellement élastique avec toutes les dimensions d’écran, mais surtout, comment ne pas distordre les contenus distribués lorsqu’ils sont redimensionnés. Il est important enfin de pouvoir intégrer tout type de contenu dans un site réalisé exclusivement en Flash. Nous parcourons également, en fin de chapitre, la gestion du PDF à travers Flash ainsi que l’importation de la typographie y compris à travers des champs de texte dynamiques. À l’issue de ce chapitre, vous serez en mesure de créer des interfaces étendues qui valorisent spatialement les contenus. Basculer en mode plein écran et restaurer l’affichage standard Qu’y a-t-il de plus valorisant que de voir son travail projeté en plein écran ? Lorsque l’affichage en mode plein écran est employé à bon escient, cette option peut réellement offrir une nouvelle dimension pour organiser les contenus. La surface alors disponible pour les déployer, pour un écran de résolution standard de 1 024 × 768 pixels, passe radicalement de 960 × 550 pixels, en moyenne, à 1 024 × 768 pixels. Les images, les vidéos, la 3D,  prennent une toute autre dimension. Mais, naturellement, étendre la surface des contenus suppose quelques précautions : • La bande passante de l’utilisateur, d’abord, elle, ne change pas. Il convient donc de ne pas profiter de cette surface supplémentaire pour augmenter le poids des contenus à charger. • L’utilisateur qui navigue ponctuellement dans votre création a en outre besoin de pouvoir quitter le mode plein écran facilement pour revenir à une autre tâche. Nous devons donc organiser la gestion de l’affichage de sorte que l’ergonomie reste viable en toute circonstance, avec un bouton de restauration de l’affichage en mode normal, par exemple. Dans cette section, nous étudions le basculement de l’affichage en mode plein écran, ainsi que la restauration de l’affichage en mode normal. Exemples > ch15_siteFullFlash_1.fla Dans le document « ch15_siteFullFlash_1.fla », sur la scène principale, nous pouvons voir le MovieClip fond_mc, une image isolée dans un autre MovieClip, puis un bouton et un masque (voir Figures 15.1 et 15.2). À droite de la scène, le symbole pleinEcran_btn contient deux boutons répartis sur deux images distinctes. C’est un bouton à « bascule ». Lorsque l’affichage est normal, la première image est affichée. Mais dès que l’affichage bascule en mode plein écran, c’est la seconde image qui apparaît. Dans la fenêtre de scénario, le calque actions affiche le code suivant : //—————– initialisation pleinEcran_btn.gotoAndStop(1); pleinEcran_btn.buttonMode=true; //—————– actions pleinEcran_btn.addEventListener(MouseEvent.CLICK,affichagePleinEcran); function affichagePleinEcran(evt:MouseEvent) { if (stage.displayState==StageDisplayState.NORMAL) { stage.displayState=StageDisplayState.FULL_SCREEN; pleinEcran_btn.gotoAndStop(2); } else { stage.displayState=StageDisplayState.NORMAL; pleinEcran_btn.gotoAndStop(1); } } Le code de la page HTML qui accompagne ce document (« ch15_siteFullFlash_1.html »), intègre le Flash en utilisant les paramètres suivants : Dans notre exemple, le mécanisme de l’affichage plein écran s’exécute sous contrôle du navigateur. Le document Flash n’est interprété que par le lecteur Flash. Afin d’autoriser le navigateur à basculer l’affichage du Flash en mode plein écran, nous devons donc ajouter un paramètre dans la page HTML qui accueille le Flash. Pour autoriser l’affichage en mode plein écran, dans la page HTML, au niveau des balises qui gèrent l’affichage du document Flash, vous devez ajouter le paramètre AllowFullScreen et le définir sur true, y compris dans la balise embed :  

Interface élastique flottante

Le principe d’une interface élastique est d’appliquer, pendant le redimensionnement de la fenêtre du navigateur, les proportions de cette fenêtre au document Flash, dans le but de remplir systématiquement la surface de la fenêtre quelles qu’en soient les dimensions. Cela se construit initialement de manière assez simple puisqu’il suffit de renseigner une largeur et une hauteur de 100 % dans les propriétés de dimensions du Flash du document HTML. Mais si l’on ne veut pas que les contenus soient déformés, et qu’ils occupent, malgré tout, l’intégralité de la surface de la fenêtre, seules des instructions en ActionScript permettent de redistribuer les contenus en contrôlant leurs dimensions, leurs proportions et leurs positions en X et Y. Dans cette section, nous allons voir comment placer des MovieClip dans la scène de sorte qu’elle s’étende, quelle que soit la taille de la fenêtre, mais sans jamais distordre les contenus ni laisser de vide dans le document. Exemples > ch15_siteFullFlash_2.fla Dans le document « ch15_siteFullFlash_2.fla », sur la scène, nous distinguons à l’arrière-plan une image de 800 × 600 pixels placée dans un MovieClip contenu_mc (voir Figure 15.6). Au-dessous, à droite, apparaît un MovieClip texteDroite_mc, qui contient le titre du livre. À gauche, un autre MovieClip affiche le logo de l’éditeur. Le filet est intégré dans le clip du À retenir • Le mode d’affichage en plein écran se définit par la propriété stageDisplayState. • Pour activer l’affichage en mode plein écran, la page HTML qui contient le Flash doit également contenir le paramètre AllowFullScreen et le passer sur true. • Les actions de clavier sont inactives en mode plein écran. • Le mode plein écran n’est disponible qu’à travers une action souris.  bandeau bleu, calé, lui, en bas de la fenêtre. Tout en haut du document, apparaît aussi un symbole nommé carte_mc qui représente le département du Vaucluse. Dans la fenêtre Actions (voir Figure 15.7), nous pouvons lire le code suivant : //—————– initialisation stage.scaleMode=StageScaleMode.NO_SCALE; stage.align=StageAlign.TOP_LEFT; //—————– actions stage.addEventListener(Event.RESIZE, quandResizeActif); function quandResizeActif(event:Event) { modifierAffichage(); } function modifierAffichage() { // logo_mc.x=20; logo_mc.y=stage.stageHeight-35; // texteDroite_mc.x=stage.stageWidth-20; texteDroite_mc.y=stage.stageHeight-35; Figure 15.6 Aperçu du document. Figure 15.7 Scénario de la scène principale. LivreActionScript.book Page 444 Vendredi, 15. janvier 2010 12:34 12 LA GESTION DE SITES FULL FLASH 445 // bandeau_mc.x=stage.stageWidth/2; bandeau_mc.y=stage.stageHeight-(bandeau_mc.height/2); bandeau_mc.width=stage.stageWidth; // contenu_mc.x=0; contenu_mc.y=0; contenu_mc.width=stage.stageWidth; contenu_mc.height=stage.stageHeight; if (contenu_mc.scaleX<=contenu_mc.scaleY) { contenu_mc.scaleX=contenu_mc.scaleY; } else { contenu_mc.scaleY=contenu_mc.scaleX; } } modifierAffichage(); La scène, en ActionScript 3, possède des propriétés de largeur (stageWidth) et de hauteur (stageHeight), que nous avons déjà rencontrées dans les chapitres précédents. Grâce à ces propriétés, nous connaissons à tout moment les dimensions du document. Nous pouvons donc récupérer ces valeurs pour redéfinir, dynamiquement, l’emplacement des objets par rapport à la taille du document. Nous pouvons, par exemple, jouer sur les positions X et Y, pour caler systématiquement un logo en bas et à gauche. Nous pouvons, aussi, dans le cas où certains éléments doivent être redimensionnés, modifier leurs propriétés width et height en proportions des largeur et hauteur de la scène. Dans cet exemple, nous plaçons les objets tantôt selon la largeur du document, tantôt selon sa hauteur. Pour deux d’entre eux, l’image de fond ainsi que le bandeau du bas, nous redéfinissons leurs dimensions en proportion des dimensions de la scène. Dans la première partie du code, nous définissons le comportement de l’affichage de la scène par défaut : //—————– initialisation stage.scaleMode=StageScaleMode.NO_SCALE; La propriété scaleMode permet d’indiquer si les contenus sont déformés ou non lorsque la taille de la fenêtre du document est modifiée. La valeur stageScaleMode.NO_SCALE indique qu’aucune déformation n’est appliquée aux contenus. Modes d’affichage de la scène. Il existe quatre modes d’affichage de la scène courante : NO_SCALE, EXACT_FIT, NO_BORDER et SHOW_ALL. Elles définissent le comportement des objets dans la scène, lors du redimensionnement du document Flash dans la fenêtre de navigateur. Les modifications de propriété width et height, ajoutées éventuellement en ActionScript sur des objets demeurent prioritaires sur ces options-ci. • NO_SCALE empêche les modifications d’échelle des contenus même si les dimensions de la fenêtre sont modifiées. • EXACT_FIT autorise la distorsion des contenus selon l’exacte proportion des dimensions de la fenêtre. • NO_BORDER préserve les proportions de la scène quelle que soit la taille de la fenêtre. La scène est agrandie et recadrée si nécessaire. Le contenu occupe toujours intégralement la fenêtre. • SHOW_ALL préserve également les proportions de la scène et l’agrandit si nécessaire, mais ne recadre jamais le contenu. Des marges sont ajoutées autour de la scène si les proportions de la fenêtre sont différentes de celles de la scène. La deuxième instruction emploie la propriété align qui définit l’alignement de la scène, lorsque la fenêtre est redimensionnée : stage.align=StageAlign.TOP_LEFT; Dans notre exemple, la valeur TOP_LEFT désigne un calage en haut et à gauche. Ainsi, si nous n’avions pas modifié dynamiquement le positionnement de tous les objets, ils resteraient à leur place actuelle et le redimensionnement de la fenêtre impliquerait l’ajout de marges à droite et en bas du document Nous détectons ensuite le redimensionnement de la fenêtre en ajoutant un écouteur à la scène (stage). La propriété RESIZE permet d’exécuter la fonction durant chaque redimensionnement de fenêtre et uniquement là : //—————– actions stage.addEventListener(Event.RESIZE, quandResizeActif); function quandResizeActif(event:Event) { modifierAffichage(); } La fonction invoquée appelle une autre fonction, autonome : modifierAffichage(); Nous avons choisi d’isoler les actions dans une deuxième fonction afin de permettre de les appeler depuis différents emplacements et selon différents types d’événements. En l’occurrence, nous souhaitons exécuter les instructions pendant le redimensionnement, mais aussi dès l’ouverture du document. Si nous ne redéfinissions pas le positionnement dès l’ouverture de l’animation, nous risquerions en effet d’observer un saut ou un décalage entre la position courante et celle qui est redéfinie au premier redimensionnement. Le langage Propriétés d’alignement de la scène • BOTTOM. La scène est alignée sur le bas. • BOTTOM_LEFT. La scène est alignée sur le coin inférieur gauche. • BOTTOM_RIGHT. La scène est alignée sur le coin inférieur droit. • LEFT. La scène est alignée sur la gauche. • RIGHT. La scène est alignée sur la droite. • TOP. La scène est alignée sur le haut. • TOP_LEFT. La scène est alignée sur le coin supérieur gauche. • TOP_RIGHT. La scène est alignée sur le coin supérieur droit.  La fonction appelée redéfinit les propriétés x, y, width et height des différents contenus selon les largeurs et hauteur de la scène : function modifierAffichage() { // logo_mc.x=20; logo_mc.y=stage.stageHeight-35; // texteDroite_mc.x=stage.stageWidth-20; texteDroite_mc.y=stage.stageHeight-35; // bandeau_mc.x=stage.stageWidth/2; bandeau_mc.y=stage.stageHeight-(bandeau_mc.height/2); bandeau_mc.width=stage.stageWidth; // contenu_mc.x=0; contenu_mc.y=0; contenu_mc.width=stage.stageWidth; contenu_mc.height=stage.stageHeight; if (contenu_mc.scaleX<=contenu_mc.scaleY) { contenu_mc.scaleX=contenu_mc.scaleY; } else { contenu_mc.scaleY=contenu_mc.scaleX; } } Les premières lignes récupèrent simplement les valeurs stage.stageWidth et stage.stageHeight. Des marges sont toutefois ajoutées ou soustraites en fonction de la position réellement souhaitée pour chaque objet. Par exemple, le symbole logo_mc est placé systématiquement à 20 pixels du bord gauche de la fenêtre, mais toujours calé en bas à 35 pixels du bord (stage.stageHeight-35 équivaut à dire : la hauteur moins 35 pixels). Lorsque vous positionnez les objets, pensez à tenir compte de leur point d’alignement (centre) et de leur hauteur ou largeur. Ceci est déterminent pour caler parfaitement les éléments dans la scène. Le MovieClip bandeau_mc est positionné en Y selon la même hauteur de fenêtre. Mais il est également redimensionné en largeur (width) selon la largeur effective de la fenêtre. Le symbole occupe donc toute la largeur de la scène quelle qu’en soit la taille. Nous avons bien entendu pris soin d’y placer des graphismes qui supportent cette distorsion. La dernière partie de la fonction affecte également les positions X et Y, ainsi que les dimensions width et height de l’objet contenu_mc. Mais, nous ajoutons ici une condition : contenu_mc.x=0; contenu_mc.y=0; contenu_mc.width=stage.stageWidth; contenu_mc.height=stage.stageHeight; if (contenu_mc.scaleX<=contenu_mc.scaleY) { contenu_mc.scaleX=contenu_mc.scaleY; } else { contenu_mc.scaleY=contenu_mc.scaleX; }