Animate のステージとツールパネルの使用

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

この記事では、Animate でグラフィックコンテンツを扱う場合のステージとツールパネルの使用方法について説明します。

スタートアップスクリーンの概要

ドキュメントが開かれずに Animate(旧 Flash Professional CC)が実行されている場合、スタートアップスクリーンが表示されます。スタートアップスクリーンには、次の 4 つの領域が含まれています。

最近使用したファイルを開く

最近使用したファイルを開きます(開くアイコンをクリックします)。

新規作成

Animate ドキュメントや ActionScript® ファイルなどの Animate のファイル形式を一覧表示します。

テンプレートから作成

Animate ドキュメントの作成で最も一般的に使用されるテンプレートを一覧表示します。

拡張

Animate Exchange Web サイトにリンクします。ここでは、ヘルパーアプリケーション、エクステンションおよび関連情報をダウンロードできます。

スタートアップスクリーンでは、ヘルプリソースにもすばやくアクセスできます。Animate のツアーを表示し、ドキュメントリソースについて学習し、アドビの認証トレーニング施設を検索することができます。

  • スタートアップスクリーンを非表示にするには、「今後表示しない」を選択します。

  • スタートアップスクリーンを表示するには、編集/環境設定を選択(Windows®)するか、Animate/環境設定を選択(Macintosh®)し、「一般」カテゴリの起動時メニューからスタートアップスクリーンを選択します。

ステージの使用

ステージは、Animate ドキュメントを作成するときにグラフィックコンテンツを配置するための矩形領域です。オーサリング環境のステージは、Flash Player または Web ブラウザーウィンドウ内の矩形領域(再生中、ドキュメントが表示される領域)を表します。デフォルトの黒のアウトラインは、ステージのアウトラインビューを示します。

作業時に、拡大または縮小してステージのビューを変更することができます。ステージ上にアイテムを配置する場合、グリッド、ガイド、ルーラーを使用することができます。

コンテンツのあるタイムラインとステージ

ステージの拡大/縮小

ステージ全体を表示したり、描画の一部を拡大して表示したりするには、表示比率を変更します。最大の拡大率は、使用するモニターやドキュメントのサイズによって異なります。ステージの縮小の最小値は 8% です。ステージの拡大の最大値は 2000% です。

注意:

互換性のあるデバイスでは、マルチタッチジェスチャも使用できます。

  • エレメントを拡大するには、ツールパネルの虫めがねツール を選択し、エレメントをクリックします。虫めがねツールの拡大と縮小を切り替えるには、虫めがねツールが選択されている状態でツールパネルのオプション領域の「拡大」 または「縮小」 ボタンを使用するか、Alt キー(Windows)または Option キー(Mac OS)を押しながらクリックします。

  • 描画の特定の領域がウィンドウに収まるように拡大するには、虫めがねツールでステージ上の矩形の選択範囲をドラッグします。

  • ステージ全体を拡大または縮小するには、表示/ズームイン、または表示/ズームアウトを選択します。

  • 指定した比率で拡大または縮小するには、表示/表示比率を選択してサブメニューから比率を選択するか、ドキュメントウィンドウの右上隅にあるズームコントロールで比率を選択します。

  • ステージをアプリケーションウィンドウに合わせて拡大または縮小するには、表示/表示比率/ウィンドウに合わせるを選択します。
  • ステージの外に出たコンテンツを切り抜くには、「ステージ外側のコンテンツをクリップ」アイコン をクリックします。
  • 現在のフレームのコンテンツを表示するには、表示/表示比率/すべて表示を選択するか、ステージの右上隅にあるズームコントロールで「すべて表示」を選択します。シーンが空白の場合は、ステージ全体が表示されます。
  • ステージ全体を表示するには、表示/表示比率/ステージ全体を表示を選択するか、ドキュメントウィンドウの右上隅にあるズームコントロールで「ステージ全体を表示」を選択します。

  • ステージ周囲のワークスペース、または、一部もしくは全体がステージ領域の外側にあるシーン内のエレメントを表示するには、表示/ペーストボードを選択します。ペーストボードは薄い灰色で表示されます。例えば、ステージを横切って飛ぶ鳥を作成する場合、飛び始めの部分はステージの外側のペーストボードに配置し、それをステージ領域内に移動するようにアニメーション化する必要があります。

ペーストボードカラー

これまで、ペーストボードカラーはユーザーインターフェイスのテーマに基づいて固定されていました。2017 年 1 月のリリースからは、ペーストボードカラーとステージカラーを一致させることができます。この機能によって、無限のカンバスで作業できるようになります。 

