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

[ライブラリ]のビットマップをステージ端に置く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
[ライブラリ]のビットマップから、トゥイーンさせるインスタンスをつくって、ステージに置きます。
講師:
10:01

字幕

トゥイーンの スクリプティングに入る前に トゥイーンさせるオブジェクトを Starling フレームワークで作ります 具体的には ライブラリのビットマップから Image オブジェクトを作り それを Starling のステージの 真ん中に置きたいと思います Flash アプリケーションでは 基本的な設定だけ行った Flash ムービーファイル fla ファイルと それから Starling ルートクラス AS ファイルが開いてあります 先ず fla ファイルの方から 確認しましょう fla ファイルのライブラリには ビットマップが置いてあり スクリプトで扱うために クラスが設定してあります Pen という名前です 次にフレームアクションを確かめます タイムラインのキーフレームで 右クリックして アクションパネルを開きます フレームアクションは もう お約束の 3 行です Starling クラスを import し そのオブジェクトを new で コンストラクタを呼び出して 第 1 引数は Starling ルートクラスの名前 それから 2 番目の引数は stage です そのオブジェクト Starling オブジェクトに対して start メソッドを呼び出して Starling を実行します アクションパネルは閉じます そして Starling ルートクラスの方を見ましょう タブをクリックして MySprite という名前になっています 画面を広く使いたいので キーボードからファンクションの 4 番で フルスクリーンにします Starling ルートクラスには 未だ ごく基本的な ステートメントしか書かれていません 先ずはクラス定義で MySprite というクラスを 決めましたけれども これは Starling の Sprite クラスをベースにします つまり extends します ですから Starling の Sprite をインポートしています そしてコンストラクタメソッド クラス名と同名のメソッドですが ここでは このオブジェクト Starling ルートクラスの オブジェクトが出来上がって ステージの子どもになった時に 初期設定を実行するということで リスナー initialize を定めています そして initialize の方は ここに private で 定義してありますけれども まだ中身はありません 中身をこれから 書いていくことになります この Starling ルートクラスには 自分とステージ以外 何もオブジェクトがありません 特に目に見えるものがありませんから そのオブジェクトを 作っていくことになります 最初にライブラリにある ビットマップの オブジェクトを作ります 変数 myData としましょう 型指定はライブラリのビットマップは BitmapData という Flash のオブジェクトです BitmapData import ステートメント import 宣言が自動的に入りました そして ここに new で 確認をした通り Pen という名前を付けましたから ライブラリに付けた Pen というクラスの オブジェクトを作ります これは Starling の オブジェクトではないので Starling のオブジェクトに しなければいけません 具体的には Texture という オブジェクトを作ります myTexture ですね これは Flash ではなくて Starling の方のクラスですので お気を付けください このペンギンのビットマップ BitmapData が クラス名ですけれども それを Texture に変換します これは Texture コピーしますけれども コントロール若しくはコマンドキーを 押しながら ドラッグでコピーです このメソッドで fromBitmapData という メソッドがありますので その引数に BitmapData のオブジェクトを渡すと これ自身は Flash のオブジェクトで Starling の オブジェクトではないのですが Starling のオブジェクトである Texture に変換されます Texture の オブジェクトというのは このままでは ステージには置けません ステージに置くための Image の オブジェクトを作らないといけませんので Image のオブジェクトを作ります そして このオブジェクトは ローカル変数でなくて プロパティとして 宣言することにします instance 型指定は Image です Image のクラスが インポートされました そして このプロパティは private 宣言しておきましょう そうしたら initialize 初期設定のメソッドの中で instance コピーしておきましょうね そしてペーストです new の Image この引数に Texture を渡します コピーします コントロール若しくは コマンドでドラッグです これで目に見えるオブジェクトは できたのですが 未だ このままでは目に見えません この Starling ルートクラスの 子にしないといけませんので addChild ですね そして この instance を 引数に入れて Starling ルートクラスの 子どもにします 気分の問題なんですけれども 少し import 文の 順番を整えましょう starling.display が並ぶように あと flash は また ちょっと別にして こんな感じで良いでしょうか 必ずクラスファイルは保存します そして fla ファイルの方に 切り替えて確認してみましょう ムービープレビューです 制御メニューからムービープレビュー Image オブジェクトが作られて ステージのデフォルト位置である 左上隅に配置されました これを真ん中に 持っていきたいと思います 一旦ウィンドウは閉じて そして Starling ルートクラスに切り替え 下が邪魔ですので ファンクション 4 を 2 回押して フルスクリーンに戻します 先ず Image オブジェクトの xy 座標を ステージの真ん中に置きましょう この辺りに書き加えていきます そして 一旦 instance という変数も コピーしてありますので ペーストですね そして x 座標を stage の stageWidth ですね 幅の真ん中にします 半分にします もうショートカットを使ってしまいますね コントロール若しくはコマンド V です y で stage の stageHeight 更にこれだけでは instance の基準点が 左上隅にあるままです 基準点は真ん中にしないと 本当にステージで 真ん中になりませんので instance の基準点 pivotX ですね 先ず x の方から これを instance の 幅 Width の半分 つまり 水平方向真ん中に 基準点を持っていきます 同様に instance の pivotY を instance の今度は高さです 半分で加えて これで instance の丁度真ん中に 基準点が入りました では必ず保存します ファイルメニューから 保存 そして fla ファイルの方に 切り替えます そして 制御メニューから ムービープレビューで 確認しましょう これでライブラリの ビットマップのイメージを持った- Image オブジェクトが Starling フレームワークで 作られて そのステージの 真ん中に置かれました Starling ルートクラスの確認 おさらいをしていきましょう 一旦このウィンドウは閉じて Starling ルートクラスに 切り替え 下が邪魔ですので ファンクション 4 を 2 回押して フルスクリーンにします ここでのポイントは 初期化のメソッド この initialize の内容ですね 先ずは ライブラリに付けたクラス名 Pen を new 演算子で呼び出して BitmapData の instance を作ります 変数に入れます これは Starling フレームワークの オブジェクトとしては扱えないので Texture の fromBitmapData というメソッドに 引数に渡して Texture のオブジェクトに変換します Texture のオブジェクトは Starling フレームワークの オブジェクトなのですが 但しステージには置けません ステージに置くために Image オブジェクトにします new でコンストラクタを呼び出して Image オブジェクトを作り その引数に Texture を渡します そうすると この Image オブジェクトは ステージに置くことができますので addChild でステージに置いています ただ このままですと位置は デフォルトの 左上隅 ステージの左上隅になりますので その位置を変更しています ステージのプロパティ stageWidth stageHeight をとって その半分を設定することによって 座標を先ず ステージの真ん中に持っていきます 但しデフォルトでは Image オブジェクトの基準点が 左上隅にあるので 基準点を pivotX pivotY の プロパティによって動かします 具体的には instance の 幅と高さ それぞれの半分を設定することによって 基準点が真ん中になり 結果として Image オブジェクトが ステージの真ん中に表示されます

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

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

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

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

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

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