PictureFlow 3.2 « Shadowbox 2 » Fr

PictureFlow

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


Get Adobe Flash player

Attention ! La version en demo ici est le nouveau PictureFlow 4.0 « Butterfly »

Speak English ? Read the tuturial here

Voici venu le temps des rires et des chants mais surtout, du nouveau PictureFlow. Cette version 3.0 du désormais famous CoverFlow d’iTunes en Flash est maintenant complètement compatible avec la version 2 de l’excellent Shadowbox de Michael J. I. Jackson (qui je vous le rappelle peut ouvrir en surimpression de votre page n’importe quel media : video, musique, photo, anim flash, page web etc…). J’ai totalement réécrit la façon dont il était déclenché par PictureFlow. Donc à partir de maintenant, le nouvel injecteur est complètement « agnostique ». Mais quel est ce nouveau mot ? Pour faire simple, Vous pouvez l’utiliser sur n’importe quel framework (Mootools, JQuery, Prototype, YUI, EXT, Etc…) voir aucune plateforme si vous n’en utilisez pas.  Puis, il y a quelques petits changements cosmétiques avec l’arrivée de nouvelles bulles de description au comportement plus intelligent. Elles ne peuvent plus être cachées par les limites de la scène puisque elles sont maintenant scotchées au pointeur de la souris et s’orientent automatiquement vers le centre. Puis enfin un petit effet de flouttage progressif sur les images qui s’éloignent et quelques retouches sur le loader (maintenant « skinnable ») et la Scrollbar. C’est pas beautiful, ça là ?

Vous pouvez télécharger gratuitement le kit d’installation selon les termes de la licence Creative Commons.

Attention NOUVELLE LICENCE !!! Shadowbox 2 n’est plus disponible gratuitement en  licence commerciale, et donc PictureFlow non plus, n’est plus disponible ici pour un usage commercial. Si vous désirez utiliser PictureFlow 3 sur un projet à but lucratif, envoyez moi une requête à osamwal[at]yaelle.com avec le type de PictureFlow utilisé (H135, 180…) et l’URL finale pour obtenir une licence commerciale. Ensuite si vous devez utiliser Shadowbox, vous devez vous acquitter de la licence Shadowbox commercial ($20 USD) ici. Et, de même si vous utilisez le FLV Video Player de Jeroen Wijering. (€ 30).

Download full package with « How to » and examples:

Télécharger PictureFlow 4.0 – Lire la Licence

Multilingue:

Cette version supporte tous les jeux de caractère : Arabe, Chinois, Coréen, Hébreu, Grec, Moldave, Japonais, Cyrillique, Martien etc…

Instructions:

– Décompresser cette archive sur votre disque en respectant bien les chemins des différents dossiers.

– Préparer vos miniatures pour qu’elles fassent 135 px de haut si vous utilisez pictureflow-H135.swf sinon, 180 pour pictureflow-H180.swf… etc (75px pour miniflow.swf). –> Mode portrait, paysage ou panoramique automatique. La largeur est maintenant recalculée en fonction de l’image (mini : 50 px).

– Copier les dans le répertoire “pictures”

– Préparer le fichier “xxx.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
  • titre = (Facultatif) « Titre de l’info-bulle »
  • desc = (Facultatif) « Légende de l’info-bulle »
  • 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.

– PictureFlow est interfacé avec Shadowbox pour afficher toutes sortes de media (Voir la liste ci-dessous) en grand format et en surimpression sur la page (Web 2.0 à mort !).

–> Media supportés par ShadowBox : JPEG, PNG, GIF, SWF, FLV, HTML and MPEG, WMV, AVI, MOV if Plugin.
–> FLV Player by Jeroen Wijering

Dans le répertoire « javascript », on trouve :

  1. “plug_flash.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 Microsoft à perdu son procès contre Eolas) et d’agir simplement sur tous les paramètres du FlashPlayer.
  2. « flashShadowboxInjector-base.js » Le programme qui gére shadowbox (Vous pouvez l’éditer pour changer les paramètres de shadowbox) (Voir toutes les possibilités)
  3. Dossier « shbox » : Tous les fichiers compressés nécessaires au fonctionnement de Shadowbox 2.0 .

Pour qu’ils soient actifs, on les inclus dans l’entête de votre pages en rajoutant entre les balises <head>, les lignes suivant la configuration de votre projet :

  1. Exemple basique (Sans utilisation de librairie JS)
    2.
  2. Exemple avec JQuery
    3.
  3. Exemple avec Mootools
    4.

Etc…

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

