PictureFlow 4.2 “Butterfly” | Fr
PictureFlow | Test
You should have Javascript active and Flash Player 10.0.22 and above to see this page
Voici, “enfin”, diront certains, tant sa gestation a été compliquée par de multiples remises en question et perturbée par des événements externes, le nouveau PictureFlow en version 4 alias “Butterfly”.
Évidemment, ce nom évoque le Printemps en référence à sa date de sortie, mais surtout le nouveau moteur 3D permet maintenant de faire glisser les images comme dans du beurre (Fly like Butter… c’est “capilotracté”, je vous l’accorde mais ça sonne terrible, en anglais).
Alors quoi de neuf dans cette version et surtout pourquoi a-t-elle été si longue à arriver ? Est-ce que cela en valait la peine ? Est-ce qu’il neigera à Noël ? Brefs tant de questions, je le sens d’ici, vous brulent les lèvres auxquelles je vais essayer d’apporter quelques réponses. En route pour la visite.
D’abord ce qui ne se voit pas, le code de PictureFlow a été réécrit de A à Z. Cette version n’a plus rien à voir avec les anciennes en AS2. C’est maintenant de l’ActionScript 3 et tous les clips (sauf la barre de défilement et les bulles) sont généré dynamiquement par le code, cela permet une bien plus grande flexibilité et au passage, permet de faire tomber le poids du SWF à 22 Ko (Oui, il n’y a pas d’erreur, tout ça dans 22 Ko, à peine plus qu’une vignette JPEG…). Et surtout, il n’y a plus qu’un seul PictureFlow pour toutes les tailles d’images. Les images sont chargées (ou remplacées par une image par défaut si le chargement a échoué), puis redimensionnées à la hauteur que vous souhaitez grâce à un paramètre des FlashVars.
Ensuite pour le plus visible, l’arrivée des nouvelles classes 3D natives de FlashPlayer 10 ont permis de développer un nouveau moteur 3D beaucoup plus performant et surtout bien plus flexible. Toutes les images ont un paramètre de rotation en degré et des coordonnées en X, Y, Z réglables, vous permettant de reproduire le célèbre Cover Flow© d’Apple© comme ici (historiquement) ou n’importe quel autre carrousel d’images suivant votre propre dynamique. Les possibilités sont infinies : Laissez libre cours à votre imagination.
Enfin, au niveau interface JavaScript, PictureFlow embarque maintenant la dernière version de Shadowbox 3 et se charge grâce à l’excellent SWFObject 2.1 permettant de détecter et d’upgrader automatiquement le FlashPlayer de vos visiteurs s’ils ne sont pas en version 10.0.22 (version mini requise pour la 3D) et surtout de garder vos pages “Google friendly” grâce à du contenu alternatif aux animations flashs et au respect des normes du W3C.
Bon je crois que j’ai fais le tour des nouveautés. Mais assez de bla bla, passons à l’action maintenant.
Télécharger :
Télécharger PictureFlow 4
Licences:
45 € HT par site sans limitation dans le temps (Dégressif si achat en nombre : voir option de licence en nombre ci dessous, sinon, contactez moi à osamwal[at]yaelle.com). Une fois le règlement effectué, je vous délivre sous 24h (jours ouvrables) une version pro spécifique pour votre site Web (il est donc important d’en spécifier l’URL principale ainsi que des sous-domaines) et une facture. En attendant la livraison, vous pouvez continuer à utiliser sans risque la version gratuite. Les versions pro ne fonctionnent que sur un seul site mais ne peuvent pas être verrouillée à distance via le serveur de licence à la différence des versions publiques (A bon entendeur… 🙂 ).
Ensuite si vous devez utiliser Shadowbox, vous devez vous acquitter de la licence Shadowbox commerciale ($20 USD) ici. Et, de même si vous utilisez le FLV Video Player de Jeroen Wijering. (€39).
Installer :
– Décompressez cette archive sur votre disque en respectant bien les chemins des différents dossiers.
– Préparez vos miniatures (La taille originale n’est pas déterminante puisque les image vont être retaillées une fois chargées mais pensez à optimiser le poids de vos images pour sauver votre bande passante et les nerfs de vos visiteurs).
– Copiez les dans le répertoire “pictures”
– Préparez le fichier “feed.xml” en spécifiant pour 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
- title = (Facultatif) “Titre de l’info-bulle”
- title2 = (Facultatif) “Sous titre de l’info-bulle”
- desc = (Facultatif) “Texte de description multiligne dans Subdesc”
- autoLink = (Facultatif) Actionne une fonction javascript dans la page lorsque l’image arrive au premier plan (ex : autoLink = “javascript:showMyDiv(‘div01’)” permet d’activer la fonction showMyDiv et lui passer le paramètre ‘div01’)
- height = (Facultatif) Contraint la hauteur de la Shadowbox dans la valeur spécifiée (Pixels)
- width = (Facultatif) Contraint la largeur de la Shadowbox dans la valeur spécifiée (Pixels)
- target = (Facultatif) cible de l’action “_self” ou “_blank” (même fenêtre ou nouvelle) ou autre cible, si Shadowbox est désactivé (Inutile si Shadowbox est actif)
Vous pouvez mettre autant de lignes que vous avez d’images à afficher.
– Uploader le tout sur votre serveur web préféré, faites mijoter à feu doux pendant 10 min, Ding, c’est Prêt !!!
Configuration – Personnalisation – Jacky Touch 😉 :
Nul besoin de posséder Flash puisque tout est configurable directement dans le code html grâce à SWFObject. tous les paramètres de configuration sont gérés par ce que l’on appelle des FlashVars (Variables passées en mode texte au lecteur Flash lors du chargement)
Pour vous aider à intégrer SWFObject dans votre page web avec la liste de toutes les FlashVars, lancez le :
Générateur de code html & Javascript
Vous obtiendrez ainsi le code source d’une une jolie page Html que vous pourrez modifier à loisir dans votre éditeur préféré.
C’est à vous de jouer maintenant, bon courage !!
A propos de cet article
Vous lisez actuellement “PictureFlow 4.2 “Butterfly” | Fr,” un article sur Osamwal Dezign – PictureFlow workshop
- Date :
- 10 septembre 2009
- Catégorie :
- PictureFlow, Web Dezign
- Tags:
- AS3 , CoverFlow , PictureFlow
322 Comments
Rédiger un commentaire | comments rss [?] | trackback uri [?]