PictureFlow 3.2 « Shadowbox 2 » US-En

PictureFlow

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


Get Adobe Flash player

Beware, this version you see here is the new PictureFlow 4.0 « Butterfly »

Here comes the New PictureFlow to be delivered for your terrific web projects. Now, this major release is fully compatible with the excellent Shadowbox 2.0 of Michael J. I. Jackson (This fantastic piece of JS can overlay any media over your page when you click a link). I have totally rewrote the way it was triggered by PictureFlow. So now, the new injector is « agnostic free ». You can run it with any of your favorite JS library (Mootools, JQuery, Prototype, YUI, EXT…Etc… or no library at all if you want. You are free to use or adapt it on what platform you want. Also, there are some new features on the Flow, like new « Bubble design » tooltips with a more intelligent behavior (No more hidden by the limit of the scene), like the new blur effect for a more impressive 3d experience and then, like some cosmetic changes on the loader and the scrollbar.

You can download the installation kits for free under Creative Common License.

Beware NEW LICENSE RULES!!! Due to new Shadowbox commercial license, PictureFlow here, is no longer available for commercial purposes. If you want to use it in a commercial project, send me a request for an individual license (osamwal[at]yaelle.com) specifying the type (H…) you need and the final URL where it will be installed. Then, if you want to use shadowbox, you will have to purchase the shadowbox commercial license ($20 USD) here. And same, if you want to use the FLV Player by Jeroen Wijering. (€ 30).

Download full package with « How to » and examples:

Download PictureFlow 4 – Read the License

Multilingual:

This version supports foreign Charset like Arab, Chinese, Corean, Hebrew, Japanese, Russian, Martian etc…

Instructions:

– Unzip this package on your website or on your disk.

– Prepare your images as they are 240, 180 or 135 pixels height, depends on witch pictureflow you use: pictureflow-H240.swf, pictureflow-H180.swf, pictureflow-H135.swf, or 75*75 for miniflow.swf. Width is automatic (Calculated with the source) (mini = 50 px).

– Copy them in the directory « pictures »

– Prepare the XML file specifying for each line:

  • Image = « image URL (relative or absolute) »
  • Action = « destination URL when one clicks on the image when it is active »
  • Title = « Title of the flyover »
  • Desc = « Desc of the flyover »
  • autoLink = (Optional) Auto fire a link or a JS function in the html (ex : autoLink = « javascript:showMyDiv(‘div01’) » will fire showMyDiv function with the ‘div01’ parameter)
  • height = (Optional) Shadowbox height (Pixels)
  • width = (Optional) Shadowbox width (Pixels)
  • target= (Optional) « _self » or « _blank » (open URL in same or new browser window if lightBox is OFF)

You can put as many rows as there are pictures to display.

– PictureFlow is now fully interfaced with Shadowbox developed by Mickael Jackson (Not a joke) to overlay large-format media on the page (Web 2.0 to death!). Thus, the package now includes a « javascript » which contains javascript to call in your pages and directories « css » and « images » that contain the stylesheet and images of Shadowbox so that everything works.

–> ShadowBox supports : JPEG, PNG, GIF, SWF, FLV, HTML and MPEG, WMV, AVI, MOV if Plugin.
–> FLV Player by Jeroen Wijering

In the « javascript » folder are:

  1. “plug_flash.js” which allows you to include a proper SWF as a web page (including IE7 where we will avoid the so-called « Click to activate this control « as unnecessary as boring since Microsoft lost his lawsuit against Eolas), and simply act on all parameters FlashPlayer.
  2. « flashShadowboxInjector-base.js » to interact between PictureFlow and Shadowbox. You can edit this file to set the Shadowbox options (See all possibilities)
  3. « shbox » folder : all required and shrinked JS for Shadowbox.

To make them run, you should include this lines in the header of your page between the <head> :

– When you want to add a PictureFlow on your page, just write in the body:

FlashVars:

It is in FlashVars that we will specify our custom settings, separated by « & »:

  • xmlfeed= URL of xml file that contains image
  • myColor = Hex value color of image border(ex: 0 × 0099FF for blue) (Remember the 0x at the number, which forces Flash to read the numbers in hexadecimal).
  • myTextColor = Ditto for the text of the tooltips and the loader
  • myBckgrnd = Ditto for the scene background. (NEW in 2.5)
  • myAlpha = decimal value between 0 and 1, ratio transparency of the bevelled border.
  • myDelay = Duration in ms, between 2 images of the slideshow. If blank or nul: No autostart (NEW in 2.4)
  • Tooltip = Boolean (true or false) With or Without tooltips (NEW in 2.4)
  • Shadowbox = Boolean (true or false) With or Without Shadowbox and getURL function ON (NEW in 2.5)
  • myScrollColor = Hex value color of scrollBar. (NEW in 2.6)
  • myStep = Inactive clips pitch (in pixels) (NEW in 2.6)
  • myOffset = Active clip pitch (en pixels) (NEW in 2.6)
  • Border = Image border aspect. If « Border=square » -> Square images (NEW in 2.6)
  • Scrollbar = ScrollBar behaviour. No ScrollBar -> (« Scrollbar=false ») or Always ON -> (« Scrollbar=permanent »). (NEW in 2.6)
  • myArrowColor = Hex value color of scrollBar arrow (NEW in 2.7)
  • scaleDown = % scale of inactive clips (NEW in 2.7)
  • scaleUp = % scale of active clip (NEW in 2.7)
  • MaskScene = Booléen (true or false) With or Without masker (NEW in 2.7)
  • MaskWidth = Deprecated (Now automatic with Stage.width)
  • shownPicture = force to show a picture at start (NEW in 2.7)
  • myBckGrndImage = Background Image URL (NEW in 2.8)
  • autoFire = Deprecated (Replace with autoLink in the XML)
  • superGlass = Boolean (true or false) Transparent reflection style (Advised with custom image background (myBckGrndImage)) (NEW in 2.9)
  • descText = Booléen (true or false) under main image desc text (NEW in 2.9)
  • mySubTextColor = Hex: Under main image desc text color (NEW in 2.9)
  • myLoadBarColor = Hex: LoadBar color (NEW in 2.9)
  • U_Flow = Boolean (true or false) Pictures run in a U or linear run (NEW in 2.9)
  • scrollbar_Y = Scrollbar Y positon (Pixels) (NEW in 2.9)
  • rollOverAnim = Boolean (true or false) RollOver picture navigation (NEW in 2.9)
  • easeTime = Float(sec) Easing time (NEW in 2.9)
  • clips2move = Int : Number of clips to move in each transition (NEW in 2.9)
  • crossdomain = crossdomain.xml URL to load pictures on other domain (Ex: FlickR, Picassa…) (Note : MiniFlow is ready for FlickR) (NEW in 2.9)
  • flickr = Boolean (true or false) Automatic load of Flickr crossdomain (default=false) (NEW in 3.0)
  • myTipColor = Hex value color of the tooltips and loader background.  (NEW in 3.0)
  • dynBlur = Boolean (true or false) With or without Blur effect.   (NEW in 3.0)

Note: Omit one of those values is not very important, I let default values in the AS2 code.
Some functions and scrollBar are inactive in MiniFlow.

That’s it! Enjoy!

A propos de cet article

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

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