Innovation @ BBG » KettleCorn Fri, 20 Nov 2015 18:47:05 +0000 en-US hourly 1 Top Writing Tips for Journalists Writing to Video, Multimedia Fri, 14 Feb 2014 17:48:43 +0000 Erica Malouf Have you ever watched a news segment or video and been completely and happily absorbed in the story? Or conversely, have you ever been so distracted by the choppy audio and unnecessary narration that you didn’t enjoy it?

As many a broadcast and multimedia journalists know, achieving “happily absorbed” is a skill and an art. But as with any kind of writing, we can study what the pros do.

I’ve adapted most of these tips from a webinar given by a master: Al Tompkins, Senior Faculty, Broadcast and Online at The Poynter Institute. (With some notes of my own.)


When writing to news videos, whether for broadcast or a digital platform, it’s important to keep your writing tight! As Al Tompkins says, ‘the biggest sin is wasting the time of the audience.’

Understand Storytelling: Engaging stories usually follow a tried-and-true formula because…it works. I like to think that the basics of such formulas were figured out during the campfires of cavemen. Storytelling is a defining characteristic of humanity, and your audience is definitely familiar with common story structure even if they aren’t conscious of it. Generally speaking, the audience will like it when a story starts with conflict and ends with resolution.

Pick a Formula: Tompkins recommends the “Hey! You, See, So” structure for news videos. Meaning, start with “Hey!” (the attention grabber), then “You” (the WIIFM—why this is relevant to the viewer), “See” (show evidence), and “So” (the point—what this is all about).

Start Strong: For a news story, jump into the information—don’t waste time with a fluffy introduction. For a narrative, create tension right away.

Remove Redundancies: When you’re editing the accompanying narrative to a video, Tompkins says to “train yourself to spot redundancies.” And cut sound bites that repeat what was said earlier.


  • Ask yourself, ‘Do I need that word for people to understand?’
  • Read your sentences backward in order to catch superfluous words.

Prioritize Video Over Narration: Use narration only for what cannot be shown in the video or told in sound bites and ambient audio. For example, if the video is a man walking down a dirt road, don’t waste time telling us “a man walks down a dirt road.” Instead, explain what can’t be understood from the visuals or audio but is critical to the story. Let the viewer figure some things out on their own.

Use Sound Selectively: Sound—ambient noise and sound bites of people speaking—should not stop the action or cut into the narration in a choppy or jarring way. Tompkins says that “popcorn audio” (described as sound that comes from no where and stops the story for no good reason) is a fad in editing that should be forgotten because it’s distracting. When woven into the story carefully, sound can add credibility to the action and bring the viewer into the scene.

Write the Facts: Narration should be almost all factual. Let the emotion and drama come through sound bites and visuals. I once had a professor tell me to “write flat to drama,” meaning let the action speak for itself and leave out subjective opinion.

Review Grammar: Be judicious with adverbs—try to remove words that end in “ly” because often they are unnecessary opinion.  For example, in the phrase “she cried happily,” happily can be removed, especially if the video or the story indicates that she was clearly happy. Use more active verbs that clearly tell who and what did what.


  • I suggest reading the book, “Writing Tools,” by Roy Peter Clark, and “The Elements of Style” by Strunk and White, to brush up on grammar.

Write for the Platform: Create the narration and edit each video based on the platform. Keep in mind that TV is still a passive experience (except for the second screen, meaning people using another device while watching TV). The Internet is about interactivity, plus know that people have shorter attention spans online and so are apt to bounce more quickly if a video isn’t interesting right away. (Try this free, journalist-friendly tool for creating interactive videos online called KettleCorn that our team at ODDI created.)


Watch this video about VOA’s use of Google Glass to record concert of a Beatles cover band. Do you hear any narration that could be cut because the visuals tell the story without it? What worked and didn’t work?

See more videos of the concert on the Relay platform.

]]> 2
Creating Jon Stewart Moments with TV News Archive and KettleCorn Thu, 23 Jan 2014 15:22:13 +0000 Brian Williamson At MozFest 2013, ODDI unveiled KettleCorn, a customized version of Mozilla’s Popcorn Maker, a tool designed to help busy journalists quickly create interactive videos. MozFest is an amazing conference that brings together open-source developers, journalists, educators and activists. One of the most intriguing things that I saw at this year’s conference was the ability to pull video clips from the TV News Archive and edit them in Popcorn Maker.

