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.
Tutorial
Step1
Download the files
Step2
Copy the following code and paste it to your html/javscript gadget
Step3
Edit the xml file for your convenience.
any problem ask me
- Cu3er is not free
- Piecemaker is open source and free to modify under GPL license.(.fla included)
- Styling the headings and text of description in Piecemaker.
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
Great ! Thank you very much, I will try it.
ReplyDeleteHy there,
ReplyDeletei`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
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
ReplyDeleteflashvars.imageSource = "http://dl.dropbox.com/u/13256471/piecemaker/images";
if you still find a problem i would like to help you
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.
ReplyDeletei saw your http://piecemakertest.blogspot.com/ site and i found that you have not used the swfobject you just embedded the piecemakerNoShadow.swf file....
ReplyDeletemake 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
working demo in blogger
ReplyDeletehttp://jquerydem0.blogspot.com/2010/10/piecemaker.html
Hey, can you make the Piece Maker 2 working in blogger ? -> link
ReplyDeletehttp://fuzionpro.blogspot.com/2011/01/how-to-add-piecemaker-2-to-blogger.html
ReplyDeletehere is the link for piecemaker 2 in blogger
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?
ReplyDeletehey look this link for details
ReplyDeletetutorial to add piecemaker in header header
thanks ^_^
ReplyDeleteunfortunately tells me that there is no closing tag div when I go to replace the code on the 2nd step
ReplyDelete:(
i cant get you .........can you tell me clearly what you are stuck with and i am ready to help you
ReplyDeleteI 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?
ReplyDeleteHas anybody tried to replace the SWF file that comes with the piecemaker2? for some reason, I cannot make it work with another SWF file
ReplyDeleteplease the file download:
ReplyDeleteThis file is either removed due to copyright claim or is deleted by the uploader.
http://dl.dropbox.com/u/13256471/piecemaker.zip
ReplyDeletei cannot add my own images in this piece maker .and one more thing no "js folder" available in your downloaded file link
ReplyDeleteplus i also want to add more than 6 images .kindly help!!!!
ReplyDelete