CreateJS実践講座

PreloadJSをなぜ使うのか

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
外部ファイルの読込み待ちをするには、PreloadJSを使うのが有効です。
講師:
05:01

字幕

このレッスンでは PreloadJSを何故使う必要があるのか ということをご説明します いま画面にでているのはstage上にbitmapの 画像を1つ読み込んで配置したものです 実はこのhtmlドキュメントは PreloadJSを使っていません 使わないとどんな処理になるのか そこからご説明していきましょう Dreamweaverで開いた このhtmlドキュメントは PreloadJSのライブラリの 呼び込みは行っていませんし 更にBitmapを外部から読み込むという処理も 書いていません そこからスタートしましょう まずBitmapの画像を読み込んでそれを中に 収める入れ物のObjectがあります これはBitmapというObjectなので 変数をmyBitmapとします そしてObjectを作るのは原則通りですね myBitmapの変数に対して そのObjectを 作ったObjectをコピーしますけど 入れるんですが 入れるときは new createJS class名はbitmapです 引数には読み込むBitmapの ファイルのパスを渡します これも変数に置いておきましょう パスはですね imagesの中にペンという名前の ピンのファイルが入っています このファイルを ファイルという名前の変数をここに渡します そしてもちろんこのままではいけなくて stageに子供として加えなくてはいけません addChildですね そしてChildとして 子供として加えるのはmyBitmap まだもう1つ重大なことがありました stageに対して描画の更新updateをしないと 画面が書き換わりませんので 何も変わらないということになってしまいます ではこれで保存して確認しましょう ファイルを保存して ブラウザでプレビューします なにもでてきません これがPreloadJSを使わない場合 こうなってしまうという典型なんですけれど ご説明しましょう 処理内容を確認しましょう BitmapのObjectを作りました ファイルのパスを渡しています そしてstageの子供に加えました 問題ありません そして描画の更新 速すぎるのです この2つあっという間に 終わってしまいますので アップデートした時には まだファイルが読み込み終わっていません 読み込み終わっていないのに 描画を 更新しても何もでてこないということです ですから読み込み終わった後に 描画を更新しないといけません ではPreloadJSを使うのが一番いいんですけれど 使わなくても方法がないことはありません どうするかというとアニメーションのときに 使う ticker classを利用します CreateJS.ticker addEventListenerです そしてイベントは定期的に 一秒間に何十回か呼び出されるtickです その時にやってほしいことを リスナー関数として渡すんですが もしやってほしいことがstageのupdateだけ という場合には stageを渡してしまうことができます そうするとstage.updateは内部的に CreateJSがやってくれます ではこれで確認しましょう ファイルを保存して ブラウザでプレビューします ちゃんとでてきましたね ではこれでいいかというと 構わなければいいのですけど 何十回も一秒間に実行されます 別に動いてないので1回実行すればいいことです あるいはこの画像の位置を合わせようと 真ん中にもってきたいといった時も 真ん中に持ってくるという作業は 一回あればいいので 一秒間に何十回もやる必要はないです 呼び込み終わったことをめがけて 何か更新をしたいと そういう時にまさにPreloadJSが役立つわけです このレッスンでは PreloadJSを何故使うのかということを おわかりいただくために PreloadJSを使わないで画像を 読み込みしようとすると どうなるかということをお説明しました 画像のObjectはBitmap classで作ります そしてaddChildでステージに加えて 描画を更新する時です アニメーションであれば tickerを使えばいいんですけど 一回のみで構わない 無駄なことはしたくないという時には PreloadJSを使うと読み込みを待って 処理を行うことができるということです

CreateJS実践講座

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

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

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

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

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