Monday, October 25, 2010

how to Add Piecemaker a Flash 3D image rotator to blogger

Piecemaker is a Flash 3d image slideshow which is clone of cu3er.I have posted a tutorial on 3D Slideshow With Cu3er for blogger-part1.Today i am going to tell how to add Piecemaker to blogger templates.Ok  whats the difference between cu3er and piecemaker.
  1. Cu3er is not free
  2. Piecemaker is open source and free to modify under GPL license.(.fla included)
  3. Styling the headings and text of description in Piecemaker.
piecemaker blogger

Download the  files

Copy the following code and paste it to your html/javscript gadget
<script src="http://dl.dropbox.com/u/13256471/xml%20_slideshow/js/swfobject.js" type="text/javascript">
<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/13256471/piecemaker/piecemakerXML.xml";
  flashvars.cssSource = "http://dl.dropbox.com/u/13256471/piecemaker/piecemakerCSS.css";
  flashvars.imageSource = "http://dl.dropbox.com/u/13256471/piecemaker/images";
  var attributes = {};
  attributes.wmode = "transparent";
var params = {};  
     params.allowscriptaccess = "always";  
     params.allownetworking = "all";
  swfobject.embedSWF("http://dl.dropbox.com/u/13256471/piecemaker/piecemakerNoShadow.swf", "flashcontent", "960", "610", "10", "http://dl.dropbox.com/u/13256471/xml%20_slideshow/js/expressInstall.swf", flashvars, attributes,params);

Edit the xml file for your convenience.

<Image Filename="image6.jpg">
      <headline>Description Text</headline>
      <paragraph>Here you can add a description text for every single image.</paragraph>
      <inline>This is HTML text loaded from the external XML file and formatted with an external CSS file. So it's pretty simple to set this text. You can also easily add</inline>
      <a href="http://www.modularweb.net/piecemaker" target="_blank">Ӂhyperlinks</a>
      <paragraph>. This one leads you to the official Piecemaker website, by the way.</paragraph>

How to add Piecemaker 2 to blogger

any problem ask me


  1. Great ! Thank you very much, I will try it.

  2. Hy there,

    i`m trying to add this to an x-cart front-end and I can`t figure it how to do it.

    I added your code in the home.tpl file to appear in the header and the div-line "flashcontent" in the welcome.tpl to appear on the front page. I only get the install messege.

    Can you please help me? Pleeeasee

  3. i think your problem is that images are not loading.make sure that images folder placed correctly and mention the path for the flash variable like this below
    flashvars.imageSource = "http://dl.dropbox.com/u/13256471/piecemaker/images";
    if you still find a problem i would like to help you

  4. This is incredibly frustrating. The code works when posting it on my blogger, but as soon as I make the slightest change, such as hosting the files in my own hosting, nothing will show up, and therefore nothing can be customized.

  5. i saw your http://piecemakertest.blogspot.com/ site and i found that you have not used the swfobject you just embedded the piecemakerNoShadow.swf file....

    make sure you have copied the code from step 2......and replace the sources with yours for example

  6. working demo in blogger


  7. Hey, can you make the Piece Maker 2 working in blogger ? -> link

  8. http://fuzionpro.blogspot.com/2011/01/how-to-add-piecemaker-2-to-blogger.html

    here is the link for piecemaker 2 in blogger

  9. hello, I have a blog on blogger and I wanted to put this effect in the header. Where should I place these two codes? In what line html?

  10. unfortunately tells me that there is no closing tag div when I go to replace the code on the 2nd step

  11. i cant get you .........can you tell me clearly what you are stuck with and i am ready to help you

  12. I resolved, you not to worry. I wanted to ask: how many images you can put and can be associated with a link back to the full article?

  13. Has anybody tried to replace the SWF file that comes with the piecemaker2? for some reason, I cannot make it work with another SWF file

  14. please the file download:
    This file is either removed due to copyright claim or is deleted by the uploader.

  15. http://dl.dropbox.com/u/13256471/piecemaker.zip

  16. i cannot add my own images in this piece maker .and one more thing no "js folder" available in your downloaded file link

  17. plus i also want to add more than 6 images .kindly help!!!!


fuzionpro Headline