Video: Popcorn Maker walkthrough

$(function () {
var $p = Popcorn(“#video”).footnote({“id”:”footnote1311722905239″,”start”:6.75,”end”:12,”text”:”Read Ben’s post here“,”target”:”footnote-container”}).footnote({“id”:”footnote1311722958997″,”start”:19.75,”end”:23.75,”text”:”You can try this early version here“,”target”:”footnote-container”}).footnote({“id”:”footnote1311723055033″,”start”:28.75,”end”:32.75,”text”:”View this page here“,”target”:”footnote-container”}).footnote({“id”:”footnote1311723055033″,”start”:36,”end”:40,”text”:”View this page here“,”target”:”footnote-container”}).footnote({“id”:”footnote1311723448171″,”start”:150,”end”:155.5,”text”:”Gaza/Sderot“,”target”:”footnote-container”}).footnote({“id”:”footnote1311723485398″,”start”:157.25,”end”:161.25,”text”:”The Wilderness Downtown“,”target”:”footnote-container”});
//uncomment to auto play

Ben Moskowitz has done a great job outlining how our thinking has evolved for creating an authoring layer for Popcorn.js. Read his post.

He’s also outlined how students at the Bay Area Video Coalition will use it.

This post digs into some details of how we’re imagining the process of using the app. Please leave your comments below!

Designing the Popcorn Maker

Popcorn.js aspires to be “the jQuery of open video”—a set of building blocks for advanced HTML5 web apps that use video in new and exciting ways. The 1.0 release will be out later this year.

Poster Image
[There’s an HTML video here—load this post with your open-video enabled browser.]

Brett asks: 'what are the opportunities presented by hyperlinking, browser-based compositing and non-linear storytelling?'

Though Popcorn has evolved into a very developer-centric project, it wasn’t always imagined as such. Popcorn was created to scratch our creative itches—bringing live data into stories, personalizing them, making them interactive, making them social. In short, taking visual storytelling in new and uncharted directions, taking advantage of all the capabilities of the web and web browsers.

This kind of creative experimentation—the kind for which Popcorn was created!—shouldn’t be limited to developers. The Mozilla Foundation wants to awaken the web maker in everyone, not just those who’ve mastered javascript. So a big priority, from very early in the project, has been creating tools for non-developers to explore the possibilities of what we’re calling “web-native” cinema. Here’s a look at where we’ve been, and where we’re going.

Round 1: Butter

Butter, our first stab at an authoring environment for popcorn.js.

Around November 2010, Brett started working with CDOT and Bocoup to develop a companion app to pair with popcorn.js. They called it Butter—because nothing goes better with popcorn than butter.

The app was imagined as a general purpose popcorn.js authoring environment for filmmakers. You’d visit the Butter web app, point it to your video file, and layer in elements of the web like live data, social networks, and the like.

You can try Butter today [try the stable or experimental versions]. The authoring interface mimics the track/timeline UI of popular video editing programs like Final Cut Pro or iMovie. But where adding a track in Final Cut or iMovie is part of the process of creating the edit, adding a track in Butter is part of the process of creating the web page. The track metaphor makes sense because we’re giving users the ability to play with time-based actions, like queuing a map of Alaska when Sarah Palin appears in the edit. The timeline interface lets filmmakers experiment with useful functions, tweak, and test the results. When users are finished creating their projects, they can export a chunk of HTML and host them anywhere.

This was a step in the right direction. Using alpha versions of Butter, we were able to run workshops where participants could quickly spin up their own popcorn projects. The feedback was great— it feels super empowering for a non-technical person to quickly create a popcorn.js-powered web page where their content is triggering all kinds of interactivity.

Solving the wrong problem

But there were two problems with this approach.

Do we want to do an 'authoring environment?'

1) The first problem had to do with the design of the product itself. From a user perspective, the app was pretty limited. There was no way for users to easily customize the layouts or visual styles of their projects. The way we had designed this iteration of the product constrained us to a single use case—a page with a video and a bunch of boxy widgets. These pages were interesting, but fell far short of the creative revolution we were hyping.

2) The second problem was strategic. Part of the long-term plan for Butter was to slowly add functionality for users to design custom pages. We wanted to provide a fuller authoring environment to let people create unique experiences that begin to approach the sophistication of something like The Wilderness Downtown. You would always need a lot of talent and a lot of elbow grease, but we would provide a basic toolkit for you to use.

The more we thought about it, the more we realized we were setting an unattainable goal for ourselves. Whatever authoring environment we delivered would take forever, would cost us a lot of money, and would probably suck. And we’re convinced that others (Adobe?) will take up the baton of making high-end HTML5 authoring tools for creative people, in any case.

Developing a full authoring/design environment for filmmakers to play with HTML5 is not a good use of our resources. Filmmakers will always need more specialized and powerful tools than we’re in a position to provide. And most filmmakers will need developers, too—developers who will serve as a “human API” to popcorn.js and advanced web development generally.

So instead of developing a big and complex (and ultimately niche) tool, we decided to focus on the things we know best: the web, open-ended design, and community. This will help us make a much bigger impact in the non-developer-facing part of the Popcorn project.

Round 2: Popcorn Maker

The newly imagined Popcorn Maker; beta coming in September.

So we’ve scrapped some of our assumptions and reset our perspective. We pulled out the guts of Butter and refactored our existing work into a brand-new product: Popcorn Maker.

Popcorn Maker will be much more useful to our core filmmaker demographic. But we also think the potential demographic for Popcorn Maker is much bigger than filmmakers: it will interest creatives and web-makers of all stripes.

Popcorn Maker does one thing really well: add popcorn.js actions to any web page. Popcorn Maker won’t limit you to what you can design inside the confines of the app. Bring any web page into Popcorn Maker and you can make the video conduct the other page elements like a marionette. This is a big departure from Butter: in Popcorn Maker, what you see is what you get. (This is a bit abstract, so stay tuned for a walkthrough post from Brett that will help show how it works.)

This is a simple but incredibly powerful approach. It will enable people to create a huge range of HTML video experiences.

By following the conventions of the Butter API, developers and adventurous newbies can make their own templates. Just design a page using regular web technologies like HTML and CSS and give the popcorn-able elements some special attributes. Once you’ve designed a template to your exact requirements and specifications, you can import it into Popcorn Maker.

The Effect harnesses community and code sharing—so will Popcorn Maker.

For those who don’t want to design their own templates—which will be most people—we’ll offer a template directory. Anyone can submit a template, and we’ll be encouraging people who make popcorn-powered pages to distill them into re-usable templates for Popcorn Maker. We will kickstart this directory by developing a bunch of templates for the kind of apps we know people want: book reports, walking tours, e commerce, and other tropes we’ve observed in the popcorn universe.

By making creators responsible for the design of their pages (or at least for picking an existing design from a templates directory) we’ll be able to make a much more open-ended and useful app. Instead of banking on our own ability to make the ultimate authoring tool for Popcorn, we’re aiming to get the scale benefits of people hacking, building, and sharing together. In a way, we are thinking of the Popcorn Maker template directory as a kind of for open video. As with, our users will be able to draw from the work of our growing developer community—and hundreds of plugins and templates—so they don’t need to start from scratch.

What’s next?

The new and improved Popcorn Maker incorporates our learnings from trial runs with The Factory program at BAVC. We’ll have an early, but feature-complete version of Popcorn Maker for them on August 15th. We’re hoping to do a general beta release of Popcorn Maker sometime in September.

We’re also experimenting with putting the Butter API that powers Popcorn Maker into other products. Dave Humphrey’s group at CDOT is experimenting with a plugin for Final Cut Pro that will embed Popcorn Maker into FCP itself, so filmmakers can edit and develop popcorn.js projects in one integrated step. We’ll continue to develop Popcorn and its galaxy of plugins and templates on its steady march to 1.0. And we may even be experimenting with some long form content to show just what the web can do for the craft of storytelling.

Lots of amazing stuff is brewing. Get involved!

Web-Native Projects: An Update on The Factory/Mozilla Collaboration

This year, Mozilla has been working with The Factory youth media program at the Bay Area Video Coalition (BAVC). This is part of our collaboration with the Zero Divide Foundation to foster digital literacy and web design skills in youth media-makers.

I’ve blogged about the program before. In a nutshell: The Factory works with local changemakers to create documentaries, PSAs, and other forms of media to get a message out. Using open video tools in development at Mozilla, we’re going to help The Factory create four innovative video productions that live and breathe on the web. These “web-native” projects will complement the DVD versions of the films.

To prepare the Factory students, we’ve been introducing them to HTML, CSS, and some very basic Javascript. We’ve also been developing some GUI tools to help them create their projects (including the Popcorn Maker, which I’ll blog about next week). Along with these new skills, we’ve been workshopping project ideas to make sure the web-versions of these films are amazing.

The Inspire USA group at The Factory, prototyping their web-native documentary project

It has been a multi-step process. The Factory Manager, Jason Jakaitis (along with Factory staff members like Ewen Wright) has been helping the groups iterate on their project ideas until they shine. He’s been asking tough questions: How can the Factory projects use the capabilities of the web to reinforce the message of their films? How can they build meaningful audience engagement using new creative techniques?

Here are the near-final concepts for the four projects:

Creative Growth

Creative Growth Art Center

The Story: Julian, Stephanie and Matt are making a documentary about the Creative Growth artists studio in Oakland, California – the first art gallery in the country created specifically for artists with developmental disabilities. They want to create a project that shares with the audience the “safe space” that Creative Growth fosters through positive reinforcement and a spirit of inclusion.

The Project: The team envisions a web-native documentary that is preceded by a short questionnaire that prompts the viewer to share their ideas of what is beautiful and who inspires them. After completing the short survey, the documentary begins: it uses interviews with the Creative Growth staff to share the broad tenets of the organization’s philosophy but then has empty place-holders for b-roll that are “filled in” through an automated Google/Flickr image keyword search using the viewer’s answers in the survey. The documentary will then be endlessly variable, tailored to the tastes of the viewer, and in line with the inclusive and open-minded philosophy of Creative Growth.

The Huey P. Newton Foundation

Huey Newton adresses a crowd in Oakland

The Story: Nick, Brian and Patrick recently took the Black Panther Legacy Tour of West Oakland – a four-hour door-to-door history lesson, conducted by former Black Panther Chief of Staff David Hilliard. The tour stops at crucial locations in the Black Panthers struggle and highlights the role that the political party played in fighting for basic civil rights of the African-American community in the late 1960s and early 1970s. The young men were deeply moved by the tour and were appalled by the lack of recognition the City of Oakland had accorded sites of such historical significance.

The Project: The filmmakers have decided to create a virtual “walking tour” to raise visibility of the Black Panthers and their importance to the West Oakland community—this will provide an opportunity for individuals outside of Oakland to learn the history of the movement. Each “stop” on the walking tour will include pan-able Google Street View images of the location as it is now, along with historical stills and Wikipedia articles for additional context. In addition to this core experience, users will be offered unique share & comment links (Facebook) for each leg of the tour.

City Slicker Farms

City Slicker Farms plants gardens to renew communities

The Story: Zoe and Jasmine want to tell a story about the West Oakland organization City Slicker Farms, which has spent the last ten years working to promote access to fresh produce and prevent violence by “boosting community” through a series of communal urban gardens and weekly farm stands. The girls are also impressed by CSFs “Backyard Garden” program, in which the organization helps homeowners set up gardens in their backyard and then provides them with seedlings and regular follow-up visits. They want to create a project that brings visibility the organization and shares important information about their efforts, but they also want to make something that reinforces the City Slicker commitment to bringing people together and creating a sense of shared community.

The Project: The team envisions a web-native project (utilizing both Google Maps and YouTube) in which their documentary plays over the center of a Google Map of West Oakland. As the documentary mentions different farm sites that City Slicker Farms has created, pins will drop to indicate their location on the map. These pins will be clickable, linking to a short YouTube-link video portrait of the location. Furthermore, there will be an option for beneficiaries of the Backyard Garden program to drop their own pins where their home gardens are located and share videos or still images of their progress.

Inspire USA

A mockup for the Inspire USA project by the Factory

The Story: Ray, Lauren, and Fifer are working with Inspire USA, a non-profit that helps teens cope with depression & mental illness and live happier lives. The Factory group is creating a series of vignettes to share the stories of survivors. They have settled on four stories submitted by youth who have experienced mental health issues.

The Project: For the web-native version of their project, the emphasis remains on “finding your purpose.” Viewers will be able to watch the vignettes, as well as discovering and sharing positive messages on Twitter. This project will help teens discover that it is not unusual to go through tough times, and that they are not alone.

What’s next?

We’ll be working all through the month of August to help the Factory design and deploy these projects. And we’ll be packaging the tools and learnings from this program to help youth documentarians everywhere to design their own interactive media for the web. Stay tuned!

Popcorn.js 0.7

We’re very proud to release Popcorn.js 0.7. This is one of our biggest releases – 66 tickets in our changelog! Popcorn.js features many code optimizations and improvements, and now has over 1148 unit tests. Our core, plugins, parsers and players each receive rigorous testing before we ship. With each release, the library is more stable and ready to deploy! You can download the release here.

Aside from this increased stability (and the release of a processing.js plugin!), the notable features of this release are Event Effects, plugin defaults and SMPTE timecode support.

Event effects offer a way for developers to attach css and other UI elements to popcorn events. When a Popcorn event “fires”, a developer can add a color, move the element, or anything else possible with CSS + html. With our event effects framework, we’ve made popcorn plugins much more powerful. To see this in action, re-visit our original popcorn demo, now using our event effects framework. For further detail, read Scott Downe’s detailed blog and how to.

Plugin Defaults allow authors to set the options (such as target) for a plugin once and apply it to all calls, saving development time.

SMPTE timecode is the standard for video, and allowing authors to use this format makes Popcorn more useful to video creators. Authors can specify the framerate and then simply use the time format they’re accustomed to.

Popcorn in the wild

I’m excited to present a face lift to our demos page, with particular thanks to community member Patrick Ortell for finding time between family life, school and a full time job to help us with some css love.

Its a great time to show off – two very exciting productions have launched recently that take advantage of popcorn.

The first is “Visions Of Students Today” – a great video collage remix by Michael Wesch and students of the Digital Ethnography program at Kansas State University. Michael Wesch has been rightly dubbed “the explainer” for his great analysis of digital culture. You may remember “The Machine is Us/ing Us” video from a few years back. This time, Professor Wesch solicited over 200 contributions of first person videos from students and remixed these into an analysis of the challenges and opportunities for educators in the digital age.

The second production, “Happy World“, is a web documentary in the gonzo tradition. French producers Upian, who pioneered the web documentary genre with docs like Gaza/Sderot and Prison Valley, used popcorn to annotate their exploration of the bizarre Burmese regime.

These are in addition to the other great examples of Popcorn on our new demos page – I encourage you to experience them all!

Eating our own doc-food

We’re making documentation a priority in the run up to 1.0, and are experimenting in this release with audio/visual guides that use popcorn to illustrate code along the way. Visit our documentation page and scroll to the “Guides” section to see them in action. To create these, we wrote a plugin for the Gist code sharing platform (a part of Github). We recorded a narration of how to create some basic popcorn pages (Popcorn 101, Youtube, Vimeo) and then used our new plugin to highlight the relevant portions. The plugin then allows you to run the code in an frame, showing the results of your coding in the same page. Our plan is to use this feature to document many more features, and we hope you might find it useful for your projects as well. Stay tuned for this plugin to be released in 0.8 when we put it through our testing process.

Our API documentation also improves with each release – visit our API page for detailed documentation of all the features in popcorn.

With this new release, its a great time to get involved – visit our community page to find out how!

Popcorn Enters the Demoscene

There has existed a a subculture inside computing and programming since the personal computer became relatively popular whose sole purpose is to basically show off: the demoscene. Its focus is primarily “demos” that programmers and artists work together to create as expressions of their artistic and technical talent. Some excellent examples are Future Crew’s Second Reality, and Farbrausch’s Masagin.

For the most part, demos need to be deterministic, meaning (roughly) that there is a planned progression from the beginning of a demo to the end from which any instance of the demo deviates very little, if at all. This is by far the most confusing part of the demoscene to newcomers, because there is a general failure to understand why demos aren’t simply rendered videos. I believe the best way to think about them is to consider what you’re seeing as a demonstration of what will be possible on mass in interactive video games in the next 2 or 3 years; if you’re watching an effect in a demo, imagine the possibility to control it in an interactive environment, and realize that everything presented to you is rendered in real time.

#audio demo 3The progression of a demo depends on programmatic object creation, event coordination, and many other ostensibly simple things. So, very naturally, Popcorn fits right into the creation of a demo: there is a need to sequence events, and popcorn does that perfectly well. Recent releases of popcorn have focused on making plugins a lot better, and allowing player plugins through use of basePlayer. So, in #audio’s latest demo, an invitation to Flameparty, we exploited the opportunity to write our own simple player, extended from basePlayer, which is drives the general coordination of sequences and events.

CubicVR is an incredible open source 3D engine with a featureful JavaScript port. It contains an animation library which can be used to tell an object to get from point A to point B in time X. From the perspective of a programmer using said library though, it’s far simpler to use a general purpose event timing library (like Popcorn) to “macromanage”, and an animation library (like CubicVR’s) to micromanage, mostly due to the respective scope of each library. Popcorn’s focus is on the long-running media presented to the user, while the CubicVR animation library’s focus is on, and should be used in, code pertaining to itself.

We’re always exploring interesting ways to use Popcorn, and this latest #audio demo is a great proof of concept with respect to Popcorn’s versatility. Its use was almost circuitous to convention in a way (certainly no HTML5 video, and audio was generated by jsmodplayer), but it certainly didn’t feel that way whilst we programmed. I encourage its use in a similar manner, and I know I’ll be continuing to use it in my demo-centric future.

Popcorn 0.6 – sequencing, animated maps + more

Popcorn releases are finding a regular groove, and today brings Popcorn.js 0.6. Download it here.

In addition to the multitude of fixes and improvements that you can view on our changelog, the biggest feature of our 0.6 release is the ability to chain multiple videos together in sequence. This will open up many exciting possibilities for the popcorn project, which we plan to put into great use with Butter. If you’re been thinking of using popcorn to chain together multiple videos, now is a great time to take a close look at popcorn.

Another great feature of 0.6 is the ability to create “tweened” Google maps experiences. Inspired by this popcorn demo by Nick Fox-Gieg, we wanted to enable creators to animate between different Google Maps placements. Of note is that this plugin was worked on by contributor Cole Gillespie, who came to Popcorn via a submission to the Knight/Mozilla Technology Partnership (MoJo).

The popular “word river” feature of the Radiolab Hyperaudio demo was also spruced up to be a plugin that can be used by any author who wishes to take advantage of this functionality.

Plugins for Facebook and LinkedIn round out the user-facing additions to the library. As always, if you’d like to get involved in the evolution of this project, visit our community page to find out how!

Popcorn in the Planetarium

Check out Dave Humphrey’s blog about the demo as well:

When Firefox 4 was released, it was accompanied by a series of amazing demos to showcase new technology inside the browser. As a result, Planetarium was on our radar when we thought about “Popcornizing” a Khan Academy video tutorial. The result:

Dave Humphrey and I had this idea stirring around in the Popcorn community for a while before finally having the coinciding time to dedicate to a demo. Proudly and honestly, here is how our time was spent in order from most to least:

  1. HTML, CSS, jQuery, JavaScript
  2. Planning & gathering assets
  3. Writing & configuring Popcorn code
  4. Talking about food or coffee (irc logs to back this up)

Because of how well-structured the latest release of Popcorn is, most of our time was spent exactly as it should be when you’re using a dependable library: not worrying about the library.

What is most interesting though is how the demo illustrates simple interoperability. Because the Planetarium code is available with only a couple of mouse-clicks (and on github:, we were able to encapsulate it inside an iframe, and leave its code-base virtually untouched.

Dave and I found the functions that manipulate the planetarium demo, and were able to activate them by spawning mouse-click events targeted at event handlers attached to objects inside the planetarium DOM. In other words, we faked user clicks. We let CSS and jQuery do most of the heavy lifting (I would like to see some CSS3 animations in our stylesheets), and, consequently, our script remained small: a couple hundred lines of our own JavaScript, a lot of which is for readability.

Considering that this proof of concept took about a day to put together, I’d say Popcorn is ready for use on a much wider scale, especially where education is concerned. It’s a great example of an important methodology of web development, and of computer science in general: good libraries exist, and accomplish exactly what you want with very little overhead; use them often, and contribute whenever possible.

Unsalted Thinking: Roadmapping Butter

The story of Popcorn.js is an admirable one; envious developers strive to build libraries with the kind of amicable response and contribution streak that Popcorn has enjoyed lately. Yet, we strive for more.

If you haven’t been formally introduced, meet Butter: The Popcorn Timeline Tool. At a release point that Popcorn can only look back upon with fond and fading memories, Butter isn’t yet at the maturity to be called stable.

An incredible amount of work went into the first iterations of Butter, thanks to people at Bocoup, like Rick Waldron, and now we have the foundations from which to build a productive and comfortable user experience.

Arguably, there are harder problems to solve while building something like Butter than something like Popcorn. They’re not programming problems; there are lots of those wherever you look, many of them hard or impossible to solve. So, maybe ‘harder’ isn’t the correct word. But, there’s something alluring and demanding about the complications of a primarily user-facing (as opposed to developer-facing) piece of software that must be confronted for the sake of the product’s success.

Like any piece of software with a GUI, Butter needs to face problems of usability. We need to really focus on some key points:

  1. By using Butter, which tasks are users able to complete (to some degree)?
  2. Which of these tasks are most desirable?
  3. Of those tasks, does Butter currently accomplish them with ease, consistency, and stability?

I believe that the strong points of Butter are those which directly concern timelines. Again, Popcorn is an incredible library, but using it requires a lot of JavaScript. Butter’s primary goal should be to alleviate the tediousness of manual (boilerplate) syntax regurgitation, and, right now, almost nothing else. It needs to accomplish this so well that it is the default tool for users to accomplish event synchronization using Popcorn. In fact, when users think of Popcorn, they should immediately think of Butter, and begin to consult it for its expertise.

In the future, it’s conceivable (even already planned) that Butter will include better features to help not only synchronize Popcorn, but design the page in which Popcorn is used altogether.

So, for now, the roadmap for Butter looks like this:

  1. Refactor parts of Butter that impede deft architectural abilities of contributors. Namely, the UI needs to use as much CSS as possible in place of its current canvas-oriented rendering structure. Butter can benefit from losing a few hundred lines of superfluous mouse-interface code.
  2. Bring the abilities of Butter to align steadily with those of Popcorn. This means Youtube, Vimeo, and, in general, Player Plugin support.
  3. Give users a better experience in using and editing the plugins. We can attempt to give users contextualized editing interfaces for different plugins. For example, for the Googlemaps plugin, we can use as much of the experience of Google Maps as possible to increase consistency for users (i.e. users are already used to manipulating maps on Google Maps, so let’s try to capitalize on that).

With these three high-level goals in mind, editing the timeline for a Popcorn project with Butter will become simple and obvious for Popcorn users. For more detail on the roadmap, I encourage you to explore the wiki on the webmademovies/butter github project page:

Any feedback is welcome. You can try the most bleeding edge version of butter at

Popcorn 0.5: now with Soundcloud!

One of the great things about popcorn is how easy it is to write plugins. To accommodate the work being done by Mark Boas and Henrik Moltke on the Hyperaudio project, the popcorn community came together to create a plugin for Sound Cloud, the extremely popular hosting and sharing service for musicians and audiophiles. On the Popcorn IRC channel, Sound Cloud developers worked side by side with students like Steven Weerdenburg to create the functionality that would make the rich features of the Sound Cloud API available to popcorn developers, which was great to see. I know Henrik and company have some exciting demos that will be making use of this functionality!

In addition to SoundCloud, this release focused on making sure that plugins inherit functionality – this is the power of open source in action, in that each developers contribution adds to the power of the software, creating a veritable Voltron of powerful HTML5 media goodness. For a detailed look at what developers from Seneca College’s CDOT, the folks at Bocoup and other popcorn developers created for this release, check the ChangeLog.

Of course, you should download the new version of popcorn.js here!

Video: An Aesthetic For Web Made Movies

$(function () {
var $p = Popcorn(“#video”).footnote({“id”:”footnote”,”start”:6.188462525152318,”end”:10.25,”target”:”footnote-container”,”text”:”This page was created using Butter“}).footnote({“id”:”footnote”,”start”:13.5,”end”:19,”target”:”footnote-container”,”text”:”Download Little Brother here“}).footnote({“id”:”footnote”,”start”:25.25,”end”:29.79878591185401,”target”:”footnote-container”,”text”:”Web Made Movies 2011 plans blog post“}).footnote({“id”:”footnote”,”start”:35,”end”:39.75,”target”:”footnote-container”,”text”:”Web Made Movies Discussion Group“}).footnote({“id”:”footnote”,”start”:44,”end”:50.398965394726915,”target”:”footnote-container”,”text”:”Notre Poison Quotidien“}).footnote({“id”:”footnote”,”start”:51.25,”end”:58.63163024766809,”target”:”footnote-container”,”text”:”Donald Duck Meets Glenn Beck“}).footnote({“id”:”footnote”,”start”:63.75,”end”:75.17801074251062,”target”:”footnote-container”,”text”:”Mozilla #audio team: Flight Of The Navigator“}).footnote({“id”:”footnote”,”start”:102.5,”end”:109.1817671254416,”target”:”footnote-container”,”text”:”Welcome Robert Richter blog post”}).footnote({“id”:”footnote”,”start”:112.25,”end”:118.25,”target”:”footnote-container”,”text”:”This demo is in space“}).footnote({“id”:”footnote”,”start”:146.25,”end”:152.66402352022058,”target”:”footnote-container”,”text”:”Read Gabriel’s great blog“}).footnote({“id”:”footnote”,”start”:159.5,”end”:165.0506669278672,”target”:”footnote-container”,”text”:”Watch all of this talk here“}).footnote({“id”:”footnote”,”start”:221.75,”end”:226.75,”target”:”footnote-container”,”text”:”Watch Gabriel’s web series The Future of Art.”}).footnote({“id”:”footnote”,”start”:276.75,”end”:283.75,”target”:”footnote-container”,”text”:”Watch Rip for free at the NFB“}).footnote({“id”:”footnote”,”start”:297.75,”end”:302.5,”target”:”footnote-container”,”text”:”View our original demo at“}).footnote({“id”:”footnote”,”start”:305.5,”end”:310.5,”target”:”footnote-container”,”text”:”Actually, as it turns out, he didn’t Hyper Video “}).footnote({“id”:”footnote”,”start”:311,”end”:313,”target”:”footnote-container”,”text”:”Read Tristan’s blog about popcorn anyway“}).footnote({“id”:”footnote”,”start”:324.4274374632353,”end”:329.71974992517806,”target”:”footnote-container”,”text”:”Experience Prison Valley“}).footnote({“id”:”footnote”,”start”:383.5,”end”:385.5,”target”:”footnote-container”,”text”:”visit Colapsus“}).footnote({“id”:”footnote”,”start”:441.5,”end”:447.23404686315195,”target”:”footnote-container”,”text”:”Try it at Never Mind The Bullets (requires chrome/webkit browser)”}).footnote({“id”:”footnote”,”start”:489.25,”end”:494.17027549244597,”target”:”footnote-container”,”text”:”Please leave a comment!”});
//uncomment to auto play

This video post outlines some of the thinking that Bobby Richter, Ben Moskowitz, folks in the community mailing list and myself have been having about how we can break out of the boxy look and feel of our first popcorn demos. I’ve actually used this video as cannon fodder as I test the user experience of Butter, filing bugs on our issue tracker while Bobby and Scott Downe have been working on “Edge”, our development version of the app. So this is actually my first videoblog that uses popcorn and Butter, and all of my future ones will from here on out.

Mostly though I wanted to create this video to start a conversation about how to encourage formal innovation in web based filmmaking – what are the opportunities that hyperlinking, browser-based compositing and non-linear storytelling present to us? Please leave your thoughts in the comments here or join us on our list for more discussion.