Creating a flash piece that pulls content from dotCMS
Sep 07, 2009Build a Dynamic Flash Banner with Slider Control using JavaScript
Step 1.
Create a new "flashBanner" content structure in dotCMS - The structure fields can be simple (e.g. Title, Short Description, Link, Image, etc... )
Step 2.
Create a new "flashBanner" container - Use JavaScript to pull content and set the banner array for flash
Complete JavaScript and Flash Embed code : "content variable for flash.vtl"
Begin by setting the banner variable as a new array in the "Pre-Loop" box.
var banner = new Array();
In the "Code" box, set the banner object in a new array.
var bannerObj = new Array();
bannerObj[‘title'] = $Title";
bannerObj[‘shortDescription'] = $shortDescription'";
bannerObj['storyLink'] = "#if($UtilMethods.isSet($Link))$Link#{else}null#end";
bannerObj['imgURL'] = "http://$SERVER_NAME/resize_image?inode=$imageImageURI&w=760";
banner.push(bannerObj);
In the "Post Loop" box, from the above array, set variables for flash and call the flash banner.
Here's the simple code array and variables for the flash banner
function toSetFlashVars(){
for(var i = 1; i <= banner.length; i++) {
if(window.flashBanner) window.document["flashBanner"].SetVariable("title"+i, banner[i-1].title);
if(document.flashBanner) document.flashBanner.SetVariable("title"+i, banner[i-1].title);
if(window.flashBanner) window.document["flashBanner"].SetVariable("shortDescription"+i, banner[i-1].shortDescription);
if(document.flashBanner) document.flashBanner.SetVariable("shortDescription"+i, banner[i-1].shortDescription);
if(window.flashBanner) window.document["flashBanner"].SetVariable("storyLink"+i, banner[i-1].storyLink);
if(document.flashBanner) document.flashBanner.SetVariable("storyLink"+i, banner[i-1].storyLink);
if(window.flashBanner) window.document["flashBanner"].SetVariable("imgURL"+i, banner[i-1].imgURL);
if(document.flashBanner) document.flashBanner.SetVariable("imgURL"+i, banner[i-1].imgURL);
}
if(document.flashBanner) document.flashBanner.SetVariable("totalNumbb", banner.length);
}
.
.
.
Next, call flash function:
<script language="javascript"> AC_FL_RunContent = 0; </script>
<script language="javascript"> DetectFlashVer = 0; </script>
<script src="/global/js/AC_RunActiveContent.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
var requiredMajorVersion = 8;
var requiredMinorVersion = 0;
var requiredRevision = 0;
</script>
<div>Add Flash Embed code here</div>
Step 3.
Create a new Flash file and name it flashBanner.
On the first frame in the Flash timeline, we need to call the function "toSetFlashVars".
- getURL("JavaScript:toSetFlashVars()");
Next, parse it in the second frame for animation.
this.onEnterFrame=function(){
_root.acg=_root.acg + 1;
if(totalNumbb){
for(i=1; i<=totalNumbb; i++){
if(i==totalNumbb){
gotoAndPlay(2);
delete this.onEnterFrame;
}
}
}
}
Start from third frame, add codes for slide images, duration, controller, etc...
Sample Flash File: "flashBanner.swf"
Step 4.
Create a new page with a "flashBanner" container, start adding new/reused contents and flash will do the rest - fade in/out, add links to images, display title and short description, etc...
Have fun!
Sample:
http://demo.dotcms.org/home/flash-components.dot