Flashで外部swfに埋め込んだフォントを使う

Flash(ActionScript3)で外部swfに埋め込んだフォントを使うことができたのでメモ。

環境

• Windows7 64bit
• FlashPro CS3 (CS6はフォント埋め込んだswfを出力できなかった、理由不明。CS3ならできた → CS6はメモリー上に作った仮想ドライブにはパブリッシュできないと判明)
• FlashDevelop 4.0.4 + Flex SDK 4.6

ソース

http://plamo-tokyo.com/labo/as3swf/ にソースが全部載ってたのでそれをそのままコピペ。うまく動かないところがあったのでいくつか修正したのが以下。

Main.as

package 
{
    import flash.display.DisplayObject;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLRequest;
    import flash.system.LoaderContext;
    import flash.system.ApplicationDomain; 
    import flash.text.Font;
    import flash.text.TextField;
    import flash.text.TextFormat;
    
    /**
     * ...
     * @author itouhiro
     */
    [SWF(backgroundColor="0xf8f8f8", width="480",height="360", frameRate="10")]
    public class Main extends Sprite 
    {
        
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            var req:URLRequest = new URLRequest('FontGLAntique.swf');
            var ld:Loader = new Loader();
            var context:LoaderContext = new LoaderContext();
            
            //指定する。Load先のappDomain
            context.applicationDomain = ApplicationDomain.currentDomain;
            ld.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);
            ld.load(req, context);
        }
        
        private function loadCompleteHandler(e:Event):void 
        {
            //appDomainからClassを参照し、生成
            var FontGLAntique:Class = ApplicationDomain.currentDomain.getDefinition('FontGLAntique') as Class;
            //登録。FontClassをglobalFontListに
            Font.registerFont(FontGLAntique);
            
            var txt:TextField = addChild(new TextField () as DisplayObject) as TextField;
            var f:Font = new FontGLAntique();
            txt.defaultTextFormat = new TextFormat(f.fontName, 20);
            txt.embedFonts = true;
            txt.width = 500;
            txt.text = "今回は外部swfにフォントを埋め込んだ";
            txt.rotation = -3;
            txt.x = txt.y = 30;
        }
    }
}

FontGLAntique.swfの作り方も http://plamo-tokyo.com/labo/as3swf/ に書いてあるとおり、FlashCS3でフォントを「ライブラリ」に登録して[ファイル - パブリッシュ]でswf出力。 フォントは http://gutenberg.sourceforge.jp のGLアンチックを使わせていただいた。このフォントは無料だが、漢字が入っていないので、上の画像では漢字表示されていない。

ビルド

FlashCS3で動かすには、FontGLAntique.swfとMain.asと同じフォルダにMain.flaというのを新規作成してDocumentClassにMainとだけ書いてパブリッシュすればOK。

FlashDevelopの場合は、[Project - New - AS3 Project]で src/Main.asを上のように書いて、bin/に FontGLAntique.swf を置いて、[Project - Build Project]。

Flash

実際のSWFはコレなのだが‥‥

https://sites.google.com/site/itouhiro/2013/20130114fontEmbed.swf

文字が表示されてないよ。

ローカル環境だと 20130114fontEmbed.swf と FontGLAntique.swf を同じフォルダに置いておくだけで読んでくれるんだけど、ネットに置いた場合、httpで始まるURLを書かないと外部swfを読んでくれないようだね。 そこで以下のように修正した。

$ diff -u 20130114fontEmbed/src/Main.as 20130114fontEmbed3/src/Main.as
--- 20130114fontEmbed/src/Main.as   2013-01-14 18:22:35.947365300 +0900
+++ 20130114fontEmbed3/src/Main.as  2013-01-14 18:45:41.258600600 +0900
@@ -29,7 +29,7 @@
         {
             removeEventListener(Event.ADDED_TO_STAGE, init);
             // entry point
-            var req:URLRequest = new URLRequest('FontGLAntique.swf');
+            var req:URLRequest = new URLRequest('https://sites.google.com/site/itouhiro/2013/FontGLAntique.swf');
             var ld:Loader = new Loader();
             var context:LoaderContext = new LoaderContext();

https://sites.google.com/site/itouhiro/2013/20130114fontEmbed3.swf

少し待つと、文字が表示された。

これで表示できたわけだが、これは逆にローカル環境ではうまく動かないんだよなー。

API

ApplicationDomainの仕組みは http://cuaoar.jp/2006/03/applicationdoma.html が理解しやすそうだけどその記事ではLoaderContextのことが書いてなくてそのソースうまく動かなかった。

公式の http://help.adobe.com/ja_JP/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e07.html が一番信頼おけるのかな。 ほかにも google:ApplicationDomain as3で検索すればよさそうだ。

あれ、 http://level0.kayac.com/#!2008/06/cs3.php ではFlexとCS3で処理が違うと書いてあるな。今回はCS3とFlex4.6で同じソースで行けたけど。

フォント埋め込み

この埋め込みフォントはFlash Pro CS6で作成した。埋め込みフォントswf作るにはCS6なくても http://tech.nitoyon.com/ja/blog/2008/07/23/as3-embed-font/ の方法でもよさそうだったんだが、そのページのPerlスクリプトがCygwinのperl 5.14では動作しなくてね。CS6持ってるし使うことにしたんだ。

http://helpx.adobe.com/jp/flash/using/embed-fonts-consistent-text-appearance.html に解説があるとおりにやった。 埋め込みフォント種類を選べるので、半角英数字と日本語の かな、さらに追加で 月配列対応版半全角英数無変換問題入力読点句疑符感嘆長音、。・「」ー゛゜！？～…『』（）□○ も埋め込んだよ。

Flash開発環境としては FlashDevelop4.0.4＋Flex SDK 4.6 を使った。 Flex SDK 4.6 の対応するFlashPlayerは11.1 と書いてある。 http://helpx.adobe.com/flash-builder/release-note/flex-4-6-sdk-release.html 11.1といえばAndroidで動作するFlashの最終バージョンなのでちょうどいいかも。

FlashDevelopはAutoHotKeyでEmacs操作できるように設定したら個人的に使い勝手がアップ。