CreateJSを応用したダイナミックなアニメーション

PreloadJSで読込み後再描画する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
外部画像を確実に描画するには、PreloadJSで読込み待ちをしなければなりません。
講師:
11:40

字幕

この HTML ドキュメントの JavaScript コードは EaselJS を使って 外部の画像ファイルを読み込んで Bitmap クラスのオブジェクトとして ステージに配置しています けれども PreloadJS を 使っていません ではこの場合どういう結果になるか というのを先ず見ておきましょう ファイルは既に保存してありますので ブラウザーで確認してみます ファイルメニューから ブラウザーでプレビューです プリロードあるいは 読込み待ちをしていないと ステージに画像が表示されません もっとも Bitmap のオブジェクトは 作られていますし その中に画像は持っていますので 更新をすれば表示されます 但し表示位置が ステージの中央に したいんですけれども Bitmap は左上隅が 基準点になっているので 左上隅がステージの中央ということに なってしまっています では一旦ブラウザーのウィンドウは 閉じましょう PreloadJS を使って 読込み待ちを してみることにします 先ず PreloadJS を Script 要素で 読み込んでおく必要があります easeljs がありますので これをコピーしてしまいましょう コピーしてそしてペーストです もう名前が分かっているので preloadjs バージョンは現在最新版が 0.3.0 です これで preloadjs の Script 要素への読み込みができました PreloadJS ライブラリの中で 読み込みをするのは LoadQueue というクラスです ですからそのオブジェクトを 作らなければいけません 変数宣言をして変数は loader という名前にしましょう そしてオブジェクトは new で作ります createjs の LoadQueue です Queue はちょっと変わった綴りですね そして引数は XMLHttpRequest という通信を使うかどうかなんですが 今回は false で結構です 使わないという設定になります そして読み込みは この loader のオブジェクト 変数に入れたオブジェクトに対して loadFile という メソッドを呼び出します そして読み込むファイルを パスが変数に設定されていますので 引数に渡します コントロールもしくは コマンドドラッグでコピーです これで読み込みは できるんですけれども やりたいのは読み込み終わった後 Canvas Stage の update をしたいんですよね ですから読み込み終わったことを 知らないとそれができません その処理をこの間に書き加えます LoadQueue のオブジェクトが入った 変数に対して もし読み込み終わったら教えてねと こういう設定は CreateJS では一般に イベントリスナーという仕組みで行います お願いするメソッドは addEventListener です addEventListener ちょっと綴りが変わっているので 気を付けてください そして何が起こったらどうしてねと 引数は 2 つです 何が起こったら ここは そのやりたいことによって 決まってくるんですけれども 今回は読み込み終わったら というのは fileload です 全部小文字です そして何々してね というのは 関数を定めます まだ関数を定めていないのですが 名前を決めておきましょう draw です そしてその関数を この後に定義することになります function ですね draw ぐらいは 綴り間違いしないでしょう そして丸括弧 ( ) 中括弧 {  閉じ その中に関数本体に処理を加えます 何をするかというと 読み込み終わったら stage を update して欲しいんですよね ですからこれをカットして ここで update しても 空振りしちゃいますので この中で読み込み終わってから 落ち着いておもむろに update をしましょう ということです ではファイルを保存します 保存してブラウザーで確かめましょう ブラウザーでプレビューです ステージに画像が表示されました 次は位置合わせをしたいですよね 今度は読み込み終わった後の 処理ができますので 現在のところ ビットマップの画像の左上隅が Canvas ステージの 中央になっていますけど 左上に持ち上げたい その時に 画像の幅の半分と高さの半分 左上に持ち上げれば良いですけれども 画像の大きさが 今度は 読み込み終わった draw という 関数の中で処理すれば 設定ができますので そこに書き加えることにしましょう ブラウザーは閉じます Bitmap オブジェクトの 位置合わせの部分を確認しておきましょう Bitmap のオブジェクトを作ります その引数にはファイルのパスを 渡してありますので 画像が包まれた形 Bitmap は入れ物みたいなものですね その形でオブジェクトが作られます そして SetAppearance という 関数が定めてあって そこに Bitmap の インスタンスを渡します それから x y 座標を定めるんですけど そこに Canvas エレメント Canvas の要素の参照が捉えています その半分 幅の半分ですね つまり水平方向に中央 同様に高さの半分 改行してますが 2 分の 1 つまり垂直方向に中央という座標が 設定されていますので Bitmap のオブジェクトは Canvas ステージの中央に 配置されます そして画像を少し上に ずらそうということなんですが それは Bitmap のオブジェクト そのものではなくて Bitmap の中に読み込んだ- 画像のイメージだけを 左上隅に持っていこうと思います その処理はこの draw の関数ですね 読み込み終わったら呼び出される この関数の中に書き加えていきます さて画像を Bitmap オブジェクトが 読み込んでも Bitmap オブジェクトから 画像の幅と高さを 知ることはできません そのためには読み込んだ画像そのもの Bitmap イメージそのものを 取り出さないといけません その時 addEventListener で 登録した- リスナー関数というのは 一般に eventObject というものを 受け取ります この eventObject に聞くと 画像が取り出せます では先ず画像を入れる myImage という変数を設けます そして eventObject に聞きます ドラッグコピーです コントロールもしくは コマンドを押しながらドラッグです その中のプロパティを持っているのですが result これが読み込んだ画像イメージ HTML でいうと イメージタグに相当するような部分ですね その参照が取れます そうすると この myImage に対して 幅や高さを知ることができます そしてその設定を Bitmap のオブジェクトの位置調整に 役立てれば良いということです Bitmap オブジェクトは この myBitmap という 変数の中に入っているので これをドラッグコピーして持ってきましょう コントロールもしくはコマンドドラッグです その x 座標を 左にずらしますね マイナス イコールとしましょう 幅はこの myImage に聞きます ドラッグコピーです そしてこれの幅 width です その半分 左に持っていけば良いですね 同様にコピーしてしまいましょう コピーしてペーストです y 座標についても同様に 但し y 座標の場合にはプロパティが height になりますね こうしてあげれば左上に オブジェクトが持ち上げられて Bitmap のオブジェクトの中心と Canvas のステージの中心が 合うということになります ファイルを保存して確かめましょう ファイルを保存で ブラウザーでプレビューします 画像が読込み待ちで正しく読み込まれ そして読み込んだ後の 画像の幅高さをもとに 位置調整をしましたから Canvas ステージの中央に 画像が配置されました では PreloadJS ライブラリを使った- 画像の読み込み方について おさらいしましょう ブラウザーを閉じます PreloadJS を使うには 先ず PreloadJS の ライブラリを 読んでおかなければなりません script 要素に PreloadJS の 0.3.0 を読み込んでいます そして使うクラスは その中の LoadQueue です 先ずオブジェクトを作りますので new createjs.LoadQueue 引数は false で結構です オブジェクトを作って変数に入れます そしてその変数に対して loadFile というメソッドを呼び出して 引数にはパスを渡すということですね このパスに画像が入っています これで読み込みはできるんですが やりたいのは読み込み そのものではなくて 読込み待ちですよね その場合にはイベントリスナーを使います LoadQueue のオブジェクトに対して addEventListener 読み込み終わったらというのは fileload というイベントです その時に行うべき処理を リスナーとして関数を定めます その関数はここに書きました 最低限やりたいことは stage の update なんですけれども 今回は更に読み込んだ画像のデータを使った 位置調整をしました 読み込んだ画像は リスナー関数が受け取る 引数 eventObject の result というプロパティで 参照が取れます そうするとその読み込んだイメージの 幅と高さが取れますので それぞれの半分の分だけ Bitmap のオブジェクトの x y 座標を 左上にずらすことによって 画像の中心と Canvas ステージの中心を 合致するようにしたということです

CreateJSを応用したダイナミックなアニメーション

このコースではCreateJSの基礎を学んだ方に、ダイナミックでインタラクティブなアニメーションの作り方を解説します。JavaScriptであまり扱われない項目や、数学や物理などスクリプト以外の考え方も合わせて解説しています。CreateJSでぜひFlashに負けないコンテンツを作ってみましょう。

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

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

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

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