7-day free trial to lynda.com video training library.

Character and Mouth Packs for Animation

Justin | animation,Flash | Tuesday, May 15th, 2012

I’ve had a couple of people write me about pre-built mouth shapes for use with SmartMouth. SmartMouth is built with the principle of flexibility in mind, so it relies on the content created by the animator. Since receiving inquiries about pre-built mouth shapes, I’ve given more thought to the wide range of people using SmartMouth, from professional animators in studios, to less-experienced users seeking an easy way to add character animation to their projects.

I had assumed there must be tons free character and mouth packs on the net, but alas I could only find 2. The first pack is totally free, and was used by Michael James Williams in his review of SmartMouth. The second pack is free when you sign up for a newsletter from Cartoon Solutions (who also offer several commercial character packs).

Given this total lack of free pre-built mouth shapes, I put together a simple Flash file that you can download for free, which contains the basic phonemes (mouth shapes). The file is compatible back to Flash Pro CS3.

 

Custom Mouth Shapes

It’s not as difficult as you might think to create the mouth shapes required make a character speak. Once you have the mouth shapes, you can leverage the power of the Graphic symbol. There are several great video tutorials online for building characters that talk, like this one from Chris Georgenes. Chris and I also covered this topic in depth in Animation with Scripting (available from: Peachpit | Amazon | Adobe Press).

If mouth shapes and character packs are something you’d like to see more of on our site or within our products, please let us know in the comments.

SmartMouthRT (Real-Time) Lipsyncing Preview

Justin | ActionScript,animation,Flash | Thursday, May 10th, 2012

Ever since our SmartMouth auto-lipsyncing Flash extension was released, people have been asking about lipsyncing in real time…Well, we’re getting pretty close to having such a product ready for purchase. SmartMouthRT is an easy-to-use ActionScript 3 library that allows for on-the-fly lipsyncing. With Adobe’s packaging utilities for Android and iOS (iPhone/iPad), SmartMouthRT could easily be used for mobile apps as well. We’ve put a little demo video together to show you what it’s all about, which includes behind-the-scenes footage of the assets and code used to make the demo.

Voices: Betsie Bush and Peter Yearsley (librivox.org)
Music: Baby, Please Don’t Go by Big Bill Broonzy

We don’t have an exact release date available. I’m hoping it will be in the next 1-3 months. The SmartMouthRT SDK (Software Developer’s Kit) will be priced to reflect its greater flexibility beyond that of the Flash Extension. The first release will analyze essentially any (and all) sound playing within the Flash Player. Future releases will likely include the ability to target specific sound objects (i.e., for multiple simultaneous characters) as well as microphone objects.

Want an email when SmartMouthRT is available? Subscribe to our newsletter.

Advanced Page Tracking with Articulate

Justin | Instructional Design,tips | Tuesday, May 1st, 2012

At my job as a Creative Technology Manager at Pearson, I do a significant amount work on interactive training with our Instructional Design team. Over the last 7 years, we’ve developed a highly-reusable, modular set of Flash templates that can handle all sorts of advanced interaction. As rapidly as the team can generate a course from the Flash templates, there are smaller projects where products like Captivate and Articulate are more appropriate. In the case of Articulate (Presenter), this is even more true when the client already has their materials in Powerpoint form, and would like to continue editing the Powerpoint assets. Articulate can export the Powerpoint slides as an interactive course (to run as a Flash/HTML-based module). Additionally, Articulate has SCORM tracking as an export feature for use with Learning Management Systems (LMS).

While we often produce LMS-based projects, we also frequently utilize other tracking modalities (to generate custom completion certificates, or when deployment to non-LMS sites is a client requirement, etc). The nifty thing we’ve discovered in these cases, is that we can publish an Articulate project for SCORM, and overwrite the JavaScript hook to serve our particular scenario.

To write your own custom hook: export your project with the LMS tracking turned on. Duplicate the player.html file that has been generated so that you can refer back to the unedited file. Open your duplicated file in a text editor.

Open a new script tag after the existing ones in the head tag:

<script language="JavaScript1.2">

Inside this <script> tag, you can now begin to override the default LMS configurations.

//Configuration Overrides
//set this to false if you don't want the overhead of recording debug information
var blnDebug = false;
//type of LMS to use
var strLMSStandard = "NONE";
//set this to true when debugging to force the debug window to launch immediately
var SHOW_DEBUG_ON_LAUNCH = false;
//set to empty function to prevent a js error from another file
LoadContent = function(){};

By setting strLMSStandard to NONE the JavaScript exported from Articulate will utilize functions from the lms/NONEFunctions.js file (instead of the files using SCORM or AICC functions).

