Code Overlapping Tabs

CSS Overlapping Tabs

Posted in Blog,Tutorials | Dec 13 2009 | 10 Comments

Tabs are great – They’re user-friendly because they’re like the real world, and they can add a great 3D element to a design. Overlapping tabs present a special challenge to code, but with some careful planning and clever images, we’ll have some nicely interactive tabs.

We’re going to be using the “Sliding Doors” technique to make our tabs flexible, if you’ve never heard of the technique, check out the Douglas Bowman’s original article Sliding Doors of CSS over at A List Apart.

Step 1 – Photoshop

Alright, fire up Photoshop, let’s get started! Let’s start making some tabs: I’m not going to go through the step-by-step process of making the tabs in photoshop, because Collis Ta’eed describes the process in This tutorial over at PSDTuts (scroll down to step 34). If you’re feeling lazy, you can download the custom shape here.
To make the active tab, bring one of the tab layers to the top and change the colour.

Now we’re going to have to make a mess of things so we can slice it up properly. As you know, the sliding doors technique requires one small image from one side of the tab, and an extra-long image from the other side. We’re going to do this slightly differently, because we need our tabs to overlap.

We’re going to isolate two tabs and extend one of them to be larger than we need. Next, select the Slice Tool (C) and make one slice of the area where the two tabs overlap, and another of the remainder of the left tab, excluding the edge detail. Then just turn off the background and save for the web as transparent PNGs.

Next, we do the same thing with the active tab and one inactive tab, but this time we need the whole of the active tab, including the edge detail, and the overlap with the tab to its left. Make sure that the right slice is the same size as the smaller slice we made in the previous step. It may be easier to do both steps at once.

Next, hide the background and save the right-hand slice as a transparent PNG, then show the background, and save the left-hand slice as a JPEG.

Next we need some images of non-overlapping tabs to use for the first and last tabs in our navigation menu. We need these for both the active and inactive states. Save these all as transparent PNGs.

So we should have the following images, give them all descriptive names.

Step 2 – XHTML

Start with just a simple unordered list within a containing div.

01
02"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04<head>
05 <title>Overlapping tabstitle>
06 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
07 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
08head>
09<body>
10 <div class="container">
11 <ul>
12 <li><a href="#">Homea>li>
13 <li><a href="#">Abouta>li>
14 <li><a href="#">Portfolioa>li>
15 <li><a href="#">Bloga>li>
16 <li><a href="#">Contacta>li>
17 ul>
18 div>
19body>
20html>

Step 3 – CSS

In the css file, add a simple reset to simplify things, add a background colour to the body, and a width to the containing div. We’re also going to get rid of the list-style, and add a margin at the top so we can better see what We’re doing.

