{"id":1556,"date":"2013-08-20T17:19:58","date_gmt":"2013-08-21T00:19:58","guid":{"rendered":"http:\/\/miriamposner.com\/blog\/?p=1556"},"modified":"2014-02-02T01:41:29","modified_gmt":"2014-02-02T08:41:29","slug":"using-mozilla-popcorn-maker-to-create-an-interactive-video","status":"publish","type":"post","link":"https:\/\/miriamposner.com\/blog\/using-mozilla-popcorn-maker-to-create-an-interactive-video\/","title":{"rendered":"Using Mozilla Popcorn Maker to Create an Interactive Video"},"content":{"rendered":"
\nI’ll be teaching a workshop on Mozilla Popcorn Maker soon and, as is my habit, I created this step-by-step tutorial. Here’s<\/a> the tutorial in handout form as a PDF, and here<\/a> it is in Word, in case you’d like to modify it<\/em>.<\/p>\n

Mozilla Popcorn Maker<\/a> allows you to enrich a video with interactive maps, images, and webpages. Your video could be different every time it’s played, because it pulls in dynamic content and allows your “viewer” to interact with it. Here, we learn how to use it to enhance an archival video.<\/p>\n

<\/p>\n<\/div>\n

\n

Sign up for an account<\/h3>\n
\"media_1377032206856.png\"<\/div>\n
\n

Go to popcorn.webmaker.org<\/a>. <\/strong>You can work on a Mozilla Popcorn Maker project without logging in, but you can’t save it. So go ahead and sign up for an account. (Mozilla uses the identity manager Persona<\/a>, so you may only need to enter your email address.)<\/p>\n<\/div>\n<\/div>\n

\n

Choose a video to serve as the basis of your project<\/h3>\n
\"media_1377032624314.png\"<\/div>\n
\n

With Popcorn Maker, you layer media on top of sound or video, which can come from a number of places. As the icons indicate, you can easily use video from YouTube, Vimeo, or SoundCloud, just by pasting in the link. Somewhat less obviously, you can use video from a place like the Internet Archive, which uses HTML5 to display its video. Let’s look at how to do this.<\/p>\n<\/div>\n<\/div>\n

\n

Grab a video from the Internet Archive<\/h3>\n
\"media_1377033641185.png\"<\/div>\n
\n

Once you’ve found a video you like on the Internet Archive, copy the link by right-clicking<\/strong> on the Ogg Video<\/strong> link and selecting Copy Link Address<\/strong> from the context menu. Then paste the link into your Popcorn Maker project and click on Create Clip.<\/strong><\/p>\n<\/div>\n<\/div>\n

\n

Drag your video from the Media Gallery to the timeline<\/h3>\n
\"media_1377034042670.png\"<\/div>\n
\n

Drag it to Layer 0.<\/p>\n<\/div>\n<\/div>\n

\n

Explore your options<\/h3>\n
\"media_1377034195604.png\"<\/div>\n
\n

Once you’ve dragged your video to the timeline, you’ll see the Clip Editor <\/strong>in the Events<\/strong> pane.<\/p>\n

    \n
  1. Fallback<\/strong> is where you can list another URL in case the browser you’re using doesn’t support HTML5. For Internet Archive videos, you can insert the URL for the MP4 version of your video in the same way you selected the .ogv version.<\/li>\n
  2. By default, Popcorn Maker includes the first 30 seconds of your clip in your project. You can extend this time or shorten it by using this scrubber. It’s not a full-fledged editing tool, but you can select only a portion of your video if you’d like.<\/li>\n
  3. If you’d like, you can turn the video portion of your clip off.<\/li>\n
  4. … and you can do the same thing with the audio, as well as turn the volume down.<\/li>\n
  5. Here’s where you can change the title of your clip.<\/li>\n
  6. Here, you can specify that you’d like time in your project before or after your video ends.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
    \n

    Making sense of the timeline<\/h3>\n
    \"media_1377042421900.png\"<\/div>\n
    \n

    This image shows what a timeline from a completed project \u2014 with a number of different media assets \u2014 might look like.<\/p>\n

      \n
    1. You assemble your project in layers<\/strong>. Layers with lower numbers appear above <\/i>layers with a higher number. So layer one appears on top of layer two.<\/li>\n
    2. You can zoom in on part of your timeline by using this scrubber. This makes it easier to work with events of shorter duration.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n
      \n

      Add some text to your video<\/h3>\n
      \"media_1377035418217.png\"<\/div>\n
      \n

      If you click on the Events<\/strong> tab, you’ll see that you have the option to add some text to your video.<\/p>\n<\/div>\n<\/div>\n

      \n

      Explore your options<\/h3>\n
      \"media_1377038465471.png\"<\/div>\n
      \n

      Once you start typing your text, you’ll see that you have a number of different options. You can change the time when your text starts and ends, move it around on the canvas, and change the way it transitions on and off the page. You can also provide a link for the viewer to click. Under the Advanced<\/strong> tab, you can change the font and color.<\/p>\n<\/div>\n<\/div>\n

      \n

      Add an article from Wikipedia<\/h3>\n
      \"media_1377042159149.png\"<\/div>\n
      \n

      You can also add a Wikipedia article, which the viewer can interact with as the video plays. Be sure to give the viewer enough time to explore the article.<\/p>\n<\/div>\n<\/div>\n

      \n

      Add a map<\/h3>\n
      \"media_1377040954484.png\"<\/div>\n
      \n

      You can also add a Google map, which your viewers can interact with as the video plays. As I write this, choosing any of the Stamen map options causes Popcorn Maker to crash, so be sure to save your work before you select this option.<\/p>\n<\/div>\n<\/div>\n

      \n

      Add a popup<\/h3>\n
      \"media_1377039002129.png\"<\/div>\n
      \n

      A popup<\/strong> is a bit of text you can position on the page, kind of like VH1’s Pop-Up Videos. You can customize the popup’s look and feel with icons and transitions.<\/p>\n<\/div>\n<\/div>\n

      \n

      Add an image<\/h3>\n
      \"media_1377041451401.png\"<\/div>\n
      \n

      Add an image by dragging it from your desktop. You can also choose to display a Flickr slideshow, which will display images that are either tagged with a word you choose or from a specific URL.<\/p>\n<\/div>\n<\/div>\n

      \n

      Replay snippets with a loop<\/h3>\n
      \"media_1377041618953.png\"<\/div>\n
      \n

      With a loop<\/strong>, you can specify that you’d like part of your video to repeat.<\/p>\n<\/div>\n<\/div>\n

      \n

      Pause for as long as you want.<\/h3>\n
      \"media_1377041964268.png\"<\/div>\n
      \n

      Once the pause is complete, your video will pick up where it left off.<\/p>\n<\/div>\n<\/div>\n

      \n

      Save and share your project<\/h3>\n
      \"media_1377043833783.png\"<\/div>\n
      \n

      If you click on the Project <\/strong>tab, you’ll see that you can add descriptive information about your project, tweet the link, share it on Google Plus, or get the code to embed it on a website. Because your project is authored in HTML5, you can also see all its source code. Click on the green arrow button to see what your project looks like in its completed state.<\/p>\n<\/div>\n<\/div>\n

      \n

      Other people can remix your work<\/h3>\n
      \"media_1377044042227.png\"<\/div>\n
      \n

      Completed projects include a remix<\/strong> button, with which anyone on the Internet can use your content to create a new version of your project.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

      I’ll be teaching a workshop on Mozilla Popcorn Maker soon and, as is my habit, I created this step-by-step tutorial. Here’s the tutorial in handout form as a PDF, and here it is in Word, in case you’d like to modify it. Mozilla Popcorn Maker allows you to enrich a video with interactive maps, images, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5],"tags":[285,284,283,73,8],"class_list":["post-1556","post","type-post","status-publish","format-standard","hentry","category-digital-humanities","category-tools","tag-interactive","tag-mozilla","tag-popcorn","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1556","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/comments?post=1556"}],"version-history":[{"count":10,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1556\/revisions"}],"predecessor-version":[{"id":1663,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/posts\/1556\/revisions\/1663"}],"wp:attachment":[{"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/media?parent=1556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/categories?post=1556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/miriamposner.com\/blog\/wp-json\/wp\/v2\/tags?post=1556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}