[ActionScript 3.0] テキストを画像変換してバウンディングボックスで自由変形

Flashでバウンディングボックスを表示して自由変形を実現してみる と サーバーにあるWebフォントで文字を画像変換してみる との組み合わせです。

Flashから文字変換用PHPを読み込む

Flashから文字変換用PHPを呼び出して、送信された文字を画像変換しています。
文字変換用のパラメータをURLのクエリーに追加するだけなので、通常の画像を読み込む手順で呼び出せます。

instance

private var input:TextField;
private var tool:TransformTool;
private var submit_btn:Sprite;

init

private function init(e:Event = null):void {
    // TransformTool生成
    tool = new TransformTool(new ControlSetStandard());
    tool.autoRaise = true;
    addChild(tool);

    // イベントリスナー登録
    submit_btn.addEventListener(MouseEvent.CLICK, submit);
    input.addEventListener(KeyboardEvent.KEY_DOWN, submit);
    stage.addEventListener(MouseEvent.MOUSE_DOWN, tool.deselect);
}

submit

/**
 * テキストAPIへ送信して、画像を取得します。
 * @param event
 */
private function submit(event:Event):void {
    var value:String = input.text;
    var u:String = "text.php?value=" + encodeURIComponent(value) + "&font=APJapanesefont.ttf";

    loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeEventHandler);
    try {
        loader.load(new URLRequest(u));
    } catch (error:Error) {
        trace(error);
    }
}

/**
 * loadメソッドを呼び出したあと、受信したすべてのデータがデコードされ、
 * Loader オブジェクトの data プロパティに配置されたときのイベントです。
 * @param event イベント
 */
private function completeEventHandler(event:Event):void {
    var info:LoaderInfo = event.target as LoaderInfo;
    var loader:Loader = info.loader as Loader;
    var bmp:Bitmap = Bitmap(loader.content);

    var bitmap:BitmapData = bmp.bitmapData;
    var matrix:Matrix = new Matrix();
    matrix.tx = -Math.round(bitmap.width / 2);
    matrix.ty = -Math.round(bitmap.height / 2);

    var child:Sprite = new Sprite();
    child.graphics.beginBitmapFill(bitmap, matrix, false, true);
    child.graphics.drawRect(matrix.tx, matrix.ty, bitmap.width, bitmap.height);
    child.graphics.endFill();

    child.scaleX = child.scaleY = 0.6;
    child.x = child.width / 2 + 10 + Math.floor(Math.random() * 300);
    child.y = child.height / 2 + 15 + Math.floor(Math.random() * 150);
    addChild(child);

    child.addEventListener(MouseEvent.MOUSE_DOWN, tool.select);
}

サンプル

ソースコードはFlashエリア上を右クリックで [View Source] からどうぞ。

＊ サンプルのフォントには あんずもじ を使わせて頂きました。

• Example：テキストを画像変換してバウンディングボックスで自由変形