3D Flash Based Image Slideshow - Piecemaker2

File Size: 3.14MB
Views Total: 6186
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
3D Flash Based Image Slideshow - Piecemaker2

Piecemaker2 is an open source Flash ActionScript 3 image rotator for helps you create image/video/flash slideshows with Unlimited 3D transition effects.

How to use it:

1.  Include swfobject.js on your page for embedding Adobe Flash content and detecting the installed Adobe Flash Player plugin in all major web browsers

<script type="text/javascript" src="scripts/swfobject/swfobject.js"></script>

2. javascript

<script type="text/javascript">
      var flashvars = {};
      flashvars.cssSource = "piecemaker.css";
      flashvars.xmlSource = "piecemaker.xml";
		
      var params = {};
      params.play = "true";
      params.menu = "false";
      params.scale = "showall";
      params.wmode = "transparent";
      params.allowfullscreen = "true";
      params.allowscriptaccess = "always";
      params.allownetworking = "all";
	  
      swfobject.embedSWF('piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,    
      params, null);
    
 </script>

3. Markup

<div id="piecemaker">
<p>Put your alternative Non Flash content here.</p>
</div>

4. Settings. Edit the piecemaker.xml file to control the Piecemaker component

ImageWidth = "900" - Width of every Image
ImageHeight = "360" - Height of every Image
LoaderColor = "0x333333" - Color of the cubes before the first image appears, also the color of the back sides of the cube, which become visible at some transition types
InnerSideColor = "0x222222" - Color of the inner sides of the cube when sliced
SideShadowAlpha = "0.8" - Sides get darker when moved away from the front. This is the degree of darkness - 0 == no change, 1 == 100% black
DropShadowAlpha = "0.7" - Alpha of the drop shadow - 0 == no shadow, 1 == opaque
DropShadowDistance = "25" - Distance of the shadow from the bottom of the image
DropShadowScale = "0.95" - As the shadow is blurred, it appears wider that the actual image, when not resized. Thus it‘s a good idea to make it slightly smaller. - 1 would be no resizing at all.
DropShadowBlurX = "40" - Blur of the drop shadow on the x-axis
DropShadowBlurY = "4" - Blur of the drop shadow on the y-axis
MenuDistanceX = "20" - Distance between two menu items (from center to center)
MenuDistanceY = "50" - Distance of the menu from the bottom of the image
MenuColor1 = "0x999999" - Color of an inactive menu item
MenuColor2 = "0x333333" - Color of an active menu item
MenuColor3 = "0xFFFFFF" - Color of the inner circle of an active menu item. Should equal the background color of the whole thing.
ControlSize = "100" - Size of the controls, which appear on rollover (play, stop, info, link)
ControlDistance = "20" - Distance between the controls (from the borders)
ControlColor1 = "0x222222" - Background color of the controls
ControlColor2 = "0xFFFFFF" - Font color of the controls
ControlAlpha = "0.8" - Alpha of a control, when mouse is not over
ControlAlphaOver = "0.95" - Alpha of a control, when mouse is over
ControlsX = "450" - X-position of the point, which aligns the controls (measured from [0,0] of the image)
ControlsY = "280" - Y-position of the point, which aligns the controls (measured from [0,0] of the image)
ControlsAlign = "center" - Type of alignment from the point [controlsX, controlsY] - can be "center", "left" or "right"
TooltipHeight = "31" - Height of the tooltip surface in the menu
TooltipColor = "0x222222" - Color of the tooltip surface in the menu
TooltipTextY = "5" - Y-distance of the tooltip text field from the top of the tooltip
TooltipTextStyle = "P-Italic" - The style of the tooltip text, specified in the CSS file
TooltipTextColor = "0xFFFFFF" - Color of the tooltip text
TooltipMarginLeft = "5" - Margin of the text to the left end of the tooltip
TooltipMarginRight = "7" - Margin of the text to the right end of the tooltip
TooltipTextSharpness = "50" - Sharpness of the tooltip text (-400 to 400) - see Adobe Docs
TooltipTextThickness = "-100" - Thickness of the tooltip text (-400 to 400) - see Adobe Docs
InfoWidth = "400" - The width of the info text field
InfoBackground = "0xFFFFFF" - The background color of the info text field
InfoBackgroundAlpha = "0.95" - The alpha of the background of the info text, the image shines through, when smaller than 1
InfoMargin = "15" - The margin of the text field in the info section to all sides
InfoSharpness = "0" - Sharpness of the info text (see above)
InfoThickness = "0" - Thickness of the info text (see above)
Autoplay = "10" - Number of seconds from one transition to another, if not stopped. Set to 0 to disable autoplay
FieldOfView = "45" - see the official

This awesome jQuery plugin is developed by tutsplus. For more Advanced Usages, please check the demo page or visit the official website.