GRAPHIC NEWS LIVE MATCH TRACKER (last modified 10May2010)

Match Tracker graphics are designed in Flash for web sites.  For each match the tracker shows pre-match information including squad members and starting line-up, with live results during the match including goals, yellow and red cards, substitutions and rolling statistics until the final whistle. Visitors to web sites can therefore follow all the key events from before the teams are announced to the last kick of the ball.

Match trackers can either be embedded into web pages or displayed in a lightbox. Flash buttons are supplied to create these links.
 
The same coding can be used to generate tracker graphics for single matches or all the matches in a competition. Each match is identified by a specific match ID (see GN12345Matches.txt below). Simply duplicate the html (see GN12345.html below)and replace the ID where appropriate for a particular match to show on your web site. Alternatively, the more sophisticated solution is to use a single page template to dynamically display all the matches (see below)

The results feeds are served automatically from a Graphic News server. Contact Graphic News if you would prefer to host the live data on your own servers to speed up loading times in your country. 

The ReadMe below gives information on how to use Match Tracker graphics. If you need help please contact helpdesk@graphicnews.com +44 207 404 4280
------------------------------
------------------------------
1. Download
Download the match tracker for the competition from http://www.graphicnews.com. For match tracker GN12345, download file GN12345W.zip and decompress to a folder called GN12345 interactive.

How the files are organized is important because the text for the Flash graphic GN12345.swf are in the .xml file, so the .swf flash graphic file has to know where to find the words. (This is similar to having a .jpg picture linked to an Illustrator file). DO NOT RENAME. 

