CreateJS実践講座

CanvasにStageオブジェクトをつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLドキュメントに加えたcanvas要素をもとに、EaselJSのStageオブジェクトをつくります。
講師:
06:24

字幕

このレッスンでは html ドキュメントに キャンバス要素を加え その上に CreateJS で アニメーションや描画を行う時の 一番土台となる Stage というオブジェクトを作ります 今 画面には 既にキャンバス要素が このオーダーの中に含まれています Stage 自体は透明で見えませんので JavaScript のアラートで 確認するようにします Dreamweaver で開いた html ドキュメントは まだキャンバス要素が加えられていません また CreateJS の中の EaselJS を読み込んだだけで Stage オブジェクトも作っていません このアラートは EaselJS が 読み込まれたかどうかの確認用ですので 一旦 コメントアウトしておきます まず キャンバス要素から加えましょう に加えます として JavaScript で使うための ID 属性を設定します 「 myCanvas 」としましょう これを後で JavaScript から 取り込みます そして 幅と 高さです 幅は 240 小さめです 高さは 180 とします そして キャンバス要素 canvas タグを取ります キャンバスには まだ何も書いていませんけども style (スタイル)の方で border (ボーダー)の設定がしてあります 1ピクセルの実線の 黒いボーダーが付きますので キャンバスが加わったかどうか 確認できますので 保存して確認しましょう ファイルを保存して ブラウザでプレビューします 黒い縁(ボーダー)が付きましたので これがキャンバスの領域です では Stage オブジェクトを作ります JavaScript コードはここに書きます そして Javascript を 実行するタイミングですが ドキュメントが読み込まれたところで 実行したいと思います その為に に onLoad 属性を加えます そして 読み込まれた時に実行したい 関数の名前をこれから定義します 「 initialize 」としましょう この関数を スクリプト要素の中に書きますので コピーしてしまいましょう そして この中に 関数( function )として定義します initialize()[ ] です 作りたいのは Stage オブジェクトです そして Stage オブジェクトに対する 設定を行うのですけれども とりあえず 作るだけ作ってみてから 動作の確認をしていきたいと思います (new createjs.Stage()) これで ちゃんと EaselJS が 読み込まれていれば Stage オブジェクトが とりあえず作られます ただ 作られただけでは 何も起こりませんので アラートで確認します 保存をして ブラウザでプレビューしましょう アラートが出ました Stage と書かれていますので Stage オブジェクトが出来たことは これで確認できました では Stage に対する設定を これから加えることにしましょう Stage オブジェクトは 正しくは Stage という コンストラクタの中に キャンバス要素を渡さなくてはいけません キャンバス要素には ID として 「myCanvas 」と名前を付けましたので これを使います これを覚えておいて 要素を取ってくるのは Javascript の 通常のお約束通りです 変数にそのキャンバス要素を取ります 名前はもう 「 canvas 」にしておきましょう そして document.getElementById これで コピーしておいた 「 myCanvas 」という ID 属性を 渡すことにより キャンバス要素が取り出されました そうしたら Stage を変数に入れるのですが この Stage の変数は function の外に グローバルに設定しておきましょう 名前も「 stage 」と そのままです この「 stage 」に対して 新たに作った Stage オブジェクトを 格納します これをこのままコピーしちゃいましょう コピーではなく 移動ですね 移動してしまいます そして ( ) の中には「 canvas 」 これはコピーします Dreamweaver の場合 ドラッグしながら キーボードの Mac はオプションキー Windows は Alt キーを押しながら ドラッグすると コピーになります これでオブジェクトが出来ました では 本当に出来たか確認するために alert の中には 今 変数で入れた― オブジェクトと言うことで 「 Stage 」を設定します これで確認しましょう ファイルを保存して ブラウザでプレビューです 先ほどと同じアラートですけれども 変数を渡しましたので 変数の中にちゃんと Stage オブジェクトが出来上がって それがアラートで表示されました これで 確かに 目では見えませんけども Stage オブジェクトが出来上がりました この上に CreateJS の アニメーション描画が行われます このレッスンでは html ドキュメントにキャンバスを加え そのキャンバスに基づいて EaselJS の Stage オブジェクトを作りました キャンバスは canvas 要素として に加えます そして その ID を Javascript のコードでは getElementById で 要素の参照を取ってきて それを引数に (new createjs.Stage()) ということで Stage オブジェクトを作りました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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