Tuesday
23Feb2010

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 to 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");
}
Friday
19Feb2010

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

Wednesday
17Feb2010

Useful FireFox extensions for Dev & Debug

Firebug - The #1 dev/debug tool for web work, period.

Flashbug - Flashbug is an extension that is built on top of Firebug that lets you see trace logs coming from a swf, among other things.

It goes without saying that if you do any amount of web work that involves server-side communication, that you should have a full-fledged HTTP debugging proxy.  The one I use is called Charles and I highly recommend it.

Monday
15Feb2010

Renaming Project in Xcode the Simple Way

 

Ten simple steps to renaming your Xcode project without mucking with your xcodeproj file.

1) Projects->Rename

 

2) With the project renamed, now rename your AppDelegate using Refactor.  Go into your AppDelegate class, place your cursor in the class name, and right click to select Refactor.  Enter the new class name in the Refactor dialog box.

3) Now we are left with a few things to rename: your app name, info.plist file and your precompiled header (.pch).  For your pch file, you can simply rename it directly in Xcode.

4) Next, go to Targets.  Go ahead and change your target name to your new app name.

5) After that, right click on your select Get info.

 

 

6) Update your precompile header file in build settings.

 7) Update your info.plist in build settings.

 

8) Go to Build -> Clean All Targets.

9) Build your project.

10) (Optional) Don't forget to change your bundle identifier in your info.plist as appropriate.

 

Saturday
13Feb2010

How to make function calls without injecting any code into your FLA?

When you are working with FLA, there are times when you need to perform a specific action when you reach a certain frame in your movieclip.  The common practice is to either insert the actual chunk of code into the actual keyframe.  The big issue with this approach is that now you have just created some timeline code, which can be a pain to track down since the majority of your code lies in external actionscript files.  For coders who are vigilant in staying away from too much timeline code, they might resort to putting a line of code in that frame to either dispatch an event or call a method in a class associated with the movieclip in the key frame.  The problem with this is that timeline code is still being created, even though it's much less and the actual function can now lie in the external actionscript file.

Fortunately, AS3.0 introduces a very useful but seldom used FrameLabel class (flash.display.FrameLabel).  With this class, you are able to obtain all the frame labels along with its associated frame number on your movieclip's main timeline via MovieClip's currentLabels property, which returns an array of FrameLabel objects.

Now that you can get the labels on the timeline , the next thing you need to do in order to know if you have reached the frame is to listen to ENTER_FRAME event and check to see what frame label you are currently on (via MovieClip's currentLabel property).  When the playhead reaches the actual frame label, make it call the method you want.

There is still one redundancy -- for every frame label, you need to specify the handler to call when it's reached.  Wouldn't it better if you can just specify the method handler's name as the label name such that when the frame label is reached, a method handler with the same name will be called?  Not only will this result in less code, the frame label is now self-documenting -- just by reading the frame label you know which method will be called when the frame is reached.

I have create a class called FrameLabelAction that does precisely this.  You can download it here.

Basic Usage:

import com.nanaimostudio.utils.FrameLabelAction;

public class YourMovieClip extends MovieClip
{

   var actionContainer;

   public function YourMovieClip()
   {

       // automatically associates methods with the same name as frame labels
       // and trigger it when the frame label is reached.
       actionContainer = new FrameLabelAction();
       actionContainer.createActions(this);

       // start frame label detection
       actionContainer.start();

    }

   // Assuming you have a frame label in your MovieClip called transitionInComplete,
   // this method will be called when the playhead reaches this frame label.
   public function transitionInComplete():void
    {

        // stop frame label detection - optional as the detection
        // will be stopped when the last frame label is reached
        // and method triggered.
        actionContainer.stop();
    }

}