{"id":160,"date":"2007-01-17T17:01:37","date_gmt":"2007-01-17T16:01:37","guid":{"rendered":"http:\/\/www.gatellier.be\/blog\/?p=160"},"modified":"2008-03-26T14:39:10","modified_gmt":"2008-03-26T13:39:10","slug":"utilisabilite-flash-menus-contextuels","status":"publish","type":"post","link":"https:\/\/gatellier.be\/blog\/utilisabilite-flash-menus-contextuels\/","title":{"rendered":"Utilisabilit\u00e9 et flash : menus contextuels"},"content":{"rendered":"<p><em>Une <a href=\"\/blog\/utilisabilite-et-flash-menus-contextuels-maj\/\" title=\"Utilisabilit\u00e9 et flash: les menus contextuels sur les liens en actionscript\">version plus r\u00e9cente de cet article<\/a> (avec l&#8217;emploi de classe ActionScript 2) est d\u00e9sormais disponible.<\/em><br \/><small>date d&#8217;\u00e9dition : 20\/01\/2007<\/small><\/p>\n<p>Voici une animation flash que je viens de cr\u00e9er : elle contient tout simplement deux boutons.<\/p>\n<div id=\"flashcontent\" style=\"text-align:center\"><\/div>\n<p><script type=\"text\/javascript\">\n\/\/<![CDATA[\naddEvent(window,\"load\",function(){\n\tvar so = new SWFObject(\"\/blog\/posts\/2007\/01\/flash-context-menu\/flash-context-menu.swf\", \"mymovie\", \"220\", \"100\", \"7\", \"#cccccc\");\n\tso.addParam(\"allowScriptAccess\", \"sameDomain\");\n\tso.write(\"flashcontent\");\n});\n\/\/]]>\n<\/script><\/p>\n<p>Ces deux boutons font apparemment la m\u00eame chose.<\/p>\n<p>Cliquez maintenant les deux boutons avec le bouton droit de votre souris (touche control et clic pour ceux qui n&#8217;ont qu&#8217;un bouton \u00e0 leur souris.)<\/p>\n<p>Un clic droit sur le second bouton devrait donner quelque chose comme ceci :<\/p>\n<p align=\"center\"><a href=\"\/blog\/?pp_album=1&#038;pp_image=flash_context_menu.png\"><img decoding=\"async\" src=\"\/blog\/wp-content\/photos\/flash_context_menu.png\" alt=\"Capture d'\u00e9cran d'un menu contextuel d'un fichier flash permettant d'ouvrir les liens dans une nouvelle fen\u00eatre ou copier l'url du lien\" title=\"Capture d'\u00e9cran d'un menu contextuel d'un fichier flash permettant d'ouvrir les liens dans une nouvelle fen\u00eatre ou copier l'url du lien\" \/><\/a><\/p>\n<p>Un <strong>menu contextuel<\/strong> permettant soit d&#8217;ouvrir le lien dans la <strong>m\u00eame page<\/strong>, soit de l&#8217;ouvrir dans une <strong>nouvelle fen\u00eatre<\/strong>, soit de <strong>copier le lien<\/strong> dans le <span xml:lang=\"en\" lang=\"en\" title=\"Presse-papiers en fran\u00e7ais\">clipboard<\/span>.<\/p>\n<p>Enfin un fichier flash mieux utilisable !<\/p>\n<h3>Le code ActionScript :<\/h3>\n<p>J&#8217;ai cr\u00e9\u00e9 un fichier flash <a href=\"\/blog\/posts\/2007\/01\/flash-context-menu\/flash-context-menu.zip\" type=\"application\/x-zip-compressed\">\u00e0 votre disposition<\/a> (.zip &#8211; 6KB) contenant deux boutons (que j&#8217;ai nomm\u00e9s <code>simpleButton<\/code> pour le premier bouton et <code>advancedButton<\/code> pour le second) dans lequel j&#8217;ai \u00e9crit le code suivant :<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar url=&quot;\/\/www.gatellier.be\/blog\/&quot;;\r\n\/\/creation des \u00e9l\u00e9ments d'un menu contextuel\r\nvar usableContextMenu=new ContextMenu();\r\n\/\/les valeurs par d\u00e9faut sont cach\u00e9es\r\nusableContextMenu.hideBuiltInItems();\r\nusableContextMenu.customItems.push(\r\n\t\/\/rajout d'un \u00e9l\u00e9ment menu\r\n\tnew ContextMenuItem(\r\n\t\t\/\/d\u00e9finition du label du menu\r\n\t\t&quot;&amp;Open Link&quot;,\r\n\t\t\/\/d\u00e9finition de la fonction qui sera ex\u00e9cut\u00e9e\r\n\t\tfunction(){\r\n\t\t\tgetURL(url,&quot;_self&quot;);\r\n\t\t}\r\n\t)\r\n);\r\nusableContextMenu.customItems.push(\r\n\tnew ContextMenuItem(\r\n\t\t&quot;Open Link in New &amp;Window&quot;,\r\n\t\tfunction(){\r\n\t\t\tgetURL(url,&quot;_blank&quot;);\r\n\t\t}\r\n\t)\r\n);\r\nusableContextMenu.customItems.push(\r\n\tnew ContextMenuItem(\r\n\t\t&quot;&amp;Copy Link to Clipboard&quot;,\r\n\t\tfunction(){\r\n\t\t\tSystem.setClipboard(url);\r\n\t\t}\r\n\t)\r\n);\r\n\/\/association du contexte menu \u00e0 mon bouton\r\nadvancedButton.menu=usableContextMenu;\r\n<\/pre>\n<h3>Explications :<\/h3>\n<p>aUR la ligne 3, je cr\u00e9e une instance d&#8217;un objet <code>ContextMenu<\/code>, je la nomme <strong><code>usableContextMenu<\/code><\/strong>.<\/p>\n<p>La ligne 5 me sert \u00e0 cacher les \u00e9l\u00e9ments par d\u00e9faut d&#8217;un menu contextuel d&#8217;une animation flash.<\/p>\n<p>Les lignes 8, 17 et 25 ajoutent un \u00e9l\u00e9ment menu contextuel \u00e0 mon menu. Chacun des ces \u00e9l\u00e9ments est d\u00e9fini en tant que <strong><code>ContextMenuItem<\/code><\/strong> avec un label, et une action.<\/p>\n<p>Pour les trois liens, je reprends la variable d\u00e9finie ligne 1 : <code>url<\/code>. Mais chaque fois de mani\u00e8re diff\u00e9rente :<\/p>\n<ol>\n<li>Ligne 13 : pour ouvrir le lien dans la m\u00eame fen\u00eatre.<\/li>\n<li>Ligne 21 : pour ouvrir le lien dans une nouvelle fen\u00eatre.<\/li>\n<li>Ligne 29 : pour copier dans le <span xml:lang=\"en\" lang=\"en\" title=\"Presse-papiers en fran\u00e7ais\">clipboard<\/span>.<\/li>\n<\/ol>\n<p>aUR ligne 34, je d\u00e9fini la propri\u00e9t\u00e9 menu de l&#8217;objet advancedButton (le bouton que j&#8217;ai cr\u00e9\u00e9) comme \u00e9tant l&#8217;objet menu que j&#8217;ai cr\u00e9\u00e9 \u00e0 la ligne 3 <code>usableContextMenu<\/code><\/p>\n<p>J&#8217;ai aussi des petites actions sur les deux boutons pour qu&#8217;ils r\u00e9agissent \u00e0 un clic gauche de la souris.<\/p>\n<h3>Petit Truc :<\/h3>\n<p>Pour que les liens soient encore un petit peu plus accessibles, j&#8217;ai rajout\u00e9 des <strong>raccourcis claviers<\/strong> (qui ne seront visibles qu&#8217;avec le menu contextuel ouvert et la touche ALT du clavier enfonc\u00e9e).<\/p>\n<p>Pour rajouter ces raccourcis clavier, il suffit de rajouter un <strong><code title=\"ampersand\">&<\/code><\/strong> devant la lettre d\u00e9finie comme raccourcis.<\/p>\n<p>Je me suis bas\u00e9 pour ces raccourcis aux m\u00eames raccourcis que l&#8217;interface de Firefox pour plus de coh\u00e9rence.<\/p>\n<h3>Usage :<\/h3>\n<p>L&#8217;usage de ce type de liens contextuels dans les animations flash n&#8217;a de sens, \u00e9videmment, que lorsque les liens appel\u00e9s sont des <strong>liens externes<\/strong>. Ou que les diff\u00e9rentes parties de l&#8217;animation ont une adresse propre.<\/p>\n<p>Merci d\u00e9j\u00e0 \u00e0 tous les flasheurs d&#8217;employer des menus contextuels sur les liens de leurs animations flash.<\/p>\n<h4>Liens relatifs :<\/h4>\n<ul>\n<li>Le <a href=\"\/blog\/posts\/2007\/01\/flash-context-menu\/flash-context-menu.zip\" type=\"application\/x-zip-compressed\">fichier source de l&#8217;animation flash de cette page<\/a> (.zip &#8211; 6KB)<\/li>\n<li>Plus d&#8217;<a href=\"\/\/www.brajeshwar.com\/reference\/as2\/ContextMenuItem.html\" hreflang=\"en\">infos sur la classe ActionScript 2.0 ContextMenuItem<\/a>.<\/li>\n<li>Inspiration : le <a href=\"\/\/nea.fonetik.ca\/\">petit lien sur la splash page de N\u00e9a<\/a> (mais la en <abbr title=\"Action Script\" lang=\"en\">AS<\/abbr> 3)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Une version plus r\u00e9cente de cet article (avec l&#8217;emploi de classe ActionScript 2) est d\u00e9sormais disponible.date d&#8217;\u00e9dition : 20\/01\/2007 Voici une animation flash que je viens de cr\u00e9er : elle contient tout simplement deux boutons. Ces deux boutons font apparemment la m\u00eame chose. Cliquez maintenant les deux boutons avec le bouton droit de votre souris [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,30,39,10,11],"tags":[],"class_list":["post-160","post","type-post","status-publish","format-standard","hentry","category-browsing","category-code","category-flash","category-tutorial","category-usability"],"_links":{"self":[{"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/posts\/160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":0,"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"wp:attachment":[{"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gatellier.be\/blog\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}