PictureFlow

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

Attention ! Nouvelle version 4.0 ici

Si vous utilisez iTunes 7, vous connaissez et appréciez sûrement la présentation des pochettes d’album en mode « CoverFlow ». Partant de là, j’ai voulu en faire une version Flash histoire de rigoler 5 minutes… Donc, voici ma version full AS2. Celle ci-dessus est piloté par un fichier xml mais à l’origine j’ai goupillé une version piloté par mySQL (flashRemoting). L’AS2 a été imposé par les API’s de Yahoo!Map qui n’était pas dispo en AS3 au début du projet.

A noter sur le même sujet, il existe, 2 versions AS3 qui tiennent la route : Celle de Pierre Lepers et celle d’Arno mais aucune en AS2.

A propos de cet article

Vous lisez actuellement “PictureFlow,” un article sur Osamwal Dezign – PictureFlow workshop

Date :: 26 septembre 2007

Catégorie :: PictureFlow, Web Dezign

Comments are closed

Commentaires non autorisés pour cet article.

Oayoun 4 octobre 2007 / 3am

Bonjour Yaëlle !

Tout d’abord Bravo pour cette version très réussi de « PictureFlow » !

J’aimerais pouvoir l’intégrer à mon Blog (en Construction sur une base wordpress) sur lequel je souhaiterais partager mes photos (je suis en Australie, alors la famille veut voir les Kangourous !).

J’ai donc téléchargé PictureFlow comme tu le proposes si gentillement ici.

Seulement voilà, je ne parviens pas à l’intégrer et encore moins à le modifier (.swf oblige) !
J’aimerais adapter les couleurs de commentaires à mon site.

De plus, dès que je change le fichier images.xml, le cover flow ajoute un « Holder » ou n’affiche plus rien…

Te serais-t-il possible de m’aider ?

Merci d’avance.
osamwal 4 octobre 2007 / 9am

Bonjour l’Australie !
Pour intégrer correctement PictureFlow à votre Blog, 4 petites contraintes :
– Les images doivent être au format Jpeg,
– Les images doivent être taillées à 240*180 pixels, sinon elles seront tronquées ou laisseront de « belles » marges blanches,
– Le répertoire de stockage des images doit être inclus dans celui qui contient le SWF et doit s’appeler : « images », de même pour le xml,
– Enfin, pour des raisons de sécurités liées au FlashPlayer, la page web qui appelle le SWF, le SWF et les images à afficher doivent être sur un même domaine… ce qui pose souvent problème avec les Blogs avec hébergement prêt à l’emploi car les pages sont générées sur le domaine principal et les images doivent être hébergées ailleurs. A vérifier !
Cependant, il existe un moyen de contourner cette limitation de sécurité du Flash Player en plaçant un crossdomain.xml à la racine du site qui héberge les images et le XML : plus d’info là
Oayoun 5 octobre 2007 / 6am

Merci pour ta réactivité ! ça marche maintenant !

Cependant, te serait-il possible de m’indiquer comment modifier la couleur Orange des bulles et de l’intérieur des flèches (#ff8433) -> en rouge (#c81313) pour une meilleur intégration à mon blog ? Est il possible de travailler avec des Css dessus ?
C’est là, la seule modification que j’apporterais à ce magnifique PictureFlow ! Encore Bravo et Merci !

See you !

Oayoun.
osamwal 6 octobre 2007 / 2am

Tu peux télécharger la version 2 qui permet de modifier les couleurs et l’adresse du XML ici.
Oayoun 6 octobre 2007 / 4am

Merci ! C’est parfait !

Oayoun.
Thony 19 octobre 2007 / 7pm

Bonjour,

Bravo pour votre travail. C vraiment bien.
Dommage que le pilotage a la souris ne soit pas géré (défilement) car sinon j’étais preneur.
En tout cas j’adore le travail de qualité mis a la disposition de tous, c’est pour cela que je vous dis : Félicitations
Wormzoom 24 octobre 2007 / 6pm

Bonjour,
Bravo, car après des heures de recherche pour une animation du type « coverflow » c’est la plus simple et la plus « design » enfin question de goût…

N’ayant pas le .fla en « open source » 🙂 serait il possible sur l’image principale (celle qui vient en premier plan) de lui ajouter un lien internet ?
Honnêtement ! ce serait le TOP.
Merci bcp
osamwal 25 octobre 2007 / 3pm

La version 2.1 est dispo ! Cliquez sur le lien dans l’article pour la télécharger. Bientôt un article pour détailler les nouveautés. Mais en 2 mots, j’ai activé la proprété « onRelease » lorsque l’image est au premier plan. Tout ça se pilote avec le XML, lisez le mode d’emploi livré avec le pack 🙂
osamwal 28 novembre 2007 / 11am

Attention, nouvelle version 2.2 interfacée avec Lightbox2 !
C’est par ici que ça se passe…
melanie 5 décembre 2007 / 4pm

bonjour
félicitation pour votre travail
neanmoins, je m’arrache les cheveux depuis 5 heures car tout fonctionne bien, mais quand on clique sur une photo, au lieu de s’ouvrir en lightbox, l’image vient s’ouvrir tout en bas de la page. mais vraiment tres tres loin en bas de la page.
c’est grave docteur?
a bientot
osamwal 5 décembre 2007 / 5pm

@ Mélanie : C’est un problème d’intégration des Javascript lightbox dans votre page. Pour l’identifier, il me faudrait l’URL ou le code source de la page où se produit le PB.
clement 11 septembre 2008 / 10am

Ce cover flow est le plus simple et le plus design a mettre en place ! C’est une belle réussite, brav !
Cependant serait-il possible de modifier les contours des images ? de les supprimer ? en ne précisant aucune valeurs a la couleur du contour, ne pourrait il plus s’afficher ?
merci de votre réponse.

Clément
osamwal 11 septembre 2008 / 11am

Cette version n’est plus supportée. Voir PictureFLow 2.9 Fr.

This Version is no longer supported. See PictureFLow 2.9 US-En.
osamwal 11 septembre 2008 / 11am

myAlpha=0 rend les bordures invisibles.
clement 11 septembre 2008 / 11am

Je vais essayé tout de suite ! merci !!!