The TV News Archive is a service provided by the Internet Archive. The site enables users to, “Search more than 516,000 U.S. broadcasts using closed captioning; Borrow broadcasts on DVDs; View and Cite short streamed clips; Compare and Contrast perspectives across networks, stations and time; and Place video quotes within your commentary.” (Here’s an interesting article from the New York Times on the goals of the Internet Archive.)

Last fall at MozFest, Tracey Jaquith (@tracey_pooh) unveiled a very cool new feature of the TV News Archive. After searching and finding a video, users can quote the clip and import it into a Popcorn Maker project.

“When Mozilla integrated Popcorn Maker with, we immediately knew that was a feature we wanted to integrate with KettleCorn,” said Joe Flowers, lead KettleCorn developer for ODDI. Our KettleCorn team got to work soon after returning home from the conference to make this function available.

The integration of TV News Archive with KettleCorn enables you to create Jon Stewart moments.

An obvious potential use of the integration is making one’s own ‘Jon Stewart moments’–on The Daily Show, video clips of a public figures contradicting themselves are strung together for humorous affect.

Watch the short video tutorial explaining how to integrate TV News Archive content into a KettleCorn project:

Interesting in learning how to create web-native videos using KettleCorn? I’ll be doing an intensive 3-hour session at the news:rewired conference in February.

]]> 0
Journalism stories transformed into interactive videos with KettleCorn Wed, 04 Dec 2013 18:55:59 +0000 Brian Williamson Over the last few weeks we’ve been introducing USIM journalists to KettleCorn. One of the best ways we’ve found to showcase KettleCorn’s power is to remix video from our journalists’ archives  at BBG and enhance them with a layer of interactive content. Here are some of the sample projects we created:

Example A: Capitol Hill Shooting

( Alhurra | Middle East Broadcasting Networks )

Alhurra journalists captured this exclusive raw footage of the Oct. 3 shooting on Capitol Hill.

On Oct. 3, Alhurra’s Khaled Khair and Danny Farkas were reporting from the U.S. capitol when they captured exclusive footage of Miriam Carey fleeing from US Capitol Police and Secret Service agents, driving onto the steps of the Capitol and being fired upon by authorities as she sped away. The raw footage that Alhurra posted on YouTube has been viewed over 430,000 times.

It’s compelling raw footage of breaking news. But it raised a lot of questions and presented several opportunities for remixing in KettleCorn.

Here are some of the KettleCorn enhancements we added:

  • We added a basic lower thirds title at the beginning.
  • Within a few hours we had some background on Miriam Carey.
  • We created a map that shows how the events unfolded from the White House to the Capitol. We explained what Alhurra is.
  • We linked to additional coverage.
  • Because the journalists were broadcasting in Arabic, we provided English subtitles.
  • We were able to quickly translate the project and provide Arabic subtitles of the people being interviewed for Alhurra’s target audience.


Example B: Pussy Riot releases ‘Red Prison’ video

( RFERL | Radio Free Europe Radio Liberty )

Russia's punk protest collective, Pussy Riot, criticizes the state controlled oil industry.

Russia’s Pussy Riot is known for wearing brightly colored balaclavas and staging guerrilla performances in unusual public locations that are edited into music videos. In July, the punk protest collective released a new video criticizing Russia’s state controlled oil companies. RFERL received an advance copy of the video, added English subtitles and posted it inside of an article.

We saw this as another opportunity to provide additional context by bringing video into KettleCorn:

  • We added a basic lower third title at the beginning.
  • We linked to the Wikipedia article to provide some basic background on Pussy Riot.
  • We added images and popups to explain iconography and references in the lyrics.
  • We added the subtitles in KettleCorn. KettleCorn makes it easier to add new translations and republish the project in different languages with new subtitles without having to re-edit and re-render the video in a video editor like Final Cut. The translations can be edited by any journalist, not just the person in charge of video editing.


Example C: Explosions in Nigeria

( VOA | Voice of America )

In April 2013, suicide bombers attacked the This Day newspaper in Nigeria.

