Dynamic Paper Cutouts

Posted by Lindsay Ruthven – December 14, 2009

While stop motion can be a fantastic medium, the process is too slow for many productions. Even for simple elements, like wrinkled paper, the time it takes to do things physically is often untenable; for the Microsoft PowerPivot online advertising campaign, Vectorform required lightening quick turnaround on visual elements and animation revisions, often on an hour by hour basis.

This is how the paper cutout effects were designed and generated dynamically using Adobe After Effects.

Animation with alpha

For our example video, character animation was handled in After Effects. Having broken down the script and subsequent voice acting into paragraphs, the lipsync was animated in Papagayo (see Lipsyncing with Papagayo for more on this important aspect of the high-speed workflow) and the elements were animated in individual compositions for each clip.

In other cases, the animation may be a 3D rendering, from another application, or hand drawn. The biggest concern here is that the elements must have full alpha, with no backgrounds or half-transparent portions (antialiasing is good, but there may be issues with large patches of partial transparency once we start playing with alpha boundaries).

Paper textures

Depending on the desired effect, this can take all sorts of forms. For the Microsoft PowerPivot video, a sequence of crumpled paper photos were used along with frame blending in After Effects. This was slowed down (again, using frame blending) till the desired look was found. The final paper texture animation should be the same size and length as the other comps.

Using directional R/G/B lighting when photographing the crumpled paper could make it possible to develop false geometric distortions in After Effects, gaining a little more realism in how the imagery follows the shape of the paper. This tutorial, however, only covers the use of plain-lit paper textures.

Effects

effects0 The animation and paper compositions should be added to a new comp of the same size, and an adjustment layer and plain white solid should be created.

adjustment layer

effects1 Two expression slider controls allow us to globally control the strength of the displacement effects (to be applied to the animation and white solid layers), while the drop shadow performs a very basic role; add a little bit of lighting to an otherwise flat paper effect.

animation

effects2 Because After Effects’ Displacement Map effect is unidirectional, two are applied to help give a little more depth and variation. The displacement source for each effect should be set to the paper texture layer. Option-clicking on the animation badge (the stopwatch icon) lets us add expressions to the Max Horizontal and Max Vertical displacement values.

For the first Displacement Map effect, apply this expression to both Max Horizontal and Max Vertical:

thisComp.layer("Adjustment Layer 1").effect("Displacement Slider")("Slider")

The second Displacement Map effect needs this expression applied to both Max Horizontal and Max Vertical:

thisComp.layer("Adjustment Layer 1").effect("Displacement Slider 2")("Slider")

Lastly, a Curves adjustment is added to help the colours and values pop. Adding all the shading, textures, and distortions can start to muddy and dull the animation, so curves are used throughout to brighten and enhance the imagery.

Set the layer Transparency Mode to Multiply to apply it to the underlying layers.

white solid

effects3aThis is the most complicated of the layers, with two main purposes; to expand and create the torn paper edges, and add depth to the underlying paper textures.

The Set Channels effect is important, as we use this to grab the alpha channel from the animation layer. Select layer 2 in the source layer 4 input, all the other settings can be left at their defaults.

Use Simple Choker to expand the alpha, creating the extra white space needed for the torn paper edge.

effects3b Just like the animation layer, add two Displacement Map layers with inputs set to the paper texture, and the following expressions applied to Max Horizontal and Max Vertical displacement values.

thisComp.layer("Adjustment Layer 1").effect("Displacement Slider")("Slider")
thisComp.layer("Adjustment Layer 1").effect("Displacement Slider 2")("Slider")

To finish the tearing of the paper edge, apply a Turbulent Displace effect and tune to taste. The amount, size, and complexity will all depend on the scale of the compositions and the desired style. Because the previous displacements are based on the animated paper, and the turbulence is based off of the new alpha shape, the effect will change automatically based on the strength and speed of the paper animation. Animating the evolution is possible, but typically adds far too much action and confusion.

effects3c After Effects’ Emboss is rudimentary at best, but once applied, we can add Channel Blur to soften the results into a usable effect (taking care not to blur the alpha). Matching the emboss relief value with the R/G/B channel blurs tends to work best. The direction is left at 0 degrees, giving a slightly concave appearance. This helps create the appearance of a slight page curl along the edges.