Contents GN12345W.zip 
GN12345 interactive (folder)
-	GN12345ReadMe.txt (instructions)
-	GN12345Matches.txt (list of matches in the competition)
	-	GN12345 (folder)
		-	GN12345.html (this contains the code required to play the match console)
		-	GN12345.swf (the match tracker)
		- 	images (folder)
		-	xml (folder)
			-	translate.xml  (this contains the fixed words in the graphic)
		-	style.swf
		-	swfobject.js (recommended javascript for displaying flash in a web page)
		-	framework_3.5.0.12683.swf (Runtime Shared Libraries to cache application on user's computer for speed)
		-	framework_3.5.0.12683.swz
		-	framework_4.0.0.14159.swz
		-	osmf_flex.4.0.0.13495.swz
		-	playerProductInstall.swf
		-	rpc_4.0.0.14159.swz
		-	spark_4.0.0.14159.swz
		-	sparkskins_4.0.0.14159.swz
		-	textLayout_1.0.0.595.swz

Contents GN12345B.zip
GN12345B (folder)
-	GN12345B.swf (Flash button to open the match tracker in a web page)
-	button.xml
-	team_crests (folder)

Contents GN12345L.zip
GN12345L (folder)
-	GN12345L.swf (Flash button to open the match tracker in a Javascript lightbox)
-	button.xml
-	team_crests (folder)

The following files are also downloadable separately:
GN12345ReadMe.txt (instructions)
GN12345.html (this contains the code required to play the match console)
GN12345Matches.txt (list of matches in the competition)

1. TO PLAY GRAPHIC ON YOUR DESKTOP 
**To see the graphic play (because of the results data) it needs to be served from a web server (i.e. it can't play on your desktop like our other interactive graphics). You can make your computer act as a webserver by turning on Web sharing (on a Mac) or the equivalent on a PC, and follow the computer's instructions for placing your files. Alternatively you could ask your system administrator to place the file on a suitable "test" webserver and then view the application by opening GN12345.html in a browser window.

2. TO TRANSLATE OR EDIT THE WORDS
There are very few words that need to be translated.
To translate these words, open the file translate.xml in Text Edit, Notepad or other text editor) and edit the appropriate words. 
e.g. 
		<VENUE><![CDATA[<font size='12' color='#000000'>Venue: <b>$VALUE</b></font]]>></VENUE>
		<KICK_OFF><![CDATA[<font size='12' color='#000000'>Kick-off: <b>$VALUE</b></font>]]></KICK_OFF>
		<LOCAL_TIME><![CDATA[<font size='12' color='#000000'>Local Time: <b>$VALUE</b></font>]]></LOCAL_TIME>
		<DATE><![CDATA[<font size='12' color='#000000'>Date: <b>$VALUE</b></font>]]></DATE>

Do NOT change any of the the tags such as <VENUE> or </VENUE> at the beginning and end. Do NOT change $VALUE.
NB: For best results, preserve line lengths as they appear in the original xml file.
-- Save the file. DO NOT RENAME IT. When you save in Text Edit you need to select Plain Text, and in addition, you need to specify the encoding as UTF-8 when you Save As or by setting Preferences. 
-- See your changes by refreshing your browser window.

3. PLACE THE GRAPHIC FILES ON YOUR WEBSITE
When you first start to use GN interactive graphics, create a folder "gn_swf" on your website. You can place all GN interactive graphics inside this folder. Take the folder "GN12345" from within the folder "GN12345 interactive" and place this in the gn_swf folder on your website. 

4. TO DISPLAY A DIFFERENT MATCH
The file GN12345.html allows you to view one specific match. To view a different match, locate the text
flashvars.matchId = 1413624;

GN12345Matches.txt is a list of matchID numbers for all the matches in the tournament. Replace the number with the ID number for another match to display this in the match tracker.

Feel free to adapt the page to your own requirements or to place the graphic in a different page, copy and paste the code. Remember to include the line <script type="text/javascript" src="swfobject.js"></script> between the <head></head> tags in your new page.

5. USING A SINGLE PAGE TEMPLATE TO DYNAMICALLY DISPLAY ALL MATCHES
You can use one page as a template to load all the matches, by sending two variables in your HTTP request, e.g 
<a href="gn_swf/GN12345/GN12345.html?matchID=1415981&compID=41">Link text</a>
Then place those variables into GN12345.html. e.g. if you are using php 
flashvars.fixturesUrl = "http://www2.graphicnews.com/infostradasports/xml/soccer/GN25760_Fixtures<?php echo $_REQUEST['compID']; ?>.xml";
flashvars.matchId = <?php echo $_REQUEST['matchID']; ?>;

6. USING A FLASH BUTTON AS A LINK
The files GN12345B.zip and GN12345L.zip contain the files for a Flash button which can be used as a link to the match tracker. GN12345B.swf will open the match tracker in your browser window, while GN12345L.swf will open it in a lightbox (see below). Supplied with each is an xml file in which you can change the crests and the page to which it links. You must change the cross-domain policy to your own website.

<cross-domain-policy><allow-access-from domain="www.graphicnews.com" /></cross-domain-policy>
<crest1>team_crests/MNU.png</crest1>
<crest2>team_crests/TOT.png</crest2>
<link>gn_swf/GN12345/GN12345.html</link>

7. USING A LIGHTBOX
A lightbox is a stylish and convenient way to display interactive graphics as it keeps the original page visible underneath. To see an example look at the Graphic News Gallery. You can use a lightbox for static graphics and pictures as well as interactive graphics.

a.  Download Shadowbox from the Graphic News website -- GN22748. Place the "src" folder inside the folder on your website where javascripts are stored, e.g. "Scripts". 

b. Download a file "openShadowbox.js" from the Graphic News website -- GN23476. Place this  file inside the "src" folder on your website. This is required to use the Flash buttons supplied with the interactive graphics, e.g. GN12345B.swf.

c. Add the following inside the <head></head> section of the page in which the graphic will be located.
	<script src="Scripts/src/shadowbox.js" type="text/javascript"></script>
	<script src="Scripts/src/skin/classic/skin.js" type="text/javascript"></script>
    	<script type="Scripts/javascript">window.onload = Shadowbox.init;</script>  
	<script src="Scripts/src/openShadowbox.js" type="text/javascript"></script>
	<link href="Scripts/src/skin/classic/skin.css" rel="stylesheet" type="text/css" />

d. To open Shadowbox from your web page, either place the Flash button GN12345B.swf onto the web page or create your own text or image button.

For a text link use the following cut-and-paste code:
<a href="gn_swf/GN12345/GN12345.html" rel="lightbox; width=800; height=600; player=iframe" title="&copy; Graphic News">Your text here</a>

For an image link (e.g an iconic "play" button such as GN22747) use the following cut-and-paste code:
<a href="gn_swf/GN12345/GN12345.html" rel="lightbox; width=800; height=600; player=iframe" title="&copy; Graphic News"><img src="gn_swf/Your.jpg"></a>

Remember to change "gn_swf/GN12345/GN12345.swf" to correspond to the actual graphic you want to use. When you download GN12345W.zip, the width and height are shown below the graphic preview in the download window.

ABOUT SHADOWBOX
Shadowbox is a javascript lightbox produced by Michael J.I. Jackson and can be downloaded free of charge with the link on the GN22748 download page, or directly from his website http://mjijackson.com/shadowbox/index.html, where you will find comprehensive information about the lightbox and how to use it. We have a Commercial Licence that includes our subscribers, but we need to keep count of numbers so you must register with us to use Graphic News Interactives.