注意:

最終出力では、ステージコンテンツのみが表示されます。 

ステージの表示の移動

ステージの表示比率を上げると、ステージ全体を表示できない場合があります。表示比率を変更せずに表示位置を変更するには、ハンドツールを使用してステージを移動します。

注意:

互換性のあるデバイスでは、マルチタッチジェスチャも使用できます。

  • ツールパネルで、ハンドツールを選択し、ステージをドラッグします。スペースバーを押したままにすると、他のツールから一時的にハンドツールに切り替わります。

ステージの回転

Animate では、特定の角度で描画およびペイントするのに便利なように、自由変形ツールのようにステージ上の実際のオブジェクトを永続的に回転することなく、ステージの表示を一時的に回転できる新しい回転ツールが導入されています。Shift キーとスペースバーを同時に押しながらドラッグして表示を回転することで、現在どのツールを選択しているかに関係なく、ステージをすばやく回転できます。

回転ツールを使用してステージを回転するには

  1. ハンドツール (H)にグループ化されている回転ツール (H)を選択するか、ブラシなどの他のツールを使用しながら、Shift キーとスペースバーを同時に押して一時的に回転ツールに切り替えます。

    ツールバーの回転ツール

  2. 回転ツールを選択すると、十字線で示される回転用のピボットポイントが画面に表示されます。目的の位置をクリックすることで、ピボットポイントの位置を変更できます。

    十字線のピボットポイント

  3. ピボットポイントを設定したら、ドラッグしてピボットポイントを中心としてステージの表示を回転できます。

    回転したステージ

  4. ステージ回転ツールを使用して、ドラッグして一時的にステージ領域を回転します。現在の回転角度は、ピボットの十時線上に赤い線で示されます。

  5. ステージをデフォルトの表示にリセットするには、「ステージの中央を表示」ボタン をクリックします。

ステージサイズに収まるようにコンテンツを拡大/縮小する

PI の「コンテンツを拡大/縮小」オプションにより、ステージサイズに従ってステージ上のコンテンツを拡大/縮小できます。このオプションが選択された状態でステージがリサイズされると、コンテンツは、ステージと同じ縦横比でリサイズされます。

PI の「コンテンツを拡大/縮小」オプション

ステージサイズの拡大/縮小

詳細設定の「コンテンツを拡大/縮小」オプションに、PI から直接アクセスできるようになりました。このオプションが選択された状態でステージがリサイズされると、コンテンツは、ステージと同じ縦横比でリサイズされます。

PI とドキュメント設定ダイアログボックスには、ステージのサイズを比例して拡大する「リンク」オプションがあります。デフォルトでは、ステージの高さと幅のプロパティはリンクされていません。リンクボタンをクリックしてリンクを有効にすると、高さまたは幅プロパティの値を変更したときに、もう一方のプロパティの値が比例して変更されます。

「コンテンツを拡大/縮小」オプションを選択すると、ステージのサイズが自動的にリンクされ、無効になります。これは、コンテンツの拡大/縮小は、ステージのサイズが比例して変更される場合に意味をなすからです。

ステージのサイズにを例して拡大/縮小するリンクボタン

カンバスの透明度の設定

色見本でアルファカラーの範囲をパーセンテージで選択することで、カンバスに透明モードを設定できます。そのためには、カンバス/プロパティ/ステージ/アルファ % を選択します。

選択したアンカーに基づくステージの拡大/縮小

ドキュメント設定でアンカーポイントを選択し、高さと幅を指定して、ステージをそのサイズに拡大/縮小できます。「コンテンツを拡大/縮小」を無効にすると、次の図に示すように、選択したアンカーポイントに従って各方向にステージが拡大されます。

アンカーポイントに基づいてステージの拡大/縮小が可能

ステージの拡大/縮小:例

次の例では、ステージの右下隅のアンカーポイントから、サイズが 550x400 のステージが 750x600 に比例して拡大されます。

右下隅をアンカーポイントとして指定したステージの拡大/縮小の設定

右下隅のアンカーポイントから設定された方向に拡大されたステージ

注意:

互換性のあるデバイスでは、マルチタッチジェスチャも使用できます。

ルーラーの使用

ルーラーを表示すると、ステージの最上部と左側に配置されます。ルーラーではピクセルがデフォルトの計測単位として使用されていますが、別の単位に変更することができます。ルーラーを表示してステージ上でエレメントを移動すると、ルーラーに線が表示されて、エレメントのサイズが示されます。

  • ルーラーの表示と非表示を切り替えるには、表示/ルーラーを選択します。

  • ドキュメントのルーラーの計測単位を変更するには、修正/ドキュメントを選択し、ルーラー単位メニューから単位を選択します。

