Whether hypothetical or actual, this should be used to spawn discussion and challenge your thinking. So stick around, have a drink, enjoy our thoughts and don’t forget to try the veal.

The script:

package library.effects {
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
 
	public class TextScrambler extends Sprite {
		private static const ALPHABET			:String = "abcdefghijklmnolpqrstuvwxyz";
		private static const NUMBERS			:String = "0123456789";
		private static const SYMBOLS			:String = "`¬!\"£$%^&*()_+=-[];'#./,{}~@:?><\|";
		private static var RANDOMVALUES			:String = "";
		private static var _textField			:TextField;
		private static var _targetString		:String;
		private static var _caps				:Boolean = false;
		private static var _counter				:int = 0;
		private static var _cycles				:int = 3;
		private static var _times				:int = 0;
		private static var _animationTimer		:Timer = null;
 
		public function TextScrambler():void { }
 
		// $duration = time, in seconds, for the whole un-scrambling animation
		// $cycles = how many times each character cycles through random values before finding the right one
		// $settings = characters:bool, numbers:bool, symbols:bool
 
		public static function scramble($txtField:TextField, $text:String, $duration:Number = 1, $cycles:int = 3, $settings:Object = null) {
			trace("[SCRAMBLER] Scramble: "+$text);
			_resetValues();
			_textField = $txtField;
			_targetString = $text;
			_cycles = $cycles;
			if($settings!=null) {
				if($settings.characters) { RANDOMVALUES += ALPHABET; }
				if($settings.numbers) { RANDOMVALUES += NUMBERS; }
				if($settings.symbols) { RANDOMVALUES += SYMBOLS; }
				if($settings.caps) { _caps = true }
			} else {
				RANDOMVALUES += ALPHABET+NUMBERS+SYMBOLS;
			}
			var time:Number = ($duration*1000)/_targetString.length;			// time between each character switch; ticks
			_animationTimer = new Timer(Math.round(time/_cycles), _targetString.length*_cycles);
			_animationTimer.addEventListener(TimerEvent.TIMER, _cycle);
			_animationTimer.addEventListener(TimerEvent.TIMER_COMPLETE, _end);
			_animationTimer.start();
			trace(Math.round(time/_cycles), _targetString.length*_cycles);
		}
 
		private static function _cycle($evt:TimerEvent):void {
			_times++;
			var string:String = _textField.text.substring(0,_counter); 			// keep digits already done
			if(_times%_cycles == 0) {											// time to get the right character
				string += _targetString.charAt(_counter);
				_counter++;
			}
			for(var i:int=_counter; i<_targetString.length; i++) {
				var char:String = RANDOMVALUES.charAt(Math.floor(Math.random()*RANDOMVALUES.length));
				if(_caps) { char = char.toUpperCase(); }
				string += char; 												 // add random characters for the rest of the string
			}
			_textField.text = string;
		}
 
		private static function _end($evt:TimerEvent):void {
			$evt.target.removeEventListener(TimerEvent.TIMER, _cycle);
			$evt.target.removeEventListener(TimerEvent.TIMER_COMPLETE, _end);
			_animationTimer = null;
		}
 
		private static function _resetValues():void {
			// just in case scrambler is already running - stop it and start again.
			_counter = 0;
			_times = 0;
			_caps = false;
			RANDOMVALUES = "";
			if(_animationTimer != null) {
				trace("removeTimer");
				_animationTimer.stop();
				_animationTimer.removeEventListener(TimerEvent.TIMER, _cycle);
				_animationTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, _end);
				_animationTimer = null;
			}
		}
	}
}

[See post to watch QuickTime movie]

Recording binaural sound effects



The best solution turned out to be moving a hand-held speaker with pre-recorded sound effects around Fritz to match the location and direction of the object. Now that we had that figured out, we were ready to do the final recording.