In April 2012, Boko Haram launched two coordinated attacks against the This Day newspaper in Nigeria. VOA frequently posts raw (VEL) videos. This raw video shows the devastation of the explosion, as well as reaction from people in the community.

KettleCorn provides a simple way to quickly enhance and add context to these raw videos:

  • We added a basic lower thirds title to the video.
  • We created a map showing the two attacks in Nigeria.
  • We displayed wikipedia articles for This Day (in English) and Boko Haram (Arabic).
  • We spliced in footage from the attack.
  • We linked to additional VOA coverage.
  • We added optional lower thirds titles for the people interviewed in the video.


Example of Non-linear Storytelling: Immigration Debate

( VOA | Voice of America )

KettleCorn can help create non-linear, user defined paths through stories.

Traditional audio- and video-based stories are linear. The video starts at the beginning and the user watches it straight through (or until they become bored and click over to watch some animated cat GIFs).

One of the features we were interested in baking into KettleCorn was an easy way to create non-linear interactive stories — a sort of Choose Your Own Adventure for journalism-based stories. We considered creating a stand alone “Choose your own adventure” plugin, but ultimately decided to add the functionality to the existing text- and image-based plugins.

In this example we’re allowing users to click on different participants in the U.S. immigration debate to hear their opinions.

]]> 0
How We Made KettleCorn: NodeJS, CKEditor and Bing’s Translation API Sat, 26 Oct 2013 15:45:39 +0000 Joe Flowers The Office of Digital and Design Innovation (ODDI) development team always looks for ways to empower journalists to tell their stories with ease and elegance. The 1.0 release of the PopcornJS standalone JavaScript library at MozFest 2011 immediately intrigued us because it enabled anyone on our team who was comfortable writing JavaScript to annotate the organization’s audio and video productions with content from a wide variety of internet sources.

As developers, it was very easy for us to understand the power and flexibility of PopcornJS, so we wanted to get involved. We got our feet wet contributing by building a PopcornJS Storify Plugin. We had high hopes to use PopcornJS early and often. However, it was difficult for us to sell PopcornJS outside of our team because of the required programming skills.

We closely followed the development of Popcorn Maker, and we even set up our own instance of one of its alpha releases. When version 1.0 of Popcorn Maker shipped at MozFest 2012 we were thrilled because we hoped it would solve the ‘coding required’ problem. But as KettleCorn product owner Brian Williamson recently explained, we weren’t able to reach the level of adoption we were hoping for a number of reasons, so we began developing a version of Popcorn Maker tailored to the needs of journalists: KettleCorn.

Brian recently outlined KettleCorn’s rich featureset and I’ll use this opportunity to share some of the interesting technical experiences we had when building some of those features.

Rich Text Editing

We chose the open source CKEDITOR as our WYSIWYG editor. We wanted it to be optional for any given text field, so we added an “editor” option to the plugin manifest. There were a couple of interesting considerations to make this work:

  • Popcorn Maker sanitizes text content because it doesn’t allow HTML tags. We had to disable that in cases where the field had a CKEditor in use for input.
  • Popcorn Maker allows on-stage editing for its text fields, but doing so was causing us to lose the formatting that we were doing in the CKEditor. Due to the elegant architecture of Popcorn Maker, this was pretty simple and could be done on a per-plugin bases. We simply commented out calls to EditorHelper.contentEditable()


We looked at a number of machine translation API’s and settled on Bing Translator because Microsoft provides a free plan that allows for up to 2 million characters per month of translation.

We then set about writing the code to allow us to consume their service. First, we retrieved the list of available languages via a one-time call to the GetLanguagesForTranslate endpoint. At that point, all we needed to do was be able to use their Translate endpoint on a regular basis within the KettleCorn authoring environment. We tried the following approaches:

  • Microsoft’s AJAX examples were quickly ruled out because they require ASP.NET.
  • Microsoft’s PHP Client is excellent and we quickly made it work, but running PHP and NodeJS on port 80 on the same server could prove to be difficult.
  • We found our final solution when we stumbled upon Kenan Shifflett’s MsTranslator NodeJS library on GitHub. We installed this in KettleCorn’s node_modules folder, added a route for /translate, and accepted POST parameters for the phrase and target language.

Screenshot of the new KettleCorn maps plugin showing multiple locations.

GoogleMaps+ Plugin