ガイドの使用

ルーラーを表示している場合は(表示/ルーラー)、水平および垂直ガイドをルーラーからステージ上にドラッグすることができます。

ネストされたタイムラインを作成する場合、ドラッグ可能なガイドは、そのガイドが作成されたタイムラインがアクティブな場合にのみステージ上に表示されます。

カスタムガイドや変則的なガイドを作成するには、ガイドレイヤーを使用します。

  • 描画ガイドを表示または非表示にするには、表示/ガイド/ガイドを表示を選択します。

    注意:ガイドを作成するときに、グリッドが表示され、「グリッドに吸着」がオンになっていると、ガイドはグリッドに吸着します。

     

  • ガイドへのスナップをオンまたはオフにするには、表示/吸着/ガイドに吸着を選択します。

    注意:ガイドがグリッド線の間にある場所では、ガイドへの吸着がグリッドへの吸着より優先されます。

     

  • ガイドを移動するには、選択ツールでルーラー上の任意の場所をクリックし、ガイドをステージ上の目的の場所にドラッグします。

  • ガイドを削除するには、ガイドがロック解除された状態で選択ツールを使用して、ガイドを水平または垂直ルーラーまでドラッグします。

  • ガイドをロックするには、表示/ガイド/ガイドをロックを選択するか、ガイドの編集ダイアログボックス(表示/ガイド/ガイドの編集)の「ガイドをロック」オプションを使用します。

  • ガイドを消去するには、表示/ガイド/ガイドの消去を選択します。ドキュメント編集モードでは、ドキュメント内のすべてのガイドが消去されます。シンボル編集モードでは、シンボルで使用されているガイドだけが消去されます。

ガイドの環境設定

  1. 表示/ガイド/ガイドの編集を選択し、次のいずれかの操作を行います。

    • カラーを設定するには、カラーボックスの三角形をクリックし、パレットからガイド線のカラーを選択します。デフォルトのガイドのカラーはグリーンです。

    • ガイドの表示と非表示を切り替えるには、ガイドを表示を選択または選択解除します。

    • ガイドへの吸着のオン/オフを切り替えるには、「ガイドに吸着」を選択または選択解除します。

    • 「ガイドをロック」の選択と選択解除。

    • 「スナップの精度」を設定するには、ポップアップメニューからオプションを選択します。

    • すべてのガイドを削除するには、「すべてクリア」をクリックします。「すべてクリア」を実行すると、現在のシーンからすべてのガイドが削除されます。

    • 現在の設定をデフォルトとして保存するには、「初期設定として保存」をクリックします。

  2. 「OK」をクリックします。

グリッドの使用

ドキュメントのグリッド線は、すべてのシーンのアートワークの背後に表示されます。

描画グリッドの表示/非表示

  1. 次のいずれかの操作を行います。

    • 表示/グリッド/グリッドを表示を選択します。

    • Ctrl+ 引用符(')(Windows)または Command+ 引用符(')(Mac OS)を押します。

グリッド線への吸着のオン/オフの切り替え

  1. 表示/吸着/グリッドに吸着を選択します。

グリッドの環境設定

  1. 表示/グリッド/グリッドの編集を選択して、オプションのいずれかを選択します。

  2. 現在の設定をデフォルトとして保存するには、「初期設定として保存」をクリックします。

メインツールバーと編集バーについて

アプリケーションウィンドウの上部にあるメニューバーには、機能を制御するコマンドのメニューが表示されます。

ステージの上部にある編集バーには、シーンやシンボルの編集や、ステージの表示比率を変更するのに使用するコントロールや情報が表示されます。

カスタムツールバー

Animate 2020 リリースでは、ツールの追加、削除、組み合わせ、並べ替えを自由におこなえます。ツールバーの「他のオプション」アイコン(...)をクリックすると、ツールパレットが表示されます。 

Animate ツールバー
Animate ツールバー

ツールバーパレット
ツールバーパレット

ツールバーからツールをドラッグしてツールパレットにドロップすると、ツールを削除することができます。同様に、ツールバー内の目的の位置にツールをドラッグ&ドロップして、ツールパレットからツールバーにツールを追加することができます。 

さらに、これらの機能強化により、以下が可能です。

  • ツールパネルからツールパレットへ(またはその逆方向に)ツールを追加または削除する。 
  • ツールを別のツールまたはツールグループにドラッグ&ドロップして、ツールをツールグループに結合する。
  • 選択したツールを特定のツールの上または下にドラッグ&ドロップして、ツールを特定のツールまたはツールグループの上または下に再配置する。

