Don't call me yet!

If you have set your asset up in such a way that they contain movieclips in different keyframes and you want to go to a particular keyframe and in turn play the movieclip contained within it, you can't just do the following (here we assume there is movieclip called cartoon_mc inside keyframe cartoon):

// go to keyframe "cartoon"
gotoAndStop("cartoon");

// start animating cartoon_mc contained within keyframe "cartoon"
// this won't work because cartoon_mc will only come into existence
// in the next frame loop
cartoon_mc.gotoAndPlay("start");

Instead, you need to delay it by one frame so Flash has a chance to bring the movieclip into existence.  You can do the delay call by using TweenMax's delayedCall.

gotoAndStop("cartoon");
// Delay calling performAnimation method by one frame
TweenMax.delayedCall(1, performAnimation, null, true);

function performAnimation()
{
  cartoon_mc.gotoAndPlay("start");
}

Font Embedding for Localization

I got to do some pretty extensive research and experimentation with font embedding for one of the projects I did for Hasbro a while back.  Here are the notes I made while working on this project.

Disclaimer: The notes need to be cleaned up further for easier reading but I hope you can still garner some useful tips from them.

1) Flash Runtime Sharing

Steps:
Create EmbeddedFont.fla
- Embed characters for textfields, and wrapped inside a movieclip symbol
- Export the movieclip symbol for runtime sharing

Create ImportEmbeddedFont.fla
- Import the movieclip symbol for runtime sharing

Create Main FLA
- Load ImportEmbeddedFont.swf
- Apply CSS on text using font in ImportEmbeddedFont.swf

Pros: No Flex or mxmlc needed.
Cons: Import/Export for runtime sharing is seldom used in the field, not sure if there is bug involved with this (there was a bug with Flash 8/AS2). What else?

2) Flash + Flex

Steps:
Create EmbeddedFont.fla
- Create textfields on stage, embed characters for textfields

Create ImportEmbeddedFont.swf using FlexBuilder
Embed fonts in EmbeddedFont.swf using FlexBuilder using [Embed] tag

Create Main FLA
- Load ImportEmbeddedFont.swf
- Apply CSS on text using font in ImportEmbeddedFont.swf

Unicode range can be specified by editing the UnicodeTable.xml. Changes will reflect in the Embed Characters dialog.

OSX: /Users//Library/Application Support/Adobe/Flash CS4/en/Configuration/FontEmbedding/UnicodeTable.xml

Win: C:\Documents and Settings\\local settings\application data\adobe\flash cs3\en\ Configuration\FontEmbedding\UnicodeTable.xml

Pros: Client can embed characters from within Flash and use the AutoFill feature.
Cons: Flex or mxmlc is needed.

NOTE: Must use Flash 8 format for font FLA.

3) Flex only

Steps:
Embed character sets directly in code
(Can be embedded at class level or variable level)

To pick up changes, have to clean project before doing a build—could be a FlexBuilder bug.
(TODO: There was a bug in Flex 2 that made it such that font embedded this way cannot be kerned, what about Flex 3?)

Pros:
One-step process, no need to use Flash and Flex. Possible to automate entire process via scripts.
Cons: Flex or mxmlc is needed.
Need to specify font path on local machine, which could be OS dependent.
Unicode range must be specified manually and cannot be reused as easily. Also no Auto Fill feature.

DEV NOTE #1

There are two main issues I ran into going with this approach.

Bug #1

I experienced some issues transcoding Arial Unicode MS using the following standard syntax:
[Embed(source="./assets/Arial.ttf", fontName="Arial Unicode MS")]
public static var arialUnicodeTTF:Class;

Error I got:

Exception during transcoding: Unexpected exception encountered while reading font file
'/Experiments/EmbedFont Flash-Flex/src/./assets/Arial.ttf'

Fix #1
Add this compiler flag:
-compiler.fonts.managers=flash.fonts.AFEFontManager

Fix #2
Use a different syntax to embed (the font will have to be installed in the system for this to work):
[Embed(systemFont=”Arial Unicode MS”, mimeType=’application/x-font-truetype’)]
public static var arialUnicode:Class;