If you click “publish to the web” on a Google Spreadsheet, you are presented with a variety of options for what format you want to retrieve a public link to. We were hoping that we would easily be able to consume JSONP (to avoid any CORS issues), but that option isn’t offered via the public interface. After digging through a number of blog posts and threads about the topic, we found our solution. Every Google Spreadsheet has a key that you can parse from its URL, and you can use that key to obtain JSONP as follows:

We didn’t want to require authors to format their links, so we allow them to enter a normal spreadsheet link, and then we parse the value of ‘key’ from the query string and plug it in. The only downside to this data is that it doesn’t seem to reflect the values from the first column, which is why we have an entire red “do not touch” column in our spreadsheet template.

Lower Thirds Plugin

Our Lower Third plugin allows the user to display an entity logo. In the context of the authoring environment, we wanted the default logo display to be based upon the user’s organization. However, someone who is viewing the published project on a website will not be logged into KettleCorn. We ended up checking for the existence of the window.Butter variable and setting the value of the logo based on the user’s profile when it exists.

End Card Promo Plugin

Getting the end card “90% done” happened pretty quickly, but we wanted the thumbnails and text to be responsive. We initially attempted to do this using just CSS, but getting the layout and images to scale the way we wanted ended up being difficult, so we settled on a table with three equally sized cells.

User Profiles and the Project Showcase

We added a table for user profiles to enable us to customize the presentation and save preferences on a per-user basis. If we were using PHP and MySQL, querying the database for all projects authored by a user would be as simple as writing an inner join and iterating through the results set. However, Popcorn Maker uses Sequelize as an ORM for data persistence, which greatly simplifies data access from NodeJS. Unfortunately, it wasn’t immediately obvious how to join our two tables together using Sequelize.  It’s clearly something that can be done based on the documentation, but we ran out of time researching it, so we had to settle for a limited functionality in the showcase for our release, and we will revisit this functionality later.

There’s More!

We would be more than happy to share more technical information and experiences with any interested developers. Feel free to tweet us @bbgKettleCorn or leave a comment below!

]]> 1
KettleCorn: A journalist’s tool for enhancing interactive audio and video stories Fri, 25 Oct 2013 14:49:40 +0000 Brian Williamson This summer, ODDI began forking the open source Popcorn Maker project to create KettleCorn, a tool designed to meet the needs of journalists working around the world in different languages. The original Popcorn Maker project allows web creators to easily create interactive audio and video stories using a WYSIWYG web editor. Projects can be shared, remixed and evolve from person to person.

KettleCorn Updates

Our goal with KettleCorn was to build upon our favorite Popcorn Maker features while tailoring it to the needs of international journalists. To encourage adoption, we strove to reduce the time to publish news-style video while making it as easy as possible to translate projects to another language. With those goals in mind, we added the following features:


Improved subtitles (Updated Jan. 22)

We’ve created a dedicated Subtitles plugin so that users can quickly subtitle a single quotation or an entire video.

When we launched KettleCorn, users could add subtitles one at time by using the Text plugin. This solution worked fine for subtitling a short quotation. But manually adding subtitles for an entire project, line by line (with an additional click and scroll to select the style and positioning) was time consuming.

With the new Subtitles plugin, a user can quickly subtitle a segment by clicking on the plugin and filling in the text field. By default the subtitle is positioned across the bottom of the project.

Users can also insert the link to a published Google Spreadsheet with the subtitles for an entire video. The user simply fills in this template with the start and stop times, the subtitle text, the position of the subtitle (top or bottom) and whether the text needs to be displayed right-to-left (TRUE or FALSE). Then the user selects “File”>”Publish to the Web” and clicks on the “Start Publishing” button. The user copies and pastes the resulting URL into the Advanced tab of the Subtitles Plugin. (We’ve created a simple transcript converter. Insert your transcript text, click the convert button and then copy and paste the output into a new Google Spreadsheet.)

Chris Hadfield sings 'Space Oddity' with Spanish subtitles.
The subtitles for this KettleCorn project of Astronaut Chris Hadfield’s performance of ‘Space Oddity’ are powered by this spreadsheet.

Using a spreadsheet for the subtitles has many benefits:

  • It’s easier and faster to create and edit multiple subtitles on one sheet.
  • It’s a simple process to copy the original spreadsheet page and provide translations.
  • And it’s easy to collaborate on a project by sharing the spreadsheet with another editor.

