Blogs

Creating a flash piece that pulls content from dotCMS

Sep 08, 2009

By:

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

 

xLDen>en GoogleC
flashBanner.swf

Filed Under:

Recommended Reading

dotCMS 5.1: A Minor Release With Major Updates

dotCMS 5.1 is here! In line with our efforts to provide enterprise brands with a Content as a Foundation, empowering them to build, orchestrate and deploy their digital experience platform, dotCMS 5.1...

SEO and Page Performance in dotCMS

Optimizing your site performance with dotCMS for better SEO and user experience.

Developer Tutorial: How to Use dotCMS and React to Build Single Page Apps

This step-by-step guide takes you through how to use a headless CMS, like dotCMS, and React to build a single page app.