Creating a flash piece that pulls content from dotCMS

Build 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