Getting our BearingsThere are numerous parts to popcorn, and depending on what you want to do, different parts will be more important to you than others.
Popcorn.jsTwo good places to get started with popcorn is http://mozillapopcorn.org and http://popcornjs.org where you will find the following definition:
Popcorn.js is an event system for HTML5 media developers. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.I think of popcorn.js as a "timing engine", a script that synchronizes a piece of audio and video to any number of discreet and disparate events. Just as watching a movie happens over the course of a limited, uninterrupted period of time and just as popcorn is consumed incrementally in little bits of popped kernels at various intervals over the course of that movie, so too does popcorn.js allow a person to incrementally trigger many "little bits" of popped kernels, of events (whether they are text, tweets, maps etc.) at any particular time during the timeline of watching that movie. For me, this is a great metaphor for describing the overall project and a metaphor which helps me personally to understand the way the different parts of the project fit together.
How to get involved with popcorn.jsBen Moskowitz, the Media Program Lead at the Mozilla Foundation, in his excellent blog post Mozilla Pocorn: How to Get Involved cites these ways where you can start getting involved with popcorn.js:
When paired with specific Popcorn templates, custom plugins can offer sophisticated authoring capabilities to end-users.
Popcorn MakerIf you are more of an author, a story teller, someone who wants to create an interesting presentation using popcorn but don't want to get into the code unless you have to, Popcorn Maker is a great tool that Mozilla is currently developing. If you would like to try out the tool in it's early stages, click on the "Try the alpha" button an it will take you here.
ButterIf you are an organization or team of content producers who has very specific needs which would necessitate you building your own version of Popcorn Maker and if you or people on your team have a good degree of experience with
Once again, I'll cite Ben Moskowitz' blog post on How to Get Involved with Mozilla Popcorn. Here, Ben provides a great description of Butter as well as a list of ways you can start getting involved :
Butter is a software development kit to create HTML5 web apps that time user inputs with media. It's the foundation on which Popcorn Maker is built.
Butter manages track data, saved projects, saved media, user interface construction, publishing, and more.
You are welcome to file a bug report, a feature request, or—even better—to contribute to the project!
To contribute to Butter, join us at our Lighthouse issue tracker. Have a look at the open tickets and feel free to take one. When you're done with a ticket, issue a pull request to the main repository on GitHub.
- Butter roadmap
- Make an app with Butter - July
Making a template???When I first started creating presentations using popcorn, I found it easy to work off existing templates... er I should say "demos" included in the documentation or in popcorn plugin folders. Like this one, for instance, or this one upon which I based a recent presentation (thanks folks! amazing work).
For me, these demos functioned as templates and allowed me to get up and running quickly doing what I needed to do.
However, in order to clearly define some next steps for how I'd like to continue participating with popcorn.js, I needed to realize that I need to start thinking beyond the plugin demos that I had found so useful, and that if I want to contribute in a way that will be useful to other media creators using popcorn is to start thinking about creating Templates for Butter.
Templates for Butter. Plugins for Popcorn. Okay, I can get that.
Without discounting the initial two thirds, this point was driven home nicely at about 23 minutes into this recent presentation by Ben Mozkowitz and Bobby Richter where Ben exhorts developers to:
Make a template! The really cool thing about Popcorn Maker is that we are going to be some providing starter templates. But this thing isn't going to take off until we have a community of tens or hundreds or even thousands of people writing templates in the same way that you have tens or hundreds or even thousands of people writing WordPress themes.What a great goal! And one that I think is not too unrealistic actually.
My next step is to find out how I can begin contributing Butter templates. I was a little confused as to what a butter template would look like and where exactly are the sample files upon which I would base my work.
Shortly after, in the presentation, Ben briefly describes that:
So if it's just a regular template with a video and then a box for extra context, that div, where you want the video to be is data-butter = "media" and in the interface the user can add their own video to that div.
Target. Anything on the page that's targetable by Butter any div on the page where you want a map to come in , or some flickr to come in, or you want to have anything happen, you simply give it a data-butter = "target"
If there is stuff that you don't want to appear in the finished export use data-butter = "exclude"
If there are things that you don't want to appear in the interface use data-butter = "invisible"
I found this one template that interests me in particular:
And indeed, I found these declarative attributes that Ben had mentioned.
Also, as a test, I decided to see the difference between a Butter template, and the exported presentation:
So, this gets me started in thinking about where to begin, where things will end up once the presentation gets exported out of popcorn maker.
Also, it looks like here is where I will find the documentation for all of those declarations that I will need in order to use my template inside Butter:
Well, I certainly have my work cut out for me. For the next month I'll be adapting one of my existing presentations... (er, one of my presentations that I had originally based off of the hard work of the bright and brilliant folks who created popcorn and popcorn plugins) for use in Butter.
Wish me luck. I hope to write back and let you all know how it went.