Nouveautés Flash Player 11.2 (Beta au 7/12/2011)
Les nouveautés principales que la majorité des programmeurs risquent d’utiliser tournent autour de la gestion souris. Voyons ça en détail.
!! Les swfs d’exemples necessitent le Player 11.2 (beta) ou supérieur !!
Gestion du right clic et du middle clic de la souris
Commençons par la plus simple, on peut désormais écouter des événements MouseEvent.RIGHT_CLICK et MouseEvent.MIDDLE_CLICK.
Concernant le middle clic, sur la plupart des souris, c’est l’enfoncement de la roulette.
Concernant le clic droit, par défaut, le clic droit fait apparaître le menu contextuel natif de Flash. Menu que l’on peut d’ailleurs modifier en partie, en ajoutant de nouvelles entrées. Depuis la version 11.2, le simple fait d’ajouter un écouteur d’événement sur le clic droit désactive le menu natif de Flash. Cela permet de faire d’autres choses au clic droit, ou de faire son propre menu avec son propre skin et ses propres entrées…
Aucune classe native de menu contextuel ne pourra servir de base, il faudra créer à 100% son menu et le gérer. L’avantage est une liberté totale.
Voici un simple exemple, il est évident qu’en situation réelle, il faudra créer une classe pour ce menu et la faire autrement avec des méthodes « addItem », etc., plus un contrôle de positionnement en bord d’application, que je n’ai pas pris la peine de faire… Ici, c’est juste pour l’exemple.
Code de test:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | package { import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; /** * ... * @author Alama */ public class Main extends Sprite { private var menuItems:Array; private var menu:Sprite; private var output:TextField; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point menuItems = new Array; makeExampleMenu(); output = new TextField; output.autoSize = TextFieldAutoSize.LEFT; output.text = "Action: "; output.y = stage.stageHeight - 20; addChild(output); stage.addEventListener(MouseEvent.RIGHT_CLICK, mouseRightClikHandler); stage.addEventListener(MouseEvent.MIDDLE_CLICK, mouseMiddleClikHandler); stage.addEventListener(MouseEvent.CLICK, mouseClikHandler); } /*__________________________________________________________________________________ * * Events Handlers * __________________________________________________________________________________ */ private function mouseRightClikHandler(e:MouseEvent):void { output.text = "Action: \"Right Click\""; menu.x = stage.mouseX; menu.y = stage.mouseY; menu.visible = true; } private function mouseMiddleClikHandler(e:MouseEvent):void { output.text = "Action: \"Middle Click\""; menu.visible = false; } private function mouseClikHandler(e:MouseEvent):void { output.text = "Action: \"Left Click\""; menu.visible = false; } private function menuClickHandler(e:MouseEvent):void { e.stopPropagation(); output.text = "Action: Click on \"" + menuItems[e.target.name].label.text + "\""; menu.visible = false; } private function menuItemOverHandler(e:MouseEvent):void { menuItems[e.target.name].label.textColor = 0xff6600; menuItems[e.target.name].btn.alpha = 1; } private function menuItemMouseOutHandler(e:MouseEvent):void { menuItems[e.target.name].label.textColor = 0xffffff; menuItems[e.target.name].btn.alpha = .5; } /*__________________________________________________________________________________ * * Privates Functions * __________________________________________________________________________________ */ private function makeExampleMenu():void { menu = new Sprite; for (var i:uint = 0; i < 6; i++) { menuItems[i] = new Object; menuItems[i].label = new TextField; // ! casting just for AutoCompletion helper TextField(menuItems[i].label).autoSize = TextFieldAutoSize.LEFT; TextField(menuItems[i].label).selectable = false; menuItems[i].label.text = "Ceci est l'Item " + String(i); menuItems[i].label.textColor = 0xffffff; menuItems[i].label.mouseEnabled = false; menuItems[i].label.x = 10; menuItems[i].label.y = i * 20; menuItems[i].btn = new Sprite; menuItems[i].btn.name = i; menuItems[i].btn.buttonMode = true; menuItems[i].btn.addEventListener(MouseEvent.MOUSE_OVER, menuItemOverHandler); menuItems[i].btn.addEventListener(MouseEvent.MOUSE_OUT, menuItemMouseOutHandler); menuItems[i].btn.graphics.beginFill(0x000000); menuItems[i].btn.graphics.drawRect(0, i * 20, 100, 20); menuItems[i].btn.graphics.endFill(); menuItems[i].btn.alpha = .5; menu.addChild(menuItems[i].btn); menu.addChild(menuItems[i].label); } menu.addEventListener(MouseEvent.CLICK, menuClickHandler); menu.visible = false; this.addChild(menu); } } } |
Le mouseLock et le movementMouse
Une autre nouvelle fonctionnalité est le mouseLock. Le but ici est de rendre la souris active tout le temps! Même en dehors du stage (donc, en dehors de l’animation et même de l’écran).
Seule restriction, le mouseLock n’est possible qu’on mode fullScreen ! Si on essaye de l’activer en mode normal, cela génère une erreur d’exécution visible par le player debugger.
Lorsque le mouseLock est activé, le curseur de la souris disparaît ! A la base, c’est logique, puisque dans ce mode, nous n’avons pas besoin de savoir où se trouve réellement la souris. « Ha bon », vous allez me dire.. Oui! dans ce mode, seules les variations de souris nous intéressent.. Voici l’explication..
Normalement, quand a besoin de connaître les coordonnées de la souris, on lit une des propriétés stageX(Y) ou localX(Y) d’un évènement MouseEvent. Lorsque le mouseLock est actif, ces propriétés sont fixée à 0 et ne peuvent plus servir! On peut être tenté d’utiliser le stage.mouseX(Y), mais celui-ci ne fonctione plus non plus… Il renverra n’importe quoi, basé sur un delta que nous allons voir ci après. Donc, en mode « mouseLock« , on oublie le système de coordonnées classique.
Par contre, deux nouvelles propriétés ont été ajoutées à MouseEvent! Il s’agit de movementX et movementY. Ces nouvelles propriétés, à l’inverse des anciennes, ne sont actives qu’en mode mouseLock! Le reste du temps, elles sont fixées à 0.
Le « movement » est en fait un deltaMouse, le nombre de pixels de déplacement qui a eu lieu entre 2 appels de l’Event mouseMove.
Cette nouveauté peut servir à plein de choses… surtout pour les jeux et certaines applications… On est plus contraint à la taille de l’animation, on peut juste regretter que cette fonctionalité ne soit disponible qu’en fullScreen..
Dans l’exemple ci dessous, je fais tourner un jog shuttle sans math, juste grace au movementX.
Pour passer en fullScreen, veuillez cliquer sur le rectangle noir.
On peut voir que les propriétés mouseX(Y) ne fonctionnent qu’en normalScreen et que les movementX(Y) ne fonctionnent qu’en fullScreen. Cela est dû à l’activation du mouseLock au moment du passage en fullScreen.

Code simple qui permet de tester la chose.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | package { import flash.display.Sprite; import flash.display.StageDisplayState; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; /** * ... * @author Alama */ public class Main extends Sprite { private var menuItems:Array; private var menu:Sprite; private var output:TextField; private var shuttle:Sprite; public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point output = new TextField; output.autoSize = TextFieldAutoSize.LEFT; output.y = 100; output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight; addChild(output); var btn:Sprite = new Sprite; btn.graphics.beginFill(0x000000); btn.graphics.drawRect(5, 40, 100, 50); btn.graphics.endFill(); addChild(btn); btn.buttonMode = true; btn.addEventListener(MouseEvent.CLICK, btnClickHandler); shuttle = new Sprite; shuttle.graphics.beginFill(0x333333); shuttle.graphics.drawCircle(0, 0, 100); shuttle.graphics.endFill(); shuttle.graphics.beginFill(0x999999); shuttle.graphics.drawCircle(- 50, -50, 10); shuttle.graphics.endFill(); shuttle.x = 100; shuttle.y = 260; addChild(shuttle); stage.addEventListener(Event.RESIZE, stageResizeHandler); stage.addEventListener(MouseEvent.MOUSE_MOVE, stageMouseMoveHandler); } /*__________________________________________________________________________________ * * Events Handlers * __________________________________________________________________________________ */ private function btnClickHandler(e:MouseEvent):void { stage.displayState = StageDisplayState.FULL_SCREEN; stage.mouseLock = true; } private function stageResizeHandler(e:Event):void { output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight; } private function stageMouseMoveHandler(e:MouseEvent):void { output.text = "Stage Size = " + stage.stageWidth + " X " + stage.stageHeight + "\nmouseX: " + e.stageX + " - mouseY: " + e.stageY + "\nmovementX: " + e.movementX + " - movementY: " + e.movementY; shuttle.rotation += e.movementX; } } } |
Conclusion
Ces nouvelles fonctionnalités vont sans doute trouver un certain succès auprès des programmeurs… Surtout la gestion du clic droit et le fait de pouvoir faire ses propres menus contextuels.
Le mouseLock est très bien lorqu’on souhaitera avoir un contrôle qui va au-delà de l’espace de l’animation et même au-delà de l’écran (défilement de quelque chose, jeux, ..).
Il y a encore d’autres nouveautés telles que la mise à jour automatique du Player en arrière plan (tâche de fond) ou le décodage de la video (h264) en background, dans un thread séparé.
Les exemples de code (et swfs) présents sur cette page sont très primaires, ils ont pour but de démystifier les nouvelles fonctionnalités du Flash Player 11.2. A chacun d’y trouver un usage propre et de développer ses algorithmes persos…

Article très intéressant, merci pour les petites démos.
Je suis actuellement sur un projet professionnel développé avec l’éditeur Flash CS5 qui nécessite absolument la prise en compte du clic milieu et droit, que faut-il faire pour que ces fonctions soient prises en compte à la compilation ? un SDK à télécharger ? un upgrade de l’éditeur ?
Car actuellement même si les évènements MIDDLE_CLICK et RIGHT_CLICK sont reconnus par l’éditeur de texte ils génèrent une erreur à la compilation du swf… (à moins de les utiliser dans un projet AIR bien sur)
Merci d’avance !
10 fév 2012 @ 13:41
Charger le playerglobal.swc et remplacer celui du SDK (répertoire 11). le renommer comme l’original.
http://labs.adobe.com/downloads/flashplayer11-2.html
Dans les options compilation de FlashDevelop, ajouter la ligne: -swf-version=15
Il faut aussi le player beta installé, mais ça c’est fait puisque mes démos ont fonctionné
10 fév 2012 @ 13:58
Désolé, j’avais pas fait gaffe que le développement était en CS5, j’utilise FD4.. Pour Flash, je ne sais pas trop comment on fait, (je ne l’utilise plus depuis des années.. Mais Les infos sont trouvable sur le web..
Commencer par le labs:
http://labs.adobe.com/technologies/flashplatformruntimes/flashplayer11-2/
Ou divers forums.. Mais en gros, il faut de toute façon le globalplayer beta (qui contient les références des nouvelles instructions du langage, le compilo s’appuie dessus) et il faut versionner le swf supérieur à 13 ..(15) mais 256 marche aussi..
voilà..
10 fév 2012 @ 14:08
Merci pour ta réponse si rapide alama.
Je vais procéder à quelques tests pour compiler avec une version CS5.5 et un autre test de compilation avec une CS5 « upgradée » (selon les instructions trouvées ici : http://pgstudios.org/index.php?b=compiling-for-flash-player-11-in-flash-pro-cs5).
Pour ceux que ça intéresse je donnerai les résultats dès qu’ils seront disponibles (malheureusement là où je travaille modifier un répertoire d’installation est soumis à droits d’admins et la procédure peut être assez leeeeeeente…)
10 fév 2012 @ 15:46
Résultats :
Après modification du répertoire d’installation de Flash CS5 je peux accéder dans les paramètres de publication à l’option « Flash player 11 beta 2″.
J’ai fait un test très simple : trace(MouseEvent.MIDDLE_CLICK).
Si je choisis dans les params de publication l’option « Flash player 10″ => erreur à la compilation (Accès à la propriété non définie MIDDLE_CLICK non définie, via la référence de type static Class)
Si je choisis l’option « Flash player 11 beta 2″ => aucune erreur, seulement le trace me sort : undefined.
Si quelqu’un a réussi à compiler du code pour le player 11 beta 2 avec l’éditeur flash (et obtenu un résultat satisfaisant) ça serait sympa de me donner une petite piste svp… je comprends pas trop la :s
13 fév 2012 @ 18:31