初めて学ぶCreateJS

読込んだ外部画像ファイルをPreloadJSで描画する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PreloadJSを使った外部ファイルを読込む基本の手順についてご説明します。読込み終えたときの処理は、イベントハンドラで定めます。
講師:
06:00

字幕

外部ファイルの読み込み待ちをする PreloadJS についてご説明します EaselJS の Bitmap クラスを使えば 外部の画像ファイルを読み込んで キャンバスに表示することができます 但しステージの描画の更新が速すぎると この画面のように画像がでてこない ということが起こります ブラウザで改めてリロードすれば 表示されるのですが 読み込み待ちをしなければ 最初には失敗してしまう ということがあるわけで これを避けるために PreloadJS のライブラリをどう使うか ということをご説明していきましょう 今ご覧に入れた html ドキュメントの JavaScript コードがこちらです stage を作ったら Bitmap クラスで URL パスを指定してインスタンスを作り それを stage に addChild で加えます ここまで良いんですね 所が stage に対して update メソッドを 呼び出し 描画を更新する この時にまだ画像が読み込み終わっていないと 先程のように画面が真っ白 ということが起こってしまうわけです これを防ぐために PreloadJS のライブラリを どう使えば良いのか そのメソッドをご紹介します PreloadJS での画像の読み込み待ちには 3つのステップを使います まず第一はお約束通り new 演算子で PreloadJS のオブジェクトを作ります 引数には XMLHttpRequest を使用するか しないかという true か false かを入れます 今回は使用しませんので false を入れます 次に画像ファイルの読み込みを行います これは PreloadJS の loadFile というメソッドです そして引数には 読み込みファイルの URL を渡します これだけでは読み込み待ちがされないですね 読み込み待ちは PreloadJS オブジェクトに対して onFileLoad というイベントの 「ハンドラ」関数を定めます つまりファイルの読み込みが終わったら この関数を実行して下さい という指定をするわけです 順番としては この読み込みの前に ハンドラを定める必要があります PreloadJS は独立のライブラリですので script 要素に読み込んでおく必要があります script で src です そして JavaScript のファイルを DreamWeaver では この参照ボタンで指定することが出来ます lib というフォルダに 入れてあります PreloadJS を選びます そして script タブを閉じます PreloadJS を使った 読み込み待ちに入る前に 後々扱いやすいように 変数を2つ定めます 1つ目は Bitmap の オブジェクトを入れた変数なんですが これは他の関数からも扱えるように ローカル変数ではなく 関数の外にだします その上でこの変数を 元に戻します もう1つは このファイルのパスです これも変数に入れておきます file という名前にしましょう そして この変数に パスの文字列を渡します コンストラクタ Bitmap の中には 変数を渡せば良いですね それでは PreloadJS を使った 読み込み待ちの処理です 3つのステップでした まずは変数に オブジェクト createjs.PreLoadJS ですね のインスタンスを作ります 括弧の中は false でした そして読み込み終わったら 何をするのかという ハンドラを定めます onload... OnFileLoad ですね まだ関数は定めていませんが draw という名前にする予定です そのうえで このオブジェクトに対して ファイルのロードを行います loadFile と 読み込みのパスは 変数にとりましたので file とします 後はハンドラの関数 draw を定めるだけです function で draw 何をやるかといいますと とりあえずは stage の updateですね 保存をして ブラウザで確かめましょう 「ファイル」メニューから 「ブラウザでプレビュー」です キャンバスにきちんと画像が表示されました 今度はキャッシュをクリアしても 最初から画像が表示されるようになります PreloadJS を使った3つのステップで 画像の読み込み待ちと 描画をする方法をご説明しました

初めて学ぶCreateJS

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

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

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

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

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