Interactivité avec les touches du clavier

Interactivité avec les touches du clavier

La représentation d’objets en volume implique la nécessité de contrôler la navigation dans l’espace. Dans cette section, nous allons voir comment reconstituer un décor virtuel à partir de formes primitives texturées, puis comment y naviguer à l’aide des commandes du clavier. Pour cela, nous devons déterminer la possibilité d’effectuer une combinaison de touches (Maj+Flèche droite, par exemple). Enfin, nous modifierons le sens de défilement des flèches du clavier, en fonction de l’orientation de la caméra dans le décor. Pour guider l’utilisateur, une boussole est placée sur la scène du document Flash et donne l’orientation de la caméra dans l’espace 3D. Exemples > ch10_3DPaperVision_3.fla Dans le document « ch10_3DPaperVision_3.fla », sur la scène principale, au-dessus du calque fond_mc et de l’habillage gris, apparaît une boussole. À l’intérieur du symbole qui le compose, deux clips sont répartis vers les calques et possèdent leur nom d’occurrence. En publiant le document, des images tapissent des pans de murs virtuels. En activant les flèches du clavier, vous avancez, reculez ou vous déplacez à droite et à gauche. En appuyant simultanément sur majuscule et la touche flèche latérale, vous effectuez une rotation à 90˚ et pouvez reprendre une circulation vers l’avant en appuyant de nouveau sur la flèche du haut (voir Figures 10.30 et 10.31). L’aiguille de la boussole tourne en fonction de l’orientation définie pour la caméra

API d’affichage et de colorimétrie 

Bien que Flash intègre déjà tout type de données, il peut être intéressant de développer des fonctionnalités avancées sur des contenus traités dynamiquement. Par exemple, vous pouvez proposer une fonctionnalité de grossissement d’une image, une fonctionnalité de retouche colorimétrique d’une image, pour tester des ambiances et offrir de nouveaux services à des utilisateurs exigeants. Flash propose un moteur de traitement d’images avancé. Il dispose, pour cela, de deux classes qui permettent de modifier intrinsèquement les pixels d’une image (colorMatrixFilter) et de déformer un objet graphique (Matrix). Dans ce chapitre, nous abordons le traitement des pixels de l’image à travers ces différentes méthodes. Nous voyons comment réaliser, entre autres, des interfaces sans crénelage, une loupe, des filtres de traitement colorimétrique, des fonctionnalités d’impression sur des zones définies de l’interface. Nous verrons ensuite, dans le prochain chapitre, comment exploiter ces techniques pour mettre au point, par exemple, un moteur de rendu en relief. Lissage des images bitmap Le lissage des images est requis dès que l’image suit une transformation d’échelle ou de rotation. Sans lissage, l’image animée apparaît crénelée et un voile cristallin semble même la déformer dès qu’elle subit un mouvement. Comme évoqué aux Chapitres 5 et 9, nous avons vu comment lisser une image en activant l’option Autoriser le lissage, depuis les propriétés de chaque image, dans la bibliothèque. Mais, dans de nombreux cas, pour une galerie d’images dynamique par exemple, il peut être intéressant d’activer cette option avec ActionScript. Pour ce faire, nous utilisons la propriété smoothing. Pour appliquer cette propriété, nous devons au préalable comprendre qu’elle s’applique seulement à un objet image, et non à son conteneur. Il en résulte que, pour lisser un MovieClip, nous devons, au préalable, créer une enveloppe image (Bitmap) qui capture ce que représente le MovieClip, pour seulement ensuite le lisser par ActionScript. Dans cette section, nous allons voir comment lisser une image chargée dynamiquement sur la scène, dans un MovieClip.  Exemples > ch11_apiGraphisme_1.fla Dans le document « ch11_apiGraphisme_1.fla », sur la scène principale, est positionné un MovieClip vide, nommé contenu_mc, ainsi qu’un bouton Loupe. Le bouton Loupe agrandit et effectue une rotation sur ce MovieClip, si bien que sans les propriétés de lissage, nous pouvons constater l’apparition d’un crénelage. En publiant le document, l’image est d’abord chargée dans le MovieClip et affiche déjà un lissage. En activant le bouton Loupe, l’image effectue une rotation et subit un agrandissement, mais les pixels restent lisses, même à grande échelle (voir Figure 11.1). Dans la fenêtre de scénario de la scène principale, au-dessus du calque fond_mc, figurent le symbole contenu_mc (vide) et le bouton loupe_btn (voir Figure 11.2). Dans la fenêtre Actions, nous pouvons lire le code suivant : //————— initialisation import gs.*; import gs.easing.*; Figure 11.1 Aperçu du document publié. Figure 11.2 Aperçu du scénario de la scène principale.  import gs.events.*; //————— actions // chargement var chargeur = new Loader(); chargeur.load(new URLRequest(« images/provence/Roussillon.jpg »)); chargeur.contentLoaderInfo.addEventListener(Event.COMPLETE,chargementComplet); function chargementComplet(evt:Event) { // lissage var imageDepart:Bitmap = evt.target.content; var informationImage:BitmapData=new BitmapData(imageDepart.width,imageDepart.height); informationImage.draw(contenu_mc); imageDepart.smoothing=true; // affichage contenu_mc.addChild(imageDepart); contenu_mc.x=100; contenu_mc.y=30; } // bouton loupe loupe_btn.addEventListener(MouseEvent.CLICK,tournerImage); function tournerImage (evt:MouseEvent) { if (contenu_mc.rotation>-89) { TweenMax.to(contenu_mc, 2, {rotation:-90, scaleX:2, scaleY:2, x:0, ➥ y:520, delay:0, ease:Strong.easeInOut}); } else { TweenMax.to(contenu_mc, 2, {rotation:0, scaleX:1, scaleY:1, x:100, y:30, ➥ delay:0, ease:Strong.easeInOut}); } }