PictureFlow 2 – Le retour

PictureFlow

You should have Javascript active and Flash Player 10.0.22 and above to see this page

Attention mise à jour 4.0 : Cette version est inopérante sur le Blog

Quelques petites améliorations pour personnaliser PictureFlow. Il y en a maintenant 2 pour le prix d’un : 1 blanc et 1 noir suivant l’humeur de votre site. Ensuite, vous avez la possibilité via les FlashVars de changer les couleurs des bulles, du texte et des flèches et enfin de spécifier un autre chemin que celui par défaut pour le XML qui va charger les images. Le gros atout est de permettre ainsi d'”instancier” plusieurs fois le même SWF avec des XML différents et donc des collections d’images différentes. On peut aussi imaginer appeler des images sur un autre site mais là, attention aux problèmes de sécurité du player (+ d’info sur la manipulation des crossDomain ici)

Mode d’emploi :

– Télécharger le pack puis dé zipper l’ensemble où bon vous semble 🙂

– Préparer vos images pour qu’elles fassent 240*180 px et copier les dans le répertoire “images”

– Préparer le fichier “images.xml” en spécifiant à chaques lignes :
* image = “URL de l’image (relative ou absolue)”
* action = “URL de destination lorsque l’on clique sur l’image quand elle est active”
* target = “_blank” pour afficher dans une nouvelle fenêtre du navigateur, “_self” pour rester dans la même… (Pour + d’info : voir fonction “getURL” en AS2)
* titre = “Titre de l’info-bulle”
* desc = “Légende de l’info-bulle”

Vous pouvez mettre autant de lignes que vous avez d’images à afficher.

– Le pack inclus dorénavant un fichier de javascript, “plug_t.js” qui permet d’inclure proprement un SWF dans une page web (y compris dans IE7 où l’on va éviter le fameux “Cliquez pour activer ce contrôle” aussi inutile qu’énervant depuis que Grossoft à perdu son procès contre Eolas) et d’agir simplement sur tous les paramètres du FlashPlayer. Pour l’utiliser, on l’inclus dans l’entête du html qui contient le swf en rajoutant entre les balises <head>, la ligne :

<script src="http://monsite/plug_t.js"type="text/javascript"> </script>

Pour les blogueurs, il suffit de modifier votre header.php de la même façon.

– Lorsque que l’on veut ajouter un PictureFlow sur notre page Web il suffit d’écrire :

<script type="text/javascript">
RunFlash("adresse_swf", "largeur", "hauteur", "couleurFond", false, "Id","FlashVars")
</script>

C’est dans les FlashVars que l’on va spécifier nos paramètres de personnalisation en les séparant par des “&”. Il y’en a 4 sur lesquels on peut jouer :

xmlfeed = URL du fichier xml qui contient les images
myColor = Valeur hexadécimal de la couleur des bulles et des flèches (ex : 0x0099FF pour bleu) (N’oubliez pas le 0x devant le nombre, c’est ce qui force Flash à lire les nombres en hexadécimal).
myTextColor = Idem pour le texte et le contour de la bulle.
myAlpha = valeur décimale entre 0 et 1 du ratio de transparence de la bulle.

NB : Omettre une de ces valeurs n’est pas très grave, j’ai laissé des valeurs par défaut dans le code. Pour vous aider, vous pouvez vous inspirer du code des fichiers html inclus dans le pack.

– Voila c’est tout ! Enjoy !