CreateJS実践講座

複数の画像を読込んで配置する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
複数の画像を繰返し処理で読込み、ステージに並べます。
講師:
05:47

字幕

このレッスンでは PreloadJS を使って 複数のファイルを読み込みます 画面では2つの画像が読み込まれて Stage に配置されています この処理を行いましょう Dreamweaver で開いた html ドキュメントは まだ 画像を1つしか読み込めません とはいえ 画像を読み込む ファイルのパスが配列に入っていますし loadManifest という 配列で画像を読み込む つまり複数の画像を読み込める メソッドを使っています この渡す配列ですが 配列に1つしか画像が 入っていないだけですので あとは複数の画像を 読み込む処理を加えれば 2つの画像を読み込むことも可能です 現在の状態を確認しましょう 「ファイル」で 「ブラウザでプレビュー」します 今は 真ん中に1つの画像が 読み込まれているだけです 読み込む画像を追加しましょう まず 読み込むファイルのパスを 1つ追加しましょう 今は 「 001 」と言うファイルです これをコピーして そして , (カンマ)区切りで ペーストして 「 002 」と名前を変えます これで画像の指定ができました 後は ここから1つ1つ画像を 読み込んで処理する部分です Bitmap を作り manifest の配列に加え 位置決めも個々のファイルに対して 行う部分です この3つを繰り返し処理すれば良いのです 今 インデントを1つ 入れましたけれども 何故かというと for 文を使いたいからです for 文は 「繰り返し処理」とも言われますが 3つのパラメーターを指定します } を先に書いておきましょう 1つ目は 大抵「カウンター変数」と言う 初期値を設定する部分です 「今 何個目」とカウントを設定するための 変数を設定します 大抵 i を使います 0 (ゼロ)からスタートするのが普通です 次は 継続条件になります 何回継続するかではなくて 条件が満たされている限り継続します ということで 2個なので「 2 」と入れます 0 から始まりますから 0,1 で条件が壊れます 2 になったら これは 2 よりも小さくありませんので 2 になったら for 文から外れます そして3番目は 「毎回毎回 何かすることがあったら 言ってください」ということ i をカウントアップ( i++ )します と これでも良いのですが この「 2 」という決め打ちが嫌です この「 2 」とは どこから出て来たかと言うと ファイルの数です ファイルの数をカウントしたのです それは files という配列 これです この中の要素の数から来ています length というプロパティで 数が分かりますので こうして この count という変数を ここにペーストしましょう それから 今までは 0 と決め打ちだった このインデックスの部分が 毎回 i に入る変数に変わります ということで これで画像2つを 読み込む処理ができました 確認してみましょう 「ファイル」を「保存」してから 「ブラウザでプレビュー」です 1個しかない! ということではありません これは 位置が重なっているので 前に読み込んだものが見えないのです 2つがピッタリと重なっているので 位置を直しましょう 読み込んだ画像は Bitmap ウィジェットです その位置を決めているのが setApperance という関数です この2番目の引数 ここが X 座標 次は Y 座標です 今 キャンバスの Stage サイズは 幅が 240 です 読み込んだ画像の1つが 100 ピクセルの正方形なので ここは数字を入れてしまいましょう 大体の数字ですが 少し余白をとって i を掛け算することで 少しずつずらします では 確認してみましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」です 2つの画像がきちんと並びました このレッスンでは PreloadJS を使って 2つの画像を読み込んで Stage に配置しました もっとも 複数の画像を読み込む loadManifest というメソッドは 既に使われていたので 読み込む画像のパスを増やし それから 複数の処理を繰り返し行う for 文を指定しました その中で配列から取り出した パスに従って 同じ処理を Bitmap オブジェクトを作り manifest を loadmanifest に渡す配列に加え 位置を整えることで 2つの画像を きれいに並べることができました

CreateJS実践講座

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

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

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

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

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