As the sound effects were played through hand-held, high-fidelity speakers, the sound designers moved the speakers to match the theoretical location and direction of the noise-making object. For example, in “Battle Royale,” the designers waved the speakers in made quick motions in the air while the speakers played “whooshing” sounds of blades being thrown. This created the illusion of three flying ninja stars barely missing your head. To record our beastly growls in “Tiger,” our sound designers ran and prowled around the binaural head while holding the speaker low to the ground. For added effect, he wore a prop on his feet to mimic the clicking of the tiger’s claws.
[See post to watch QuickTime movie]
Recording tiger sound effects



The two-day recording session took place at our soundstage in Manhattan. The voice actresses were directed to run around and interact with Fritz as if he were a real person throughout all of their movements.
[See post to watch QuickTime movie]
Voice actors interacted directly with binaural head, Fritz



Our female voice actors were required to wear high-heeled shoes to exaggerate their feminine footsteps. Their footsteps are choreographed in relation to the binaural head. In the case of “Twister” one voice actor spun around the binaural mannequin, in several nauseating takes, to make it seem like she’s caught in the tornado storm.




Choreography for Twister and Tiger (Click to enlarge)



Then separately, action sounds were recorded, e.g. “whooshing” sounds of ninja stars, glass breaking, and beastly tiger growls.



Shooting the Seduction
However, audio was only half of the equation. We created an attractive video experience to seduce the online user. After Luxurious Animals directed a one-day live action shoot with three gorgeous actresses, we were ready to start assembling the pieces of the project together.



In the final expandable rich media banners, the user is instructed to put on their headphones and click to begin the 3D holophonic experience. Three girls representing three unique scenarios – “Battle Royale,” “Tiger” and “Twister” – patiently await being selected. Once a girl is chosen, she seductively walks towards “you” as the user and places a blindfold over the entire screen. Then, the Hair Action experience really gets going.[See post to watch QuickTime movie]



Three Ads
In “Twister,” a girl tries desperately to convince the other to leave before the two are caught in the storm. Refusing to abandon the Hair Action, the other girl stays right by your ear. In an unexpected “twist” of events, you hear the cautious girl snatched by the whirling tornado. The girl left behind, having been loyal to Hair Action, knows she’s rewarded when she says, “I thought she’d never leave. Looks like I got you all to myself…”



The second scenario, “Tiger,” may actually frighten you. Before two sexy girls get a chance at some serious Hair Action, an escaped tiger breaks in, causing panic among the ladies. The animal’s movements are so clear, you’ll shudder from the low rumbles of the tiger when it comes close to sniff your hair.[See post to watch QuickTime movie]



In “Battle Royale,” two feisty women unsheathe their swords in a fight for Hair Action. You aurally witness every clash of their swords and the steps of their feet as they struggle around you in the room.
[See post to watch QuickTime movie]



Listen to the final audio:
“Twister” [See post to watch QuickTime movie]

“Tiger” [See post to watch QuickTime movie]

“Battle Royale” [See post to watch QuickTime movie]



Experience the full Flash rich media units




Credits:
Interactive and video production – Luxurious Animals
Creative Director – Garrett Nantz
Executive Producer – Robert Bengraff
Producer – Ali Baranker
Associate Producer – Lauren Erickson
Flash Programmer – Justin Schrader
Designer and Animator – Rich Brilli
Designer and Animator – Rebecca Stoehr
Designer and Animator – JB Ayers
Production Designer – Ewen Ku
Binaural and Video Director – Garrett Nantz
Director of Photography – Steve Becker
Gaffer – Marc Labbate
Key Grip – Chris Lally
Binaural Concepting – Garrett Nantz and Robert Bengraff
Binaural Sound Design and 3D Audio Techniques – Antfood

Whenever hair is involved, compositing a video is tough. Masking it out to place over a new background is a tricky job, even if the footage was shot on a green screen. Simply keying the green isn’t enough. It will inevitably take away too much of the ends of hair, leaving the chunky head looking matted down. That’s why it’s so important to keep the feathery edges and blend them with the background. Learn how in this tutorial. I’ll show you some simple tricks in After Effects to composite a “hairy” subject onto a new scene.

