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
Schedule a call with a dotCMS product specialist to see if dotCMS is right for you.
Request DemoMaintaining or achieving a global presence requires effective use of resources, time and money. Single-tenant CMS solutions were once the go-to choices for enterprises to reach out to different market...
What is cloud computing, and what benefits does the cloud bring to brands who are entering into the IoT era?
What’s the difference between a headless CMS and a hybrid CMS, and which one is best suited for an enterprise?