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

EaselJSを使うためのHTMLドキュメントの準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントにEaselJSを読み込んで、CanvasにStageオブジェクトをつくります。
講師:
09:48

字幕

CreateJS を使ったアニメーションの スクリプトを書く前に CreateJS を使うための HTMLドキュメントの基本的な 準備についてご説明します HTML のごく簡単な ドキュメントを開きました まだ CreateJS を使う準備は できていません 今回は CreateJS の中でも その中心的な役割を果たす EaselJS を使うという前提で 準備をしていきます EaselJS のアニメーションや インタラクションというのは 基本的に html ファイルの canvas 要素を使います ですから先ず body に canvas 要素を加えます canvas ですね そして JavaScript で読み込む時に 参照する名前を id 要素に付け加えます 名前は myCanvas としましょう これで JavaScript から 参照できます それから幅と高さですね width と height です そして canvas 要素を閉じます なお canvas そのものは 言わば透明というか 見えませんので style の要素を加えてあります canvas のアウトラインに 1 ピクセルの 黒いふちを入れました これをちょっと確認してみましょうか 今 Dreamweaver で コードを書いています Dreamweaver の場合には それをドキュメントの内容を プレビューすることができます 一旦保存しまして そしてファイルメニューから ブラウザーでプレビューです canvas の領域の周囲が 黒いアウトラインで囲まれました ではブラウザーを閉じます CreateJS は複数の ライブラリからなる統合ツールです 今回はその中の EaselJS ライブラリを使います EaselJS ライブラリを読み込んでおく 必要がありますので script 要素ですね そして src です ローカルあるいはブラウザーの見る サーバーですねサーバーに ライブラリが置いてあれば そのパスを書くことになります 今回は CDN を使ってネットワークの ライブラリを ロードしてくるようにしましょう 今まだパスがブランクですけれども script 要素は閉じてしまいます そして CreateJS のサイトに 行きましょう CreateJS のサイトで Download のボタンがありますので これをクリックします そして Visit The CDN というのが 書いてありますので このボタンで CDN のページが開きます CDN というのは Content Delivery Network の 略です この CreateJS のサーバーから ライブラリをロードすることができます 読み込みが早いですし サイトを移ってもキャッシュが働きます 自分のサーバーにライブラリを 置かなくても良いというのも利点ですね ではこの中で使うのは EaselJS バージョンがありますが最新版 0.6.0 を使うことにします これをリンクをコピーします そしてブラウザーは閉じてしまいましょう CreateJS のサイトからコピーした- パスをこのソースの所にペーストします これで EaselJS が読み込まれます それから実際の JavaScript コード これは script 要素に書きますので もう 1 つ script 要素です そして閉じましょう ここでは EaselJS を使うための 必要最小限のコードだけ 書き加えることにします 先ず EaselJS は Canvas 上を Stage という オブジェクトで管理します ですから それを入れるための 変数 Stage を用意します 次に初期化の関数を用意するのが JavaScript では一般です 関数はファンクションで始まり function 名は initialize にしましょう そして中括弧始まり中括弧閉じ この中に 初期化の関数の本体を書きます 初期化の関数ですから 初めにこの関数を呼びたいです それは幾つか方法はありますけれども body 要素に書き込むという方法を 今回は使います body 要素の onLoad という 属性の中で この関数を最初に読み込みなさい ということを書き加えます それは関数名 括弧括弧で良いので こちらをコピーしましょう Dreamweaver の場合には コントロールキーを押しながら あるいはコマンドキー Mac の場合はですね 押しながらドラッグするとコピーができます コマンドもしくは コントロールドラッグです これで最初にこの initialize という関数が呼ばれます 最初に行うべきことは EaselJS は canvas を 使いますので canvas 要素の参照を得ます その時 canvas 要素に付けた id この名前を使います コピーしておきましょう そしてドキュメント getElementById id 番号から参照を得るという JavaScript の関数です そこに今コピーしたものを ダブルコーテーションを付けて ペーストします 取った参照は とっておかなければいけませんので変数に 関数内で宣言する変数ですから ローカル変数と言われますけれども canvasElement にしましょう そのままですね これで canvasElement の 参照が得られました もう 1 つだけステートメントを書きます それは用意した変数ですね これは空っぽにしておいたら意味がありませんので この変数をコピーして持っていきます ドラッグコピーです ここに stage オブジェクト というものを作って入れてあげます この時は EaselJS の メソッドを使います オブジェクトを作る時は JavaScript 一般 new という演算子で コンストラクタというものを呼びます コンストラクタはクラスの名前 ですから今回は Stage というクラスの オブジェクトを使いますので Stage と 括弧括弧と付けるのが 一般なのですが CreateJS のライブラリは 全てクラス名の前に createjsドットと 付けることになっています ですから Stage オブジェクトを 作る時には new ワンスペース createjs ドット Stage 括弧でオブジェクトを作りますが 括弧の中には クラスによって何かを入れたり 入れなかったりします 今回は canvasElement どうするの ということになりますね canvasElement を Stage の コンストラクタと言いますが Stage 括弧括弧の中に コピーして渡します これで EaselJS ライブラリを 使う時の 必要最小限の JavaScript コードが 書き入れられました canvas も透明なら Stage も透明ですので ブラウザーで確認はしません 先程と同じ黒いアウトラインが 見えるだけです ですから何かを見せようと思ったら Stage の上に更に 目に見えるものを 置いていく必要があります では EaselJS を使う場合の html ドキュメントの準備をまとめます 先ず EaselJS は canvas を使いますので body 要素に canvas 要素を入れます そこには必ず id を付けてください この id で JavaScript は この canvas 要素の参照を得ます 大きさ width height は これはその場合によって変わってきます 次に呼び出す関数をここでは body 要素の onLoad に定めました 名前は initialize と しましたけれども その関数を定義しています 初期化の処理で初めにやることは ここに付けた canvas 要素の 名前を使って document.getElementById メソッドで canvas 要素の参照を取ります 次にこの参照を引数として Stage の変数を用意してありますが Stage のオブジェクトを作ります 作り方は new で createjs ドット Stage です そして Stage の変数に入れます これで EaselJS の 基本的な準備ができました それから EaselJS ライブラリの読み込み方 script 要素で読み込まなければ いけないのですが これは場合によって違ってきます サーバーにファイルを置いて それを読み込むという場合は そのパスを ソースの中に指定しますけれども ここでは CreateJS のサーバーから CDN で ライブラリを読み込みました こうするとどこから読み込んでも パスが一緒なので 多分ご覧になっても 分かりやすいかと思いました まとめは以上です

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

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

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

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

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

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