「Animate」STGの作り方(タイムラインを移動する)
今回は、前回説明した「タイムライン」に20フレームを追加し、さらに10フレーム目に「stop();」を追加して、止めた後の説明をしていきたいと思います。
ゲーム内の遷移(せんい)を制御する際に必要なものになります。
例えば、トップ画面から、戦闘画面に移行する際に、必要になります。
タイムラインにレイヤーを追加する
「タイムライン」の「レイヤー」とは、Photoshopやillustratorなどのグラフィックソフトなどにもあるレイヤーと同等の役割を持っています。
上にあるレイヤーほど、手前に表示されます。
新規で作成したファイルのタイムラインには、レイヤーが1つのみですが、レイヤー名の最上部に「+」アイコンがあり、クリックすると、レイヤーが追加されていきます。
今回は、最初にあったレイヤーの上下に、レイヤーを追加したいと思います。
上下にレイヤーを追加する |
次に、一番下のレイヤーと一番上のレイヤーの11フレーム目に「キーフレーム」を挿入します。
11フレーム目にキーフレームを追加する |
上の画像を見ていただくと、1から10フレーム目までと11から20フレーム目までの間に、境界ができたようになります。
タイムラインにラベルを追加する
次に、一番上のレイヤーの1フレーム目に「label1」と11フレーム目に「label2」と、「プロパティ」ウィンドウで、「ラベル」を追加します。
ラベル名を追加する |
ラベル名を追加すると、上の画像のように、赤い目印とともに、ラベル名が表示されます。
この「ラベル」は「タイムライン」を移動する際に、ラベル名を指定して、移動できるので超便利です。
ボタンを追加する
次は、一番下のレイヤーに、ボタンを追加します。
さて、ボタンはどのように作ればよいのでしょうか。
最初に、タイムラインの一番下のレイヤーの1フレーム目を選択してください。
次に「ツール」にある、「矩形プリミティブツール」を選択し、編集画面に四角いオブジェクトを追加します。(編集画面の外に作っちゃだめよw)
矩形プリミティブツールでボタンにするためのオブジェクトを描画する |
11フレーム目にキーフレームを追加してあったので、10フレーム目までに描画したオブジェクトが表示されるようになりました。
「矩形プリミティブツール」以外に、「矩形ツール」というものもありますが、こちらで描画したオブジェクトは、線と塗りに分かれており、見た目ではillustratorの描画オブジェクトのように見えますが、別々のものになっています。
illustratorに慣れている方は、選択する際には注意してください。
そのため、「矩形ツール」で描画したオブジェクトは、選択ツールで囲うように選択し、線と塗りの両方を選択し、描画したオブジェクトはすぐにグループ化すると良いでしょう。
慣れるまでは「矩形プリミティブツール」を使うようにしてください。
次に、編集画面で描画したオブジェクトを選択します。
上の画像のように、選択状態にしたまま、Animate上部にある「ツールバー」にある「修正」をクリックし、「シンボルに変換」をクリックします。
シンボルに変換をクリックする |
シンボルに変換をクリックすると、「シンボルに変換」ウィンドウが開きます。
名前(シンボル1)と種類(ボタン)に変更する |
今回は、上の画像のままで、OKをクリックします。
インスタンス名を付ける
描画オブジェクトをボタン・シンボル化した後に、シンボルを選択したまま、プロパティ・ウィンドウで、「インスタンス名(button1)」を付けます。
インスタンス名(button1)を付ける |
インスタンス名を付けたら、ボタンシンボルを選択したまま、「アクションパネル」開き、「<>(コードスニペット)」をクリックします。
コードスニペットで、ActionScript3を追加する |
上の画像のコードスニペットにある「クリックして特定のフレームに移動し、再生」をダブルクリックします。
クリックすると、タイムラインにレイヤー(Actions)が追加され、アクションパネルにActionScript3が追加されます。
アクションパネルに追加されたActionScript3に、「gotoAndPlay(5);」という部分があります。「5」の部分をタイムラインにあるラベル名「label2」を使い、「gotoAndPlay("label2");」と変更します。
ボタンシンボル化したオブジェクトをクリックすると、label2へ移動できるようになりました。
わかりやすいように、タイムラインにレイヤーを追加し、1から10フレーム目までに、テキストツールで、ラベル名を入力しておきます。
ツールバーにある「デバッグ」から「デバッグ」をクリックして、動作を確認してみてください。