Sophisticated Animation & Interactivity into InDesign & Out to HTML5 (in5 v3.1 Sneak Peek)

Justin | Animate/Flash,animation,design,extensions,HTML5,InDesign | Monday, September 18th, 2017

For a long time, in5 users have been wanting to include content from Adobe Animate or Tumult Hype in their projects.

And there has been a way to do it with HTML files and the Web Overlay panel (used by DPS/AEM Mobile, but supported by in5)…

But InDesign has supported a more natural approach for most designers: placing of OAM files (packages of HTML from animation apps) directly on the page.

I’m pleased to announce that version 3.1 of in5 will also support placed OAMs.

Check out the video below to see an example of an OAM with complex animation and interactivity exported with an InDesign document.

It’s just one of the ways that in5 v3.1 will put more publishing power in your hands without having to code.

You can subscribe to get updates on in5 releases.

Full lipsyncing control with FrameSync now available for Adobe Animate CC

Justin | Animate/Flash,animation,extensions | Tuesday, May 10th, 2016

FrameSync lets you rapidly lip-sync your characters with an audio track.

The newest installer now works with Adobe Animate CC.

Feature recap

Modes to suit your style

Use keyframe numbers (shown below) or add labels to your frames (shown in the top image).

Audio Playback Navigation

No need to scrub the playhead to hear a single frame of audio, or move one frame back or forward. All of your lip-syncing can be completed from within the FrameSync panel. No jumping around the Flash interface!

Download

(compatible from Flash MX 2004 & up, including Adobe Animate CC 2015)

FrameSync.zip

Other Lip Sync Tools from Ajar Productions

  • SmartMouth – automatic lipsyncing (audio analysis) – pair this with FrameSync and you have the fastest lipsyncing workflow on the planet.
  • FrameScrub – an alternative to FrameSync.

Lip Sync at the Speed of Sound with Adobe Animate & SmartMouth

Justin | Animate/Flash,animation,extensions | Tuesday, March 1st, 2016

Lip syncing is one of the most tedious jobs in animation, because it means listening (and re-listening) to the audio on every frame and matching that sound to the right mouth shape.

The SmartMouth extension runs through your audio and automatically places your mouth shapes on the timeline.

SmartMouth thumbnail previews

Artwork by Paul Trani

Best of all, SmartMouth now works with the new Adobe Animate.

Get SmartMouth here.

Motion Blur Extension for Flash Professional CC

Justin | Animate/Flash,animation,extensions | Monday, February 3rd, 2014

There’s now a CC-compatible installer for our Motion Blur extension. The download link can be found on the original post.

Lipsyncing Resources

Justin | Animate/Flash,animation,links | Wednesday, June 20th, 2012

I have a few conversions with people interested in SmartMouth recently that made me think it would be worth it to gather some lip sync resources for those who are new to animation. For those who are solely interested in character animation, especially those with a training in traditional animation, ToonBoom products are a great option. You can find many tutorials with a simple Google search. For most everyone, IMHO, Flash is still a great application to be familiar with (even with the hubbub with Apple mobile browsers). Flash has a wide breadth of capability, and offers a nice gateway to familiarize oneself with other design tools. It’s also extensible, which makes it a great tool for creating custom workflows. So, this is a collection of resources to help with lip syncing in Flash. My goal is get this post up today in whatever state I have time for, then add and prune as needed over time. That way, those looking for resources at least have a place to start.

Here’s the super-simple breakdown of digital lipsyncing:

  1. Store the common mouth shapes (aka phonemes aka visemes) in a symbol (or symbols).
  2. Match the symbol on each frame with the audio heard on that frame.

We store the shapes within symbols to avoid the headache of redrawing thousands of frames. The resources that follow will show you the nitty gritty of those 2 steps.

Chris Georgenes

I’ll start where it started for me. Chris was on top of it before everybody else…and he was kind enough to share his knowledge with the rest of us. I picked up my style of lip syncing in Flash from this Chris Georgenes tutorial, which I still highly recommend. Based on this technique (the first frame technique), I developed the FrameSync extension. Chris demonstrates FrameSync with his animation technique in the video recordings of his MAX 2010 in his MAX 2011 sessions.

Books

In addition to Chris’ online tutorials, he’s written some fantastic books, one of which I was lucky enough to co-author with him.

Also, to get the basics of animation in general, I highly recommend getting your own copy of The Animator’s Survival Kit.

Tutorials from Around the Web

The web is full of great tutorials. If you’ve got other ones you like, posted them in the comments and I’ll add them to this list.

Lip Sync Tools from Ajar Productions

As I mentioned above, I love the ability to extend Flash, improve the workflow, and share it with others. Here are some tools I built to help with lipsyncing:

  • SmartMouth – This extension analyzes your audio and automatically add mouth shapes to your timeline. There’s a tutorial on the Adobe Developer Center.
  • FrameSync – Our original lipsync extension, with improvements. See Chris’ MAX videos above to view this tool in action.
  • FrameScrub – A newer incarnation. Super simple. Some people might prefer this implementation over a Flash panel (like FrameSync).

Tools from Others

Other Resources

Anything that didn’t fit into the above categories is down here.

Please feel free to share additional resources in the comments!

Page 1 of 912345...Last »