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 !

             

21 Replies to “Implementing PieceMaker 2 in Blogger”

  1. how i can change photos to piecemaker 1? i ll upload the photos to dropbox then what?
    how i can connect them?
    check my blog please
    acropolisamiboutiquehotel.blogspot.com and tell me how to fix it, thank you for your time 😀

  2. Hi there, see when you upload anything to Dropbox make sure you copy it into Public folder .Now right click on the Photo and click on "Dropbox" and then Click on "Copy Public link" now just see the 4th step of this tutorial and change the address of the image with the one u just copied.

    For a more Graphically solution visit this link

    1. Go to the Post or page you want to add the code to , Paste it in the Edit HTML tab of the Post Editor

      If you want to add it below the header, then add a HTML/JavaScript Gadget in Layouts and paste the code into it

    1. In the Line 9 of Step 3 ,you will see the XML file address

      If you are referring how to make a XML file , just copy all the contents of Step 4 and Paste into a Text file. Now in the File menu ,click the Save As option and in the Name field, name it followed by .xml

  3. Hello,

    In Piecemaker, we have controls "play", "stop", "info" and "link" which appear on rollover. I want to change these text (to my native language).

    After great efforts I found that these words are in "piecemaker.swf" file. I decompiled the swf and changed the color of the images (just to see whether it still works). But it didn't work.

    So, how can I change these texts?

    Thanks in advance.

Leave a Reply

Your email address will not be published. Required fields are marked *