Video Roll Image Carousel documentation
 
Quick Start FULL

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

  • videoroll.fla
  • videoroll.swf
  • loader.fla
  • loader.swf
  • contents_carousel.xml
  • swfobject.js
  • index.html
  • /caurina/ folder
  • /com/
      /patrickjansendesign/
       /carousel/stepcarousel.as
       /utils/mirrorit.as
  • Readme.htm

Do the following steps to start using Video Roll Image Carousel;

  1. Unzip the .zip file.
  2. Copy the /caurina/ and /com/ folder to the folder of your .fla
  3. Open Flash CS4 (or higher).
  4. Open videoroll.fla and your own .fla
  5. Copy the Library clips to your own .fla's Library (see also tip)
  6. or) Drag an instance of the carousel to stage of your .fla (or copy-paste from original .fla stage to your .fla)
    or) Generate an instance dynamically with addChild
  7. Open file contents_carousel.xml and configure your own XML carousel items. The xml already has examples of how to set nodes but you can read all the options below (see Configuring)

If you want to use it as Standalone (not implemented into any other .fla but directly in ANY webpage), do this

  1. Copy these files into the folder of your webpage
    - loader.swf
    - videoroll.swf
    - contents_carousel.xml
    - swfobject.js
  2. Open file index.html from the zip or any of the sample1.html / sample10.html, copy the 2 javascript parts and the <div id="carousel"> part into your own webpage
  3. If need be, in swfobject.embedSWF("loader.swf" .... adjust the size the flash file needs to cover
  4. If need be, in #carousel { position: .... adjust the positions where the left top has to be.
  5. Open file contents_carousel.xml. (or 1 - 10 if using sample pages) and repeat/do as step "7" above


> TOP <

 
Configuring

In the XML file you can set <cat> nodes to define one or more categories to use and keep your data organized.

<cat>      
Attributes:
Name="Product Videos" : Name to easily identify what carousel it is
Folder="companyproducts" : The name and path of the folder containing the thumbnail and highresolution images for this category
visibleitems="7" : Depending on the carousel type, it allows you to display only a limited number of items at any moment. This can be useful for large collections.

In each category you can define as many <image> nodes as you like

<image>      
Attributes:
imgX="10" to offset the thumbnail horizontally
imgY="10" to offset the thumbnail vertically
thumbreflection="false" (or true) to set individual reflections
width="150" to some value, that value will be used for the thumbnail width
height="100" to some value, that value will be used for the thumbnail height
thumbwidth="150" to some value, that value will be used for the thumbnail background fill/border generation
thumbheight="100" to some value, that value will be used for the thumbnail background fill/border generation


And in <image> you can set the following subnodes;

<node>   DESCRIPTION
     
imagenamethumbnail   Thumbnail image or SWF file
clickHRfile   Open High Resolution image or SWF file on click
Attributes
scale ="0.5"
width="400"
height="200"
background="false"
thumbtype
   Type of thumbnail
tooltip     Use button menu tooltip
Attributes
x="0"
y ="0"
slidetip   Use thumbnail tooltip
Attributes
x="0"
y ="0"
videolink     Webpage to open when the link icon in player menu is clicked
Attributes
frame="_blank" ( "_parent","_self","_top", "yourFrameName" etc)
Omitting this attribute will use the default, blank frame.
videoinfo   Information text about the video to display when hovering info icon in player menu

You can also set the visual appearance of the carousel in nodes <parameters> and <parametersextra>. Below are the details of all the possible parameter functionality and also below a list of precreated samples for you to use.

<parameters>   DEFAULT
VALUE 		  DESCRIPTION
         
offX   0   Horizontal offset shift for the carousel
offY   0   Vertical offset shift for the carousel
radiusw     200     Horizontal carousel radius (width)
radiush   100   Vertical carousel radius (height)
flip_hor   false   Flip carousel item order horizontally
flip_ver   false   Flip carousel item order vertically
         
slidewidth   275   Default slide (carousel item) width when using full textual carousel items (for thumbtype = 0)
slideheight   150   Default slide (carousel item) height when using full textual carousel items (for thumbtype = 0)
thumbwidth   100   Default width for any background / border added to the thumbnails (bitmap or swf)
thumbheight   75   Default height for any background / border added to the thumbnails (bitmap or swf)
         
imgX   0   Default horizontal position of the thumbnail
imgY   0   Default vertical position of the thumbnail
imgWIDTH       Force default width of all thumbnails to this value first (to override individual see <image> attributes)
imgHEIGHT       Force default height of all thumbnails to this value first (to override individual see <image> attributes)
         
thumbsonly_noback   false   Don't add the rounded rectangle background to the thumbnails by default. (for thumbtype NOT 0)
reflect_complete_slide   false   Reflect the complete thumbnail including the rounded rectangle background
thumbreflection   false   Add reflection to carousel items (thumbnail or complete slide)
Attributes:
scale="1" : Default vertical reflection scale
distance="2" : Default vertical reflection distance
size="0.75" : Default percentage/fraction of the to be reflected area (lower value - smaller refelection)
alpha="0.5" : Default top alpha value (bottom value always 0)

OBS: Usually you'll want to change 'size' and not 'scale'
addglass   false   Add glossy bevel to thumbnails
roundcorner   10   Round corner amount for carousel item backgrounds.
backscale   0.5   Scale carousel items down to this value going towards the back (front value is 1)
backalpha   0.5   Fade carousel items down to this transparency value going towards the back (front value is 1)
backblur   0   Blur carousel items up to this value going towards the back (front value is 0)
hoverscale   1.05   Scale up carousel items when hovering your mouse over them
         
mindur   0.5   Minimum duration (seconds) for tweening from one item to the next (stepwise based)
maxdur   0.5   Maximum duration (seconds) for tweening from one item to the next (stepwise based)
stepwise   false   Instead of instant scroll from one item to the next item, tween all steps inbetween too
         
showmenu   false   Show menu below the carousel
hidemenunumbers   false   Show the numeric buttons in the menu
hidemenuprevnext   false   Show the next/previous buttons in the menu
buttondistance   32   Distance between the numeric buttons
prevnextXoff   0   Extra horizontal distance for the next and previous buttons
menuXpos   0   Horizontal position of the menu
menuYpos   -200   Vertical position of the menu
showscroll   false   Show scroll bar below the carousel
scrollYpos   0   Horizontal position of the scroll bar
scrollYpos   -250   Vertical position of the scroll bar
scrolldistance   300   Width of the scroll bar
         
speed   3   Rotation (max) speed of the carousel when rotating according to mouse position
         
thumbtype   1   Type of carousel item

0 : // thumbnail img/swf with rounded rectangle area and header / text / link (FULL TEXTUAL)
1 : // thumbnail img/swf with rounded rectangle area
2 : // thumbnail img/swf
3 : // thumbnail MC
HRtype   2   Type of behaviour on item click, methods for processing HR "high resolution" images. It can also be .SWF or .FLV video load, or it can display and trigger play() of an internal MovieClip.

0 : // 'Do nothing', simply move the item to the front. (for thumbtype = 0)
1 : // Load an internal MovieClip and display it.
2 : // Load an external FLV, SWF or Bitmap and display it.
carouseltype   1  

Animation style of the carousel. ( in explanation below V = yes and X = no )

0 : // Default, move items to front , (for thumbtype = 0)

1 : // whole circle
V move on frameloop
X move on item click

2 : // partial circle (uses <cat> "visibleitems" attribute)
V move on frameloop
V move on item click

3 : // partial circle (uses <cat> "visibleitems" attribute)
X move on frameloop
V move on item click

4 : // partial diamond (uses <cat> "visibleitems" attribute)
V move on frameloop
V move on item click

5 : // partial diamond (uses <cat> "visibleitems" attribute)
X move on frameloop
V move on item click

6 : // half circle (uses <cat> "visibleitems" attribute)
V move on frameloop
V move on item click

7 : // half circle (uses <cat> "visibleitems" attribute)
X move on frameloop
V move on item click

8 : // fixed in place, does not move clicked items or loaded HR content to center
X move on frameloop
V move on item click

 
carousel_vertical   false   Use vertical rotation of the carousel
         
rotation3D   false   Use 3D rotation for the carousel
rotation3D_tilt   10   3D Inclination of the carousel
rotation3D_fieldOfView   50   3D Perspective field of view value
rotation3D_focalfactor   1   Focal length factor. If you load the .swf containing the carousel into another.swf with a different stage size, the 3D perspective will change. With this parameter you can adjust it.
         
startcategory     1     Which category to start with by default
off2   4   Background rectangle fill offset (extra size)
off3   8   Background rectangle border offset (extra size)
themecolor   0x3399CC   Default color for menu buttons and scroll bar
themecolor_over   0x003C69   Mouse over color for menu buttons
themecolor_active   0x009966   Clicked color for menu buttons
         
HRbackoff   10   Highres image background offset
HRbackfillcolor   0xFFFFFF   Highres image background fill color
HRbackfillalpha   0.5   Highres image background fill alpha
HRbackbordercolor   0x00000   Highres image background border color
HRbackborderalpha   1   Highres image background border alpha
HRbackborderwidth   0   Highres image background border width (0 = hairline)
HRcontent_scale_out   0.5   Tween high resolution image to scale on close
HRcontent_alpha_out   0   Tween high resolution image to alpha on close
         
arc   180   Spread items over angle (for carouseltype = 6 or 7)
         
item_nomaskout   false   Mask thumbnails out on click
item_endscale   1   Thumbnail end scale on click
item_endalpha   1   Thumbnail end alpha on click
item_drop   0   Thumbnail drop down factor out of its mask on click
         
video_hideplayer   false   Hide video player interface (show on hover)
video_playerontop   false   Show the video player interface on top of the video (instead of below it)
       

<parametersextra>   DEFAULT
VALUE 		  DESCRIPTION
realpuzzleparts   false   Use "real" puzzle parts instead of rectangles
nrgallerynow   1   Number of gallery to show (numeric order number)
visibleitems       Number of visible items to show (optional and used depending on carousel type)
         
R1outlinecolor     0x000000     slide outter rectangle outline color
R1outlinealpha   0.1   slide outter rectangle outline alpha
R1fillcolor   0xFFFFFF   slide outter rectangle fill color
R1fillalpha   0.1   slide outter rectangle fill alpha
R2fillcolor   0xFFFFFF   slide inner rectangle fill color
R2fillalpha   0.8   slide inner rectangle fill alpha
         
scrolldoHRatmouseUP   false   Open HR image only when mouse is up after scrolling (not during)
addvideostrip   false   Add a video strip to thumbnails for video contents.
hideFSbutton   false   Hide the Full Screen button option
hideFITbutton   false   Hide the Scale "Fit" button (1:1 / fit / fill)

 

> TOP <
 
 
Tips

Some tips to keep in mind when working with Video Roll Image Carousel;

  • 'Number' your <cat> nodes
    You don't have to, but if you create multiple <cat> collections, you can give them some nr="1" attribute (and nr="2",nr="3",nr="4" and so on). It won't be used but it will make it easier for you later to check to which number to set the nrgallerynow parameter.

> TOP <