1body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
2 margin:0px; padding:0px; border:0px;
3}
4
5body {background: #333333;}
6
7.container {width: 960px; margin: 0 auto;}
8
9ul {margin-top: 50px; list-style: none;}

Next, float the list items into a horizontal line.

1ul li {float: left;}

Now we can add in our background images. It’s going to look really bad at first, but bear with me, we’ll fix it right away. Lets also add some font styling while we’re at it.

01ul li {
02 float: left;
03 background: url(images/inactive_right.png) no-repeat right;
04}
05
06ul li a {
07 background: url(images/inactive_left.png) no-repeat left;
08 font-size: 20px;
09 color: #716c62;
10 font-family: "Lucida Grande", helvetica, sans-serif;
11 text-decoration: none;
12}

And we’ll have something like this:

Now, we’re going to add some padding to fix up our tabs. Lets start with the list-items. I’m going to add 12px of padding to the top and bottom, but add however much you need to get the full height of your tabs. Next, add some padding to the right. The amount should be about the width of the inactive_right image.

1ul li {
2 float: left;
3 background: url(images/inactive_right.png) no-repeat right;
4 padding: 12px 59px 12px 0;
5}

Next, add the same bottom and top padding to the anchor tag items.

1ul li a {
2 background: url(images/inactive_left.png) no-repeat left;
3 font-size: 20px;
4 color: #716c62;
5 font-family: "Lucida Grande", helvetica, sans-serif;
6 text-decoration: none;
7 padding: 12px 0 12px 0;
8}

There, that looks much better:

Depending on the design of your tabs, you may want to add a bit of padding to the left and right to make things look right.

The next step is to add the alternative images to the first and last links. I’d like to be able to use the first- and last-child pseudo-classes, but our favourite 12% of web users (IE6 users) wouldn’t see them. So, lets just add classes to the first and last items in our markup.

1<ul>
2 <li class="first"><a href="#">Homea>li>
3 <li><a href="#">Abouta>li>
4 <li><a href="#">Portfolioa>li>
5 <li><a href="#">Bloga>li>
6 <li class="last"><a href="#">Contacta>li>
7ul>

And add our alternate background images. We’re also going to have to adjust the padding on the first-item tab.

1ul li.first a {background:url(images/first_inactive_left.png) no-repeat left; padding-left: 50px; }
2
3ul li.last {background: url(images/last_inactive_right.png) no-repeat right;}

Next we need to add the active states. Since we’re working with a static web page, and our links don’t go anywhere, we’re going to have our active tabs display on hover. Obviously, if you’re using this for your website, you would instead add the active styles to the active tab of each page.

1ul li:hover {background:url(images/active_right.png) no-repeat right; }
2
3ul li:hover a {background:url(images/active_left.png) no-repeat left; }

To create the effect that the active tab is above the inactive tabs, we need to add a negative margin to the left-hand image so that it overlaps the tab to its left, and then add back the same amount in padding. This part is a bit fiddly, you may have to experiment with the size of the margin. In my case, the margin is 3px wider than the 59px images that make up the right sides of the tabs.

1ul li:hover a {background:url(images/active_left.png) no-repeat left; margin-left: -62px; padding-left: 62px; }

Next we just need to add the appropriate background images for the active states of the first and last tabs. We also need to get rid of the negative margin on the first tab.

1ul li.last:hover {background:url(images/last_active_right.png) no-repeat right; }
2
3ul li.first:hover a {background: url(images/first_active_left.png) no-repeat left; margin-left: 0;}

And there we have it, some overlapping, interactive tabs!

10 Responses to “CSS Overlapping Tabs”

  1. khatrijiya
    February 7, 2010 at 10:57 pm

    Nice tutorial
    khatrijiya

    Reply
  2. Cris
    March 5, 2010 at 4:30 am

    Hi, Ive been trying this tut for afew days now but cannot get it to work right.
    I have inputed all the XHTML and CSS letter perfect but the final result gives me the problem of having the “home” tab jump the whole tab area to the right when you hover over it.

    Ive played about with the margins and padding but cannot get it to work.

    Any ideas?

    Thanks!

    Reply
    • admin
      March 11, 2010 at 12:34 pm

      Hey sorry for not replying sooner, I’ve been mad busy with school. Anyways, I wrote this tutorial a while ago, and I do remember having this problem when I first started, but I can’t really recall how I solved it… I’ll check it out when I have time. Try using firebug to check you margins and padding, it might be inheriting a rule somewhere.

      Reply
  3. Cris
    March 14, 2010 at 5:34 am

    Thanks for the reply, ill see if I can get it sorted :)

    Reply
  4. Harpreet Khera
    April 9, 2010 at 12:19 am

    Nice Tutorial… But where is the Demo… ?
    I am facing the problem in active link…
    Can anybody please help me..

    Reply
  5. bowo
    April 10, 2010 at 9:25 pm

    nice
    thnks 4 tutorial

    Reply
  6. Steven B
    June 25, 2010 at 9:13 pm

    Thanks a lot for this tutorial, worked like a charm. Would have taken me hours or even days to figure this out otherwise.

    Reply
    • admin
      June 25, 2010 at 11:13 pm

      so glad I could help other people figure this out, I can’t even remember why I needed thsi effect in the first place!

      Reply
  7. Rameesh
    January 10, 2011 at 12:34 pm

    Hi,

    Thanks for your tutorial. Can you please say how to set active tab in this?

    Reply

