PictureFlow | US-En
Here is PictureFlow version 4 aka « Butterfly », the ultimate Flash/Javascript carousel for displaying all kind of media on your web: Pictures (jpg, gif, png…), videos (flv, mov, avi, mpeg, mp4…), html, swf… in an impressive 3D effect of your own as smooth as the new flash 3D engine can.
Implementation is simple to do with basic knowledges in html/Javascript (Code Assistant below). You can set your own custom PictureFlow with a lot of variables (list below).
First, what you can’t see, the code was rewritten PictureFlow from scratch. This version has nothing to do with the old AS2. Now is the ActionScript 3 and all the clips are generated dynamically by the code, it allows far greater flexibility and transition, can bring down the weight of the SWF to 22 KB (Yes, there is no error, all within 22 KB, barely more than a JPEG thumbnail …). Above all, there is only one PictureFlow for all image sizes. The images are loaded (or replaced by a default image if loading failed), then resized to the height you want through a FlashVars parameter.
Then to the most visible, the arrival of the new native 3D FlashPlayer 10 classes allow me to develop a new 3D engine much more efficient and especially more flexible. All images have a parameter of rotation (degree) and coordinates X, Y, Z adjustable, allowing you to reproduce the famous Cover Flow © Apple © here as (historically) or any other carousel of images following your own dynamic. The possibilities are endless: Let your imagination run wild.
Finally, the JavaScript interface level, PictureFlow now loads the latest version of Shadowbox 3 and deals with the excellent SWFObject 2.2 to detect and automatically upgrade your visitors FlashPlayer if they are not in version 10.0.22 (Minimum version required for 3D) and especially to keep your page « Google friendly » thanks to the alternative content to flash animations and compliance with the W3C standards.
Download trial version :
Download PictureFlow 4 (No more available)
Licenses:
€45 per site. (rebate if several: Choose your best license below or contact me at osamwal[at]yaelle.com). The final versions only work on one site but can not be locked remotely via the license server unlike the public versions (Incidentally, there are some who will be surprised. … You are now advised : )).
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. (€59).
Install :
– Unpack this archive to your hard disk respecting the paths of many different folders.
– Prepare your thumbnails (The original size is not critical since the image will be resized once loaded but remember to optimize the weight of your images to save bandwidth and nerves of your visitors).
– Copy them to the directory « pictures »
– Prepare the file « feed.xml » specifying for each line:
- image = image URL (relative or absolute)
- action = Destination URL when you click on the image when it is active
- title = (Optional) Title of the ToolTip
- title2 = (Optional) subtitle tooltip
- desc = (Optional) Text description multiline in Subdesc
- autoLink = (Optional) Call one of your JavaScript functions in the page when the image comes first (eg autolink = « javascript: showMyDiv ( ‘div01’) » to activate showMyDiv function and pass the parameter ‘div01’)
- height = (Optional) height of Shadowbox in the specified value (pixels)
- width = (Optional) width of Shadowbox in the specified value (pixels)
- target = (Optional) target action « _self » or « _blank » (new or same window) or another target, if Shadowbox is disabled (Useless if Shadowbox is active)
You can put as many lines as you have images to display.- Uploaded on your favorite web server, make simmer over low heat for 10 minutes, Ding is Ready!
Personalization – Your Touch;):
No need to have Flash. So, everything is configurable directly in the html code with SWFObject. all the configuration settings are managed by what are called FlashVars (Variables, injected in text mode to FlashPlayer when loading).
To help you integrate SWFObject in your web page with the list of all FlashVars, run:
PictureFlow html & Javascript code Generator
you’ll get the source code of a nice HTML page that you can edit at leisure in your favorite editor.
It’s your play now, you are now able to put depth in your web!
List of parameters:
The FlashVars allow you to customize your PictureFlow with your own parameters without complicated Flash authoring and Flash or Flex development tools. It’s quite simple, you choose a FlashVar name in the list and you set your value. Click « Add » to add an other line of FlashVar and repeat the same operation till your PictureFlow is completly tweaked 😉
Here below, the exhaustive list of PictureFlow tweaks: name(Type of Value | Default value)
Data settings
- xmlfeed (String | feed.xml): The path to your XML file or PHP script (relative to the html page)
- iShow (int | 4): The picture id you want to be shown at start
- ajaxMode (Boolean | false): Turn on the Ajax functions to drive PF and disable the XML feed
- flickr (Boolean | false): Allow flickr© hosted photo loading (Load all flickr© crossdomain policies)
- crossdomain (String | « »): URL to load specific crossdomain policy XML to allow loading datas on other domain
Stage settings
- dynamicStage (Boolean | true): Enable/disable mouse driven 3D scene rotation
- stageTeta (int | 0): Initial scene rotation on X (degrees)
- subdesc (Boolean | true): Description under main picture
- Shadowbox (Boolean | true): Shadowbox or Simple Link combined with « Target » Tag in the XML (« _self » = same browser window, « _blank » = new)
- UFlow (Boolean | true): Pictures run in a U or linear run
- flipMain (Boolean | true): Flip the main picture when click (Since 4.1.3)
- nPhotoAnim (int | 10): Number of pictures near center to be animated (for CPU optimization)
- easeTime (Float | 1): Easing time transition (seconds)
- xOffset (int | 30): Main picture gap on X axe (both sides),(pixels)
- xStep (int | 200): Stack picture pitch on X axe (both sides),(pixels)
- zOffset (int | 200): Main picture gap on Z axe (both sides),(pixels)
- zStep (int | 200): Stack picture pitch on Z axe (both sides),(pixels)
- yFlow (int | -70): Y Flow Position / Center (pixels)
- yScroll (int | 80): Y ScrollBar Position / Center (pixels)
- ySub (int | 100): Y Desc text Position / Center (pixels)
- persistantStageW (int | 900): IE lost of Stage dimensions bug hack (pixels)(Since 4.1.0)
- persistantStageH (int | 400): IE lost of Stage dimensions bug hack (pixels)(Since 4.1.0)
- Blur (Boolean | false): Dynamic blur effect (Since 4.2.1)
- myDelay (int | void): SlideShow delay in ms (1000 = 1 sec)(if blank, no slideshow) (Since 4.2.1)
- customBG (String | « bg.jpg »): path to custom image background
- decalBGX (int | 0): Custom background image X position /SWF top Left corner
- decalBGY (int | 0): Custom background image Y position /SWF top Left corner
Picture settings
- TooltipOn (Boolean | true): With or Without tooltips
- superGlass (Boolean | true): Transparent reflection style (Advised with custom image background)
- myBckgrnd (Hex | 0xFFFFFF): Reflection style Color (Hex Number: Don’t Forget « 0x »before!)
- upMaskRatio (float | 1): Up reflection rate (0->1)
- downMaskRatio (float | 0): Down reflection rate (0->1)
- picHeight (int | 180): Rendered picture height for Post Processing(pixels)
- picRatio (float | 1.33): Rendered stack picture size ratio (W/H) for Post Processing. (Note: Doesn’t concern main picture which keeps its native ratio) (pixels)
- flowTeta (int | 60): Stack Picture Rotation on Y (Note: Doesn’t concern main picture always at 0°)(degrees)
- CornerRadius (int | 10): Picture corner radius (pixels)
- myThickness (int | 3): Border line thickness (pixels)
Font
- myPolice (String | Verdana): Font name
- myTitleSize (int | 25): Subdesc title size (pt)
- myTitle2Size (int | 16): Subdesc title2 size (pt)
- myDescSize (int | 12): Subdesc desc size (pt)
- myTitle2Y (int | 32): Title2 Y position (px)
- myDescY(int | 55): Desc Y position (px)
- mySubTextAlign (String | « Left »): SubText Alignement
- TooltipClickText1 (String | « Click »): Default center image tooltip text (line 1)
- TooltipClickText2(String | « to go »): Default center image tooltip text (line 2)
Colors
- myColor (Hex | 0x000000): Border line color (Hex Number: Don’t Forget « 0x »before!)
- myDefaultColor (Hex | 0xFFFFFF): Default fake picture color when not loaded (Hex Number: Don’t Forget « 0x »before!)
- myTipColor (Hex | 0x767467): Loader and Tooltips color (Hex Number: Don’t Forget « 0x »before!)
- myTextColor (Hex | 0xFFFFFF): Loader and Tooltips text color (Hex Number: Don’t Forget « 0x »before!)
- mySubTextColor (Hex | 0xFFFFFF): Subtext text color (Hex Number: Don’t Forget « 0x »before!)
- myScrollColor (Hex | 0x767467): Scroolbar main color (Hex Number: Don’t Forget « 0x »before!)
- myArrowColor (Hex | 0xFFFFFF): Scroolbar arrow color (Hex Number: Don’t Forget « 0x »before!)
- myLoadBarColor (Hex | 0x0099FF): Load bar color (Hex Number: Don’t Forget « 0x »before!)
- upBgColor (Hex | 0xFFFFFF): Up background gradient color (Hex Number: Don’t Forget « 0x »before!)
- downBgColor (Hex | 0xFFFFFF): Down background gradient color (Hex Number: Don’t Forget « 0x »before!)
Transparency
- myAlpha (float | 1): Border line alpha channel (0->1)
- myAlphaScroll (float | 1): Scroolbar alpha channel (0->1)
- myAlphaTool (float | 0.5): Tooltips and loader alpha channel (0->1)
- myAlphaBg (float | 1): Background alpha channel (0->1)
