StarlingフレームワークによるStage3Dを使った2次元表現

TextureAtlasオブジェクトからMovieClipインスタンスをつくってアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
TextureAtlasオブジェクトは、MovieClipインスタンスに渡すと、フレームアニメーションがつくれます。
講師:
12:39

字幕

Flash Professional CS6 の MovieClip シンボルから書き出した スプライトシートを使って Starlingフレームワークの ステージ上で アニメーションを 再生してみたいと思います Flash のライブラリから スプライトシートを書き出すと 2 つのファイルが書き出されます イメージごとの フレームイメージを 1 枚の画像にまとめた png ファイル ピングファイルと その画像の情報を収めた XML ファイルです この 2 つの画像を Starling フレームワークに読み込んで TextureAtlas というオブジェクトを作ると そのイメージを切り出して Starling のステージ上に 表示させることができます この Starling ルートクラスは png ファイルと XML ファイルの 2 つから TextureAtlas を作って そのスプライトシートの 1 番最初のフレームの画像を Starling のステージに 表示するとこまではできています 簡単に流れを確認しましょう XML ファイルの読み込みには URL_Loader クラスを使っています URL_Loader でオブジェクトを作って そして そのオブジェクトに load メソッドで URL_Request のオブジェクトを渡し ファイルを読み込みます そして addEventListener で加えておいた 読み込み終わったら COMPLETE のイベントでメソッドを 実行します Listener メソッドを実行します URL_Loader の COMPLETE の Listener メソッドは Event オブジェクトの target プロパティで URL_Loader のオブジェクトを取り出し その data プロパティとして 読み込んだ XML ファイルの テキストデータを取り出します それを関数 XML の引数に渡せば xml データができあがります もう 1 つ png ファイルの方は Flash のライブラリの方に入れておきました 従ってライブラリに付けておいた シンボルの クラス名から インスタンスを作ることができます これが BitmapData ですので Texture.fromBitmapData のメソッドで その BitmapData の オブジェクトを渡して texture に変換します これで XML と スプライトシートの texture 2 つのデータができました この 2 つのデータを使って TextureAtlas を作ります TextureAtlas のオブジェクトから texture のフレームを切り出す時 xml データの指定を 使うことになりますので スプライトシートの XML ファイルの中身を ちょっと見ておきましょう スプライトシートの xml データの中身は この様な構造になっています 先ず大元の要素が TextureAtlas という 要素名になっています これを使って TextureAtlas のオブジェクトを Starling で作ります その中には SubTexture という名前で フレームの数に対応した 要素が出来上がっています それぞれには名前がついています 名前は デフォルトはシンボルから取った名前に フレーム番号を表す 4 桁の連番が付いています 大元は6 フレームの フレームアニメーションだったんで SubTexture 要素は 6 つあります そして今回ちょっと 気に留めておいていただきたいのは このシンボルの名前です Pen_walk という名前が付いています では Flash の方に戻りましょう Starling ルートクラスで TextureAtlas の オブジェクトを扱う部分の確認です 先ず TextureAtlas の オブジェクトを作ります new 演算子で TextureAtlas のコンストラクタを呼び出し 引数は 2 つです 先ずは texture これはスプライトシートの ピングファイルから作った texture です 2 番目は XML ファイル これも外部 XML ファイルから読み込んで xml データに変換したものです オブジェクトを作ったら ここでは 1 枚の絵を取り出しています TextureAtlas のオブジェクトに対して getTexture というと 1 枚の指定したフレームの 画像イメージが texture として切り出せます ここでは pen_walk というシンボル名と 後 4 桁連番がフレーム番号でしたよね 全部 0 ですので pen_walk の最初のフレームの texture を 切り出しなさい という指示をしたことになります それが texture として 変数に入りますので そのオブジェクトを image クラスの コンストラクタ new で呼び出して 引数に渡せば それがインスタンスとして Starling フレームワークのステージに 表示できる状態になります そして後の処理で それをステージに表示しています では今現在のコンテンツを ムービープレビューで確かめてみましょう fla ファイルの方に切り替えまして 制御メニューからムービープレビューです スプライトシートから 最初のフレームの画像を texture として取り出して それをステージの真ん中に表示しました ですから最初のフレーム 1 枚だけですから アニメーションはしません これに対して今回はアニメーション させようというのが課題になります では swf のウインドウは閉じて Starling ルートクラスに切り替え ファンクション 4 番を押して フルスクリーンにします 新たに使う Starling のクラスが 2 つありますので 先に その 2 つをインポートしておきます 見易い様に 1 番下に インポート宣言を書きます Starling のコアで starling です もう 1 つ インポートの やはり starling の display これが今回 新たに使う トピックになるクラスです MovieClip です どうするかと言いますと 今 Image のオブジェクト これは動きません ですから image のオブジェクトのままでは アニメーションはしませんので この image を Starling の MovieClip に置き換えます ということは この new Image の部分は要らなくなります ここを置き換える訳ですね 更に言うとイメージクラスの インポートは不要になります さて次は texture です 最初のフレームの 1 枚の texture では アニメーションになりませんね 複数必要です どうするかというと getTextures と複数形にします こういうメソッドが本当にあります getTexture と getTextures は メソッドとして別物です では変数も分かり易い様に frames にしましょう 複数必要ということは このフレーム番号が要らなくなります シンボルの名前だけ そして texture の型指定では 複数の texture が持てませんので どうするかというと これを Vector の指定にします つまり Vector の ベースの型指定を texture にします こうすると Vector の入れ物の中に texture のデータ型の エレメントが複数入れられますから これで複数の texture を持った オブジェクトが出来上がりました 後は このインスタンスに入れるのは new Image ではなくて new MovieClip になります そして frames と変数名を変えましたので 渡す引数も名前を変えましょう そしてファイルを保存します ムービープレビューを確かめましょう fla ファイルに切り替えて制御メニューから ムービープレビューです 動きませんね 先程と変わりません 但しエラーは起こっていませんから MovieClip のオブジェクトが ステージに置かれています これは確かです MovieClip がフレームを 切り替えていないんですね というのはフレームを切り替えろ という処理を書いていないからです それを書き加えたいと思います swf のウインドウは閉じます Starling ルートクラスに切り替えて ファンクション 4 番でフルスクリーンにします MovieClip のオブジェクト この instance という変数に 入ったオブジェクトの フレームを進めるのであれば なるほど ENTER_FRAME に EventListener を登録して その EventListener の中で MovieClip オブジェクトに対して 何かメソッドを発行するんだろうかと思った方 大変 Action Script 3.0 の文法を 良く分かってらっしゃいます けれども Starling は もっと楽な方法を用意してくれました Starling にお願いします Starling のクラスに対して juggler という特別な入れ物があります この中にインスタンスを入れてあげると 入れてあげられるインスタンスには 限定があるんですが MovieClip のオブジェクトは入れられます そうするとアニメーションの処理 フレームの切り替えの処理を 自動的にやってくれます ですから Listener のメソッドを 用意する必要がありません 単に Starling クラスの juggler に add メソッドで インスタンスを加えれば結構です これで完成です ファイメニューから保存で保存をしたら fla ファイルに切り替えて ムービープレビューを確かめましょう 制御メニューからムービープレビューです これでアニメーションが できる様になりました では swf のウインドウは閉じて おさらいをしましょう Starling ルートクラスに切り替えて ファンクション 4 番でスクリプトを フルスクリーンにします 先ずステージにおいて アニメーションさせるオブジェクト これは Starling の MovieClip にします Starling の MovieClip で型指定しました そして TextureAtlas を作るところから 確かめていきましょう new TextureAtlas コンストラクタを呼び出したところです 引数は 2 つで 先ず texture です これはスプライトシートから書き出した ビットマップの画像ですね これから texture を作り それを第 1 引数に渡し 第 2 引数は xml データを読み込んで xml のデータに直したもの ここですね それを第 2 引数に渡します これで TextureAtlas のオブジェクトができ そして TextureAtlas というのは 画像に加えて フレームごとに情報を持っています その TextureAtlas のオブジェクトに対して getTextures ズですね s が付くと複数のフレームを切り出して フレームごとに順番に並べて texture を アニメーションができる様にします その時の指定の仕方は フレームの連番は除いた シンボルの名前になります そうすると texture を エレメントとして含んだ Vector のオブジェクトに変換して それが変数に入ります そうしたら new MovieClip MovieClip のコンストラクタを呼び出して その Vector オブジェクトを渡します これでインスタンスとしては ステージに Starling の ステージに表示できる様にはなるんですが アニメーションが進みません けれども ENTER_FREME の Listener 関数は使わなくても大丈夫です Starling の juggler という オブジェクトがありまして そこに add メソッドを呼び出して MovieClip のオブジェクトを追加します そうするとフレームを進める処理というのは この juggler が自動的に 行ってくれるということです これからスプライトシートから書き出した 画像と XML から TextureAtlas を作って アニメーションさせることができました

StarlingフレームワークによるStage3Dを使った2次元表現

StarlingはFlash Player 11の新しい描画機能Stage3Dに基づいて作られた2次元の描画用フレームワークです。このコースではStarlingフレームワークによるクラス定義の基礎から、トゥイーンアニメーションやマウスインタラクション、そして最近のバージョンで実装された新しい機能まで解説していきます。

5時間09分 (40 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
プログラミング
価格: 3,990
発売日:2014年01月26日

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

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

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