Trackbacks & Pingbacks

  1. CSS Overlapping Tabs – Code � la Mode « Mansurifarhan's Blog

    [...] Posted by mansurifarhan in CSS. Leave a Comment CSS Overlapping Tabs – Code � la Mode. [...]

    Reply

Code Overlapping Tabs

CSS Overlapping Tabs

Posted in Blog,Tutorials | Dec 13 2009 | 10 Comments

Tabs are great – They’re user-friendly because they’re like the real world, and they can add a great 3D element to a design. Overlapping tabs present a special challenge to code, but with some careful planning and clever images, we’ll have some nicely interactive tabs.

We’re going to be using the “Sliding Doors” technique to make our tabs flexible, if you’ve never heard of the technique, check out the Douglas Bowman’s original article Sliding Doors of CSS over at A List Apart.

Step 1 – Photoshop

Alright, fire up Photoshop, let’s get started! Let’s start making some tabs: I’m not going to go through the step-by-step process of making the tabs in photoshop, because Collis Ta’eed describes the process in This tutorial over at PSDTuts (scroll down to step 34). If you’re feeling lazy, you can download the custom shape here.
To make the active tab, bring one of the tab layers to the top and change the colour.

Now we’re going to have to make a mess of things so we can slice it up properly. As you know, the sliding doors technique requires one small image from one side of the tab, and an extra-long image from the other side. We’re going to do this slightly differently, because we need our tabs to overlap.

We’re going to isolate two tabs and extend one of them to be larger than we need. Next, select the Slice Tool (C) and make one slice of the area where the two tabs overlap, and another of the remainder of the left tab, excluding the edge detail. Then just turn off the background and save for the web as transparent PNGs.

Next, we do the same thing with the active tab and one inactive tab, but this time we need the whole of the active tab, including the edge detail, and the overlap with the tab to its left. Make sure that the right slice is the same size as the smaller slice we made in the previous step. It may be easier to do both steps at once.

Next, hide the background and save the right-hand slice as a transparent PNG, then show the background, and save the left-hand slice as a JPEG.

Next we need some images of non-overlapping tabs to use for the first and last tabs in our navigation menu. We need these for both the active and inactive states. Save these all as transparent PNGs.

So we should have the following images, give them all descriptive names.

Step 2 – XHTML

Start with just a simple unordered list within a containing div.

01
02"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04<head>
05 <title>Overlapping tabstitle>
06 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
07 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
08head>
09<body>
10 <div class="container">
11 <ul>
12 <li><a href="#">Homea>li>
13 <li><a href="#">Abouta>li>
14 <li><a href="#">Portfolioa>li>
15 <li><a href="#">Bloga>li>
16 <li><a href="#">Contacta>li>
17 ul>
18 div>
19body>
20html>

Step 3 – CSS

In the css file, add a simple reset to simplify things, add a background colour to the body, and a width to the containing div. We’re also going to get rid of the list-style, and add a margin at the top so we can better see what We’re doing.

