PictureFlow | Fr

Voici, PictureFlow 4 alias “Butterfly”. Le carrousel 3D le plus flexible et le plus abouti pour diffuser tout type de contenu multimédia sur votre site web. Aucune connaissance ou outil d’authoring Flash ne sont nécessaires pour l’installer. Vous chargez vos données grâce à un fichier XML ou dynamiquement grâce à AJAX ou PHP. Sa richesse de paramétrage vous permettra de personnaliser entièrement l’aspect et la dynamique de votre PictureFlow. 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.2 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.
L’essayer c’est l’adopter 🙂

Télécharger la version d’essai :

Télécharger PictureFlow 4 (Plus disponible 🙁 )

Licences:

45 € HT par site une fois pour toute, sans limite de temps (Dégressif si achat en nombre : voir option de licence en nombre ci dessous, sinon pourobtenir plus de licence, 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. (€59).

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 :

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 :

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, Votre site va bientôt prendre une nouvelle dimension !!

Liste des paramètres :

Ci dessous, la liste exhaustive des paramètres de PictureFlow : Nom de la variable (Type de variable |Valeur par défaut)

Paramétrage des données

  • xmlfeed (String | feed.xml): L’URL vers votre fichier XML ou votre script PHP (Attention, relatif à la page html et non au SWF !!! )
  • iShow (int | 4): L’ id de l’image présenté par défaut
  • ajaxMode (Boolean | false): Active / Désactive les fonctions Ajax pour piloter PF sans fichier XML
  • flickr (Boolean | false): Autorise PictureFlow à accéder aux images hébergé sur flickr©  (Charge toutes les politiques crossdomain flickr©)
  • crossdomain (String | “”): URL pour charger un crossdomain spécifique et permettre le chargement de contenu sur un autre domaine

Paramétrage de la scène

  • dynamicStage (Boolean | true): Active / Désactive la rotation 3D de l’ensemble de la scène
  • stageTeta (int | 0): Rotation de la scène on X (degrés)
  • subdesc (Boolean | true): Description sous l’image principale
  • Shadowbox (Boolean | true): Ouvre dans Shadowbox ou simple lien selon la valeur de la balise “Target” dans le XML (“_self” = même fenêtre, “_blank” =nouvelle)
  • UFlow (Boolean | true): Les image décrivent un parcours en U ou linéaire
  • flipMain (Boolean | true): Retournement de l’image principale au click (depuis 4.1.3)
  • nPhotoAnim (int | 10): Nombre d’images à animer autour du centre (optimisation charge processeur)
  • easeTime (Float | 1): Temps de transition des animations d’image (seconde)
  • xOffset (int | 30): Déport images d’arrière plan / l’image centrale en X (des 2 cotés), (pixels)
  • xStep (int | 200): Pas entre les images en X (des 2 cotés), (pixels)
  • zOffset (int | 200): Déport images d’arrière plan / l’image centrale en Z (des 2 cotés), (pixels)
  • zStep (int | 200): Pas entre les images en Z (des 2 cotés), (pixels)
  • yFlow (int | -70): Position du Flow en Y / Centre (pixels)
  • yScroll (int | 80): Position de la barre de défilement en Y / Centre (pixels)
  • ySub (int | 100): Position du texte de description en Y / Centre (pixels)
  • persistantStageW (int | 900): Évite à IE de perdre les dimensions de la scène lors d’un rechargement (pixels)(depuis4.1.0)
  • persistantStageH (int | 400): Évite à IE de perdre les dimensions de la scène lors d’un rechargement (pixels)(depuis4.1.0)
  • Blur (Boolean | false): Effet de flou dynamique sur la profondeur (depuis4.2.1)
  • myDelay (int | void): Vitesse de défilement du diaporama en ms (1000 = 1 sec) (Si non renseigné, diaporama désactivé) (depuis 4.2.1)
  • customBG (String | “bg.jpg”): URL pour charger une image d’arrière plan spécifique
  • decalBGX (int | 0): Décalage en X de l’image d’arrière plan spécifique/Coin Haut gauche du SWF
  • decalBGY (int | 0): Décalage en Y de l’image d’arrière plan spécifique/Coin Haut gauche du SWF

Paramétrage  des vignettes

  • TooltipOn (Boolean | true): Avec ou sans bulles descriptives
  • superGlass (Boolean | true): Reflet transparent (Conseillé si customBG utilisé)
  • myBckgrnd (Hex | 0xFFFFFF): Couleur du fond et des reflets des vignettes (Valeur hexadécimale: Attention “0x” avant !)
  • upMaskRatio (float | 1): Intensité du reflet en haut (0->1)
  • downMaskRatio (float | 0): Intensité du reflet en bas (0->1)
  • picHeight (int | 180): Hauteur des images (Post Processing) (pixels)
  • picRatio (float | 1.33):  ratio forcé des images d’arrière plan pour uniformiser l’aspect du carrousel (l/h) (Post Processing). (Nota : Ne concerne pas l’image central qui s’affiche selon son ratio natif) (pixels)
  • flowTeta (int | 60): Rotation des images en Y (Nota : Ne concerne pas l’image central toujours à 0°)(degrés)
  • CornerRadius (int | 10): Rayon d’arrondi des images (pixels)
  • myThickness (int | 3): Épaisseur de la bordure des images (pixels)

Police

  • myPolice (String | Verdana): Nom de la police (Attention à n’utiliser que des polices communes (voir bonne pratique html))
  • myTitleSize (int | 25): Taille du titre de la description (pt)
  • myTitle2Size (int | 16): Taille du titre2 de la description (pt)
  • myDescSize (int | 12): Taille du texte de description (pt)
  • myTitle2Y (int | 32): Position de Title2 en Y (px)
  • myDescY(int | 55): Position de Desc en Y (px)
  • mySubTextAlign (String | “Left”): Alignement texte dans les descriptions
  • TooltipClickText1 (String | “Click”): Texte par défaut dans bulle descriptives image centrale (Ligne 1)
  • TooltipClickText2(String | “to go”): Texte par défaut dans bulle descriptives image centrale (Ligne 2)

Couleurs

  • myColor (Hex | 0x000000): Couleur bordures (Valeur hexadécimale: Attention “0x” avant !)
  • myDefaultColor (Hex | 0xFFFFFF): Couleur par défaut image de substitution si non chargée  (Valeur hexadécimale: Attention “0x” avant !)
  • myTipColor (Hex | 0x767467): Couleur du fond du Loader et des bulle descriptives (Valeur hexadécimale: Attention “0x” avant !)
  • myTextColor (Hex | 0xFFFFFF): Couleur du texte des Loader et  bulle descriptives (Valeur hexadécimale: Attention “0x” avant !)
  • mySubTextColor (Hex | 0xFFFFFF): Couleur du texte des descriptions (Valeur hexadécimale: Attention “0x” avant !)
  • myScrollColor (Hex | 0x767467): Couleur barre de défilement (Valeur hexadécimale: Attention “0x” avant !)
  • myArrowColor (Hex | 0xFFFFFF): Couleur des flèches de la barre de défilement (Valeur hexadécimale: Attention “0x” avant !)
  • myLoadBarColor (Hex | 0x0099FF): Couleur de la barre de chargement (Valeur hexadécimale: Attention “0x” avant !)
  • upBgColor (Hex | 0xFFFFFF): Couleur 1 du fond dégradé (Valeur hexadécimale: Attention “0x” avant !)
  • downBgColor (Hex | 0xFFFFFF): Couleur 2 du fond dégradé (Valeur hexadécimale: Attention “0x” avant !)

Transparences

  • myAlpha (float | 1): Canal alpha de la bordures (0->1)
  • myAlphaScroll (float | 1): Canal alpha de la barre de défilement(0->1)
  • myAlphaTool (float | 0.5): Canal alpha du Loader et des bulle descriptives (0->1)
  • myAlphaBg (float | 1):Canal alpha du fond (0->1) (Réglez sur 0 pour faire disparaitre le fond en cas de SWF “transparent”

Articles récents

Commentaires récents

Pages

Cloud tags

AS3 CoverFlow PictureFlow PrestaFlow Prestashop