VIDEO
Video animations promote engagement by immersing the viewer in a self-playing animated sequence.SPECIFICATION
- 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.
FAQ: What files can I download?
Each graphic comprises a Hype project, a css style sheet and a json text file containing all the captions. A folder named GN12345V_EN contains an mp4 video file which will play on the web, and a jpg file which acts as a placeholder before the graphic starts to play. The contents of this folder are required for web use.
If you go to download you will be given a choice of:
ZIP:Video
ZIP:Preview Placeholder image
ZIP:Embed code
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)
_____[GN12345V_min_EN]
*__________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.
If you go to download you will be given a choice of:
ZIP:Video
ZIP:Preview Placeholder image
ZIP:Embed code
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)
_____[GN12345V_min_EN]
*__________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.
FAQ: How can we publish video animations?
If you haven’t used video infographics before, an easy way to start is to use the embed code supplied by Graphic News. This is a small piece of code (available at the point of download) that you can paste onto your web page. If you click on the Download button for a video, embed code is one of the options. Click here for more information about embed code.
FAQ: How can I change the words?
Unlike Graphic News HTML interactives, with Graphic News videos Tumult Hype is required to make any changes, including text changes. This is because, although the words are stored in an external JSON file which can be edited in a simple text editor, after modification it is necessary to output a new mp4 video file. If you edit the video in any way, you'll need to host it yourselves, rather than publish using the embed code provided by Graphic News.
- 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.
FAQ: How can a video be modified?
• The Hype project contains all the instructions for the animation, so design changes need to be made within Hype. The video infographics were produced with Tumult Hype v4 and can be modified with Hype Pro for Mac OS.
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
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