VKontakte用のアプリケーションを作成する例でPixel Benderフィルターを使用する

この記事は、ユーザーnamataの要求に応じて、 ここで取り上げたトピックを継続するために作成されました 。 この記事では、アプリケーションでのActionScriptフィルターとPixel Benderフィルターの使用に焦点を当て、この問題で脇に置くことができる落とし穴に焦点を当てます。 フラッシュの達人や彼らのような他の人は、お茶を飲みに行くことができます。 彼らはこの記事に興味を持ちそうにありません。 しかし、これらのことを熟知しているだけの人にとっては、この記事は再び熊手を踏まないようにするのに役立ちます。







だから！ どこから始めますか？..まあ、「VKontakteの理由」という質問から始めるのがおそらく良いでしょう。 答えは簡単です：私は彼らのAPIを理解したかったです:)実際、これは重要ではありません。 サードパーティのサーバーでホストされているアプリケーションの状況は、サイトでホストされているアプリケーションの状況とは多少異なるだけです。 しかし、まず最初に。



この記事では、フィルター自体の作成の問題については触れません。 あなたはすでにそれらを持っていると仮定します。 ええ、少なくとも1つは...まだそうでない場合は、 ここにいくつかの例があります。 拡張子が.pbjのフィルターファイルが既に手元にある場合はどうしますか？



Pixel BenderフィルターをFlash / Flexアプリケーションに接続するには、少なくとも2つの方法があります。 最初の方法では、メタタグを使用してフィルターを埋め込みます。

[Embed(source="SomeFilter.pbj", mimeType="application/octet-stream")]

private var _someFilter:Class;



この場合、およそ次のシナリオでさらにフィルターが使用されます。

var shader:Shader = new Shader(new _someFilter() as ByteArray);

var shaderFilter:ShaderFilter = new ShaderFilter(shader);



var bitmap:Bitmap = new Bitmap(someBitmapData);

bitmap.filters = [shaderFilter];



filtersプロパティはフィルターの配列です。 ただし、配列の最後に新しいフィルターを追加するだけでは（たとえば、プッシュ（[...]）メソッドを使用する場合）、このフィルターを使用する必要はありません。 最初にフィルターを配列に追加してから、この配列をfiltersプロパティに再割り当てする必要があります。



2番目の方法では、実行時にフィルターをロードします。

var urlLoader:URLLoader = new URLLoader();

urlLoader.dataFormat = URLLoaderDataFormat.BINARY;

urlLoader.addEventListener(Event.COMPLETE, onLoadComplete);

urlLoader.load(new URLRequest("SomeShader.pbj"));

var shader:Shader;



function onLoadComplete(event:Event):void {

shader = new Shader();

shader.byteCode = loader.data;



var shaderFilter:ShaderFilter = new ShaderFilter(shader);

var bitmap:Bitmap = new Bitmap(someBitmapData);

bitmap.filters = [shaderFilter];

}



一般に、フィルターをロード（または埋め込み）した後は、フィルターが何であるかは関係ありません。PixelBenderまたは基本言語フィルターで記述されています。 それらのさらなる使用法はほぼ同様です。

では、石はどうですか？

次に、アプリケーションでこれらのフィルターを使用する機能について説明します。



商業休憩 ：

私が開発したアプリケーションは、画像の明るさ、コントラスト、彩度、明度などの特性を変更できる小さなフォトエディターです。 すべての画像チャンネルの値と各チャンネルを個別に変更できます。 フィルタのしきい値を設定することもできます。



アルバムの選択：







写真の編集：







最初に話した落とし穴は、APIを使用して画像（この場合はユーザーの写真）を取得できることです。 しかし、画像データにアクセスすることはできません:)私は何について話しているのですか？ ここに何があります：



興味のある写真へのパスを含む文字列をサーバーに詰め込んだ特定の変数があると仮定します（サーバーへのリクエストの結果としてこのパスを取得しました）。 次に、FlexフレームワークのImageクラスを使用して、次のように記述します。

[Bindable]

private var _photoSrc:String = "path/to/image";

<mx:Image id="curPhoto" source="{this._photoSrc}" />



さらに、コード内のどこか（私の場合、これはスライダースライダーをドラッグするイベントハンドラーで発生しました）、次のように記述します。

curPhoto.filters = [shaderFilter];



フィルターが適用されているようです->画面上の画像は少し異なっています->満足しています-> VKontakteサーバーにアップロードできます。



しかし、ちょっと待ってください。 この場合、元の画像とまったく同じ画像がサーバーに送信されます。 フィルターがねじ込まれていませんか？ まったくありません。



別のシナリオを検討してください。



Loaderクラスを使用して画像をロードしたとします。 この方法を使用するには、2つの重要なポイントがあります。



1. Loaderクラスのオブジェクトのload（）メソッドには、通常、次のシグネチャが必要です。

loader.load(new URLRequest(this._photoSrc), new LoaderContext(true));



メソッドの2番目の引数は、最初の引数がtrueになるLoaderContextクラスのオブジェクトでなければなりません。 この結果、Flash Playerは画像ファイル自体のダウンロードを開始する前にセキュリティポリシーファイルをダウンロードしようとします（ユースケースSecurity.allowDomain（ "*"）。この場合はフィードしません）。



2.イベントハンドラーEvent.COMPLETEには、次のものが必要です。

var bitmapData:BitmapData = new BitmapData((event.currentTarget as LoaderInfo).content.width, (event.currentTarget as LoaderInfo).content.height);

bitmapData.draw(this.loader);



this.bitmap = new Bitmap(bitmapData);

this.curPhoto.source = this.bitmap;

this.bitmap.filters = [shaderFilter];



