3D Flash Based Image Slideshow - Piecemaker2
File Size: | 3.14MB |
---|---|
Views Total: | 6205 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.