初めて学ぶCreateJS

Shapeオブジェクトを表示リストに加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Stageオブジェクトの表示リストにShapeオブジェクトを子として加えます。Shapeオブジェクトには、後でベクターグラフィックスを描きます。
講師:
04:53

字幕

stage オブジェクトの子供として shape オブジェクトを作り その shape オブジェクトを子供として stage オブジェクトの表示リストに加える という手順をご紹介します この JavaScript コードは body 要素の onLoad で呼び出される 初期化の関数 initialize という名前ですけど そこで canvas 要素を作り その canvas 要素に対して stage オブジェクトを作っています 次に shape オブジェクトを作って その shape オブジェクトを stage オブジェクトの表示リストに加える ということになります そのメソッドをご紹介しましょう shape オブジェクトというのは それ自体は初め透明です けれど JavaScript で ベクターグラフィックを描くことが出来ます その作り方はお約束通りです new 演算子の後にクラス名 但し createjs という 名前空間を付けるのを 忘れないようにしてください そして () です 作ったオブジェクト shape オブジェクトを子供として stage に加える と その場合には addChild というメソッドを使います そして引数に加えたい 子オブジェクトを定めます さて stage に加えると言ったのですが この文法の説明では Container オブジェクト というふうに書いてあります 実は stage オブジェクトというのは Container オブジェクトでもあるんです その意味をちょっとご説明します さて easelJS のサイトを開きました このサイトをスクロールしてみると Online Documentation というボタンがあります ここでメソッドやプロパティのリファレンス 説明を見ることが出来ます そして stage オブジェクトについて 調べたいと思います これが stage オブジェクトの説明です さて ここを見て頂くと stage クラス stage オブジェクトを作る stage クラスは extends Container とあります extends というのは 拡張するという意味で Container を拡張して stage が出来上がっているということです つまり Container クラス Container オブジェクトの機能を持っていて それにプロパティやメソッドを付け加えて stage というクラスが出来上がり stage オブジェクトを作る ということなんです ということは stage オブジェクトは Container オブジェクトでもあります Container オブジェクトの機能を 持っているということですね この extends というのは 拡張するということですが プログラミングでは Container を 継承して stage クラスが出来上がっている という言い方をすることもあります stage クラスは Container クラスを継承します ですから Stage オブジェクトは Container オブジェクトでもあるのです ですから Container クラスに定められた addChild というメソッドを使って 子オブジェクトを持つことができる ということです shape オブジェクトを作って stage オブジェクトの― 表示リストに加える というステートメントを 書いてみたいと思います まず shape オブジェクトを作ります myShape という名前にします new の後 createjs . shape ですね そして stage に対して addChild まとめコピーしましょうか myShape と alert の中には myShape が 出来上がったかどうか確認するために myShape を引数とします 保存して確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します 警告ダイアログには Shape と表示されていますので shape オブジェクトが見えませんけれども 出来上がったようです では OK ボタンをクリックします shape オブジェクトの作り方と stage オブジェクトへの 子オブジェクトの加え方 addChild メソッドについて ご説明しました 今は shape には何も 描かれていませんので 次のステップとしては shape オブジェクトに ベクターグラフィックを描く ということになっていきます

初めて学ぶCreateJS

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

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

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

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

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