Objectives

 

Express your creativity in Popcorn Maker by making your own enhanced video experience.

 

Task

 

Had a look at the Popcorn Maker tutorial? Great! Now let's get creative! In this task you'll create your own dynamic and interactive time-based video experience.

 

Go to the Popcorn Maker home page and click 'Start a project':

This gives your a fresh blank timeline to be filled with video and time-based web elements:

 

 

Choose a video about a recent event that is hosted somewhere online, either YouTube, Vimeo or somewhere where you have access to the source file (like you're own server or www.archive.org). Add it as a media clip to the Popcorn Maker editor and enhance it with at least 3 different kinds of events.

 

If you're unsure about how to use the different components of the editor, play around and try things out or have another look at the Popcorn Maker tutorial.

 

Matching Events in Popcorn Maker and Popcorn.js

Objectives

Understand how events you've created in Popcorn Maker, correspond to events in the underlying Popcorn.js JavaScript code.

Task

Take a project you've created in Popcorn Maker that includes at least 3 different types of events. Save your project (you need a free Mozilla Persona account for this). Now go to the 'Project' tab (next to the 'Events' tab). This is where you can adjust settings, share your creation, embed your project or view your project's source. This is what we're doing in this task.

Select 'View Source'. This opens up a new window that contains all the underlying HTML and JavaScript code that powers the project you have just created. Looking at the source code for the Popcorn Maker project allows us to start to think about coding Popcorn ourselves. For now, try to identify the parts of code that represent the 3 different events you have created in Popcorn Maker. Which types of event are they? Have a look at their parameters (like 'start' and 'stop' time code), do they match those of the events in the Popcorn Maker editor?