Cool 3D Slider with News or Gallery Module
Posted: Thu Sep 16, 2010 2:15 pm
I have seen many Wordpress Templates using Flash 3D sliders like Cu3er or Piecemaker, so i though i would try integrating this in CMSMS.
My first though was "wow cool ill go create a module" well it was just a thought, at the moment i am to stupid and need to go through CMSMS API
But still i have tried to use other ways available in CMSMS, as the system is so versatile and in combination with right moudles you can create whatever you want.
Before we continue you maybe some of you wonder what Piecemaker or Cu3er is, it's XML driven flash Slider with 3D effect, you can see it in action on Developer pages, please note i am not Flash fan, but for now i don't know any possible way to recreate an effect like this and if it could even be possible with combination of HTML5, CSS3 and some JS Framework it for sure wouldn't work on all current browser.
Piecemaker (opensource): http://www.modularweb.net/piecemaker/
Cu3er (was opensource before): http://getcu3er.com/
So let's start with News module.
As first you can see Demo here: http://demo.i-arts.eu/piecemaker
We need:
Piecemaker http://www.modularweb.net/piecemaker/ (you can also download edited files from my demo page)
swfObject script http://code.google.com/p/swfobject/
News 2.10.6
CGExtensions 1.19.5
CGFeedMaker 1.0.11
SuperSizer Plugin 0.94
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:
with this code:
Step 2
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 3
As next we move on to News Module. For this we will create news Summary Template (i named it "Piecemaker" as following:
Step 4
We also need "Extra Field" for image upload, name it for example "sliderimage", select "File" from dropdown and tick checkbox for "Public".
The summarytemplate doesn't do much but embeds the Flash player and parameters we need, to make it work we also need swfobject.js which we uploaded with "piecmaker" folder so we will also need to edit our page Template.
We simply include the script either in part of the template or before tag:
Step 5
Now we need XML file that will include our News entries and images, for this we go to CGFeedMaker module under "Extensions -> Calguys Feed Maker" and create new Feed.
In our Summary template we already have a call to this feed.
So we will name our Feed "piecemaker" as you can see above. (please note that i used "mod_rewrite" for my demo page!)
And this is the Template we are going to use for "piecemaker" feed:
You can use the part XML template and change parameters to your linking, like size, color, speed and so on.
Also take note that i use SuperSizer plugin to resize images on the fly and save some time, for detailed parameters of SuperSizer plugin please check Supersizer WIKI http://wiki.cmsmadesimple.org/index.php ... rsizer#FAQ
And this is it, all we have to do now is write some News, upload images through News Extra Field "sliderimage" and call News smarty tag where we want this slider, either in Template or Content.
You were talking about Gallery Module, so how does this work?
As first you can see Demo here: http://demo.i-arts.eu/test
We need:
Piecemaker http://www.modularweb.net/piecemaker/ (you can also download edited files from my demo page)
swfObject script http://code.google.com/p/swfobject/
Gallery 1.4.1
CGExtensions 1.19.5
CGFeedMaker 1.0.11
Follow Steps 1 and 2 from above.
Step 3
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:
And this in "Template JavaScript:" part (you can skip this part if you have it included in your page template already):
As you can see i am using {$page_alias} in Gallery template, this means we could integrate this on multiple pages if we create each Gallery we want to used with directory name as alias of the page we are going to use and CGFeedMaker feed with the same name.
So i have a page with alias "test", a Gallery with folder "test" and Feed with name "test"
If you want to use on Gallery folder you should remove {$page_alias} and enter the name of the feed you will be creating now.
Step 4
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.
And the template looks like this:
Step 5
And thats it, all you need to do now is include your Gallery somwhere in page Template or Content
I hope my english, typos and writing were not to painfull and you can maybe find some use of this writeup.
My first though was "wow cool ill go create a module" well it was just a thought, at the moment i am to stupid and need to go through CMSMS API
But still i have tried to use other ways available in CMSMS, as the system is so versatile and in combination with right moudles you can create whatever you want.
Before we continue you maybe some of you wonder what Piecemaker or Cu3er is, it's XML driven flash Slider with 3D effect, you can see it in action on Developer pages, please note i am not Flash fan, but for now i don't know any possible way to recreate an effect like this and if it could even be possible with combination of HTML5, CSS3 and some JS Framework it for sure wouldn't work on all current browser.
Piecemaker (opensource): http://www.modularweb.net/piecemaker/
Cu3er (was opensource before): http://getcu3er.com/
So let's start with News module.
As first you can see Demo here: http://demo.i-arts.eu/piecemaker
We need:
Piecemaker http://www.modularweb.net/piecemaker/ (you can also download edited files from my demo page)
swfObject script http://code.google.com/p/swfobject/
News 2.10.6
CGExtensions 1.19.5
CGFeedMaker 1.0.11
SuperSizer Plugin 0.94
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:
Code: Select all
stage.scaleMode = StageScaleMode.NO_SCALE; piecemaker.xmlSource = "piecemakerXML.xml"; piecemaker.cssSource = "piecemakerCSS.css"; piecemaker.imageSource = "images"; piecemaker.dispatchEvent(new Event("properties"));
trace ("Thank you for downloading The Piecemaker 3D image rotator gallery by \nmodularweb. Find all information about the gallery on the official website \nhttp://www.modularweb.net/piecemaker.\n\nThe Piecemaker is brought to you by modularweb and Activetuts+. \nmodularweb is a framework for creating premium Flash websites based on \nmodular elements. The Piecemaker is just one of these elements. If you'd \nlike to use the whole framework or work with us in general, please contact \nus at welcome@modularweb.net.\n\nMore information: http://www.modularweb.net\nMore elements: http://www.modularweb.net/elementbox\n\nTO REMOVE THIS MESSAGE, DELETE LINE 8 OF THE CODE!")
Code: Select all
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 3
As next we move on to News Module. For this we will create news Summary Template (i named it "Piecemaker" as following:
Code: Select all
<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>
{literal}
<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>{literal}
<__script__ type="text/javascript">
var flashvars = {};
flashvars.xmlSource = "{/literal}{root_url}{literal}/feeds/piecemaker";
flashvars.cssSource = "{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerCSS.css";
flashvars.imageSource = "{/literal}{root_url}{literal}/";
var attributes = {};
attributes.wmode = "transparent";
swfobject.embedSWF("{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerShadow.swf", "flashcontent", "960", "610", "10", "{/literal}{root_url}{literal}/uploads/piecemaker/swfobject/expressInstall.swf", flashvars, attributes);
{/literal}
We also need "Extra Field" for image upload, name it for example "sliderimage", select "File" from dropdown and tick checkbox for "Public".
The summarytemplate doesn't do much but embeds the Flash player and parameters we need, to make it work we also need swfobject.js which we uploaded with "piecmaker" folder so we will also need to edit our page Template.
We simply include the script either in part of the template or before tag:
Code: Select all
<__script__ type="text/javascript" src="http://www.yourdomain.com/uploads/piecemaker/swfobject/swfobject.js">
Now we need XML file that will include our News entries and images, for this we go to CGFeedMaker module under "Extensions -> Calguys Feed Maker" and create new Feed.
In our Summary template we already have a call to this feed.
Code: Select all
flashvars.xmlSource = "{/literal}{root_url}{literal}/feeds/piecemaker";
And this is the Template we are going to use for "piecemaker" feed:
Code: Select all
<?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>60</shadowDarkness>
<textDistance>25</textDistance>
<autoplay>12</autoplay>
</Settings>
{news assign='junk'}
{foreach from=$items item='entry'}
{assign var=id value=$entry->id}
{assign var=image value=$entry->nimage}
<Image Filename="{supersizer path=uploads/news/id$id/$image width=450 height=200 unique='true' overwrite='true' url='true'}">
<Text>
<headline>{$entry->title|cms_html_entity_decode}</headline>
<break>Ӂ</break>
{capture assign='description'}{if !empty($entry->summary)}{$entry->summary}{else}{$entry->content}{/if}{/capture}
<paragraph>{$description|trim|strip_tags|summarize:40}
<break>Ӂ</break>{$entry->morelink}</paragraph>
<break>Ӂ</break>
</Text>
</Image>
{/foreach}
</Piecemaker>
Also take note that i use SuperSizer plugin to resize images on the fly and save some time, for detailed parameters of SuperSizer plugin please check Supersizer WIKI http://wiki.cmsmadesimple.org/index.php ... rsizer#FAQ
Step 6{supersizer path=uploads/news/id$id/$image width=450 height=200 unique='true' overwrite='true' url='true'}
And this is it, all we have to do now is write some News, upload images through News Extra Field "sliderimage" and call News smarty tag where we want this slider, either in Template or Content.
Code: Select all
{news summarytemplate='Piecemaker'}
As first you can see Demo here: http://demo.i-arts.eu/test
We need:
Piecemaker http://www.modularweb.net/piecemaker/ (you can also download edited files from my demo page)
swfObject script http://code.google.com/p/swfobject/
Gallery 1.4.1
CGExtensions 1.19.5
CGFeedMaker 1.0.11
Follow Steps 1 and 2 from above.
Step 3
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:
Code: Select all
<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>{literal}
<__script__ type="text/javascript">
var flashvars = {};
flashvars.xmlSource = "{/literal}{root_url}/feeds/{$page_alias}{literal}";
flashvars.cssSource = "{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerCSS.css";
flashvars.imageSource = "{/literal}{root_url}/{literal}";
var attributes = {};
attributes.wmode = "transparent";
swfobject.embedSWF("{/literal}{root_url}{literal}/uploads/piecemaker/piecemakerShadow.swf", "flashcontent", "960", "610", "10", "{/literal}{root_url}{literal}/uploads/piecemaker/swfobject/expressInstall.swf", flashvars, attributes);
{/literal}
Code: Select all
<__script__ type="text/javascript" src="http://www.yourdomain.com/uploads/piecemaker/swfobject/swfobject.js">
As you can see i am using {$page_alias} in Gallery template, this means we could integrate this on multiple pages if we create each Gallery we want to used with directory name as alias of the page we are going to use and CGFeedMaker feed with the same name.
So i have a page with alias "test", a Gallery with folder "test" and Feed with name "test"
If you want to use on Gallery folder you should remove {$page_alias} and enter the name of the feed you will be creating now.
Step 4
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.
And the template looks like this:
Code: Select all
<?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>
{capture assign='galpics'}{Gallery dir='test'}{/capture}
{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>
And thats it, all you need to do now is include your Gallery somwhere in page Template or Content
Code: Select all
{Gallery dir=$page_alias template='Piecemaker'}