1body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
2 margin:0px; padding:0px; border:0px;
3}
4
5body {background: #333333;}
6
7.container {width: 960px; margin: 0 auto;}
8
9ul {margin-top: 50px; list-style: none;}

Next, float the list items into a horizontal line.

1ul li {float: left;}

Now we can add in our background images. It’s going to look really bad at first, but bear with me, we’ll fix it right away. Lets also add some font styling while we’re at it.

01ul li {
02 float: left;
03 background: url(images/inactive_right.png) no-repeat right;
04}
05
06ul li a {
07 background: url(images/inactive_left.png) no-repeat left;
08 font-size: 20px;
09 color: #716c62;
10 font-family: "Lucida Grande", helvetica, sans-serif;
11 text-decoration: none;
12}

And we’ll have something like this:

Now, we’re going to add some padding to fix up our tabs. Lets start with the list-items. I’m going to add 12px of padding to the top and bottom, but add however much you need to get the full height of your tabs. Next, add some padding to the right. The amount should be about the width of the inactive_right image.

1ul li {
2 float: left;
3 background: url(images/inactive_right.png) no-repeat right;
4 padding: 12px 59px 12px 0;
5}

Next, add the same bottom and top padding to the anchor tag items.

1ul li a {
2 background: url(images/inactive_left.png) no-repeat left;
3 font-size: 20px;
4 color: #716c62;
5 font-family: "Lucida Grande", helvetica, sans-serif;
6 text-decoration: none;
7 padding: 12px 0 12px 0;
8}

There, that looks much better:

Depending on the design of your tabs, you may want to add a bit of padding to the left and right to make things look right.

The next step is to add the alternative images to the first and last links. I’d like to be able to use the first- and last-child pseudo-classes, but our favourite 12% of web users (IE6 users) wouldn’t see them. So, lets just add classes to the first and last items in our markup.

1<ul>
2 <li class="first"><a href="#">Homea>li>
3 <li><a href="#">Abouta>li>
4 <li><a href="#">Portfolioa>li>
5 <li><a href="#">Bloga>li>
6 <li class="last"><a href="#">Contacta>li>
7ul>

And add our alternate background images. We’re also going to have to adjust the padding on the first-item tab.

1ul li.first a {background:url(images/first_inactive_left.png) no-repeat left; padding-left: 50px; }
2
3ul li.last {background: url(images/last_inactive_right.png) no-repeat right;}

Next we need to add the active states. Since we’re working with a static web page, and our links don’t go anywhere, we’re going to have our active tabs display on hover. Obviously, if you’re using this for your website, you would instead add the active styles to the active tab of each page.

1ul li:hover {background:url(images/active_right.png) no-repeat right; }
2
3ul li:hover a {background:url(images/active_left.png) no-repeat left; }

To create the effect that the active tab is above the inactive tabs, we need to add a negative margin to the left-hand image so that it overlaps the tab to its left, and then add back the same amount in padding. This part is a bit fiddly, you may have to experiment with the size of the margin. In my case, the margin is 3px wider than the 59px images that make up the right sides of the tabs.

1ul li:hover a {background:url(images/active_left.png) no-repeat left; margin-left: -62px; padding-left: 62px; }

Next we just need to add the appropriate background images for the active states of the first and last tabs. We also need to get rid of the negative margin on the first tab.

1ul li.last:hover {background:url(images/last_active_right.png) no-repeat right; }
2
3ul li.first:hover a {background: url(images/first_active_left.png) no-repeat left; margin-left: 0;}

And there we have it, some overlapping, interactive tabs!

10 Responses to “CSS Overlapping Tabs”

  1. khatrijiya
    February 7, 2010 at 10:57 pm

    Nice tutorial
    khatrijiya

    Reply
  2. Cris
    March 5, 2010 at 4:30 am

    Hi, Ive been trying this tut for afew days now but cannot get it to work right.
    I have inputed all the XHTML and CSS letter perfect but the final result gives me the problem of having the “home” tab jump the whole tab area to the right when you hover over it.

    Ive played about with the margins and padding but cannot get it to work.

    Any ideas?

    Thanks!

    Reply
    • admin
      March 11, 2010 at 12:34 pm

      Hey sorry for not replying sooner, I’ve been mad busy with school. Anyways, I wrote this tutorial a while ago, and I do remember having this problem when I first started, but I can’t really recall how I solved it… I’ll check it out when I have time. Try using firebug to check you margins and padding, it might be inheriting a rule somewhere.

      Reply
  3. Cris
    March 14, 2010 at 5:34 am

    Thanks for the reply, ill see if I can get it sorted :)

    Reply
  4. Harpreet Khera
    April 9, 2010 at 12:19 am

    Nice Tutorial… But where is the Demo… ?
    I am facing the problem in active link…
    Can anybody please help me..

    Reply
  5. bowo
    April 10, 2010 at 9:25 pm

    nice
    thnks 4 tutorial

    Reply
  6. Steven B
    June 25, 2010 at 9:13 pm

    Thanks a lot for this tutorial, worked like a charm. Would have taken me hours or even days to figure this out otherwise.

    Reply
    • admin
      June 25, 2010 at 11:13 pm

      so glad I could help other people figure this out, I can’t even remember why I needed thsi effect in the first place!

      Reply
  7. Rameesh
    January 10, 2011 at 12:34 pm

    Hi,

    Thanks for your tutorial. Can you please say how to set active tab in this?

    Reply

