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

BlurFilterクラスでドロップシャドウを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
BlurFilter.createDropShadow()メソッドは、インスタンスにドロップシャドウを加えます。
講師:
07:30

字幕

Starling フレームワークの フィルターを使って オブジェクトに影 ドロップシャドウを 付けてみたいと思います 使うクラスは BlurFilter です この Starling ルートクラスは BlurFilter クラスを使って オブジェクトそのものを ぼかしています 今回やろうとしているのは オブジェクトは そのまま ぼかさずに ぼけた影のイメージを オブジェクトの後ろに 配置しようということです ただ filter をオブジェクトに適用する 手順は同じですので この今のルートクラスの流れを 簡単に確かめておきましょう 先ずオブジェクトは Flash のライブラリにある イメージから image オブジェクトを作って それをぼかしています filter を適用するメソッドは 別に設けて setFilter ですね 引数には ぼかす filter を適用する インスタンスを渡しています これが filter を適用するメソッドです インスタンスを受け取ったら そのインスタンスに対して適用する filter のオブジェクトを作ります ぼかす場合には BlurFilter を コンストラクタですね new BlurFilter で コンストラクタを呼び出して オブジェクトを作ります 引数は与えることもできますが 与えなければ デフォルトの数字が適用されます そして その filter オブジェクトを インスタンスの filter プロパティに対して 代入することで filter の適用ができます それでは このオブジェクトをぼかす BlurFilter オブジェクトの 結果を確認しましょう fla ファイルの方に切り替えます そして制御メニューから ムービープレビューです filter のオブジェクトが適用されて オブジェクトが ぼけています では確認しましたので swf は閉じて Starling ルートクラスの方に戻って キーボードからファンクション 4 番で フルスクリーンにします ドロップシャドウの場合でも filter を適用する手順は変わりません ということは変わるのは このステートメントの右辺だということです new BlurFilter で コンストラクタを呼び出すと ぼかしになります そうではなく BlurFilter に対して メソッドを呼び出します BlurFilter. です createDropShadow という メソッドを呼び出します これでドロップシャドウを作る BlurFilter のオブジェクトが 変数に入ります そして そのオブジェクトを filter のプロパティに適用すれば これでドロップシャドウがかかります やはり括弧の中 指定できるものは あるんですが 指定しなければ デフォルトの値が適用されます では保存しましょう 結果を確かめますので fla ファイルの方に切り替えて 制御メニューからムービープレビューです オブジェクトはそのまま くっきりしていますね そしてちょっと見難いかもしれませんが 後ろにうっすらと グレーの影がかかっています この影の角度は大体 45 度というところでしょうか 確かめましたので swf のウインドウを閉じまして Starling ルートクラスに切り替え キーボードからファンクション 4 番で フルスクリーンにします createDropShadow メソッドに 引数を加えてみます 引数は多いので 長くなりますから改行しておきます では先ず引数の 1 番目 これは影の長さです デフォルトでは 4 なんですが 分かり易い様に影を長くしましょう 10 にします 次は影の角度です 先程 45 度という風に言いましたが 角度をじゃあ 30 度にしてみましょう 但し単位は 度数ではなくラジアンですので お気を付けください Nath.PI これが 180 度になりますので 30 度でしたら 6 で割れば良いですね そして 3 番目 色です 勿論デフォルトは一番無難な 黒なんですが 色を付けてみましょう 16 進数で指定します 0x で 16 進数の意味になりますので 0000 暗めの青 66 と これで試してみましょう ファイルを保存します fla ファイルの方に切り替えまして 制御メニューからムービープレビューです 先ず影が少し長くなりましたね そして角度がやや横になった 30 度ですからね そして色がうっすらと青くなっています 暗い青色です 確認できましたので swf は閉じて Starling ルートクラスに戻ります ファンクション 4 番で スクリプトをフルスクリーンに createDropShadow メソッドに渡す引数を もう少し足してみましょう カラーの後は アルファです アルファはデフォルト値が 0.5 半透明になっていますが 結果が分かり易い様に 完全な不透明 1 にしてしまいましょう そして もう 1 つ これは ぼかしの強さです 1 という値がデフォルトなんですが 少しぼかしを強めてみます 4 にします そして最後の引数は きめ細かさです デフォルト値 0.5 なんですが これは特に動かさなくて良いでしょう ということで ここまでを ファイルで保存します fla ファイルの方に切り替えて ムービープレビューで確かめましょう アルファを 1 にしましたので 特にオブジェクトと接する部分 殆ど塗りつぶしになっていますね ぼかしは強めました 確認ができましたので swf は閉じて ルートクラスの方に戻ってまとめましょう ファンクション 4 を 2 回押します 先ず filter を確認する手順の確認です filter を適用するメソッドを定めて そこに filter を適用したい インスタンスを渡します ここでは image オブジェクトですけれども 引数としては このメソッドの引数としては DisplayObject にしていますので image オブジェクト以外でも filter を適用することができます そして filter を適用する手順の確認です 先ず filter のオブジェクトを作ります 作ったら それをインスタンスの 適用したいインスタンスの filter プロパティに対して オブジェクトを代入すれば良いということです そして今回のテーマですけれども createDropShadow というメソッドです BlurFilter に対して直接呼び出します これでドロップシャドウの オブジェクトが作られます 引数がなくても デフォルト値が当てられるんですが 引数の意味は先ずは影の長さです 第 2 引数は影の角度 3 番目は影の色 4 番目はアルファ そして5 番目は ぼかしの強さですね 今回は省いていますが 6 番目にきめ細かさという 引数を与えることができます これでインスタンスに対して 影ドロップシャドウが適用できました

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

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

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

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

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

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