Blog Index

Entries in flash (5)

Tuesday
Feb232010

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");
}
Friday
Feb192010

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

Saturday
Feb132010

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();
    }

}

Monday
Feb012010

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();   

  }
  ...

}

 

Wednesday
Oct142009

Flash on iPhone here I come!

Maybe not.

A friend asked me recently about what I thought of Flash CS5's ability to generate iPhone binary.

Here are my initial reactions:

1) Performance issue -- it's highly likely apps built this way will suffer performance issue, especially on iPhone 3G.  Worse, there is very little you can do to tune the performance because you are dealing with another abstraction layer.  The compiler technology used by the generation process (called LLVM) is not mature right now that even Apple isn't encouraging its use in iPhone development.  That said, I am sure performance will improve over time and things will mature along the way -- but how long will that take? That's anyone's guess.

2) Lack of control -- There are for sure going to be a ton of limitations because you are limited by what APIs/functionalities Flash provides you with.  For example, what if I want to implement a feature to be able to send mail from within my app, something very easy to do with the native SDK? Does Flash CS5 provide the API for this? What if I want to add the ability to do Push Notifications? The "lack of control" issue will only be a non-issue if Flash provides an API that completely maps to Apple's own iPhone SDK -- and I seriously doubt that will ever happen.  More seriously, what if Apple provides a new set of APIs in their OS update? I would have no access to these and have to wait for the next update of Flash to provide access to them, if ever.

3) Lack of clarity of its future -- This move on Adobe's part is darn risky and involves lots of political and legal implications.  Will Apple make some changes that would break apps generated this way? Does Adobe have long term commitment to this or are they just testing the water with Apple by taking a backdoor approach on this? Will Apple react positively or negatively to this whole thing? All these remain to be seen.

My sense is as with any other tool, people will come to the realization that CS5 isn't as rosy as it seems to be.  If anything, they will slowly discover that CS5 is suitable for a subset of things that you want to do with iPhone development and there are lots of sacrifices that you have to put up with going this route.  For me personally, I would use Flash CS5 to quickly prototype a game concept I have but would still code natively for reasons mentioned above.