-> 07 { 03 / 14 }

ConvolutionFilter Interface

23:41 |

http://lab.rails2u.com/swf/convolution_filter_interface

ConvolutionFilter での matrix の適用値がどれぐらいだとどんな効果になるのか解らなかったので、感覚でつかむために適当なインターフェイス用意してみた。flex2 はこういうとき超便利だなぁ。fcsh 使ってもコンパイルが遅すぎるけど…。

以下ソース

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" initialize="init()" backgroundColor="#ffffff">
  <mx:Script>
    <![CDATA[
    private function init():void {
        setImage();
        applyFilter();
    }

    private function setImage():void {
        image.source = imageUrl.text;
    }

    private function applyFilter():void {
        var matrixX:Number = 3;
        var matrixY:Number = 3;
        var divisor:Number = 9;
        var matrix:Array = [
            int(m1.value), int(m2.value), int(m3.value),
            int(m4.value), int(m5.value), int(m6.value),
            int(m7.value), int(m8.value), int(m9.value)
        ];
        var filter:BitmapFilter = new ConvolutionFilter(matrixX, matrixY, matrix, divisor);
        var filters:Array = new Array();
        filters.push(filter);
        image.filters = filters;
    }

    ]]>
  </mx:Script>
    <mx:VBox width="60%" horizontalAlign="center">
      <mx:Panel id="mainPanel" title="ConvolutionFilterInterface" styleName="mainPanel" width="100%">
        <mx:Box width="100%" horizontalAlign="center" paddingTop="15">
            <mx:Image id="image"/>
        </mx:Box>
        <mx:Form width="100%" defaultButton="{Submit}">
            <mx:Box width="100%" horizontalAlign="center">
              <mx:Label text="ConvolutionFilter 3x3 Matrix"/>
              <mx:HBox>
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m1" width="75" value="5" />
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m2" width="75" value="-1" />
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m3" width="75" value="20" />
              </mx:HBox>
              <mx:HBox>
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m4" width="75" value="1" />
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m5" width="75" value="-20" />
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m6" width="75" value="-1" />
              </mx:HBox>
              <mx:HBox>
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m7" width="75" value="5" />
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m8" width="75" value="1" />
                <mx:NumericStepper minimum="-1000" change="applyFilter();" maximum="1000" id="m9" width="75" value="5" />
              </mx:HBox>
            </mx:Box>
          <mx:Box textAlign="center" width="100%" horizontalAlign="center">
            <mx:Button id="Submit" label="apply" click="applyFilter();" />
          </mx:Box>
        </mx:Form>
        <mx:Form width="100%" defaultButton="{imageSubmit}">
          <mx:TextInput id="imageUrl" text="http://f.hatena.ne.jp/images/fotolife/s/secondlife/20070312/20070312065825.jpg" width="100%"/>
          <mx:Button id="imageSubmit" label="set image" click="setImage();" />
        </mx:Form>
      </mx:Panel>
    </mx:VBox>
</mx:Application>

flex2/as3 の Embed/Binding メモ

21:39 |

画像や音をコンパイル時に組み込んでくれるよ。

    [Embed(source="example.jpg")]
    [Bindable]
    public var ExampleImage:Class;

とか class の内側に書き、クラスから呼び出す。ファイルパスは書き込んだソースからの相対パス、もしくは絶対パス(試してないけど)で。

で、Bitmap として使いたかったら

var exampleBitmap:Bitmap = Bitmap(new ExampleImage);

とかすれば扱える。mx コンポーネントを import しなくても使えた。これは flex2 の機能なのか mxmlc の機能なのか？[jitensya] な syntax って as3 にあったっけ？flex_devguide.pdf を検索したけどそれっぽい説明がなかったので追ってみる。

まずコンパイラの設定を見る。flex-config.xml にメタデータとして定義されてる。

<!-- Keep the following AS3 metadata in the bytecodes.                                             -->
<!-- Warning: For the data binding feature in the Flex framework to work properly,                 -->
<!--          the following metadata must be kept:                                                 -->
<!--          1. Bindable                                                                          -->
<!--          2. Managed                                                                           -->
<!--          3. ChangeEvent                                                                       -->
<!--          4. NonCommittingChangeEvent                                                          -->
<!--          5. Transient                                                                         -->
<keep-as3-metadata>
    <name>Bindable</name>
    <name>Managed</name>
    <name>ChangeEvent</name>
    <name>NonCommittingChangeEvent</name>
    <name>Transient</name>
</keep-as3-metadata>

へぇ(よくわかんないけど)。というわけで -keep オプション付きでコンパイルしてみてジェネレートされる *.as ファイルを見てみる。

package
{

import mx.core.BitmapAsset;

[ExcludeClass]
[Embed(exportSymbol="ColorMatrixFilterExample_ExampleImage", _resolvedSource="/path/to/example.jpg", source=
"example.jpg", _file="/path/to/ColorMatrixFilterExample.as", _column="10", _line="13")]

public class ColorMatrixFilterExample_ExampleImage extends mx.core.BitmapAsset
{
    public function ColorMatrixFilterExample_ExampleImage()
    {
            super();
    }

}

}

BitmapAsset の子クラスとして定義されてる。よしなに BitmapAsset/SoundAsset/FlexMovieClip なんかを生成してくれるのかな。

Binding で定義したクラスは BindableProperty なクラスに setter/getter でまとめられている。また mx.utils.ObjectProxy 周り使って、更新があったらイベント起こせるようになってるのかな。そのため Binding オブジェクトの値の変更があったらすぐに mxml での表示を変更できると。へぇ。

import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
import mx.core.IPropertyChangeNotifier;
import mx.events.PropertyChangeEvent;
import mx.utils.ObjectProxy;
import mx.utils.UIDUtil;

import Class;

class BindableProperty
{
        /**
         * generated bindable wrapper for property ExampleImage (public)
         * - generated setter
         * - generated getter
         * - original public var 'ExampleImage' moved to '_54677041ExampleImage'
         */

    [Bindable(event="propertyChange")]
    public function get ExampleImage():Class
    {
        return this._54677041ExampleImage;
    }

    public function set ExampleImage(value:Class):void
    {
        var oldValue:Object = this._54677041ExampleImage;
        if (oldValue !== value)
        {
                        this._54677041ExampleImage = value;
            dispatchEvent(mx.events.PropertyChangeEvent.createUpdateEvent(this, "ExampleImage", oldValue, value));
        }
    }
}