VIDEOVideo animations promote engagement by immersing the viewer in a self-playing animated sequence.
- Principle: Videos are available in mp4 or mov format, but created in Tumult Hype v4 or later.
- Easy to publish using the embed code supplied by Graphic News to display the graphic (hosted on Graphic News servers) in an iframe (see below). Alternatively you can download and host video infographics on your own servers.
- Editable and translatable using a simple text editor. This is possible because the words are contained in a text file "external" to the video.
- The design can be modified in Tumult Hype as the "master" files are supplied in a folder in the downloadable .zip. Unlike our interactive HTML graphics, it is necessary to output a new mp4/mov video file once anything has been changed, even if just the text.
If you go to download you will be given a choice of:
ZIP:Preview Placeholder image
If you download the ZIP: Video, e.g. GN12345W_video_EN.zip, this decompresses to a folder [GN12345W_video_EN]. Inside this:
_____GN12345 (master file)
_____GN12345.json (editable text)
_____gnstyles.css (editable stylesheet)
_____GN12345R_EN.jpg (landscape preview image)
*__________GN12345.mp4 (the video file to publish)
*__________GN12345V_EN.jpg (the placeholder image before the video loads)
The * folder and *mp4 file were created from the “master” Hype file GN12345 (note the absence of a suffix).
If you want to edit/translate the text, the words in the captions are in the JSON file - this is a particular type of text file. If you want to modify the structure of the graphic you will need the master file. If you just want to publish the graphic, all the resources are in the 'min' folder. But if you're wanting to publish it without modification, the easiest way is to use the downloadable embed code.
- Download the video infographic you want to use and identify the JSON file containing the words.
- Open the JSON in your text editor. You should be able to read the text. If not, close the file without saving, check the Preferences, and try again.
- Edit the text and save. Although programs like Word edit text, they cannot be used for editing code because they add invisible formatting characters. Most computers include a simple text editor, such as TextEdit supplied with Macs. Notepad is supplied with PCs but not all versions are suitable. A suitable text editor for Mac or PC can be obtained free of charge if you go to http://www.activestate.com/komodo-edit/downloads and this program has the advantage of distinguishing the syntax in colours. This makes it easier to distinguish the “content” from the “markup”, for example Ultraedit and Coda.
When you open and save JSON files you have to be careful because you can only use Unicode characters and these have to be encoded in very specific ways, such as UTF-8 encoding.
- Once you have changed the words, open the Hype master file and you will be notified that changes have been made. Update the master file as instructed, resave and then output the video file again using the settings Export as Movie > Video > Frame rate: 30fps, Codec: H.264
- Resize the text, or change it’s style (as described below), if necessary repeating the above.
To check the preferences of your text editor are set correctly i.e. open files in Plain Text Format (rather than Rich Text Format), and save files to Plain Text, encoding Unicode (UTF-8):
• Download the video animation you want to use and identify the JSON file containing the words.
• Open in your text editor. You should be able to read the text. If not, close the file without saving, check the Preferences, and try again.
- Preview on your desktop by opening the mp4 file.
Tumult Hypo Pro can be purchased, or a free trial version obtained if you click here
If you modify the video in any way, you'll need to host it yourselves, rather than publish using the embed code provided by Graphic News.
• To make changes with Hype Pro, open and edit the “master” Hype file GN12345. The * folder and *mp4 file (note the absence of a suffix - see FAQ What files can I download?) were created from from the master file by exporting to the Video/folder (see below).
• Simple style changes (e.g basic colour and fonts) can be made in the css using a text editor, while caption changes, e.g. translations, are made in the json file also with a text editor.
• After making any changes in either of these files, Hype will notify you that a change has been made and you should update the Hype file as instructed, before outputting to video:
Export as Movie > Video > Frame rate: 30fps, Codec: H.2