Picture Platform AS2 documentation
 
The help documentation will be updated and improved with customer feedback.

* Before starting, check to see if you should download the latest Readme.htm file from the server and replace this one (version on right top)
* Check the latest FAQ, tips and help topics on the FORUM

Quick Start

When you receive the product you will receive a .zip file. The zip file will contain the following files

  • pictureplatform_as2.fla (+ swf)
  • preview.fla (+ swf)
  • contents.xml
  • /caurina/ folder
  • index.htm, style.css, swfobject.js, AC_RunActiveContent.js
  • Readme.htm

Do the following steps to start using Picture Platform AS2;

  1. Unzip the .zip file.
  2. Open Flash 8 (or higher).
  3. Open pictureplatform_as2.fla.

The way the Picture Platform AS2 works is as follows;

You can edit the content.xml files to create all the visuals you need. PP is set up so you won't need to edit the .fla file. In the xml file you can edit settings and the categories for the picture galleries. Of course you can edit the .fla to your needs. And you can also use the preview.fla/swf as a container to load PP externally, that way you can hook up PP quickly in any website without having to edit it within another .fla.

Quick guide;

  1. Make sure all your pictures are in the appropriate/sepperate folders, one folder for each cattegory (both thumbnail and high resolution images)
  2. Open the contents.xml;
    Remove existing or create as many <cat> xml nodes as you need to display categories. For example the first <cat> node is as follows
    <cat category="1" Name="MIRO SANTANA Photography" Folder="MIRO" 
    rows="3"
    cols="3"
    jumpcolsauto="false"
    jumpcols="1"
    Xdis="100"
    Ydis="50"
    XdisOffset="25"
    YdisOffset="25" stylejump="6"
    stylethumbsmovein="1"
    stylethumbsmoveout="1"
    styleHRnextprev="3"
    >
    Now make sure you verify these three things;
    - Verify you have the category numbers correct in the xml nodes attribute category="1" , category="2" and so on
    - Verify the "Name" xml node attribute of your categories Name="MIRO SANTANA Photography" and so on.
    These texts will be displayed on the category buttons.
    - Verify the names of the folder xml node attribute, they need to be the folders where your category pictures are placed, Folder="PictureFolder1", Folder="PictureFolder2" etc

  3. Remove existing or create as many <image> xml nodes as you need to display images in a category. <image> node look like this;
    		<image>
    <imagename>miro1.jpg</imagename>
    <imagetitle>IMAGE DESCRIPTION</imagetitle>
    <imagetext><![CDATA[Lorem ipsum dolo]r sit amet etcerera ...]]></imagetext>
    <imagenamethumbnail>miro1_thumb.jpg</imagenamethumbnail>
    </image>
    Now make sure you verify these things;
    - node <imagename> contains the high resolution file name of the picture
    - node <imagetitle> contains the picture header/title displayed when you hover your mouse over a high resolution image
    - node <imagetext> contains the picture description displayed when you hover your mouse over a high resolution image
    - node <imagenamethumbnail> contains the thumbnail file name of the picture

    imagetitle and imagetext may contain special characters and can contain html formatted texts so you can use hyperlinks and such in your text.

  4. On the top of the XML file, adjust any values in Nodes <parameters> and <parametersextra> to your liking. These are the default values for PP.
  5. ( Optional: If you like, adjust any of the parameters from <parameters> in the <cat> nodes so that you can override visuals for a specific category. See the example above for the Miro category, where "cols" (columns) "rows" "jumpcolsauto" "jumpcols" and so on have been given values which will override the default values of PP.)

  6. Now you're ready to implement the PP in flash. Either copy the "PICTURE PLATFORM" MovieClip from the pictureplatform_as2.fla to your own fla (don't forget to also copy-paste the [PICTURE PLATFORM clips] folder) or use the LoadMovie method to externally load it in your own works, just as the preview.fla sample does.


> TOP <

 
 
Component Parameters.

