THE CHALLENGE:

Take the current Tostitos broadcast spot and bring it to life online by having the salsa dancer jump out of the unit, dance around the website tearing up content, then return to the unit for a seamless transition back into the video spot as it comes to a close.

THE SOLUTION:

Here is a quick look at the production process for this unit and the steps taken for completion:

Step 1: Preparing The Video Spot For Our 300x250 Area

First, we had to edit the current tv spot for a few reasons:
1. We needed to cut the time down to meet media specifications.
2. We needed the spot resized to our unexpanded media dimensions of 300x250 px.
3. We needed to remove the salsa dancer from a few seconds of the video so she could jump out of the spot and dance around the web page. To accomplish this, we grabbed a still frame from the spot and extended it's timeline to hold until we brought the dancer back into the video at the precise time. Simply using a still frame was a little jarring in relation to all the other motion going on so we brought a little life back to the still by adding a waterfall, pollen and dust particles as well as a subtle zoom effect to the entire frame.


Step 2: Preparing The Breakout Elements for Use Outside the 300x250 Area

Since we were given few assets from the original spot, most of the elements used outside the actual video had to be created by us.

Elements we where given:
1. The flattened final tv spot. This was the main flat footage we started with.
2. An image sequence of the salsa dancer spinning in place. We edited and animated this sequence to become our salsa dancer who jumps out of the media unit and dances around the website.
3. An image sequence of the garlic that flies out at the screen. We extended elements from this sequence so the garlic emerged from the 300x250 spot and over the site.

Elements we needed to create:
1. The vines - The vines as well as several of the vine elements (red tomato flowers, leaves, and all of the  jalapeños) were modeled and animated using Cinema 4D. In the final composition, we also added extra leaves and flowers.
2. The 3 extra pieces of garlic that bounce off the screen - Although we had a png sequence of the garlic flying out at the user, we couldn't reuse any of that footage to create pieces that would bounce off the users screen, so we modeled and animated a few pieces in Cinema 4D.
3. Small explosions of tomato chunks and jalapeño slices. - For many of the smaller burst of veggies that pop out of the 300x250 video area, we were able to get away with using a particle generator and stills rotoscoped from the original footage.
4. The website text that gets sliced by the dancer. - This was created in Cinema 4D as well so it would take on a more dimensional look when it was sliced.
5. The website main vegetable content (large tomatoes, onion and jalapeños on the cutting board) that get sliced by the dancer. - This along with the vines were the most time consuming elements we had to create. The slice up of this vegetable content was done in Cinema 4D using several particle generators and randomized vegetable particles. Gravity and Attractor effectors were used for the explosion and tornado effect simulations.

Here are a few screen shots from the 3D in progress...

Vines:

Tomato Explosion:

Peppers:

Text Explosion:

Step 3: Compositing The Elements

Once all the 3D elements were ready they were edited, color corrected, animated and composited together using After Effects. The final export, which included our newly edited video spot, was a semi-transparent video piece that would play in a rich media unit over a website. For more After Effects tips you can check out previous posts: AFTER EFFECTS + FLASH Part 1, and AFTER EFFECTS + FLASH PART 2.

Step 4: Creating The Flash Units

As our final video composite was the real focus of the units, the flash units themselves were fairly simple in terms of their functionality. The key was integrating the video in a clean way and using Flash elements to hide what would have been problem areas...mainly some of the artifact issues that occur when using compressed video.

For example, text never seems to stay as clean or sharp when it's in video. We needed the video to display the 3D chop up effect but we also wanted the text to stay nice and crisp until it was chopped up. The solution was to have the initial text created in Flash up to the point of the text explosion where we would then trigger a flv cue point which hides the flash text. We did something similar with the cutting board graphic as the image was receiving quite a few artifacts after the veggies were gone which was looking nasty. So, swapping the video with a still frame in Flash solved that problem.

Step 5: Finalizing And Publishing

After a few rounds of finishing touches, client reviews and the Eyewonder QA process, the units were ready to be published and deployed.