PictureFlow 2.8 (EnglishTutorial)

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. I provide also previous version 2.6 with LighBox2. You can download the instalation kits for free under Creative Common License (Read it !).

NEW in 2.8:

– Load custom image BackGround
– add 340 px image height support
– Support Mootools JS library (Contribution of Guy Katz)
– Automatic getURL option when image comes to front

NEW in 2.7:

– « Shadowbox » replacing « LightBox » to overlay multimedia contents. Now supports: JPEG, PNG, GIF, SWF, FLV, HTML, MPEG, WMV, AVI, MOV (May require browser plugin).
– 4 image height support: 75, 135, 180, 240 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

And always:

– 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
– New 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:

PictureFlow 2.8 is no longer available. New version 4.0 here

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 135, 180, 240 or 340 pixels height, depends on witch pictureflow you use: 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 = 150 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)
• target= »_self » or « _blank » (open URL in same or new browser window if lightBox is OFF)
• Title = « Part of the flyover »
• Desc = « Legend 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 included

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 = Width in pixels of masker (= to scene) (NEW in 2.7)
• shownPicture = force a shown picture (NEW in 2.7)
• myBckGrndImage = Background Image URL (Note : in this mode « Border=square » forced) (NEW in 2.8)
• autoFire = Booléen (true or false) With or Without automatic getURL (No click) (NEW in 2.8)
  

Note: Omit one of those values is not very important, I let default values in the AS2 code.
Functions 9 -> 21 and scrollBar are inactive in MiniFlow.

That’s it! Enjoy!