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.

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.

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.

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

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.

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

• SmartMouth
• FrameSync

Usage

Just drag and drop a Flash CS5.5 FLA file onto Flannel and it will make a copy and append _CS5 to the file name. That file can be opened in Flash CS5. Conversion for CS4 is a little trickier, since several new elements were added for CS5, but I’m working on it.

Installation

You can install Flannel using the badge below.

Or you can download the file directly Flannel.air (Adobe AIR is required).

Flannel is available at no cost, but donations are welcome.

I’ll continue to collect them, if you have custom eases or tutorials to share (on easing), you can post them in the comments below or send them directly to us.

Locating the Scripts

The 2 scripts below have been submitted to the Google Script Gallery and should be available by choosing Tools > Script gallery… then searching for the term crop. As of writing this post, the first script below is already available.

I’m including the code below in case anyone has difficulty finding them or would like to copy and modify the code for their own purposes.

Crop to Selection

function cropToSelection() {
  var sSheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = sSheet.getActiveSheet();
  var range = sSheet.getActiveSelection();
  var startCol = range.getLastColumn();
  var startRow = range.getLastRow();
  var endCol = sheet.getMaxColumns();
  var endRow = sheet.getMaxRows();
  try{sSheet.deleteColumns(startCol, endCol - startCol);} catch(e){};
  try{sSheet.deleteRows(startRow, endRow - startRow);} catch(e){};
}

Crop All Sheets

function cropAllSheets() {
  var sSheet = SpreadsheetApp.getActiveSpreadsheet();
  var numSheets = sSheet.getNumSheets();
  var sheets = sSheet.getSheets();
  var i;
  for(i=0; i < numSheets; i++){
    var sheet = sheets[i];
    var range = sheet.getDataRange();
    sheet.setActiveSelection(range);
    var startCol = range.getLastColumn();
    var startRow = range.getLastRow();
    var endCol = sheet.getMaxColumns();
    var endRow = sheet.getMaxRows();
    if(endCol > startCol) sheet.deleteColumns(startCol, endCol - startCol);
    if(endRow > startRow) sheet.deleteRows(startRow, endRow - startRow);
  }
}