Thursday, September 1, 2011

AFTER EFFECTS - How to speed up rendering?

How to speed up rendering?


Step 1:

Include in the program settings option "Disk Cache". (Edit -
Preferences - Media & Disk Cache. Check the box "Enable". Select the
disk on which a lot of free space. Set Maximum Disk Cache Size.


Step 2:

Go to the tab "Memory & Multiprocessing". Check the box next to
"Render Multiple Frames Simultaneously, and move the slider until the
end to mark Faster Rendring.


Step 3:

Restart After Effects.


Step 4:

Before rendering close the preview window.


Step 5:

Switch off additional programs such as an antivirus and firewall.
At that time while there is a process rendering, it is desirable
not to use the computer.

Monday, August 29, 2011

28 Staple Blogs - Motion Graphics Artists

http://www.gomediazine.com/design-articles/web-roundup/28-staple-blogs-motion-graphic-artists/


1. Video Copilot

Everyone who works within After Effects has heard of Andrew Kramer, so it is no surprise that he is at the top of this list. Andrew is a god when it comes to cutting edge tutorials in motion graphics and visual effects. His Sure Target preset has revolutionized the way you work with 3D cameras and the Demon Face and Car Hit tutorials have swept away novice After Effects artists and spun them into a frenzy of wanting to make cool videos. The Video Copilot blog and forums are a huge hit, and the products the website and team provide continue to be groundbreaking. Make sure you take a peak if you haven’t already. Get updates via twitter on VCP stuff by following @videocopilot.

2. GreyScaleGorilla

Nick Campbell aka “The Gorilla” runs GreyScaleGorilla.com, a blog focusing on Nick’s life as a Motion Designer at Digital Kitchen in Chicago. Nick tries to get a GSGcast (what he calls his video blogs) out every day… and this guy couldn’t be more full of useful information. Expelling knowledge of After Effects and Cinema 4D, he has videos on “How to be Creative and Get Paid” to tutorials, to just random stories and projects he has done in the past. His new 5 Second Weekly Projects have become a huge hit in the mograph community prompting everyone to get out there and “make cool shit!” as Nick puts it. This is another everyday stop for me, as it should be for you. You can follow Nick’s twitter @nickvegas.

3. AE Tuts

AEtuts+ launched a couple of months ago, but it is already gaining steam very fast. With over 40 tutorials already published, they are becoming a very popular site with lots of great information. Part of the Envato Network and a sister site to the ever popular PSDtuts+, Nettuts+, Vectortuts+ and Audiotuts+, you know things are gonna be great. They have articles, tutorials, presets, freebies and a bunch of other stuff as well. Best thing about this site, is it is community-based, so you can write articles or publish a tutorial yourself! Run by Lloyd Alvarez of AEscripts.com (further down) you can follow their twitter @AEtuts.

4. Video Hive

The Hive is the official blog of VideoHive.net, the online marketplace for motion design elements, .AEP projects and stock footage. The Hive is run by Michael Capitelli, and it is full of tons of techniques for making better work. When I say that, I mean that whether you shoot still photography, video, work only in After Effects as a motion designer, or composite as a VFX artist, there is something on this blog for you. Make sure you follow their twitter @VideoHive.

5. AE Portal News

AE Portal News is your best bet to find the most updated news in the After Effects world, hand down. Run by Rich Young, this blog has daily updates of sales on plugins, when AE tutorials are posted, and extensive insights to all kinds of different aspects of After Effects, not to mention there is a gigantic humungo link list to anything and everything After Effects in the sidebar. With over 4 years of information all archived, there is usually an answer to a question posted somewhere in the depths of this blog.

6. Mograph.net

Mograph.net is a great community for asking questions, posting work, and just hanging out with fellow mographers. Attracting the professional community from around the world, you can always count on getting a professional answer or insight to something that you post. Most of the people on the board are industry professionals, and know their stuff. I highly recommend this site if you have questions, looking for feedback on a work in progress, or just want to have an intelligent converstion.

7. ProLost

Stu Maschwitz, owner of the late VFX compay, The Orphanage, has worked on a ton of movies including The Spirit, Pirates of the Caribbean, and Sin City, as well as many others. Well known by many in the mograph/vfx community, Stu aka @5tu on twitter, and his blog ProLost has become a great resource for production tips, photography insight, and lately he has taken a lot of interest to the HD video aspects of the new DSLR cameras. Even though his blog isn’t updated daily, I highly recommend following @5tu on twitter for his daily endeavors and awesome tweets on production tips and the like.

8. The Hypa Blog

The Hypa Blog, run by Tim Clapham, Cinema 4D professor at FXphd.com and the upcoming host of the new Making It Look Great 6 training dvd has a great blog about Cinema 4D and its uses with motion graphics design. Cinema 4D and After Effects go so well together, and this is a great blog for tips and tricks within Cinema 4D. With over 11 years design experience, Tim and Hypa.tv have a lot to bring to the table. You can follow Tim on twitter @hypatim.

9. Motion Works

Speaking of Making It Look Great, the man behind the series, John Dickinson has a killer site as well, with a fresh redesign a couple months ago. Motionworks, is one of those sites I have followed since I started in motion graphics, and he continues to impress me with what he puts out. Working as a motion designer at Foxtel Box Office in Australia, JD demonstrates techniques, tips and tutorials that we all can benefit from. John’s work is great, and is always getting better. His niche of work is mostly of what a lot people are looking to learn from… motion design for advertising and television. JD’s is a must bookmark site, you can also follow him on twitter @John_Dickinson.

10. AE Scripts

Llyody Alvarez, as I mentioned before is the editor for AEtuts+, but before that was even thought of, he created AEscripts.com. His site, a renowned location to find cutting edge scripts for After Effects such as Magnum the Edit Detector or the amazing BG Renderer, has become one of the first places you think of… hence the name, AEscripts.com. You can also find links to other AE and scripts site, as well as possibly buy Lloyd a beer if you are feeling generous! You can follow Lloyd and AEscripts.com on twitter @aescripts.

11. Motion Script

If you haven’t messed around with scripts in your workflow, you are really missing out. They are a huge timesaver. Here is a another site called Motionscript.com, run by Dan Ebberts, which provides scripts and expressions as well as lots of documentation on how to create your own. Scripting is hard work, but there is some amazing stuff that you can make. This is a must-see site if you are looking to get into expressions and scripting.

12. AEnhancers.com

Alright, bear with me, this is the last scripting resource! I know a lot of people shy away from them, but they really are a great add-in to After Effects. The AEnhancers site is in forum-form, and has library, discussions, requests, and tutorials on how to use and how to make scripts. This site also has an expressions library as well so make sure you check that out as well.

13. Graymachine

Harry Frank is a pro with Trapcode Particular, and his site, Graymachine, really displays that. Recently featured in the User Gallery for Trapcode Particular, Harry’s site continues to be a great resource for downloads for Trapcode Form, Particular, and useful articles on working in the business. Undergoing its third redesign, and Harry relocating to Los Angelas to work for Truxton Pictures, we can expect some great things from him in the coming months. You can follow Harry on twitter @graymachine.

14. Base80

Base80 is a pretty cool blog with a nice table of contents. Its almost like a never ending book of techniques for Cinema 4D. There are a ton of quick tricks and tips for working faster, smarter, and more efficiently within Cinema 4D and Xpresso. You can follow Base80.com on twitter @base80.

15. Creative Cow

Did you really think that the Creative COW wouldn’t make this list? It is possibly one of the biggest sources of information on the internet to deal with any motion graphics, graphic design or video platform. If you are one of the few that haven’t wandered the COW, they have a multitude of tutorials on any program you could want along with 11 podcasts, a magazine (online and print), training DVDs, and a good 100 or so forums crawling with professionals. This is one community to bookmark, because if you can’t find an answer to a question anywhere else, this is where to come to speak to the gods.

16. MaxAfter

When I first saw MaxAfter.com, I thought… oh a Video Copilot copycat, but holy cow was I wrong. Shaoib Khan produces some very cool looking animations like the earth from the movie “Knowing” and the bullet from the movie “Wanted“. Shaoib uses mostly After effects and 3Ds Max (see where he got the name?) to create most of his tutorials, but mainly After Effects.

17. Maltaannon

Maltaannon aka Jerzy Drozda Jr. has a ton of great tutorials on his site as well as what he likes to call CE’s or CustomEffects. They are like plugins, but coded differently. Anyways, he just came out with CETextRamp, which creates color ramps at the top and bottom of your text, no matter if you resize or whatever. Point is, Maltaannon is full of cool techniques, tools, and some cool information. He has just started another site called fineCG.com that deals in Motion Design/Visual Effects. You can follow Maltaannon on twitter @maltaannon.

18. Ninja Crayon

Ko Maruyama, who also runs Mac Animation Pro, is Ninja Crayon. This is a daily/weekly update in the world of motion graphics and visual effects. What plugins are on sale, what things are being given away in Cinema 4D land… that kind of thing. Ko also has a huge collection of 300+ After Effects tutorials he has created over the years, and that list is ever growing. He is well versed in the ways of the C4D as well, and he has some good tutorials over at his Vimeo channel. You can follow Ko Maruyama on twitter @ninjacrayon.

19. Motionographer

Possibly one of the best sites to look to for inspirational videos, Motionographer has daily updates of insanely spectacular works of video art. I like to check here every day to see what the popular post houses are cooking up, and what I can expect to see on the television when I watch my primetime. Motionographer also has articles, jobs, and forums for you to join in the discussion. To get the latest updates from Motionographer, follow them on twitter @motionographer.

20. Pro Video Coalition

I like Pro Video Coalition a lot. You know why? Because they have a sub-channel for everyone. 3D, Post Production, Motion Graphics, VFX, Audio, Cameras… the list goes on. Each channel has a seperate set of blog posts that get updated, but on the PVC mainpage, those posts are reflected throughout the entire site. PVC is community based being contributed by some of the top names in the industry.

21. The Mograph Blog

I found The Mograph Blog from a tweet about the post on Mastering The Render Queue. From there looking through the posts, I realized I had just hit a goldmine of awesome tips. Run by Chris Kelley, The Mograph Blog dabbles in and out of After Effects and Cinema 4D, with a few tutorials here and there. You can follow The Mograph Blog on twitter @themographblog.

22. Red Giant Software

If you are a mograph artist, you have probably encounted Trapcode Particular a few times or the rest of the Trapcode Arsenal… or perhaps you are more partial to Primatte Keyer Pro? Either way you roll, they are owned by Red Giant Software, and the Red Room Blog is where its at. News on Trapcode Particualr v2.0, new tutorials, and news about whats going on with the company and the plugins they develop. This is a good site to frequent every few days to see what is new or what is up and coming. You can follow Red Giant Software on twitter @redgianttweet.

23. Studio Daily

Studio Daily is a one stop shop for finding job boards, mini-sites, inspiration, tutorials, training, and lots more. They are a very up to date news resource posting reviews on software, behind the scenes reports on movies and commercials and give you a great look into the going ons of the mograph/vfx world. You can find Studio Daily on twitter @studiodaily.

24. AE Freemart

One of the best places to find free tutorials, presets, plugins or anything else you might want for After Effects is Toolfarm’s AE Freemart. The site has been around for a while, and it has accumulated a ton of free stuff over the years. You can find links to tutorials or presets on outside sites complete with descriptions on what it is. Things like Nahuel’s AutoTitles Preset or brand new video tutorials by Rob Birnholz are just a few of the many lovely gifts the AEFreemart comes bearing. You can get updates from Toolfarm as well as AEFreemart on twitter by following @toolfarm.

25. Adobe TV

If you want to go to heart of where some of the best training can be found, you are going to want to check out Adobe TV. With libraries of training on every Adobe product available, and constantly updated every day, this is one resource you will never grow old of. Online seminars that are held monthly are recorded and put up for later viewing on Adobe TV as well, as lectures and demonstrations given at live seminars. You can follow Adobe TV on twitter @AdobeTV.

26. General Specialist

Even though Jonas Hummelstrand doesn’t update his blog much, when he does, you always remember why you bookmarked him. A swedish mograph/visual effects artist, Jonas works within the full Adobe Creative Suite, as well as Cinema 4D, 3Ds Max and Maya. His blog, aptly named “General Specialist” provides a look into the mind of a person who knows his stuff in this business. He has some great posts about RED cameras, building custom camera jibs, and lots more. You can follow Jonas on twitter @hummelstrand.

27. Digital Tutors

Most people have heard of Digital Tutors’ training DVDs, but a lot of people aren’t aware of theyir library of 500+ free tutorials available online. The Daily Dose isn’t really a blog, but is updated daily with a free tutorial, technique, or tip in one of 19 software categories, plucked directly from their training DVDs. Lately they have been getting an After Effects tutorial or two in each week, and the rest are usually based on a 3D program. But we all love free, so we can’t complain!

28. VisualFXtuts

Alright, I know this may seem like a shameless plug on my part, but even if this wasn’t my site, I think it should be on this list. VisualFXtuts.com is run by me, Topher, and is a site that collects all the tutorials in the mograph and visual effects blogosphere and posts them to one direct location. Checking around 200 sites, almost daily, you can just bookmark here, and link directly to where the tutorials are located. Also posted are presets, free stock footage, .AEP and 3D project files, textures, and pretty much anything else you could want. You can follow VisualFXtuts.com on twitter @visualfxtuts.


Friday, August 19, 2011

Cinema 4D, AE tuts

tutorials
http://greyscalegorilla.com/blog/

Cinema 4D
AE

...my bro told me about this...

match moving, tracking software

export with track data for the shot, then place the data for the scene

Thursday, August 18, 2011

3ds & photoshop - texturing

Texturing

24 Sep 2010

TexturingThis is the third tutorial in my four part series dealing with character animation. These tutorials are targeted to beginners wanting to learn the basics of organic modeling, unwrapping, texturing, rigging, and creating a cute 3d monster. In this third part we’re dealing with texturing. You’ll learn how to create and apply textures with Viewport Canvas. I’ll do my best to keep things as simple as possible. I’m using 3ds Max 2011 and Photoshop.


http://www.polygonblog.com/texturing/


How to UVW Map and Texture - 3ds Max Part 1/2


http://www.photoshoproadmap.com/Photoshop-videos/watch/245252781


Create and edit textures for 3D models (Photoshop Extended)


http://help.adobe.com/en_US/Photoshop/11.0/WS0BA787A7-E4AC-4183-8AB7-55440C51F95B.html

3D Materials settings (Photoshop Extended)


http://help.adobe.com/en_US/Photoshop/11.0/WS2D467BBF-7486-41ae-8028-0E159578AD88.html


Wednesday, August 17, 2011

3d to AE (comments)

Cinema 4D -- into After Effects – Day 2 (How to Export 3d Camera Data)

http://cg.tutsplus.com/tutorials/maxon-cinema-4d/how-to-export-3d-camera-data-from-cinema-4d-into-after-effects-day-2/


The key to good project management is workflow, and also to ensure that all your pieces and parts will all come together in the final assembly. Design is no different.

This tutorial deals with some more advanced compositing techniques, and hopefully after watching the first tutorial, you’ll have a good grasp of the basics and be ready to dive into this 3 video tutorial featuring advanced compositing using tags, multi-pass renders, and expressions in After Effects.

This tutorial is Day 2 in a series – Go to Day 1

Before you hit ‘play’ there are a few points I want to make clear:

  • Yes, it’s a monster (an hour long). But some of this stuff is very complicated, and I want to make sure if you’ve never even thought of this before, you’ll still grasp it. Plus, if you think following it is hard, imagine recording this thing a total of five times before you’re actually happy with it.
  • Apparently I didn’t pay much attention to my note. You’ll see (sorry f1a5h84ck, I tried).
  • I’m not trying to make things pretty, I’m trying to get you guys to learn…which is why this will be some of the ugliest work you’ve ever done, but hopefully using techniques that are new to you, and will stick.
  • Once again, the comments are to help me help you. Any tips, suggestions, questions, etc, throw them right there. I read them as often as I can, and respond when I’m able, so if you need anything specific, you can put it right there.
  • One thing I’m considering is to do an entire project from beginning to end – for example, a ‘show open’ for CGTuts+ screen casts. It would take you from beginning to end, giving some of you a taste of what it means to do this professionally. If that’s something that sounds interesting, let me know. It would definitely be multi-part.

    Final Effect Preview


    First- get your 3d into photoshop cs4 or above

    3D object layers from Photoshop

    http://help.adobe.com/en_US/AfterEffects/9.0/WS510B8F17-8644-43ce-977F-96784840A64B.html

    For a video tutorial about using 3D object layers from Photoshop in After Effects, go to the Adobe website: www.adobe.com/go/lrvid4113_xp.

    Adobe Photoshop Extended can import and manipulate 3D models (3D objects) in several popular formats, including the following:

    • .3ds (3ds Max)

    • .dae (Digital Asset Exchange, COLLADA)

    • .kmz (compressed Keyhole Markup Language format, Google Earth)

    • .obj (common 3D object format)

    • .u3d (Universal 3D)

    Photoshop can also create 3D objects in basic, primitive shapes.

    Photoshop places each 3D object on a separate layer. Within Photoshop, you can use the 3D tools to transform (move and scale) a 3D model, change the lighting, change camera angles and positions, and change render modes—for example, from solid to wireframe mode. You can also use Photoshop to modify, paint on, and replace textures for a 3D object.

    You can bring these 3D object layers in PSD files from Photoshop into After Effects for compositing and animation.

    When you import a PSD file into After Effects as a composition and that PSD file contains a 3D object layer, you can choose to make the layer a live Photoshop 3D layer. If you don’t choose the Live Photoshop 3D option when you import the file, you can convert the layer to a live Photoshop 3D layer in After Effects by choosing Layer > Convert To Live Photoshop 3D. When a layer is a live Photoshop 3D layer, it contains an instance of the Live Photoshop 3D effect. The Live Photoshop 3D effect on a layer renders the 3D object according to the active camera in the After Effects composition. The Live Photoshop 3D effect works like other effects with a Comp Camera attribute. (See Effects with a Comp Camera attribute.)

    When a live Photoshop 3D layer is imported, After Effects creates a camera that matches the camera used in Photoshop. The camera created in After Effects is not animated, even if the camera for the 3D object in Photoshop is animated.

    A 3D object and its camera may be animated within Photoshop. To make After Effects use the animation of the 3D object or camera from the PSD file, choose Use Photoshop Transform or Use Photoshop Camera in the effect properties in the Effect Controls panel for the Live Photoshop 3D effect for the layer. In general, you can create animations and camera moves with more flexibility and convenience within After Effects.

    The live Photoshop 3D layer in After Effects contains several expressions, which are used to attach it to a null layer. Use the null layer to manipulate the live Photoshop 3D layer, rather than directly manipulating the live Photoshop 3D layer’s Transform properties.

    To move selected layers so that their anchor points are at the center in the current view, choose Layer > Transform > Center In View or press Ctrl+Home (Windows) or Command+Home (Mac OS). This command is especially useful for bringing a 3D object layer into the appropriate part of a scene.
    To reduce the amount of time that the 3D object requires to render for previews, change the layer’s image quality setting to Draft. With this setting, the Photoshop rendering engine built into After Effects creates a more simple rendered image from the 3D model. (See Layer switches and columns in the Timeline panel.)

    To paint on the textures of the 3D object, modify its material options, change its lighting, or otherwise edit the 3D object itself, you must return to Photoshop. The most convenient way to edit the original PSD file is by opening it in Photoshop with the Edit Original command in After Effects. (See Edit footage in its original application.)

    Note: To edit the 3D model itself, you must use a 3D authoring program, not Photoshop or After Effects.
    More Help topics

    Working with 3D files (Photoshop Extended)


    3ds to after effects

    http://www.videocopilot.net/tutorial.html?id=80
    http://www.videocopilot.net/tutorial/medical_zoom_01/


    http://forums.creativecow.net/thread/18/855804

    You could export from 3dsmax as a rla or rpf sequence of images or just animate the box in max on a black background and then export as a .avi or .mov file and then import that into AE. Once in AE you could key out the background.

    If you want to fly around it and such in AE then just make it in AE.

    3d to after effects

    http://www.pixel2life.com/publish/tutorials/1373/import_3d_files_into_after_effects/

    I have noticed and have searched the web vigrously to find how to import 3d files into After Effects. Well I have found the easiest way out there. The Proccess requires Photoshop CS4 and After Effects CS4 or higher.

    1. Well in any 3D Program export/save the file as a .3ds file
    2. After the .3ds file is save right click the file> Open With (Photoshop CS4 or up)
      P.S. Open Photoshop, then File>Open>(The .3ds file)
    3. Now after the .3ds file loads in photoshop go to File>Save As> (name), make sure when saving the file extension is ".psd".
    4. Now you can go to your after effects and import the .psd file.
      • Make sure "Import Kind:" equals "Composition".
      • Layer Options equals "Editable Layer Styles" and "Live Photoshop 3d" Checked
    5. After thats done you should have a folder named as your psd file, along with a composition with the same name.
    6. Finaly Open the Composition that was just made, then select the "Unified Camera Tool" and move around your 3D Object

    3d models - some FREE

    http://www.turbosquid.com/Search/Index.cfm?keyword=earth&page_num=2

    Sunday, July 31, 2011

    Tips from the Expert - How to cheat in Flash

    http://adobe.breezecentral.com/p46515568/

    One such presentation has been
    overwhelmingly popular (http://adobe.
    breezecentral.com/p46515568/). This was
    my very first recorded Breeze presentation
    and it has been one of the most popular
    resources for Flash character design and
    animation on the Web. The surprising
    aspect of this presentation was that I
    was merely filling in for the original
    presenter, who had to cancel last
    minute. With no time to prepare

    anything, I simply demonstrated what I do on a daily basis for clients and
    sometimes for self-amusement. It was just another day at work for me, but
    this time I had the world looking over my shoulder. Luckily it was a topic that
    many users were very interested in. Due to its popularity I was asked to host
    more online presentations, all of which were recorded and featured on Adobe’s
    website. This is one of my most rewarding community experiences due to the
    number of users who continue to benefit from these recordings.


    http://my.adobe.acrobat.com/p46515568/
    http://www.adobe.com/devnet/flash/articles/design_character.html
    http://www.adobe.com/devnet/flash/articles/adv_char_anima.html
    http://www.adobe.com/devnet/flash/articles/tween_macrochat.html

    Flash Character TUTORIALS - must see (eyes, ...)

    http://2dcgi.com/

    Flash Character TUTORIALS - must see (eyes, ...)

    featured articles
    The Classic Tween in Fl... The difference between a two dimensional performance and a three dimensional...
    The Wireframing Techniq... Where the developers of Flash intended their product to be a Cel style...
    Dynamic Color Swatches ... Think Toon Boom Studio and The Tab’s ability to globally update colors...
    The Gradient Eyes Techn... Take advantage of Flash’s color mixing tools and its ability to animate...
    popular articles



    referred in 'How to Cheat in Flash CS4'

    THE FUSION OF TRADITIONAL and digital
    animation has given us “tradigital”
    animation. I don’t know who invented the term
    but the effect was first shown to me by Ibis
    Fernandez (www.2dcgi.com), a well known and
    talented animator who blew me away when he
    sent me a sample of this technique a few years
    ago. Up until that point in my career, I had been
    using Flash for four years and thought I knew
    every trick in the book. It was clear to me I had
    more to learn.

    Saturday, July 23, 2011

    Lip-syncing automatically with SmartMouth in Flash Professional

    http://www.adobe.com/devnet/flash/articles/lip-sync-smartmouth.html


    Additional requirements


    Sample files


    Matching dialogue to a character's mouth in order to create the illusion of speech is known as lip-syncing. This effort often consumes more time than any other animation task because you need to make adjustments on nearly every frame. In fact, lip-syncing short animations (even only 1–2 minutes long) can involve hours of tedious labor.

    This article explains how to make lip-syncing in Adobe Flash Professional CS5 as painless as possible by utilizing the SmartMouth extension to automatically analyze audio content and assign corresponding mouth shapes. That's right: you can sit back and relax your hands, back, neck, and eyes while SmartMouth processes the audio in the time that it takes the audio to play back, and then matches each frame using a speech algorithm. You'll also learn how use the free FrameSync extension to quickly make manual adjustments and tweaks to your character animation.

    Introduction to lip-syncing in Flash

    The basic unit of speech is known as a phoneme. The mouth shape and facial contortions that correspond to phonemes are known as visemes. Animators generally refer to phonemes and visemes interchangeably, even though they are technically different concepts. The standard set of about seven phonemes/visemes (mouth shapes)—not including a closed mouth—are sufficient to create the illusion of speech on an animated character. The SmartMouth Flash extension includes a sample set of those shapes (see Figure 1).

    The phoneme guides found in SmartMouth.
    Figure 1. The phoneme guides found in SmartMouth.

    This small set of phonemes corresponds to a wide array of spoken sounds. The full range of sounds that are covered by this small set of mouth shapes are listed in Table 1.

    Abbreviated phonemeFull letter listCorresponding examples
    noneNo vocal sound (or inaudible)
    AA, Iah as in "cat," a as in "say," i as in "kite"
    OO, U, (W), (R)o as in "boat," u as in "clue"
    EE, (I)e as in "street," eh as in "trek"
    SC, D, G, K, N, R, S, TH, Y,Zs as in "stress," t as in "tent"
    LLl as in "lull"
    MM, B, Pm as in "might," b as in "back," p as in "pass"
    FF, Vf and v as in "favor"
    Table 1. The full phoneme list.

    Note: Letters in parentheses denote that some sounds made by those letters (for example, W and R) produce a viseme—specifically puckering of the lips, similar to the visemes produced by U and O sounds.

    By reusing a small set of mouth shapes, you avoid reinventing the wheel on every frame. Instead, you can simply leverage the repository of mouth shapes that you've already created.

    Existing methods of lip-syncing

    Flash animators have developed many techniques to speed up lip-syncing in Flash. The three most common methods are swapping symbols, nesting, and nesting with labels. Each of these three methods utilize reusable mouth shapes for phonemes.

    The swapping method involves creating each phoneme in its own symbol and then swapping the symbol shown on each frame to match the audio at that frame.

    The nesting method involves placing all of the phonemes along the Timeline within a single graphic symbol. By manipulating the First (frame) value in the Property inspector, you can control which frame of a graphic symbol's Timeline is displayed (as shown in Figure 2). The nesting method is a bit more organized and efficient than the swapping method, but it does require that you memorize (or write down) the frame numbers that correspond with each mouth shape.

     Looping allows you to control which frame of a graphic symbol is displayed.
    Figure 2. Looping allows you to control which frame of a graphic symbol is displayed.

    The nesting with labels method is identical to the nesting method, except that frame labels are added to the graphic symbol's Timeline to identify each distinct shape. The labels make the symbol's Timeline easier to navigate—and they can read by SmartMouth and FrameSync, eliminating the need to memorize frame numbers.

    The sample project in this article focuses on using the nesting with labels method. To add a frame label, select a keyframe and enter the desired label into the Name field in the Property inspector (see Figure 3).

    Select a keyframe and enter a frame label in the Property inspector.
    Figure 3. Select a keyframe and enter a frame label in the Property inspector.

    All manual lip-syncing in Flash relies on scrubbing. Scrubbing refers to the act of selecting the playhead in the Timeline and dragging it across a single frame. Any audio layers that have their Sync property set to Stream will play the scrubbed frame's audio (assuming Control > Mute Sounds is off), allowing you to hear a small fragment of speech. Scrubbing is a time-consuming user action because it requires a lot of precision using a mouse, track pad, or stylus. It may take a couple of scrubs on a single frame to identify the sound. Using one of the three methods described previously, you can scrub and update each frame to use the correct mouth shape symbol until the entire Timeline has been synced.

    Where the SmartMouth extension fits in

    SmartMouth works natively with the three methods discussed previously and edits your Timeline directly, as if you'd made the edits by hand; the Timeline and symbols remain completely editable. This flexibility allows you to make desired customizations, adding personality and subtlety to your character, just as you would manually, but in a fraction of the development time.

    Setting up your file

    The file setup required for SmartMouth is identical to that of a file that you lip-sync manually. The file must contain mouth shapes (in a single symbol or in several symbols) and a layer with the audio set to Stream. For SmartMouth to distinguish speech properly, your targeted audio layer should contain only one character speaking at a time with no music or sound effects. Before setting up your file, install the SmartMouth and FrameSync extensions so that they can be accessed in the Flash authoring environment.

    Installing the SmartMouth and FrameSync extensions

    The Adobe Extension Manager makes it really easy to install extensions. Follow these steps:

    1. Download the SmartMouth and FrameSync extensions.
    2. Unzip SmartMouth.zip.
    3. Double-click SmartMouth.mxp to install the SmartMouth extension. This launches Adobe Extension Manager CS5 (which is installed automatically with Flash Professional CS5). If this step does not work properly for you, or if the wrong version of Adobe Extension Manager opens, launch the Extension Manager separately. Click the Install button and browse to select the SmartMouth.mxp file.
    4. Read the license agreement and click Accept if you agree to the terms. You will receive an alert from Adobe Extension Manager when the extension has been successfully installed (see Figure 4).
     Installing the SmartMouth extension just takes a few moments with Adobe Extension Manager CS5.
    Figure 4. Installing the SmartMouth extension just takes a few moments with Adobe Extension Manager CS5.
    1. Repeat steps 3 and 4 to install the FrameSync.mxp file. Close Adobe Extension Manager.
    2. Launch (or restart) Flash Professional.
    3. Locate the sample files folder that you downloaded at the beginning of this article. Open the smartmouth_adc_demo_start.fla file provided in the sample files folder, or begin by creating a new ActionScript 2 or ActionScript 3 FLA file to use your own content (SmartMouth supports both versions of ActionScript).