「Animate」STGの作り方（タイムラインについて）
 |
今回作っていくシューティング・ゲームは、最終的に「縦スクロールでスマホ向けのもの」となります。では早速説明していきたいと思います。
使用する開発環境
冒頭でも言っていますが、「Adobe Animate」を使用します。少し前には、Flashと呼ばれたアプリケーションになります。
実は、Animateでは、Android、iOSのアプリを開発できます。
さて、初心者の方向けなので、Animateをどう使うのか。初歩的なところから、説明していきます。
Animateを起動しますと、新規でファイルを作成することになります。
今回は、「Android3:2」で新規ファイルを作成します。
 |
| 今回は、Android3:2で作成します |
作成ボタンをクリックすると、「タイムライン」と呼ばれるものと大きな枠「編集画面」が表示されます。他にも色々ウィンドウも表示されますが、ここでは「タイムライン」について説明していきます。
ツールバーについても、追々説明していきますが、今回は必要ありません。
タイムラインについて
Animateには、「フレーム」と呼ばれるコマがずーっと続いた「タイムライン」というものがあります。「フレーム」は連番になっており、左から右へと流れ、アニメーションしていきます。パラパラ漫画を思い浮かべてもらえばわかりやすいかもしれません。
「編集画面」では、「フレーム」ごとのイメージのレイアウトデザインを編集できます。
おそらく、何もわからずに触る人は、この「編集画面」と「フレーム」の関連に戸惑うことだと思いますので、最初は、1フレーム目だけで、触ってみてください。
フレームアクションを追加する
慣れてきたら、20フレーム目にフレームを追加し、途中の10フレーム目で停止させたい場合を例に「フレームアクション」で停止させてみたいと思います。 |
| 20フレーム目にフレームを挿入する |
ここでは、イメージなどは追加せず、タイムラインの途中で止めることだけを説明します。
「タイムライン」の10フレーム目を選択し、右クリックして「キーフレーム」を追加します。その隣の11フレーム目にも「キーフレーム」を追加します。
 |
| 10フレーム目にキーフレームを挿入し、その隣の11フレーム目にも挿入する |
「キーフレーム」追加できると、以下のようになってると思います。
 |
| 10フレーム目と11フレーム目にキーフレームが追加された状態 |
この10フレーム目に、「フレームアクション」を追加します。
 |
| 10フレーム目で右クリックし、「アクション」をクリックする |
 |
| アクションパネルに「stop();」と記述する |
この「stop();」は、Animateで使用する「ActionScript3」というプログラムの一つで、タイムラインを制御するための基本になります。
今回のように、20フレームあるタイムラインだけど、10フレーム目で、一度止めたいという時に使用します。
また、「アクションパネル」には、「＜＞」というアイコンがあり、クリックすると、Animateに用意された「ActionScript3」を使用することができます。
さて、今回は「タイムライン」について、説明させていただきましたが、いかがだったでしょうか。これだけでは、シューティングゲームは作れませんね。当たり前です。
次回は、「タイムラインを移動する」を説明したいと思います。
