====== How to add JW Image Rotator 3.17 (XML/FLASH) ======

Hello, this is my first contribution for the awesome Magento store, in this article we will add the functionality of a Flash Image Gallery with XML Params and variables.

===== Install the files =====

  - Download the JW IMAGE ROTATOR 3.17 (a great opensource flash banner script) from [[http://www.jeroenwijering.com/?item=JW_Image_Rotator]], inside the imagerotator.zip will be some archives, we will use the **swfobject.js**, **madrid.xml**,**imagerotator.swf** and the 3 images in there.
  - In your /app/design/frontend/default/default/layout/page.xml, search this text <block type="page/html_head" name="head" as="head"> in the next line copy and paste this text. 
<code java><action method="addJs"><script>js/swfobject.js</script></action></code>
  - Go to your js directory and copy the **swfobject.js** in there.
  - In this case I will use the **Media** folder for my images, but its indiferent, and all my paths needs to be ABSOLUTE, for example, http://www.mystore.com/media/madrid1.jpg
  - Copy the **madrid.xml** and **imagerotator.swf** to the media folder

===== Adding the code =====

  - Now edit for XML file, the options are easy (like this totorial:-)) the things to know are, <location>madrid1.jpg</location>, this isn't an absolute URL, change it to <location>http://www.mystore.com/media/madrid1.jpg</location> and remember, the <info> ... </info> is the URL when you click the image rotator (if you want of course).
  - Go to your admin console into the Home Page in ”Manage Pages” add this:
<code java>
<div id="myContent" style="text-align:center;">
<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg"></a><p>Hey! To view the section below as an interactive content feed</p><p> please install the latest version of the Adobe Flash Player clicking <a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0">here</a></p>
</div>
<script type="text/javascript">
var s0 = new SWFObject("http://www.mysite.com/media/imagerotator.swf","myContent","470","230","9","#FFFFFF", "http://www.mysite.com/media/expressInstall.swf");
s0.addParam("allowfullscreen","true");
s0.addParam("wmode","transparent");
s0.addParam("allowscriptaccess","always");
s0.addParam("flashvars", "file=http://www.mysite.com/media/madrid.xml&autostart=true&allowscriptaccess=always&showicons=false&transition=slowfade&shownavigation=true&overstretch=false&backcolor=0x000000&repeat=true&rotatetime=5&shuffle=false&linktarget=_self&linkfromdisplay=true&width=470&height=230");
s0.write("myContent");
</script>
</code>
  - Now click SAVE.

===== Handling Flash Banner clicks =====

Flash has an internal attribute called [[http://www.flashclicktag.com/ | clickTAG]] that we can use.

All you need to do is create a button on top layer, make it transparent (Alpha 100%) and add this code in the button action

<code java>
on (release) {
  getURL(clickTAG, "_top");
}
</code>

Export the movie and you're done with the Flash file, now, we just need to add a new flashvar called 

<code>
clickTAG=http://mystore.com/myproduct
</code>

the example above with the clickTAG would be:

<code java>
<div id="myContent" style="text-align:center;">
<a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0"><img src="http://www.adobe.com/macromedia/style_guide/images/160x41_Get_Flash_Player.jpg"></a><p>Hey! To view the section below as an interactive content feed</p><p> please install the latest version of the Adobe Flash Player clicking <a href="http://www.adobe.com/go/getflashplayer" target="_blank" border="0">here</a></p>
</div>
<script type="text/javascript">
var s0 = new SWFObject("http://www.mysite.com/media/imagerotator.swf","myContent","470","230","9","#FFFFFF", "http://www.mysite.com/media/expressInstall.swf");
s0.addParam("allowfullscreen","true");
s0.addParam("wmode","transparent");
s0.addParam("allowscriptaccess","always");
s0.addParam("flashvars", "clickTAG=http://mystore.com/myproduct&file=http://www.mysite.com/media/madrid.xml&autostart=true&allowscriptaccess=always&showicons=false&transition=slowfade&shownavigation=true&overstretch=false&backcolor=0x000000&repeat=true&rotatetime=5&shuffle=false&linktarget=_self&linkfromdisplay=true&width=470&height=230");
s0.write("myContent");
</script>
</code>

===== Tracking click (Optional) =====

Maybe you want a way to track how many clicks a banner had, what I'm doing here is to ADD a new TABLE to your MAGENTO Database but you can have it written to a file if desire, just follow some PHP Write to File tutorials.

  - Open your mySQL tool (normally [[http://www.phpmyadmin.net/ | phpMyAdmin]]
  - Execute the code:
<code sql>
CREATE TABLE IF NOT EXISTS `ads_tracking` (
  `ad_tracking_id` int(6) NOT NULL auto_increment,
  `ad_datetime` datetime NOT NULL,
  `ad_referer` varchar(150) NOT NULL,
  `ad_click` int(6) NOT NULL default '1',
  `ad_clientip` varchar(150) default NULL,
  `ad_querystring` varchar(150) default NULL,
  PRIMARY KEY  (`adrecord_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=778;
</code>
  - Now that the code is in place, let's go back to our Magento FTP and create a folder called 'ads' on the root of the Magento installation (where app and skin folders are)
  - create a PHP file, named track.php and fill it up with this [[http://pastebin.com/f373bdff6 | content]]
  - Now you just need to change the clickTAG flashvar to something like: <code>clickTAG=http://mystore.com/myproduct?adid=Banner_001</code>


TODO: You can easily create a page named index.php into ads folder with the fetch of this table information and navigate to http://www.mystore.com/ads and see the Banners results

===== Recomendations =====

  * Don't forget the **ABSOLUTE PATH** of all files. (CMS, script, and xml file)
  * Where, **myContent** is the display of the banner.
  * **"470","230","9","#FFFFFF"** are Height, Weight, flash version, and color of the background of the image rotator.
  * the **flashvars** are the aditional parameters of the image rotator, [[http://code.jeroenwijering.com/trac/wiki/Flashvars3|look out here]] for the full list of vars.
  * Leave the other content alone.
  * My magento version is 1.3.2.4 but was tested on 1.1.6 as well, so, works everywhere (at least 1.1.6+)
  * And remember **the swfobject.js is a better way to put flash into magento.**

Now your flash image rotator banner should be operating, thanks for your time! :-D, want help? PM Me.

Author of the page: joxmiguel
Click handling and Tracking: balexandre 


{{http://img258.imageshack.us/img258/7915/bannerjoxmigueltc2.jpg |The Image Rotator in the front page}}