|
|
| Line 1: |
Line 1: |
| <div style="display:block;-moz-border-radius:10px;background-color:#cccccc;padding:20px;margin-top:20px;height:650px;"> | | <div style="display:block;-moz-border-radius:10px;background-color:#cccccc;padding:20px;margin-top:20px;height:650px;"> |
| <h1>How to Hack a Commercial</h1> {{anchor|Intro}}
| | <div style="-moz-border-radius: 10px;width:25%;height:275px;background-color:#A2BFF4;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:2.5%;padding-top:0px"><h2>Hack a Commercial</h2> |
| <div style="display:block;background-color:#ffffff;-moz-column-gap:20px;padding:20px;margin-top:20px;-moz-border-radius:10px;height:81%;"> | | [[Image:Title_commercial_small.png]]<br/> |
| <div style="display:block;float:right;"> | | Add your own voice to an old commercial by adding pop ups and commentary. You can change meanings, extend messages, and otherwise recontextualize the video. |
| | [https://wiki.mozilla.org/Webmakers/Projects/Hack-a-Commercial Hack a Commercial] |
| | </div> |
|
| |
|
| [[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="-moz-border-radius: 10px;width:25%;height:275px;background-color:orange;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:2.5%;padding-top:0px"><h2>Make a Mad Lib</h2> |
| | | [[Image:Title_madlib01.png|240px]]<br/> |
| <div style="padding-left:30px;">[[Image:videourl.png]]</div><div style="font-size:10px; color:#333333;font-style:italic;padding:0px 0px 0px 25px;">Switch out the URL</div>
| | Add vintage titles, robots speaking, comic style speech bubbles and your own special brand of silly to make a mad lib. |
| | | [https://wiki.mozilla.org/Webmakers/Projects/Make-a-MadLib Make a MadLib] |
| [[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> |
|
| |
|
| [[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 style="-moz-border-radius: 10px;width:25%;height:275px;background-color:#C0C0C0;float:left;display:block;margin:1.5%;border: 1px solid #C4C295;text-align:left;padding:2.5%;padding-top:0px"><h2>Report the News</h2> |
| | [[Image:newscaster.png|240px]]<br/> |
| | Add lower thirds and extra video footage to create a newscast about any topic you choose. |
| | [https://wiki.mozilla.org/Webmakers/Projects/Report-the-News Report the News] |
| </div> | | </div> |
| <div style="width:80%;display:block;">
| |
| Add your own voice to an old commercial by adding popups and commentary. You can change meanings, extend messages and otherwise remix the video.
| |
|
| |
| '''Step 1:''' [http://archive.org/details/prelinger_commercials Find a commercial] you would like to comment on. Browse by collection or title. Once you've found a commercial to work with, choose a file type (we recommend the ogg file format which is an open format) and click to open the commercial in your browser.
| |
|
| |
| '''Step 2:''' Open [http://mozillapopcorn.org:8888 Popcorn Maker] in your browser.
| |
|
| |
| '''Step 3:''' Click "Get Started" and choose the Popup template.
| |
|
| |
|
| '''Step 4:''' Click on the Edit Source button in the upper lefthand corner of the video. 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 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 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 10:''' Iterate your project based on feedback you receive.
| |
| </div>
| |
| </div>
| |
| </div> | | </div> |