PictureFlow 2.9 “U-Flow” US-En

PictureFlow is an AS2 implementation of iTunes7 Coverflow. It was developped to offer high 3D visual impact and compact interface to present on your web, a large collection of images. It is driven by an XML file in which you can tune your set of pictures and comments. Since 2.7 version, it is linked with the excellent Shadowbox from Michael J. I. Jackson which can overlay full size media when you click on it. You can download the instalation kits for free under Creative Common License (Read it !).

Last minor release 2.9.3:

More tooltip settings

Flickr crossdomains no more preloaded by default

NEW in 2.9:

– New U-Flow style: Less Apple, more 3D: Pictures run in a U
– New superGlass reflection style switch: No limit in your own custom image background
– New easeTime var to set your own transition duration
– New under main image desc text
– New crossdomain loader: Host your picture on other domain
– New RollOver animation switch: You can move picture by flying over them
– Now, You can set the y position of the scrollbar
– Now, you can set the number of picture you want to move for wider show (But beware of 3D performance impacts)
– Now, you can set the Load bar color to fit your site theme

And always:

– New License: Commercial use allowed if you post URL on Yaelle Blog 😉
– Load custom image BackGround
– Support Mootools JS library (Contribution of Guy Katz)
– “Shadowbox” to overlay multimedia contents: Supports: JPEG, PNG, GIF, SWF, FLV, HTML, MPEG, WMV, AVI, MOV (May require browser plugin).
– 6 image height support: 75, 90, 135, 180, 240, 340 px
– Automatic width to show portrait, landscape, panoramic or other format in the same gallery
– Gradient color masker on scene sides
– Adjustable clip scale
– ShownPicture var to force a clip to be shown at start
– Vectorized Adjustable Scrollbar
– Adjustable border (rounded or square) and bevel opacity can be set to 0
– Adjustable image pitch and offset
– New tooltips design with more text capacity
– MiniFlow: Ready to display 75*75 FlickR thumbnails
– LightBox switch: New FlashVar “lightBox=false” to disable it and active getURL function
– Background color: Now you can set your own background color via FlashVar “myBckgrnd”
– Scroller and MouseWheel interactivity to move images

Download full package with “How to” and examples:

Download PictureFlow 4.0 – 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 90, 135, 180, 240 or 340 pixels height, depends on witch pictureflow you use: pictureflow-H090.swf, pictureflow-H135.swf, pictureflow-H180.swf, pictureflow-H240.swf, pictureflow-H340.swf or 75*75 for miniflow.swf (FlickR Ready). Width is now 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”
• rel = Parameters for Shadowbox (See all possibilities)
• autoLink = Auto fire a link or a JS function in the html (ex : autoLink = “javascript:showMyDiv(‘div01’)” will fire showMyDiv function with the ‘div01’ parameter)
• target=”_self” or “_blank” (open URL in same or new browser window if lightBox is OFF)
• Title = “Title of the flyover”
• Desc = “Desc of the flyover”

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. “shadowbox.js”: The Shadowbox App.
3. In “scriptaculous” directory: “flashShadowboxInjector.js”, “shadowbox-prototype.js”, “prototype.js”, “scriptaculous.js”, “effects.js” that correspond to Scriptaculous/Shadowbox classes.
4. In “mootools” directory: “mootools-release-1.11.js”, “shadowbox-mootools.js”, “flashShadowboxInjector-mootools.js” that correspond to mooTools/Shadowbox classes.

To make them run, you should include this lines in the header of your page between the <head> :
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/shadowbox.css">

<!-- or other LightBox like style
<link rel="stylesheet" type="text/css" href="css/shadowbox-light.css">
-->

<!-- SWFOBJECT -->
<script type="text/javascript" src="javascript/plug_flash.js"></script>

<!-- Shadowbox with Script.aculo.us
<script type="text/javascript" src="javascript/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/scriptaculous/shadowbox-prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous/flashShadowboxInjector.js"></script>
<script type="text/javascript" src="javascript/shadowbox.js"></script>
<script type="text/javascript">window.onload = Shadowbox.init;</script>
-->

<!-- *** OR **** Beware! You must use only one library, else... -->

<!-- Shadowbox with mooTools -->
<script type="text/javascript" src="javascript/mootools/mootools-release-1.11.js"></script>
<script type="text/javascript" src="javascript/mootools/shadowbox-mootools.js"></script>
<script type="text/javascript" src="javascript/mootools/flashShadowboxInjector-mootools.js"></script>
<script type="text/javascript" src="javascript/shadowbox.js"></script>
<script type="text/javascript">window.addEvent('domready', function(){Shadowbox.init();});</script>

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

<script type="text/javascript">
RunFlash("url", "width", "height", "Background_Color", "window", "Id","FlashVars")
</script>

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 ScrollBar arrows .
• 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)
• lightBox = Boolean (true or false) With or Without lightBox 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)

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!