Category: Popcorn

What the heck is Mozilla Popcorn?

An Introduction

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web. Popcorn.js is part of Mozilla’s Popcorn project.

Popcorn.js is the framework underneath the project (the html and javascript to make it work)

Popcorn Maker is the graphical interface used to create your project

For a great introduction to Popcorn and to see just how awesome it is, view this TED Talk Video and corresponding article at https://blog.mozilla.org/blog/2012/10/19/ted_popcorn/

Also, take a look at this quick introduction  by Mozilla found on http://popcornjs.org/

Ok, that seems cool, but how do I make my own?

You will use a tool called Popcorn Maker (originally titled Butter).

At its core, Popcorn Maker is an HTML5 web app for combining web media with images, text, maps, and other dynamic web content.

Check out this video found at: https://popcorn.webmaker.org/

Getting Started

Be sure to create a Mozilla Persona account using your ILLINOIS.EDU email – or else you won’t be able to SAVE your work

Follow the tutorial https://popcorn.webmaker.org/templates/basic/?savedDataUrl=tutorial.json

Try a remix first to get you started

 

Additional and Background Info

Take a look at: Popcorn Maker 1.0 released – how it works

To learn more about html, css, javascript (or just about anything else) visit Lynda – As a UIUC student you should take advantage of this great service

Login at http://go.illinois.edu/lynda

Mozilla also has some good information about html, css, js

How To

Some awesome tips to help you get started with your project: https://webmaker.org/en-US/projects/?tool=popcorn

Take a look at info about remixes

Login to see Your Popcorn Maker Projects

Embedding Mozilla Popcorn into Compass

Embedding Mozilla Popcorn into Compass Discussion Board

In Popcorn Maker:

  1. Make sure you are logged into your Mozilla Persona account (preferably using your illinois.edu email)
  2. Save your project
  3. Share your project
  4. In the ‘Share’ section, Copy Embed code. It should look something like:

<iframe src=’http://popcorn.webmadecontent.org/ggt_’ width=’560′ height=’358′ frameborder=’0′ mozallowfullscreen webkitallowfullscreen allowfullscreen></iframe>

 

In Compass2G:

  1. Find the appropriate Discussion Board Forum in your Compass course. Ask your instructor for the name.
  2. Click the ‘Create New Thread’ button
  3. Add a subject
  4. In the Message box, if Text Editor is ON: Turn it Off
  5. Now, be sure to click the HTML radio button at the bottom of the Message box.
  6. Copy your embed code into the Message box.
  7. Submit to post