インターネットで調べたところ、Illustratorには動画作成機能は付いていないが、IllustratorとPhotoshopを連携させれば動画は作成出来るみたいなので、この方法もインターネットで調べながら勉強していきたい。
動画デザイン：【原本】
動画デザイン：【ILLUSTRATOR加工】
Illustrator作成手順
動画素材の準備
１．静止画像を用意する。
※ここでは、音階_長調_案内板.pngと音階_短調_案内板.pngを使用。
Illustratorに静止画を読み込む
１．メニューバー→ファイル→開くをクリックし、用意した静止画像を選択。
２．レイヤーパネルを開き、新規レイヤーを作成ボタンを押下する。
３．アートボード上の静止画像を選択した状態で、ツールパネルの回転ツール
ボタンを押下する。
４．回転ダイアログが表示されるので、音階_長調_案内板.pngの場合、回転の角度
：-10°。音階_短調_案内板.pngの場合、回転の角度：10°と入力し、コピー
ボタンを押下する。
５．レイヤーパネルのレイヤー１に、新しい画像が追加されるので、ドラッグ＆
ドロップで追加したレイヤーに移動させる。
６．画像のレイヤー移動が出来たら、レイヤーパネルの移動先レイヤーを非表示
モードにする。
７．項番２から項番6の作業を繰り返し行う。
この時、項番４の回転の角度は、音階_長調_案内板.pngの場合、
-20°、-30°、-40°、-50°、-60°、-70°、-80°と-10°づつ、減らしていき、
音階_短調_案内板.pngの場合、20°、30°、40°、50°、60°、70°、80°と
10°づつ、増やしていく。この作業を行う事によって、音階_案内板の左回り、
右回りが決まっていく。
８．上記工程が終われば、レイヤーパネルのレイヤーを全て、表示モードに切り
替える。
Photoshop形式に保存する
１．メニューバー→ファイル→書き出し→書き出し形式をクリックすると、
書き出しダイアログが表示されるので、オプション：レイヤーを保持に
チェックを入れ、ファイル名：任意。
ファイルの種類：photoshop(＊.psd)を選択し、書き出しボタンを押下
すると、指定したフォルダにphotoshopモードのプログラムが作成される。
動画デザイン：【PHOTOSHOP加工】
photoshop作成手順
PhotoshopにPHOTOSHOP形式ファイルを読み込む
１．メニューバー→ファイル→開くをクリックし、Illustratorで作成したphotoshop
形式ファイルを選択。
２．メニューバー→ウィンドウ→タイムラインを選択すると、タイムラインダイア
ログが表示されるので、「フレームアニメーションを作成」に切り換え、
フレームアニメーションを作成ボタンを押下すると、タイムライン
（フレームアニメーション）ダイアログが表示される。
３．レイヤーパネルの各レイヤーをタイムラインパネルにセットしていくが、
手順が必要なので、下記に述べる。
① レイヤーパネルのレイヤー１を選択し、レイヤー１の表示ボタンをＯＮ。
他のレイヤーの表示ボタンはＯＦＦにする。
② タイムラインパネルの選択したフレームを複製ボタンを押下する。
③ タイムラインパネルに指定されたレイヤー１が複製されたのを確認でき
れば、①～③を繰り返す。この時、選択したレイヤーのみ表示ボタンを
ＯＮ。他のレイヤーの表示ボタンはＯＦＦにすることを忘れないこと。
４．タイムラインパネルの再生ボタンをクリックすると、タイムインジケータが
動いて動画の内容が確認できる。停止ボタンをクリックすると動画の内容が
ストップする。
文字を作成する
１．レイヤーパネルの新規レイヤーを作成ボタンを押下してレイヤーを増やす。
２．新規レイヤーを選択した状態で、ツールバーの横書き文字ツールを選択する。
３．プロパティパネルを開き、文字：AB-countryroadを選択。フォントサイズ
：24pt。トラッキング：10。カラー：R:255。G:8。B:3。を入力後、
アートボ上に文字を入力する。
ビデオタイムラインに切り換え
１．タイムラインパネルの下にあるビデオタイムラインに変換ボタンを押下し、
ビデオタイムラインに切り替える。
２．ビデオタイムラインの一番上に文字のレイヤーが追加されていることを確認。
文字幅を決める
１．文字のレイヤーが他のアニメーションより、幅が長すぎる場合、ドラッグ
しながら長さを調整する。
２．フレームアニメーションと、文字レイヤーの動作が自然な状態で再生出来れば
ＯＫ。
ＧＩＦアニメーションとして保存する
１．メニューバー→ファイル→書き出し→ＷＥＢ用に保存をクリックすると、ＷＥＢ
用に保存画面が表示されるので、プリセット：ＧＩＦ １２８ ディザ。画像サイ
ズ：Ｗ：７２０。Ｈ：１０８０。アニメーションループオプション：無限を選択
し、保存ボタンをクリック後、名称を入力して保存する。
動画デザイン：アニメーション
参考：デザチューブ 朝日新聞社さんの
「【Illustrator】【Photoshop】GIFアニメーションの作り方 」を参考にさせて
頂きました。ありがとうございます。