As long as the spreadsheet URL and page name are included in the KettleCorn project, the translations will automatically be updated as the spreadsheet is updated.

While working on our MLK project, we discovered that Google Spreadsheets also have a simple method for quickly translating a spreadsheet using Google Translate.

Start off with a spreadsheet page with all of your subtitles and timecodes entered. Duplicate that page and rename the copy with the new translation language (e.g. Chinese). You can use Google Translate to translate cells in a google spreadsheet:


“English” = the name of the spreadsheet page source (optional)
“B3″ = the cell source of the text
“en” = English, the language you’re translating from
“zh-CN” = the language code for the language we’re translating into (simplified Chinese)

This technique offers varying degrees of success. Google Translate appears to work better for western languages (Here’s a link to the Spanish version translated by Google). But regardless, it offers a starting point and is a very quick way of translating the speech into dozens of languages. For a public facing project we would still recommend using a native speaker or person with language fluency to provide an accurate translation.



The Broadcasting Board of Governors (BBG) supports journalists broadcasting around the world in over 60 different languages. Because Popcorn projects can be shared and remixed, we wanted to encourage journalists and consumers to share projects across languages. To facilitate that, we baked translation into KettleCorn.

Here’s how it works: A journalist finds a Popcorn story she’d like to remix and translate. She can edit her translation preferences by clicking on “My Preferences” and selecting whether she’d like to manually translate the project or use machine translation, and selecting her preferred language. She then steps through each Popup or Text event, clicking on the “Translate” button in the plugin editor. If she were to select machine translation, it would automatically translate the text into her preferred language using Bing Translate. In some cases and for some languages this may be sufficient. But frequently the journalist (or her editor) will want to refine the translation. For this reason, the original text was copied into read-only field so that the journalist and future editors can review and refine the translation as needed.


Right-to-left (RTL) support for all plugins

We’ve added support for right-to-left languages for all of our plugins. That means KettleCorn can correctly display languages like Arabic, Persian, Urdu and Hebrew.

You can set the text to be RTL in the ‘Advanced’ tab for the GoogleMaps+, Lower Thirds, End Card and Wikipedia plugins. In the lower thirds plugin, the RTL toggle flips the titles so that the logo is on the left and the text is set to RTL.

KettleCorn supports right-to-left languages like Arabic and Hebrew for all of the event plugins.
Here is raw footage shot by Alhurra that has been enhanced with KettleCorn.

The text editor in the Text and Popup plugins also includes a button to switch the type from LTR to RTL.

Finally, we’ve also added support for RTL for projects that use GoogleMaps+ spreadsheet integration. We’ve added a column where users can specify for each marker if it should be LTR or RTL.


Advanced Maps Plugin

We extended the maps plugin to include a clickable marker with an optional infoWindow to display a title and description.

Journalists can also link to a GoogleDoc spreadsheet to synchronize multiple markers. As the project plays, the map will focus on the different markers. The user can click on the markers to navigate to different parts of the video.

Screenshot of the new KettleCorn maps plugin showing multiple locations.

Here’s how to create an interactive map controlled by a Google Spreadsheet. Open a copy of the GoogleDoc spreadsheet template. Each stop on the map is represented by a row in the spreadsheet. For each entry you can:

  • Edit the start and stop times
  • Set the latitude, longitude and zoom
  • Enter an optional title and description
  • Set whether you want a marker
  • And set whether the infoWindow opens on focus.

After editing the spreadsheet, from the File menu select “Publish to the web.” Click on “Start publishing.” Copy and paste the URL to the advanced tab of the KettleCorn maps plugin.


Lower Thirds Plugin

This plug-in enables journalists to quickly create clean, consistent lower third titles. If a user logs in to KettleCorn with a Persona account tied to a USIM email address the lower third will automatically be branded with their entity logo (e.g. VOA, RFA, RFE/RL, Alhurra).

Screenshot of KettleCorn project showing the new lower thirds plugin.
Journalists can enter a title and description, and have an optional URL and entity logo.


Restyled popup plugin