ツールの論理的グループ化

スペーサー
スペーサーを使用した論理的グループ化

ツールリストの間にスペーサーを追加することで、ツールの論理的グループ化を希望どおりにおこなうことができます。ツールパレットからツールパネルにスペーサーをドラッグ&ドロップして、そのようなグループを作成します。

ツールバーの切り離し

ツールバーの切り離し
ツールバーの切り離し

スペーサーが追加されると、スペーサーをツールパネルの外にドラッグして作業エリア内の目的の場所にドラッグすることにより、ツールバーのサブグループを切り離すことができます。切り離したツールバーを、元どおりツールパネルにマージすることもできます。切り離したツールバーを選択し、ツールパネルにドラッグします。

反転
切り離しの反転

切り離したツールバーは、マウスでポイントしたツールの下部にあるハイライト表示された領域をクリックすることで、水平または垂直方向に簡単に方向転換することができます。  

ツールバーのリセット
ツールバーのリセット

ツールバーのリセット

ツールパレットのハンバーガーメニューの「リセット」オプションを選択すると、ツールパネルをデフォルトの状態に設定することができます。

サブツールバーオプション

塗りのカラーと線のカラー

ツールバーの「塗りのカラー」セクションと「線のカラー」セクションは、Photoshop および illustrator のツールパネルと同様になるように変更されました。これにより、一貫性が保たれ、簡単にアクセスできるようになります。

ブラシモードと消しゴムモードへのアクセス

ブラシモードと消しゴムモードにもキーボードショートカットを追加できるようになりました。Mac でキーボードショートカットを作成するには、Animate/キーボードショートカットをクリックします。Windows では、編集/キーボードショートカットをクリックします。ツールが有効になっている場合は、1 回押すだけで、これらのオプションにアクセスできます。

塗りのカラーと線
塗りのカラーと線

消しゴムモード
消しゴムモード

ブラシモード
ブラシモード

ツールパネルの使用

ツールパネル内のツールを使用して、アートワークの描画、ペイント、選択、変更、およびステージの表示変更を実行することができます。ツールパネルは、4 つのセクションに分かれています。

  • ツール領域には、描画ツール、ペイントツール、および選択ツールがあります。
  • 表示領域には、ステージで拡大/縮小およびパンを行うためのツールがあります。
  • カラー領域には、線および塗りのカラーのオプションがあります。
  • オプション領域には、現在選択されているツールのオプションが表示されます。オプションは、ツールのペイント操作や編集操作に影響を与えます。

ツールパネルの表示/非表示を切り替えるには、ウィンドウ/ツールを選択します。

選択ツール

  1. 次のいずれかの操作を行います。

    • ツールパネルでツールをクリックします。選択したツールに応じて、ツールパネルの下部のオプション領域にボタンのセットが表示されます。

    • ツールのキーボードショートカットを押します。キーボードショートカットを表示するには、編集/キーボードショートカット(Windows)、または Animate/キーボードショートカット(Mac OS)を選択します。Mac OS では、新しいポインターを表示させるためにマウスを動かすことが必要な場合があります。

    • 矩形ツールなどの表示されているツールのポップアップメニューでツールを選択するには、表示されているツールのアイコンをクリックし、ポップアップメニューから別のツールを選択します。

ペイントブラシの筆圧と傾き

Animate では、ペイントブラシツールを使用して描画される線の筆圧と傾きをサポートしています。スタイラスにかかる筆圧や傾きを調整して、アートやパターンの線の幅を変化させることができます。さらに微調整を行う場合は、線幅ツールを使用して線幅ポイントを調整します。

詳しくは、ペイントブラシの操作を参照してください。

注意:

お使いのコンピューターに Wacom 筆圧感知タブレットが接続されている場合にのみ、ツールバーの筆圧アイコンと傾きアイコンが表示されます。

コンテキストメニューの使用

コンテキストメニューには、現在の選択内容に関連するコマンドが表示されます。例えば、タイムライン上でフレームが選択されている場合、コンテキストメニューには、フレームとキーフレームを作成、削除、および修正するコマンドが表示されます。コンテキストメニューはアイテムやコントロールの多くにあり、ステージ上、タイムライン内、ライブラリパネル内、アクションパネル内など、様々な場所で表示されます。

  1. アイテムを右クリック(Windows)するか、または Control キーを押しながらクリック(Mac OS)します。
アドビのロゴ

アカウントにログイン