Aller au menu - Aller au contenu

Icône Publication et variables

Par Avatar SuprazZz
Mise à jour : 08/07/2010
4 613 visites depuis 7 jours, dont 33 sur ce chapitre classé 39/786
Dans cette partie, nous nous intéresserons seulement à ce que j'avais précédemment nommé : l'architecture Flashoponctuelle.
C'est à dire que nous allons étudier comment transmettre des variables directement à l'animation contenue dans une page Web, sans que l'animation aie besoin de faire de requête.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Paramètres de publication Html

Image utilisateur


Pour commencer, créez une nouvelle animation vide, et aller voir les options de publication : Fichier->Paramètres de publication.

Vérifiez que les cases Flash et Html sont cochées, puis allez voir l'onglet Html.

Pour plus d'informations sur le Modèle, sélectionnez celui concerné, et cliquez sur Infos.

Vous pouvez changer les dimensions de l'animation dans la page Web : essayez de conserver toujours les mêmes proportions, sinon l'utilisateur verra les "côtés" de l'animation, ce qui n'est pas très beau.

Les cases à cocher de Lecture nous concernent peu, car nous contrôlons la lecture et les autres propriétés directement en Actionscript.

Idem pour la Qualité.

Grâce au Mode fenêtre, vous pouvez rendre l'arrière-plan de votre animation transparent (c'est-à-dire qu'on verra la page Web au travers) ! Mais si l'animation et la page Web qui la porte sont trop complexes, ça va horriblement ralentir l'ordinateur... Option à double tranchant !

Vous comprendrez aisément les options suivantes, sachez toutefois que "Alignement Flash" correspond à l'alignement de l'animation dans l'espace qui lui est réservé, et non pas par rapport à la page.
Or la plupart du temps, l'espace réservé est le même que l'espace pris par l'animation, changer l'alignement ne fera donc rien.
Retour en haut

Le code Html expliqué

Cliquez ensuite sur le bouton Publier (maj+F12).
Avant de publier une animation, il faut l'avoir enregistrée quelque part, sinon elle sera publiée dans le "vide" (en fait dans le fichier temporaire Windows).

Aller jeter un coup d'oeil à la page Html produite par Flash, vous trouverez aisément les lignes qui nous intéressent :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400" id="Sans nom-1" align="middle">

<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Sans nom-1.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />

<embed src="Sans nom-1.swf" quality="high" bgcolor="#ffffff" width="550" height="400" name="Sans nom-1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>


J'ai mis un peu en forme le code pour qu'on s'y retrouve.
La balise object permet de signifier au navigateur qu'il doit charger un plug-in possédant les attributs fournis.
Suivent ensuite quelques balises de type param qui permettent de déclarer quelques propriétés qui seront passées au plug-in.
Et enfin vient la balise embed qui n'est pas standard (elle empêchera la validation Xhtml stricte de votre code), qui résume tout ce qui a été dit avant pour les autres navigateurs que IE (Firefox par exemple).

Maintenant que nous avons vu ce que Flash fait, et donc ce qu'il ne faut pas faire, voyons ce qu'on peut faire pour proposer un code valide.
Voici la solution proposée par cette très bonne page Web (anglais) :

Code : HTML
1
2
3
4
<object type="application/x-shockwave-flash" data="monanimation.swf" width="550" height="400">
<param name="movie" value="monanimation.swf" />
<p>Si l'utilisateur ne possède pas le plug-in</p>
</object>


L'auteur de ce code précise cependant que cela conduit à un petit bug avec Internet Explorer : avant d'être lue, l'animation sera chargée complètement, ce qui n'est pas grave pour nous. Mais c'est embêtant pour les grosses animations qui sont lues en streaming, c'est-à-dire pendant le chargement.

Dans tous les cas, il est impératif de garder l'attribut data qui indique aux navigateurs alternatifs (et valides), comme Mozilla Firefox, le chemin vers l'animation.
Mais il faut aussi conserver le param : movie qui lui sera utilisé par Internet Explorer. Vous pouvez d'ailleurs essayer l'un ou l'autre au choix, et ce sera soit IE soit Firefox qui n'affichera pas l'animation !

C'est une gêne, mais il faudra bien penser à chaque fois à modifier le chemin vers l'animation aux deux endroits.
Retour en haut

Envoie des variables

On arrive enfin à ce qui nous intéresse vraiment !
Le moyen le plus simple pour transmettre des variables à une animation Flash est de les lui envoyer codées, sous la forme GET.

Dit comme ça, ça a l'air drôlement compliqué, mais si vous avez quelques connaissances en PHP par exemple, vous comprendrez vite.