One of our first goals for KettleCorn was to restyle Popcorn for journalism. We streamlined the icons and color palette to work with everything from serious breaking news to feature stories. We reduced the overall number of icons, but added icons that journalists can use to help tell their stories or link to related content. Finally, we restyled the popup boxes and speech balloons to simplify their look and make them less cartoony.

Revised icon set for KettleCorn.

Improved text styling

Online producers need to be able to style and edit text quickly. We’ve simplified the text editor by adopting and implementing the familiar CKeditor interface.

This also allowed us to introduce custom styles for common types of text like block quotes, subtitles and labels. Producers no longer have to remember (or decide on the fly) that subtitles should be white text on a black background at 1.2em. Instead, they can just highlight the text, select the style and decide if they want to anchor the text to the bottom, top or manually position it.

Screenshot showing some of the new KettleCorn prebaked text styles.


End card promo plugin

This plugin provides an easy way to promote related stories by adding three headlines, three links and three photos.

Screenshot of KettleCorn's new End Card Promo plugin.


Showcasing new projects

BBG journalists are encouraged to share their work between language services and entities. To help facilitate the remixing and translation of projects we created a gallery for recent projects. When a creator is ready to publish project, he checks a box to make it public and have it appear in the showcase gallery.

In the near future we’ll allow visitors to sort projects by creator, organization, language and publication date as well as being able to search by keyword.


But wait, there’s more…

We made several small but important improvements to the KettleCorn editor to speed up production. Many of these changes are simple enhancements that professionals expect in a basic video or audio editing tool.

Rename layers: Popcorn projects can quickly grow in size and complexity. Users can now rename project layers to help organize their project.

Undo/Redo: We’ve also enabled undo/redo functionality so that journalists can step back to quickly undo a mistake. Creators can use the standard shortcut keys for undo (Ctrl+z) and redo (Ctrl+Shift+z).

Copy and paste: During our testing and training with BBG journalists, we saw that users were spending too much time recreating similar effects at multiple spots on the timeline. To speed up production, users can copy and paste events.

Precise sizing and positioning: And finally during our earlier training efforts we heard journalists asking for help providing greater precision in the sizing and positioning of plugin events. Most event plugins have an “Advanced” tab where users can set the height, width and position.

]]> 3
Introducing KettleCorn: Forking Popcorn Maker for Journalists Thu, 24 Oct 2013 21:26:06 +0000 Brian Williamson Popcorn Maker makes it easy to enhance, remix and share interactive web videos by combining audio and video with live web content. But despite its potential power, there has been limited adoption by professional journalists. That’s why ODDI stepped in: to find out why journalists weren’t using it and to create a new tool to address any issues.

This past summer we began transforming Popcorn Maker into KettleCorn with the goal of tailoring the tool for BBG journalists broadcasting around the world. We wanted to rethink, enhance and restyle Popcorn Maker to create a storytelling platform built around the BBG mission of supporting international, multi-language journalism.

