flasherな日々

フォントを埋め込む必要がある案件で、パブリッシュの度にフォント埋め込み処理を行っていては効率が悪いです。そこでどうにかしてフォントを外部から読むことができないかなと調べてみました。

■ フォント埋め込み用の swf を作成する

そのままなんですが、フォント埋め込み用の swf を作成します。新規作成し、Flash IDE のライブラリで右クリック、「新しいフォント」で埋め込みたいフォントを選択します。リンケージで 「ActionScript に書き出し」、「最初のフレームに書き出し」にチェックを入れます。そしてパブリッシュ。ここでできた swf をメインの swf に読み込むことで、フォントを外部読み込みとして扱うことができます。
この swf 名を「fontCollection.swf」とします。

■ メイン swf に fontCollection.swf を読み込む

以下に Progression で使う場合のやり方を記します。ついでにこないだの Singleton も絡めます。

・IndexScene ( import は省略します)

private var _fontCollection:CastLoader;
private var _singleton:Singleton;
public function IndexScene() {
	_singleton = Singleton.getInstance();
}
protected override function _onLoad():void {
	//font
	_fontCollection = new CastLoader();
	var _loaderContext:LoaderContext = new LoaderContext();
	_loaderContext.applicationDomain = ApplicationDomain.currentDomain;
	_fontCollection.load(new URLRequest("fontCollection.swf"), _loaderContext);
	_fontCollection.onCastLoadComplete = function():void {
		var _className = "リンケージで設定した時の名前";
		var _loadedFont:Font = new Font();
		var LoadedFontClass:Class = ApplicationDomain.currentDomain.getDefinition(_className) as Class;
		Font.registerFont(LoadedFontClass);
		_loadedFont = new LoadedFontClass();
				
		// 読み込んだフォントデータを Singleton へ
		_singleton.embedFontData = _loadedFont;
	}
}

・Singleton

package {
	import flash.text.Font;

	/**
	 * Singleton
	 */
	public class Singleton {

		/**
		 * own
		 */
		private static var _singleton:Singleton;
		
		/**
		 * font
		 */
		private var _embedFontData:Font;
		public function get embedFontData():Font { return _embedFontData; }
		public function set embedFontData(value:Font):void {
			_embedFontData = value;
		}

		/**
		 * constructor
		 */
		public function Singleton(observer:SingletonObserver) {
			if (observer == null) {
				throw new ArgumentError("public construction not allowed. use getInstance() method.");
			}
		}
		
		public static function getInstance():Singleton {
			if (_singleton == null) {
				_singleton = new Singleton(new SingletonObserver());
			}
			
			return _singleton;
		}
	}
}

class SingletonObserver {
	public function SingletonObserver() { }
}

・外部フォントを使いたいクラスの一部

var _embedFontData:Font = Singleton.getInstance().embedFontData;
var _tf:TextField = new TextField();
var _format:TextFormat = new TextFormat(_embedFontData.fontName);
_tf.embedFonts = true;
_tf.defaultTextFormat = _format;
_tf.text = "foobar";
addChild(_tf);

参考リンク
http://zapruder.main.jp/blog/?p=75

FLARToolKit を使ったコンテンツを作ってみました。
まだまだ完成ではないですが、とりあえず見れるようにはなったので暫定的にリリースします。
今後ちょっとずつ色を付けていこうかなと思います。
ちなみに作品名は「名刺にマーカー印刷して Twitter の発言表示させたら面白いかも」というところから名付けました。

では簡単に機能説明を。
Twitter の最新発言２０件を拾ってきて、それをランダムに表示します。
アイコンの貼付けられた Cube がぐるぐる回ります。
以上です(笑)
そのうちテキストにアニメーションつけます・・・。

ソースファイルは下記リンク先に公開しています。(Flex Builder)
http://boondockradio.net/TweetCard/


■ ソース説明
Twitter の発言は、getTweet.php で取得しています。(PHP5)
(新たに xml 出力するほうがスマートかなとふと思ったので、あとで書き直します。)

<?php
// xml ロード
$article = simplexml_load_file('http://twitter.com/statuses/user_timeline/ユーザー ID 番号.xml');
/*
 * status の数だけ text を出力。
 * その際、あとで Flash 側で split() する為に末尾に '%split%' と足してやる。
 */
foreach($article->status as $status) {
	$tweet = $status->text;
	echo convert($tweet).'%split%';
}

function convert($str) {
	return mb_convert_encoding($str, "UTF-8", "UTF-8");
}
?>

■ TweetCard.as 60行目
org.nbhd.loadUtil.PHPLoader.as で getTweet.php のデータを取得する。

_php = new PHPLoader();
_php.reqURL = "http://boondockradio.net/TweetCard/Data/getTweet.php";
_php.init();
_php.addEventListener(PHPLoader.LOAD_COMPLETE, _onCmp);

private function _onCmp(e:Event):void {
	// データを発言ごとに配列に入れる
	var tweet:String = _php.data;
	_tweet_arr = tweet.split("%split%");
	
	//配列の最後に空っぽのんが入るので消してやる
	for(var i:int = 0; i < _tweet_arr.length; i++) {
		if(_tweet_arr[i] == "") _tweet_arr.splice(i, 1);
	}
	
	- 略 -
}

ひじょーーーにざっくりですがこんな感じです。
ライセンスは自動的に GPL になるんでしたっけ？
色々作りが甘い部分があるので、マイペースに煮詰めていきます・・・。
では！


参考リンク
FLARToolKit
ARToolKit Marker Generator Online


追記
---------------------
iPhone な方は、このエントリに iPhone でアクセスするとマーカー画像を保存する必要も印刷する必要なくコンテンツを見ることができます。
こちらにアクセスして、iPhone の画面を webcam にかざしてみてください！

AS3 用の Singleton クラス書いてみた。
変数の受渡しとか置き場所とか困った時はこれで間違いなし。

■Singleton

package {

	/**
	 * Singleton
	 */
	public class Singleton {
		
		private static var _singleton:Singleton;
		private var _foo:String = "foo";
		
		/**
		 * constructor (外から new できないようにする)
		 */
		public function Singleton(observer:SingletonObserver) {
			if (observer == null) {
				throw new ArgumentError("public construction not allowed. use getInstance() method.");
			}
		}

		// こいつから Singleton を取得する
		public static function getInstance():Singleton {
			if (_singleton == null) {
				_singleton = new Singleton(new SingletonObserver());
			}
			
			return _singleton;
		}
		
		public function get foo():String { return _foo; }
		
		public function set foo(value:String):void {
			_foo = value;
		}
	}
}

// Singleton クラスからしかアクセスできないクラス
class SingletonObserver {
	public function SingletonObserver() { }
}

■サンプル

var singleton:Singleton = Singleton.getInstance();
trace(singleton.foo);
trace(singleton.foo = "aaa");

var singleton2:Singleton = Singleton.getInstance();
trace(singleton2.foo);

// 出力結果
foo
aaa
aaa

デザインパターンもっと理解したいなと思う今日この頃。