loading...

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






Tutorial
Step1
Download the  files

Step2
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">
</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/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);
</script>

Step3
Edit the xml file for your convenience.

<Image Filename="image6.jpg">
    <Text>
      <headline>Description Text</headline>
      <break>Ӂ</break>
      <paragraph>Here you can add a description text for every single image.</paragraph>
      <break>Ӂ</break>
      <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>
    </Text>
  </Image>


How to add Piecemaker 2 to blogger


any problem ask me

19 comments:

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete
  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.

    ReplyDelete
  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
    flashvars.xmlSource=http://germanicus24.persiangig.com/document/piecemaker/piecemakerXML.xml

    ReplyDelete
  6. working demo in blogger

    http://jquerydem0.blogspot.com/2010/10/piecemaker.html

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

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


    here is the link for piecemaker 2 in blogger

    ReplyDelete
  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?

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

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

    ReplyDelete
  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?

    ReplyDelete
  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

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

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

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

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

    ReplyDelete

fuzionpro Headline

fuzionpro