Trackbacks & Pingbacks

  1. CSS Overlapping Tabs – Code � la Mode « Mansurifarhan's Blog

    [...] Posted by mansurifarhan in CSS. Leave a Comment CSS Overlapping Tabs – Code � la Mode. [...]

    Reply

Live Stream FMS Guide


Contents

[hide]


Use PROCASTER For Higher Quality Encoding

For higher quality encoding and the ability to specify the bitrate and other settings we recommend using Procaster.

Instructions on configuring PROCASTER can be found here


Running Flash Media Encoder On an Intel Mac Pro

To Setup your Mac Pro to run Flash Media Encoder with BootCamp:

1. Update the operating system of the Intel Mac Pro to Leopard

2. Use Boot Camp to set up a partition for the XP operating system. NOTE: Users will need a large hard drive to allow for the partition. (You should have space on your hard drive for at least a 20-gigabyte partition and 2 gigabytes of RAM)

3. Buy an XP license to run on the partitioned operating system.

4. Once the XP OS is booted, downloaded the proper drivers allowing access to your camera, and any other external devices.

5. Download Flash Media Encoder software to the XP operating system and launch the application


Acknowledgment : We would like to thank the Gannett Newspaper the Journal News (www.lohud.com) for performing the original R&D and providing the base document to this help page.


Use Procaster To Stream From World of Warcraft

With our Procaster Application, Livestream Producers can stream their game sessions easily and fluidly!


Image:ProcasterGame.png


1. To begin, download Procaster and install it onto your Windows-based system. At this time, Procaster is only compatible with Vista and XP, however, a Mac version is in development.

2. Log in with your Livestream Username and Password. Select your channel and edit your settings.

3. Start World of Warcraft. You'll see a Green Livestream Logo on the top left of the screen (or wherever configured). Press Ctrl + F1 (or configured hotkey) to begin broadcasting from within your game. The logo should then change to Red. This indicates that you are streaming.


How We Created the Livestream Premium Launch Video

The Livestream Premium Launch Video was filmed and broadcast Live from our Studio at Livestream Headquarters in New York. This guide is a step-by-step walkthrough of how you can replicate this broadcast on your own Livestream Premium Channel!

Image:ProShowcase1.jpg


Camera and Audio

We began by using a Standard Definition Panasonic DV Camcorder set to broadcast at a 16:9 aspect ratio.

Image:ProShowcase2.jpg


Livestream CEO Max Haot, was filmed in front of a green screen to showcase the features of Livestream Premium. The cameras DV Output is converted to an SVideo Output, which is then sent directly to our Chroma Key Device.

Image:ProShowcase3.jpg


Max's audio was captured by using a standard lapel microphone. The audio from the microphone was sent directly to our audio mixer, where it was adjusted and fed into a PC running Adobe Flash Media Encoder

Image:ProShowcase4.jpg

Image:ProShowcase5.jpg


Chroma Key Hardware

In order to display the Livestream Premium Feature Set in the background, we utilized Chroma Key Hardware and a green screen. We use a Reflecmedia Ultimatte DV Chroma Key device in our studio though there are a number of Chroma Key devices you can use. The background was created with Powerpoint and was controlled by a PC connected to the Chroma Key Device via SVideo. The Chroma Key Device is then connected to a PC running Adobe Flash Media Encoder through a firewire cable and recognized as the input. Please note, Chroma Key Hardware is optional and is not required to take advantage of Livestream Premium Features.

