目次

クラシックトゥイーンを利用してシンプルなアニメーションを作成する

目次

Adobe Animateでクラシックトウィーンを利用してシンプルなアニメーションを作成する手順を紹介します。

概要

旧 Adobe Flash でアニメーションを作成する場合には、トゥイーンを利用してアニメーションを作成しました。 その後のバージョンアップで新しいアニメーション作成方式のモーショントゥイーンが追加され、従来のトゥイーンは「クラシックトゥイーン」の名称に変わりました。 この記事では、クラシックトゥイーンを利用してアニメーションを作成する手順を紹介します。

手順

Adobe Animateでドキュメントを作成または、ドキュメントを開きます。シーンのキャンバスが表示されます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像1

右側のツールパレットから[矩形ツール]をクリックして選択します。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像2 クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像3

キャンバス上でドラッグして矩形を描画します。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像4

ウィンドウ下部の[タイムライン]パネルでタイムラインのフレームをクリックしてます。今回の例では、20フレーム目のフレームをクリックして選択します。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像5
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像6

マウスの右ボタンをクリックします。下図のポップアップメニューが表示されます。メニューの[キーフレームの挿入]をクリックします。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像7

キーフレームが挿入されます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像8

キーフレームが挿入されると黒丸のマーク[●]がフレームに表示されます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像9

挿入されたキーフレームが選択されている状態のまま、キャンバスに配置した矩形の位置を移動します。今回は右下に移動しました。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像10

[タイムライン]パネルで1フレーム目をクリックして選択します。矩形の位置が移動前の元の位置に表示されていることが確認できます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像11

[タイムライン]パネルで1フレームから20フレームのキーフレームまでをドラッグして選択します。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像12
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像13

フレームが選択された状態で、フレーム上で右クリックします。下図のポップアップメニューが表示されます。[クラシックトゥイーンを作成]の項目をクリックします。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像14

トゥイーンが作成されます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像15

トゥイーンが作成されると、トウィーンのフレームに矢印が表示されます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像16

タイムラインのインジケーターを最初のフレームに移動します。矩形が左上の位置に変わります。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像17

インジケーターをドラッグして移動させると矩形が右下に動く様子が確認できます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像18

Webブラウザでプレビューします。[制御]メニューの[プレビュー]の項目をクリックします。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像19

Webブラウザが起動し、アニメーションがWebブラウザ上で再生されます。
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像20
クラシックトゥイーンを利用してシンプルなアニメーションを作成する:画像21

AuthorPortraitAlt
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。 最近は生成AIの画像生成の沼に沈んでいる。
作成日: 2017-05-22
改訂日: 2022-02-07
Copyright © 1995–2025 iPentec all rights reserverd.