Lastly, a Curves adjustment is added to brighten up the output and improve the final composited tonality. Setting the layer transparency mode to Soft Light allows the emboss effect to adjust the underlying paper texture.

paper texture

effects4 Set the Track Matte to use the above layer’s Alpha, and the look is almost complete. In the example project, Levels were used to brighten the paper texture. This depends, of course, on the paper textures used and how dark the resulting paper crumple needs to be.

Get the Flash Player to see the wordTube Media Player.

Final Compositing

Once completed, the composition is ready to be used in the final edit. For graphics that border the edge of the composition, there may be some artifacts left over from the multiple displacements. To fix this, either increase the size of the pre-comps to slightly larger than your output, or scale up the comp in the final video to cut off edges.

Get the Flash Player to see the wordTube Media Player.

Watch the final PowerPivot video on YouTube or Vimeo to rate it or leave a comment!

Bookmark and Share
Filed Under:   Uncategorized | Leave a Comment

Vectorform Applications at the German Chamber of Commerce and Industry

Posted by Lindsay Ruthven – December 9, 2009

News from Vectorform Germany. “Neue Arbeiten” (“new kinds of work”) was the event theme of the IHK and Microsoft Event in Bochum. At this event there was a presentation of the MS Surface and the 24’’ and a 46’’ Multi-touch Citron Displays. The special focus of this event was how modern ways of cooperation and communication can sustainably change companies. Vectorform provided various solutions out of different market segments on MS Surface and the Multi-touch displays and revealed the future potentials that lie within the use of Windows 7 and Multi-touch applications.

 IHK BOCHUM MICROSOFT ACHIM BERGER

Dipl.-Kfm. Gerd Pieper, President IHK Bochum, Achim Berg CEO Microsoft Germany
Tillmann Neinhaus, General ManagerIHK Bochum (from left to right)

 IHK BOCHUM MICROSOFT ACHIM BERGER

Achim Berg CEO Microsoft Germany, Dipl.-Kfm. Gerd Pieper, President IHK Bochum, Tillmann Neinhaus, General ManagerIHK Bochum (from left to right)

Bookmark and Share

Lipsyncing with Papagayo

Posted by Lindsay Ruthven – December 7, 2009

Using freely available tools, lipsyncing a character in Adobe After Effects doesn’t have to be a pain. Papagayo is an open source app for breaking a script down into phonemes and syncing the pieces to an audio track, while LipSync is an OS X dashboard widget that helps translate the resulting moho switch files into After Effects keyframes.

The workflow was developed at Vectorform as part of the production pipeline for Microsoft’s PowerPivot online advertising campaign (to see how the torn effects were created, check out Dynamic Paper Cutouts).

Composition Setup

Papagayo uses the Preston-Blair phoneme set, so we’ll need to set up a pre-comp in After Effects with a single phoneme each frame, with (at minimum) the following, and in this order:

AI, E, FV, L, MBP, O, U, WQ, etc, rest

phonemes-happy

For the Microsoft PowerPivot project, a separate pre-comp was created for both happy and sad faces, and the comps switched out depending on the desired mood. However, the details are entirely up to you; a more extensive comp with a phoneme at every second and mood variations on every frame would also work, though it would require a frame offset setup to control the mouth expression. Fairly easy with basic knowledge of expressions, but not covered by this tutorial.

Audio prep

soundtrackpro quicktimeexport

The final audio edit for this project was split into paragraphic chunks to make syncing easier. It’s all about breaking the process down into manageable pieces. Each piece was exported as it’s own audio file, and compressed using Quicktime Pro into a .wav file using LinearPCM set to output high quality stereo. Mono should work as well (some lipsync applications such as Yolo and JLipSync can work better with Mono), so it’s up to your preference.

Play audio clip » Play

Lipsync

papagayo1

Open up Papagayo and import the .wav audio clip. In OS X, there’s a bug with the Frames Per Second input field – you can’t type numerals. To get around this, open up TextEdit and type your desired fps, copy it to the clipboard, then back in Papgayo, paste it into the field using command+v. It’s important to do this before you start editing phoneme timing, as changing the value will completely reset script pieces to the default positions. If you have trouble with Papagayo not recognizing the correct length of your audio (for example, preventing script pieces from being dragged to the end of the audio), try pasting in a different FPS value, then the correct one again. This should force the app to refresh, correcting the audio settings.

