StarlingフレームワークによるStage3Dを使った2次元表現

BlurFilterクラスでオブジェクトをぼかす

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
BlurFilterオブジェクトをDisplayObjectインスタンスに適用すると、ぼかしが加えられます。
講師:
12:48

字幕

Starling フレームワークに備わった Filter のクラスを使って ステージに置いたオブジェクトの イメージをぼかしてみたいと思います ぼかしに使うのは BlurFilter クラスです この Staring ルートクラスは ビットマップのイメージから作った image オブジェクトを ステージの真ん中に置いているだけで まだぼかしは加えていません このルートクラスの内容を 確認しておきましょう fla ファイルの イブラリのビットマップには クラス名が付けてありますので そのクラス名を コンストラクタとして呼び出して BitmapData のインスタンスを作ります それを texture fromBitmapData メソッドによって Starling の texture に変換し そして その texture は image クラスのコンストラクタ new Image で 引数に渡して image オブジェクトを作ります そしてその image オブジェクトを Starling ルートクラスに addChild することによって ステージに表示します この 4 行は位置をステージの真ん中に image オブジェクトを 持ってきたという処理になっています このルートクラスの結果を確かめますので fla ファイルの方に切り替えて ムービープレビューを見ましょう 制御メニューからムービープレビューです ステージの中央に image のオブジェクトが置かれています 未だぼかしがかかっていません これがくっきりした状態です 確認ができましたので swf のウインドウは閉じて ルートクラスの方に戻り キーボードから ファンクション 4 番で フルスクリーンにします BlurFilter クラスを使って オブジェクトを加える処理を加えます 見易い様に少し畳んでおきましょう インポート文は畳みます それから位置決めの所も良いでしょう フィルターを加える 適用する処理は メソッドとして書き加えます 名前は setFilter としましょう そしてインスタンスを渡して そのインスタンスに対して ぼかしを加える という形にしたいと思いますので この変数をコントロール 若しくはコマンドでドラッグします メソッドはプライベートな function として加えます private として function 丸括弧 () 中括弧 { という記述はショートカットで加えます エスケープキーの f n の順番にキーを押していきます [esc] f n function 丸括弧() 中括弧 { までが入ります function 名 メソッド名は ここまでコピーしてしまいましょう コピーして ここにペーストです 型指定します このインスタンスは image クラスのオブジェクトなんですが filter は image クラスの親 DisplayObject であれば 全て掛けられれますので ここは image オブジェクト以外にも フィルターがかけられるように DisplayObject としましょう 親で型指定する分には問題ありません DisplayObject DisplayObject には Flash Action Script 3.0 定義済みの DisplayObject と Starling のクラスがありますので Starling のクラスの方を選択します そうするとインポート文に Starling の DisplayObject を 読み込むという ステートメントが入りました 戻り値は void です 戻す値はありません インデントを整えましょう filter を適用するには まず filter のオブジェクトを作ります 勿論コンストラクタですね 変数は myFilter にしましょう 型指定をします BlurFilter です BlurFilter も Flash の BlurFilter と Starling の BlurFilter もありますので Starling の方を必ず読み込みます またインポートステートメントが入ります Starling の BlurFilter が インポートされました そうしたら new で BlurFilter ですね 引数を渡すこともできますが デフォルト値が決まっていますので 先ずデフォルトで確かめてみましょう そしてこれを インスタンス引数に受け取った image オブジェクト image オブジェクトでなくても DisplayObject の子であれば大丈夫なんですが コントロール コマンド ドラッグで コピーします その filter と言う プロパティがあります Action Script 3.0 定義済みですと filters というプロパティで 似た機能は果たすんですが filter 単体ですので ご注意ください そこに対して この filter のオブジェクトを 代入します コントロール若しくはコマンド ドラッグで これで OK です 一旦ファイルは保存しましょう 結果を確かめますので fla ファイルの方に切り替えて 制御メニューからムービープレビューです image オブジェクトに ぼかしがかかって ペンギンが少しぼけていますね 確認ができましたので swf は閉じて Starling ルートクラスの方に戻ります キーボードからファンクション 4 番 2 回でフルスクリーンです BlurFilter のコンストラクタには 引数を渡しませんでした 引数を渡さないと デフォルトの値が適用されます けれどもどんな引数があるのかを 確かめておきましょう Starling フレームワークの マニュアルリファレンスの方を 確かめてみたいと思います リファレンスは Starling フレームワークのサイトから見ます サイトの URL はここです このトップページにヘルプという ボタンがありますので これをクリックします そして API Reference これがリファレンスです クリックです 今回 見たいのは BlurFilter で B ですから上の方にありますね 全てのクラスがあがっているんですが BlurFilter をクリックです BlurFilter クラスの コンストラクタが見たいので このページをスクロールしていきます public メソッドの 一番上 これがコンストラクタですね リンクが貼られていますのでクリックします 引数は 1 2 3 と 3 つあります もっとも英語でちょっと分かりにくい という方もあるでしょうし それから内部的な処理の方の話が 書かれているので そういう意味でも英語が分かっても 分かりにくい部分があります この BlurFilter については 私のサイトに日本語で解説していますので そちらもご紹介しておきましょう 私のサイトは FumioNonaka.com です Google の検索窓がありますので Starling の BlurFilter 辺りを入れていただければ 検索ができます ぼかしドロップシャドウ これがそうです BlurFilter コンストラクタは 上の方にあります 引数は先程確認した通り 3 つです 最初の 2 つが ぼかす強さなんですが 水平方向と 垂直方向に分けて指定ができます そして 3 番目は ぼかすきめの細かさ ということになっています いずれもデフォルト値は 1 になっているので 何も引数に渡さないと 全て 1 ということで処理されます では Starling ルートクラスの方に 戻りましょう BlurFilter コンストラクタに 引数を加えて結果を 確かめてみたいと思います ぼかす強さは x と y と 別々に設定できました 試しに x だけ大きめの値 y は 0 にしてみましょう ファイルを保存して 確認します fla ファイルに切り替えて 制御メニューから ムービープレビューです オブジェクトが水平方向にだけ ぼかされますので 何か水平に走っている感じになりますね では確かめたので swf は閉じて Starling ルートクラスに戻り ファンクション 4 番でフルスクリーンにします 今度は第 2 引数の 垂直方向も 4 にしましょう ファイルを保存して fla ファイルで ムービーファイルを確かめます 勿論ぼけぼけになる はずですね こんな感じで もう 何の絵だか分からない状態です このイメージをちょっと頭に 覚えておいてください では swf は閉じて ルートクラスに戻り ファンクション 4 番で フルスクリーンにします さて BlurFilter のコンストラクタに渡す 第 3 引数を加えましょう 2 つの引数は値を変えていません 4 のままです そして 3 つ目の きめの細かさにも 4 デフォルトの 1 よりも高い値を与えました ではファイルメニューで保存して fla ファイルに切り替えて ムービープレビューを確かめましょう ぼけては いますけれども ペンギンの姿は見えてきましたね きめの細かさというのは こういうことで ぼかす範囲を小さくとってぼかすんです ですからあまり境界が ぶれてしまうことが少なくなるんですね ですからぼかしてはいるけれども でも元のイメージが見える なんかピントを少し 外したような感じの イメージになっているかと思います では swf を閉じて またルートクラスの方に戻り キーボードのファンクション 4 番を押します BlurFilter コンストラクタに渡す 概算引数の値を 今度は極端に小さくしてみます 0.1 と ではファイルを保存します そして fla ファイルに切り替えて ムービープレビューです ペンギンどころか もはや画像の形が丸かった ということさえ分かりませんね ぼかす範囲を広げるというのは こういうことです 数字を小さくすると ぼかす範囲が広がります そして丸く抜いてはあったんですが コンピュータの内部では 画像というのは四角で捉えられていますので 結局四角いまま 大雑把にぼかしてしまうということで むしろ四角く見えてしまうんですね これではちょっと使えないと思います では swf は閉じます ルートクラスに戻って ファンクション 4 番で フルスクリーンにします BlurFilter コンストラクタに渡す 第 3 引数は多くの場合 デフォルトままで良いかと思います 先程ご覧に入れたような ちょっとピントがぼけたような感じが欲しいと そういう特別な場合以外は デフォルトにしておいて というのは あの範囲を きめ細かさを高めると やはり処理の負荷が増えてしまうんですね 多くの場合ぼかしを 強めたい弱めたいというのは 2 つの最初の引数で 定めることができますので 特別な場合だけ第 3 引数を 使うようにしたら良いと思います では BlurFilter を使って オブジェクトをぼかす方法について おさらいしましょう filter 全般は DisplayObject に対して 適用することができます そして先ず filter のオブジェクトを作ります 今回は BlurFilter ですので BlurFilter のクラスコンストラクタを new で呼び出します そして引数はオプションです 引数を定めなくても結構です 定める場合には 第 1 引数と第 2 引数は それぞれぼかす強さで 水平方向と垂直方向です そして第 3 引数は きめの細かさということになります filter のオブジェクトを作ったら それを DisplayObject またはそのサブクラスの インスタンスに対して適用します 適用するのは filter というプロパティに対して filter のオブジェクトを代入すれば結構です BlurFilter に限らず filter のオブジェクトを DisplayObject の インスタンスに適用するには このような手順で filter の適用ができます

StarlingフレームワークによるStage3Dを使った2次元表現

StarlingはFlash Player 11の新しい描画機能Stage3Dに基づいて作られた2次元の描画用フレームワークです。このコースではStarlingフレームワークによるクラス定義の基礎から、トゥイーンアニメーションやマウスインタラクション、そして最近のバージョンで実装された新しい機能まで解説していきます。

5時間09分 (40 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
プログラミング
価格: 3,990
発売日:2014年01月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。