初めて学ぶCreateJS

インスタンスのカラーイメージをセピア調に変える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ColorMatrixFilterとColorMatrixオブジェクトを使って、インスタンスのイメージをセピア調に変えます。
講師:
06:41

字幕

EaselJS のフィルタの1つに カラーを調整できるものがあります そのフィルタを使ってカラーの画像を セピア調に変えてみましょう canvas に表示されている Bitmap のインスタンスですが クリックするとセピア調に変わりました この方法をご紹介します こちらが html ドキュメントです カラーを調整する為に 2つのフィルタを追加しています スクリプト要素をご覧ください 1つが ColorMatrixFilter クラスで もう1つが ColorMatrix クラスです これらの使い方についてご説明しましょう フィルタでオブジェクトの カラーを調整するには まず ColorMatrixFilter の オブジェクトを作ります 作り方はお約束通り new 演算子で createjs.ColorMatrixFilter そして( )の中にカラーを調整する その指定のオブジェクトを渡します カラー調整を指定するのが ColorMatrix オブジェクトです やはりインスタンスを new 演算子で createjs.ColorMatrix を呼び出して オブジェクトとして作ります 引数は4つあります 明度 コントラスト 彩度 色相です 画像編集のソフトで カラーを調整したことがあれば この4つのパラメータは 見たことがあるでしょう 指定数数字の範囲が違いますので 確認しておきます 明度は 256 諧調で ±255 の間です コントラストと彩度は ±100% 色相というのはホイルという 円形に並べたカラーで 色合いを指定しますので 度数で ±180 度ということになります このカラー調整を定めた ColorMatrix オブジェクトを ColorMatrixFilter の引数に渡せば カラーの調整をする フィルタがかけられます この html ドキュメントの JavaScript コードでは ぼかしフィルタが使われています インスタンスをクリックすると ぼかしがかかります その部分の処理を確認しておきましょう まず Bitmap インスタンスを作り その onClick イベントに setFilter という関数を定めています この setFilter の関数の中では Bitmap のインスタンスの filters プロパティに BoxBlurFilter のインスタンスを 配列に入れて設定しています そしてインスタンスに フィルタを適用するには cache メソッドを 呼び出す必要があります 範囲は画像全体ですので 左上隅 0, 0 から 幅と高さは Bitmap の image プロパティから 画像の参照をとり そこから幅と高さを取り出しています そして画像を stage.update メソッドで 更新すれば フィルターがかかり ぼかした状態の画像になります ぼかしの BoxBlurFilter はこのまま残し カラー調整のフィルタは 追加として加えたいと思います つまり配列にフィルタオブジェクトを もう1つ追加するということです その為には配列に直接 { } の中に 書き込んでしまうよりも 配列の push メソッドを使った方が 管理しやすいので その形に書き換えます filters という配列を作り そこに push で まずはぼかしの BoxBlurFilter を追加します そしてこの filters の配列を Bitmap オブジェクトの filters プロパティに設定するということです では配列にColorMatrixFilter も加えます ここはもうコピーしてしまいましょう push して new createjs.ColorMatrixFilter です ( の対応を間違えがちなので 閉じてしまいます そしてこの中に今度は ColorMatrix オブジェクトを入れます やはり new で createjs.ColorMatrix ) をすぐにやってしまいましょう 閉じ方の対応が合わないという エラーが出たりしますので まず最初 数値としては 25 これは明度です それからコントラストと彩度は 0 にして グレースケールにしてしまいます それからセピア調というのは オレンジ系ですね これは角度でいうと -150 度ぐらいになります では これで保存をして 確認してみたいと思います 「ファイル」メニューから 「ブラウザでプレビュー」します canvas にはカラーの はっきりした画像が表示されています これをクリックすると 2つのフィルタがかかります クリックしましょう ぼかしがかかると共に カラーが 彩度が落ちて セピア調の色に変わりました JavaScript コードで確認しましょう まずフィルタのかけ方は 配列にフィルタのオブジェクトを入れて インスタンスの filters プロパティに設定をします そして次にインスタンスに対して cache メソッドを呼び出し その範囲を引数で指定すれば フィルタがかかります 今回新たに加えたのは カラーを調整する ColorMatrixFilter です 引数にはカラー調整を定める ColorMatrix のオブジェクトを加えました 明度とコントラスト 彩度それから色相 といったものが指定できます この様な数値を指定すると セピア調に変えることができました

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

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

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

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