Download the Piecemaker widget

In this article i want to show you how to create an awesome 3D flash image rotator widget by integrate with Piecemaker2.

What's Piecemaker

Björn from Modularweb created the Piecemaker2, a completely free, open source, 3D Flash image rotator gallery

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.

Create widget

Run DotNetAge and login as administrators then go to "SiteTools/Consoles/Widgets/Create". Supply the base information for Piecemaker Widget

widget_wizard

Add User preferences

The Piecemaker has some parameters could be changed at runtime , We can define the user preferences to expose this settings to end users.

pk_userpreferences

xmlSource - Set the xml setting file of the Piecemaker.
width - Set the flash player width
height - Set the flash player height

Please read Piecemaker document to learn more about the xml settings.

Add resource files

Now we need to add the scripts , flash files and css style sheets to the widget folder. Copy the Piecemaker files to Piecemaker Widget folder

Frigued_Picecmaker_Folder

Edit the Widget View

The widget content

Reference to the swobject.js library to create the flash object when widget loaded.
Add the
element as the Piecemaker's container and use item.GenerateFieldID() method to create unique id for the div element in page.
- Inside Content() helper method you can use the item keyword to reference the WidgetHelper object
- If your widget has naming elements please use item.GenerateFieldID method to get the unique id for element that could be prevent the id conflict when adding more then one widget to your page.


@{
    var path =UrlResolver.Resolve(WebSiteContext.Current.RootWeb)+ Url.Content("~/content/widgets/Misc/Piecemaker/");
}
@{
 Ajax.Dna().Widget()
       .Content(@<text>
    <script type="text/javascript" src="@(path + "scripts/swfobject.js")"></script>
    <div id="flashcontent">
      <p>You need to <a href="http://www.adobe.com/products/flashplayer/" target="_blank">upgrade your Flash Player</a> to version 10 or newer.</p>
    </div>
    <script type="text/javascript">
    $(function(){
        var flashvars = {};
        flashvars.xmlSource = "@item.GetString("xmlSource")";
        flashvars.cssSource = "@(path + "piecemaker.css")";
        var attributes = {};
        attributes.wmode = "transparent";
        swfobject.embedSWF("@(path + "piecemaker.swf")", "flashcontent", "@item.GetInt("width")", "@item.GetInt("height")", "10", "@(path + "scripts/expressInstall.swf")", flashvars, attributes);
        });
    </script>
   </text>)
        .Render();
}

The item.GetXXX() means:

item.GetString("xmlSource") - Read the xmlSource user preference value as string.
item.GetInt("width") - Read the width user preference value as integer.
item.GetInt("height") - Read the height user preference value as integer.

Register the Piecemaker widget

Before we add the Piecemaker widget to our page , we need to register and publish the Piecemaker widget to end users.

Piecemaker_Register

How to use?

1. Add the Piecemaker Widget to your page
Enter the web page design mode and click "Sitetools/AddContent" then find the Piecemaker widget under Misc category in WidgetExplorer

add_toPage

2.Upload the image files
Goto "Sitetools/Consoles/File manager" to upload the image files to DotNetAge

upfiles

3.Edit the Piecemaker.xml file
This xml definition is so complex for me , so i copy the original xml file from source download and add the elements to the element


<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
  <Contents>
    <Image Source="http://localhost/webshared/home/PM/image1.jpg" Title="Image 1" />
    <Image Source="http://localhost/webshared/home/PM/image2.jpg" Title="Image 2" />
    <Image Source="http://localhost/webshared/home/PM/image3.jpg" Title="Image 3" />
    <Image Source="http://localhost/webshared/home/PM/image4.jpg" Title="Image 4" />
    <Image Source="http://localhost/webshared/home/PM/image5.jpg" Title="Image 5" />
    <Image Source="http://localhost/webshared/home/PM/image6.jpg" Title="Image 6" />
  </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>

4.Upload the piecemaker.xml
I found the piecemaker.xml must be placed in the same folder with images otherwise the Piecemaker could't load the xml file.

5.Set the xmlSource
Set the piecemaker.xml url to xmlSource user preference field and click save.

Final_output

Conclusion

As you see i use the Razor ViewEngine to create this widget and you also can use the Html Engine to create it. BWT the Html engine can auto references all scripts and styles after widget loaded.

Average:
Reads
(2639)
Trackback
(0)
http://www.dotnetage.com/openapi/trackback/6923
Permalink

http://www.dotnetage.com/publishing/dna/2011/09/21/6923/create-a-3d-image-rotator-widget-with-piecemaker.html