papagayo2

In the Spoken Text field, enter the script. It’ll be helpful to enter a carriage return at natural breaks or pauses, as Papagayo will treat each line as an individual chunk of text. Numerals should be spelled out, otherwise the automatic phoneme dictionary will fail to recognize them.

“It all started with my second cup of coffee. Eh, no, my 3rd… it’d been a long Friday, when an email from the boss attacked.”

Should be written as:

“It all started with my second cup of coffee
Eh, no, my third
it’d been a long Friday
when an email from the boss attacked”

papagayo3

Once you have the script ready to go, select a language from the several listed under Phonetic Breakdown to automatically generate phonemes. If the phoneme translation engine encounters anything it doesn’t recognize, you’ll be prompted to enter your own phonetical spelling. It helps to be familiar with the Preston-Blair phoneme set and the specific mouth shapes your final animation will use, as phoneme shapes rarely line up with how a word is spelled or pronounced, but how an individual speaker says it.

papagayo4

Starting with the last phrase block, line up the beginning and end with the correct section of audio. You can either press the play button (which starts from the beginning), or scrub through manually (clicking anywhere in the audio window and dragging back and forth). Give yourself enough frames at the start and end of each clip so as to allow for a little wiggle room. Rearranging the sentences later will undo any fine-tuning you’ve completed in the word and phoneme levels, so getting each level worked out in the proper order helps prevent lost work.

papagayo5

Once the sentence fragments are timed correctly, go through and align each word. You can double click any block to play the corresponding audio, and right click any word to edit the phonemes currently used. With judicious use of phonemes, you may not even have to manually adjust them, but inevitably you’ll need to tweak a few phoneme positions as well.

Typically, a phoneme should start a frame before the corresponding sound. Punctuated phonemes such as “P” or “B” can often start several frames or more ahead of the sound, and consonants sometimes need an extra frame or two to register with the viewer (flashing a consonant for just one, maybe two frames is often not enough time). An “M” sound may seem insignificant, but the pent up pressure is essential to selling the vocal animation. Depending on the recorded audio and your character illustrations, “AI” and “E” may need to be interchanged.

For the example audio, Papagayo inserts a lot of “AI” phoneme shapes where “E” would be more appropriate, and vice-versa. Edit the phonemes to match what the audio sounds like, not what the words actually are.

That said, there are innumerable articles, books, classes, and degrees in animation, and I am no character animator myself. This is a starting point, but hardly an introduction to the rich art of animation!

Once the alignment is polished and the preview animation in Papagayo meets satisfaction, you can export the data as a Moho switch file (.dat). This essentially defines a simple list of frames and the associated phoneme shape changes.

Conversion

lipsync

Using the Lipsync widget for OS X, this is the easiest part. The defaults are set up for Lightwave, so once installed, change the format to AE frames (or seconds, depending on the pre-comp setup), and you’re ready to go.

To convert, simply click and start dragging the .dat lipsync file while opening Dashboard (usually the f12 or f4 key). Drag it into the “drop MOHO file here” zone and let go. It’ll be automatically converted into Time Remap keyframes, and the results both copied to your clipboard and saved to your hard drive (placed alongside the original .dat file).

Final output

timeremap1timeremap2timeremap3

Back in Adobe After Effects, open the main animation comp, move the playhead to the begining of the comp (or more specifically, to the beginning of the audio clip) and select the phoneme pre-comp. Paste the keyframes copied by LipSync (command+v), and Time Remap will automatically be applied to the layer. Select all of the keyframes (easiest way to do that is to click the Time Remap title), right-click, and choose Toggle Hold Keyframe, otherwise the phoneme shapes will bounce back and forth, instead of holding till the next one is set.

Make sure it’s in sync with the audio, and you should be all done. Here’s the final video, completed by Vectorform for the Microsoft PowerPivot online advertising campaign.

Get the Flash Player to see the wordTube Media Player.

Watch the final PowerPivot video on YouTube or Vimeo to rate it or leave a comment!

