GRAPHIC NEWS INTERACTIVE (last modified 25Mar09) 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. GN12345W.zip decompresses to a folder called "GN12345 interactive". How the files are organized 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 Play is an application, drag GN12345_proofing.swf onto the application icon. If you receive an Adobe Flash security message about communicating with www.graphicnews.com, this can be disregarded - this relates to the loading of live data into the graphic. You will still be able to edit the captions. 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 (DO NOT RENAME the .xml file), and re-load the Flash graphic. Only edit the words between the [square brackets]. Text enclosed in tags is bold. NB: For best results, preserve line lengths and tabs as they appear in the original xml file. 3. TO VIEW YOUR WORD CHANGES Save your revised .xml file. Do not rename it. 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 SaveAs or by setting Preferences 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 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 section of the page in which the graphic will be located. 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: Your text here For an image link (e.g an iconic "play" button such as GN22747) use the following cut-and-paste code:

Remember to change "gn_swf/GN12345/GN12345.swf" and the width and height 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.