WidescreenVs.Standard RectangularPixelsVs.Square streaming flash tutorials

[whoisbambam]

I am hopeful somebody can help me out here, as my headache is overwhelming.

We are creating streaming video tutorials with swf progressive download, at 800X600 and 1024X768 resolution, standard computer monitor resolutions.

We are also using standard definition camcorder video (i guess 720X480) and that seems to look fine at 640X480 computer video. Our player is set to 800X600, so when it plays the 640X480 it just has black all around the edges, which is fine, and then fills up when it pulls the 800X600 or 1024X768 screencast computer video tutorial.

We have not really had to do any conversions with resolution, or deal with the very wide rectangular pixels of widescreen video.

But now we are using the sony hdr-s12 1920X1080 high-def camcorder to shoot video of the authors.

And now we are considering producing this video in flash (flv) widescreen format (16:9).

We also want to shoot the screencast computer video tutorials in widescreen format.


And here is where all the problems begin.
1. I can not figure out what resolution to shoot the computer screencasts at to avoid any distortion (what computer monitor resolution options do i have?)
2. Is there an easy way I can plug the numbers in to try to calculate the best proportions? I hear that computer monitors use square pixels, and video is rectangular pixels, and even moreso with widescreen.
3. Will the video look good on both people with the standard 4:3 monitors and the 16:10 widescreen monitors or is this not a factor at all, as they are both square pixels?

Ok, I think this is enough information to illustrate my problem. I need a way to use widescreen in both camcorder video and computer screencast video to produce video tutorials that appear fine in both standard computer monitors and widescreen monitor resolutions, and I need a way to calculate this mathematically.

When doing the computer screencast videos, in all cases I must at least 'see' the same information on the screen as the standard 800X600 monitor to avoid 'paging down'.

For instance, if I am doing a video tutorial on microsoft word, I want to avoid paging down excessively. the 800X600 shows me 600 pixels of height information, and the 1024X768 shows me 768 pixels high of information. I do not know how to figure out how to do this to show similar amounts of information when shooting the video.

I would also like to know all the CONS of why NOT to use widescreen technology for video tutorials. To me it seems the FLV filesizes are going to be larger (is there a way to estimate how much larger?), and it seems to me it may be a headache trying to get non-distorted clear video for both the video of the author and the screencast tutorials on both standard monitor resolutions (50% of people use 1024X768 or greater) and widescreen monitors (which i think the default is 1440X900)


Thanks for all your help on this matter. It truly seems to be a confusing matter.

In regard to the math, please try to be as clear and specific as possible, as my math skills are intermediate: basic college algebra.

Here are some common resolutions I found that may help with the replies (sorry, i added this):

List of 4:3 Monitor Resolutions
Resolution Name Aspect ratio
640x480 SVGA 4:03
800x600 SVGA 4:03
1024x768 XGA 4:03
1152x864 XGA+ 4:03
1280x960 4:03
1400x1050 SXGA+ 4:03
1600x1200 UXGA 4:03
2048x1536 QXGA 4:03
3200x2400 QUXGA 4:03
4000x3000 4:03
6400x4800 HUXGA 4:03

List of 16:9 Widescreen Resolutions
Resolution Name Aspect ratio
852x480 EDTV 16:09
1280x720 WXGA 16:09
1365x768 WXGA 16:09
1600x900 WSXGA 16:09
1920x1080 WSXGA 16:09

List of 16:10 Widescreen Resolutions
Resolution Name Aspect ratio
1440x900 WXGA+ 16:10
1680x1050 WSXGA+ 16:10
1920x1200 WSXGA+ 16:10
2560x1600 WQXGA 16:10
3840x2400 WQUXGA 16:10
7680x4800 WHUXGA 16:10







flash video:

Table 1 - 4:3 Aspect Ratio Sizes
Best (16) Better (8) Good (4)
640 x 480 608 x 456 624 x 468
576 x 432 544 x 408 592 x 444
512 x 384 480 x 360 560 x 420
448 x 336 416 x 312 528 x 396
384 x 288 352 x 264 496 x 372
320 x 240 288 x 216 464 x 348
256 x 192 224 x 168 432 x 324
192 x 144 160 x 120 400 x 300
128 x 96 368 x 276
336 x 252
304 x 228
272 x 204
240 x 180
208 x 156
176 x 132
144 x 108
112 x 84
Table 2 - 16:9 Aspect Ratio Sizes
Best (16) Better (8) Good (4)
1280 x 720 1152 x 648 1216 x 684
1024 x 576 896 x 504 1088 x 612
768 x 432 640 x 360 960 x 540
512 x 288 384 x 216 832 x 468
256 x 144 128 x 72 704 x 396
576 x 324
448 x 252
320 x 180
192 x 108

[Baldrick]

1. I would make both the video and screencast in a 16:9 square pixel resolution like 1280x720 (1280/720 = 1.7777 = 16/9), 1024x576 as in the flash video list above.
3. It will look okey on all monitors...of course with big black borders on 4:3 monitor then.

[whoisbambam]

I have a 21inch monitor here, Samsung 213T. When I set my computer resoluton to 1280X720, everything is distorted and stretched wide. I dont think I could shoot a screencast tutorial like this, cause it would look bad.

However, maybe if I had a widescreen monitor, and I could set it to 1280X720 (not sure if i can), you are saying that it will not make the text 'wide', but rather look normal?

And then when I combine the camcorder video and screencast video, I wont change anything (i thought camcorder hd was rectangular pixels, and widescreen monitor pixels is rectangular too?).....just combine them as is.......and when people with standard montiors view this (flv video 1280X720), it will not look distorted/stretched?

thank you for your time.

[Alex_ander]

Is there an easy way I can plug the numbers in to try to calculate the best proportions? I hear that computer monitors use square pixels, and video is rectangular pixels, and even more so with widescreen.

The easy way to avoid mistakes in calculations is to completely forget that useless idea of square/non square pixels, it's an imaginary thing and PAR is a secondary parameter (ignore methods using it for calculations).
Use 3 real parameters instead, which completely describe image proportions: 2 resolution numbers + displayed aspect ratio. DAR (like 4:3 or 16:9) is used in standard cases (like MPEG2 for SD DVD, DV, HDV) when this number is independent from resolution. A player takes DAR version from file header to properly resize image.
In other cases DAR coincides with the ratio of 2 resolution numbers (that's when they call it 'square pixels') and therefore is not stored with file. So if you are making an avi (or flv) file from a DV video 720x480 with DAR 4:3, resize it to e.g. 640x480, etc. for correct proportions at playback (on any type of display).

[whoisbambam]

Alex_ander,
Thank you for your reply.

But, that is not the problem. I do not have any distortion when taking SD DV at 720X480 and displaying it at 640X480 for computer playback. That has always worked fine for me, and I just considered myself lucky.

We use Camtasia Studio as the video controller, which builds a table of contents and loads videos in succession. We start with a wide video, say the 800X600 screencast tutorial (camtasia records computer screen activity at native resolution). Then, when a smaller video is encountered from the camcorder (it changed to 640X480 when imported into the camtasia project), it just puts black around the video.


But now the video is being shot in HD with that sony camcorder. So now the author wants to do all the tutorials in high definition too. But, when I change computer monitor resolution to the 1280X720 to try to match the camcorder avi dimensions, the computer monitor text is distorted (I am using a standard monitor), and recording this looks like....well, bad.


So I am trying to figure out how to 'mimic' HD on the computer screen without distorting the text. Recording the computer monitor with the camcorder is not an option.

Basically I just want everything to look ok like it now does with standard definition.......

Ideas?

Maybe I am using the wrong resolution for the computer screencast? Maybe I should just keep it at 1024X768 and it will look ok when played back?

Lastly, I am not sure if the playback will look considerably different on standard monitors and widescreen monitors. In other words, is the video just as clear (the 1280X720 flv) on standard monitors as widescreen computer monitors?

Hopefully I have provided you all with enough information to 'see' the problem i am struggling with.