To follow along you will need After Effects 7, 8, CS4 or above. You’ll also need the Keylight plugin included in After Effects. I’ll be using a footage of a woman standing in a gust of wind. It was shot on a green screen, but you can apply this technique to any video with a plain background. This tutorial works best with dark hair and when there’s a strong contrast between the color and the original background.

The new background I’m inserting is an image of clouds and sky.

Footage of a woman before Keying:
[See post to watch Flash video]

1. You don’t have one yet, make a new composition with your “hairy” footage. Insert your new background below that layer.

2. Remove your subject’s background, by keying with Keylight, or creating a mask with the pen tool. You might need to rotoscope if you’re using a mask path. This key should be tight around your subject, eliminating all fuzzy areas around the edges.

Just using the Keylight screen colour eyedropper is not enough. Green screen is still visible in background and in edges.

In the Keylight settings, turn up the screen gain in order to remove more. Also, try adjusting the settings under screen matte for more control. If you click Show Channel and Color Management Settings (the icon that looks like 3 Venn diagram circles at the bottom of your composition panel) you can view your colors in black and white alpha mode to help you see what is and isn’t keyed out.

View your composition in alpha to help you key.

Keyed footage with increased gain:
[See post to watch Flash video]

Not bad, but the hair looks somewhat chunky and fake. Let’s continue.

3. Duplicate this layer and choose the bottom one. Adjust the key settings in this version and be more lenient when removing the green screen. Try lowering the screen gain and clip black in screen matte. Notice your person now has a fuzzy halo around the edges.

4. Now change this layer’s blending mode to multiply. Notice now that the fuzzy halo has mostly disappeared. Adjust the key settings again to make the edge blend into the new background.

Using multiply blending mode keeps details but helps fade feather edges into the background

5. Make the edges of your hair blend even more by adding a hue/saturation, curves, and/or levels effect. Try adjusting in levels, the channel of the particular background color of your original footage. For instance, if your subject was on a green screen, go into levels, and adjust the levers in the green channel.

Adjust the colors of the multiply footage layer to make it blend better into the background

Scrub through to make sure it looks good throughout the movie.

6. Now to make the subject blend truly convincingly onto the new background, you need to create the illusion that the surrounding light is reflecting off the person’s body. To do this, you have to add some of the background on top of the subject. Duplicate your two keyed layers and pre-compose (Layer > Pre-compose). Duplicate the background and place that layer below the new pre-comped layer. So now your layers should be:

Your layers should look like this.

7. Select the top new background layer and under track matte choose “Alpha Inverted Matte”. Now the pre-comped layer has turned off and your person has re-emerged from the obstructing background layer. Add the Effect, Matte Choker to the pre-comp layer that’s acting as the matte. Adjust the geometric softness and choke 1 and gauge what settings will make your new background wrap around your subject most naturally.

Use the Matte Choker with the alpha inverted track matte to wrap the background around your subject.

Here is a before and after comparison:
[See post to watch Flash video]

8. For the final touch add photo filters onto your two keyed out footage layers so the colors match overall to your background scene. Here is the final movie:

To do this for a still image in Photoshop, duplicate the layer and simply create the same mask using the pen tool making a tighter crop around the hair area, same as before. Then in the layer below, make another mask around the outside of the hair. Double click that layer and choose blending mode: multiply. Use adjust levels, hue/saturation, and curves to this multiply layer to blend with the top layer.

For our KissMein3D shoot we filmed our two alluring actors with the stereo camera. Each “eye” was coded to its corresponding anaglyph colors, then merged into one video. The specific anaglyphic (two color 3D effect) process we used to create the blue and amber 3D effect is a highly complicated procedure involving plutonium and space dust, and secrets of which we can’t give away. It’s pretty much voodoo magic. However, we can show you how to create the more common red/cyan anaglyph stereoscope which you can easily attain the glasses for. When following along in this tutorial, you’ll benefit most by having the more robust version of Photoshop that is Photoshop CS4 Extended that includes video editing.

