GRAPHIC NEWS INTERACTIVE (October 2008)

When you download interactive graphics from http://www.graphicnews.com you should see two files. For example, with graphic GN12345 you would see GN123435W.zip and GN12345F.zip

F.zip - 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.

W.zip is the file you need to play the graphic on your own computer or on your website. Download this file.

GN12345W.zip decompresses to a folder called "GN12345 interactive". How the files are organized within this folder is important because the words 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)
-	GN12345_proofing.swf
-	ReadMe.txt
-	gn_swf (folder)
	-	GN12345 (folder)
		-	GN12345.swf
		-	GN12345.xml
		-	GN12345B.swf (Flash button)

1. TO PLAY THE INTERACTIVE GRAPHIC ON YOUR DESKTOP
Open the file GN12345_proofing.swf with Flash Player (free download from www.adobe.com). If your Flash Player is installed as a plug-in to your browser, drag GN12345_proofing.swf onto a browser page. If you Flash Player is an application, drag GN12345_proofing.swf onto the application icon.

2. TO TRANSLATE OR EDIT THE WORDS
Open the file GN12345.xml in a text editor. You can do this whilst you are viewing the Flash graphic in Flash Player, but you will only see your changes after you save), and re-load the Flash graphic.
--	DO NOT RENAME the .xml file 
--	Only edit the words between the [square brackets] 
--	Text enclosed in <b>tags</b> is bold. 
--	For best results, preserve line lengths and tabs as they appear in the original.

3. TO VIEW YOUR WORD CHANGES
Save your revised .xml file. Do not rename it.
Close and then re-open the file GN12345_proofing.swf.

4. PLACE THE GRAPHIC ON YOUR WEBSITE
When you first start to use GN interactive graphics, create a folder "gn_swf" on your website. You will place all GN interactive graphics inside this folder. If your web site is NOT structured so that this folder is on the same level as the web pages, an alias of the gn-swf folder will be needed at the same level as the html page in which the graphic will be placed.
--	Take the folder "GN12345" from within the folder "GN12345 interactive" and place this in the gn-swf folder on your website. 
--	You can now embed the file GN12345.swf into your web page. Alternatively you can display the graphics in a lightbox. 

5. USING A LIGHTBOX
A lightbox is a stylish and convenient way to display interactive graphics as the original page is visible underneath. You can use a lightbox for static graphics and pictures as well as interactive graphics - See the Gallery on the Graphic News web site. 

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.swf" rel="lightbox; width=550; height=450" 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.swf" rel="lightbox; width=550; height=450" title="&copy; Graphic News"><img src="gn_swf/Your.jpg"></a>

Remember to change "gn_swf/GN12345/GN12345.swf" and the width and height to correspond to the actual graphic you want to use. The width and height are shown below the preview image when you download a graphis. 

ABOUT SHADOWBOX: Shadowbox is a javascript lightbox produced by Michael J.I. Jackson and can be downloaded from from the Graphic News website GN22748, or 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.