重要なことは、this.loader.contentをdraw（）メソッドに渡すのではなく、this.loaderオブジェクト自体を渡すことです。 なぜそうなのか、それはバグなのか機能なのか？ 正直わかりませんでした。 しかし、それは機能し、他のすべてのオプションはサンドボックスのセキュリティポリシーに違反します。



したがって、ビットマップオブジェクトはポケットにあり、表示リストに追加し、フィルターを適用して、サーバーにアップロードできます。 物語は終わりですか？ そうでもない。



2つ目の落とし穴は、 すべてのフィルターが同等に役立つわけではないことです。 実際、filtersプロパティを介してフィルターを適用する場合、この画像自体のデータには適用せず、この画像の表示オブジェクトにのみ適用します。 BitmapDataクラスには実際の画像データが含まれ、Bitmapクラスには表示リストに含めることができる表示オブジェクトが含まれていることを思い出してください。 覚えているように、Bitmapオブジェクトのfiltersプロパティにフィルターを割り当てました。つまり、BitmapDataオブジェクト自体（this.bitmapオブジェクトのbitmapDataプロパティに含まれる）は変更されないままでした（ロードしようとしたときに基本的に同じことが起こりました）上記の場合、サーバーへのImageオブジェクトのインスタンス）。



解決策は明らかなようです-applyFilter（[...]）メソッドをいくつかの中間BitmapDataオブジェクトに適用する必要があります（この場合、メソッドの最初の引数はthis.bitmap.bitmapDataプロパティのBitmapDataオブジェクトになります）。 しかし、私の場合、いくつかのプロパティを変更するためのサポートが実装されると、後続の各フィルターのアプリケーションは前のフィルターのすべての変更を上書きします。 つまり 操作後は、最後のフィルターの適用による変更のみが表示されました。 残念ながら、このメソッドで1つのフィルターではなく、フィルターの配列を使用することはできません。

どうする？

解決策はやや珍しいことが判明しました。 Imageクラスオブジェクトを覚えていますか？ ここで彼は重宝しました。 サンプルコードを次に示します。

var bitmapdata:BitmapData = new BitmapData((curPhoto.content as Bitmap).width, (curPhoto.content as Bitmap).height);

bitmapdata.draw(curPhoto.content as Bitmap);



var jpgEncoder:JPGEncoder = new JPGEncoder(85);

this.jpgStream = jpgEncoder.encode(bitmapdata);



// ...



つまり BitmapDataクラスの中間オブジェクトを作成し、その中にImageオブジェクトのコンテンツをレンダリングしました。 思い出してくださいが、以前に、ビットマップクラスのthis.bitmapのインスタンス（フィルターを適用したもの）をクラスImageのオブジェクトのソースプロパティに割り当てました。 これは、実際には、フィルター自体を適用して画像自体のデータを操作したのではなく、その表示オブジェクトのみを操作したことを意味します。



商業休憩 ：

アプリケーションにフィルターを適用した結果を示すために、フィルターを適用する前後のスクリーンショットをいくつか示します。



編集前の写真：







...以降：

トピックに関するいくつかの考え：

1.原則として、現在アプリケーションにあるパラメーターを編集するには、ActionScript言語の畳み込みフィルター（ConvolutionFilter）を使用することもできます。 私が知る限り、それで十分でしょう。 しかし、私はPixel Bender'omをうまく処理したかっただけです:)）。 Pixel Benderは、複雑なフィルターの作成に適しています。 画像（より正確には、ピクセル）を使用する方が簡単で理解しやすいです。 畳み込みフィルターを使用する場合、行列を操作する必要があります。 一般的に、これは誰にとっても個人的な問題です。



2. Pixel Benderフィルターは、実行時にロードするよりもプロジェクトに埋め込む方が適切です。 それらは十分に軽量です（私のフィルターはどれも1キロバイト以上の重さはありませんでした）。 余分なコードは役に立ちません。



3. VK APIは一般的に優れています。 管理者による検証の少し面倒な段階。 FLASH APIグループの「ディスカッション」セクションのトピック「アプリケーションの作成に関する質問」で他の開発者の質問と回答を読んで、アプリケーションが承認されるためには、すべての要件を満たすだけでなく、適切なフェーズがあることが必要であることに気付きました月（そして惑星のパレードはキャンペーンを傷つけないだろう...）。 おそらく、申請が初めて承認されたのは幸運だったでしょう。 ちなみに、このアプリケーションは1週間でゼロから作成され、ほぼ1週間チェックされました...もう少し面白かったでしょう。



4.開発者からのフィードバックにまったく満足していません。 はい、FLASH APIグループがあります。アプリケーションの作成について質問できるトピックがあります。 しかし！ 私が理解しているように、質問は原則としてサイトの管理に関係のない人々（つまり、ほとんどの場合、すでに衝突した他の開発者）によって回答されます。 その他。 1つの質問に対する答えを探していたとき、2つのことを理解しました。

1. FLASH APIグループのこのスレッドの質問は、せいぜいそれぞれ約5回繰り返されます。
2. ダンベルにならないように、このスレッドで私の質問に対する答えを正直に見つけようとしました。 ロジックは単純でした。以前は誰かがこれに対処しなければなりませんでした。 しかし、それを気にして、「二十から三」ページに到達して、私がすでに探していたものを忘れていたことに気づきました。 サイト管理者の近くに誰かがこの投稿を読んでいるなら、あなたは恥ずかしいはずです。 完全に検索も構造もありません。
   
   

PS：さて、トピックの最後に、アプリケーション自体へのリンクを示します。 プロジェクトを拡張するためのすべての提案/提案を歓迎します。 ユーザーがこのアプリケーションを気に入ったら 、 picnik.comのフォトエディターにあるほぼすべてを実装できます（もちろん、VK APIのフレームワーク内にも）。