CreateJS新バージョンの大きな変更

PreloadJSで読込んだイメージをステージに置く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラスPreloadJSは、LoadQueueに変わりました。ただし、基本的な使い方は同じです。外部画像ファィルを読込んで、ステージ中央に置く例をご紹介します。
講師:
05:15

字幕

この JavaScript コードは easeljs と preloadjs の 旧バージョンを使って 外部の画像ファイルを読み込んで ステージに配置しています これを新しいバージョンの対応の スクリプトに書き変えてみたいと思います 先ず現在のコードの動作の確認です ブラウザで確かめます ファイルメニューから ブラウザでプレビューします 画像がステージの真ん中に表示されました 画像が読み込まれるのを待って 描画をするとか あるいは画像の大きさに合わせて 位置合わせをするとかというのは プリロードをしてあげる必要があります 読み込み待ちをした上で 読み込んだ情報に基づいて ということが必要です では確認が済みましたので ブラウザは閉じます このコードの読み込み待ちにかかる分だけ 簡単に確認します 先ずは PreloadJS の オブジェクトを作っています そして そのオブジェクトに対して loadFile というメソッドで ファイルのパスを指定します そうすると 読み込みができるんですけれども 読み込み終わったら という処理をしたい時には onFileLoad というイベントに ハンドラーを設定します そしてこのハンドラーは 読み込んだ画像のデータを eventObject の result プロパティから取ってきて ここは省略してありますが 位置合わせをしたり その他描画のための処理をして 最終的に描画の命令をステージに対して stage.update で発行しています では早速 easeljs と preloadjs の バージョンを変えます ポイント 1 は分かりましたので easljs が 0.6.0 preloadjs が 0.3.0 になります まずは このまま保存して ブラウザで確認してみましょう ブラウザでプレビューします ステージに何も表示されなくなりました 開発ツールがあればエラーが 表示されるんですけれども preloadjs の 1 番の大きな変更というのは preloadjs というクラスを 使わなくなったことです では その部分を修正しましょう ブラウザは閉じます preloadjs のクラス名は どうなったかというと jsタグをとるだけだったら いいんですけれども 全然変わっちゃいました LoadQueue です クラス名を変えただけですが とりあえずブラウザで見てみましょう またファイルを保存して そしてブラウザでプレビューします 画像が表示されました なんだクラス名を変えるだけか と簡単だと思うかもしれませんが 最低限とすればクラス名を変えてください ただ新しい creatjs の 標準的なスタンダードな スタイルとするためには もう一つ変更が必要です ではブラウザは閉じます どこを変えるかというと イベントハンドラー onFileLoad は eventListener にしましょう ですから この後 loader のドットの後ですね addEventListener です そしてイベント名はですね 小文字で fileload これエルも小文字にしますので お気を付けください そして実行する関数は同じですので これを第 2 引数に渡します ファイルを保存して結果を確かめましょう ファイルの保存で ブラウザでプレビューです 問題なく画像がキャンバスに ステージの中央に表示されました クラス名が変わってしまいましたので いきなりエラーが出てくることだけは ちょっと痛いんですけれども 修正点はさほど多くありません ではまとめましょう ブラウザは閉じます このサンプルの場合 preloadjs の新しいバージョンに対する 対応の修正箇所は 2 つです 1 つは先ずクラス名が 違うということですね preloadjs ではなく LoadQueue になりました 2 つ目は 元のままでも使えるんですが イベントハンドラーは 今後サポートされなくなる 可能性がありますので 是非 addEventListener EventListener の仕組みを使いましょう onFileLoad のイベントハンドラーに 変わるイベント名は fileload です addEventListener で 定めるイベント名は 基本的には全て小文字ですので お気を付けください

CreateJS新バージョンの大きな変更

2013年2月にCreateJSがアップデートされました。このコースではイベントリスナーの採用やPreloadJSとSoundJSの変更など特に影響が大きいと思われる変更点をいくつかかいつまんで解説し、それらをどのように修正すればよいのか説明します。

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

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

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

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