BTC640/Assignment2-Summer2013

Due date: 19 jul

Late penalties: 10% per day

In this assignment you'll be working in a small team to create an infomercial. That means coming up with a script, filming the parts, editing the audio and video, converting it to formats that the popular browsers can play, and using the newest web technologies such as Popcorn.js to display the infomercial in a web browser.

The project you create will be in a webpage created by you, but can be easily integrated into any other website using just copy-paste (and uploading the necessary files, of course).

The good news is that this will never be aired on TV or anywhere else. The better news is that you will get some practice not only with some new technologies but also with your communication and selling skills.

Teams

I recommend 2 or 3 people per team. If you want a bigger or smaller team - I may allow it, please talk to me about it. You teams must be formed by the end of study week.

If you don't know who to make a team with - let me know and I will assign you to someone else without a teammate.

When you're forming the team - keep in mind that the following are the major tasks:

• Presentation scripting
• Getting filmed (presenting)
• Filming
• Audio/video post-processing (the quality must be good)
• Exporting the resulting video for the web
• Using popcorn.js for your video
• All other web stuff as needed (CSS, HTML, other JavaScript)

As soon as you decide, add your names to the following list (one row per team).

#	Members	Infomercial topic	Progress report
0	Example1, Example2	SampleProject1	9 Mar

Preparation

Note the following:

• Filming has to be done using a camera on a tripod, so a cellphone will not work, and a point-and-shoot camera may or may not work. If you don't have access to this equipment - I can lend you mine, but we have to arrange it well in advance.
• You'll be filming yourselves and though the quality will matter - you can try as many times as you like and assemble the best pieces. You don't have to worry about doing it exactly right the first time for this assignment.
• You'll need to make a video of a reasonable size (that can be streamed over a typical residential internet connection).
• You'll need that video to play in the latest versions of Firefox, Chrome, and Internet Explorer.
• The entire webpage has to look professional.
• There will be a graded progress report in week 10, so don't leave it till later.

Scripting

This is not a Digital Media Arts course so the requirements are not nearly as stringent, but doing this step will help you get verything else done on time.

You're selling a product. This could be something that exists already or something that's being built. It could be one of your projects or someone else's. I don't much care about the product you're selling - I care about how well you sell it. So pick any project you're interested in (that you know stuff about). Please do not pick and existing product and parrot its existing commercial. If you want to use existing material like that - ask me first, I may allow it.

Write a script for how the infomercial will flow. There should be at least 15 minutes of talking and a some of minutes of closeups, "live" demos, etc. Try not to make the whole thing longer than 25 minutes.

If you feel you can do a good job without a script - go ahead, but that will be quite hard for most people unless they're experienced in sales.

Filming

Once you have the script - get the camera and make sure you know how to use it. Definitely use a tripod also, I don't want to see any handheld shaking. This should be quite easy to do since I don't expect you'll need to move the camera during any scene.

You must film the following:

• Yourself talking, this is probbly most of it.
• You answering questions from your partner or if you don't have one - questions that came in from the audience.
• Whatever you're selling in action, though I'll accept a creative use of a screen capture software.

Remember that even though you have a script that doesn't mean you have to do the whole thing right at once. Do it in pieces, expecting you'll be pasting the pieces together later during editing. This is a why a good script is important - you can concentrate on one scene at a time.

Editing

In this project the main result of editing will be removing pauses that don't need to be in an online lecture. This would be realtively simple in a short video but will take a lot of work for a video this size.

That means you'll have to watch all of it and use Windows Movie Maker or iMovie (or another tool if you prefer) to delete the pauses. While you're doing this - make notes of times where in the video you'll want to insert events (see the Webpage/Content section below), you'll save yourself some time that way.

If you recorded audio separately - you will want to add the audio track and sync it with the original video before you make any changes to the video, otherwise it will take way too much effort to add the audio later.

Webpage

Same as for assignment 1 - you will need to find a template for your page so that the result looks professional. Don't forget to set the titles correctly and remove links that you aren't using.

On the index page you should have:

• The team number and all the team members' names.
• A list of the equipment you used.
• Where you got the website template.
• Links to any code samples written by someone else that you used in the assignment. You may use online resources or Chris's demo code from here, but you have to be very clear which code you didn't write yourself or else it's plagiarism.

On the video page there will be a title, the name of the presenter, a short description of the lecture, and two main components:

1. The video itself, in an HTML5 video tag. Have the controls showing but don't start playing it automatically.
2. Next to it (probably to the right, though I'll leave that detail to you, as long as it works it's good) you'll need a "Content" area, where you'll show the slides associated with the lecture.

Video

This time you have to make sure your video works not only in Firefox but also in IE. Just the latest versions. That means your video will have to be in two formats. Please do test it on both browsers.

Obviously this only applies to the final, edited video, not the original one you filmed.

Space is a very important consideration. Though you should be filming at the highest quality your camera and storage space allows - that will be too much for real-time video on the web. Assume a client download speed of 300kbps, and calculate how much space that means your video can take, based on how long it is.

You don't want to have bad quality though. So you should have a native size at least 640 pixels wide and make sure you can clearly see the speaker's face.

Content

Whatever the presenter is showing on the projector should be very well visible in your webpage. There's no way to film that with a regular camera. You could have a screen recording or a specialised device to do this, but we have another, better option.

We're going to use Popcorn.js to associate content with certain times in the video. That means you will need screenshots of slides that the speaker used. You can use LibreOffice to export a slideshow as PDF and then use another tool to make an image out of each slide. If the speaker is showing a webpage - instead of showing a screenshot of the webpage you should load the webpage itself in the content div.

The content should appear when it becomes relevant (typically when the speaker switches to that slide/webpage) and dissapear when it's no longer needed.

You should have at least 15 events for your lecture. If for some reason you filmed someone who didn't have slides or webpages to show - you can replace them with source code they were showing or what you think would be useful reference webpages related to the presentation.

Submission

Progress Report

In week 10 (the week before the assignment is due) your entire team has to meet with me and show the status of the project. Not a standup presentation, but just a chat to make sure you're on track to completing everything on time.

Most importantly:

• What equipment you used, and where you got it from.
• Whether you had any issues doing the recording.
• Show me the raw recording you've made.
• Tell me your plan for doing the editing.
• Tell me the plan for creating the content section.

This progress report will be worth 20% of the assignment.

Final Submission

Test your project in Firefox and Internet explorer. Since we don't have a place to host such large files - you'll have to submit the assignment on a CD or DVD. It will contain:

• Your webpage, fully working.
• The original, unmodified video, inside a folder called "raw".

Please write "BTC640/PRO608 Asg 2 Team X" on the disk.