<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Mozilla Popcorn</title>
	<atom:link href="http://mozillapopcorn.org/feed/" rel="self" type="application/rss+xml" />
	<link>http://mozillapopcorn.org</link>
	<description>Making video work like the web</description>
	<lastBuildDate>Mon, 23 Apr 2012 06:12:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Popcorn Learning Lab London</title>
		<link>http://mozillapopcorn.org/popcorn-learning-lab-london/</link>
		<comments>http://mozillapopcorn.org/popcorn-learning-lab-london/#comments</comments>
		<pubDate>Tue, 03 Apr 2012 05:37:06 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[events]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=929</guid>
		<description><![CDATA[Read about our inaugural event in London! <a href="http://mozillapopcorn.org/popcorn-learning-lab-london/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>When you schedule a Learning Lab for 11 on a Sunday, and the sun decides to shine on the British Isles, you start to get nervous about whether people show up.  This was the predicament at 10:50 am on the day of our first-ever Popcorn Learning Lab, held at Mozilla&#8217;s new London office.  Imagine our delight, then, to see more than 30 people come through the doors!</p>
<p>
<img src="http://farm8.staticflickr.com/7070/6867968826_3bcbe73b74.jpg" width="500" height="375" alt="#poplab hacking"></a>
</p>
<p>
To get started, we showed a series of popcorn demos.  The project is always much easier to understand when you see the different ways people have applied it &#8211; watching the evolution of demos from things like the <a href="http://www.rebelliouspixels.com/semanticremix/">Rebellious Pixels semantic remix</a> to the recent <a href="http://www.robmorrismusic.com/knowyourexit/">Know Your Exit creation</a> had lightbulbs going off around the room.</p>
<p>
We wanted to have participants move into creation as fast as possible – to facilitate this, Brian Chirls created the <a href="https://github.com/brianchirls/popcorn-boilerplate">“Popcorn Boilerplate”</a> project: a bare-bones HTML page featuring popcorn.  For content, we had everyone work with Episode 4 of Kirby Ferguson&#8217;s fantastic <a href="http://www.everythingisaremix.info/">Everything Is A Remix</a> series.
</p>
<p>
<img src="http://farm8.staticflickr.com/7064/6867831612_88e40c4b7b.jpg" width="500" height="375" alt="@thecole working with new coders at #doclab">
</p>
<p>
Before lunch, Popcorn community members <a href="https://twitter.com/#!/bchirls">Brian Chirls</a> and <a href="https://twitter.com/#!/thecole">Cole Gillespie</a> led folks with a background in Javascript through the basics of using the library and creating custom plugins.  Those with no prior coding experience were brave enough to test drive the alpha version of <a href="http://www.mozillapopcorn.org/popcorn-maker">Popcorn Maker</a>.
</p</p>
<p>
After we had recharged with some food, we broke into several groups in order to get down to some serious webmaking.  Group 1 wanted to apply their newfound knowledge of the Popcorn.js library to a unique creation.  Group 2 decided to use Popcorn Maker to try and augment one of their own videos.  And Group 3 wanted to ideate a web native project in more detail with wireframes and a project spec.
</p>
<p>
<img src="http://farm8.staticflickr.com/7128/6867858364_8f76073a15.jpg" width="500" height="375" alt="#poplab wireframe"></p>
<p>
The first order of business was paper prototyping – each of the 3 groups began mapping out the experience they wanted to create.  Brian and Cole each acted as the “help desk”, answering questions that hackers would bring.  Folks using Popcorn Maker pushed through the bugs to upload their own videos, apply events, and export their code.  Before long, far more time had flown by then we realized.  Those who were determined to get a demo done began a furious hack to the finish line.
</p>
<p>
<a href="http://mozillapopcorn.org/PopcornCollage/"><img src="http://mozillapopcorn.org/wp-content/uploads/2012/04/popcorncollage-1024x468.png" alt="" title="popcorncollage" width="584" height="266" class="alignnone size-large wp-image-930" /></a></p>
<p>At our closing circle, we showcased the results of the day.  Stephen Johnson, who&#8217;d come to explore the potential of using Popcorn at British Telecom, made a custom Popcorn.js plugin to sample frames from a movie to populate a collage.  <a href="http://mozillapopcorn.org/PopcornCollage/index.html">Try it out here</a></p>
<p>
<img src="http://farm8.staticflickr.com/7063/6868193036_74ddd5a494.jpg" width="500" height="375" alt="#poplab demo">
</p>
<p>
Lawrence Job, a frequent hacker at <a href="http://youngrewiredstate.org/">Young Rewired State</a>, paired up with Chris Hutchinson, a Birmingham student whose <a href="http://www.redbrickpaper.co.uk/">website</a> won the Guardian&#8217;s “Website Of The Yea” at the Guardian Student Media Awards.  Together they hacked up a commenting system that uses websockets to allow multiple people to create comments using popcorn.  <a href="http://labs.gridfusions.com/popcorn/mockup.html">Try it out</a>!
</p>
<p>
<a href="http://htmlpad.org/kat/"><img src="http://mozillapopcorn.org/wp-content/uploads/2012/04/salvationarmy.png" alt="" title="salvationarmy" width="771" height="433" class="alignnone size-full wp-image-931" /></a>
</p>
<p>Kat, who produces video content for the Salvation Army, realized how useful Popcorn Maker can be to non-profits.  She augmented one of their videos using the Pop Up Video template, to add the name, picture and twitter page of a local MP who had attended one of their events (scroll to around 0:31 seconds in the video).  She also added a link to the Salvation Army&#8217;s donations page (1:32), a simple but powerful use of “hypervideo”. Techniques. <a href="http://htmlpad.org/kat/">Watch her video!</a></p>
<p><h1>What We Learned</h1>
<p>Working with a shared video was definitely something we&#8217;ll continue to do in future learning labs – it lets participants focus on creating popcorn experiences rather than video production.  We&#8217;d like to take the concept further and provide a series of simple exercises that everyone in the group can explore right away.  The popcorn boilerplate was a great start, but we need a series of simple recipes everyone can follow, regardless of coding skill.  Further on that point, we chose to separate participants into those who knew JavaScript and those who don&#8217;t , which in hindsight goes against our cross-disciplinary working model.  Many participants let us know in the closing circle that they would have enjoyed the chance to “cross the aisle” and work with people of different skill sets and experiences. It&#8217;s on us to design a flow for the day that allows coders and media makers to be working together for the entire time.</p>
<p>
<img src="http://farm7.staticflickr.com/6097/7014314109_2c49fcef08.jpg" width="500" height="375" alt="#poplab team vision">
</p>
<p>
We also learned that the future for these types of events is quite bright – that there are lots of people eager to not only learn technologies like popcorn, but who want to challenge themselves to roll up their sleeves and start hacking.  A big thanks to those who gave up their Sunday afternoons to hack with us and kickstart the Popcorn Learning labs!
</p<</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/popcorn-learning-lab-london/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>The Living Docs Project</title>
		<link>http://mozillapopcorn.org/the-living-docs-project/</link>
		<comments>http://mozillapopcorn.org/the-living-docs-project/#comments</comments>
		<pubDate>Wed, 14 Mar 2012 21:27:15 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[featured]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=919</guid>
		<description><![CDATA[Mozilla is partnering with the world’s leaders in documentary film to launch <a href="http://livingdocs.org/">The Living Docs Project</a> <a href="http://mozillapopcorn.org/the-living-docs-project/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<h1><a href="http://openmatt.org/wp-content/uploads/2012/03/Mozilla-Living-Docs-project.png"><img class="alignnone  wp-image-3890" title="Mozilla Living Docs project" src="http://openmatt.org/wp-content/uploads/2012/03/Mozilla-Living-Docs-project.png" alt="" width="484" height="286" /></a></h1>
<p><strong>Mozilla is partnering with the world’s leaders in documentary film to launch <a href="http://livingdocs.org/">The Living Docs Project</a></strong>. The partnership will produce events, projects and code aimed at revolutionizing Web-based documentaries, using the power of new open Web tools like <a href="http://mozillapopcorn.org">Mozilla Popcorn</a> to create new ways of telling stories online.</p>
<p>Living Docs is a partnership between <strong>Mozilla</strong>, <a href="http://www.tribecafilminstitute.org/"><strong>The Tribeca Film Institute</strong></a>, <a href="http://www.centerforsocialmedia.org/"><strong>The Center for Social Media at American University</strong></a>, <a href="http://www.itvs.org/"><strong>ITVS</strong></a> and <a href="http://www.bavc.org/"><strong>BAVC</strong></a>. The Tribeca Film Institute is one of the world&#8217;s leading funders of interactive documentaries.</p>
<h3>Filmmakers and developers changing the face of storytelling</h3>
<p><strong>Living Docs films will apply the &#8220;hacker spirit&#8221; of open innovation to the world of documentary</strong>, using open Web technology, sharing code and resources, and releasing new iterations early and often.</p>
<p>&#8220;<strong>This is about the evolution of the documentary genre</strong>,&#8221; said Mozilla&#8217;s Brett Gaylor. &#8220;We&#8217;re bringing filmmakers and developers together to tell stories in ways that have never been attempted before.&#8221;</p>
<p>&#8220;As storytelling enters the 21st Century, we are inspired by Mozilla’s open-source ethos of collaboration, constant learning and iteration,&#8221; said ITVS. &#8220;These new ways of working require new skills, new teams and new aesthetics.&#8221;</p>
<p><iframe src="http://player.vimeo.com/video/30815126?title=0&amp;byline=0&amp;portrait=0" frameborder="0" width="400" height="225"></iframe></p>
<h3>Hot Docs hackathon</h3>
<p>The first Living Docs hackathon will pair web developers and documentary filmmakers at the upcoming <a href="http://www.hotdocs.ca/">Hot Docs film festival</a> in Toronto. The project is now seeking filmmakers with interactive projects to <a href="http://www.livingdocs.org/hothacks">participate</a> in the two-day sprint, which will be held April 28 and 29 at Mozilla Toronto.</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/the-living-docs-project/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Popcorn.js 1.2</title>
		<link>http://mozillapopcorn.org/popcorn-js-1-2/</link>
		<comments>http://mozillapopcorn.org/popcorn-js-1-2/#comments</comments>
		<pubDate>Tue, 13 Mar 2012 20:16:03 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=908</guid>
		<description><![CDATA[Hot on the heels of Popcorn Maker v0.2, the Popcorn team is proud to announce the release of Popcorn.js v1.2! It&#8217;s been 3 months in the making and we&#8217;ve got some hot new features for you to play with: Beta &#8230; <a href="http://mozillapopcorn.org/popcorn-js-1-2/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>
Hot on the heels of Popcorn Maker v0.2, the Popcorn team is proud to announce the release of Popcorn.js v1.2! It&#8217;s been 3 months in the making and we&#8217;ve got some hot new features for you to play with:
</p>
<h1>Beta Internet Explorer 8 support</h1>
<p>
Thanks to the efforts of <a href="http://scottdowne.wordpress.com/">Scott Downe</a> and Greg Kindel at <a href="http://www.ramp.com/popcorn">RAMP</a>,  we have Popcorn.js working with Youtube in IE8 in addition to our supported browsers. Some plugins work, such as subtitle and footnote, and we will be adding support for more in the future. If you&#8217;re interested in adding support for your own Flash players to Popcorn.js, please <a href="http://popcornjs.org/popcorn-docs/addon-development/">read the documentation</a>.
</p>
<p>
<b>update:</b> It appears that as of 1.2, we are now passing all Internet Explorer 10 tests, as well!</b>
</p>
<h1>Allow content to remain after ended</h1>
<p>
The behaviour of plugins has been enhanced to give authors more control over the life-cycle of displayed content. Authors may now set the value of &#8220;end&#8221; to either false or undefined, which will cause the content to remain forever. Previously, unspecified &#8220;end&#8221; properties would default to the duration of the video. This change will allow plugins to stay active after the media has ended.
</p>
<h1>Popcorn.smart player</h1>
<p>
This new add-on will load Popcorn with the correct player based on the URL. Popcorn authors will now be able to add a youtube, vimeo, or native html5 media file and have Popcorn call the right player. <a href="http://popcornjs.org/popcorn-docs/players/#smart">See the documentation</a>.
</p>
<h1>Deprecated methods</h1>
<p>
We have deprecated the following methods:
</p>
<ul>
<li>listen (now &#8220;on&#8221;)
<li>unlisten (now &#8220;off&#8221;)
<li>trigger (now &#8220;emit&#8221;)
<li>exec (now &#8220;cue&#8221;)
<li>The functionality of each old and new method is exactly the same, just with a shorter alias.
</ul>
<h1>Grab bag</h1>
<ul>
<li>Added Rdio plugin</li>
<li>Added Popcorn.removePlayer</li>
<li>Added loadedmetadata, loadeddata, canplaythrough, and ended events to Youtube.</li>
<li>Fixed Youtube autoplaying on load</li>
<li>Moved development to http://github.com/mozilla/popcorn-js</li>
<li>Moved Popcorn.parser, Popcorn.player, and Popcorn.locale out in their own modules</li>
<li>Updated test suite to QUnit 1.3</li>
</ul>
<p>
Head over to our <a href="http://www.popcornjs.org/downloads">downloads page</a> or <a href="https://github.com/mozilla/popcorn-js">fork us on Github</a> to get started with Popcorn 1.2!</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/popcorn-js-1-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mozilla Popcorn @ SXSW</title>
		<link>http://mozillapopcorn.org/sxsw/</link>
		<comments>http://mozillapopcorn.org/sxsw/#comments</comments>
		<pubDate>Thu, 08 Mar 2012 07:37:57 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=880</guid>
		<description><![CDATA[Hello SXSW attendees! Thanks for stopping by. What is Popcorn? Popcorn is a Mozilla project to make video work more &#8220;like the web.&#8221; We make open source software for both developers and storytellers to seize on the possibilities of HTML5 &#8230; <a href="http://mozillapopcorn.org/sxsw/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p class="sub-title">Hello SXSW attendees!  Thanks for stopping by.</p>
<h1>What is Popcorn?</h1>
<p>Popcorn is a Mozilla project to make video work more &#8220;like the web.&#8221; We make open source software for both developers and storytellers to seize on the possibilities of HTML5 video.</p>
<p>
Popcorn is a framework to synchronize web media with any content or service on the web. Developers should check out <a href="http://popcornjs.org">Popcorn.js</a>, a JavaScript library for web developers and <a href="http://mozillapopcorn.org/maker">Popcorn Maker</a>, alpha-software that lets anyone create interactive HTML5 video without writing a line of code.</p>
<h1>Come meet us at SXSW!</h1>
<p><b>Saturday March 10th</b><br />
Mozilla, the MIT Media Lab and the Knight Foundation will take part in an &#8220;Innovation Fair and Reception&#8221; showcasing open technologies for journalists.</p>
<p>
<b>Sunday March 11th</b><br />
Mozilla Director Brett Gaylor will be with friends on a panel at the Film Conference pondering this heavy duty question: <a href="http://schedule.sxsw.com/2012/events/event_FP13743"?>Does HTML5 Offer a Montage Moment for Cinema?</a>.  </p>
<p>
That evening, the Popcorn team returns to the Mozilla Mothership at the SXSW mega event<a href="http://feed.learnedevolution.com/"> #FEED</a>. Art hackers Beak Labs will be creating a Popcorn installation live on site.</p>
<p>
<b>Monday March 12th</b><br />
See which side of the smackdown Mozilla&#8217;s Ben Moskowitz lines up on in the Interactive panel <a href="http://schedule.sxsw.com/2012/events/event_FP990223">HTML5 for Film: Bleeding Edge or Leading Edge</a>.</p>
<p>
<img src="http://mozillapopcorn.org/wp-content/uploads/2012/02/rampcorn1.png" alt="" title="rampcorn" width="200" height="184" class="alignleft size-full wp-image-847" />Stop by the SXSW <a href="sxsw.com/trade_shows/about">tradeshow</a> to see what Popcorn contributors RAMP have been up to. Head to booth 341 where RAMP is showcasing a number of new Popcorn applications and integrations with their core MediaCloud technology for creating and managing timecoded metadata. Tuesday night, as part of the SXSW Block Party, RAMP will have<br />
beers and snacks in the booth as well as free Popcorn t-shirts.</p>
<p>
<p>
<p><br style="clear:both;" /></p>
<h1>The Living Docs Project</h1>
<p>Mozilla is partnering with the world&#8217;s leaders in documentary film to present <a href="http://livingdocs.org">The Living Docs Project</a>, a series of events, projects and code to support the creation of web docs.  Living Docs films apply the hacker spirit of open innovation to the world of documentary by using open web technology, sharing code and resources, and releasing early and often. </p>
<p>Living Docs is a partnership between Mozilla, ITVS, The Tribeca Film Institute, BAVC and the Center for Social Media at American University.</p>
<p><a href="http://livingdocs.org"><img src="http://mozillapopcorn.org/wp-content/uploads/2012/03/LivingDocs_transparent.png" alt="" title="LivingDocs_transparent" width="309" height="164" class="alignleft size-full wp-image-899" /></a></p>
<p>At SXSW, we&#8217;re announcing our next hackathon, where we&#8217;ll pair web developers and documentary filmmakers at the Hot Docs Film Festival. If you&#8217;re a filmmaker with an interactive project,<a href="http://www.livingdocs.org/hothacks">sign up here for this unique opportunity!</a></p>
<p>
<p>
<p>
And check out this video from the last Living Docs hackathon:</p>
<p><iframe src="http://player.vimeo.com/video/30815126?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></p>
<p>Find out more at <a href="http://www.livingdocs.org">www.livingdocs.org.</a></p>
<h1>Hold an event in your home town</h3>
<p>Interested in hacking with Popcorn in your hood?  Popcorn Learning Labs are a great way to build a community of like minded hackers.  Read about these events <a href="http://michellethorne.cc/2012/02/howto-popcorn-learning-lab/">here</a>, then <a href="mailto:popcorn@mozilla.com">get in touch</a>.</p>
<h1>Help us develop Popcorn Maker</h1>
<p>Popcorn Maker is an exciting open source project that needs help from contributors like you.  <a href="http://mozillapopcorn.org/roadmapping-popcorn-maker-1-0/">Read about our Roadmap here</a> and find out how to help.</p>
<h1>Get in touch</h1>
<p>We&#8217;d love to hear from you! Let us know if you&#8217;ve used Popcorn, want to know more, or would like to collaborate.<br />
<a href="mailto:popcorn@mozilla.com">popcorn@mozilla.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/sxsw/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Popcorn Maker 0.2</title>
		<link>http://mozillapopcorn.org/whats-new-in-popcorn-maker-0-2-ghostbusters/</link>
		<comments>http://mozillapopcorn.org/whats-new-in-popcorn-maker-0-2-ghostbusters/#comments</comments>
		<pubDate>Tue, 06 Mar 2012 00:23:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[butter]]></category>
		<category><![CDATA[demos]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[planning]]></category>
		<category><![CDATA[popcorn maker]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=864</guid>
		<description><![CDATA[Popcorn Maker has hit the 0.2 milestone. <a href="http://mozillapopcorn.org/whats-new-in-popcorn-maker-0-2-ghostbusters/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-large wp-image-867" title="Ghostbusted" src="http://mozillapopcorn.org/wp-content/uploads/2012/03/ghostbusted-1024x477.jpg" alt="" width="584" height="272" /></p>
<p>Popcorn Maker has hit the 0.2 milestone.</p>
<p><em>Popcorn Maker will empower everyone to make interactive video for the web. Read about the <a href="http://www.benmoskowitz.com/?p=254">vision</a> and our <a href="http://www.benmoskowitz.com/?p=458">roadmapping</a> efforts. If you want to help out, have a look at the open tickets in <a href="https://webmademovies.lighthouseapp.com/projects/65733-butter/overview">Lighthouse</a>.</em></p>
<div id="attachment_505" class="wp-caption alignright" style="width: 260px"><img class="size-full wp-image-505" title="Ghostbusters cake" src="http://www.benmoskowitz.com/wp-content/uploads/cake.jpg" alt="" width="250" height="188" /><p class="wp-caption-text">Happy 0.2 Birthday, Dave</p></div>
<p>Last week, the Popcorn team wrapped the 0.2 milestone toward Popcorn Maker, cheekily codenamed Ghostbusters. (This made for a great release party, with a special screening of the movie and a <strong>Stay Puft-themed cake</strong>).</p>
<p>This release encompassed <a href="https://webmademovies.lighthouseapp.com/projects/65733/milestones/136715-02">104 tickets</a>, which is pretty intense. Major props to Bob Richter, Jon Buckley, Scott Downe, Chris, Dave, and the rest of the CDOT crew. And this is just getting started.</p>
<p>Because this is a release focused on rewriting Popcorn Maker&#8217;s foundations, we&#8217;ve skipped deployment for 0.2. But you can play around with the <a href="http://dev.mozillapopcorn.org/butter/test/template.html"><strong>new UI in a sandbox here.</strong></a> And you can also check out the <a href="https://github.com/mozilla/butter/blob/master/changelog">changelog</a>.</p>
<h1>What&#8217;s new?</h1>
<p>A lot has changed. I&#8217;ll call out 4 things in particular:</p>
<h1><img class="alignleft size-full wp-image-498" title="Architecture" src="http://www.benmoskowitz.com/wp-content/uploads/architecture.png" alt="" width="275" height="250" />1. Stronger software foundations</h1>
<p>Butter is the software development kit for Popcorn Maker and other Popcorn-powered web apps. In the past, Butter was tucked into the Popcorn Maker app, which loaded HTML templates in an iframe and communicated with them in a somewhat unreliable way.</p>
<p>We want the foundations of Popcorn Maker to be strong. So we&#8217;ve re-factored Butter to live inside user templates. This makes for much more elegant code and reliable interactions.</p>
<p>A cool side effect of this is that any page can be turned into a Popcorn Maker template by simply including butter.js.</p>
<h1>2. New and improved UI</h1>
<div id="attachment_499" class="wp-caption aligncenter" style="width: 630px"><img class="size-full wp-image-499 " title="Popcorn Maker UI, version 0.1" src="http://www.benmoskowitz.com/wp-content/uploads/before.png" alt="" width="620" height="152" /><p class="wp-caption-text">Popcorn Maker UI, version 0.1</p></div>
<div id="attachment_500" class="wp-caption aligncenter" style="width: 630px"><img class="size-full wp-image-500" title="Popcorn Maker UI, version 0.2" src="http://www.benmoskowitz.com/wp-content/uploads/after.png" alt="" width="620" height="112" /><p class="wp-caption-text">Popcorn Maker UI, version 0.2</p></div>
<p>Because Popcorn Maker is a WYSIWYG tool, it&#8217;s important that users have as much screen real estate as possible to visualize their projects.</p>
<p>So we&#8217;ve shrunk the tray to the smallest practical size. It&#8217;s 25% thinner than before. And we&#8217;ve moved the playhead to the status bar, so you have access to the whole timeline even when the tray is minimized.</p>
<p>We&#8217;ve added a layer of polish all around—lots and lots of nice touches. Track events are now distinguished by color and have more pleasing regions for moving and stretching. Track events are now selectable, which will pave the way for multiple event selection, copy+paste, and undo operations. In all, this makes the app feel much more tangible, and approaching the level of polish you&#8217;d expect in a native app.</p>
<h1>3. Droppable regions</h1>
<div id="attachment_501" class="wp-caption aligncenter" style="width: 524px"><img class="size-full wp-image-501  " title="Popcorn droppable" src="http://www.benmoskowitz.com/wp-content/uploads/droppable.png" alt="" width="514" height="162" /><p class="wp-caption-text">Popcorn events are now drag-n-droppable.</p></div>
<p>Popcorn Maker now lets your drop a Popcorn event (say, a map) directly onto the page target.</p>
<p>This is a small change that will make the app many times more usable. We&#8217;ll be introducing an even nicer &#8220;Add Popcorn&#8221; flow in the next release. And we&#8217;ll be exploring other drag-and-drop concepts over the year (like dropping a video into the page to upload).</p>
<h1>4. Accounts and saving</h1>
<p>Thanks to <a href="https://github.com/mozilla/cornfield">Cornfield</a>—the Popcorn server—this is the first Popcorn Maker release with server-side project storage. We have initial support for creating accounts with BrowserID and saving project data to the cloud.</p>
<p>Cornfield needs to be made more secure, so we have no public demo just yet. But if you&#8217;re inclined, you can clone <a href="http://github.com/mozilla/butter">Butter</a> and Cornfield and test this locally.</p>
<h1>Next up: 0.3, &#8220;Breakfast Club.&#8221;</h1>
<p><img class="alignleft size-full wp-image-506" style="border: 1px solid black;" title="Ghostbusters cake cut" src="http://www.benmoskowitz.com/wp-content/uploads/cut.jpg" alt="" width="250" height="188" />This month, we&#8217;ll be rolling up all this work into a version of the app that will stand on its own. The 0.3 release, codenamed Breakfast Club, should be approachable by users and enable top-to-bottom project creation, saving, and publishing.</p>
<p>This release will introduce a temporary template loader that will tide us over between now and June, when we stand up a proper Django backend.</p>
<p>It will be a big challenge to coordinate all these things—Butter, Cornfield, the template loader, templates and documentation. But Popcorn Maker is getting more real—and more powerful—every day. Exciting stuff.</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/whats-new-in-popcorn-maker-0-2-ghostbusters/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Popcorn and Documentary</title>
		<link>http://mozillapopcorn.org/popcorn-and-documentary/</link>
		<comments>http://mozillapopcorn.org/popcorn-and-documentary/#comments</comments>
		<pubDate>Fri, 10 Feb 2012 23:35:06 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=809</guid>
		<description><![CDATA[In this post I explore how Popcorn follows the tradition of technology influencing the form of documentary. This post was created with Popcorn Maker.]]></description>
			<content:encoded><![CDATA[<p><iframe src="http://mozillapopcorn.org/popcorndocumentary.html" width="650px" height="400px" scrolling="no"></iframe></p>
<p>
In this post I explore how Popcorn follows the tradition of technology influencing the form of documentary.</p>
<p>This post was created with Popcorn Maker.</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/popcorn-and-documentary/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Roadmap Popcorn Maker 1.0</title>
		<link>http://mozillapopcorn.org/roadmapping-popcorn-maker-1-0/</link>
		<comments>http://mozillapopcorn.org/roadmapping-popcorn-maker-1-0/#comments</comments>
		<pubDate>Wed, 08 Feb 2012 05:23:23 +0000</pubDate>
		<dc:creator>ben</dc:creator>
				<category><![CDATA[butter]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[planning]]></category>
		<category><![CDATA[popcorn]]></category>
		<category><![CDATA[popcorn maker]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=787</guid>
		<description><![CDATA[We are hard at work on Popcorn Maker <a href="http://mozillapopcorn.org/roadmapping-popcorn-maker-1-0/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://mozillapopcorn.org/wp-content/uploads/2012/02/roadmappin.png"><img class="alignnone size-medium wp-image-797" title="roadmappin" src="http://mozillapopcorn.org/wp-content/uploads/2012/02/roadmappin-300x154.png" alt="Roadmap for Popcorn 1.0" width="300" height="154" /></a><img class="alignright" style="border: 1px solid black;" src="http://benmoskowitz.com/i/pm/pmcomponents.png" alt="" width="281" height="258" /></p>
<p>We are hard at work on Popcorn Maker.</p>
<p>Currently at <a href="http://mozillapopcorn.org/maker">version 0.1</a>, Popcorn Maker is a little crufty. But Popcorn Maker 1.0 will hit hard in November of this year.</p>
<p>Popcorn Maker 1.0 will empower you to make cool web-based media, whether you&#8217;re a beginner or pro. With over 20 plugins—ranging from Twitter to Google Maps to video processing—you&#8217;ll be able to stitch up a stylish video that&#8217;s &#8220;<a href="http://popcornjs.org/demos">woven</a>&#8221; into the web. And, of course, it&#8217;s 100% free and open source.</p>
<p>Users will be able to publish and share their creations on their blog, Twitter, or Tumblr (or just grab the code). And the app will reward them for learning more advanced HTML, CSS, and Javascript skills.</p>
<p>When it hits critical mass, Popcorn Maker will be an engine for community innovation in open video.</p>
<p><a href="http://www.benmoskowitz.com/?p=254">I blogged about the Popcorn Maker vision in July of last year</a>. Since then, <a href="http://commonspace.wordpress.com/2011/11/22/mozilla-2012-plan/">it&#8217;s moved to the center of the Foundation&#8217;s &#8220;Maker&#8221; strategy</a> for 2012.</p>
<h1>Roadmapping</h1>
<p>Last week—thanks to four intense, caffeine-fueled days—the project team arrived at a pretty solid roadmap and vision for Popcorn Maker. Our issue tracker also includes several hundred new/reassigned bugs, mapped against <a href="https://webmademovies.lighthouseapp.com/projects/65733-butter/milestones">cheeky code names for each release</a>. (We&#8217;ve chosen a blockbuster movie motif, so look forward to 0.2 Ghostbusters, 0.3 Breakfast Club, 0.4 Top Gun, 0.5 Pulp Fiction, 0.6 Terminator, 0.7 Amelie, 0.8 Rushmore, 0.9 Wrath of Khan, and finally, 1.0—Matrix.)</p>
<p>What&#8217;s new? A heightened level of ambition, matched with increased rigor to get it done.</p>
<div class="wp-caption alignright" style="width: 299px"><img class=" " src="http://benmoskowitz.com/i/pm/pmembed.png" alt="" width="289" height="177" /><p class="wp-caption-text">Starting in 0.7, you&#39;ll be able to embed a viral Popcorn player on third-party sites.</p></div>
<p>Importantly, we&#8217;ve developed a working theory of how Popcorn can become a webmaking virus, which <a href="http://mozillapopcorn.org/mozilla-popcorn-aka-the-meme-generating-machine/">Brett Gaylor has blogged about here</a>.</p>
<p>All of this is reflected in a shiny vision document, which is a work in progress (we&#8217;ll share next week). We&#8217;ve hashed out some user stories, gotten granular on the technical challenges, and imagined how the UI/UX might work. We need to kick the tires a bit before we&#8217;re confident in both the user stories and the roadmap, but we&#8217;re close.</p>
<p>We&#8217;d love to have your feedback in our <a href="https://webmademovies.lighthouseapp.com/projects/80723-popcorn-maker/tickets/286-popcorn-maker-user-stories">Lighthouse</a> issue tracker. (And, as always, we&#8217;d love to hear your <a href="https://webmademovies.lighthouseapp.com/projects/89138-popcorn-maker-templates/overview">template ideas</a>! Feel free to create a ticket and let us know what&#8217;s on your mind.)</p>
<p>Here&#8217;s a look at some of our thinking.</p>
<h1>Editor UI</h1>
<p>Most users will experience the app as a special editor tray that sits on top of the project you&#8217;re working on (Popcorn Maker is a <a href="http://en.wikipedia.org/wiki/WYSIWYG">WYSIWYG</a> tool). We need to get the editor UI/UX right. It needs to be compact but not constraining.</p>
<p style="text-align: center;"><img class="aligncenter" src="http://benmoskowitz.com/i/pm/pmevents.png" alt="" width="552" height="293" /></p>
<p>We&#8217;re moving event editors to the tray (in lieu of floating windows) and making it more intuitive to add Popcorn events to a page (just drag and drop onto the page target).</p>
<p style="text-align: center;"><img class="aligncenter" src="http://benmoskowitz.com/i/pm/pmadd.png" alt="" width="563" height="233" /></p>
<p>To make the app more versatile, we&#8217;ll offer a simple CSS editor UI to change your styles, without isolating you too much from the actual CSS:</p>
<p><img class="alignnone" src="http://benmoskowitz.com/i/pm/pmcss.png" alt="" width="602" height="351" /></p>
<h1>Popcorn Gallery</h1>
<p>The life-force of Popcorn Maker will be the Popcorn Gallery, which will let contributors share templates that others can build on. Call it the &#8220;WordPress.org effect.&#8221;</p>
<p><img class="alignnone" src="http://benmoskowitz.com/i/pm/pmgallery.png" alt="" width="324" height="296" /><img class="alignnone" src="http://benmoskowitz.com/i/pm/pmshare.png" alt="" /></p>
<h1>Plugins</h1>
<div class="wp-caption alignright" style="width: 286px"><img src="http://benmoskowitz.com/i/pm/pmplugins.png" alt="" width="276" height="47" /><p class="wp-caption-text">You can use any popcorn.js plugin in Popcorn Maker. Even write your own.</p></div>
<p>Last but not least—plugins. Popcorn.js plugins are what make Popcorn Maker magic. We&#8217;re currently planning on supporting the following plugins, each with a pleasing editor UI (these are subject to change): Image, Video, Webpage, Wikipedia, Attribution, Media control, Apply class, Google map, Open Street Map, Chroma, Video effects, 3D object, Processing, WordRiver, PDF, DocumentCloud, Twitter, Facebook graph, Flickr.</p>
<p>One of the coolest things about Popcorn Maker, though, is that it will support every Popcorn.js plugin through a default editor. And plugin authors can create editor UIs for their plugins. In other words, the project is intentionally modular, so the Popcorn.js community can help us build out the functionality of the app. <strong> </strong></p>
<p><strong>As the community grows, the app becomes more powerful</strong>.</p>
<p>Seriously.<a href="http://seriouslyjs.org/"> Check out Seriously.js</a>, then read that again.</p>
<h1>Roadmap—want to help?</h1>
<p>It&#8217;s going to be a hard sprint. But it&#8217;s super plausible, especially with Bobby Richter, Dave Humphrey, and the brilliant students of Seneca&#8217;s <a href="http://zenit.senecac.on.ca/wiki/index.php/Main_Page">CDOT</a> at the wheel. Here&#8217;s our roadmap, which will likely change a bit before we freeze it this month. Want to help? Join #popcorn in irc.mozilla.org, or join our <a href="https://groups.google.com/group/web-made-movies-working?hl=en">mailing list</a>.</p>
<p style="text-align: center;"><a href="http://benmoskowitz.com/i/pm/pmroadmap.png"><img class="aligncenter" src="http://benmoskowitz.com/i/pm/pmroadmap.png" alt="" width="620" height="444" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/roadmapping-popcorn-maker-1-0/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Mozilla Popcorn aka The Meme Generating Machine</title>
		<link>http://mozillapopcorn.org/mozilla-popcorn-aka-the-meme-generating-machine/</link>
		<comments>http://mozillapopcorn.org/mozilla-popcorn-aka-the-meme-generating-machine/#comments</comments>
		<pubDate>Wed, 08 Feb 2012 05:12:46 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=749</guid>
		<description><![CDATA[meme ( /ˈmiːm/) &#8220;an idea, behavior or style that spreads from person to person within a culture.&#8221; &#8220;A meme is an idea that behaves like a virus&#8211;that moves through a population, taking hold in each person it infects.&#8221; &#8211; Malcolm &#8230; <a href="http://mozillapopcorn.org/mozilla-popcorn-aka-the-meme-generating-machine/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><strong>meme</strong> ( /ˈmiːm/)<br />
&#8220;an idea, behavior or style that spreads from person to person within a culture.&#8221;</p>
<p><em>&#8220;A meme is an idea that behaves like a virus&#8211;that moves through a population, taking hold in each person it infects.&#8221;</em> &#8211; Malcolm Gladwell&#8221;</p>
<p><strong>We need Mozilla Popcorn to become a virus.</strong></p>
<p>Hear us out here.</p>
<p>In our early iterations of Popcorn Maker, we&#8217;ve been tackling the problem of how to make it easy for non-programmers to create Popcorn experiences. It remains the central focus of the project, and we&#8217;ve fleshed out our User Stories to imagine the full experience that a user might have. Tthese stories have informed the foundational changes to Popcorn Maker that Ben outlined in <a href="http://mozillapopcorn.org/roadmapping-popcorn-maker-1-0/">a recent blog post</a>.</p>
<p>During our Popcorn Maker sprint, we put a lot of thought into imagining how our users&#8217; creations will get shared and disseminated on the web. Ben has blogged about how <a href="http://www.benmoskowitz.com/?p=390">Popcorn.js is a gateway drug</a> to learning JavaScript (Also of the good sort. Stay with us). Similarly, we want Popcorn Maker to be a tool for injecting the Maker meme onto the web.</p>
<h1>Fork my meme</h1>
<p>To do this, we&#8217;ll need to do a few things. First, we need to make it easy for Popcorn makers to embed their creations on their own blogs, Tumblrs and websites. This means offering &lt;iframe&gt;embeds.<br />
<img class="alignnone size-full wp-image-751" title="tumblr" src="http://mozillapopcorn.org/wp-content/uploads/2012/02/tumblr.png" alt="" width="479" height="309" /></p>
<p>More interestingly, we want to give viewers the ability to fork others&#8217; Popcorn productions. If you&#8217;ve watched Jonathan MacIntosh&#8217;s <a href="http://www.rebelliouspixels.com/popupvideo/">Buffy Vs Edward pop-up video remix</a>, for example, wouldn&#8217;t you love the ability to easily clone his creation and add to it?</p>
<p>Each Popcorn creation needs a post-roll that offers viewers the ability to 1) Replay, 2) Share and embed, and 3) Fork this creation.</p>
<p><img src="http://benmoskowitz.com/i/pm/pmembed.png" /></p>
<h1>Popcorn Gallery</h1>
<p><img src="http://benmoskowitz.com/i/pm/pmshare.png" /></p>
<p>To build WordPress-like community scaffolding, we need the ability for every single creation to be made available in the Popcorn Gallery. When users choose to [Share] from Popcorn Maker they have an option to share to the Gallery that is checked by default.</p>
<p>While the Gallery will favour our default templates, it will become a jumping off point for new creators to get started with Popcorn. It will solidify the notion that creating on the web is generative. <strong>The act of creation will start by building on someone else&#8217;s work.</strong></p>
<p><img class="alignnone size-full wp-image-753" title="gallery" src="http://mozillapopcorn.org/wp-content/uploads/2012/02/gallery.png" alt="" width="569" height="481" /></p>
<p>We think Popcorn will be a good bug to catch. Like getting the chicken pox when you were a kid. Or maybe more like taking an interest in photography. We&#8217;re sure this is the right metaphor.</p>
<p><em>Note: knock knock jokes, box stores and lolcats were all considered as alternatives while titling this post. Go meme or go home.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/mozilla-popcorn-aka-the-meme-generating-machine/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Buffy slays Twilight:how to make pop-up video mayhem</title>
		<link>http://mozillapopcorn.org/buffy-slays-twilight-how-to-make-pop-up-video-mayhem/</link>
		<comments>http://mozillapopcorn.org/buffy-slays-twilight-how-to-make-pop-up-video-mayhem/#comments</comments>
		<pubDate>Thu, 26 Jan 2012 16:36:06 +0000</pubDate>
		<dc:creator>Matt Thompson</dc:creator>
				<category><![CDATA[featured]]></category>
		<category><![CDATA[popcorn maker]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=738</guid>
		<description><![CDATA[&#160; <a href="http://mozillapopcorn.org/buffy-slays-twilight-how-to-make-pop-up-video-mayhem/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://openmatt.files.wordpress.com/2012/01/html5-pop-up-video.png"><img src="http://openmatt.files.wordpress.com/2012/01/html5-pop-up-video.png" alt="" width="450" height="250" /></a></p>
<p><strong>Remember those awesome <a href="http://en.wikipedia.org/wiki/Pop-Up_Video">pop-up videos</a> on VH1?</strong> Thanks to <a href="https://mozillafestival.org/">Mozilla Popcorn</a>, the new HTML5 tool for supercharging web video, the pop-up format is about to get a whole new lease on life.</p>
<p>Exhibit A: this wicked &#8220;<a href="http://www.rebelliouspixels.com/popupvideo/">Buffy the Vampire Slayer vs. Edward from Twilight</a>&#8221; remix, created by the mash-up maestro from <a href="http://www.rebelliouspixels.com/jonathan-mcintosh">Rebellious Pixels</a>. Check it out <a href="http://www.rebelliouspixels.com/popupvideo/">here</a>. Then get started making your own pop-up video <a href="http://mozillapopcorn.org/maker/#">here</a>.</p>
<p><a href="http://openmatt.files.wordpress.com/2012/01/mozilla-popcorn-buffy-twilight-remix.png"><img src="http://openmatt.files.wordpress.com/2012/01/mozilla-popcorn-buffy-twilight-remix.png" alt="" width="450" height="333" /></a></p>
<h3><strong>&#8220;Hacking pop culture&#8221;</strong></h3>
<p>First posted in its original form in 2009, the &#8220;Buffy vs. Edward&#8221; remix video has garnered over 4 million views, been subtitled into 30 languages, and received <a href="http://www.rebelliouspixels.com/2009/buffy-vs-edward-twilight-remixed">media attention</a> from NPR radio to <em>Vanity Fair </em>(&#8220;<a href="http://www.vanityfair.com/online/wolcott/2009/06/buffy-could-kick-edward-cullens-precious-ivory-emo-ass">Buffy Could Kick Edward Cullen&#8217;s Precious Sparkly Emo Ass</a>&#8220;).</p>
<p>The new Mozilla Popcorn-powered &#8220;pop-up&#8221; version adds a new interactive layer over top, with added annotations, commentary, and tips on protecting yourself from real-life stalkers.</p>
<p>The video&#8217;s creator, &#8220;pop culture hacker&#8221; Jonathan McIntosh, says the remix is all about hacking gender roles and Hollywood cultural coding &#8212; a theme he&#8217;s explored in other projects like the hilarious &#8220;<a href="http://www.genderremixer.com/html5/">Gendered Advertising Remixer</a>,&#8221; now also available in HTML5 format.</p>
<h3><a href="http://openmatt.files.wordpress.com/2012/01/rebellious-pixels-html5-popcorn-js.png"><img src="http://openmatt.files.wordpress.com/2012/01/rebellious-pixels-html5-popcorn-js.png" alt="" width="450" height="163" /></a></h3>
<p>&nbsp;</p>
<h3><strong>Create your own pop-up video with Mozilla Popcorn</strong></h3>
<p><strong>Want to add annotations and pop-ups to your own videos?</strong> <a href="http://mozillapopcorn.org/maker/">Popcorn Maker</a> is designed to make the power of Mozilla Popcorn more accessible to non-developers and mere mortals. Popcorn Maker&#8217;s &#8220;pop-up video&#8221; template makes it (fairly) easy for you to add annotations and context to just about any video on the web.</p>
<p>The software is still in early alpha version, so there&#8217;s still lots of rough edges. But you can check it out and <a href="http://mozillapopcorn.org/maker/">get started now</a>. Just pick &#8220;Pop Video&#8221; from the &#8220;Choose a Template&#8221; menu. Or have a look at the Popcorn Maker <a href="http://mozillapopcorn.org/maker/lib/userManual.html">user manual here</a>.</p>
<p><a href="http://openmatt.files.wordpress.com/2012/01/create-popup.png"><img class="alignnone size-full wp-image-3482" src="http://openmatt.files.wordpress.com/2012/01/create-popup.png" alt="" width="361" height="335" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/buffy-slays-twilight-how-to-make-pop-up-video-mayhem/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Popcorn.js &#8211; All Grown Up</title>
		<link>http://mozillapopcorn.org/popcorn-js-all-grown-up/</link>
		<comments>http://mozillapopcorn.org/popcorn-js-all-grown-up/#comments</comments>
		<pubDate>Fri, 30 Dec 2011 16:44:56 +0000</pubDate>
		<dc:creator>bobby</dc:creator>
				<category><![CDATA[popcorn]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=727</guid>
		<description><![CDATA[This morning (Dec 22), CDOT student and Mozilla hacker, Jon Buckley discovered that the Firefox 9 Addons About Page uses Popcorn.js to augment a tutorial video about Firefox addons by adding apropos content to the page while the video plays. &#8230; <a href="http://mozillapopcorn.org/popcorn-js-all-grown-up/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>This morning (Dec 22), CDOT student and Mozilla hacker, <a href="http://twitter.com/#!/jbuckca">Jon Buckley</a> discovered that the <a href="https://services.addons.mozilla.org/en-US/firefox/discovery/pane/pane/pane/strict">Firefox 9 Addons About Page</a> uses <a href="http://www.popcornjs.org">Popcorn.js</a> to augment a tutorial video about Firefox addons by adding apropos content to the page while the video plays.</p>
<p><img style="align-center" src="http://blog.robothaus.org/images/addons-about.gif" /></p>
<p>Of course it&#8217;s great to see another example of Popcorn in the wild, but this is a use case we had never before considered. Using Popcorn.js to show synchronized interactive content, the page explains addons, what kinds of addons there are, and how a user can use them in Firefox.</p>
<h1>Being Sherlock</h1>
<p>Such an elegant use of the library deserves a little investigatory work. Since the authors of the many pieces of user-facing Firefox content do such a good job, it may not be immediately obvious that the addons about page is made of the web. Nevertheless, because it is indeed a webpage, I can <b>right click to learn more</b>, and open up the page in a new tab to isolate it.</p>
<p>Without flirting too much with a tangent about the merits of the <em>Web Console</em>, finding out that the page contains an instance of <em>Popcorn</em> is pretty easy:</p>
<p>1. Press <strong>Ctrl</strong>, <strong>Shift</strong> and <strong>K</strong> altogether to bring up the <em>Web Console</em>.<br />
2. Type in <strong>Popcorn</strong> &#8212; which should auto-complete even before you have typed <strong>Pop</strong> &#8212; and press <strong>Enter</strong>.</p>
<p>Right away, without digging through HTML for a <strong>script</strong> tag, we can see that <em>Popcorn.js</em> is included on the page somewhere. But, we can do more than that:</p>
<p>1. After starting the video, try typing <strong>Popcorn.instances</strong> into the <em>Web Console</em>. It should report back with a large blob of text, which is actually an array containing Popcorn objects.<br />
2. You can see the events that are going to occur during the video by typing <strong>Popcorn.instances[0].getTrackEvents()</strong>, which should return another blob &#8212; an array of Popcorn events.<br />
3. Similarly, by trying commands like <strong>Popcorn.instances[0].getTrackEvents()[0].start</strong>, or <strong>Popcorn.instances[0].getTrackEvents()[0]._natives.type</strong> you can see when the first event will start, and what <em>plugin type</em> it is respectively. Feel free to copy &amp; paste.</p>
<p>By poking around in a similar fashion, I was able to discover that the addons page makes use of the <em>code</em> plugin to add and remove <em>CSS classes</em> from elements on the page. This approach lets the video change the visibility and interactivity properties of the information bar&#8217;s constituent elements. </p>
<p>If this bit of detective work caught your attention, we&#8217;re only where the rabbit hole begins. In fact, <a href="http://popcornjs.org/popcorn-docs/">there&#8217;s a whole API to discover and play with</a> (recent documentation update courtesy of another CDOT student and Mozilla hacker, <a href="http://twitter.com/#!/dcseifried">David Seifried</a>).</p>
<h1>Feeling the Effects</h1>
<p>Needless to say, it was surprising seeing comparatively excessive usage stats on the <em>popcornjs.org</em> server, as throngs of people visited the addons about page:</p>
<p><img style="align-center" src="http://blog.robothaus.org/images/popcorn-server-graph.png" /></p>
<p>Luckily, Jon Buckley, and <a href="http://twitter.com/#!/rwaldron">Rick Waldron</a> (another passionate Popcorn contributor from <a href="http://bocoup.com/">Bocoup</a>) were able to advise the people managing the addons website to pull the server out of accidental <a href="http://en.wikipedia.org/wiki/Denial-of-service_attack">DOS</a> territory.</p>
<p>Article source: <a href="http://blog.robothaus.org/2011/12/22/popcorn-dot-js-all-grown-up/">http://blog.robothaus.org/2011/12/22/popcorn-dot-js-all-grown-up/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/popcorn-js-all-grown-up/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Shakespeare goes social: Mozilla Popcorn in the classroom</title>
		<link>http://mozillapopcorn.org/shakespeare-goes-social-mozilla-popcorn-in-the-classroom/</link>
		<comments>http://mozillapopcorn.org/shakespeare-goes-social-mozilla-popcorn-in-the-classroom/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 20:01:11 +0000</pubDate>
		<dc:creator>Matt Thompson</dc:creator>
				<category><![CDATA[Press]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/shakespeare-goes-social-mozilla-popcorn-in-the-classroom/</guid>
		<description><![CDATA[What light through yonder Popcorn-powered window breaks? What can “social video” do for learning? The hyper-talented Kate Hudson (co-founder of openjournalism.ca, learning lab shepherd for the Knight-Mozilla project, and a designer on the Mozilla Festival data journalism handbook project) has &#8230; <a href="http://mozillapopcorn.org/shakespeare-goes-social-mozilla-popcorn-in-the-classroom/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>					<img src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/4b3cd_popshake.png" alt="" width="281" height="243" />
<p class="wp-caption-text">What light through yonder Popcorn-powered window breaks?</p>
<h3><strong>What can “social video” do for learning?</strong></h3>
<p>The hyper-talented <a href="https://twitter.com/k88hudson">Kate Hudson</a> (co-founder of <a href="http://openjournalism.ca/convo.html">openjournalism.ca</a>, <a href="http://www.phillipadsmith.com/2011/07/meet-the-learning-lab-shepherds-pippinlee-k88hudso-and-lingshahu.html">learning lab shepherd</a> for the Knight-Mozilla project, and a designer on the Mozilla Festival <a href="http://projeqt.com/kate#lsi89948ci21866q">data journalism handbook</a> project) has made an outstanding “<a href="http://katehudsondesign.com/demos/popcornmacbeth/">Popcorn Shakespeare</a>” demo that highlights the potential of <a href="http://mozillapopcorn.org/">Mozilla Popcorn</a> for learning and education.</p>
<p>I think we’re seeing the birth of a new genre of interactive film — “hyper-video,” “social video,” or pop-up video on steroids — that will revolutionize multimedia in the classroom, and maybe even the <em>lingua franca</em> of learning in general.<br /><a href="http://katehudsondesign.com/demos/popcornmacbeth/#66"><img class="alignnone  wp-image-2944" src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/4b3cd_popcorn-macbeth-shakespeare.jpg" alt="" width="450" height="257" /></a></p>
<h3>Using the web to blend moving images, interaction and context</h3>
<p><strong>“Popcorn Shakespeare’s” ingeniously simple user experience</strong>: watch video of a Shakespeare performance, then move your mouse away at any point to pause the playback and get help with specific terms or passages you don’t understand. (<em>e.g., “What does ‘<a href="http://katehudsondesign.com/demos/popcornmacbeth/#33">Hie thee hither</a>‘ or ‘<a href="http://katehudsondesign.com/demos/popcornmacbeth/#33">the golden round</a>‘ mean?”</em>) You can also dig deeper into context or notes from your instructor or peers.</p>
<p>But its more than a glossary tool. You can also navigate the video by clicking directly on portions of the the text (similar to Mark Boas’ work with <a href="http://happyworm.com/blog/2011/11/01/hyperaudio-at-the-mozilla-festival/">hyperaudio</a>). Specific terms and passages also get their own URL, so you can skip directly to specific <a href="http://katehudsondesign.com/demos/popcornmacbeth/#26">scenes</a> for further study — <strong>and begin to “quote” and link to video as easily as you quote text</strong>.</p>
<p><a title="Morning Session by okfn, on Flickr" href="http://www.flickr.com/photos/okfn/6318878223/"><img src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/87f51_6318878223_32972e6c63.jpg" alt="Morning Session" width="350" height="232" /></a>
<p class="wp-caption-text">Kate Hudson at the Mozilla Festival in London last month</p>
<h3>Delivering context and metadata only when you want it</h3>
<p>In Tuesday’s weekly <a href="https://wiki.mozilla.org/Webmakers/Community_Calls">Mozilla Web Maker call</a> (which are open to all — please <a href="https://wiki.mozilla.org/Webmakers/Community_Calls">join us</a>), Kate explained that the demo was inspired by seeing other students struggle with the language in Shakespeare’s plays, and the difficulty of looking up every word in a glossary as it occurs in performance. What makes her demo so ingenious is the way she solves this problem with dead simple UX: mouse away and the video stops, mouse back and it seamlessly resumes.</p>
<p>That simple touch helps make the surrounding tools and context timely and relevant, avoiding the “everything but the kitchen sink” problem of many early Mozilla Popcorn demos. <strong>Instead of overwhelming viewers with too much information, Popcorn Shakespeare gives you metadata only when you want it.</strong></p>
<p><img class="alignnone" src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/87f51_5764915085_b6c0401827.jpg" alt="" width="500" height="375" /></p>
<h3>Turning “lean back” couch potato-ism into “lean forward” learning and interaction</h3>
<p><strong>For me, Kate’s demo speaks to the larger potential of social video in the classroom: turning a formerly passive activity (video watching) into an interactive and social experience</strong>. This can allow educators to speak the multimedia language that’s native to most learners, while at the same time making it a more engaging, “lean forward” experience than sitting in a darkened room watching some one-way film.</p>
<p>It’s <em>way</em> beyond the educational videos of our youth — transforming video into a canvas for making, learning and playing with moving images and light.</p>
<p><a href="http://openmatt.files.wordpress.com/2011/11/popcorn-front-page-048.png"><img class="alignnone size-full wp-image-2444" src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/54f69_popcorn-front-page-048.png" alt="" width="500" height="327" /></a></p>
<h3>Making your own social video</h3>
<p><strong>And of course, the goal is to make it easy for learners to make these social videos themselves, not just consume the work of others</strong>. Kate used the more developer-focused and heavy lifting <a href="http://popcornjs.org/">Popcorn.js</a> to produce her Shakespeare demo.  But the more user-friendly “<a href="http://mozillapopcorn.org/popcorn-maker/">Popcorn Maker</a>” — which <a href="http://mozillapopcorn.org/popcorn-maker-0-1/">just shipped version 0.1</a> — aims to make it easy for non-developers, filmmakers and youth to make their own social video mash-ups as well, transforming reformed couch potatoes everywhere into web-made movie makers.  “<em><a href="http://shakespeare.mit.edu/tempest/full.html">O brave new world, / That has such people in’t!</a></em>“</p>
<ul>
<li>See also: <a href="http://openmatt.wordpress.com/2011/06/14/social-video-and-the-21st-century-classroom/">“Social video” and the 21st century classroom</a></li>
</ul>
<p class="tags"><strong>Tagged:</strong> <a href="http://openmatt.wordpress.com/tag/drumbeat/" rel="tag">drumbeat</a>, <a href="http://openmatt.wordpress.com/tag/education/" rel="tag">education</a>, <a href="http://openmatt.wordpress.com/tag/learning/" rel="tag">learning</a>, <a href="http://openmatt.wordpress.com/tag/mozilla-2/" rel="tag">mozilla</a>, <a href="http://openmatt.wordpress.com/tag/popcorn/" rel="tag">popcorn</a>, <a href="http://openmatt.wordpress.com/tag/popcornjs/" rel="tag">popcornjs</a>, <a href="http://openmatt.wordpress.com/tag/social-video/" rel="tag">social video</a></p>
<p><!-- You can start editing here. --></p>
<h3 id="reply-title">Leave a Reply Cancel reply</h3>
<form action="http://openmatt.wordpress.com/wp-comments-post.php" method="post">
<p>				<img src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/54f69_ad516503a11cd5ca435acc9bb6523536" alt="Gravatar" width="25" class="no-grav" /></p>
<p>				<img src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/54f69_wplogo.png" alt="WordPress.com Logo" width="25" class="no-grav" /></p>
<p>Please log in to WordPress.com to post a comment to your blog.</p>
<p>				<img src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/54f69_ad516503a11cd5ca435acc9bb6523536" alt="Twitter picture" width="25" class="no-grav" /></p>
<p>				<img src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/54f69_ad516503a11cd5ca435acc9bb6523536" alt="Facebook photo" width="25" class="no-grav" /></p>
<p>Connecting to %s</p>
<p class="comment-subscription-form"><label for="subscribe">Notify me of follow-up comments via email.</label></p>
<p class="post-subscription-form"><label for="subscribe_blog">Notify me of new posts via email.</label></p>
<p class="form-submit">
</p>
</p></form>
<p>							<!-- #respond --></p>
<p>Article source: <a href="http://openmatt.wordpress.com/2011/12/08/social-video-shakespeare/">http://openmatt.wordpress.com/2011/12/08/social-video-shakespeare/</a></p>]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/shakespeare-goes-social-mozilla-popcorn-in-the-classroom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Popcorn Maker 0.1</title>
		<link>http://mozillapopcorn.org/popcorn-maker-0-1/</link>
		<comments>http://mozillapopcorn.org/popcorn-maker-0-1/#comments</comments>
		<pubDate>Fri, 02 Dec 2011 00:25:16 +0000</pubDate>
		<dc:creator>bobby</dc:creator>
				<category><![CDATA[popcorn maker]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/popcorn-maker-0-1/</guid>
		<description><![CDATA[After my recent stint in Europe for the Mozilla Festival and MozCamp I had the opportunity to reflect on the development environment of Popcorn Maker, courtesy of the 8 hour flight from Berlin to New York. The result is a &#8230; <a href="http://mozillapopcorn.org/popcorn-maker-0-1/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>After my recent stint in Europe for the Mozilla Festival and MozCamp I had the opportunity to reflect on the development environment of Popcorn Maker, courtesy of the 8 hour flight from Berlin to New York. The result is a version of Popcorn Maker which can be proudly labeled as <strong>0.1</strong>, and very friendly to developers.</p>
<p>&nbsp;</p>
<h2>History Lesson: Butter</h2>
<p><img class="left" title="Butter" src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/98502_butter.jpg" alt="Butter" width="400" /> Butter was an initial exploration of making a GUI for producers hoping to use popcorn.js for their projects. The app enjoyed some success, but it was eclipsed by the need to expand the app in different directions, which I have <a href="http://mozillapopcorn.org/unsalted-thinking-roadmapping-butter/">written about previously</a>. Like most promising experiments, it needed to be rewritten to be the powerful app we hoped it would become.</p>
<p>Consequently, there was a lot of discussion about how to engineer the experience which was to become Popcorn Maker, which Brett and Ben detailed in their post, <a href="http://mozillapopcorn.org/designing-the-popcorn-maker/">Designing the Popcorn Maker</a>. In short, the current goal is to create a web app which encompasses the same ideas as Butter, but makes traditional content producers (usually of the film persuasion) comfortable by drawing memes from other popular pieces of software. However, a functioning web app is only a piece of the puzzle, since harnessing community involvement is a very powerful concept. Eventually, users will be able to use Popcorn Maker like they use WordPress – by downloading and installing the app on a machine of their choice – but with unique sharing capabilities and editing opportunities, like publishing your <em>popcornized</em><sup><sup>tm</sup></sup> template which might be a remix of something like <a href="http://www.youtube.com/watch?v=BeGjTiUqw8U">a youtube video page</a>.</p>
<h2>Require Saves The Day</h2>
<p><img class="right" title="Butter To Popcorn Maker" src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/98502_butter-to-pm.png" alt="Butter - Popcorn Maker" width="400" /> The subsequent struggle to design an acceptable user experience and its contention with pace of development and fluctuating feature requests hasn’t offered the opportunity for Popcorn Maker’s codebase to settle. As a result, Popcorn Maker’s developers have had to suffer through a poor debugging experience and a sub-optimal development environment.</p>
<p>Now, <strong>that has all changed</strong>. Some geniune thinking time and my recent exploits inside <a href="https://wiki.mozilla.org/Paladin">Paladin</a> with <a href="https://github.com/jrburke">James Burke</a>, the creator of <a href="http://requirejs.org/">require.js</a>, has changed Popcorn Maker for the better – for developer and users alike.</p>
<p>Using <em>require.js</em>, I was able to split up Butter’s core and constituent modules into several files respectively. require’s module system makes this process natural and provides a method for producing dependency chains. So, Butter’s core relies on the existence of several smaller modules like <em>Media</em>, <em>Track</em>, and <em>TrackEvent</em>, while Butter’s Timeline module depends on some of the same (plus some others). In other words, dependency chains let a module rely on other modules which may be already shared amongst others still. Of course, this is nothing new to traditional developers who get to use <code>#import</code> to solve a similar problem.</p>
<p>Now, developers are able to isolate and fix bugs without involving a compilation process every time they make a change (since Butter is best suited as a library inside of Popcorn Maker).</p>
<h3>Onward: To 0.1</h3>
<p><img class="left" title="Popcorn Maker + Butter Setup" src="http://mozillapopcorn.org/wp-content/plugins/rss-poster/cache/98502_butter-pm-modules.png" alt="Popcorn Maker + Butter Setup" width="400" /> Since Popcorn Maker is an app that wraps Butter, developers can contribute from several perspectives:</p>
<ul>
<li><strong>Popcorn Maker</strong>: developing the app itself (UI, storage, exporting, etc.)</li>
<li><strong>Templates</strong>: building general-purpose Butter templates to let users jump into editing a powerful popcorn experience quickly</li>
<li><strong>Editors</strong>: providing html-based editors for popcorn plugins which would benefit from specific UI (e.g. Google Maps)</li>
<li><strong>Butter</strong>: enhancing the core of Butter to fix bugs or provide better functionality or compatibility (standards like to change)</li>
</ul>
<p>The beauty of the approach we’ve taken in 0.1 is that these elements are as decoupled as possible because they are actually separate require projects. Then, it’s no problem at all to have them share components, and they can depend on each other to provide a nice unidirectional development flow.</p>
<p>Part of the magic is a pattern which James has worked on that circumvents the <code>data-main</code> attribute traditionally attached to a require.js script tag. Instead, a script like this is referenced (in this case, <code>butter.previewer.js</code>):</p>
<pre style="white-space: pre !important;">
(function () {
    // Stub for has function.
    function has() {
        return true;
    }

    if ( has( 'source-config' ) ) {
        // Get the location of the butter source.
        // The last script tag should be the butter source
        // tag since in dev, it will be a blocking script tag,
        // so latest tag is the one for this script.
        var scripts = document.getElementsByTagName( 'script' ),
        path = scripts[scripts.length - 1].src;
        path = path.split( '/' );
        path.pop();
        path = path.join( '/' ) + '/';

        document.write( '&lt;script src="' +
          path +
          '../../external/require/require.js"&gt;&lt;/' +
          'script&gt;' );

        document.write('&lt;script&gt;' +
          '(function(){' +
          'var ctx = require.config({ ' +
            'baseUrl: "' + path + '../",' +
            'context: "butter.previewer",' +
            'paths: {' +
              // Paths are relative to baseUrl; Notice the commas!
            '}' +
          '});' +
          'ctx(["previewer/previewer"])' +
          '})()' +
        '&lt;/script&gt;');
    }

    var ButterTemplate = function() {
      if ( !ButterTemplate.__waiting ) {
        ButterTemplate.__waiting = [];
      } //if
      ButterTemplate.__waiting.push( arguments );
    }; //ButterTemplate

    if ( !window.ButterTemplate ) {
      window.ButterTemplate = ButterTemplate;
    } //if

}());
</pre>
<p>This pattern, which writes its own require.js-specific script tag when necessary (when not compiled), takes advantage of require contexts (returned from a call to <code>require.config()</code>), and is easily generalized. In fact, it’s used to load event editors, and butter itself. In other words, Butter (and Popcorn Maker, by extension) contains several require projects, each of which can be compiled to provide a minified version. Butter is actually a collection of libraries which can be included independently to provide functionality specific to things like Templates or Event Editors.</p>
<p>So, to create a simple Butter Template, all you need is this:</p>
<p style="white-space: pre; white-space: pre-wrap; white-space: pre-line;">
<pre style="white-space: pre !important;">
&lt;html&gt;
  &lt;head&gt;
    &lt;script src="../../lib/popcorn/popcorn.js">&lt;/script&gt;
    &lt;script src="../../lib/popcorn/popcorn.subtitle.js">&lt;/script&gt;
    &lt;script src="../../butter/src/previewer/butter.previewer.js">&lt;/script&gt;
    &lt;script>
      /* Uncomment to provide custom functionality
        ButterTemplate(function() {
          // namespace has loaded; create your custom template here
        });
      */
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="main" data-butter="media">&lt;/div&gt;
    &lt;div id="subtitle-container" data-butter="target">&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
</p>
<p>Similarly, to create an Event Editor, you need this:</p>
<pre style="white-space: pre !important;">
&lt;html&gt;
  &lt;head&gt;
    &lt;script src="../../lib/popcorn/popcorn.js"&gt;&lt;/script&gt;
    &lt;script src="../../lib/popcorn/popcorn.subtitle.js"&gt;&lt;/script&gt;
    &lt;script src="../../butter/src/previewer/butter.previewer.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      /* Uncomment to provide custom functionality
        ButterTemplate(function() {
          // namespace has loaded; create your custom template here
        });
      */
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="main" data-butter="media"&gt;&lt;/div&gt;
    &lt;div id="subtitle-container" data-butter="target"&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>Finally, Butter can be imported in the same way (in Popcorn Maker, for example):</p>
<pre style="white-space: pre !important;">
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Popcorn Maker&lt;/title&gt;
    &lt;script type="text/javascript" src="lib/require/require.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="butter/src/butter.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
&lt;/html&gt;
</pre>
<p>Notice the extra require inclusion here, which is necessary only because <strong>Popcorn Maker is also a require.js project</strong>. This way <code>butter.js</code> does not depend on Popcorn Maker to include require.js, and every layer of the project can be nicely compiled.</p>
<p>To reiterate, the very best part is that there is no need to re-compile Butter if a change needs to be made. require.js will let us compile the project only when we want to distribute it.</p>
<h2>Enjoy</h2>
<p>So, have a look at the app at <a href="http://mozillapopcorn.org/maker">mozillapopcorn.org/maker</a>(on Monday), or <a href="http://github.com/secretrobotron/popcorn-maker">clone the source</a> for yourself to see what you can do locally. As always, reporting bugs is paramount, and is worth almost as much as fixing them. Check out our <a href="https://webmademovies.lighthouseapp.com/projects/80723/milestones/130250-01">0.1 milestone on our lighthouse project</a>, where you’ll almost certainly find a plethora of things to do.</p>
<p>Article source: <a href="http://robothaus.org/blog/blog/2011/11/24/popcornmaker-0-dot-1-for-the-developers/">http://robothaus.org/blog/blog/2011/11/24/popcornmaker-0-dot-1-for-the-developers/</a></p>]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/popcorn-maker-0-1/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>What we made at Mozfest</title>
		<link>http://mozillapopcorn.org/what-we-made-at-mozfest/</link>
		<comments>http://mozillapopcorn.org/what-we-made-at-mozfest/#comments</comments>
		<pubDate>Wed, 16 Nov 2011 16:51:34 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[demos]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[popcorn]]></category>
		<category><![CDATA[popcorn maker]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=577</guid>
		<description><![CDATA[Read the press and watch the demos from Mozilla's Media, Freedom and The Web Festival <a href="http://mozillapopcorn.org/what-we-made-at-mozfest/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve had a week to reflect on the explosion of creativity that was Mozilla&#8217;s Media, Freedom and the Web festival (MozFest).  The festival marked the launch of Popcorn 1.0, and the alpha version of Popcorn Maker.  We also partnered with the National Film Board of Canada to premiere <a href="http://highrise.nfb.ca/onemillionthtower/1mt_webgl.php">One Millionth Tower</a>, a documentary film made entirely in WebGL, using Popcorn as the event system.  <a href="http://vocamus.net/dave/?p=1362">David Humphrey</a> has written a great writeup on his impressions on the festival, I&#8217;d encourage you to read it.  Meanwhile, on this blog, I wanted to round up some of the early press reactions, as well as a few links to demos that were made at the fest.</p>
<p>
<a href="http://www.flickr.com/photos/jonathanmcintosh/6332190107/" title="Popcorn.js @ Mozilla Fest 2011 by jonathan mcintosh, on Flickr"><img src="http://farm7.staticflickr.com/6042/6332190107_27a2b94635.jpg" width="500" height="331" alt="Popcorn.js @ Mozilla Fest 2011" align="top"></p>
<p><i>David Humphrey and Brett Gaylor announce Popcorn 1.0 at Mozfest</i></a>
</p>
<p><h1>The Press</h1>
</p>
<p>
<img src="http://mozillapopcorn.org/wp-content/uploads/2011/11/Wired.com_.jpg" alt="" title="Wired.com_" width="600"></p>
<p><b>From the front page of Wired.com (Nov 5):</b><br />
<i>&#8220;The makers of the new film <em>One Millionth Tower</em> reinvented the documentary format</strong>…. The resulting film is unlike any before it.</p>
<p><em>One Millionth Tower</em>, which is premiering on Wired.com the same day it premieres at the <a href="https://mozillafestival.org/2011/10/27/creating-a-connected-documentary/#more-1945">Mozilla Festival in London</a>, is not just a static story recorded on film and then edited together for audiences&#8230;. <strong>Everything is triggered by [Mozilla's] <a href="http://www.mozillapopcorn.org/">Popcorn.js</a>, which acts like a conductor signaling which instruments play at what times.</strong></i>&#8220;</p>
<p>
<img src="http://mozillapopcorn.org/wp-content/uploads/2011/11/webmonkey.jpg" alt="" title="webmonkey" width="400" />
</p>
<p>
<b><a href="http://www.webmonkey.com/2011/11/mozilla-reinvents-web-video-with-popcorn-1-0/">Webmonkey: Mozilla Reinvents Web Video With Popcorn 1.0</a></b><br />
<i>&#8220;Video on the web has always been a bit disappointing. After all, it’s pretty much just like television, only smaller. Unlike the rest of the web, video is just as much a passive experience in your browser as it is anywhere else.</p>
<p>Mozilla would like to change that.</i></p>
<p><img class="alignnone size-full wp-image-2578" style="border:1px solid black;" title="Gizmodo One millionth tower" src="http://openmatt.files.wordpress.com/2011/11/gizmodo-one-millionth-tower.jpg?w=450&#038;h=398" alt="" width="450" height="398" /></p>
<h3><a href="http://gizmodo.com/5856821/heres-how-you-make-a-documentary-only-using-html5-and-webgl-graphics">Gizmodo</a>: Here’s How You Make a Documentary Only Using HTML5 and WebGL</h3>
<p><i>
<p>&#8220;<strong><em>One Millionth Tower</em> makes specific use of a Javascript tool called [Mozilla] Popcorn</strong>, which was designed to integrate web APIs into online video. What director Katerina Cizek did was utilize Popcorn to control the movement of the video frame, having it effectively behave like a video camera.&#8221;</p>
<p></i></p>
<p><img class="alignnone size-full wp-image-2591" style="border:1px solid black;" title="boing boing on highrise" src="http://openmatt.files.wordpress.com/2011/11/boing-boing-on-highrise.jpg?w=450&#038;h=272" alt="" width="450" height="272" /></p>
<h3><a href="http://boingboing.net/2011/11/06/highrise-a-documentary-built-with-webgl-and-other-open-standards.html">Boing Boing</a>: A documentary built with WebGL and other open standards</h3>
<p><i>
<p>&#8220;<strong>Damn cool</strong>.&#8221; &#8211;Cory Doctorow</i></p>
<h2><img class="alignnone size-full wp-image-2586" title="Tech Crunch Europe on Popcorn" src="http://openmatt.files.wordpress.com/2011/11/tech-crunch-europe-on-popcorn.jpg?w=450&#038;h=442" alt="" width="450" height="442" /></h2>
<h3><a href="http://eu.techcrunch.com/2011/11/07/mozilla-festival-salutes-more-popcorn-and-less-developer-ghetto/">TechCrunch</a>: Mozilla Festival salutes more Popcorn and less developer-ghetto</h3>
<p><i>Emmy-award winning filmmaker Kat Cizek described herself as ‘super-chuffed’ when she came on stage to present the world’s first HTML5 film at #mozfest. It was the world premiere of ‘One Millionth Tower’, a documentary that works like the web itself: ever-changing, updated by the minute.</p>
<p>
The film was developed with the help of Popcorn.js, Mozilla’s recently launched JavaScript library that works similarly to the hypertext principle in seamlessly mashing up online video with virtually anything online – the most obvious examples would be Wikipedia, Flickr or Twitter. It turns film into a more semantic experience, allowing for more dynamic and interaction.</p>
<p>
“We can’t just think about interaction at the end but need it from the beginning to create a conversation between the filmmaker and the audience,” agreed the students involved in the development of Popcorn. “This kind of storytelling is just getting started.”</i></p>
<p>
<img src="http://openmatt.files.wordpress.com/2011/11/new-york-times-on-mozilla-festival.jpg?w=450&#038;h=642"></p>
<p><p>
<a href="http://open.blogs.nytimes.com/2011/11/14/mozfest/?utm_source=twitterfeed&#038;utm_medium=twitter">The New York Times</a>:<br />
<i>One new technology launched and then workshopped at MozFest was Popcorn.js, a library of video augmentation tools that makes it straightforward to overlay content layers per the time signatures in digital video. The Popcorn.js workshop developers took little more five minutes to produce their Web version of popup videos.</i>
</p>
<p><h1>The demos</h1>
<p></p>
<p>
The biggest thrill was seeing the largest gathering of popcorn developers ever assemble roll up their sleeves.  There were many new faces, as well, such as the developers from RAMP, who came to the festival to launch their <a href="http://www.ramp.com/solutions/optimized-video/metaplayer/popcorn/">recent foray into popcorn development</a>.  Much of what was made over the 2 days is impossible to capture &#8211; new connections, new ideas, the start of many projects.  A few demos stood out, however, and were showcased at the &#8220;closing circle&#8221; of the festival:
</p>
<p>
<img src="http://farm7.static.flickr.com/6238/6332944638_834b790b02.jpg" width="500" height="331" alt="Popcorn.js @ Mozilla Fest 2011">
</p>
<p>
<b>Popcorn Remote</b>
</p>
<p>
<a href="http://yfrog.com/5onzwz"><br />
<img src="http://mozillapopcorn.org/wp-content/uploads/2011/11/popcornremote.jpg" alt="" title="popcornremote" /></a>
</p>
<p>
A great showcase of having popcorn content play simultaneously on 2 screens &#8211; imagine a television show with related content on your tablet.  Created by the CDOT crew: David Seifreid, Jon Buckley, Christopher DeCairos, Scott Downe.</p>
<p>
<b>Popcorn Colour Tracker</b><br />
<a href="http://anavallasuiza.com/popcorn/"><br />
<img src="http://mozillapopcorn.org/wp-content/uploads/2011/11/colourtracker.jpg" alt="" title="colourtracker"></a>
<p>
Berto Yanez made a great demo showing the possibilities of tracking a colour within a video element, and inserting HTML into this colour.</p>
<p>
<a href="http://www.seuratt.net/mozfest/tpbafk/example/tpbafk.html"><img src="http://mozillapopcorn.org/wp-content/uploads/2011/11/tpbafk.jpg" alt="" title="tpbafk" /></a>
</p>
<p>
<b>The Pirate Bay &#8220;Augumentary&#8221;</b><br />
With help from the Popcorn community, filmmaker Simon Klose realized a proof of concept for his upcoming documentary &#8220;The Pirate Bay &#8211; Away From Keyboard&#8221; in which related content appears in a sidebar.
</p>
<p>
See you at next year&#8217;s Mozfest!</p>
<p>(photos CC BY-NC-SA by <a href="http://www.flickr.com/photos/jonathanmcintosh/sets/72157628099406338/with/6332190107/">Jonathan Mcintosh</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/what-we-made-at-mozfest/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Evolving documentary with Highrise</title>
		<link>http://mozillapopcorn.org/evolving-documentary-with-highrise/</link>
		<comments>http://mozillapopcorn.org/evolving-documentary-with-highrise/#comments</comments>
		<pubDate>Fri, 11 Nov 2011 05:30:00 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[featured]]></category>
		<category><![CDATA[popcorn]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://mozillapopcorn.org/?p=537</guid>
		<description><![CDATA[Learn how the National Film Board of Canada is using popcorn to take documentary to new heights <a href="http://mozillapopcorn.org/evolving-documentary-with-highrise/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><video controls preload width="480" poster="http://mozillapopcorn.org/wp-content/uploads/2011/11/1mtfeature.png"><br />
<source src="http://videos.mozilla.org/serv/webmademovies/popcorn1MT.mp4" type="video/mp4"><br />
<source src="http://videos.mozilla.org/serv/webmademovies/popcorn1MT.webm" type="video/webm"><br />
</video></p>
<p>Mozilla is proud to have collaborated with the team from <a href="http://highrise.nfb.ca/onemillionthtower/1mt_webgl.php">Highrise,</a> a unique multi-project documentary from the National Film Board of Canada exploring &#8220;vertical living&#8221; around the world. </p>
<p>
What does citizenship mean in a transnational, globalised context? One Millionth Tower, the latest strand of the multi-media, multi- award-winning HIGHRISE project from the National Film Board of Canada, teams a group of highrise residents in Toronto with architects and animators to re-imagine their surroundings and transform their dilapidated highrise neighbourhood into a vibrant, resident-led community.</p>
<p>
Using cutting-edge open-source technology, this interactive documentary enables a 3D storytelling environment within a web browser, incorporating the magic of cinema, architecture and animation. A hyper-local story with a global resonance in its vision for a more human-friendly urban planet – and world wide web.</p>
<p>
Mozilla provided technical expertise, guidance and support throughout the development of the project.  Together with Highrise + the NFB, we hosted the world premiere at the Media, Freedom and The Web Festival in London.</p>
<p>
See for yourself how Highrise is rethinking the documentary genre on the web, and how Popcorn is helping to make it happen, at <a href="http://highrise.nfb.ca/onemillionthtower/1mt_webgl.php">highrise.nfb.ca/onemillionthtower</a></p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/evolving-documentary-with-highrise/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
<enclosure url="http://videos.mozilla.org/serv/webmademovies/popcorn1MT.webm" length="11008711" type="video/webm" />
<enclosure url="http://videos.mozilla.org/serv/webmademovies/popcorn1MT.mp4" length="57742108" type="video/mp4" />
		</item>
		<item>
		<title>Welcome to the evolution of Popcorn!</title>
		<link>http://mozillapopcorn.org/welcome-to-the-new-popcorn/</link>
		<comments>http://mozillapopcorn.org/welcome-to-the-new-popcorn/#comments</comments>
		<pubDate>Fri, 04 Nov 2011 13:05:44 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[featured]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://dev.mozillapopcorn.org/?p=461</guid>
		<description><![CDATA[Read about the changes to the Popcorn Project <a href="http://mozillapopcorn.org/welcome-to-the-new-popcorn/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://mozillapopcorn.org/wp-content/uploads/2011/11/newpopcorn2.png" alt="" title="newpopcorn" width="150" height="150"><br />
Welcome to the new home of Popcorn!  We&#8217;re extremely excited to bring not only a fresh face to the project, but also the release of new software, programs and partnerships.  </p>
<p><h1>Popcorn.js</h1>
<p>Firstly, the Popcorn.js library has reached the important 1.0 milestone.  This represents an extraordinary amount of dedication from the Popcorn developer community.  David Humphrey and the developers at Seneca&#8217;s Centre for Development of Open Technology deserve huge kudos, as well as Rick Waldron and his colleagues at Bocoup.  We&#8217;ve spent a year and a half iterating, testing and improving Popcorn.  With the release of 1.0, our API is frozen and we invite everyone &#8211; developers, filmmakers and makers of all stripes to create work with this stable and well tested library.</p>
<p>
If you visit the Popcorn.js section of this site, you&#8217;ll also find a <a href="/build-tool">build tool</a> where you can create a customized version of the library.  By selecting only the plugins + players you need, you&#8217;ll be able to ship a lightweight version of popcorn on any site you develop.  Tip of the hat to Lloyd Hillial at Mozilla Labs for creating the foundation for this tool, and Christopher DeCairos for taking it across the finish line.</p>
<p>
We&#8217;ve expanded and revamped our documentation, which we have decided to keep at the popcornjs.org site.  While Mozilla is the steward of Popcorn.js, we recognize (and are thankful) that it is a community project that extends beyond our walls, and will therefore continue to maintain the core library there.</p>
<p><h1>Popcorn Maker</h1>
<p>In the spirit of &#8220;release early, release often&#8221; that served us well with Popcorn.js, we also present the alpha version of Popcorn Maker, our authoring tool for popcorn pages.  While we know we have much to do before the app is ready for broad adoption, we&#8217;re proud of the potential it offers and invite interested parties to develop not only the core of this app, but also a template ecosystem.  Development on Popcorn Maker was lead by Bobby Richter, with contributions from Scott Downe, Christopher DeCairos, Mohammed Buttu and David Seifreid.  Brian Chirls created an excellent group of templates that showcase how the app can be used by creators.</p>
<p><h1>Learn Popcorn</h1>
<p>Looking back at the events we held in 2011, we realized that each had a strong focus on learning.  Whether it was <a href="videoblog-buttercamp/">Buttercamp</a>, a frenzied hack day for developers in New York, our <a href="video-meet-the-makers-at-the-bay-area-video-coalition/">work with youth media makers at the Bay Area Video Coalition</a>, or the <a href="/mozilla-itvs-the-living-docs-project/">Living Docs partnership with ITVS</a>, each represent an opportunity to teach &#8220;web making&#8221; skills.  There are new genres and opportunities emerging in browser-based film-making, journalism and storytelling. With these opportunities are new skills and approaches that need transferring.  For this reason, we&#8217;re formalizing our learning programs under the &#8220;Learn Popcorn&#8221; umbrella.</p>
<p>With these new changes to Popcorn, we&#8217;re also retiring the Web Made Movies program and website.  It has been a successful and fruitful framing of our innovation efforts in filmmaking, but we felt that it was time to reduce brand confusion. We&#8217;ve imported all of the blog posts from that site here &#8211; they&#8217;re a great archive of the thinking that led us up to this point.</p>
<p>
A final thanks goes to Gopal Raju at <a href="http://www.productivedreams.com/">Convax Solutions</a>, the talented designer who built this site.</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/welcome-to-the-new-popcorn/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>The Living Docs Hack Day</title>
		<link>http://mozillapopcorn.org/the-living-docs-hack-day/</link>
		<comments>http://mozillapopcorn.org/the-living-docs-hack-day/#comments</comments>
		<pubDate>Tue, 18 Oct 2011 23:02:36 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[demos]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[popcorn]]></category>
		<category><![CDATA[popcorn maker]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://webmademovies.org/?p=403</guid>
		<description><![CDATA[See what happened when 6 talented developers met 6 great filmmaking teams. <a href="http://mozillapopcorn.org/the-living-docs-hack-day/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><video controls="controls" preload="auto" width="650"><br />
<source src="http://videos.mozilla.org/serv/webmademovies/itvs/itvsedit.mp4"><br />
<source src="http://videos.mozilla.org/serv/webmademovies/itvs/itvsedit.webm"><br />
</video></p>
<p>On October 12th and 13th, <a href="http://www.itvs.org">ITVS</a> (the Independent Television Service) and Mozilla convened 6 filmmaking teams and 6 of the world&#8217;s best html5 video developers at Mozilla&#8217;s San Francisco Office.  They were gathered to participate in the Living Docs hackathon &#8211; a two day event framing the larger Living Docs project.</p>
<p>Each filmmaking team had developed a concept for how their documentary film could be translated to the web, using HTML5 and popcorn.js.  In calls, webinars and face to face meetings leading up to the event, the filmmakers had been asked to consider a &#8220;living documentary&#8221; approach, where the content of their piece is informed and augmented by media that exists on the web.  Through this approach, the goal is a documentary experience that is unique to each user and each viewing.</p>
<p>The results were nothing less than extraordinary.  Each filmmaking team, many who had never authored interactive work, was able to create a compelling and emotional experience that was heightened by the addition of web-based content.  And each developer present was able to fulfil these visions while keeping the intent of the overall documentary.</p>
<p>I suggest you watch them for yourself, and stay tuned &#8211; our goal is to provide production financing to a selection of these projects so they can be fully realized.</p>
<p>Please note: all of these projects are prototypes created over 2 days and are meant as proofs of concept.  You&#8217;ll need a modern browser, such as the latest Firefox or Chrome, in order to view.</p>
<p>The Interrupters:<br />
Steve James, Anton Seales Jr, Rick Waldron<br />
<a href="http://dev.webmademovies.org/interrupters/">http://dev.webmademovies.org/interrupters/</a></p>
<p>#18daysinegypt<br />
Jigar Mehta, Brian Chirls, Georgia Wells, Jason Sussberg<br />
<a href="http://code.chirls.com/18days/">http://code.chirls.com/18days/</a></p>
<p>30Mosques<br />
Aman Ali, Musa Syeed, Bassam Tariq, Bobby Richter<br />
<a href="http://webmademovies.org/30mosques/">http://webmademovies.org/30mosques/</a></p>
<p>The Island President<br />
Bonni Cohen, Spencer Adler, Nalin Patel, Scott Downe<br />
<a href="http://scotland.proximity.on.ca/sdowne/popcorn-js/plugins/islandpres/islandpres.html">http://scotland.proximity.on.ca/sdowne/popcorn-js/plugins/islandpres/islandpres.html</a></p>
<p>Injunity<br />
Adrian Baker, Tane Ross, Cole Gillespie<br />
<a href="http://s129694.gridserver.com/code/itvg/">Injinuity</a></p>
<p>¿Más Bebés?<br />
Renee Tajima-Pena, Kate Trumbull, Abram Stern, Atul Varma<br />
(url not available)</p>
<p>Following the hack day, Angela Watercutter at Wired.com wrote up a <a href="http://www.wired.com/underwire/2011/10/coders-filmmakers-popcorn/">fantastic recap</a> of the event that is definitely worth a read.</p>
<p>Stay tuned for further news about the projects developed at the hack day &#8211; our hope is to see these taken further in 2012!</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/the-living-docs-hack-day/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
<enclosure url="http://videos.mozilla.org/serv/webmademovies/itvs/itvsedit.webm" length="21074644" type="video/webm" />
<enclosure url="http://videos.mozilla.org/serv/webmademovies/itvs/itvsedit.mp4" length="146058081" type="video/mp4" />
		</item>
		<item>
		<title>Popcorn 0.9</title>
		<link>http://mozillapopcorn.org/popcorn-0-9/</link>
		<comments>http://mozillapopcorn.org/popcorn-0-9/#comments</comments>
		<pubDate>Fri, 07 Oct 2011 21:10:29 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[popcorn]]></category>

		<guid isPermaLink="false">http://webmademovies.org/?p=400</guid>
		<description><![CDATA[Among the many developments in the popcorn community (such as the Europeana Remix project and the announcement of our Living Docs partnership with ITVS), the last several weeks have seen much discussion and hacking towards the 0.9 release of popcorn. &#8230; <a href="http://mozillapopcorn.org/popcorn-0-9/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Among the many developments in the popcorn community (such as the <a href="http://remix.europeana.eu/">Europeana Remix</a> project and the announcement of our <a href="http://webmademovies.org/mozilla-itvs-the-living-docs-project">Living Docs partnership with ITVS</a>), the last several weeks have seen much discussion and hacking towards the 0.9 release of popcorn.  Over 53 tickets were completed for this release (see our <a href="https://webmademovies.lighthouseapp.com/projects/63272/changelog">changelog</a>).</p>
<p>Most importantly, this release signals the freeze in the popcorn core API.  This freeze comes with a promise: everything developed from here outwards with popcorn won&#8217;t break in future releases.  The <a href="http://popcornjs.org/code/test/">many tests</a> we run for each release back this up.</p>
<p>Here are some key features, as highlighted by the projects core developers:</p>
<ul>
<li>
Shorthand for play and pause.  You can now seek to a time and play/pause it by doing popcorn.play( 3 ) or popcorn.pause( 4 ) as opposed to the old popcorn.currentTime( 3 ).play()</p>
<li> We have provided alias&#8217; for start( in ) and end( out ).  These are familiar terms for film makers, so this should provide them with a more natural feel when developing popcorn tracks.
<li> The players underwent a complete re-write courtesy of Scott Downe. All players now derive from the baseplayer, which in turn reduces the amount of code in subsequent players, reducing the chance for bugs.  This also made testing easier as the previous player tests were a nightmare.  Currently only youtube has been re-written, but vimeo, soundcloud and a new jwPlayer ( by karim ) will coming out alongside 1.0.   To use youtube with Popcorn, the old way was: popcorn = Popcorn( Popcorn.youtube( &#8220;div&#8221;, &#8220;urlToVideo&#8221; ) ); and the new way is simply: popcorn = Popcorn.youtube( &#8220;div&#8221;, &#8220;urlToVideo&#8221; ).
<li>A destroy function has been added, extending a function to the users for destroying a current instance of popcorn.  This will remove all event listeners and prevent any further track event updating.
<li>RequestAnimationFrame was added in this release.  This allows for much more precise timing of events, as its on a per frame basis ( 30 frames per second I think ).This gives film makers (and all developers) a great deal more control over when events are fired.
<li>Plugins went through a complete style guide clean up and are now looking nice and pretty.
<li>exec also was given and alias, called cue, which further provides familiar terms to film makers
<p>Stay tuned for even bigger news as we prepare for the most important release of all &#8211; 1.0!</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/popcorn-0-9/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mozilla + ITVS: The Living Docs Project</title>
		<link>http://mozillapopcorn.org/mozilla-itvs-the-living-docs-project/</link>
		<comments>http://mozillapopcorn.org/mozilla-itvs-the-living-docs-project/#comments</comments>
		<pubDate>Tue, 04 Oct 2011 04:46:30 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[events]]></category>
		<category><![CDATA[popcorn]]></category>

		<guid isPermaLink="false">http://webmademovies.org/?p=393</guid>
		<description><![CDATA[The web is a transformative force. It&#8217;s changed the way people connect, work, play, and learn. But when it comes to moving images, the web&#8217;s ability to connect people and events, tailor experience to individual viewers, visualize data in real-time, &#8230; <a href="http://mozillapopcorn.org/mozilla-itvs-the-living-docs-project/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>The web is a transformative force. It&#8217;s changed the way people connect, work, play, and learn.</p>
<p>But when it comes to moving images,  the web&#8217;s ability to connect people and events, tailor experience to individual viewers, visualize data in real-time, interact within immersive environments, and link together other media is only starting to become apparent. </p>
<p>The potential for this emerging &#8220;connected cinema&#8221; is enormous. And Mozilla is teaming up with ITVS to seize it.</p>
<p>Mozilla and ITVS believe the web opens unique opportunities for storytelling. Stories told using the connected technologies, reach, and audience that can only be found online. For the past 18+ months, through projects such Popcorn.js, Universal Subtitles, WebGL, and building support for HTML5 into Firefox, Mozilla has been developing and shipping the tools that will help make this happen. </p>
<p>ITVS has also been hard at work, gathering filmmakers who bring the content, aesthetics, and commitment to social documentary needed to take advantage of the emerging possibilities.  Established by the US Congress in 1988 to <a href="http://itvs.org/about">champion independent producers of television in the United States</a>, ITVS-funded producers have reached tens of millions of viewers and have received accolades including 12 Academy Award® Nominations, 14 News and Documentary Emmy® Awards, 19 Peabody Awards, 19 Sundance Film Festival Awards, 9 DuPont Columbia Awards, 1 Golden Globe® Award, and 1 Prime Time Emmy® Award.  More recently, ITVS has expanded their vision to the web, and have been instrumental in such projects as the Alternate Reality Game <a href="http://www.worldwithoutoil.org/">World Without Oil</a>.  Like Mozilla, they see new opportunities in browser-based cinema that are only now emerging.</p>
<p>That&#8217;s why <a href="http://beyondthebox.org/announcing-the-living-docs-project-with-mozilla/">we&#8217;ve created the Living Docs Program</a>. The program will bring together filmmakers and web developers in a two-day Hack Jam to share ideas, build prototypes, and launch new projects. (We beta-tested this formula last March with <a href="http://webmademovies.org/videoblog-buttercamp">Buttercamp</a>). The best projects which will receive up to $75,000 in production funding from ITVS. Mozilla and ITVS will also work with the three chosen projects to drive outreach and engagement to festivals and audiences around the world.</p>
<p>Next week, we&#8217;ll bring together 6 filmmaking teams and match them with 6 leading html5 media developers to roll up our sleeves and see what can be made.  The projects selected to attend will be:</p>
<p><b>18 Days In Egypt</b><br />
Jigar Mehta<br />
#18DaysInEgypt is a crowd-sourced interactive documentary of the events in Egypt from #Jan25 to #Feb11.18 It will tell the story of the Egyptian revolution with the same tools that helped share it with the world in realtime. </p>
<p><b>30 Mosques</b><br />
Film: Musa Syeed<br />
Blog: Aman Ali &#038; Bassam Tariq<br />
A film following two Muslim Americans on their road trip across America, visiting 30 mosques, in 30 states, in 30 days. The journey explores what it means to be Muslim in America today and serves as a powerful counter-narrative to the media’s image of a monolithic Islam.</p>
<p><b>Injunuity</b><br />
Adrian Baker<br />
Injunuity is a mix of animation, music and real thoughts from real people exploring our world from the Native American perspective. Covering such topics as language preservation, the environment, and Columbus Day, Injunuity is a visually stunning, thought-provoking mosaic of reflections on America, our shared past, our turbulent present, and our undiscovered future.</p>
<p><b>The Interrupters</b><br />
Steve James<br />
THE INTERRUPTERS follows a lively group of men and women &#8211; most of them former gang leaders and ex-cons -trying to &#8220;interrupt&#8221; shootings, and protect their communities from the violence they themselves once employed.  The film will feature individual Interrupters, and observe the inner workings of the program, including their weekly roundtable meetings and street interventions.  Along the way, THE INTERRUPTERS will tell stories of personal redemption while taking viewers on a compelling observational journey into the stubborn, persistent violence that plagues American cities. </p>
<p><b>The Island President</b><br />
Bonni Cohen &#038; Jon Shenk<br />
This is a documentary portrait of The Maldives and its complex and charismatic young president, Mahamed Nasheed.  Global warming has brought this island nation to the very brink of catastrophe: if the galloping trajectory of climate change continues unchecked, rising sea waters will soon submerge many of its islands and atolls.</p>
<p><b>¿Mas Bebes?</b><br />
Rénée Tajima-Pena<br />
¿Más Bebés? reveals the forgotten history of Mexican American women who were coercively sterilized at L.A. County-USC Medical Center during the late 1960s and 70s. Many spoke no English, and were prodded into tubal ligations during thelate stages of labor, often based on little more than the question “More babies?”</p>
<p>We can&#8217;t wait to see what these filmmakers will produced when teamed with the talented popcorn community members who will be attending, including:</p>
<p>Abram Stern<br />
Rick Waldron<br />
Scott Downe<br />
Cole Gillespie<br />
Bobby Richter<br />
Brian Chirls<br />
Atul Varma<br />
Dan Mosedale</p>
<p>We&#8217;ll publish the results of the hack day, and will be working with ITVS an the filmmaking teams well into 2012.  Till the hack day! </p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/mozilla-itvs-the-living-docs-project/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Meet the Makers at BAVC</title>
		<link>http://mozillapopcorn.org/bavc/</link>
		<comments>http://mozillapopcorn.org/bavc/#comments</comments>
		<pubDate>Tue, 20 Sep 2011 18:23:06 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[events]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[popcorn]]></category>
		<category><![CDATA[popcorn maker]]></category>

		<guid isPermaLink="false">http://webmademovies.org/?p=367</guid>
		<description><![CDATA[Young filmmakers learn web making skills +  create web native cinema. <a href="http://mozillapopcorn.org/bavc/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><video controls="controls" preload="auto" width="650" poster="http://mozillapopcorn.org/wp-content/uploads/2011/09/poster2.jpg"><br />
<source src="http://videos.mozilla.org/serv/webmademovies/bavc/bavcmakers.mp4"><br />
<source src="http://videos.mozilla.org/serv/webmademovies/bavc/bavcmakers.webm"><br />
</video><br />
Mozilla is very proud to have collaborated with the <a href="http://www.bavc.org/factory">Bay Area Video Coalition&#8217;s Factory program</a> for youth media makers. This past March, we began working with this group of talented filmmakers to imagine how the documentaries they were creating about Bay Area non profit groups could translate into &#8220;web native&#8221; cinema. We blogged about our initial meetings <a href="http://webmademovies.org/web-made-movies-at-bavc">here</a>.</p>
<p>These meetings formed the basis of the feedback we needed to create Popcorn Maker, our graphical user interface for Popcorn. Over the summer, the students of Seneca College&#8217;s <a href="http://zenit.senecac.on.ca/wiki/index.php/Main_Page">Center for Development of Open Technology</a> worked with Mozilla&#8217;s <a href="http://twitter.com/#!/secretrobotron">Bobby Richter</a> and filmmaker/developer <a href="http://twitter.com/#!/bchirls">Brian Chirls</a> on an alpha version of Popcorn Maker. We blogged about this process <a href="http://webmademovies.org/video-popcorn-maker-walkthrough">here</a>.</p>
<p>These worlds came together in August at BAVC&#8217;s offices in San Francisco, where we embarked on a four-day sprint to create not only the web documentaries of the students, but a usable version of Popcorn Maker.</p>
<p>This achievement is even more remarkable considering that prior to this partnership, none of the Factory students had any experiencing in authoring web pages. The realization that the web is not simply a medium of consumption, but one of participation, is key to Mozilla&#8217;s mission &#8211; and underscores our commitment to helping a generation of &#8220;web makers&#8221; use the web as their canvas. Mozilla&#8217;s Executive Director Mark Surman summed up our efforts in this direction in <a href="http://commonspace.wordpress.com/2011/09/07/webmakers/">this blog post</a>.</p>
<p>We invite you to explore the work that these talented individuals created, and to share them with your networks! Note: these projects all require modern a modern browser such Firefox 4 or Chrome and a fast computer and connection.</p>
<div>
<img class="alignleft size-medium wp-image-382" title="huey" src="http://webmademovies.org/wp-content/uploads/2011/09/huey-300x172.jpg" alt="" width="300" height="172" /><strong>History In These Streets</strong><br />
<a href="http://www.bavc.org/historyinthesestreets">http://www.bavc.org/historyinthesestreets</a><br />
This web documentary about the Huey P Newton Foundation uses A Google Street View location for each stop on the Black Panthers legacy tour, narrated by David Hilliard. Each location also features a collection of archival photos.
</div>
<div>
<img title="creativegrowth" src="http://webmademovies.org/wp-content/uploads/2011/09/creativegrowth-300x168.jpg" alt="" width="300" height="168" /><strong>Creative Growth</strong><br />
<a href="http://www.bavc.org/creativegrowth">http://www.bavc.org/creativegrowth</a><br />
Using “dynamic content injection”, B-Roll is drawn from flickr images in this documentary about an art rehabilitation center. Based on answers that users give to the filmmakers questions (ie “what inspires you?”), the film will change with each viewing.</p>
<div>
<img class="alignleft size-medium wp-image-381" title="cityslickers" src="http://webmademovies.org/wp-content/uploads/2011/09/cityslickers-300x185.jpg" alt="" width="300" height="185" /><strong>Cultivating Community</strong> (documenting CIty Slicker Farms)<br />
<a href="http://www.bavc.org/cultivatingcommunity">http://www.bavc.org/cultivatingcommunity</a><br />
A full screen video which becomes transparent as Google Maps “pins” are dropped at the site of each farm. When the video is completed, users can explore each site in detail with a video for that specific site.</p>
<div>
<img class="alignleft size-medium wp-image-384" title="inspire" src="http://webmademovies.org/wp-content/uploads/2011/09/inspire-300x221.jpg" alt="" width="300" height="221" /><strong>Inspire Yourself</strong><br />
<a href="http://www.bavc.org/inspireyourself">http://www.bavc.org/inspireyourself</a><br />
In partnership with InspireUSA, this group chose to build a site that featured inspirational stories from others living with mental illness. The site features four video vignettes, as well as several written stories collected by the team. These written stories can be updated based on submissions collected on the site.</p>
<p>
<strong>Popcorn Maker Alpha</strong><br />
A work in progress version of our app can be found at <a href="http://mozillapopcorn.org/maker">http://www.popcornjs.org/popcornmaker</a>, but be warned that the app is experiencing heavy development <img src='http://mozillapopcorn.org/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/bavc/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
<enclosure url="http://videos.mozilla.org/serv/webmademovies/bavc/bavcmakers.webm" length="75867874" type="video/webm" />
<enclosure url="http://videos.mozilla.org/serv/webmademovies/bavc/bavcmakers.mp4" length="40279348" type="video/mp4" />
		</item>
		<item>
		<title>Popcorn 0.8</title>
		<link>http://mozillapopcorn.org/popcorn-0-8/</link>
		<comments>http://mozillapopcorn.org/popcorn-0-8/#comments</comments>
		<pubDate>Tue, 30 Aug 2011 20:28:49 +0000</pubDate>
		<dc:creator>brett</dc:creator>
				<category><![CDATA[popcorn]]></category>

		<guid isPermaLink="false">http://webmademovies.org/?p=362</guid>
		<description><![CDATA[It&#8217;s been a busy month in the popcorn community. While we&#8217;ve been furiously working on Popcorn Maker, the community pulled together last week to land some changes to Popcorn.js. Download it now! You can see the many changes here in &#8230; <a href="http://mozillapopcorn.org/popcorn-0-8/">Continue reading <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s been a busy month in the popcorn community.  While we&#8217;ve been <a href="http://webmademovies.org/designing-the-popcorn-maker">furiously working on Popcorn Maker</a>, the community pulled together last week to land some changes to Popcorn.js.  <a href="http://popcornjs.org/download">Download it now!</a></p>
<p>
You can see the many changes here in our changelog.  Some standouts for this release are:</p>
<ul>
<li>
Popcorn.locale &#8211; this provides much needed internationalization. Author Rick Waldron has already documented the changes in this <a href="http://popcornjs.org/API/popcorn-locale">API documentation</a>, so if you are keen to offer popcorn in multiple languages, definitely check this out.</p>
<li>We have removed support for Google Translate and Google News based on Google deprecating these APIs.
<li>The Google Maps plugin has much better support for headings &#8211; you can see it in action on the <a href="http://popcornjs.org/code/plugins/googlemap/popcorn.googlemap.html">Google Maps plugin page</a>
<li>During this release we have added over 100 new tests to ensure that Popcorn is as bug-free as possible.
<p>Our next release, v0.9, will be our largest ever.  As always, we&#8217;ll need lots of help.  If you&#8217;re a Javascript developer, please <a href="https://webmademovies.lighthouseapp.com/projects/63272-popcornjs/overview">join us on our issue tracker</a> to see if there is a ticket you can help out with. Now is a great time to get involved with a library nearing maturity!</p>
]]></content:encoded>
			<wfw:commentRss>http://mozillapopcorn.org/popcorn-0-8/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

