Le challenge...
Flash permet de faire des menus de navigation très agréables... mais lors de la phase de mise au point, alors que la strucure du site et les noms des éléments de menu ne sont pas encore connus avec précision, il est fastidieux d’avoir à recommencer son menu 10 fois... Peut-être que l’astuce suivante peut aider à améliorer les choses ?
L’astuce !
Pourquoi ne pas concevoir un seul élément de menu sous Flash, puis d’en empiler autant de copies que le menu le nécessite, et enfin leur passer leurs paramètres (adresse, cible, étiquette...) directement au sein de la page html ? Cela éviterait les multiples retouches sur le .fla et donnerait une remarquable souplesse pour l’élaboration du menu.
La réalisation :
1 - Créez une zone de texte dynamique : sous Flash MX, dans une animation vide créer une zone de texte dynamique. Décochez la case ’sélectionnable’ [1] puis saisissez un nom dans ’var’. Choisissez la police de caractères, la couleur, et les différentes caractéristiques qu’aura votre bouton en position non-survolée [2].
2 - Transformez-la zone de texte en bouton : une fois la zone céée pressez ’f8’ pour transformer ce symbole en bouton. Double-cliquez sur ce bouton, puis créez un état ’survolé’ en insérant une ’image clé’ dans la case ’dessus’. Pour cet état, sélectionnez une nouvelle couleur de caractère (ou toute autre caractéristique qui permette de différencier les 2 états ’haut’ et ’dessus’).
3 - Définissez le lien : retournez sur la séquence, puis pressez ’f9’ pour faire apparaitre les actions. Créez une nouvelle action pour le bouton : action -> navigateur -> geturl. Comme url saisissez ’adresse’ et comme fenêtre ’cible’ (assurez-vous que les cases ’Expression’ sont bien cochées toutes les 2 puisque adresse et cible sont des expressions). Saisissez une action pour l’image 1 du calque 1: actions -> controle -> stop (ceci évitera que l’animation boucle sur elle-même).
4 - Publiez l’animation : en pressant sur ’maj+f12’ l’animation est publiée. Un fichier swf prêt à l’emploi est généré, de même que la page html qui le contient. Est-ce que visualiser la page telle quelle va donner un résultat ? ... Non, car les paramètres ne sont pas encore passés !
5 - Passez les paramètres : au sein de la page html, les paramètres ’etiquette’, ’adresse’ et ’cible’ se passent en même temps, sur la ligne de commande :
<param name=movie value="mon_bouton.swf?etiquette=Bonjour !&adresse=salut.html&cible=_self">
Il existe une autre méthode (apparemment plus fiable du coté des accents...) pour passer les paramètres "etiquette" "adresse" et "cible" à l’animation Flash : il s’agit d’utiliser le tag FlashVars. D’abord définir une balise de parametres appelée FlashVars:
<param name="FlashVars" value="etiquette=Bonjour !&adresse=salut.html&cible=_self">
Il faut ensuite remettre le parametre FlashVars dans la balise embed :
<embed [...] FlashVars="etiquette=Bonjour !&adresse=salut.html&cible=_self" [...] >
6 - affichez le résultat !
PS: n’oubliez pas de lire l’article sur la bonne syntaxe de la balise object pour intégrer proprement du flash
1. Placer ce code en première image de la scène flash
System.useCodepage = true;
2. Selectionner UTF-8 dans Explorer (affichage / codage)
3. Publier
Et si le navigateur n’a pas le plugin Flash ?
Et bien on ne peut pas lancer Flash, et on ne peut encore moins s’en servir pour détetecter la version de Flash installé ! Bien sur, le plus simple est encore d’installer vite fait bien fait le plugin adéquat, mais si l’on ne le souhaite pas, comment faire ?
On trouve de nombreux sites où la question est posée, mais la plupart ne donnent que des astuces nécessitant, soit la redirection vers une autre page, soit justement d’avoir Flash installé pour détecter la présence du plugin.
L’astuce : utiliser un script coté client.
L’avantage d’un script exécuté coté client, est qu’il renvoie des données spécifiques au navigateur : par exemple nom, version, taille de l’écran, nombre de couleurs... et aussi les plugins installés ! Alors, vite, on se met en chasse sur le net de la commande qui permet, en JavaScript, de trouver si Flash est installé... Et on la trouve : il s’agit de vérifier dans un tableau [3] nommé navigator.plugins si une des valeurs de navigator.plugins.name s’appelle "Shockwave Flash".
Mais tout n’est pas si simple !
En effet, si ce tableau est bien initialisé avec Netscape ou les plus récents Mozilla et Mozilla FireFox, il n’en est pas du tout de même pour Notre cher Internet Explorer... Pour lui, et spécialement pour lui, il faut implémenter du VBScript en parallèle du JavaScript.
Vous trouverez ci-joint le script flashDetect.js, qui doit être appelé dans le tag "head" de votre page html. Ensuite, dans la partie "body" vous pouvez mettre le code suivant :
script language="JavaScript">
if(installe==1)
document.write("Votre texte alternatif, ou une image... ou ce que vous voulez en remplacement de l 'anim Flash.");
else
document.write("<object width='100' height='100'><param name='movie' value='votreAnim.swf'><param name='quality' value='high'><param name='wmode' value='transparent'><embed src='votreAnim.swf' quality='high' type='application/x-shockwave-flash' width='100' height='100' wmode ='transparent'/></object>");
</script> Et voila ! Maintenant il ne vous reste plus qu’à peauffiner le tout, voire à améliorer le code, mais le principal est fait : si le navigateur de votre visiteur n’est pas équipé du plugin, il peut quaznd même lirte votre page et il n’a pas cette image montrant une espèce de pièce de puzzle avec le message "get the plugin". Par contre, n’oubliez pas de lui suggerer d’aller quand même télécharger le plugin...
Bonne utilisation !
C’est râlant d’être parvenu à faire du html propre, et de buter sur une erreur générée par l’emploi "forcé" d’une balise <embed>, non reconnue par le W3C !
En effet, si l’on souhaite intégrer une petite animation flash dans son site, la plupart du temps elle est intégrée dans une balise <object>, laquelle contient une balise <embed>. Ca, c’est si on intégre l’anim avec DreamWeaver. Le résultat est une page qui fonctionne, mais qui n’est pas entièrement valide W3C.
Si on se contente de supprimer la balise embed, l’anime se voit sous IE mais plus sous FireFox. Voici un exemple de balise qui fonctionne :
<object
type="application/x-shockwave-flash"
data="./includes/animrea.swf"
width="200"
height="130"
id="animrea">
<param
name="wmode"
value="transparent" />
<param
name="movie"
value="./includes/animrea.swf" />
<param
name="quality"
value="high" />
</object>Ajouter dans la balise <object> la balise suivante :
<param name="wmode" value="transparent"> et au sein de la balise <embed> le paramètre suivant :
wmode ="transparent"Attention ! contrairement à ce qu’annonce Macromedia sur son site cette fonctionnalité n’est pas universelle.
Lorqu’il sagit de textes statiques, Flash vectorise les polices spéciales et vous n’avez à vous soucier de rien en publiant votre animation.
Si vous utilisez des champs dynamiques, vous devez vectoriser cette police, en cochant dans les propriétés de l’objet texte, après l’avoir selectionné : caractère / intégrer les contours de police pour / tous les caractères.
Voilou voilou.
