初めて学ぶCreateJS

Bitmapオブジェクトで外部画像を表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
まず、PreloadJSは使わず、外部画像ファイルをBitmapオブジェクトに読込んでCanvasに配置してみます。
講師:
04:17

字幕

EaselJS ライブラリでは Bitmap クラスを使うと 外部画像を Canvas に 表示することができます けれど それだけでは十分ではありません その問題点をご紹介します HTML ドキュメントを保存する 作業用のフォルダーには images というサブフォルダが 置いてあって その中に1つ png 画像が保存されています これを Bitmap クラスで 読み込んでみましょう HTML ドキュメントの内容を 確認しておきましょう まず body 要素が読み込まれた時 実行されるのは onload 属性に 設定された関数 initialize です これは script 要素に定義してあります この関数の中では まず canvas 要素を取り出します document.getElementById canvas 要素は Id に myCanvas という名前がつけてありますので これで canvas 要素の 参照が取り出せます そこで それを引数にして stage クラスのオブジェクトを作ります new createjs.Stage 引数に canvas 要素です これで Stage が出来上がります Bitmap クラスで外部の画像を読み込んで インスタンスを作ってみましょう まず変数は myBitmap とします new createjs のライブラリの中の Bitmap クラスです この中には画像の URL パスを指定します フォルダーは images 名前は Pen でした png ファイルです そして このインスタンスを stage に加えます 表示リストに加えます addChild ですね コピーしてタイプミスを防ぎます これでは まだ Stage には 表示されませんね 描画の更新が必要です stage.update 保存して確かめてみましょう 「ファイル」> 「ブラウザでプレビュー」を行います Canvas に画像が現れません これが問題です もっともスクリプトにエラーが 出ているというわけではありません どうすれば出てくるかというと リロードをします 外部画像を読み込んで Bitmap クラスで Bitmap オブジェクトを作り 表示します そして Stage の アップデートを行いますが その時 まだ画像の読み込みが 終わっていない場合があるわけです 今の場合がまさにそうです ですから 読み込み終わっていない内に Stage にアップデートをかけても 表示されません リロードをすると キャッシュが残っていますので間に合って その後 アップデートが行われますから ちゃんと表示される ということです 改めて JavaScript コードの方でも 確認しましょう Bitmap のインスタンスを作り Stage の子供として加える これ自体は問題はないんです 問題は読み込みが終わらない内に Stage の描画の更新が 行われていることです これを解決するには 「読み込み待ちをする」という処理が必要で CreateJS ライブラリの中では PreloadJS というものがありますので そうしたものを 利用する必要があるということです Bitmap クラスだけを使って 画像を読み込んだ場合の 問題点をご説明しました

初めて学ぶCreateJS

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

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

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

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

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