#popcornjs

[philovankemenade]

These kinds of projects could be timeless and immersive; not just stories, but worlds. To borrow the parlance of 1998, this could be a “portal” into an ever-expanding network of interactives, with continuous updates and additions.

Justin Falcone on developing interactive online storytelling technology - http://source.mozillaopennews.org/en-US/articles/how-we-made-hazardous-hospitals/

[mozillawebmaker-blog]

Great projects you should see from the Storytelling Innovation Lab with the Tribeca Film Institute

Do Not Track, a trailer for an upcoming documentary that explores who is tracking you on the web—tailored for you based on your own data.

  Read more: Notes from Storytelling Innovation Lab

[mozillawebmaker-blog]

Notes from the Tribeca Film Institute Storytelling Innovation Lab

By Program Development Lead, Ben Moskowitz

For the past few years, Mozilla has been in dialogue with the documentary film community about the advantages of the web—as a distribution medium, but more importantly as a creative medium. We are not so much interested in storytelling on the web as we are in storytelling of the web.

We’re interested in this stuff because it advances the open web platform—it helps drive innovations in interactive design and open technologies like HTML5 and Javascript.

But we have a deeper interest in this stuff, stemming from who we are as a public interest organization. We have a theory that web-native stories will be especially good for bridging inspiration and action. That is: if you get really good at web-native storytelling, you will be able to more effectively mobilize an audience to go fix the world.

This seed of an idea brought us into partnership with the Tribeca Film Institute, with support from Ford Foundation, to produce a week long “Storytelling Innovation Lab.” Ingrid Kopp, director of digital initiatives at TFI, has written about the lab here.

The Lab invited 7 filmmaker teams and over 30 designers, developers, and technologists to the Centre for Social Innovation in Chelsea, to produce concepts of how to use the web for more effective social-issue storytelling. Then, each team produced a complete storytelling project, from concept to code, in just 5 days.

By all accounts this was an unreasonable task. But the teams amply delivered. Read more: Notes from Storytelling Innovation Lab

[hypervideo]

Interactive: Your Hospital May Be Hazardous to Your Health

Today, in collaboration with ProPublica, we’re launching the next experiment from Jennings and Shankman exploring that form. At a week-long hackathon sponsored by the TriBeCa Film Institute and Mozilla and supported by the Ford Foundation, the two worked with Pro Publica reporters Marshall Allen and Olga Pierce, FRONTLINE’s own Sam Bailey, and the fantastic team at Ocupop to build “Your Hospital May Be Hazardous To Your Health,” an interactive video that highlights a number of inaccurate — and dangerous — assumptions often made about our health care systems.

Very nicely turning drawings into interactive visualisations. I also like the chapterization with corresponding logo's on the timeline and the call to action at the end.

[philovankemenade]

Hacking Interactive Online Video Stories at Popathon Hack Jam

This Saturday, Gilles and I invited filmmakers and web developers to the first Popathon Hack Jam at the London Mozilla office. The event was born out of the wish to bring together two worlds that have a unique opportunity for collaboration, powered by the enormous potential for interactive storytelling on the web. A key technology that enables this kind of collaboration is Popcorn.js, which led us to focus on this JavaScript library to create prototypes of interactive online video stories. Although Gilles and I always ensure making is the main focus at our interactive video workshops, a recurring piece of feedback is the wish to get more hands-on and work on projects. We tried to facilitate this by combining a morning of workshop elements with an afternoon of time-constrained hacking.

    Crafting Each Other's Stories

The introduction round at the start of the day nicely showed we were going to be up for a true interdisciplinary adventure. Among the 30 or so participants were documentary filmmakers, javascript superstars, videographers, researchers, hackers, students and multimedia artists, sometimes all the way from Manchester, adding to the fertile mix of skills and ideas. In a couple of rounds of speedy person to person hyperlinking, we shared our best online story experiences and gathered a wall of post-it-mediated inspiration.

[Photo courtesy of Michele Bonechi]

Gilles and I wanted everyone to leave at the end of the day with a newly acquired skill, and after a quick walk-through of Popcorn Maker, we gave out the first challenge of the day:

Form pairs and craft each other's story by enhancing your favorite music video with at least 3 types of events

Creating enhanced video experiences by remixing web elements like this is the best way I know to get the idea of 'black box video' vs 'hyper video' across. And we even got to know each other a little bit better! Alex loves dancing and spaghetti carbonara, Andrea is from Islington and likes Michael Jackson, Tom and Enrica share a love for Florance, Erinma showed us that whippets can sing and Brian tells us he's into ... well just watch till the end. I love the tunes of RJD2 and, so my example was set to a video of one of his songs.

Beyond the Box

The next workshop went via Popcorn Maker's remix button, through one of the demoed projects into its source code. There we indicated the match between the attributes of one of the events on the timeline and it's representation in JavaScript code. It's this feature that makes the two-sided front & back nature of Popcorn such an ideal teaching tool for me. I can reassure non-coders that they don't have to worry about understanding the exact syntax, and the link between GUI and code is clear and direct. It works really well and eye-opening. Several people later told me it really helped to demystify the concept of code. #webmakerwin ;).

