Flickr rencontre l’AS3 et PV3D

Le 2 mars 2008

Flickr rencontre l’AS3 et PV3D

Voici une petite application que je viens de développer pour me familiariser avec AS3.

Basée sur l’API AS3 Flickr, cette galerie permet d’afficher vos albums photos FlickR dans des carousels disposés dans l’espace.
Le carousel est généré grâce à Papervision 3D, que j’ai ici bien eu l’occasion d’explorer… un vrai bonheur.

Pour visualiser l’application avec mon compte démo en exemple, cliquez ici

Fonctionnalités implémentées:

-affiche jusqu’à 10 carousels
-reflet
-navigation entre les carousels
-zoom sur une image
-légende photo et album
-gestion du resize

Paramètres utilisateur:

-id utilisateur (de la forme 00000000@A00)
-taille des images
-rayon des carousels
-nombre maximum de photos dans un carousel
-titre de l’application

1.Téléchargement de l’application

Flickr Carousel PV3D LC v1.0

2.Installation

Après avoir décompressé l’archive téléchargée, transférer son contenu avec un logiciel FTP dans le répertoire où vous souhaitez afficher l’application. (exemple: “http://www.mondomaine.com/carouselFlick/”.
C’est à cette adresse que la galerie sera accessible.

3.Configuration

Ouvrez le fichier xml/config.xml

Renseignez votre id d’utilisateur Flickr pour que l’application puisse récupérer vos albums. Cet id est de la forme 00000000@A00

Vous pouvez modifier le nombre maximum d’images à afficher, leur hauteur et largeur, ainsi que le rayon des carousels.
Faites cependant des réglages judicieux pour que le nombre de photos rentrent dans le périmètre du carousel, et qu’elles ne soient pas trop grandes pour l’écran.
Les réglages par défaut lors du téléchargement sont optimisés pour un affichage clair. C’est à vous d’adapter en fonction de vos souhaits.

Mettez ensuite le fichier config.xml en ligne dans le répertoire /xml

It’s done ! Aller sur “http://www.mondomaine.com/carouselFlick/index.html” pour visualiser le résultat.

4. Insertion de la galerie dans une page de contenu.

Copiez le code suivant à l’endroit ou vous souhaitez insérer le swf, en modifiant les paramètres de largeur et de hauteur:

<div class="monFlash">
<p id="flashcontent" style="display: none">Api Flickr présentation des 
albums en carousel 3D Papervision et AS3</p>
<script type="text/javascript"> var so = new SWFObject("carousel.swf", 
"carousel", "800", "500", "9", "#303030");  
var my_SWFintegrator = new SWFintegrator("flashcontent");  
my_SWFintegrator.setMinSize(800,500);  
my_SWFintegrator.setMaxSize(800,500);  
my_SWFintegrator.setTemplate("CC");  
so.useExpressInstall(\\'expressinstall.swf\\');  
so.addParam("allowdomain", "always");  
so.addParam("allowFullScreen", "true");  
so.addParam("allowScriptAccess", "always");  
so.write("flashcontent");  
</script>
</div>

Et n’oubliez pas d’insérer dans votre header les 2 fichiers js qui facilitent l’intégration du swf:
-swfobject
-swfIntegrator 

<script src="js/swfobject.js" type="text/javascript"></script>
<script src="js/swfintegrator.js" type="text/javascript"></script>

Enfin, copiez le fichier swf et les dossiers xml, scripts et js à la racine du fichier dans lequel vous souhaitez l’afficher.

5. Notes

Attention, la galerie n’est pas stable à 100%, les services flickr sont assez aléatoires par moment lors du téléchargement des images. il se peut donc que celui ci s’ arrête parfois en cours de route. Je cherche comment contourner la faille, pour l’instant il suffit de rafraichir avec un petit F5 pour que tout rentre dans l’ordre.

Flash AS3 ( Vu : 10773 fois )

Commentaires

10 Réponses à “Flickr rencontre l’AS3 et PV3D”

  1. Geoffrey Dorne on 3 mars 2008 20:47

    Vraiment trop fort… ! :-D chapeau

  2. auvergnator on 3 mars 2008 21:17

    Super chouette !!Par contre j’ai pas reussi a zoomer….mais c’est du plus belle effet !!!!

  3. daweed on 10 mars 2008 12:53

    trop forte mademoiselle LC !!!

  4. Monsieur.VD. on 17 mars 2008 3:22

    Rhooo sympas comme touuut !

  5. xenox on 21 mars 2008 20:55

    Sympa mais je me retrouve avec ce problème j’ai bien configurer le config.xml avec mon NSID mais il me charge toujours les photos demo??

  6. LutinCapuche on 21 mars 2008 21:31

    Xenox-
    Autant pour moi, j’ai laissé une variable de test. C’est corrigé, tu peux re-télécharger la source.

  7. xenox on 21 mars 2008 22:08

    Merci! Re-telecharger mais toujours le même souci lol

  8. xenox on 21 mars 2008 22:09

    Dsl je retire sa fonctionne a merveille Merci tu est une Chef ;)

  9. Tom on 3 avril 2008 23:39

    Super sympa!

    Va voir sur mon site (http://www.thomasdecaux.net puis Blog photos) j’en ai un en Flex et en forme de cylindre pour plus de photos.

  10. Christophe on 16 avril 2008 11:19

    Salut,

    Comment peut-on faire pour récupérer le source flash (FLA) de cette appli ? dans le fichier chargé, il n’y a à priori que le SWF…

    Par avance merci… et beau travail !

Répondre