SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

【ADC MEETUP 06】インタラクティブなリッチコンテンツの制作を支援するライブラリ「CreateJS」

ADC記事 『ADC MEETUP 06 – CREATE THE WEB TOUR – SESSION 3 :CreateJS HTML5向けのリッチインタラクティブなコンテンツ制作』

  • X ポスト
  • このエントリーをはてなブックマークに追加

ライブラリ紹介

 続いて、CreateJSを構成する個々のライブラリの簡単な紹介が行われました。

EaselJS

 (06:40)1つ目に紹介された「EaselJS」はCreateJSの中心となるライブラリで、表示リストの基本機能が実装されています。

基本となるコード

 (07:05)ここでは基本となるコードを見せながら、HTMLのbodyタグにCanvasが定義されていること、scriptタグでライブラリを読み込んでいることなどが示されました。コードはscriptブロック内にも記述されており、stageのインスタンスが生成されています。

 (08:15)CreateJSでは、いつ表示を更新するかを制御できます。そのため、update()メソッドを明示的に呼ばなければ画面の更新は行われません。

 (08:40)アニメーションを実現するためTickerが用意されています。デフォルトでは毎秒20回、イベントリスナとして登録されたオブジェクトのtick()を呼び出す仕様になっています。

基本表示クラス

 (09:40)続いて、基本となる表示クラスの一覧が示されました。スライドからは、Shape&Graphics、Bitmap、Text、Container、Stage、BitmapAnimation&SpriteSheet、DOMElementといったクラスが確認できました。

BitmapAnimation

 (10:20)その中で具体的な使い方が解説されたのはBitmapAnimationです。

 CreateJSでスプライトシートを定義するには、画像ファイルに加えてframeとanimationsという属性を指定します。これをBitmapAnimationのコンストラクタに渡すだけで、スプライトシートを利用したアニメーションを実現することができます。onClick()を使ってインタラクションを追加したり、onTick()を使ってアニメーションを追加することも簡単に行えるとのことです。

DOMElement

 (13:00)表示クラスからは、DOMElementも紹介されました。DOMElementはHTML要素をEaselJSの表示リストから利用するためのクラスです。デモでは、div領域を他のEaselJSの要素と一緒にアニメーションさせる様子が示されました。テキスト要素のようにcanvasでは扱いにくい表現も、DOMElementであれば簡単に組み合わせられるというのが利点とのことです。

TweenJS

 (14:20)CraeteJSの2つ目のライブラリとして紹介された 「TweenJS」は、トゥイーンを使ったアニメーションを実現するためのライブラリです。トゥイーンに表示オブジェクトとその動きを指定するコードと、そのコードの実際の動作がデモによって紹介されました。トゥイーンにはイージングも設定できます。複数のアニメーションを時系列順に指定することもできるようになっています。

SoundJS

 (16:45)CreateJS の3つ目のライブラリ 「SoundJS」は、音声をWebで容易に扱えるようにするものです。様々な種類のオーディオに対応する抽象化された共通のAPIが定義されており、オーディオの種類によってコードを使い分ける必要がないようになってます。

PreloadJS

 (18:00)最後に紹介された「PreloadJS」は、アセットの読み込みをスムーズにするためのライブラリです。キューに対して必要なアセットを指定すると、バックグラウンドで読み込みを行い、読み込み状況を伝えるイベントを発生させます。

次のページ
Flash Professional

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

アドビ システムズ株式会社(アドビ システムズ カブシキガイシャ)

アドビ システムズ社は、時間や場所、利用するメディアや機器を問わず、あらゆるユーザーの、アイデアや情報との関わり方に変革をもたらしています。アドビ システムズ 株式会社はその日本法人です。同社に関する詳細な情報は、Webサイト(http://www.adobe.com/jp)に掲載されています。Ad...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/6862 2013/01/15 17:32

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング