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

Hybrid CMS and Taxonomies: A Deep Dive into dotCMS Search Capabilities

When choosing a CMS solution, one of the most critical things to look for is powerful search capabilities. We'll look at why search capabilities are crucial for a CMS, and how dotCMS provides powerful...

What is CCPA and What Does it Mean for Your Data Compliance & Content Management?

There’s a trend towards consumer data privacy regulations with GDPR in Europe and now CCPA in California. Are you taking the necessary steps to ensure your organization will remain compliant?

Headless Experience Management Done Right

Managing customer experiences in today’s omnichannel world can be hard if you don’t leverage the technology to do the work for you.

How dotCMS Hybrid CMS Streamlines Global Publishing at Scale

Globally distributed content publishing is often complex, but it doesn’t have to be. Learn about the push publishing capabilities of dotCMS, which streamlines enterprise content delivery worldwide.