In the XML file you have a large number of parameters which you can configure. All the parameters in xml node <parameters> are default values for PICTURE PLATFORM. You can also specify individual values for each category within the <cat> nodes. The parameters in node <parametersextra> are applied for the whole of PICTURE PLATFORM.

rows Number of visible thumbnail rows
columns Number of visible thumbnail columns
Xdis Horizontal base distance between thumbnails
Ydis Vertical base distance between thumbnails
XdisOffset Horizontal base inclination skew-to-middle distance between thumbnails (pushing inwards to the upper rows. Basically; the higher the value, the more it will push towards the middle point in upper row)
YdisOffset Vertical base inclination skew-outward distance between thumbnails (forcing drop movement distance on mouse move. Basically; the higher the value, the more the platform will tilt up and down)
Xincline Horizontal inclination factor (horizontal mouse movement. Basically; the higher the value, the less the platform will tilt when moving horizontally with your mouse)
Yincline Vertical inclination factor (vertical mouse movement. Basically; the higher the value, the less the platform will tilt when moving vertically with your mouse)
Xshift Horizontal extra tilt (Basically, high values (positive or negative) will create a curve push-pull force to either left or right when moving horizontally). Best to keep between -10 to 10
topscale Top row thumbnails scale
bottomscale Bottom row thumbnails scale
thumbscale General thumbnail-image scale, finetune categories or complete PP album if need be.
thumbwidth If you specify a size larger then 0, all thumbnails (original) widths will be set (resized) accordingly, and followingly rescaled by topscale and bottomscale.
topmasking Top row thumbnail masking factor (between 0 and 1). Masking creates the visual of thumbnails showing only partly by default and show everything when moving your mouse over them.
bottommasking Bottom row thumbnail masking (between 0 and 1). Masking creates the visual of thumbnails showing only partly by default and show everything when moving your mouse over them.
topYmove Top row thumbnail vertical move when moving your mouse over them.
bottomYmove Bottom row thumbnail vertical move when moving your mouse over them.
jumpcolsauto Automatically jump the number of columns in current category.
jumpcols If not automatically, number of columns to skip to go to forward or backward in a category. In general you probably will want to use the same value as "columns" so you can navigate from one bunch to the next bunch of pictures in a category. But you can also use for example "2" which will make a category jump only/exactly 2 columns backward or forward on a jump (this you can use in combination with small jump-time values... see the "timetween---" parameters on the bottom).
jumpYpos Default vertical position of the rewind and forward jump buttons on the left and right of the PP thumbnails
jumpXpos Optional extra distance for horizontal position of the rewind and forward jump buttons. ... 0 is NOT the center of PP, but represents the left and right side exaclty next to the first and last thumbnails
rewfwalpha Alpha transparency of rewind and forward jump buttons
rewfwalphaover Alpha transparency of rewind and forward jump buttons on mouse over
backalpha Thumbnails background alpha transparency
backalphaover Thumbnails background alpha transparency on mouse over
backcolor Thumbnails background color
bordercolor Thumbnails border color
HRbackcolor High resolution image background color
imagealpha Default thumbnail mage transparency
imagealphaover Thumbnail mage transparency on mouse over
doborder Add border to thumbnail images
borderwidth Thumbnail images border width
borderwidthover Thumbnail images border width on mouse over
borderalpha Thumbnail images border transparency
borderalphaover Thumbnail images border transparency on mouse over
HRmovewithinstage If it does not fit when zoomed in / opened, move high resolution image to stage center
HRfitwithinstage If it does not fit when zoomed in / opened, fit (scale down) high resoltution image within stage size
HRfittostage If it does not fit when zoomed in / opened, fit (scale down) high resoltution exactly to stage size, depending on either larger width or larger height to fit (this will cut the sides or top/bottom to fit)
HRborderwidth High resolution image border width
HRshownextprevious Show next and previous buttons when opening high resolution image
HRshowclose Show top right close button with high resolution image
HRcloseonimageclick Close high resolution image on click
HRfixednextprevpos Use fixed positions for next and previous (high resolution image) buttons
HRfixedclosepos Use fixed positions for close (high resolution image) button
HRnextprevdistance Distance for next and previous (high resolution image) buttons
HRclosedistance Distance for close (high resolution image) button
HRprevXpos Fixed horizontal position for (high resolution image) button previous
HRprevYpos Fixed vertical position for (high resolution image) button previous
HRnextXpos Fixed horizontal position for (high resolution image) button next
HRnextYpos Fixed vertical position for (high resolution image) button next
HRcloseXpos Fixed position close button high resolution image
HRcloseYpos Fixed position close button high resolution image
HRbuttonsalpha Next/previous/close (high resolution image) buttons transparency
HRcloseimagealpha High resolution centered cross and [click to close] "text" transparency when mouse over
HRcloseimagetext Show or hide the centered [click to close] "text" when mouse over (high resolution image)
HRblackstagealpha Black stage transparency when opening a high resolution image
doglossy Add a glossy effect to thumbnails
doblur Use a blur on thumbnails
topblur Top row thumbnails blur
bottomblur Bottom row thumbnails blur
balldisfr Metal balls distance fraction
minhoverdistance Thumbnail minimum vertical hovering motion distance, creating a water wave effect
maxhoverdistance Thumbnail maximum vertical hovering motion distance, creating a water wave effect
minhoverspeed Thumbnail minimum vertical hovering motion speed, creating a water wave effect
maxhoverspeed Thumbnail maximum vertical hovering motion speed, creating a water wave effect
dontmove Don't allow thumbnails to move
doautoplay Add the option to auto play a category
doautotime Show image time in seconds before jumping to next image
doautoremember Remember the status of auto playing if interrupting or jumping playback (e.g by a viewer clicking next/previous buttons)
doautostart When clicking the do auto play button, start right away from last clicked thumbnail in the current category or fist one if nothing was selected yet
shadowpoint Thumbnail shadow distance
shadowmovefactor Thumbnail shadow tracing movement factor. This will make shodows go less or more up and down with the image thumbnails
shadowsqueeze Thumbnail shadow vertical squeezed distance (basically pushing them more towards each other vertically)
shadowalpha Thumbnail shadow alpha transparency
xoffset PP horizontal offset distance. You can use this to move the whole PP a little to the right or left. Even if PP is for example differently placed and updated/repositioned after a browser resize then xoffset will still be re-aplied (remember, for example by default PP will be stage-center placed)
yoffset PP vertical offset distance You can use this to move the whole PP a little up or down. Even if PP is for example differently placed and updated/repositioned after a browser resize then yoffset will still be re-aplied.(remember, for example by default PP will be stage-center placed)
categoryfixedpos Use fixed positions for PP category menu
categorymenuXpos (if "categoryfixedpos" not 'true') PP category menu relative horizontal position
categorymenuYpos (if "categoryfixedpos" not 'true') PP category menu relative vertical position
categoryshowvertical PP create category menu vertically
categorycentervertical PP create category menu vertically center aligned
categorymatchwidths PP category menu buttons with all the same widths if vertically center aligned
categoryXposiscenter PP create category menu horizonally centered (so you can center it above or below the thumbnail platform when setting positions not fixed)
categoryheight PP category menu button height
categoryspacing PP category menu button spacing
categorynrbeforetext PP category menu button numbers (of total thumbnails per category) before the name of the category (set false for 'after the name')
addjumpnrs PP create category number buttons to jump categories
jumpnrsfixedpos Fix positions for jump number buttons to either category or stage spot
jumpnrsfixtocategory Fix jump number buttons position to category menu
jumpnrsfixtoauto Fix jump number buttons position to category menu next to auto play
jumpnrsfixtoPP Fix jump number buttons position to PP
jumpnrsXposiscenter Align jump number buttons centered
jumpnrsalignX PP jump number buttons icon horizontal position plus jumpnrsXpos
0 = left, 1 = stage center, 2 = right
jumpnrsalignY PP jump number buttons icon vertical position plus jumpnrsYpos
0 = stage top, 1 = stage center, 2 = stage bottom
jumpnrsXpos PP jump number buttons icon relative horizontal position
jumpnrsYpos PP jump number buttons icon relative vertical position
autoplayfixedpos Fix positions for the autoplay button to either category or stage spot
autoplayfixtoPP Fix autoplay button position to PP center point
autoplayfixtocategory Fix autoplay button position to category
autoplayalignX PP autoplay button horizontal position plus autoplayXpos 0 = left, 1 = stage center, 2 = right
autoplayalignY PP autoplay button vertical position plus autoplayYpos0 = stage top, 1 = stage center, 2 = stage bottom
autoplayXpos PP autoplay button relative/extra horizontal position
autoplayYpos PP autoplay button relative/extra vertical position
stylecategory Style of the category buttons mouse over animation (0= color, 1 = color+masking)
stylejump Style of the jump columns buttons (0,1,2,3 ... different visuals)
styleHRnextprev Style of the high resolution next previous buttons (0,1,2,3, 4 ... different visuals)
styleHRclose Style of the high resolution close button (0,1,2 ... different visuals)
stylethumbsmovein Style of the thumbnails movement when creating
stylethumbsmoveout Style of the thumbnails movement when removing
  <!-- 0 is default, no movement when generating or removing -->
