{\rtf1\ansi\ansicpg1252\cocoartf949\cocoasubrtf540
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;\red35\green49\blue255;\red255\green8\blue32;}
\paperw11900\paperh16840\margl1440\margr1440\vieww16900\viewh18560\viewkind0
\deftab720
\pard\pardeftab720\ql\qnatural

\f0\b\fs24 \cf0 GRAPHIC NEWS INTERACTIVES (01Jan2011)\
\
This ReadMe gives general instructions about using Graphic News Interactives. We will shortly be making this ReadMe available sa Technical Guide with a link from our web site. Instructions and notes relating to a specific interactive will be given in the .xml file, together with a description (caption) for the interactive. \

\b0 ------------------------
\b \
Update August 2010 (Interactives after 
\b0 GN26707):  The packaging of interactives has been simplified to give greater flexibility placing the files on your web site, removing the rigid folder structure required previously.  The code embedded on your web page can now include a "base" parameter to indicate to the swf where to find the xml files - See 4 below). This also avoids the need for a separate proofing swf. The Flash buttons have been updated to allow their use with or without a lightbox (and are now compatible with the latest version of Shadowbox, see 5. below).\

\b Update January 2011:
\b0  A preview image in .jpg format is downloadable with each interactive graphic. This can be used as a button on your website to link to the graphic\
------------------------\
------------------------\
Graphic News Interactives are designed in Flash for web sites. Adobe Flash is used to create "Rich Internet Applications" with interactivity, animation, video and sound. Flash CS4 is used with Action Script 2 or 3. \

\b Action Script 
\b0 is a programming language used within Flash. \

\b FLA
\b0  files are created by Flash and can be re-opened or modified by Flash. They are saved to SWF for web publication\

\b SWF
\b0  stands for "small web format" (originally "shock wave flash"), pronounced "swiff". They are not modifiable. \
\
So Graphic News Interactives can be translated or edited the words are included in a separate  XML file (XML standing for extensible markup language). To change the words, no knowledge of Flash is required, but you will need to install Flash Player and use a text editor (see below). The text boxes in the interactive include all the character sets used by different European languages, including Greek and Russian. Arabic and other right-to-left reading languages are not yet fully Flash-XML compatible so graphics supplied in Arabic do not have editable XML\
\
Graphic News Interactives that show live sports results update automatically drawing from an xml feed on a Graphic News server. Contact helpdesk@graphicnews.com if you would like the results sent by ftp to a server of your choice. \
------------------------\
------------------------\

\b 1. DOWNLOADABLE FILES\
When you download interactive graphics from http://www.graphicnews.com, for example for GN12345, first download the W.zip (i.e. GN12345W.zip), decompress and read any specific instructions at the beginning of the xml file (see 2.2 below). 
\b0 \
\

\b W.zip 
\b0 - This contains the SWF file needed to play the graphic on your own computer or on your website, plus other files as shown below: --\
\
GN12345W.zip decompresses to the graphic folder called "GN12345W"  with the following contents (plus other files depending on the nature of the graphic):\'a0\

\b GN12345W
\b0 \
		-	GN12345.swf\
		-	GN12345.xml (contains any translatable/editable text), plus description of graphic (caption) and any specific instructions) \
		-	styles.css (controls the format of the text - colour, size, font)\
		-\'a0	images (folder containing .jpg images)\

\b GNInteractivesReadMe i.e. this file\
\
GN12345W.jpg        
\b0 This is a preview image that can be used as a button on your website to link to the graphic.\
\

\b L.zip
\b0  - This contains an animated Flash button which will open the graphic in a lightbox (see below). No words are contained in these buttons so no "translation" is required. If you wish to include a caption on your website saying what the graphic shows, a suggestion is included in the description of the graphic at the beginning of the .xml file in the graphic folder.:\
GN12345L\
		-\'a0	GN12345L.swf\
		-	GN12345L.xml (edit this file to direct the link to a different page from that specified)\
\

\b B.zip
\b0  - This contains an animated Flash button to open the graphic in a web page:\
GN12345B\
		-\'a0	GN12345B.swf\
		-	GN12345B.xml (edit this file to direct the link to a different page from that specified)\
\

\b F.zip -
\b0  This contains the FLA file. Ignore this file unless you are an artist with Flash and you want to modify the graphic artwork itself, tailor it to your own editorial requirements, or use the coding for a different Flash graphic.\
------------------------\
------------------------\

\b 2. TO TRANSLATE OR EDIT THE WORDS \
2.1 Play the graphic on your desktop: 
\b0 \

\b Open the file GN12345.swf with Flash Player 
\b0 (download the Flash Player debugger (not plugin) from www.adobe.com and install) by dragging it onto the application icon\
\

\b NOTE: Interactives with live data: 
\b0 If you receive an Adobe Flash security message, this relates to the loading of live data into the graphic. You must click on Settings, at which point your browser will load the Macromedia Global Security Settings web page. Click on Add location and then Browse for files... to the swf file you were trying to play. Once you restart Flash Player you should be able to play the file without problems.\
\

\b NOTE: Soccer Interactives with live data: 
\b0 These interactives need to be served from a webserver (i.e. you can not play them on your desktop as you can the other interactives). Your computer can be made to act as a webserver by turning on Web sharing on a Mac (or the equivalent on a PC) and following 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. \
On a Mac turn on the built-in Apache webserver as follows:\
1. Open System Preferences, open Sharing, select Web Sharing\
You will see a message saying:\
\'93Your personal website, in the Sites folder in your home folder, is available at this address\'94\
followed by a URL e.g. http://192.168.0.2/~username/\
2. Put the whole folder that you want to check e.g. GN12345, into the folder Macintosh HD > Users > username > Sites.\
Open your browser and go to http://192.168.0.2/~username/GN12345/GN12345.html\
3. Make the necessary changes to your xml. Reload the page in your browser to see your changes.\
 \

