はてなブックマーク

drawの代表的な使い方として、オブジェクトの軌跡を描く使い方。徐々に消えていく処理はBlurFilterとColorMatrixFilterをapplyFilterを使って適用していますが、毎フレーム実行すると負荷が高いので、setIntervalを使って実行するレートを調整しています。 動きに関してはあまりにも適当なので、まだ未公開です。 import flash.filters.*; import flash.display.*; import flash.geom.*; var bmp:BitmapData = new BitmapData(360, 240, true, 0); var stage:MovieClip = this.createEmptyMovieClip("stage", 2); stage.attachBitmap(bmp, 1); var cs:MovieC

BitmapDataクラスのperlinNoiseメソッドを使用することで、Photoshopでいう「雲模様」の効果を作ることができます。例では簡易的に雲を表現しましたが、他のフィルタと組み合わせることで、煙や炎などのリアルな表現もFlashのみで表現することが可能になります。 ステージ上にアルファを含んだグラデーションで塗った長方形"gmask"を配置し、アルファチャンネルを利用したマスクとして雲に対して適用しています。アルファチャンネルのマスクを利用するためには、マスクと対象のムービークリップのcacheAsBitmapをtrueにする必要があります。 import flash.display.*; import flash.geom.*; var w:Number = 360; var h:Number = 150; var octaves:Number = 3; var bmp:B

ColorMatrixFilter クラスを使用すると、モノクロ効果や色相回転など、幅広い効果を演出できます。4×5マトリックス（行列）を用いて計20の値を設定する必要があります。 特にアルファの値を上手く操作して背景のオブジェクトと重ねることで、面白い効果を作れそうです。 下記ではムービークリップ [mc] をモノクロに変換します。これ以外の設定値は上のFLASHを参考に。 import flash.filters.ColorMatrixFilter; var matrix:Array = [ 1/3, 1/3, 1/3, 0, 0, 1/3, 1/3, 1/3, 0, 0, 1/3, 1/3, 1/3, 0, 0, 0, 0, 0, 1, 0 ]; var clr:ColorMatrixFilter = new ColorMatrixFilter(matrix); mc.filters

カラー値の操作について、Flash Player8 からはColorクラスの使用は推奨されていません。 代わりに ColorTransformクラスを使用することになります。 たとえば、今までムービークリップmc にネガのような反転効果を与える場合、以下のように記述していました。 var clr:Color = new Color(mc); var trans:Object = {ra:-100, rb:255, ga:-100, gb:255, ba:-100, bb:255, aa:100, ab:0}; clr.setTransform(trans); これと同様の効果をColorTransformクラスを使用して記述すると下記のようになります。 import flash.geom.ColorTransform; import flash.geom.Transform; var tr

またDisplacementMapFilterを使って、Photoshopのゆがみ（ワープ）フィルタ。モナリザを使ったモノはありがちですけど、他にいいネタも無かったので。 フォトショっぽくクリックで変化させてもよかったですが、あまり変化量を上げすぎると画像が荒くなるので、微妙な変化の方が使えるんだと思います。 import flash.display.*; import flash.filters.*; import flash.geom.*; var imgList:String = "image"; // リンケージ画像id var w:Number = 240; var h:Number = 360; var scalex:Number = 0; var scaley:Number = 0; var d:Number = 0; var scalemx:Number = 80; //

結構スタンダードなエフェクトだと思いますけど、一応のせときます。perlinNoiseで移動させた画像を置き換えマップに使用しただけ。マウス位置で変化量が変わります。他のフィルタと組み合わせて立体感を出すつもりでしたが、フィルタを重ねるとどうしても重くなってしまうので断念。ま、これだけでも充分重い気がしますけど。 数値を調整したり他のエフェクトと組み合わせれば、陽炎や磨りガラスなどの効果も可能ですが、モーションをつける場合は、ちょっと大きい描画領域に適用すると重くなってしまうので、なかなか使いどころが難しいです。 ちなみに、DisplacementMapFilterを適用する画像は表示領域よりも少し大きめの画像を用意する必要があります。そうしないと、フィルタを適用した際、アウトラインがはみ出してしまってかっこ悪いのです。 DisplacementMapFilterについては以前のエントリー

