How to add Piecemaker 2 to blogger

Piecemaker is clone of Cuber3.i have done a tutorial on both of this you can find here


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



Now its the new year special Piecemaker 2 is available for download

Download          BLOGGER DEMO

What’s New?
Building on the original, the Piecemaker 2 now includes:

  • Unlimited transition effects
  • The ability to include SWF files and videos
  • Improved navigation (using tooltips)
  • Animated shadows

It’s also entirely XML-based, and the HTML/CSS parsing has been improved, allowing special characters to be used. Plus, images can now contain hyperlinks to other websites.

Step1
Copy the following code and paste it to your html/javscript gadget

<script src="http://dl.dropbox.com/u/13256471/piecemaker_2/scripts/swfobject/swfobject.js" type="text/javascript">
</script>

<center>

<div id="piecemaker">

Put your alternative Non Flash content here.

</div>

</center>


<script type="text/javascript">
      var flashvars = {};

      flashvars.cssSource = "http://dl.dropbox.com/u/13256471/piecemaker_2/piecemaker.css";

      flashvars.xmlSource = "http://dl.dropbox.com/u/13256471/piecemaker_2/piecemaker.xml";

  

      var params = {};

      params.play = "true";

      params.menu = "false";

      params.scale = "showall";

      params.wmode = "transparent";

      params.allowfullscreen = "true";

      params.allowscriptaccess = "always";

      params.allownetworking = "all";

   

      swfobject.embedSWF('http://dl.dropbox.com/u/13256471/piecemaker_2/piecemaker.swf', 'piecemaker', '1000', '600', '10', null, flashvars,    

      params, null);

    

    
</script>

Step2
Edit the xml file for your convenience.make sure you add the full path to the image,video,swf in xml file

<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
  <Contents>
    <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/piecemaker1.png" Title="The Piecemaker 2"></Image>
    <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/piecemaker2.png" Title="Lots of new Features">
      <Text>&lt;h1&gt;New hot Features&lt;/h1&gt;&lt;p&gt;The all new Piecemaker comes with lots of new features, making it even more slick.&lt;/p&gt;&lt;p&gt;Just to mention a few - you can now specify unlimited transition styles, include your own SWF and Video files, add hyperlinks to images and info texts with all special characters.&lt;/p&gt;&lt;p&gt;We also impoved the navigation and the animation with animated shadows and pixel-perfect transitions.&lt;/p&gt;</Text>
      <Hyperlink URL="http://www.modularweb.net" Target="_blank" />
    </Image>
    <Flash Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/flash.swf" Title="Loaded SWF File">
      <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/flash-preview.png" />
    </Flash>
    <Image Source="http://dl.dropbox.com/u/13256471/piecemaker_2/contents/piecemaker3.png" Title="Editing made Easy"></Image>
    <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>
  </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&#xD;&#xA;" 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"></Settings>
  <Transitions>
    <Transition Pieces="9" Time="1.2" Transition="easeInOutBack" Delay="0.1" DepthOffset="300" CubeDistance="30"></Transition>
    <Transition Pieces="15" Time="3" Transition="easeInOutElastic" Delay="0.03" DepthOffset="200" CubeDistance="10"></Transition>
    <Transition Pieces="5" Time="1.3" Transition="easeInOutCubic" Delay="0.1" DepthOffset="500" CubeDistance="50"></Transition>
    <Transition Pieces="9" Time="1.25" Transition="easeInOutBack" Delay="0.1" DepthOffset="900" CubeDistance="5"></Transition>
  </Transitions>
</Piecemaker>

Comments

  1. Hi. I hope you can help me.

    I uploaded the files to my dropbox and replaced the .js, .css, .xml (edited), and .swf files in the script, but the piecemaker doesn't show. Am I doing something wrong? Please help!

    Thank you so much for sharing this.

    ReplyDelete
  2. have u copied the code in step 1 properly as such i explained above......if piecemaker is not showing means then the path to xml file or the paths to the images,videos,swf files are not correct is not loading

    ReplyDelete
  3. Hi, The second step should be placed where?

    ReplyDelete
  4. it should not be copied ......its a remote file edit that file to point to your images

    look here for details to put piecemaker to header blogger

    http://jflipblog.blogspot.com/2011/02/adding-piecemaker-in-header.html

    ReplyDelete
  5. step1 because if I put in the html code of the blog ... work. But if I put it as a gadget html / js does not work. How can I put it as a gadget step1?

    ReplyDelete
  6. Hi, i have 2 questions...
    1] In step 2: the image source should also be in dropbox? or will it work if the image is stored in some other place like imageshack or photobucket?
    2] i don't get the tooltip option and click on the button option. What am i doing wrong?

    ReplyDelete
  7. its not that your images should be in dropbox it can be any url of your wish make sure you point that url in image source in step 2

    its better that you have all the files in a single place

    ReplyDelete
  8. How do you edit XML file above?? I'm using Google Chrome. What are the steps?? Sorry, I'm a newbie.

    ReplyDelete
  9. hi i have the same problem as soffio any help if i link piecemaker.xml frome other http it wont work

    ReplyDelete
  10. hey man its showing error that u have not closed the XML properly

    ReplyDelete
  11. I had the same problem, and I solved. Just copy the entire folder piecemaker2 at root. In piecemaker.xml you have to put the path of files (images, flash or video) wherever you have them on the web.

    ReplyDelete

Post a Comment

Popular posts from this blog

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