16 Jun 2011
Implementing PieceMaker 2 in Blogger

Piecemaker V2 is an open source Flash ActionScript 3 image rotator.It‘s free for nearly any use - including commercial.

Its the perfect way to dynamically display your images, videos and .swf files on any post or page.The Piecemaker is a Flash-based 3D Image Rotator.

Steps to Add it to Blogger:

1.Login to the Blogger account.

2.Go to the Post/Page you want to add Piecemaker 2 and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script src="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/scripts/swfobject/swfobject.js" type="text/javascript">
</script>
<div id="flashcontent">
You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">Upgrade your Flash Player</a> to version 10 or newer.</div>


<script type="text/javascript">
  var flashvars = {};
  flashvars.xmlSource = "http://dl.dropbox.com/u/27675057/piecemaker.xml";
  flashvars.cssSource = "http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.css";
  flashvars.imageSource = "";
  var attributes = {};
  attributes.wmode = "transparent";
var params = {};  
     params.allowscriptaccess = "always";  
     params.allownetworking = "all";
  swfobject.embedSWF("http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/piecemaker.swf", "flashcontent", "960", "610", "10", "http://dl.dropbox.com/u/27675057/Piecemaker/expressInstall.swf", flashvars, attributes, params, null);
</script>

4.Now for adding anything into Piecemaker 2 you have to edit the XML file included at the top ,which contains code of this kind

<Piecemaker>
<Contents>
<Image Source="http://dl.dropbox.com/u/27675057/pic/15.jpg" Title="Sky"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/21.jpg" Title="Cloud">
</Image>
<Image Source="http://dl.dropbox.com/u/27675057/pic/22.jpg" Title="Clouds"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/22_2.jpg" Title="Green"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/24.jpg" Title="Landscape"/>
<Image Source="http://dl.dropbox.com/u/27675057/pic/62.jpg" Title="Water"/>
<Video Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video.mp4" Title="Video Example" Width="910" Height="365" Autoplay="true">
<Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/video-preview.jpg" />
</Video>
<Flash Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash.swf" Title="Loaded SWF File">
      <Image Source="http://dl.dropbox.com/u/27675057/piecemaker2/piecemaker/web/contents/flash-preview.png" />
    </Flash>
</Contents>
<Settings ImageWidth="900" ImageHeight="360" LoaderColor="0x333333" InnerSideColor="0x222222" SideShadowAlpha="0.8" DropShadowAlpha="0.7" DropShadowDistance="25" DropShadowScale="0.95" DropShadowBlurX="40" DropShadowBlurY="4" MenuDistanceX="20" MenuDistanceY="50" MenuColor1="0x999999" MenuColor2="0x333333" MenuColor3="0xFFFFFF" ControlSize="100" ControlDistance="20" ControlColor1="0x222222" ControlColor2="0xFFFFFF" ControlAlpha="0.8" ControlAlphaOver="0.95" ControlsX="450" ControlsY="280 " ControlsAlign="center" TooltipHeight="30" TooltipColor="0x222222" TooltipTextY="5" TooltipTextStyle="P-Italic" TooltipTextColor="0xFFFFFF" TooltipMarginLeft="5" TooltipMarginRight="7" TooltipTextSharpness="50" TooltipTextThickness="-100" InfoWidth="400" InfoBackground="0xFFFFFF" InfoBackgroundAlpha="0.95" InfoMargin="15" InfoSharpness="0" InfoThickness="0" Autoplay="10" FieldOfView="45"/>
<Transitions>
<Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"/>
<Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
<Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"/>
<Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"/>
<Transition Pieces="20" Time="1.1" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
<Transition Pieces="12" Time="2" Transition="easeInOutCubic" Delay="0.03" DepthOffset="200" CubeDistance="10"/>
</Transitions>
</Piecemaker>

All these codes are of self explanatory nature and really easily to understand

5.Now save the Post/Page and see the magic.

Note: Please Host all the files on free hosting service like DropBox or Blogpsot itself !

Til next time,
Prayag Verma at 14:34

scribble

16 Jun 2011 Implementing PieceMaker 2 in Blogger

16 Jun 2011
Implementing PieceMaker 2 in Blogger