This fix doesn’t require the specification of font manager as in Fix #1. However, using systemFont seems to not recognize unicodeRange. So if unicodeRange must be specified, Fix #1 must be employed.

Fix #3
Embed using Flash.  Flash seems to be the most reliable way to embed all font types, including those not supported by Flex (such as PBM)

Bug #2

I changed the unicodeRange but the loading swf doesn't seem to pick up the change (the embedded font swf size has changed as it should)

Fix: Doing Project->Clean... before running the app fixes this.

DEV NOTE #2

unicode code range can be specified within Embed or in compiler flag.
Compiler flag:
-language-range specialCharacters
U+0020-U+007E,U+00B2-U+00B9,U+2070-U+2089

DEV NOTE #3
.dfont must be split into .ttf before embedding.  I use dFontSplitter: http://peter.upfold.org.uk/projects/dfontsplitter

4) Flash font symbol

Steps:
Create font symbol in library

There doesn’t seem to be a way (or I haven’t found one) to embed character sets using this approach, therefore this option is not pursued.

II) Localizations

- Need to have a way to know which locale info set to load.
Locale info set (a made up word, not a standard term) here refers to: the copy texts, the configuration xml file, and the font swf. In the case of Cavalcade, the copy texts and configuration are mixed together in one xml file.

We can get locale code in one or more of the following ways:

1) Passing it in the URL query string
2) Passing it via Flashvars
3) Specifying it in a config file
4) Querying browser’s locale via Javascript
5) Embedding the locale code in the name of the Cavalcade swf (this is not useful if we need to support dynamic switching of languages)
5) Querying OS’s language using Flash API capabilities.language (the method is rather limiting as it does not include country code for English, so we might forego this)

Is dynamic switching of language a requirement? (e.g. clicking on a button to change texts to a different language)

Localization involves more than just language, it involves date display, currency, etc. Are we concerned with these or just the translated texts?

We also need to consider how to encode the info specific to each locale (the CSS, copy and XML)

Possible approaches:
1) Put each set of files into a locale-specific folder

locale\en_US\cavalcade.css
locale\en_US\panel.xml

locale\en_CA\cavalcade.css
locale\en_CA\panel.xml

locale\ja_JP\cavalcade.css
locale\ja_JP\panel.xml

2) Suffix the files with locale id
cavalcade_en_US.css
panel_en_US.xml

3) A combination of (1) and (2)


Localization Copy

Current way of implementing copy is not optimal for translation.  String IDs should have been used instead of mixing in copy with actual configuration.

Consider using existing standard for localization such as XLIFF or something similar in spirit.
http://developers.sun.com/dev/gadc/technicalpublications/articles/xliff.html

Minor fix to Gaia Flash Framework

We recently started using Gaia Flash Framework on a microsite project.  In case you don't know what Gaia is, it's a very well-written navigation framework for Flash microsites, though not so much for games since game's interaction flow is usually highly customized.

The nice thing with Gaia is it doesn't take much to get up to speed and running with it.  While playing around with the Gaia demo code, there was one minor hiccup I ran into:

If you compile the individual page fla that makes any Gaia API calls (such as Gaia.api.getPage), you will get a runtime error.  This makes sense since Gaia API is not available at this point, but it's nevertheless annoying because in the course of developing a site using Gaia, you will be compiling individual pages a lot.  Getting these errors when testing the page individually can be a bit of a distraction.

The solution to this problem turned out to be quite straightforward.  A quick browse at the framework code shows that Gaia API uses GaiaImpl and GaiaImpl is instantiated in GaiaMain class (via the ungodly name GaiaImpl.birth()).  Since GaiaImpl is being used as a singleton and it has no dependencies with any other classes, there is really no need for it to be instantiated inside GaiaMain.  So I commented out the GaiaImpl.birth call in GaiaMain and instantiated GaiaImpl via static initializer instead.  With this single change, the page will now compile properly by itself even though it doesn't go through GaiaMain.

public class GaiaImpl implements IGaia
{
  private static var _instance:GaiaImpl;

  // static initializer

   {

      birth();   

  }
  ...

}