Utilisabilité et flash : menus contextuels
Une version plus récente de cet article (avec l’emploi de classe ActionScript 2) est désormais disponible.
date d’édition : 20/01/2007
Voici une animation flash que je viens de créer : elle contient tout simplement deux boutons.
Ces deux boutons font apparemment la même chose.
Cliquez maintenant les deux boutons avec le bouton droit de votre souris (touche control et clic pour ceux qui n’ont qu’un bouton à leur souris.)
Un clic droit sur le second bouton devrait donner quelque chose comme ceci :
Un menu contextuel permettant soit d’ouvrir le lien dans la même page, soit de l’ouvrir dans une nouvelle fenêtre, soit de copier le lien dans le clipboard.
Enfin un fichier flash mieux utilisable !
Le code ActionScript :
J’ai créé un fichier flash à votre disposition (.zip – 6KB) contenant deux boutons (que j’ai nommés simpleButton pour le premier bouton et advancedButton pour le second) dans lequel j’ai écrit le code suivant :
var url="//www.gatellier.be/blog/";
//creation des éléments d'un menu contextuel
var usableContextMenu=new ContextMenu();
//les valeurs par défaut sont cachées
usableContextMenu.hideBuiltInItems();
usableContextMenu.customItems.push(
//rajout d'un élément menu
new ContextMenuItem(
//définition du label du menu
"&Open Link",
//définition de la fonction qui sera exécutée
function(){
getURL(url,"_self");
}
)
);
usableContextMenu.customItems.push(
new ContextMenuItem(
"Open Link in New &Window",
function(){
getURL(url,"_blank");
}
)
);
usableContextMenu.customItems.push(
new ContextMenuItem(
"&Copy Link to Clipboard",
function(){
System.setClipboard(url);
}
)
);
//association du contexte menu à mon bouton
advancedButton.menu=usableContextMenu;
Explications :
aUR la ligne 3, je crée une instance d’un objet ContextMenu, je la nomme usableContextMenu.
La ligne 5 me sert à cacher les éléments par défaut d’un menu contextuel d’une animation flash.
Les lignes 8, 17 et 25 ajoutent un élément menu contextuel à mon menu. Chacun des ces éléments est défini en tant que ContextMenuItem avec un label, et une action.
Pour les trois liens, je reprends la variable définie ligne 1 : url. Mais chaque fois de manière différente :
- Ligne 13 : pour ouvrir le lien dans la même fenêtre.
- Ligne 21 : pour ouvrir le lien dans une nouvelle fenêtre.
- Ligne 29 : pour copier dans le clipboard.
aUR ligne 34, je défini la propriété menu de l’objet advancedButton (le bouton que j’ai créé) comme étant l’objet menu que j’ai créé à la ligne 3 usableContextMenu
J’ai aussi des petites actions sur les deux boutons pour qu’ils réagissent à un clic gauche de la souris.
Petit Truc :
Pour que les liens soient encore un petit peu plus accessibles, j’ai rajouté des raccourcis claviers (qui ne seront visibles qu’avec le menu contextuel ouvert et la touche ALT du clavier enfoncée).
Pour rajouter ces raccourcis clavier, il suffit de rajouter un & devant la lettre définie comme raccourcis.
Je me suis basé pour ces raccourcis aux mêmes raccourcis que l’interface de Firefox pour plus de cohérence.
Usage :
L’usage de ce type de liens contextuels dans les animations flash n’a de sens, évidemment, que lorsque les liens appelés sont des liens externes. Ou que les différentes parties de l’animation ont une adresse propre.
Merci déjà à tous les flasheurs d’employer des menus contextuels sur les liens de leurs animations flash.
Liens relatifs :
- Le fichier source de l’animation flash de cette page (.zip – 6KB)
- Plus d’infos sur la classe ActionScript 2.0 ContextMenuItem.
- Inspiration : le petit lien sur la splash page de Néa (mais la en AS 3)
Ajouter de tags et de commentaires dans les vidéos avec Viddler
Viddler est un service de partage de vidéo en ligne pas comme les autres. Son gros avantage est de permettre d’attribuer des tags et de commenter des moments précis des vidéo.
Il permet aussi de référer une image figée lorsque l’on envoie la vidéo. Grâce à Viddler, vous ne devrez plus regarder l’entièreté de films qu’on vous envoie ou que vous trouvez sur internet pour voir une image particulière.
Charles sniffe de l’Ajax et du swf
non je ne parles pas de mon (plus si) petit voisin
On a vu récemment que sous Firefox, il était très facile de tracer les requêtes Ajax avec l’extension Firebug.
Et pour Internet Explorer?
Il existe une application multi platforme (Win/MacOS/Linux) qui permet de renifler tout le traffic passant par les navigateurs. Le nom de ce bonheur pour les développeurs: Charles
Une fois installé et activé, Charles se comporte comme un serveur proxy et enregistre les différentes requêtes HTTP
L’analyse des données de la partie droite de l’écran permet de retrouver une foule d’informations sur la ressource demandée. Dans ce cas-ci, il s’agissait d’un flux RSS.
L’onglet Général nous indique tout ce qui est relatif au fichier demandé lui-même (taille, vitesse de téléchargement, etc), l’onglet Request reprend ce que le browser a demandé au serveur, et l’onglet Response reprend ce que le serveur a répondu.
Exactement ce qu’on cherche pour déboguer nos applications Ajax.
Comme ce programme se comporte comme un proxy, il capture tous le traffic, même les requêtes qui sont faites par des fichier .swf tels des diaporamas ou des applications FlashComm
Quand je vous disais que c’était le bonheur !
Disponible sur le site du développeur, la version d’essais est tout à fait fonctionnelle sauf qu’elle s’arrête après trente minutes (assez pour certains). Sinon, l’application coûte US$50,-. Pas si cher que ça.
Liens relatifs
Créer des images de fond en ligne: bgMaker
Encore un petit site qui nous simplifie la vie, le bgMaker, tout réalisé en flash, nous permet de créer en ligne des images de fond pour les pages web, ou des icônes.
Sur une grille que vous pouvez agrandir ou rétrécir, vous sélectionnez votre couleur préférée et vous remplissez les cases. La prévisualisation du fond de la page est instantanée.
Une fois que vous êtes fiers de votre dessin, vous pouvez le télécharger au format .png.
A votre disposition aussi, la galerie des réalisation, par type (icône ou image de fond) ou par nombre de téléchargement.
ça me rappelle que je dois encore mettre un favicon sur mon blog.
Liens relatifs :
del.icio.us+blogger=Adobe NoteTag
Une petite démo vaut beaucoup mieux qu’un long discours: Adobe NoteTag.
Le concept: une application en Flex qui permet de partager des tâches entre différents utilisateurs. Ce qui est fort, c’est que le système publie le contenu des Notes dans un blog pour le contenu (Blogger ou TypePad) et classifie ces notes via Del.icio.us (par système de tags).
Très Web2.0 !
7 commentaires