New features: searching for media and adding tutorials

On a recent Popcorn listserv message there was mention of a cool new feature involving tutorials.

Adding Tutorials to Popcorn

From: Jacob Caggiano <jacob@mozillafoundation.org>

“All you have to do is add a tag that says tutorial-URL  (where the URL is the web address to the tutorial that you’ve written) and the tutorial will show up inside the tool when someone remixes your project!


Here’s an example of what they look like:
https://maxcapacity.makes.org/popcorn/1amp/remix
https://artychan.makes.org/thimble/movie-poster/remix

And here are the SUMO help articles that explains in more depth how tutorials work:
For Popcorn – https://support.mozilla.org/kb/popcorn-tutorials
For Thimble – https://support.mozilla.org/kb/thimble-tutorials

 

Search YouTube, Giphy, Flickr, SoundCloud

I also noticed the ability to now add media by searching right in the Popcorn interface, including a way to include media from Giphy!

 

Screen grab of Popcorn search dialog
Screen grab of Popcorn search dialog

Popcorn – Add your webcam & more media

A new feature being tested out right now, allows for the use of your webcam right in the popcorn maker. Check it out @ http://webcam.mofostaging.net/templates/basic/

How to: Popcorn Maker – YouTube Upload Tool: http://chrisdecairos.ca/popcorn-maker-webcam.html

Also, another feature coming up through testing will allow for multiple videos/media sources and sequencing.

Under the covers of a Popcorn project

What lies beneath the sheets?

Popcorn is web-based interactive content for videos. Viewers can interact with your content while watching your video.

At it’s core, Popcorn is HTML, CSS, and Javascript based on the newly defined set of standards, HTML5.

HTML (HyperText Markup Language) is basically the guts of a web page, what is rendedred for you to see in your web browser. HTML5 is a new set of standards that focuses on creating semantic markup AND focuses much more on web applications and making the web more interactive.

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

 

Take a look at the guts

In Popcorn Maker,

While viewing one of your own projects or remixing an existing project:

  1. Save Project (Be sure you are logged in)
  2. In the ‘Share’ panel on the right, click View Project Source
  3. Here you will see everything you just created, all the html, css and javascript that makes this project run in a web browser.

 

 

If you really want to get crazy….

Since this is open source, check out the Popcorn Github page.

PopcornJS is the framework underneath Popcorn Maker. If you didn’t want to use the Popcorn Maker interface and were proficient in Javascript, you could create your project writing the html and javascript yourself. You also have the ability to use the code to create additional plugins, as well.

You can also take a look at the excellent documentation http://popcornjs.org/popcorn-docs/getting-started/

Popcorn Remixes

Remixing an existing Popcorn project

One of the many cool things about Mozilla’s Popcorn is the ability to remix projects and make them your own.

http://www.webmonkey.com/2012/11/mozillas-popcorn-maker-brings-video-remixing-to-the-masses/

 

Walking through the quick tutorial will help you get started

Be sure you have already created a Mozilla Persona account (with your illinois.edu email)

  1. Find the existing Mozilla Popcorn Project you want to remix
  2. Click the remix button on the bottom toolbar
  3. Save the project – this will save a copy of your remix in your projects
  4. Now you can hack away – change whatever you like!

 


Step 1: Find an existing project to remix

Since Popcorn is barely out of beta, there aren’t a whole lot of places to find these projects. (You are on the cutting edge, my friend!)

Your best bet is to start at https://popcorn.webmaker.org/

 

Step 2: Click the remix button at the bottom of your selected project

 

Screen capture outlining the remix button

 

Step 3: Save the project – to have a copy in your projects

Screen capture highlighting save button in Popcorn Maker

 

Step 4: Hack away and make it your own

Hit Play to watch it through at least one time to see how the timeline works

You can change anything. Try testing out all the different components to see how it works.

  • Change Media to a different video (YouTube, etc.)
  • Movie things around on the timeline and between layers to see the effects
  • Add new layers or reorder existing ones
  • Play with the events that are on the timeline

Editing Timeline Events:

Select an item on the timeline to edit, you will see the options for that event on the right hand side.

Screen capture highlighting the wikipedia entries in popcorn maker

 

Add new items to the timeline by dragging to project window or to timeline

 

 

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