• Quick Start FULL
• Configuring
• Sample XML settings
• Tips
  

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

• puzzleflipper.fla
• puzzleflipper.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 Puzzle Flipper 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 puzzleflipper.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
   - puzzleflipper.swf
   - contents_carousel.xml
   - swfobject.js
2. Open file index.html from the zip, 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. and repeat/do as step "7" above

> TOP <

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

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

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

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.

> TOP <

These are the XML settings used in the demonstrations. You can copy-paste them into the XML file;

SAMPLE 1

	<parameters>
		<thumbwidth>116</thumbwidth>
		<thumbheight>79</thumbheight>
		
		<carouseltype>9</carouseltype>
		<radiusw>35</radiusw>
		<thumbreflection>true</thumbreflection>
		<addglass>true</addglass>
		<showscroll>false</showscroll>
		<backalpha>1</backalpha>
		<rotation3D_tilt>0</rotation3D_tilt>
		<rotation3D_fieldOfView>100</rotation3D_fieldOfView>
		<speed>1</speed>
		<hoverscale>1.35</hoverscale>
	</parameters>
	
	<parametersextra>
		<visibleitems>2</visibleitems>
		<R1outlinecolor>0xFFFFFF</R1outlinecolor>
		<R1outlinealpha>0.5</R1outlinealpha>
	</parametersextra>

SAMPLE 2

	<parameters>
		<thumbwidth>116</thumbwidth>
		<thumbheight>79</thumbheight>
		
		<carouseltype>1</carouseltype>
		<thumbtype>2</thumbtype>
		<radiusw>150</radiusw>
		<radiush>-50</radiush>
		<thumbreflection>true</thumbreflection>
		<addglass>true</addglass>
		<offX>25</offX>
		<item_endalpha>0</item_endalpha>
		<backalpha>0</backalpha>
		<backscale>0</backscale>
	</parameters>
	
	<parametersextra>
		<splitchance>0</splitchance>
		<flipY>false</flipY>
		<flipXran>false</flipXran>
		<blocksize>200</blocksize>
		<flip_fieldOfView>100</flip_fieldOfView>
	</parametersextra>

SAMPLE 3

	<parameters>
		<thumbwidth>112</thumbwidth>
		<thumbheight>75</thumbheight>
		
		<carouseltype>6</carouseltype>
		<carousel_vertical>true</carousel_vertical>
		<rotation3D>true</rotation3D>
		<radiush>125</radiush>
		<addglass>true</addglass>
		<showscroll>false</showscroll>
		<speed>10</speed>
		<rotation3D_tilt>0</rotation3D_tilt>
		<rotation3D_fieldOfView>25</rotation3D_fieldOfView>
		<off2>3</off2>
		<off3>1</off3>
		<roundcorner>5</roundcorner>
<hoverscale>1.2</hoverscale>
	</parameters>
	
	<parametersextra>
		<visibleitems>8</visibleitems>
		<R1outlinealpha>0</R1outlinealpha>
		<R1fillcolor>0xFFFFFF</R1fillcolor>
		<R1fillalpha>1</R1fillalpha>
		<R2fillcolor>0x000000</R2fillcolor>
		<R2fillalpha>1</R2fillalpha>
		<splitchance>0</splitchance>
		<flipX>false</flipX>
		<flipYran>false</flipYran>
		<blocksize>75</blocksize>
		<flip_fieldOfView>150</flip_fieldOfView>
	</parametersextra>

SAMPLE 4

	<parameters>
		<thumbwidth>116</thumbwidth>
		<thumbheight>79</thumbheight>
		
		<carouseltype>3</carouseltype>
		<thumbreflection>true</thumbreflection>
		<addglass>true</addglass>
		<radiusw>175</radiusw>
		<radiush>-75</radiush>
		<offX>25</offX>
		<offY>-25</offY>
		<showmenu>true</showmenu>
		<menuXpos>25</menuXpos>
		<menuYpos>-100</menuYpos>
		<buttondistance>35</buttondistance>
		<prevnextXoff>3</prevnextXoff>
		<item_endalpha>0.5</item_endalpha>
		<item_endscale>0.5</item_endscale>
		<HRmaxwaitdur>2</HRmaxwaitdur>
		<HRminflipdur>1.5</HRminflipdur>
		<HRmaxflipdur>2.5</HRmaxflipdur>
		<HRmaxwaitdur>5</HRmaxwaitdur>