結構スタンダードなエフェクトだと思いますけど、一応のせときます。perlinNoiseで移動させた画像を置き換えマップに使用しただけ。マウス位置で変化量が変わります。他のフィルタと組み合わせて立体感を出すつもりでしたが、フィルタを重ねるとどうしても重くなってしまうので断念。ま、これだけでも充分重い気がしますけど。 数値を調整したり他のエフェクトと組み合わせれば、陽炎や磨りガラスなどの効果も可能ですが、モーションをつける場合は、ちょっと大きい描画領域に適用すると重くなってしまうので、なかなか使いどころが難しいです。 ちなみに、DisplacementMapFilterを適用する画像は表示領域よりも少し大きめの画像を用意する必要があります。そうしないと、フィルタを適用した際、アウトラインがはみ出してしまってかっこ悪いのです。 DisplacementMapFilterについては以前のエントリー

DisplacementMapFilterは、特定のビットマップ(置き換えビットマップイメージ)のピクセル値に基づいて、ムービークリップやビットマップを変形させることができます。PhotoShopでいうと、［フィルタ］メニューから［変形］→［置き換え］で同様の効果。 下図の場合、赤を基準にY方向へ移動させているため、置き換えビットマップの赤の値が中間値（128)より小さいピクセルほど下（正)方向に移動し、赤の値が大きいピクセルほど上（負)方向に変化します。 慣れるまで結構しんどいフィルタですが、よく使う変形のグラデーションパターンを一度作ってしまえば、あとは使いまわすことができます。特に厳密な計算をする必要がない場合は、ステージ上で置き換えマップを作ってしまってもよいかと思います。 以下のサンプルでは、埋め込みフォントを使用する際、必要な文字を埋め込んだダイナミックテキストを別途ステージに

スクリプトの内容は前回のエントリー（紙が燃えていくようなトランジッション）とほぼ同様ですが、今後も使い回せると思うのでClassファイルにしておきました。数値なども少しだけ変更を加えています。 前回はperlinNoiseでしきい値を計るソースイメージを生成していましたが、今回はあらかじめ用意した画像を読み込む形にしています。これで画像を入れ替えるだけでまったく違った効果ができてしまうわけです。 今回はPhotoshopで作った下の画像を使用。 黒い部分から白い部分にかけて消えていきます。この場合、中心から外側にかけて白を強くしているので、中心からイメージが切り替わるようになります。 ちなみに今回は1回目と2回目でマスク用のソース画像を反転させているため、逆再生になっています。 Transition.as import flash.display.*; import flash.filte

Flashやillustratorで描いたベクターデータは拡大しても表示が乱れず、データのサイズも増えないというメリットがある一方、複雑なベクターコンテンツを含むムービークリップを動かそうとした場合、毎フレーム描画に計算を要するために、どうしてもスムーズに動かない問題がありました。 これまではこの問題を解決するために、一時的に_quality プロパティの値を"LOW"に変更したり、ベクター画像をビットマップに書き出して置き換えたりしていたわけですが、Flash8からはcacheAsBitmapプロパティをtrueに設定することで、ベクターで描かれたオブジェクトがビットマップとしてメモリにキャッシュされ、複雑なベクターデータも高速に動かすことが可能になりました。 上の例では複雑なベクターで描かれたムービークリップを同時に20個移動させています。「cacheAsBitmap」にチェックを入れ

適当な３Ｄっぽいグラフィック。書き出すMC("dot")に円を並べて、タイムラインで拡大/縮小とグロー変化アニメーション。スクリプトでは、ドットを並べてMCの再生開始位置をずらすだけ。昔作ったものですが、グローやブレンドモード加えるだけでそれなりに変わるので面白い。 import flash.filters.*; var maxi:Number = 16; var margin:Number = 12; var w:Number = 360; var h:Number = 240; var blur:BlurFilter = new BlurFilter(3, 3, 2); var dots:MovieClip = this.createEmptyMovieClip("dots_mc", 0); dots._x = w/2; dots._y = h/2; dots.filters = [b

アニメーションはタイムラインで作成し、MCの配置とエフェクトのみスクリプトで記述。 import flash.filters.*; import flash.display.*; import flash.geom.*; var w:Number = 360; var h:Number = 240; var r:Number = 90; var maxi:Number = 50; var th_init:Number = 0; var th:Number = th_init/180*Math.PI; var bmp:BitmapData = new BitmapData(w, h, true, 0); var canvas:MovieClip = this.createEmptyMovieClip("canvas", 0); var bmc:MovieClip; var clr:Color