Image:ProShowcase6.jpg


Adobe Flash Media Encoder

Image:ProShowcase8.jpg

The image above shows the Adobe Flash Media Encoder video and audio settings used for the Livestream Premium Launch Video. We encoded using VP6 format while streaming at a bitrate of 700Kbps. Livestream Premium enables producers to broadcast live at bitrates up to 1.7mbps (comparable bandwidth required).

To achieve the cinema format we used the advanced FME option to set the Aspect Ratio (/aspectWidth=40/aspectHeight=17) in the FMS URL.

Set your FMS URL for Flash Media Encoder as:

rtmp://publish.livestream.com/mogulus/channelname/username=user/password=pass/isAutoLive=false/aspectWidth=40/aspectHeight=17

We configured Flash Media encoder to convert from 16:9 input from the camera/chroma key to 40:17 cinema. Please be sure to set the resolution to 720x480 (if your resolution is different you will need a different crop setting).

Use the following crop settings for 40:17 cinema: Top: 70 Bottom: 70 Left: 18 Right: 26

You can change the crop dimensions to optimize what is seen depending on your video input.

Audio

Audio options may vary, but for the Premium Showcase Broadcast we set the device to receive the incoming audio from our Audio Mixer. Set the format to Mp3, Mono, and a sample rate of 44100 Hz. The audio was broadcast at a bit rate of 80 kbps, but you may choose to lower or raise the bit rate depending on your bandwidth.


Livestream Studio Premium

Image:ProShowcase10.jpg

Finally, be sure to set your Livestream Premium Channel's video settings in the "configure channel" tab to a cinema size 40:17 aspect ratio so the player displays video in native resolution. If you are broadcasting in 16:9, be sure to select the 16:9 aspect ratio option.

Broadcast a Phone Line

We unfortunately don't provide simple live audio streaming, however one of our producers has offered the following advice for streaming a radio show with hosts in two different locations:

Behringer B-1 Mic plugged via XLR connector to a Mackie 1402 VLZ Pro Mixer. Mixer Tape Out to line in of desktop (this is for the audio stream and audio archive of the show)

Phone Calls"': We use a Comrex Stac 6 phone interface mated with 2 Vonage IP phone lines plus a transparent 877 number from Vonage. This allows our viewers to call in toll free! We use a standard handset phone that hooks into the Stac 6 handset hardware. I answer calls as the lines light up. The Stac 6 controls caller levels.

Studio cohost: We use 2 Comrex Access units. These devices connect my co-host and I together through the internet WITHOUT TYING UP A PHONE LINE! The Comrex Access connects to a static IP port in my cable modem. Even though we are 2000 miles apart, we sound like we are in the studio together. The Comrex Access utilizes low latency audio codecs so we have virtually no lag, as well as high fidelity. This is important because it enables us to send one high quality audio signal to the Livestream Studio, containing both of us, as well as our phone callers.

Livestream Studio: Next we run from the Main Out of our Mackie Console to the Line In of a laptop that is ethernet connected to my cable modem. We have a 15Mbps download, 2Mbps upload broadband connection. This sends all of our show audio to the Livestream Studio, so everyone can be heard. Finally, we connect the laptop USB out to our Mackie Channel strip, using a USB sound card. This enables viewers to hear all audio from the videos we pull from the internet and create ourselves. All we do is "un-mute" the channel whenever we run a video that originates from the Livestream Studio.

Video: I use a Canon GL1 3 CCD camera plugged into the laptop via firewire. This camera can be manually adjusted for low light performance. My co-host uses a standard high end webcam!

The end result is a program with sound quality that equals FM radio at its best.


Add Real Time Video Effects (for PC Users)