\b 2.2. Open the file GN12345.xml in Text Edit 
\b0 (or the equivalent PC editing program) and ready any instructions specific to the graphic at the top . Complex graphics may have more than one xml. If the text is not readable when the file is opened check your Text Edit Preferences. \
\

\b NOTE: Text Edit: 
\b0 Simple text editing program supplied with Macs. Files can be viewed in Plain Text format (as against rich text). If you then Save As you must select Plain Text encoding Unicode (UTF-8). Set the Preferences to open and save files this way. \
(Do not use complex word processing packages such as Word as the additional coding these add will make the xml unusable.)
\b \
\
2.3 Edit only the words between the brackets in the .xml file as shown in blue below .\'a0
\b0 \
<HOME_TEAM>\cf2 Home Team\cf0 </HOME_TEAM>\
<POSITION_GOAL_KEEPERS><![CDATA[\cf3 <b>\cf0 <font size='12' color='#000000'>\cf2 Goal Keeper\cf0 </font>\cf3 </b>\cf0 ]]></POSITION_GOAL_KEEPERS>\
\

\b NOTE 
\b0 Do NOT change any of the the tags such as <HOME_TEAM> or </HOME_TEAM> at the beginning and end of the lines. \
\

\b NOTE Formatting (colour, size, font): 
\b0 Some formatting instructions for particular lines of text may be specified in the .xml file. For example, text enclosed in \cf3 <b>\cf0 tags\cf3 </b> \cf0 is 
\b bold.
\b0 \'a0Alternatively text formats may be specified in the 
\b CSS file 
\b0 (stands for cascading style sheet) to allow formats for whole sections of text to be changed at once (rather than individually). \
\

\b NOTE Line length: 
\b0 The 
\b text boxes
\b0  do include some flexibility for line length changes, and some (but not all) automatically add a scroll bar if the line length increases. For best results, preserve line lengths and tabs as they appear in the original xml file. Only adjust the point size if unavoidable. \
\

\b 2.4 Save As: Plain Text (encoding UTF-8). DO NOT RENAME the xml file. \

\b0 \

\b 2.4. View your word changes 
\b0 \
Save your revised .xml file. Do not rename it.\'a0\
NB 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\
Close and then re-open the file GN12345.swf to see your changes (or for sports interactives with live results by refreshing your browser window)\
------------------------\
------------------------\

\b 3. PLACE THE GRAPHIC ON YOUR WEBSITE
\b0 \
When you first start to use GN interactive graphics, we recommend you create a folder "gn_swf" on your website and place all GN interactive graphics inside this folder. This is a useful way to keep all GN interactives in one place. (For files before GN26706 this was mandatory - for these files each includes a ReadMe with appropriate instructions)\
\
Place the folder "GN12345W" \'a0in the gn-swf folder on your website. You can now embed the file GN12345.swf into your web page.\
\
If, when you open the web page in a browser, the graphic fails to load the text, edit the embed code to include a "base" parameter to indicate to the graphic where to find the xml files, e.g.\
\
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600"><param name="movie" value=".gn_swf/GN12345W/GN12345.swf">
\b <param name="base" value="gn_swf/GN12345W/">
\b0 </object>\
\

\b 4. RESULTS FEEDS
\b0 \
For graphics with data that updates automatically, the graphic is coded to take the data from a Graphic News server. If you want to host the data on your own local server, the results can be sent to you by FTP (as part of the Graphic News FTP service) and the graphic redirected to your server. Contact Graphic News for further information. \
\

\b 5. USING A LIGHTBOX
\b0 \
A lightbox is a stylish and convenient way to display interactive graphics as it keeps the original page visible underneath. You can use a lightbox for static graphics and pictures as well as interactive graphics.\
\
a. \'a0Download Shadowbox from the www.shadowbox-js.com. Place the folders on your website as instructed.\'a0\
\
b. Add the following inside the <head></head> section of the page in which the graphic will be located N.B. the version numbers and locations of the files in this example may differ for your website, PLEASE change as necessary!\
\

\b <link rel="stylesheet" href="Scripts/shadowbox-3-1.0.3/shadowbox.css" type="text/css" />\
<script src="Scripts/shadowbox-3-1.0.3/shadowbox.js" type="text/javascript"></script>\
 <script type="text/javascript">\
Shadowbox.init();\
var openShadowBox = function(player, title, content, width, height)\{ Shadowbox.open(\{ player: player, title: title, content: content, width: width, height: height  \}); \} </script> \'a0 \'a0 \'a0
\b0 \

\b \'a0
\b0 \
c. To open Shadowbox from your web page, either place the Flash button GN12345L.swf onto the web page or create your own text or image button.\
\
For a link use the following cut-and-paste code:\

\b <a href="gn_swf/GN12345/GN12345.swf" rel="shadowbox; width=800; height=600" title="&copy; Graphic News">
\b0 Your text or image here
\b </a>
\b0 \
\
If text is not loading in the graphic, embed the graphic in an html page, remembering to use the base parameter as described above. Then point your link to the html page as follows:\

\b <a href="GN12345.html" \'a0rel="shadowbox;height=600;width=800;player=iframe" title="&copy; Graphic News">
\b0 Your text or image here
\b </a>
\b0 \
\

\b ABOUT SHADOWBOX
\b0 \
Shadowbox is a javascript lightbox and can be downloaded free of charge from http://www.shadowbox-js.com, 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.}