Blogs

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

 

xLDen>en GoogleC
flashBanner.swf
September 07, 2009

Filed Under:

flash swf

Recommended Reading

24.04.24 LTS: Upgrade to the Universe

Now available: dotCMS 24.04.24 LTS, the first long-term supported release of 2024

Getting started with the dotCMS Universal Visual Editor with Next.js

In this blog post, I’ll demonstrate how you can get started with the Universal Visual Editor and Next.js in just fifteen minutes.

Mastering the New Universal Visual Editor in dotCMS: A Technical Deep Dive for Developers

Explore dotCMS's Universal Visual Editor, merging WYSIWYG simplicity with headless CMS flexibility. This tool offers drag-and-drop editing, inline content editing, and NoCode tooling for seamless omni...