CreateJSを応用したダイナミックなアニメーション

オブジェクトのカラーに重ね合わせの効果

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
長ね合わせたオブジェクトのカラー効果を設定すると、アニメーションの印象が変わります。
講師:
07:44

字幕

この JavaScript コードは ステージに 20 個のリングの オブジェクトを置いて それに時間差の トゥイーンアニメーションを与えています。 ちょっとブラウザーで アニメーションを見てみましょう ファイルのメニューから ブラウザーでプレビューします。 ドキュメントをロードすると ランダムな位置から 20 個のリングの トゥイーンアニメーションが 中心に向かって行われます。 更にステージ上をクリックすると そのクリックした位置に やはり 20 個のリングのトゥイーンが 大きいリングほど時間が遅れて 追従するような形で アニメーションします。 もっとも色が何か地味で 見栄えがしませんね。 ここにちょっと手を加えたいと思います。 ではブラウザーを閉じます。 JavaScript コードの流れを 簡単に確認すると 初期化の関数の中で 20 個インスタンスを 作っているのはここです。 ランダムな位置をとり Shape のインスタンスを 大きさを少しずつ リングの大きさを変えて作り ここでインスタンスの 座標の設定をしています。 それからトゥイーンの設定 20 個の リングを管理する配列を作って そしてステージに置いています。 この setAppearance という関数は ここにちょっと見えていますけれど 今のところインスタンスに x y 座標を設定するだけの とても地味な役割です。 ここに少し手を加えることに したいと思います。 関数名が setAppearance 見た目の設定というわけですから もう少し仕事をしてもらおう ということです。 ではどうするかというとアルファを 設定できるようにしましょう。 引数を 1 つ加えて nAlpha にします。 アルファの設定はもちろん 簡単ですね。 instance に対して ドラッグコピーします。 Ctrl もしくは Command ドラッグ。 ドット alpha です。 そして引数の値を設定する。 関数自体は別に 難しいことはありません。 ドラッグコピーします。 そうしたら関数を呼び出す- 初期化の関数から for 文の中で 呼び出している関数で 引数を加えるわけですが もちろん全員に同じアルファを 設定したのではつまりません。 アルファの値を中心は 1 つまり完全な不透明ですね。 外に行くほど大きいリングほど アルファを下げましょう。 ということでマイナスです。 カウンタが上がるほど 下げようというのですが この数値どれくらい比例されるかというのは 色々調整してみると良いのですが 私がやってみたところでは これくらいで良いかなというのが ちょっと小さいですけどね。 0.025 という値にしてみました。 ブラウザーで結果を確かめてみましょう。 ファイルは一旦保存して ブラウザーでプレビューします。 ドキュメントをロードすると アニメーションは 変わりませんけれども 外側のリングほどアルファが 下がっているのが分かります。 もっともまだ全然地味と 思われるかもしれません。 もう 1 つくらい設定を 変えてみましょう。 やはり先程の関数に ステートメントを加えます。 ではブラウザーは閉じます。 関数 setAppearance に ステートメントを加えます。 やはりインスタンスに対する プロパティなのでドラッグコピーします。 Ctrl もしくは Command ドラッグです。 ちょっと長い名前なんですけれども composite でまだ終わりません。 Operation compositeOperation という 長い名前のプロパティです。 そして ここには文字列で 設定を書きます。 幾つかのオプションがあるのですが lighter としています。 どんな設定なのかというのを 口で説明するのは ちょっと難しいので ともかく結果をご覧に入れましょう。 ファイルは保存します。 そしてブラウザーでプレビューします。 ドキュメントがロードされると アニメーションが始まります。 アニメーションそのものは 先程と変わってはいません。 けれども何か光っていますね。 これが compositeOperation という効果で 色の演算にかかわるような 処理になっています。 やはり口で説明しづらいので 別のアプリケーションで ご説明しましょう。 Fireworks CS6 を開きました。 こうした画像の編集を行うソフトでは レイヤーでオブジェクトを扱います。 そして そのレイヤー同士の 色の演算が オペレーションできるように なっています。 Fireworks CS6 でも同様で この 2 つを選択し レイヤーですね。 その上の方に 描画モードというのがあります。 これを選択してみます。 色々 2 つのレイヤーの色を 合成する方法があるんですけれども その中の加法というのを 選んでみます。 これが先程の compositeOperation の 効果と同じです。 composite というのは 合成なんですね。 ですから今回は カラー合成をしました。 そして今の加法 それから先程 JavaScript で 設定した- lighter という設定というのは 2 つのカラーが足し合わされて 明るくなるということなんですね。 CreateJS の compositeOperation という プロパティは HTML5 Canvas の globalCompositeOperation という プロパティから持ってきているようです。 ですから CreateJS の EaselJS のリファレンスを見ると Canvas の globalCompositeOperation の 例を見てくださいということで リンクが張ってあったりします。 それはちょっと英語版なので これは私が Google で探してみた サイトですけれども この compositeOperation の 設定について興味がある方は Canvas の globalCompositeOperation を 調べてみると良いでしょう。 HTML ドキュメントの JavaScript コードの方に 戻ってきましたので おさらいしましょう。 今回は Shape のリングの 見た目を設定する目的で 設けた SetAppearance という 関数に手を加えました。 先ず第 1 に引数を 1 つ加えて アルファが設定できるようにしました。 これは 20 個リングを作る中で 関数が呼び出されていますが そこでカウンタによって 値を変えることにより 中心は完全に不透明 外側に行くほどアルファを下げる という形にしました。 もう 1 つはちょっと変わっている 長いプロパティですが compositeOperation これはオブジェクトが重なった時の 色の演算を定めるプロパティで lighter というのが 結構楽しいんですけれども 2 つの色を合成して 明るくするという設定になります。

CreateJSを応用したダイナミックなアニメーション

このコースではCreateJSの基礎を学んだ方に、ダイナミックでインタラクティブなアニメーションの作り方を解説します。JavaScriptであまり扱われない項目や、数学や物理などスクリプト以外の考え方も合わせて解説しています。CreateJSでぜひFlashに負けないコンテンツを作ってみましょう。

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

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

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

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