Like most of our projects at ODDI, KettleCorn is open source so that all journalists can benefit from it and developers can build upon it. That’s why we’ll be doing demos at Mozilla Festival in London this weekend (follow the action on Twitter: @bbgkettlecorn and use #bbgkettlecorn).

It’s functionality also lends itself to academic and commercial use–it’s a multipurpose digital storytelling tool. For example, a BBC or a Discovery Channel could use it to enhance videos on their website, specifically when the topic begs a more in-depth look than the length of the video allows. The ability to add interactive articles and other elements means producers can add an extra layer to engage viewers longer.

Why Our Journalists Weren’t Using Popcorn

Last spring we began conducting Popcorn Maker training sessions with VOA, RFA and MBN journalists to teach and encourage them to use the tool. When we initially demoed Popcorn Maker, the journalists were extremely excited about the potential to tell rich interactive audio- and video-based stories. That initial enthusiasm started to wane as they tried to incorporate it into the deadline-driven newsroom environment. Despite their interest and our efforts, we saw limited adoption. We identified three main reasons:

  1. Too slow: The deadline-driven nature of journalism means that producers expect to quickly create finished, professional looking projects. In our training efforts we saw journalists spending far too much time creating basic effects like branded lower thirds.
  2. Too cartoony: The original Popcorn Maker was designed to be accessible to novices exploring content creation on the web. The current styles associated with Popcorn Maker are cartoonish and unsuitable for many news stories.
  3. Too unpredictable: Because it’s an open source project, new versions (and new bugs) are regularly released. This makes for an unpredictable (and at times unstable) user experience.

These aspects made it difficult to incorporate Popcorn Maker into the BBG journalist’s toolset.

Screenshot of the KettleCorn editor.

The KettleCorn editor interface and functionality is designed to be more intuitive and to cater to the needs of journalists.

Forking Popcorn Maker

We started by creating a BBG instance of Popcorn Maker. We’re working on hosting a stable instance with reliable core features and the ability to version and remix projects. We created new plugins to simplify common tasks like creating lower third titles, adding markers to maps and creating end card promos to related content. We also decreased the time-to-publish by adopting a more familiar text editor with pre-built styles and integrating standard features like undo/redo, the ability to rename layers and the ability to copy and paste events.

We restyled Popcorn for journalism. We updated the Popup plugin styles to make them more appropriate for the needs of journalists. We added automatic branding for creators logged in with USIM email addresses (e.g. VOA, RFE/RL, RFA, MBN) so that their logo will automatically populate. When RFA produces a project, a VOA language service can repackage the project and rebrand the project for VOA.

We built a tool that facilitates the translation, sharing and broadcasting of stories between different language services. Our goal was to create a platform to support BBG’s broadcasts in over sixty languages. To accomplish this goal, we made it easier for the content creator to switch between Spanish (left-to-right) and Arabic (right-to-left). Our second challenge was to integrate a machine translation service (Bing Translator) to automatically translate the text of a Popcorn project event and allow someone to easily edit and refine the text as needed. This will hopefully enable and encourage language services to adopt and rebroadcast material across the agency and around the world.

And finally we created a showcase gallery for KettleCorn projects to allow services (and consumers) to search and sort projects to see what is available for translating, remixing and rebroadcasting.

Embracing the Open Web

Creating a new piece of software from scratch is an expensive and time consuming proposition. By forking an open source project like Popcorn Maker, ODDI can leverage what other developers have already created and focus on the core features that will help our audience of journalists. KettleCorn is our chance to contribute to the open source movement and help support online journalism.

We’re unveiling KettleCorn at Mozilla Festival to try to build an international community of users, creators and developers to help support and extend the project. We hope to come back with additional feedback and suggestions that we can roll into the backlog of features we’re already planning to add.

]]> 0
Synchronizing MLK’s speech with PopcornJS, Skrollr and Google Docs Wed, 11 Sep 2013 14:06:47 +0000 Brian Williamson On August 28, 1963, Martin Luther King Jr. delivered his famous “I have a dream speech” at the March on Washington. As part of VOA’s 50th anniversary coverage, ODDI decided to transform archival footage of King’s speech into an interactive video with subtitles and synchronized interactive content to help provide context for the speech for an international audience.

In the end we weren’t able to secure the rights to the entire speech. As a result, this abridged version of the project is meant as a proof of concept and an inspiration for future stories (currently the project works best in Google Chrome). The JavaScript libraries we used support modern browsers and mobile devices, but for this demo we decided to limit the time we spent making it work across browsers and devices.

Making More Popcorn

One of our goals this year is to help international journalists create more interactive audio and video stories. We’re approaching this challenge on three different levels:

  • Quick turn video projects where journalists want to add simple context.
  • Medium-scale projects with more interactivity and more layers of information.
  • Larger scale, custom built projects that require a designer and developer.

For the smaller and medium scale projects, we’re currently forking a version of the Popcorn Maker project for the specific needs of journalists. We’re restyling the look and feel, adding new plugins to reduce the time to publish and building in translation support to promote sharing across language services.

For larger custom audio and video stories, like the “I have a dream” project, we’re using the Popcorn.js library to synchronize media with layers of context and interactive elements.


We added popup explanations and links throughout the speech.


We were definitely inspired by NPR’s “Lost and Found” project, created by Claire O’Neill and Wes Lindamood. “Lost and Found” tells the story of the obscure but masterful photographer Charles Cushman by synchronizing a radio story with a portfolio of Cushman’s photos.

The project used Popcorn.js to synchronize the audio with photographs and text. According to the website, “Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web.”