</parameters>
	
	<parametersextra>
		<visibleitems>5</visibleitems>
		<splitchance>0</splitchance>
	</parametersextra>

SAMPLE 5

	<parameters>
		<thumbwidth>150</thumbwidth>
		<thumbheight>100</thumbheight>
		
		<carouseltype>2</carouseltype>
		<rotation3D>true</rotation3D>
		<carousel_vertical>true</carousel_vertical>
		<radiush>30</radiush>
		<addglass>true</addglass>
		<showscroll>false</showscroll>
		<speed>2</speed>
		<rotation3D_tilt>0</rotation3D_tilt>
		<HRmaxwaitdur>0.5</HRmaxwaitdur>
		<HRminflipdur>1</HRminflipdur>
		<HRmaxflipdur>2</HRmaxflipdur>
	</parameters>
	
	<parametersextra>
		<visibleitems>3</visibleitems>
		<blocksize>200</blocksize>
		<flip_fieldOfView>100</flip_fieldOfView>
		<fr_arc>3</fr_arc>
	</parametersextra>

SAMPLE 6

	<parameters>
		<thumbwidth>116</thumbwidth>
		<thumbheight>79</thumbheight>
		
		<carouseltype>6</carouseltype>
		<rotation3D>true</rotation3D>
		<radiusw>100</radiusw>
		<thumbreflection>true</thumbreflection>
		<showscroll>false</showscroll>
		<speed>2</speed>
		<rotation3D_fieldOfView>25</rotation3D_fieldOfView>
	</parameters>
	
	<parametersextra>
		<visibleitems>4</visibleitems>
		<singleflip>false</singleflip>
	</parametersextra>

SAMPLE 7

	<parameters>
		<thumbwidth>116</thumbwidth>
		<thumbheight>79</thumbheight>
		
		<carouseltype>0</carouseltype>
		<move_to_front>false</move_to_front>
		<backscale>0.25</backscale>
		<backalpha>0.25</backalpha>
		<radiusw>125</radiusw>
		<radiush>35</radiush>
		<thumbreflection>true</thumbreflection>
		<reflect_complete_slide>true</reflect_complete_slide>
		<offX>25</offX>
		<offY>25</offY>
		<showscroll>false</showscroll>
		<item_drop>1.1</item_drop>
	</parameters>

SAMPLE 8

	<parameters>
		<thumbwidth>116</thumbwidth>
		<thumbheight>79</thumbheight>
		
		<carouseltype>2</carouseltype>
		<carousel_vertical>true</carousel_vertical>
		<backscale>0</backscale>
		<backalpha>-1</backalpha>
		<radiusw>-40</radiusw>
		<radiush>90</radiush>
		<showscroll>false</showscroll>
		<HRminflipdur>1.5</HRminflipdur>
		<HRmaxflipdur>2.5</HRmaxflipdur>
	</parameters>
	
	<parametersextra>
		<visibleitems>0</visibleitems>
		<splitchance>0</splitchance>
		<blocksize>75</blocksize>
		<flip_fieldOfView>120</flip_fieldOfView>
	</parametersextra>

SAMPLE 9

	<parameters>
		<thumbwidth>140</thumbwidth>
		<thumbheight>90</thumbheight>
		
		<carouseltype>6</carouseltype>
		<thumbreflection>true</thumbreflection>
		<reflect_complete_slide>true</reflect_complete_slide>
		<radiusw>175</radiusw>
		<radiush>0</radiush>
		<showscroll>true</showscroll>
		<backalpha>-1</backalpha>
		<backscale>-1</backscale>
	</parameters>
	
	<parametersextra>
		<nrgallerynow>2</nrgallerynow>
		<visibleitems>7</visibleitems>
	</parametersextra>

SAMPLE 10

	<parameters>
		<thumbwidth>116</thumbwidth>
		<thumbheight>79</thumbheight>
		
		<carouseltype>5</carouseltype>
		<offX>25</offX>
		<offY>0</offY>
		<backscale>0.2</backscale>
		<radiush>-50</radiush>
		<showscroll>true</showscroll>
		<scrollXpos>25</scrollXpos>
		<scrollYpos>-40</scrollYpos>
		<scrolldoHRatmouseUP>true</scrolldoHRatmouseUP>
	</parameters>
	
	<parametersextra>
		<nrgallerynow>2</nrgallerynow>
		<visibleitems>0</visibleitems>
	</parametersextra>

> TOP <

Some tips to keep in mind when working with Puzzle Flipper 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 <