Piecemaker Flash Slider with Gallery module

There are many Wordpress Themes that use cool sliders like Piecemaker or Cuber, so i thought i would share my way how this can be used with CMSMS and load slider images dynamicaly with Gallery module.

Before we start you should look at official Piecemaker homepage to see what we will be using.

piecemaker-teaser-with-gallery.jpg

As first we will need few files and modules for our attempt.

Step 1:

First open one of the .fla files from the downloaded package of Piecemaker in Flash CS4 or CS5 (CS3 doesn't support the 3D engine) . You can take piecemaker.fla for effect with shadow or piecemakerNoShadow.fla for effect without shadow.
Whe you open the .fla file Falsh "Actions" (i am using German version but it should be in "Windows -> Actions") and replace this code:

stage.scaleMode = StageScaleMode.NO_SCALE;
piecemaker.xmlSource = "piecemakerXML.xml";
piecemaker.cssSource = "piecemakerCSS.css";
piecemaker.imageSource = "images";
piecemaker.dispatchEvent(new Event("properties"));

Replace this code with following:

stage.scaleMode = StageScaleMode.NO_SCALE;  
var allFlashVars:Object = LoaderInfo(this.root.loaderInfo).parameters;  
piecemaker.xmlSource = String(allFlashVars.xmlSource);  
piecemaker.cssSource = String(allFlashVars.cssSource);  
piecemaker.imageSource = String(allFlashVars.imageSource);  
piecemaker.dispatchEvent(new Event("properties"));

function shadowSize (e:Event) {
   shadowMC.width = piecemaker.imageWidth * 1.1;
   shadowMC.x = piecemaker.x - shadowMC.width / 2;
   shadowMC.y = piecemaker.y + piecemaker.imageHeight * 0.35;
}

Now save the file and export, if you don't have Flash CS4 or CS5 you can download edited files from my example page http://demo.i-arts.eu/piecemaker

Now create a folder for example i used name "piecemaker" and place .swf files, the swfObject folder with containing files and piecemakerCSS.css in this folder, upload the folder to CMS Made Simple /uploads folder.

Step 2

We go to Gallery module and create new Template (i named it Piecemaker), delete all preconfigured code.
And enter this in the "Template Source:" part:

<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">
      var flashvars = {};
      flashvars.xmlSource = "{root_url}/feeds/{$page_alias}";
      flashvars.cssSource = "{root_url}/uploads/piecemaker/piecemakerCSS.css";
      flashvars.imageSource = "{root_url}/";
      var attributes = {};
      attributes.wmode = "transparent";
      swfobject.embedSWF("{root_url}/uploads/piecemaker/piecemakerShadow.swf", "flashcontent", "960", "610", "10", "{root_url}/uploads/piecemaker/swfobject/expressInstall.swf", flashvars, attributes);
</script>

And this in "Template JavaScript:" part (you can skip this part if you have it included in your page template already):

<script type="text/javascript" src="http://www.yourdomain.com/uploads/piecemaker/swfobject/swfobject.js"></script>

As you can see i am using {ldelim}$page_alias{rdelim} in Gallery template, this means we could integrate this on multiple pages if we create each Gallery we want to use with directory name as alias of the page we are going to use and CGFeedMaker feed with the same name.

If you want to use one Gallery folder you should remove {ldelim}$page_alias{rdelim} and enter the name of the feed you will be creating now.

Step 3

Open CGFeedMaker and create new Feed, named either as mentioned above according to alias of the page you want to use or whatever you enter as flashvars.xmlSource source.

Our Feed template looks like this:

<?xml version="1.0" encoding="utf-8"?>
<Piecemaker>
    <Settings>
        <imageWidth>450</imageWidth>
        <imageHeight>200</imageHeight>
        <segments>12</segments>
        <tweenTime>1.7</tweenTime>
        <tweenDelay>0.1</tweenDelay>
        <tweenType>easeInOutBack</tweenType>
        <zDistance>0</zDistance>
        <expand>20</expand>
        <innerColor>0x111111</innerColor>
        <textBackground>0x0064C8</textBackground>
        <shadowDarkness>100</shadowDarkness>
        <textDistance>25</textDistance>
        <autoplay>12</autoplay>
    </Settings>
    {Gallery dir='test' assign='galpics'}
    {foreach from=$images item=image}
    <Image Filename="{$image->thumb}">
        <Text>
            <headline>{$image->titlename}</headline>
            <break>Ӂ</break>
            <paragraph>{$image->comment}</paragraph>
            <break>Ӂ</break>
        </Text>
    </Image>
    {/foreach}
</Piecemaker>

If you are using {$page_alias} option you need to change this part for each Gallery you want to include:

{Gallery dir=$page_alias assign='galpics'}

And thats it.

ALL-INKL.COM - Webhosting Server Hosting Domain Provider

Comments