初めて学ぶCreateJS

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PreloadJS.loadManifest()メソッドを用いると、複数ファイルの読込みが一度の呼出しで定められます。引数に渡すのは、読込むファイルを納めた配列です。
講師:
09:13

字幕

PreLoadJS で 複数の画像を読み込んで その画像の情報を元に配置するという 方法についてご説明します この HTML ドキュメントの JavaScript コードは 一つの画像だけを読み込んでいます 流れを簡単に確認しますと― stage を作ったら 読み込み待ちの処理ですね PreLoadJS のオブジェクトを作り ロードが済んだ場合の イベントハンドラを定めます そしてファイルをロードします 一方で Bitmap のインスタンスを作ります そして stage に このインスタンスとして加えます 読み込み終わったときのハンドラは stage の描画を update メソッドを呼び込んで 更新をします これで読み込み待ちをして 画像が読み込まれたあと 描画の更新が行われるわけです 画像を一つ読み込むだけでしたら これでも構わないのですが 複数の画像を読み込む用意として 少しスクリプトの形を変えます まず Bitmap インスタンスを作って stage の子供として加える― この処理は 画像の数だけ 行わなければいけません ですからここに一回だけ 書いただけでは駄目ですね 実は画像が一つ読み込まれる度に onFileLoad のイベントハンドラは 呼び出されます ですから画像が二つあれば この draw は二回実行されるんですね ということでこの二行は draw の中に移します そして Bitmap のインスタンスは 画像を読み込む度にまた新たに作って つまり上書きしてしまいますから ローカル変数で構わないですね function の外に宣言した変数は もう要りません まずここまでで動作に問題がないか 確認しておきましょう ファイルを保存したら 「ファイル」メニューから 「ブラウザでプレビュー」です スクリプトの処理の中では 変えましたけれども 実質的な内容は変わっておりませんので キャンバスの左上隅に画像が配置されました 上と左側にマージンを取りたいと思います 後々画像を複数配置しますので XY 座標は変数として宣言することにします この Bitmap はもう要らないので 消してしまって X 座標は nX = 10 ピクセルにしておきましょう Y 座標は nY 同じく10 ピクセルです そしてこの値を― onFileLoad のハンドラ 関数 draw で設定することにします Bitmap インスタンスの x 座標を 変数 nX として y 座標を... これはコピーしてしまいましょう nY とします 保存したらブラウザで確認します ファイルメニューから ブラウザでプレビュー です 画像の上と左側に余白が取られました さて複数画像を読み込む準備として あともう一つ解決しなければいけない 問題があります 複数の画像を読み込もうと 思った場合に 困るのは この Bitmap オブジェクトを 作るときの 引数です 今はこの引数は画像のパスが 一つだけ入っていますからいいです けれども複数読み込むとき ここは複数のパスを含んだ配列にします そうすると一つ一つ別々の画像を この引数に渡さなければいけません どうやってその別々の画像を 受け取るかということです 実は onFileLoad のイベントハンドラは 一つ引数を受け取ります これは一般に イベントオブジェクトと呼ばれるので 名前もそういう名前にしましょう eventObject これは幾つかの情報を持っています その情報はプロパティとして取るんですが そのプロパティの一つに result というプロパティがあります result です そしてこれが実は 読み込んだ画像の イメージオブジェクトになるんです ですからこれを受け取って myImage と入力します これはパスではなく イメージのオブジェクトなんですが Bitmap はこのイメージのオブジェクトも 引数として受け取ることが可能です そうするとこれで別々の画像を それぞれ Bitmap に渡して 異なる画像のビットマップオブジェクトを 作ることができます 保存して確かめてみましょう 「ファイル」メニューから 「ブラウザでプレビュー」をします 先程と同じように画像がキャンバスの上と左に 少しマージンを取って配置されています 先程と変わりませんが これで 複数画像を読み込む準備が整いました あとはメソッドをちょっと変えるだけで 二つの画像を読み込むことができます 複数の画像を読み込むには 先程申し上げた通り この File の部分を配列にします そしてフォルダ images の中には もう一つ png 画像が用意されていまして 000 の次は 001 にしてあります 細かいのでどうでも良いのですが File を Files にしておきましょうか そして読み込む方も files ですが もっと大事なのは この読み込むメソッドが変わることです loadManifest と入力します これで複数の画像を とりあえず読み込むことはできます 保存したらファイルメニューから ブラウザでプレビューです 画像が二つ読み込まれました 一つしか見えないのは 二つがぴったりと重なっているからです 位置を変えるように スクリプトを調整しましょう 二つ目に読み込んだ画像は 水平に位置をずらすことにします そのためには nX の値 変数の値ですね ここに今読み込んだ画像の幅 ずらせばいいですね 加算します 幅は読み込んだイメージから取ります width プロパティ ただぴったりくっついていると難なので マージン 余白をちょっと加えましょう 10 ピクセル では保存してブラウザで確認します 「ファイル」メニューから 「ブラウザでプレビュー」です 今度は二つの画像が きちんと並べて配置されました ご紹介したのは PreLoadJS loadManifest メソッドを使って 複数の画像を読み込む方法です loadManifest メソッドは 引数に画像のパスをエレメントとして含めた 配列で渡します するとその複数の画像を 順番にロードしてくれます そしてポイントはもう一つありまして onFileLoad イベントハンドラというのは 引数に eventObject を受け取る ということです そしてその eventObject の result というプロパティで 読み込んだ画像の参照が得られます するとそれを引数に Bitmap オブジェクトを作ることもできますし また読み込んだ画像の 幅を調べることもできるということです

初めて学ぶCreateJS

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

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

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

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

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