Rien de mieux qu'un exemple : dans le code ci-dessous, je transmets à l'animation monanimation.swf la variable siteweb qui vaut www.siteduzero.com.

Code : HTML
1
2
3
<object type="application/x-shockwave-flash" data="monanimation.swf?siteweb=www.siteduzero.com" width="550" height="400">
<param name="movie" value="monanimation.swf?siteweb=www.siteduzero.com" />
</object>


Vous avez vu, c'est tout simple, il suffit de rajouter ?nomdemavariable=valeurdemavariable juste après le lien vers l'animation.

Si j'ai plusieurs variables ?


Il faut utiliser le séparateur &
Exemple :
monanimation.swf?premierevariable=premierevaleur&secondevariable=secondevaleur

Et vous pouvez en mettre une infinité comme ça !
Retour en haut

Réception des variables

On sait comment on peut envoyer les variables, mais concrètement, comment les recevoir et les afficher dans l'animation ?


Il suffit de savoir que les variables sont transmises à la scène principale sur _root.

Pour tester, créez une zone de texte dynamique, et donnez-lui comme nom de variable (pas nom d'occurrence, mais bien nom de variable) : siteweb.

Publiez l'animation, et modifiez votre code Html en conséquence pour avoir, comme tout à l'heure :
votreanimation.swf?siteweb=www.siteduzero.com

Ouvrez votre page Web, et là, miracle, www.siteduzero.com est écrit dans la zone de texte !

Encore un autre petit exemple pour la route.
Dessinez ce que vous souhaitez dans votre animation, et transformez-le en clip que vous appellerez en toute originalité : monclip

Tapez le code suivant sur la scène principale :
Code : Actionscript
1
2
this.monclip._rotation = this.degre;
this.monclip._alpha = this.transparence;


Courez dans votre code Html, et changez le chemin de l'animation pour :
votreanimation.swf?degre=90&transparence=50

Ouvrez la page Web, et là, sans étonnement, vous verrez que votre clip est penché de 90° vers la droite, et à moitié transparent !
Retour en haut

Les caractères spéciaux

Je vous invite à essayer de transmettre cette variable : Zéros, et de l'afficher dans votre animation !

Si vous êtes sous Internet Explorer : pas de problème, le plug-in Flash (sous forme de contrôle ActiveX) a fait ce qu'il fallait pour que ça passe.
Essayez avec Mozilla Firefox : là c'est beaucoup moins beau, Flash vous affiche Z¡s.

Voilà l'origine du problème :
Tout caractère textuel est codé selon une table des caractères, qu'on appelle aussi charset.
Si vous regardez en haut du code Html des pages Web, vous verrez toujours une ligne avec un attribut de ce type :
charset=iso-8859-1

Ce charset-là est celui le plus répandu pour les sites européens. Il gère la quasi-intégralité des caractères des alphabets européens. Cela dit, ne lui demandez pas de vous afficher du japonais ou du chinois.

Flash, ayant des prétentions mondiales, a choisi un charset "mondial", standard et très à la mode en ce moment, le charset UTF-8.
Je vous conseille donc de coder en UTF-8 vos pages web !

Pour les lettres de l'alphabet, pas de problème, elles occupent la même position en iso-8859-1 et en UTF-8, ce qui explique pourquoi cela fonctionnait. Mais pour tous les autres caractères accentués, spéciaux, étrangers, il va falloir utiliser UTF-8.

Le charset de la mort



Il va vous falloir utiliser un programme qui permettera de choisir le charset de votre page Web. Dreamweaver, Notepad+, Unired le font. Il vous faut non seulement changer le charset "apparent" en haut de votre page web charset=UTF-8, mais en plus changer le charset "réel" du fichier, soit lors de la sauvegarde avec un logiciel d'édition du texte adapté, soit dans les propriétés de codage de la page avec Dreamweaver.

Et vos peines ne s'arrêtent pas là ! Selon que la page Web soit sur votre ordinateur ou sur votre serveur Web, l'animation affichera peut-être le ¡ qui deviendra vite votre pire ennemi ! Cela vient du fait que le charset est non seulement précisé à l'intérieur du la page web grâce à la ligne charset=UTF-8, mais le serveur Web peut aussi envoyer au navigateur un en-tête HTTP indiquant le charset à utiliser.
Donc la plupart du temps c'est en tâtonnant qu'on trouve la bonne solution, le mieux est d'utiliser le même charset partout.

Dès le départ, indiquez le charset=UTF-8 en haut de vos pages, indiquez à l'éditeur HTML que vous voulez écrire en UTF-8 et vérifiez dans les configurations de votre hébergeur que l'en-tête envoyé précise bien au navigateur qu'il doit utiliser l'UTF-8 (vous pouvez faire un programme PHP qui s'en chargera si votre hébergeur est nul).

L'encodage URL de rêve



Une solution pratique consiste à utiliser les fonctions escape() et unescape() de Flash.
Ces fonctions permettent d'encoder ou de décoder une chaîne de caractères au format URL.

Chaque caractère spécial possède un équivalent en codage URL. Par exemple, le é devient %C3%A9, et l'espace devient %20.
Même pas besoin de s'embêter avec les différents encodages (quoique ... ca serait trop beau :euh: ) !

Essayer de passer cette valeur à Flash : Z%C3%A9ros

Et là, ça marche à tous les coups ! :D Même pas besoin d'utiliser la fonction unescape(), Flash s'en occupe tout seul. ;)


Vous l'aurez compris, l'encodage devient un casse-tête dès le moment où on n'y fait plus attention !
Il est donc conseillé d'encoder les variables en utilisant l'encodage URL, comme ça pas de problème.
Mais il ne faut pas oublier que derrière se cache toujours le gros méchant charset !
Retour en haut

Q.C.M.

Commençons par une question simple.
On balise notre animation Flash "monanimation.swf" comme ceci dans note page XHTML :

Code : HTML
1
2
3
<object type="application/x-shockwave-flash" data="monanimation.swf?titre=transmission & variables" width="550" height="400">
<param name="movie" value="monanimation.swf?titre=transmission & variables" />
</object>


Quelle sera la valeur de _root.titre, une fois la page web contenant l'animation ouverte ?
On reprend l'exemple précédent, et on cherche à savoir comment faire pour afficher correctement le titre "transmission & variables".

Comment envoie-t-on la variable ?
La question la plus dure, coefficient 6.67 ! :D
La plupart du temps, vous ne connaissez pas la variable à envoyer à l'avance. :(
Elle est générée par un script PHP.
Alors imaginons qu'on veuille passer la variable $titre à l'animation.
Que devra-t-on écrire dans les attributs data et value de la balise object ?

Statistiques de réponses au QCM

Retour en haut
Ce tuto vous a permis de comprendre le système de transmission de variable, mais vous a aussi prévenu des dangers de l'encodage des variables !
Le meilleur moyen de ne pas se tromper reste encore d'effectuer les tests non pas en local sur votre ordinateur mais sur un serveur web distant. :)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
11 commentaires pour "Publication et variables"
Note moyenne : 3.24 / 4 (137 votes)
Pseudo Commentaire
Hors ligne morkibut # Posté le 28/10/2009 à 12:52:18

bonjour a tous, j'ai rencontrer des difficulter pour la réception des variables car cela ne marchais qu'avec IE et pas avec les autres navigateurs.

Au cas ou cela pourrait aider, il faut rajouter "?nom_variable1=variable1" dans la balise param et aussi dans la balise embed.

exemple ici: http://www.siteduzero.com/forum-83-446 [...] html#r4293885
Hors ligne kelebra # Posté le 01/04/2011 à 17:33:08

Excellent tuto, Un grand merci à SuprazZz.
Malheuresement j'ai quelques difficultés à comprendre la premiére parti du tuto ou on doit récupérer la variable siteweb (www.siteduzero.com) sur le texte dynamique, je n'ai pas compris la partie avec "créez une zone de texte dynamique, et donnez-lui comme nom de variable (pas nom d'occurrence, mais bien nom de variable) : siteweb" Je n'ai pas compris comment on donner un nom de variables au texte,si quelqu'un pouvait m'éclairer sa serait trés sympa !
Hors ligne kelebra # Posté le 01/04/2011 à 17:37:09

Ah c'est bon j'ai trouvé la réponse dans un sujet du forum ^^

Pour tous ceux qui aurait eu le même problème que moi :
http://www.siteduzero.com/forum-83-446 [...] variable.html
Hors ligne toto_toto69 # Posté le 13/03/2012 à 18:57:25

Avis : Très bon

A propos d'une utilisation ratée de Flash : Spiral Connect http://spiralconnect.univ-lyon1.fr/
Ce site est l'exemple typique de ce qu'il ne faut pas faire. Ca rame et c'est moche, l'Université Lyon1 a payé très cher pour un boulet inutilisable.
Hors ligne albert_albert69 # Posté le 26/03/2012 à 15:52:52

Avis : Très bon

Je ne sais pas si le lieu est approprié mais je confirme que c'est un site très moche

Voir tous les commentaires