Hatena::Groupsubtech

#生存戦略 、それは

-> 07 { 03 / 14 }

ConvolutionFilter Interface

23:41 | はてなブックマーク - ConvolutionFilter Interface - #生存戦略 、それは

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 | はてなブックマーク - flex2/as3 の Embed/Binding メモ - #生存戦略 、それは

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

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

flex2[Embed][Bindable]

15:38 | はてなブックマーク - flex2[Embed][Bindable] - #生存戦略 、それは

便利だ…

カンコーヒ

09:51 | はてなブックマーク - カンコーヒ - #生存戦略 、それは

フタを空けた後にカンをふって思いっきりこぼれた。人生二回目。もうだめかもしれんね。

ファン・サーヴィス [bitter]

09:36 | はてなブックマーク - ファン・サーヴィス [bitter] - #生存戦略 、それは

届いた、そうだamazonさんで予約してたんだ忘れてたタワレコにしておけばよかった><

雲一つ無い青空

09:35 | はてなブックマーク - 雲一つ無い青空 - #生存戦略 、それは

最近建物の凹凸があるとあそこのビルはジャンプで上れるよなーとか思ってしまう(riot act の影響)。

トラックバック - http://subtech.g.hatena.ne.jp/secondlife/20070314