Our animated graphics were created in Cinema 4D and using two cameras we exported a version for the left eye and one for the right. By positioning each camera by a small difference we simulate the interocular distance of our eyes, thereby recreating depth perception. However the difference we suggested should be your guide but may not work. Creating 3D is a trial and error process, meaning you will have to take a guess–use our settings as the first try–and go through the remaining steps in this tutorial. In the end, if your stereo image still doesn’t look 3D you’ll have to return to C4D, re-render and try again. I know…the third is a tough dimension to work with.

1. Setting up your stereo cameras
So to begin have your animation open in C4D with two cameras. The easiest way to create two cameras of slight coordinate difference is to duplicate the first camera. A common mistake in making a stereograph is to toe-in the two cameras. Your cameras need to be parallel to each other because our eyes are viewing straight onto a subject, not around an object, unless you have a concave face shaped like satellite dish. Toeing-in two cameras will result in a cross-eyed view and would compromise the 3D anaglyphic effect. Therefore, make sure it does not have a target, otherwise it will pivot around the object, toeing in.

Label one as “left” and the other as “right.”

Two parallel cameras in Cinema 4D to represent our two eyes

Selecting the “right” camera, pull the X value arrow to change the X position; the Y value should not change. The reason being, our eyes are aligned horizontally and both eyes see the same position for things on the vertical plane.

The coordinates at the bottom of the two cameras are the same except for minor difference in Z-position.

Left camera settings
Position:
X 258.8 m
Y 41 m (unchanged)
Z -90 m

Right camera settings
Position:
X 259.794 m
Y 41 m (unchanged)
Z -81.128 m

<

Like I said, this is an approximate difference that you should use as a guide. This is a good setting for this particular animation, based on its shape and how the flowers bloom out from the hat. The only way to confirm your correct position is to convert it into an anaglyph and view it with 3D glasses.

So after you set your two camera coordinates, render each camera view as separate Quicktime movie files. We rendered two versions of the one below:

2. Anaglyph-izing the videos in Photoshop Extended
Bring your two videos into Photoshop Extended as you would a normal image. When you import a video or image sequence, movie layers are indicated in the Layer panel with a small film icon.

Now, combine the two videos into one file as separate layers. The adjustments we’re making to the colors will not work on a transparent background so make sure you have a solid background–use white for now. Double click on the “right eye” layer to add a layer style. The Layer Style window will open up to the Blending Options. Under Advanced Blending style and uncheck the box for the Blue and Green channel. You should see the Preview color change to a cyan. Hit OK.

Change channels in right eye image for a cyan color

Now do the same for the “left eye” but instead, uncheck the Channel for Red. Your image should result in a pink-red tint for the left eye that I personally would describe as a light maroon.

Left eye should look red

Also, because the glasses cancel out so much color and light, adding a couple adjustment layers to brighten your video so it appears normal and not too dark. I added one Exposure adjustment layer and another Curves.

When viewing through 3D glasses, the image without adjustment layers (left) will appear too dark

3. Shifting the Plates
Now put on your red/cyan 3D glasses and view your creation. Wearing your glasses, move the position of either layer to maximize the 3D effect. This is referred to as shifting plates. In the case of a video footage that has a lot of action, you might need to change the position of one layer from time to time, since the point of focus may change. In this you will need to keyframe the position which Photoshop Extended gladly allows you to do.

This video is keyframed so that in the plates are closer together earlier in the video. As they flowers bloom “closer” to the viewer, the plates move further apart, exaggerating the 3D effect more.

Photoshop Extended comes with an “Animation” panel that is the timeline. You can keyframe your effects in the timeline using the clock and yellow diamond symbols. After Effects users will find this feature quite familiar.

You can edit video in Photoshop Extended

Here is the final amazing animation video:
[See post to watch Flash video]

Download the Cinema4D file we used for this tutorial here:
roses_files.zip