Bookmark and Share
Filed Under:   Uncategorized | Leave a Comment

WrapItApp

Posted by Lindsay Ruthven – November 18, 2009

WrapItApp is a simple to use, yet intuitive application, teaching you how to gift wrap any sized box, tie a 1 loop bow and 3 loop bow. You have the option of selecting a box from a list of the most common sizes, or using your iPhone or iPod Touch device to obtain custom box measurements. If you have the perfect gift in the not-so-perfect box, WrapItApp makes measuring custom box sizes easy! Simply measure a box using your iPhone or iPod Touch device, nothing additional is required. Once a box has been selected or measured, WrapItApp estimates how much ribbon and wrapping material will be needed and shows step-by-step instructions that will get you wrapping like a pro!

WrapItApp Allows you to:

Beautiful packages are just a few easy-to-follow steps away with WrapItApp. It is presented by Vectorform, innovative leaders in multi-touch solutions and Lisa’s Gift Wrappers, experts in creative packaging concepts and professional gift wrapping.

Please stay tuned for future updates.
WrapItApp is now available on the iTunes App Store.

screen01

screen02

screen03

screen04

screen06

 

Bookmark and Share

Chris Pullman Lectures at CCS in Detroit

Posted by Lindsay Ruthven – September 29, 2009

One of Vectorform’s new designers, Ryan Cady who is Third Thursday Chair of AIGA Detroit, attended Chirs Pullman’s lecture at CCS in Detroit. Mr. Pullman gave his lecture on his vast history as a Designer, his process from being a History major in undergrad at Princeton, and his ultimate admission to getting his MFA from Yale.

After graduating from Yale in 1966, Chris Pullman began teaching at Yale and working in his own practice with his wife before being asked to become the head of design at WGBH in Boston.  The station had just been rebranded, and this was at a time when public television was still in its infancy stages and was not as well known as it is today.  He worked at WGBH for over 30 years helping to mold the station by creating promotions, print, motion graphics for shows such as Nova and Frontline, some of the earliest interactive content for the web (Prodigy!), as well heading up the design group for WGBH’s new HQ in Boston.

He also created the 2mobile to promote the station, which is pretty awesome.

1974 

More info on him can be found here:

http://observatory.designobserver.com/entry.html?entry=7667

http://www.aiga.org/content.cfm/medalist-chrispullman

Bookmark and Share

Sliverlight 3 Launch

Posted by Lindsay Ruthven – September 29, 2009

News from VF Hyderabad…This summer the Microsoft Developer and Platform Evangelism (DPE) team invited Vectorform to take part in a Silverlight 3 Launch held at the Microsoft facility in Bangalore, India. Kicking it off with a Press Release, MS introduced Silverlight 3, followed by a technical demonstration and finally, a brief of the Nano and IPL projects Vectorform worked on.

The technical demonstration of the capabilities of Silverlight 3 was given to an 80 member audience made up of tech company representatives from across India. Everyone was thrilled to view the latest offerings in Silverlight 3, especially those which increase employee productivity. Wrapping up the event, Vectorform was given the floor to talk about our expertise in Silverlight, the technical approach we had taken to address business challenges of the Nano and IPL projects and how we chalked out solutions for two big enterprises in a very short time (is there any other timeline?).

That’s the best from VF Hyderabad. More soon!

md-02_chunk_1_0002 md-02_chunk_2_0005md-02_chunk_4_0010 md-03_chunk_3-001_0005

Bookmark and Share
Filed Under:   Uncategorized | Leave a Comment

“Extra” Praise for a Job Well Done

Posted by Vectorform – August 6, 2009

America’s top celebrity news and gossip show just got a little juicier. Vectorform recently collaborated with ExtraTV to develop a unique application for the Microsoft Surface. A simple and fun interface was created to show host Mario Lopez how to interact with videos and images using multi-touch gestures and a natural user interface. The application supports telestration- in case Mario wants to draw a fake moustache on Paris Hilton! Celebrity content can be sent to the Surface via remote access for on-the-fly updates. Best of all, Vectorform’s one and only Alison Weber had the opportunity to sit down with Mario Lopez and show him how to use the application. Mario was a joy to work with and a very quick learner on the new technology.  As a result of our efforts, ExtraTV has extended its glowing praise on a job well done to Vectorform.