Using Popcorn.js you can include a variety of plugins for synchronizing different types of content—like images, wikipedia articles and maps—with audio or video. For this project I stuck with the popcorn.code.js plugin, which allows you to easily execute JavaScript at specific times during the audio or video.

var p = Popcorn( "#video" )
  start: 3,
  end: 8,
  onStart: function( options ) {
  alert('Insert your JavaScript magic here');

When the video reaches the 3-second mark, the browser executes whatever JavaScript you’ve included.

Scrolling with Skrollr

A parallax site features different elements appearing on the screen and moving at different speeds as the user scrolls down the page. Over the last year, we’ve seen a number of journalism stories told with parallax scrolling, from ESPN’s story on Dock Ellis to La Tercera’s story on the 40th anniversary of the Chilean military coup.

At ODDI, we’ve also been interested in using parallax scrolling for storytelling. As an added challenge, we decided to create a story where the scrolling was driven by the video.

We experimented with a number of different parallax libraries. Ultimately we decided on Skrollr.js for the following reasons:

  • It has a proven track record for professional projects (inside journalism and out).
  • It played nicely with our CMS.
  • It supports mobile (which wasn’t a priority for this project, but it’s nice to know for the future).
  • Several tutorials are available here, here and here.
  • It has a simple, familiar syntax (most of the action is handled by CSS-like attributes).

The animation is defined by “data-#” attributes in the HTML tags. Any CSS attribute can be animated over time.

< div id="king_cutout" data-100="opacity:0;top:-100px;" data-500="opacity:1;top:50px;">
    < img src="../img/photo.png"/>

In this example, when the the scroll position is 100 (“data-100″), the opacity is 0 (invisible) and the position is -100px (off screen). As the user scrolls to 500 (“data-500″) the image fades in to an opacity value of 1 and moves down to 50px from the top of browser. Positions can be described in pixels or percentages, but you’ll need to use consistent units across the entire animation.


We used PopcornJS to synchronize subtitles and kinetic type.

Creating Subtitles with TabletopJS + GoogleDocs

One of our major goals for this project was to include subtitles for King’s speech. I wrote about using Google spreadsheets and TabletopJS to support translations in a previous post. The idea here is very similar.

I started off with a spreadsheet page in English that includes the speech broken up into sentences. I added a column to timecode each block of text by seconds. I then create a separate page for each translation.

There’s a quick and dirty solution for translating a spreadsheet. You can use Google Translate to translate cells in a google spreadsheet.


“English” = the name of the spreadsheet page source (optional)
“B3″ = the cell source of the text
“en” = English, the language you’re translating from
“zh-CN” = the language code for the language we’re translating into (simplified Chinese)

This technique offers varying degrees of success. Google Translate appears to work better for western languages (Here’s a link to the Spanish version translated by Google). But regardless, it offers a starting point and is a very quick way of translating the speech into dozens of languages. For a public facing project we would still rely on human translator to provide an accurate translation.


Map overlays were used to show the path of the protesters and places mentioned in King’s speech.

…But Wait, There’s More

Since we’re already loading in a Google spreadsheet, I decided to use a spreadsheet page to handle the timing and locations for the scrolling.

Rather than manually creating a separate popcorn.code.js event for each scroll, I added a spreadsheet page with the start times, end times, scroll position and length of time for each scroll. Then I created a loop that runs through the page to create the code events. This made it significantly easier to add and edit times without having to update the JavaScript file.

var numberOfScrolls = scrollData.length;
//scrollData is the data that was loaded in by TabletopJS
var scrolls_array = [];
for (i=0;i<numberOfScrolls;i++){
 var startTime=Number(scrollData[i].starttime);
 var endTime=Number(scrollData[i].endtime);
 var scrollPosition=Number(scrollData[i].scrollpos);
  start: startTime,
  end: endTime,
  paragraphID: scrolls_array[i],
  scrollPos: scrollPosition,
   var currentElem = options.paragraphID;
   s.animateTo(options.scrollPos, {duration:1000});

Future Storytelling Opportunities

There was definitely a learning curve trying to integrate Popcorn.js and Skrollr into a project that runs in our CMS. But we were able to resolve most of the technical issues, and now we’re looking forward to working with language services at the BBG to find new stories that could benefit from this treatment.

What do you like about this project and what suggestions do you have? Please comment!

]]> 0