初めて学ぶCreateJS

Stageオブジェクトと表示リスト

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
EaselJSは、Canvasに表示されるオブジェクトに親子の入れ子関係をつくり、その階層全体を「表示リスト」としてまとめます。表示リストはStageオブジェクトを頂点に、ShapeやBitmapといったオブジェクトのほか、Containerオブジェクトによりツリー構造をなします。
講師:
07:26

字幕

EaselJS で作る Stage オブジェクトと 「表示リスト」という考え方について ご説明します まず 今開いている html ドキュメントを確認しましょう EaselJS は Canvas を使うライブラリですので canvas 要素が入っています そして JavaScript でコントロールするために id 属性が加えられていて myCanvas という名前になっています 後は 幅と高さ(width と height)を決めて canvas タグを閉じます 次に body 要素には onload 属性が定められています 従って body 要素が読み込まれると initialize という関数が 呼び出されます この initialize という関数は script 要素の中に書かれていて 現在は側だけです この中にスクリプトを 書きこんでいくことになります 忘れないうちに EaselJS のライブラリを 読み込んでしまいましょう script 要素を定めて 外部の JavaScript ファイルですから src(ソース)です そして現在 Dreamweaver を 使っていますけれども 「参照」でライブラリを 指定することができます クリックします lib というフォルダの中に EaselJS のライブラリが入っています easeljs- 0.5.0 はバージョンです 選んで OK です そして タグを閉じます これで EaselJS のライブラリが 読み込まれます EaselJS には Canvas が必要です したがって canvas 要素の参照を 見なければなりません 変数に取りましょう document の getElementById のメソッドです そして canvas の id 属性には myCanvas と名前を定めましたので これをコピーして持っていきます コピーは Dreamweaver の場合には Windows でしたら Ctrl キー Macintosh は Option キーを押しながら ドラックするとコピーができます タイプミスを防ぐために できるだけコピーを使うようにしましょう Canvas を使ったスクリプティングですと この後 canvas 要素を参照して getContext メソッドを呼び出し 2D コンテキストを取り出して 描画をするというのが普通です けれども EaselJS を使う場合には その必要はありません 代わりに Stage オブジェクトを作ります Stage オブジェクトとはどういうものなのか これからご説明します EaselJS では Canvas 上に置くオブジェクトを 階層構造で組み立てます Stage オブジェクトというのは その階層構造の頂点に来るオブジェクトです Stage 自体は目に見えませんけれども Canvas 上に描きたいものは Stage の子どもとして加えます そして その子どもの中には Container という ― さらに自分の子どもを持てる オブジェクトもあります そうすると Stage を頂点に 何階層ものツリー構造が作られます このツリー構造のことを 「表示リスト」と呼んでいます ですから EaselJS を使うには まず 頂点の Stage オブジェクト作る必要があります では Stage オブジェクトを どのように作るかです オブジェクトの作り方は JavaScript のお約束通りです 演算子 new の後にクラス名 ただし CreateJS Suite のクラスに アクセスする時には 必ず頭に小文字で createjs. をつけなければなりません ですから new createjs.Stage そして () の中には canvas 要素を引数として渡します クラス名の前についている createjs. これは 「名前空間(Namespace)」 という風に呼ばれます なぜ この名前空間を使うかと言うと 今 JavaScrips のライブラリというのは 世界中に様々なものが出回っています その時 偶然 全く関係無いライブラリで Stage というクラスがあるかもしれません そうすると 同じスクリプトの中で 同じ名前のクラスを2つ使うことはできません 重複が起こってしまいます それが起こらないようにように createjs. という固有の名前をつけて 重複を避けているということです ちょっと面倒臭いですけれども CreateJS のクラスの全てに createjs. が付きますので 注意をして下さい では Stage オブジェクトを作って加えます 変数宣言ですが ローカル変数にしてしまいますと Stage が消えてしまいますので グローバルな変数として stage を宣言します そして canvas 要素を取り出した後 stage に new createjs. を忘れない様に Stage ですね 引数としては取り出した canvas 要素 canvasElement という変数に入れました これを渡します 確認のため alert で Stage が出来たかどうか見てみましょう コピーです では ブラウザで確かめます ブラウザで確認する前には 必ず 「ファイル」>「保存」を行って下さい よく使いますので ショートカットを覚えた方が良いでしょう Windows は Ctrl Macintosh は Command キーを押しながら 「保存(save)」の S です この講座では いちいち保存については 今後申し上げません もっとも 保存しないまま ブラウザで確認しようとすれば 「保存しますか?」という ダイアログが出てきますので 特に心配しなくても大丈夫です では 「保存」を押して Dreamweaver の場合には 「ファイル」>「ブラウザでプレビュー」です そして ブラウザを選択します alert メソッドで開いた警告ダイアログに Stage と表示されています 見えませんけど とりあえず Stage は出来上がったようです OK ボタンをクリックします Stage オブジェクトの作り方と 表示リストについてご説明しました この後は Stage オブジェクトの子どもとして 目に見えるオブジェクトを 追加していくということになります

初めて学ぶCreateJS

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

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

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

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

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