banner rotator with text

21 posts by 3 authors in: Forums > CMS Builder
Last Post: January 21, 2010   (RSS)

By drewh01 - January 13, 2010

On the link below I have a flash based banner image rotator ( http://www.longtailvideo.com/players/jw-image-rotator ) that pulls the images from a CMS upload field:

http://chambermusicsedona.com/index.php

What I need to figure out is how to get a text area (name and concert date) that displays with each image that rotates. I will also have this data pull from the upload Details for each image upload. I envision that when the image appears the name of the concert with the concert date will appear with the rotating image.

I am trying to avoid adding this text via Photoshop.

Does anyone have any suggestions or know of a function that will do this? I am also willing to use a Javascript based solution as well if Flash is not able to work.

Re: [drewh01] banner rotator with text

By Chris - January 13, 2010 - edited: January 13, 2010

Hi drewh01,

Can you please attach the full PHP source code for http://chambermusicsedona.com/flash.xml.php?
All the best,
Chris

Re: [drewh01] banner rotator with text

I am currently working on a church website design and am using an XML based Flash slideshow I found on Active Den. It has a feature which allows animated text to be added to each photo. I am pretty impressed so far and have contacted the developer and he has been very responsive to my questions. I have already set it up using CMSB and I am fine tuning it now. I had actually hoped to get it perfected and put together a tutorial for this forum - time permitting.

You might want to check it out. It is $12.00 and in my opinion worth it for the dynamic text feature available.

http://activeden.net/item/banner-slideshow-with-smooth-text-animation/46008

Hope this helps.

Kevin

Re: [chris] banner rotator with text

By drewh01 - January 13, 2010

<?php header('Content-type: application/xml; charset=utf-8'); ?><?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<?php

require_once "/home/chamberm/public_html/cmsAdmin/lib/viewer_functions.php";

list($home_pageRecords, $home_pageMetaData) = getRecords(array(
'tableName' => 'home_page',
'limit' => '1',
));
$home_pageRecord = @$home_pageRecords[0]; // get first record

// show error message if no matching record is found
if (!$home_pageRecord) {
header("HTTP/1.0 404 Not Found");
print "Record not found!";
exit;
}

?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

<?php foreach ($home_pageRecord['flash_images'] as $upload): ?>
<track>
<location>http://216.22.60.63/cmsAdmin/uploads/<?php echo $upload['filename'] ?></location>
</track>
<?php endforeach ?>


</trackList>
</playlist>

Re: [kevbarker] banner rotator with text

By drewh01 - January 13, 2010

wow, I think that the active den script is the way to go. I would love to learn how to integrate it into my CMS.

Re: [drewh01] banner rotator with text

It's fairly easy to setup with CMSB. You just have to create any of the fields (that you want the user to control) and have CMSB build your XML file (which contains all of the parameters) for the Flash slideshow. Much like you are doing now with the one you have, but with this one you will have text as well.

I have used SlideshowPro for years and usually prefer that but the animated text, as Chris said, is gorgeous on this one and you can even embed your own custom fonts as well if you have Flash 8 or higher and don't mind a little Actionscript. There are some fairly good instructions included with it as well. I hope this helps.

Here is a sample of the XML it uses so you can get an idea of what you need to do if you decide to purchase. You can choose as many or as few of the settings as you want to be controlled by CMSB.


<?xml version="1.0" encoding="utf-8"?>
<main

stageWidth=""
stageHeight=""
stageBgColor=""
stageBgTransparency=""

imageWidth=""
imageHeight=""
imageTransitionType="auto"
imageResize="none"
imageAlign="TL"
imageRandomDisplay="no"
imageAutoPlay="yes"

thumbnails="yes"
thumbnailWidth="0"
thumbnailHeight="0"
thumbnailToThumbnailSpacing="3"
thumbnailsArrangeHorizontal="yes"
thumbnailsAutoHide="yes"
thumbnailsMaskSize="0"
thumbnailsScrollSpeed="95"
thumbnailsAlign="BR"
thumbnailsLeftSpace="0"
thumbnailsRightSpace="90"
thumbnailsTopSpace="0"
thumbnailsBottomSpace="7"

textEmbedFont="yes"
textShadowTransparency="70"
textShadowDistance="2"

buttonAutoHide="yes"
buttonBgColor="ffffff"
buttonIconColor="000000"
buttonAutoPosition="yes"

>


<!-- slide1 -->
<slide
image="banner_asset/image1.jpg"
thumbnailText="1"
textTransitionType="2"
textWidth=""
textAlign="BL"
textLeftSpace="45"
textRightSpace="0"
textTopSpace=""
textBottomSpace="30"
slideShowDelay="4"
url="" target="_blank">
<text font="2" leftMargin="" ><![CDATA[<b><font size="25" >BANNER / SLIDESHOW</font></b>]]></text>
<text font="1" leftMargin="" ><![CDATA[<font size="20" color="#CFFAFC" >Simple way to show images on your homepage with animated text.</font>]]></text></slide>

<!-- slide2 -->
<slide
image="banner_asset/image2.jpg"
thumbnailText="2"
textTransitionType="2"
textWidth=""
textAlign="BL"
textLeftSpace="35"
textRightSpace=""
textTopSpace=""
textBottomSpace="30"
slideShowDelay="4"
url="" target="">
<text font="1" leftMargin="" ><![CDATA[<b><font size="20" >Add </font><font size="40" >MULTIPLE LINES.</font></b>]]></text>
<text font="1" leftMargin="35" ><![CDATA[<b><font size="20" >for each slide, set different Left Margin, Width and <font color="#FF0000">COLOR.</font></font></b>]]></text></slide>

<!-- slide3 -->
<slide
image="banner_asset/image3.jpg"
thumbnailText="3"
textTransitionType="4"
textWidth=""
textAlign="BL"
textLeftSpace="35"
textRightSpace=""
textTopSpace=""
textBottomSpace="30"
slideShowDelay="5"
url="" target="">
<text font="2" leftMargin="" ><![CDATA[<b><font size="25" color="#CCFF99" >TEXT ANIMATION:</font></b>]]></text>
<text font="1" leftMargin="" ><![CDATA[<b><font size="20" >Five types of animations are available</font></b>]]></text>
<text font="1" leftMargin="" ><![CDATA[<b><font size="20" >Fade, Move from Left, Right, Top and Bottom.</font></b>]]></text></slide>

<!-- slide4 -->
<slide
image="banner_asset/image4.jpg"
thumbnailText="4"
textTransitionType="2"
textWidth=""
textAlign="BL"
textLeftSpace=""
textRightSpace="35"
textTopSpace=""
textBottomSpace="30"
slideShowDelay="5"
url="http://flashden.net/user/FMedia" target="_blank">
<text font="1" leftMargin="20" ><![CDATA[<b><font size="20" >Option to choose <font size="40" >FIVE</font> different image transitions with auto transition.</font></b>]]></text>
<text font="1" leftMargin="20" ><![CDATA[<b><font size="20" >Click over the image will launch a <u>URL</u>.</font></b>]]></text></slide>

<!-- slide5 -->
<slide
image="banner_asset/image5.jpg"
thumbnailText="5"
textTransitionType="1"
textWidth="350"
textAlign="C"
textLeftSpace=""
textRightSpace=""
textTopSpace="50"
textBottomSpace=""
slideShowDelay="5"
url="" target="">
<text leftMargin="" ><![CDATA[<b><p align="center"><font size="20" >Options for</font></p></b>]]></text>
<text leftMargin="" ><![CDATA[<b><p align="center"><font size="25" >HORIZONTAL & VERTICAL</font></p></b>]]></text>
<text leftMargin="" ><![CDATA[<b><p align="center"><font size="20" >thumbnails arrangement</font></p></b>]]></text></slide>


<!-- slide6 -->
<slide
image="banner_asset/image6.jpg"
thumbnailText="6"
textTransitionType="5"
textWidth="350"
textAlign="TR"
textLeftSpace=""
textRightSpace="35"
textTopSpace="35"
textBottomSpace=""
slideShowDelay="5"
url="" target="">
<text leftMargin="" ><![CDATA[<b><p align="right"><font size="40" >FONT</font><font size="20" > can be embed / none embed.</font></p></b>]]></text>
<text leftMargin="" ><![CDATA[<b><p align="right"><font size="20" >Easy to change the embed font type.</font></p></b>]]></text>
<text leftMargin="" ><![CDATA[<b><p align="right"><font size="20" >Support HTML format text.</font></p></b>]]></text></slide>


<!-- slide7 -->
<slide
image="banner_asset/image7.jpg"
thumbnailText="7"
textTransitionType="1"
textWidth="450"
textAlign="C"
textLeftSpace=""
textRightSpace=""
textTopSpace=""
textBottomSpace=""
slideShowDelay="4"
url="" target="">
<text leftMargin="" ><![CDATA[<b><p align="center"><font size="30" >Easy to position the</font></p></b>]]></text>
<text leftMargin="" ><![CDATA[<b><p align="center"><font size="30" >Text & Thumbnails</font></p></b>]]></text>
<text leftMargin="" ><![CDATA[<b><p align="center"><font size="20" >using align and spacing options.</p></font></b>]]></text></slide>

<!-- slide8 -->
<slide
image="banner_asset/swf_file.swf"
thumbnailText="8"
textTransitionType="2"
textWidth=""
textAlign="BL"
textLeftSpace="15"
textRightSpace="15"
textTopSpace=""
textBottomSpace="30"
slideShowDelay="16"
url="" target="">
<text font="2" leftMargin="" ><![CDATA[<b><font size="25" color="#CCFF99" >TRANSITION EFFECTS:</font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16" color="#CCCCCC" >
Using auto transition option the images can be automatically animated by five different transitions:</n></n></font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16">1. Simple Fade-in</font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16">2. Move </font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16">3. Diagonal fade </font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16">4. Radial fade.</font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16">5. Circular Mask.</font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16" color="#CCCCCC">
* Option to choose any one of the transition for whole banner.</font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16" color="#CCCCCC">* Display short and long text with smooth animation. </font></b>]]></text>
<text leftMargin="" ><![CDATA[<b><font size="16" color="#CCCCCC">* Text animation can be Simple Fade, Move from Left, Right, Top or Bottom.</font></b>]]></text></slide>


</main>



Kevin

Re: [kevbarker] banner rotator with text

By drewh01 - January 14, 2010 - edited: January 14, 2010

ok, purchased. I think I may need a few tips on where to start as I am blanking a bit.

I tried to set up the new xml.php file but cannot get it to load. Do I need to modify the SWF file (fla)?

Here is my XML output file:

http://chambermusicsedona.com/banner_asset/data.xml.php (view source)



<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<?php

require_once "/home/chamberm/public_html/cmsAdmin/lib/viewer_functions.php";

list($home_pageRecords, $home_pageMetaData) = getRecords(array(
'tableName' => 'home_page',
'limit' => '1',
));
$home_pageRecord = @$home_pageRecords[0]; // get first record

// show error message if no matching record is found
if (!$home_pageRecord) {
header("HTTP/1.0 404 Not Found");
print "Record not found!";
exit;
}

?>





<main

stageWidth="607"
stageHeight="282"
stageBgColor=""
stageBgTransparency=""

imageWidth="607"
imageHeight="282"
imageTransitionType="auto"
imageResize="none"
imageAlign="TL"
imageRandomDisplay="no"
imageAutoPlay="yes"

thumbnails="no"
thumbnailWidth="0"
thumbnailHeight="0"
thumbnailToThumbnailSpacing="3"
thumbnailsArrangeHorizontal="yes"
thumbnailsAutoHide="yes"
thumbnailsMaskSize="0"
thumbnailsScrollSpeed="95"
thumbnailsAlign="BR"
thumbnailsLeftSpace="0"
thumbnailsRightSpace="90"
thumbnailsTopSpace="0"
thumbnailsBottomSpace="7"

textEmbedFont="yes"
textShadowTransparency="70"
textShadowDistance="2"

buttonAutoHide="yes"
buttonBgColor="ffffff"
buttonIconColor="000000"
buttonAutoPosition="yes"

>
<?php foreach ($home_pageRecord['flash_images'] as $upload): ?>


<slide
image="http://chambermusicsedona.com/cmsAdmin/uploads/<?php echo $upload['filename'] ?>"
thumbnailText="1"
textTransitionType="2"
textWidth=""
textAlign="BL"
textLeftSpace="45"
textRightSpace="0"
textTopSpace=""
textBottomSpace="30"
slideShowDelay="4"
url="" target="_blank">
<text font="2" leftMargin="" ><b><font size="25" ><?php echo $upload['info1'] ?></font></b></text>
<text font="1" leftMargin="" ><font size="20" color="#CFFAFC" ><?php echo $upload['info2'] ?></text>

</slide>

<?php endforeach ?>




</main>

Re: [drewh01] banner rotator with text

By Chris - January 14, 2010 - edited: January 14, 2010

Hi drewh01,

You shouldn't need to modify the SWF. It looks like the SWF figures out where to load the XML file from via an HTML tag:

<PARAM NAME="flashvars" VALUE="dataPath=banner_asset/data.xml">

It's probably only a matter of changing that to "dataPath=/banner_asset/data.xml.php".

Does that help? Please let me know how it goes. :)
All the best,
Chris

Re: [chris] banner rotator with text

By drewh01 - January 14, 2010

Where did you locate this piece of code?

<PARAM NAME="flashvars" VALUE="dataPath=banner_asset/data.xml">