Continuing inside the <script> tag you started, you can override any of the “NONE” functions (since you script comes after the embedding of the other scripts). The essential function is NONE_SetDataChunk, which is called each time a new screen (i.e. slide) is shown. This function receives a string that includes which pages have been visited, and which page is currently active. You can use this information to trigger you desired events (and make sure to close your <script> tag at the end).

//Override function in the NONEFunctions.js file
function NONE_SetDataChunk(strData){
   //example strData looks as follows:
   //viewed=1,2,3,4,5,6,7,8,9,10|lastviewedslide=10|
   var pageNum = strData.split('lastviewedslide=').pop().split('|').shift();
   pageNum = parseInt(pageNum) - 1;    //convert to array numbering
   //you can then use the pageNum value to trigger an outcome
   return true;
}
</script>

Not only have we used this generate custom certificates on non-LMS web servers, but we also combine this functionality with our comment tracking system. In the development and client review stages of a project, we use this code to trigger and update a button onscreen. When clicked, this button takes the visitor to our comment tracking system, opens and a new ticket, and pre-populates the field that identifies the current slide. That way we effectively solicit and apply feedback to each element of the project.

Titmouse Demos Facinator

Justin | animation,Flash | Friday, April 27th, 2012

Now that Titmouse’s new series Motorcity (mentioned in the previous post) is about to air, they’re sharing some behind-the-scenes magic.

In this video, Supervisor Animator, Allison Craig shows off the Facinator tool that I built for Titmouse:

Since the folks at Titmouse rendered their 2-D characters from every conceivable angle, they asked me to build a tool to rotate the detailed 2-D heads in 3-D space. You can see this in action starting at the 1 minute mark.

The 1st episode of Motorcity airs this Monday, but you can see it early (for free) on iTunes.

Source: Cold Hard Flash

Motorcity Preview

Justin | animation,Flash | Monday, April 23rd, 2012

I’ve had the great privilege over the last year to work on some fun projects building production tools for Titmouse. I’m excited to say that the series they’ve been working on, Motorcity, will begin airing 1 week from today on Disney XD. You can also download an early preview of the first episode (for free) on iTunes. It’s action packed!

Additionally, Mark Hamill (aka Luke Skywalker, aka voice of the Joker) does a fantastic job voicing the villain.

Earlier this year, Cold Hard Flash interviewed the head of Titmouse about opening an east coast office. Chris P, the interviewee, gives a shout-out to Ben Kalina, the fantastic producer with whom I’ve been working. In addition to producing Motorcity, Titmouse has also taken over production of the Venture Bros. (one of our favorite cartoons), for which I also had the privilege of creating a production tool.

I recommend checking out Motorcity (and the new Venture Bros., when the season airs). Kudos to the talent people at Titmouse!

UPDATE (4/27): Cold Hard Flash just posted a story about Motorcity and Titmouse’s animation pipeline which includes a video preview of one of the tools that I built called Facinator.

HTML & Flash: Explained Part 1

Justin | Flash,HTML5,Tutorials | Tuesday, April 10th, 2012

This is the first video in a series on digital literacy. The goal of this video is to provide an overview of HTML and Flash technologies, primarily for non-technical viewers. Future videos may cover aspects of these technologies in more depth and provide a foundation for deciding when to use each technology.

FrameScrub Flash Extension

Justin | animation,extensions,Flash | Wednesday, April 4th, 2012

Introducing FrameScrub, the lip-syncing tool for those who want to go panel-less.

How it Works

It works in most ways like the selection tool: you can click to select, double-click to edit, but you can also scrub-slide through graphic symbol frames.

You can even scrub through loop settings (using the Alt/Opt key).

Features

  • Click and drag to update the first frame that is displayed.
  • Hold SHIFT to cycle through frames faster.
  • Hold ALT (OPT on Mac) to cycle through loop settings (Loop, Play Once, Single Frame).
  • Hold CTRL (CMD on Mac) to temporarily revert to the Selection Tool.

Download

(compatibility: CS3 and newer, Flash 8 & MX 2004 untested)
FrameScrub.mxp

Installation

Open the MXP file in Extension Manager, follow the steps, and restart Flash. If you don’t see the FrameScrub in your toolbar (behind the selection tool), you can add it by accessing Edit (Flash on Mac) > Customize Tools Panel… Select a tool position, locate FrameScrub in the list on the left and use the right-facing arrow button to add FrameScrub to the selected tool position.

Other Lip Sync Tools from Ajar Productions

Page 1 of 2012345...1020...Last »