Visit ExtraTV Online and Learn More

Bookmark and Share
Filed Under:   Surface | Leave a Comment

Vectorform on Microsoft’s Silverlight Website

Posted by Blair Munro – August 4, 2009

Vectorform was pleasantly surprised to discover that its Silverlight project for the new Tata Motors’ Nano is currently featured on Microsoft’s Silverlight website! The profile even features a video of Vectorform’s Hyderabad President explaining the concept of the custom made application. Vectorform was presented with the task of providing customers the opportunity to create their own Nano vehicle in 450 dealerships across India, as well as on the web, as an alternative to having the car physically present. Vectorform is honored that Microsoft decided to share the project with the world!

Learn more about the Tata Nano Experience here.

Bookmark and Share
Filed Under:   Uncategorized | Leave a Comment

Nano Experience

Posted by Blair Munro – August 4, 2009

nano-pic

Vectorform called upon its years of experience in UI design and development to create an exciting, intense, yet intuitive Silverlight experience for Tata Motors. This experience had to allow users to learn anything and everything about the new Tata Nano. Because the car could not physically be in the dealerships, the application had to give an extremely accurate and detailed depiction of the car.

To accomplish this, Vectorform developed an external 360 view of the car, highlighting key features and unique selling points. Also included in the application was a comprehensive photo and video Media Gallery, a Deep Zoom experience to view the Brochure, and an Application Form and Application Process. In addition, the application came equipped with an Auto Play mode, where the application would automatically showcase various photos and videos without the requirement of human intervention.

This experience was delivered to run In-Store at all dealer outlets and also on their website. You can visit http://experience.tatanano.com

Bookmark and Share
Filed Under:   Uncategorized | 1 Comment

Microsoft Surface Goes Global, Powered By Vectorform

Posted by Blair Munro – July 23, 2009

TV9, ASSOCIATED BROADCASTING COMPANY PVT. LTD.

It is no surprise Vectorform designed and developed the first Microsoft Surface application to debut in India. TV9 is the flagship station for Indian media-giant Associated Broadcasting Company Pvt Ltd (ABCL), and Vectorform’s multi-touch application took viewers by storm when used to illustrate the 2009 Election of the Indian Parliament. Live from Andhra Pradesh, ABCL CEO and TV9 anchor Ravi Prakash made television history with his innovative presentation of the election coverage.

During the 2009 Parliamentary Elections, ABCL wanted to see TV9 reinforce its status as a market-leader in innovative news coverage, and to boost viewership by providing the most engaging on-air coverage of election material.

Vectorform designed and developed a set of applications for the Microsoft Surface, which allowed on-air illustrations of election status and past election history. The Microsoft Surface debuted in the United States in 2008, and the TV9 deployment represents the first use of the platform in India.

To be a success, the application suite had to accommodate the complex working of the Indian electoral system. Like the United States, India has a federal form of government, however, the central government in India has greater power over its states, and its central government is patterned after the British parliamentary system. The core components of the suite focused on Andhra Pradesh, and other applications highlighted local and federal election results.

Additionally, Vectorform created a web-based content management application to enable off-air administrators to feed election data into the application suite as the results were tallied.

On Saturday, May 16, 2009, Ravi Prakash demonstrated the application suite, using hand-gestures and real-world objects to interact with both live and historical data surrounding the Indian General Elections. The presentation quickly gained the attention of viewers and press-outlets around world.

The primary objective of the project, from the client’s perspective, was to reinforce their position as trendsetters, vis-à-vis use of latest technology complimented by innovative ways of presenting information; thereby propelling TV9 higher up on the Indian electronic media ladder as pioneers- in terms of content, capability and innovation. Last but not the least, TV9’s objective for all projects is to increase TRPs (Television Rating Points), which are primary incentives for promoters & sponsors to align with TV9. The television program  featuring  the election coverage on the Surface did just that – made a big impact on a landmark day in Indian politics -when over hundreds of thousands of living rooms across the country were glued to the television set.

Bookmark and Share
Filed Under:   Uncategorized | Leave a Comment