PC users can purchase WebcamMax to add videos, screens, pictures, flash and video effects to virtual or real webcam broadcasts:

  • Add real-time video effects to your live Livestream broadcasts, including fire, water, mosaic, distorting mirrors, camera zoom, do-it-yourself, and magic mask effects that move automatically with your head.
  • Substitute videos, movies, flash, desktop screen, pictures, and floating text to create “virtual” webcam feeds.
  • Record webcam videos or snapshots.
  • Inset separate video streams for a picture-in-picture (PIP) display.
  • Access more than 1800 free effects online.

Image:WebCamMax.jpg

WebcamMax is compatible with Windows 2000, XP and Vista 32-bit OS. It runs with all instant messenger programs, no matter if you have a real webcam or if you want to use the virtual webcam feature. (There’s a fast switch between virtual and real webcam.) To download Webcam Max go here.


Add Real Time Video Effects (for Mac OS X users)

CamTwist

CamTwist is Mac freeware that lets you:

  • Add real-time effects to your live video broadcasts, including RSS tickers, spotlights, halos, zooms, or countdowns.
  • Stream still images or animated gifs.
  • Stage an effect chain and preview it before pushing it live.
  • Move objects around using fine-grained controls.
  • Inset separate video streams for a picture-in-picture (PIP) display.
  • Use multiple video chat programs or multiple video screens at the same time, with easy camera selection. (Note that CamTwist does not work with iChat.)

Image:CamTwist3.png

Using CamTwist with Livestream is incredibly easy. Follow these quick steps:

1. Download and install CamTwist, you can find it here.

2. Open CamTwist. You'll see three separate sections within the application. First, select the video source you would like to stream to your Livestream Channel.

  • Webcam: Stream your traditional webcam, or add additional effects to your stream.
  • Desktop: This feature will allow you to stream your desktop to your Livestream Channel. The default setting will stream your entire desktop, but you can enable a capture area and resize the selection to stream specific areas.
  • Movie: Although Livestream allows you to mix video files in real time, you can also stream video files within CamTwist. Please note, you will only be streaming video when selecting this option.
  • Slideshow: Stream pictures to your Livestream channel by dragging them from your desktop or iPhoto.
  • Flickr: A feature similar to a Slideshow, but will broadcast your Flickr Feed.

3. Select an effect for use with your video source. Please note that this feature is optional. Double click on an effect to add it to your broadcast. One notable feature includes a Picture In Picture feature, allowing you to add a separate source to be placed within your stream.

4. Log in to your Livestream Studio. Within the "Sources" section of the "Broadcast Live" tab, you'll notice a camera drop down option.

Image:CamTwist2.png

Select the "CamTwist" video source.

5. Cue your camera and you're done! You can select and stream different sources with alternate effects in real time by changing the options within the CamTwist application.

Please note: CamTwist runs on Mac OS X 10.4 (Intel or PPC). It can be quite resource intensive, so the more CPU processing power the better. The more interesting effects also require Quartz Extreme support. (To find out if your Mac supports Quartz Extreme, go to this article.)

CamCamX

(From Wesley Clouden, Mobile Media Content Producer)

CamCamX is a 6x2 video mixer you can use to create live TV webcasts using only your Mac, iSight, pictures and movie files.

  • Virtualizes the webcam (iSight camera) in your Mac so you can use all your favorite webcam applications at the same time. CamCamX also makes non-Apple webcams iSight compatible (via emulation).
  • Works with DotMatrix, Skype, Yahoo! Messenger, PhotoBooth, QuickTime Pro, Stickam, Flash Chat-enabled web sites, iRecord, and many more...
  • Record live video mixes directly with iRecord or QuickTime Pro, or VJ live out over Yahoo Messenger, webchat or Skype.
  • Adjust the incoming camera picture for very low light environments, so you can chat in almost total darkness.
  • Spice up your webcam broadcasts by sending movie clips or still pictures.
  • Pause your camera feed when you step away.

To download CamCamX, go here.


Return to Main Page

Source: http://www.livestream.com/userguide/index.php?title=Tips