{"id":24063,"date":"2020-02-24T05:36:00","date_gmt":"2020-02-24T09:36:00","guid":{"rendered":"https:\/\/tiie.w3.uvm.edu\/blog\/?p=24063"},"modified":"2020-02-24T13:26:58","modified_gmt":"2020-02-24T17:26:58","slug":"how-to-make-a-pop-up-video","status":"publish","type":"post","link":"https:\/\/tiie.w3.uvm.edu\/blog\/how-to-make-a-pop-up-video\/","title":{"rendered":"How to make a pop-up video"},"content":{"rendered":"<p>Ahem. Or a pop-up <em>edu<\/em>-video. Here&#8217;s one we made earlier!<\/p>\n<div class=\"epyt-video-wrapper\">\n<div  style=\"display: block; margin: 0px auto;\"  id=\"_ytid_80265\"  width=\"525\" height=\"295\"  data-origwidth=\"525\" data-origheight=\"295\" data-facadesrc=\"https:\/\/www.youtube.com\/embed\/M43YTK2GKKk?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=1&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;modestbranding=1&#038;rel=0&#038;fs=1&#038;playsinline=1&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;\" class=\"__youtube_prefs__ epyt-facade epyt-is-override  no-lazyload\" data-epautoplay=\"1\" ><img decoding=\"async\" data-spai-excluded=\"true\" class=\"epyt-facade-poster skip-lazy\" loading=\"lazy\"  alt=\"How to turn a student-led conference into a student-centered celebration\"  src=\"https:\/\/i.ytimg.com\/vi\/M43YTK2GKKk\/maxresdefault.jpg\"  \/><button class=\"epyt-facade-play\" aria-label=\"Play\"><svg data-no-lazy=\"1\" height=\"100%\" version=\"1.1\" viewBox=\"0 0 68 48\" width=\"100%\"><path class=\"ytp-large-play-button-bg\" d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\"><\/path><path d=\"M 45,24 27,14 27,34\" fill=\"#fff\"><\/path><\/svg><\/button><\/div>\n<\/div>\n<p>And yes, we were inspired by <a href=\"https:\/\/youtu.be\/km728FNBInA\">the late great VH-1 Classic series<\/a>.<\/p>\n<p>*sigh* Let&#8217;s take a moment&#8230;<\/p>\n<p>And move on:<\/p>\n<p>The pop-up video mechanism is great for videos that are longer than four minutes, such as presentations or student-led conferences, because it gives you the chance to provide additional context that&#8217;s not readily discernible from the video alone.<\/p>\n<h3>Here&#8217;s the basic recipe:<\/h3>\n<ul>\n<li>You make your pop-up resources in Keynote;<\/li>\n<li>Add them to your video using the green screen utility;<\/li>\n<li>Then add your opener, closer and chapter pop-ups.<\/li>\n<\/ul>\n<h4>Let&#8217;s unpack that process, step by step.<\/h4>\n<p>To make your life a little easier, we&#8217;ve prepared a package of resources files that you can download directly, referenced by filename in this tutorial.<\/p>\n<p><a href=\"https:\/\/wp.me\/a4r2oE-6gG\">Download the files here<\/a> (.zip format).<\/p>\n<p>The download should begin automatically. When it&#8217;s finished, expand the .zip file package on your machine. It&#8217;s a directory containing five files:<\/p>\n<ol>\n<li>in-video pop-up creator.key (Keynote file)<\/li>\n<li>Pop Up chapter creator.key (Keynote file)<\/li>\n<li>Jaunty POP noise.wav (uncompressed audio file)<\/li>\n<li>Pop Up eduvideo Intro.mp4 (compressed video file)<\/li>\n<li>spare water footage.mp4 (compressed video file)<\/li>\n<\/ol>\n<p>We created and are distributing these files as fair use for creating educational materials. The audio and the water footage are pieces in the public domain. But still: don&#8217;t be a weasel.<\/p>\n<h3>Let&#8217;s make your eduvideo pop up resources:<\/h3>\n<h4>Chapter pop-ups<strong><em><br \/>\n<\/em><\/strong><\/h4>\n<p>Chapter pop-ups are questions that take up the entire screen and are meant for the viewer to view *while the video itself is not playing*. Think of them as pre-test and post-test questions. I<a href=\"https:\/\/youtu.be\/M43YTK2GKKk\">n our example at the top of the post<\/a> (video), chapter pop-ups appear at 4:36, 11:34, 14:01, 16:15, and 19:39. That&#8217;s a lot, but to be fair, this is a 20-minute video, and we really wanted viewers to stay focused (and not check their twitter).<\/p>\n<p>Pop Up chapter creator.key is the file you&#8217;ll use to create all your chapter pop-ups. Open it up in Keynote, and here&#8217;s your default screen:<\/p>\n<p><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/chapter_defaultscreen.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-24099\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/chapter_defaultscreen-1024x623.jpg\" alt=\"Pop Up Video default screen for Chapter Segment creator\" width=\"800\" height=\"487\" srcset=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/chapter_defaultscreen-1024x623.jpg 1024w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/chapter_defaultscreen-300x182.jpg 300w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/chapter_defaultscreen-768x467.jpg 768w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/chapter_defaultscreen.jpg 1422w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>Doubleclick on the black text and you can edit it to customize your question. Boom: done.<\/p>\n<p>Now, once you&#8217;ve edited your text, export your Keynote file to a movie. Go up to the top menus: <em>File &gt; Export to &gt; Movie&#8230;<\/em><\/p>\n<p><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/export_as_movie.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-24100\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/export_as_movie.jpg\" alt=\"Pop Up video: export to Movie\" width=\"752\" height=\"509\" srcset=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/export_as_movie.jpg 752w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/export_as_movie-300x203.jpg 300w\" sizes=\"auto, (max-width: 706px) 89vw, (max-width: 767px) 82vw, 740px\" \/><\/a><\/p>\n<p>Change the resolution to 1080p and you&#8217;re good to go. This generates a .m4a movie file. Save your new\u00a0 chapter pop-up movie in a central directory for when we get to <strong>Add your resources<\/strong>. Make as many chapter segments as you feel makes sense.<\/p>\n<h4>In-video pop-ups<\/h4>\n<p>Open up your in-video Pop Up Creator.key file in Keynote. Here&#8217;s your default screen:<\/p>\n<p><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/start_here.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-24101\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/start_here-1024x583.jpg\" alt=\"Pop Up video: in-video pop ups\" width=\"800\" height=\"455\" srcset=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/start_here-1024x583.jpg 1024w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/start_here-300x171.jpg 300w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/start_here-768x437.jpg 768w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/start_here.jpg 1304w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<h4>Edit the black text in the box by clicking on it.<\/h4>\n<p>Don&#8217;t add more than 12 words to any one pop-up. If you&#8217;ve got that much to say, it can be two screens. You want to keep your pop-ups informative but sparse. Remember: you&#8217;re asking the viewer to take their attention away from the content of the video to pay attention to the pop-up, so make it worth their while and respect their time.<\/p>\n<h4>After you&#8217;ve edited the text, choose an image to represent the main idea of the text.<\/h4>\n<p>Keynote has a great on-board library of art. Say our text is: &#8220;Kayleigh was part of the robotics team that won State championships.&#8221; Click on the Shape button at the top of your Keynote screen. This opens up the Keynote images library. Start searching on &#8220;robot&#8221;, for example.<\/p>\n<p><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/robot.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-24102\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/robot.jpg\" alt=\"Pop Up video: search for icons\" width=\"858\" height=\"524\" srcset=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/robot.jpg 858w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/robot-300x183.jpg 300w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/robot-768x469.jpg 768w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>Click once on the icon you&#8217;d like to add, and Keynote will automatically add it to your screen. Move the icon to the center of your circle. Resize it as appropriate.<\/p>\n<p>Next, select all the items in your pop-up. Then go up to your file menus at the top of your screen, to <em>Arrange &gt; Group<\/em>. This will make Keynote treat your pop-up box as one discrete item and make your life simpler by a factor of ten, because now you add animation.<\/p>\n<h4>With your pop-up box highlighted, choose Animate from the righthand menu.<\/h4>\n<p>You need a Build In and a Build Out animation, and a duration.<\/p>\n<ul>\n<li>Under &#8220;Build In&#8221;, choose <em>Appear<\/em>.<\/li>\n<li>Under &#8220;Build Out&#8221;, choose <em>Dissolve<\/em>.<\/li>\n<\/ul>\n<p>Then you&#8217;re going to determine your duration.<\/p>\n<p>Click the Build Order button at the bottom of the righthand Animate mention. In your Build Order, you&#8217;re going to line them up, one on top of the other, then add a delay to the Build Out of at least 1.0 seconds.<br \/>\nYour Build In is linked up with your Build Out when they are touching (Appear is in light, Dissolve is in dark).<\/p>\n<p>Click once on the Dissolve bar in your Build Order window. It brings up a dialogue for Start and Delay. Your Dissolve bar should have a Start of &#8220;After Build 1&#8221; and your Delay is at least 1.0 seconds.<\/p>\n<p>Here&#8217;s a quick screencast of that process:<\/p>\n<div style=\"width: 525px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-24063-1\" width=\"525\" height=\"328\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/build_order.mp4?_=1\" \/><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/build_order.mp4\">https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/build_order.mp4<\/a><\/video><\/div>\n<p>&nbsp;<\/p>\n<p>Save your file. Now you export it as a movie. <em>File &gt; Export to &gt; Movie&#8230;<\/em><\/p>\n<p>Change your resolution to 1080p and click <em>Next&#8230;<\/em><\/p>\n<p>Save your file. It will have a .m4a file ending. Now let&#8217;s put all this together in a video.<\/p>\n<h3>Add your resources<\/h3>\n<p>We&#8217;ll work in iMovie for this example but this works in whatever video editing program you&#8217;re using. Let&#8217;s add your pop-ups to the video itself.<\/p>\n<h3>Here&#8217;s the layout of a pop-up eduvideo:<\/h3>\n<h4><strong>Opener <\/strong>| <strong>Chapter Pop-up<\/strong> | <strong>Video &#8212; with in-video pop-ups<\/strong> | <strong>Closer<\/strong><\/p>\n<p>Opener:<\/h4>\n<div>We included a file in the downloads package for you: Pop Up eduvideo intro.mp4<\/div>\n<h4>Add it in the first slot on your timeline.<\/p>\n<p>Chapter Pop-up:<\/h4>\n<div>You&#8217;re going to add the .m4a file you created to a background of bubbles, add a pop noise, and boom, there&#8217;s your chapter segment. So! Take the file spare_water_footage.mp4 from your download package. Add it to your iMovie timeline, after the opener. Now add two things: the .m4a and a jaunty popping noise.<\/div>\n<p>With the spare water footage highlighted in your timeline, add your chapter file *on top of it*.<\/p>\n<p>Highlight this new giant green block, and change &#8220;Cutaway&#8221; to &#8220;Green\/Blue Screen&#8221; from the menu on top of your viewer.<\/p>\n<p>Then add the Jaunty Popping Noise *underneath* your timeline.<\/p>\n<p><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/make_a_chapter_segment.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-24104 size-large\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/make_a_chapter_segment-1024x684.jpg\" alt=\"Pop Up eduvideo: make a chapter segment in iMovie\" width=\"800\" height=\"534\" srcset=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/make_a_chapter_segment-1024x684.jpg 1024w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/make_a_chapter_segment-300x200.jpg 300w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/make_a_chapter_segment-768x513.jpg 768w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/make_a_chapter_segment.jpg 1313w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>You&#8217;ll need to move it around to get the timing right, so that as your question appears, the pop happens, but have fun with it.<\/p>\n<h4>Adding in-video pop-ups<\/h4>\n<p>Next, choose the points at which you&#8217;d like to add a pop-up message during your video. You&#8217;ll use the same method you used for adding the chapter pop-up, but add your in-video pop-up directly to the footage.<\/p>\n<p>Say we have some lovely drone footage of the Chicago skyline. And we&#8217;d like to add a notation about the make and model of the drone used.<\/p>\n<ul>\n<li>Make your drone info pop-up in Keynote, and export the animation as a movie.<\/li>\n<li>Import that movie into iMovie<\/li>\n<li>Add it to your timeline above the skyline footage<\/li>\n<li>Change the Cutaway effect to Green\/Blue Screen<\/li>\n<li>Add your Jaunty Pop sound to your timeline below the skyline footage<\/li>\n<li>Adjust the timing of your pop-up notation and your pop noise.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/iMovie.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-24105\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/iMovie-1024x645.jpg\" alt=\"Pop Up video: adding in-video pop ups\" width=\"800\" height=\"504\" srcset=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/iMovie-1024x645.jpg 1024w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/iMovie-300x189.jpg 300w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/iMovie-768x484.jpg 768w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2020\/02\/iMovie.jpg 1297w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/a><\/p>\n<p>BOOM.<\/p>\n<p><strong>Closer:<\/strong> &#8230;is totally up to you. We didn&#8217;t include a closer in our downloads package. Our example video ends with a chapter segment post-question that covers the whole video, but what you end your video with is entirely up to you. Have fun with it, reinforce your message &#8212; just go hog wild.<\/p>\n<p>And let us know how this worked for you! We would love to see your pop-up eduvideos! Leave us a comment and share!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ahem. Or a pop-up edu-video. Here&#8217;s one we made earlier! And yes, we were inspired by the late great VH-1 Classic series. *sigh* Let&#8217;s take a moment&#8230; And move on: The pop-up video mechanism is great for videos that are longer than four minutes, such as presentations or student-led conferences, because it gives you the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/how-to-make-a-pop-up-video\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to make a pop-up video&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":24104,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-24063","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-videos"],"_links":{"self":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts\/24063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/comments?post=24063"}],"version-history":[{"count":2,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts\/24063\/revisions"}],"predecessor-version":[{"id":24106,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts\/24063\/revisions\/24106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/media\/24104"}],"wp:attachment":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/media?parent=24063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/categories?post=24063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/tags?post=24063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}