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

Exploring TimeMachine: How dotCMS Handles Content Versioning

With dotCMS, tools like TimeMachine and Workflow Management help enterprises control content versioning, content edits, user permissions, workflows and more.

Digital Ambition Requires Ambitious Technology

When it comes to the content foundation of a digital experience platform, critical capabilities are reasonably straightforward. There are only four, really - since security, scalability and containeri...

Optimizing On-page SEO in dotCMS

In this blog, I will show you how to use dotCMS to make your SEO life easier. We'll take a look at code examples of how to programmatically ensure best practices for some of your SEO tasks.

Scripting as a Service: A Look at dotCMS’s Scriptable API Builder

For years, developers have had to build custom REST endpoints to enable brands to deliver experiences to mobile devices, social channels and IoT devices. While this practice is perfectly valid, we hav...