[Photo courtesy of Michele Bonechi]

Arrived in the realm of code, we explained how Popcorn.js can be used to go beyond the 'limited' functionality of Popcorn Maker. I usually explain to filmmakers how the JS side of things enables the customisation of the rest of a web page beyond the framing of a rectangular player. The feature I am typically asked for by filmmakers however, is the option to 'choose your own narrative'. For storytellers, the term 'interactive video' strongly evokes the idea of 'branching narratives'. *Plugin anyone?

Examples are key in this introduction and we were fortunate to have Mandy Rose with us who gave us a sneak peak at her soon to be premiered Are You Happy? project. The project uses Popcorn.js to contextualize video footage from all over the world by pulling in social media content from Twitter and Flickr. It was great to show this real-world example and hear about Mandy's first-hand experience of opening up her creative practice to the web. 

The main goal of the Popcorn.js workshop was to accelerate the application of the library for the coders (and as a bonus give a look into the basics of a web page to HTML first-timers). We did a 5-step walkthrough from the most simple web page in the universe, all the way to an interactive popcorn-powered video experience. Aiming to stay accessible for all has both its pros and cons in this case. I see filmmaking as an eclectic art of leaving out (from many hours of film the filmmaker distills a core by knowing what to tactically leave out) and love showing filmmakers the accumulative nature of writing code. At the same time, covering the full spectrum between the very basics and reasonably advanced leaves at least a couple of individuals in the mixed audience unsatisfied at any given stage. Next time we'll most likely run the to sessions on Popcorn Maker and Popcorn.js in parallel, giving people the choice to go where they like. Ill probably also show the discrete demo steps as a continuous process.

[Photo by Gilles Pradeau]

  Hacking Hyper Video Experiences

After the lunch which had, besides pizza, food for thought from the post-it wall, it was time to form teams and get hacking. We used a lovely technique inspired by Mick Fuzz' facilitation at the Open Video Course Sprint. We ended up with 6 varied teams of 4 and handed out the Prototype Challenge for the day:

"Create a story experience that turns a viewer into a user"

With only an hour and a half to go before the half-way Ideas Pitch, there was no time to lose and the teams spread across the many rooms of the Mozilla office for some pressure cooker creativity.

[Photo by Gilles Pradeau]

The Ideas Pitch was a great opportunity for the teams to put their ideas to the test. Having to explicate the ideas generated thus far helped to give that extra bit of focus towards the final deadline of 17.30. Looking back it's pretty insane to realise that all final prototypes were generated in a time span of little more than 2 hours and 30 minutes. And what a prototypes we got! Below are the final presentations of all the 6 7 teams. You can click the titles to visit the actual projects.

  Awards

[Image courtesy of Cecile Baird]

The teams were competing against the clock in three categories. For each of these, the prototypes were assessed by the collective judgement of the participants. It's always nice to see these things play out to have a nicely spread result and that's exactly what happened. May I present to you:

Best Prototype: Team Journalist Innovators

Most Original Concept: Team Popcorn Pirates

Best Interactivity: Team Time Pop

Lessons Learned

I'm happily surprised with how smoothly it all ran. We definitely crammed a lot into the schedule, and got a lot done. Much respect for all the teams who managed to come up with such exciting prototypes in just a couple of hours! We've got heaps of useful feedback and the most exciting thing is that most people are hungry for more. More time for hacking and more Popathons!

I've personally taken home the following ideas and insights:

Creativity blossoms under constraints (timely and topically).

Varied, ad hoc teams enable discussion and creativity.

Explicating ideas half-way benefits the final output.

It's good to try to separate people who have their own specific project idea into different groups.

Let's try two days next time!

48 Hour Interactive Film Project? ;)

Let's try running the Popcorn Maker and Popcorn.js workshops in parallel, while making sure they match up conceptually and the groups get back together to hack.

Great to have a Popcorn.js example presented by someone in the room!

Don't worry too much about getting the right amount of beers, when everyone's way too concentrated to drink them. Lunch and snacks is what counts. Luckily we got these right!

[cyhung]

Given the name and topic of this blog, I felt it would be fitting to write this inaugural post on how to make one of my favorite dishes using a HTML5 video tool, Popcorn.js. I made two versions using both the javascript library and Popcorn Maker….

[rizomer]

With the release of version 1.0 of Popcorn Maker, cinemakers welcome the first tool that has the potential to turn them into webmakers. The goal of Popcorn is shared across all the project’s channels since mid-2011: to bring video out of the box.

One question for cinema makers now become: how to turn web processes into cinematic compositions? For a time, softwares from Apple Final Cut Pro to Adobe Premiere and After Effects have helped computerize cinematic techniques. Techniques that were once crafted on film stock by film makers. Computer codes confined cinematic imagery from a certain era.

Now, with the web, cinema is bound to expand.

--- Continue.

[hacktivatelearning]

Using Popcorn to make DIY videos with WNYC Radio Rookies.  Have something you want to teach someone else to do?