Confirmed users
895
edits
Webmakers/Projects/Popcorn-DIY: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary |
||
| Line 3: | Line 3: | ||
<div style="display:block;background-color:#ffffff;-moz-column-gap:20px;padding:20px;margin-top:20px;-moz-border-radius:10px;"> | <div style="display:block;background-color:#ffffff;-moz-column-gap:20px;padding:20px;margin-top:20px;-moz-border-radius:10px;"> | ||
<div style="display:block;float:right;"> | <div style="display:block;float:right;"> | ||
<div style="font-size:10px; color:#333333;font-style:italic;padding:15px 0px 10px 25px;"> | |||
[[Image: | [[Image:chooser.png|300px|right]]<br/><div style="font-size:10px; color:#333333;font-style:italic;padding:15px 0px 10px 25px;">Choose the Popup Template</div> | ||
<div style="font-size:10px; color:#333333;font-style:italic;padding: | |||
[[Image: | <div style="padding-left:30px;">[[Image:timelinemedia.png]]</div><div style="font-size:10px; color:#333333;font-style:italic;padding:0px 0px 0px 25px;">Switch out the URL</div> | ||
<div style="font-size:10px; color:#333333;font-style:italic;padding:15px 0px 10px 25px;"> | |||
[[Image: | [[Image:addevent.png|300px|right]]<br/><div style="font-size:10px; color:#333333;font-style:italic;padding:15px 0px 10px 25px;">Add Popup events</div> | ||
<div style="font-size:10px; color:#333333;font-style:italic;padding:15px 0px 10px 25px;"> | |||
[[Image:popcorn_save_buttons.png|right]]<br/><div style="font-size:10px; color:#333333;font-style:italic;padding:15px 0px 10px 25px;">Save your work, export your code and share your commentary widely</div> | |||
</div> | </div> | ||
<div style="width:80%;display:block;"> | <div style="width:80%;display:block;"> | ||
| Line 17: | Line 17: | ||
'''Step 1:''' Find a commercial you would like to comment on at http://archive.org/details/prelinger_commercials Browse by collection or title. Once you've found a commercial to work with, choose a file type (we recommend the ogg file format) and click to open the commercial in your browser. | '''Step 1:''' Find a commercial you would like to comment on at http://archive.org/details/prelinger_commercials Browse by collection or title. Once you've found a commercial to work with, choose a file type (we recommend the ogg file format) and click to open the commercial in your browser. | ||
Step 2: Open mozillapopcorn.org:8888 in your browser | '''Step 2:''' Open mozillapopcorn.org:8888 in your browser | ||
Step 3: Click "Get Started" and choose the Popup template | '''Step 3:''' Click "Get Started" and choose the Popup template | ||
Step 4: There's a gray box in the upper lefthand corner of the video. Roll over this box and change the URL to the URL of the commercial you'll be commenting on. | '''Step 4:''' There's a gray box in the upper lefthand corner of the video. Roll over this box and change the URL to the URL of the commercial you'll be commenting on. | ||
Step 5: Drag a popup event to the place in the Timeline where you want the popup to appear. | '''Step 5:''' Drag a popup event to the place in the Timeline where you want the popup to appear. | ||
Step 6: Double Click on the event to adjust the text, position, and sticker for that popup event. | '''Step 6:''' Double Click on the event to adjust the text, position, and sticker for that popup event. | ||
Step 7: Keep adding popup events to the timeline. | '''Step 7:''' Keep adding popup events to the timeline. | ||
Step 8: When you're ready, click the "share" button and copy and paste your link to save it somewhere. Then, click the export button and save your code. | '''Step 8:''' When you're ready, click the "share" button and copy and paste your link to save it somewhere. Then, click the export button and save your code. | ||
Step 9: Share with the world. Share your video link widely. | '''Step 9:''' Share with the world. Share your video link widely. | ||
Step 10: Iterate your project based on feedback you receive. | '''Step 10:''' Iterate your project based on feedback you receive. | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||