Nota : « window » permet de gérer le mode d’affichage du Player, remplacer ce paramètre par « transparent » pour un affichage… transparent 😉

FlashVars:

C’est dans les FlashVars que l’on va spécifier nos paramètres de personnalisation en les séparant par des “&” :

  • xmlfeed= URL du fichier xml qui contient les images
  • myColor = Valeur hexadécimal de la couleur de la bordure des images (ex : 0×0099FF 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 des bulles et du preloader
  • myBckgrnd = couleur en hexadécimal de l’arrière plan des images. (NEW in 2.5)
  • myAlpha = valeur décimale entre 0 et 1 du ratio de transparence de la bordure des images. (0 = invisible)
  • myDelay = Durée en ms du diaporama. Si non renseigné = Pas de diaporama
  • Tooltip = Booléen (true ou false) avec ou sans bulle
  • Shadowbox = Booléen (true ou false) avec ou sans Shadowbox (dans ce cas : fonction « getURL » active avec la balise « target ») (NEW in 3.0)
  • myScrollColor = Valeur hexadécimal de la couleur de la barre de navigation.  (NEW in 2.6)
  • myStep = Espacement des clips inactifs (en pixels)  (NEW in 2.6)
  • myOffset = Espace de chaque coté du clip actif (en pixels)  (NEW in 2.6)
  • Border = Aspect des coints des images. si « Border=square », les clips n’ont pas de bords arrondis  (NEW in 2.6)
  • Scrollbar = Comportement de la barre de navigation. Par défaut, elle est présente et masquée mais vous pouvez la désactiver (« Scrollbar=false ») ou la laisser apparente tout le temps (« Scrollbar=permanent »).  (NEW in 2.6)
  • myArrowColor = Valeur hexadécimal de la couleur des flèches de la scrollBar  (NEW in 2.7)
  • scaleDown = valeur en % de l’echelle des clips inactifs  (NEW in 2.7)
  • scaleUp = valeur en % de l’echelle du clip actif  (NEW in 2.7)
  • MaskScene = Booléen (true ou false) avec ou sans masque d’extrémité  (NEW in 2.7)
  • shownPicture = Entier, force une image en présentation au chargement  (NEW in 2.7)
  • myBckGrndImage = URL de l’image qui va servir d’arrière plan (NEW in 2.8)
  • autoFire = Ne sert plus à rien (Remplacé par autoLink image par image dans le XML)
  • superGlass = Booléen (true ou false) Réflection transparente. Active/Désactive le fond de la couleur de myBckgrnd derrière la reflection des images (Conseillé avec l’utilisation d’une image de fond perso (myBckGrndImage))  (NEW in 2.9)
  • descText = Booléen (true ou false) Avec ou sans Texte sous l’image 0  (NEW in 2.9)
  • mySubTextColor = couleur en hexadécimal de ce texte  (NEW in 2.9)
  • myLoadBarColor = couleur en hexadécimal de la barre de preload des images  (NEW in 2.9)
  • U_Flow = Booléen (true ou false) Parcours en U des image ou lineaire comme iTunes  (NEW in 2.9)
  • scrollbar_Y = Position en Y de la barre de navigation (Pixels)  (NEW in 2.9)
  • rollOverAnim = Booléen (true ou false) Deplacement des images au survol  (NEW in 2.9)
  • easeTime = Réel(sec) Durée des transitions  (NEW in 2.9)
  • clips2move = Entier : Nombre de clips à déplacer à chaque transition (Compromis entre la largeur de votre scène, les espacements des clips et les performances en 3D)  (NEW in 2.9)
  • crossdomain = URL pour charger le crossdomain.xml si les images sont sur un autre domaine que celui de PictureFlow
  • flickr = Booléen (true ou false) Chargement automatique des crossdomain de flickr (par défaut à false) (NEW in 3.0)
  • myTipColor = Valeur hexadécimal de la couleur des infobulles et du Preloader. (NEW in 3.0)
  • dynBlur = Booléen (true ou false) avec ou sans floutage des images en arrière plan. (NEW in 3.0)

NB : Omettre une de ces valeurs n’est pas très grave, j’ai laissé des valeurs par défaut dans le code.
Attention, la barre de navigation est désactivée dans MiniFlow.

Voila c’est tout ! Enjoy !

A propos de cet article

Vous lisez actuellement “PictureFlow 3.2 « Shadowbox 2 » Fr,” un article sur Osamwal Dezign – PictureFlow workshop

Date :
24 novembre 2008
Catégorie :
PictureFlow, Web Dezign
Firefox