CreateJS実践講座

複数のファイルを読込むメソッド

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数のファイルを読込むメソッドで扱えるように、コードを書替えます。
講師:
04:40

字幕

PreloadJS を使うと複数のファイルを 読み込むこともできます このレッスンでは読み込む画像は1つのまま 複数の画像でも扱えるように コードを洗練させていきたいと思います Dreamweaver で開いたのは まだ複数のファイルに対応していない― HTML ドキュメントです まず今の段階で見てみましょう ブラウザでプレビューします 画像が1個読み込まれました 少しずつ修正していきましょう まずは あまり どうでもいいところですけれども 画像が複数という事なので 複数入るように小さめの画像に切り替えます 小さい画像が読み込まれます それから ここは複数の画像に 対応するんですけれども 配列に入れてしまいます 配列というのは複数の要素を含んだ 1個のオブジェクトです ですから1個のオブジェクト ではあるんですけれども 値が複数と出ますから複数のファイルの パスを入れることができます files と名前を変えました そうすると この辺が変わってきますね 少し修正をまとめたいので コードをここに持ってきます 位置そのものは重要では ありませんけれども 今のところ ただ変えるところをまとめたい というだけなんですが ここは file となっていますが files ですね その中の今1個しかありませんが 1個目は0番です それから loadFile で指定したソースのファイル ここも files で0になります 後はファイルはないですね 確認してみましょう まだ中途半端ですけれども保存して ブラウザでプレビューします 小さめの画像が1個読み込まれました とりあえずコードは動いてますね では先を続けていきましょう 読み込むファイルのパスは files に入れました それに対応して読み込むファイルを 配列で渡せるメソッドがあります loadFile ではなくて loadManifest というメソッドです loadManifest にはこのような指定の ファイルを複数 配列に入れて渡せます ですので 渡す配列をここで作りましょう 変数は文字通り manifest にしましょう そして空っぽの配列を用意します 次に… このマニフェスト 配列にデータを加えます コピーして持ってきて 今はとりあえず0番目ですね 揃えて0番目にデータを入れるんですが そのデータは loadFile に渡している このオブジェクトと全く同じで結構です そして loadFile ではなくて loadManifest として 配列 Manifest を渡します 構成は変わっていませんけれど loadManifest というメソッドを使うことで 引数にファイルの配列を渡すことが できるようになりました 今は1個でも後で複数にすることが できるという事です ではとりあえず1個で動いていることを 確認しましょう ファイルを保存して ブラウザでプレビューします 1個読み込めました 1個ですけれども複数に増やす構成が 出来上がったということです このレッスンでは読み込む画像は 1個のまま 複数の画像でも 読み込めるような構成に JavaScript のコードを変えました そのために使ったのが loadManifestというメソッドです それに対応してファイルの方も 配列にしてパスを入れています そして loadManifest に渡す引数は やはり配列で そこには loadfile に渡すのと 同じ形式でデータをオブジェクトにして渡す そして1個の画像を読み込んだんですが これで複数のファイルが 読み込める構成になりました

CreateJS実践講座

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

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

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

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

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