<!-- 1 movement from or to center of PP -->
<!-- 2 movement from side, one direction -->
<!-- 3 movement from side, both directions -->
<!-- 4 movement from top, one direction -->
<!-- 5 movement from top and bottom, both directions -->
thumbsmoveXdis Thumbnails movement distance horizontal when generating or removing
thumbsmoveYdis Thumbnails movement distance vertical when generating or removing
frout Multiplication for out movement to set directions (or less/more speed)
flipmoverew Flip jump back columns movement (when going backward or forward in a category, make the generating or removing movement directions go oposite ways)
fontcategory Font of the category buttons (by default one font used, you can edit .fla to include other fonts)
adjustdepthtomouse Adjust thumbnails depths to mouse left and right movement (this will swap the stacking order of thumbnails when the mouse passes the middle horizontal point of PP)
timetweeninit time tween thumbnails creation
timetweentostartsizeimg time tween thumbnails after image loaded
timetweenmouseover time tween thumbnails mouse over
timetweenmouseout time tween thumbnails mouse out
timetweenthumbsaway time tween thumbnails scale away
timetweenthumbsback time tween thumbnails scale back
HRtimetweeninit time tween high resolution image back to loading size This tween will be overriden as soon as HR is loaded
HRtimetween time tween to full high resolution image
HRtimeclose time tween close high resolution image
HRtimeprevnext time tween previous or next high resolution image
HRtimeprevnextauto time tween previous or next high resolution image in auto play mode
timejumpcolumn time tween jump next prefious column
HRprevnextsizebgtosmall Tween black HR background back to tiny size on next-prev button click
HRprevnextalways on't do any automated jump columns on end or start of HR viewing but imediately show next or previous image and adjust columns only when closing. Also do this when in auto play mode
hideforswf Hide black bars and balls for loaded swf files
HRhideforswf Hide black background for loaded 'high resolution' swf files
   
  PP visuals not individually per category
startcategory PP start category
setXtomiddle set PP horizontally to middle of stage
setYtomiddle set PP vertically to middle of stage
settoX If horizontally not to middle, set to value
settoY If vertically not to middle, set to value
resetonresize correct positions on browser resize
flashhtmliscenteredX flash is centered horizontally in html embed
flashhtmliscenteredY flash is centered vertically in html embed
canvaswidth Original (/parent) canvas width
canvasheight Original (/parent) canvas height

> TOP <
 
Tips


Some tips to keep in mind when working with Picture Platform AS2;

  • Creating New shapes for buttons or fonts for the category menu
    You can add new shapes for buttons in the .fla. You can also create different fonts for the category menu so you can recycle PP .swf in different websites without having to edit the .fla each time (simply set the xml parameter "fontcategory")

> TOP <