CreateJS実践講座

PreloadJSでファイルの読込みを待つ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
PreloadJSのLoadQueueクラスを使って、画像ファイルの読込み待ちをします。
講師:
06:19

字幕

このレッスンでは PreloadJS を使って 画像 外部ファイルを 読み込んだ後の処理を定めます 今画面に出ているのは Stage 上に 外部の ping ファイルですけれども 読み込んで表示しています この読み込んで表示する ということをするためには 読み込み終わった後 描画の更新をしなければいけません この処理を加えてみましょう Dreamweaver で開いた HTML ドキュメントは まだ PreloadJS のライブラリを使っていません それでも強引に描画を更新しています 強引にというのは Ticker クラスに AddEventListener で Tick event のリスナーを加えていま リスナーを Stage にすると内部的に自動的に Tick event のたびに Stage を更新してくれます ただし1秒間に何十回も行いますから 無駄な処理という風にもいえます それでも一応画像は表示されますので 確認してみましょう 「ファイルメニュー」から 「ブラウザ」で「プレビュー」です 描画が更新されていますので ちゃんと画像が出てきます 1秒間に何十回もですね 無駄な事をやっていますので この無駄を PreloadJS を 使うことによってはぶきましょう 何はともあれ PreloadJS のライブラリを 読み込まないといけません これを先にやっておきましょう PDF から持ってきますので 基本的に EaselJS と同じ方法になります 「コピー」して「ペースト」です 名前はもちろん PreloadJS ですね そしてバージョンは 現在は0.6.0になっています ちゃんと読み込めているかどうか 念のため確認しましょう 今回使うのは LoadQueue というクラスのオブジェクトです LoadQueue と 「Queue」というのは ちょっと綴りが変わっていますね これでオブジェクトができますので それをアラートで 見てみることにしましょう ちゃんとオブジェクトができたかどうか ファイルを保存して確認します 「ブラウザ」で「プレビュー」です PreloadJS の LoadQueue が 出来上がったことが確認できましたので では実際に読み込みの処理を行います 今回使う LoadQueue クラスの コンストラクタには 引数を1つだけ渡します オプションの引数は他にあるんですが 第一引数が重要です XML HttpRequest を使うかどうかのプール値 true か false かです XML HttpRequest というのは ブラウザ上で サーバーと HTTP 通信を行うための API です これを使うのであれば true 使わないのであれば false です デフォルトは true になっています 今回はローカルでテストしていますので 使わないほうが確認しやすいので false を渡します では改めまして このアラートはとりましょう そして引数には false を渡します これを変数に入れます 変数名は「ローダー」としましょう そして読み込み終わったという処理です これは AddEventListener イベント名はですね「FileLoad」 です ファイルをロードし終わったら そして まだ定義していませんけど ドローというリスナー関数を定義して そこでアップデートをします 更にその後 読み込みを開始 ということで ローダーにもう1つ load file です イベントのほうは「FileLoad 」で メソッドは load file ですので 間違えないようにして下さい そしてファイル このファイルパスを渡します この3つで 読み込み待ちの処理はできますので 後は EventListener を定めます Ticker はもういりません Function で Listener のドローですね そして まだ今 使いませんけれども EventObject というものを 受け取りますので 一応 受け取るだけ受け取っておきます そして Stage のアップデートをすればいいので これ移動して持ってきちゃいましょう コメントをはずします stage.update の S 消しちゃいましたね 間違っていましたので 保存をして確認しましょう ファイルを「保存」 「ブラウザ」で「プレビュー」します 画像が読み込まれました Stage のアップデートは 1回しかしてませんから 読み込み待ちを待って そのいいタイミングでアップデートをして 無駄な処理はしていません このレッスンでは PreloadJS を使って 外部ファイルの読み込み待ちをしました 手順としてはまず LoadQueue のオブジェクトを作ります そして AddEventListener で 読み込み終わったらというイベント file load の EventListener を登録します そしてロードファイルメソッドで ファイルパスを渡して ファイルの読み込み 読み込み終わると ドローというリスナー関数が 呼び出されますので その中で Stage のアップデートを行えば 読み込み終わった1回きりの処理が 行われるということになります

CreateJS実践講座

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

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

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

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

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