CodeZine(コードジン)

特集ページ一覧

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

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

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

ライブラリ紹介

 続いて、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」は、アセットの読み込みをスムーズにするためのライブラリです。キューに対して必要なアセットを指定すると、バックグラウンドで読み込みを行い、読み込み状況を伝えるイベントを発生させます。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

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

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

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5