はじめに

Animate プロジェクトにテキストを追加する方法は 3 通りあります。

  • ブラシツールを使用する
    ツールパネルで「T」のアイコンをクリック(またはショートカットの T キーを使用)し、ドキュメント内でクリック&ドラッグしてテキストボックスを作成します。最初は、テキストボックスの位置やサイズについてあまり気にする必要はありません。後で細かく整えることができるので、とりあえず、入力を開始します。試しに「ON the EDGE」という語句を入力すると、図 1 に示すように、入力したテキストがステージ上に表示されます。複数の段落を作成する場合は、ワードプロセッサーと同じ要領で Enter(Return)キーを押します。入力が完了したら、Esc キーを押すか、右上隅にある X ボタンをクリックすると、テキストウィンドウを閉じることができます。
  • コピー&ペーストする
    テキストの量が多い場合、ワードプロセッサーで作成したドラフトやその他のソースを使用してもかまいません。その場合は、ワードプロセッサーのテキストをコピーしてから、Animate でテキストボックスを作成し、Ctrl+V(Command+V)キーを押してテキストをプロジェクトにペーストします。書式設定は元のとおりではありませんが、テキストは表示されます。このプロセスでは、段落の区切りなどの主要な書式の一部が保持されます。
  • HTML をテキストで開く
    HTML エディターやその他の Web 作成ツールで作成した Web ページがあり、静的なページに動きを加えたいとすると、Animate でファイル開くを使用してそのページを開き、エレメントをアニメーション化することができます。この方法で読み込まれたテキストに対して実行できる処理は限られており、編集や書式設定の変更はできません。要するに、アニメーションで使用できるのは、グラフィックエレメントだけということです。この方法は、テキスト内のリンクが維持されるという点が優れています。
Fig1

テキスト固有のプロパティを変更する

Animate プロジェクトで作成したテキストには、その外観を変更するために使用できるテキスト固有のプロパティがいくつかあります(図 2 参照)。これらのプロパティは、テキストパネルに表示されます。初期状態では、使用頻度の低いオプションの一部が表示されないことがあります。パネルの左下隅にあるボタンをクリックして、プロパティの表示と非表示を切り替えます。各プロパティの名前は、CSS(カスケードスタイルシート)の命名規則に従い、単語間をハイフンでつないで小文字で表記されています。

Fig2
  • font-family 様々な書体から選択できますが、コンピューターにインストールされているフォントがすべて揃っているわけではありません。Web デザインでは、フォントをプロジェクトに追加しない限り、閲覧者が持っているフォントしか使用できません。フォントおよび書体について詳しくは、次のセクションを参照してください。
  • colorスウォッチをクリックすると、標準的なカラーピッカーが表示され、テキストのカラーを設定することができます。
  • font-sizeフォントサイズを数値で指定します。font-size の横にテキストプロパティの単位を選択するボタンがあります。これをクリックして、font-size の指定方法を変更します。
  • font-unitAnimate では、フォントサイズの指定に、ピクセル(px)、EMS (em)、パーセント(%)の 3 種類の単位を使用します。ピクセルは、モニター上の 1 つのドットに相当します。em は、アルファベットの M の大きさに相当します。ほとんどの Web ブラウザーにはテキストのサイズを調整する機能があるので、em はブラウザーの設定に従って変化する単位ということになります。パーセントは、デスクトップコンピューターだけでなくモバイルデバイスでも表示される Web コンテンツをデザインする時に便利なオプションです。
  • font-style文字をイタリック体のように傾斜させます。
  • font-weightThinExtra LightNormalExtra Bold などのオプションがあります。オプションの順序とそれぞれに付随する数値は、様々なフォントの太さを比較する際のヒントになります。
  • font-decorationテキストに下線を付けるときに、このボタンを使用します。
  • Text-alignワードプロセッサーと同様に、テキストを右、中央、または左に揃えることができます。テキストボックスのすべてのテキストが整列されるので、ある段落を右揃え、別の段落を中央揃えにする場合はテキストボックスを分ける必要があります。
  • text-indentテキストボックス内の最初の行をインデントします。ピクセル単位で値を変更できます。ぶら下げインデントを作成するために負の数値を入力することはできません。
  • line-heightテキストの行間を設定するために使用します。
  • letter-spacing名前が表すとおり、文字間のスペースを調整できます。特徴的な見出しや会社のロゴを作成する場合によく使用します。通常の本文にはあまり使用すべきではありません。
  • word-spacing単語の間隔を変えます。読みにくいテキストにならないよう、慎重に使用してください。

Web フォントを使用する

Animate アニメーションで使用する書体の数を増やす方法は他にもあります。何年も前から、Web デザイナーは Web フォントを使用しています。Web ブラウザーを含むプログラムで特定のフォントを表示するためには、フォントの記述にアクセスする必要があります。通常、そうした記述は、プログラムと同じコンピューター(「クライアント」と呼ばれることもあります)上に存在しますが、Web フォントの仕組みは少し異なります。例えば、Google の Web フォント(www.google.com/webfonts)の場合、フォントの定義は Google のサーバー上に置かれています。Web デザイナーは、ページにコードを追加して、フォントの記述がある場所をブラウザーに示すことによって、そのフォントを使用することができます。

まず、使用する Web フォントを見つけます。無料で驚くほど使いやすい Google Web フォント から探してみることをお勧めします。Google Web フォントを選択して、プロジェクトでそれを指定するのに必要なコードを取得する手順を説明します。

  1. Web ブラウザーで www.google.com/webfonts にアクセスすると、フォントのサンプルが並んでいるページが表示されます。多数のフォントがあるので、左のウィジェットでフォントをフィルターすると便利です。ページ下部にある「Choose」、「Review」、「Use」の 3 つのボタンをクリックすると、Web フォントをうまく活用するための手順が示されます。

  2. 左にあるフィルターのドロップダウンメニューをクリックし、Serif、Sans Serif、Display、Handwriting から選択します。メニューにはチェックボックスが使用されているので、特性を組み合わせて選択できます。例えば、Sans-Serif と Display を使用することができます。

  3. 必要に応じて、Thickness、Slant、Width スライダーを使用してフォント検索を絞り込めば、多数の選択肢の中から画面に表示されるフォントの数を少なくできます。

  4. フォントウィンドウ上部のタブを使用して、Word(単語)、Sentence(文)、Paragraph(段落)ごとの表示に変更します。

    見出しのフォントを探しているなら、「Word」または「Sentence」タブを選択することをお勧めします。
    本文のフォントを選択する場合は、「Paragraph」タブで外観を確認してください。

  5. 青い「Add to Collection」ボタンをクリックします。コレクションには複数のフォントを保存できますが、ページのレンダリング速度や見栄えを考えると、使用するフォントの数は制限すべきでしょう。

  6. 「Review」をクリックします。この手順は必須というわけではありませんが、名前が示すとおり、このページでは、見出しや段落として使用する場合のフォントをより詳しく見ることができます。

  7. 「Use」をクリックします。Web サイトでフォントを使用するための手順を説明するページが表示されます。ページの下の方に「Add this code to your website」という見出しの青いボックスがあります(図 3 参照)。

    Fig3
  8. 「Standard」タブをクリックし、表示されているコードを選択してコピーします。これでクリップボードにコードが保存され、フォントの記述の場所を Animate プロジェクトに追加するプロセスに進むことができます。

Web フォントをコンポジションに追加する

Google や他のブランドの Web フォントを選択して、それを特定するコードをコピーしたら、Animate でプロジェクトに追加します。手順は次のとおりです。

  1. ライブラリパネルで、「フォント」バー上の + ボタンをクリックします(図 4 参照)。

    Fig4

    Web フォントを追加ダイアログボックスが表示されます。

    Fig5
  2. フォントの場所を指定するコードを下の「埋め込みコード」テキストボックスにペーストします。

    このコードは、Web フォントをホストする組織によって提供されています。前の手順に従った場合、コードはクリップボードに保存されています。

  3. 上のフォント代替リストに、Web フォントの名前を入力し、Web フォントが使用できない場合に使用するフォントも指定しておきます。クライアントコンピューターがインターネットに接続されていない場合、Web フォントを使用できません。

  4. フォントを追加」ボタンをクリックします。すると、このフォントがフォント名ドロップダウンメニューに表示されるようになります。

    Fig6

その他のテキストプロパティを変更する

Animate の他のエレメントと同じように、テキストも静止したままにしたくないという場合、幸いなことに、画面上でテキストを動かすために新しいツールを習得する必要はありません。X/Y 位置プロパティによってテキストが表示される場所が決まり、W/H サイズプロパティによってテキストボックスのサイズが決まります。サイズプロパティによって、テキストボックスのサイズは変わりますが、文字のサイズは変わりません。文字のサイズを変更するには、font-sizeプロパティまたは拡大/縮小プロパティを使用します。ブラウザーウィンドウのサイズに応じてテキストのサイズを変更する必要が生じることがあります。その場合は、テキストプロパティの単位%(パーセント)にします。描画や写真と同じように、タイムラインでプロパティキーフレームを作成して、テキストプロパティを時間の経過とともに変化させることができます。

画像を自由に変形したように、テキストでも変形プロパティを使用できます。テキストブロックを Web ページに追加または削除する際に、傾斜させたり回転させたりして演出しましょう。拡大/縮小プロパティを使用すれば、テキストボックスとその中のテキストを大きくしたり小さくしたりできます。拡大/縮小は、テキストに対しても JPEG 画像上と同じように機能し、パーセントの設定に応じてすべてが拡大または縮小されます。ただし、拡大/縮小プロパティを使用して拡大すると、テキストは少しぼやけます。

テキストボックスの縁を切り抜く

ステージ上の他のグラフィックエレメントと同じように、切り抜きプロパティを使用することで、テキストボックスの縁の部分を隠すことができます。写真の端をトリミングするようなものです。真ん中の 1 点だけが見える状態から徐々にテキストブロック全体が表示されるよう、テキストボックスをアニメーション化する場合、テキストを選択し、プロパティパネルの下の方にある三角形のボタンをクリックすると、切り抜きパネルが開きます。 パネル右上隅にあるボタンをクリックして、切り抜きをオンにします。エレメントの上下左右の縁を表す 4 つのコントロールが表示されます(図 7 参照)。手入力またはスクラブしてピクセル(px)単位で値を設定します。

Fig7

値を変えると、テキストボックスに結果が反映されます。適用後に切り抜きプロパティを削除するには、切り抜いたエレメントを右クリック(または Ctrl キーを押しながらクリック)して、ショートカットメニューから「切り抜きを削除」を選択します。

動く見出し作成する

ほとんどの場合、テキストはメッセージを伝えることを目的としているので、絶えず動いたり変化したりするテキストを閲覧者に見せることは非生産的です。だからと言って、デザイン作業が楽しくないわけではありません。例えば、Web ページが最初に読み込まれるときに、見出しを落下させたり跳ねさせたりすることができます。このプロジェクトでは、ステージの上部にバナーを作成し、Web ページが読み込まれると 3 つの単語「ON the EDGE」が所定の位置に出現するようにします。この場合、「ON the EDGE」という語句をアニメーション化します。3 つの単語を個別のテキストボックスに分割すれば、単語ごとに動かすことができます。また、単語や語句のすべての文字を個別にアニメーション化することも可能です。この作業で一番難しいのは、文字や単語が所定の位置に表示されたときにきちんと整列させることです。文字間隔が自然に見えるようにし、テキストを水平線上に均等に配置する必要があります。単語や文字をこのようにアニメーション化する場合、配置テンプレートを作成すると作業しやすいことがよくあります。このプロジェクトでは、その方法を実践します。デザイン時には単語と文字の移動を調整しやすいよう配置テンプレート(図 8)を表示させ、アニメーションの作成が終わったら、テンプレートを削除することができます。

Fig8

動く見出しを作成する手順は次のとおりです。

  1. 背景色を白に設定した 550 x 400 の新規ドキュメントを作成し、保存します。いつものように、プロジェクトの HTML ファイルと JavaScript ファイルを格納する新しいフォルダーを作成します。

  2. 矩形ツールを使用して、550px x 100px の四角形を作成し、X=0、Y=0 に配置します。背景色を R= 200、G= 210、B= 250、A= 100% に設定します。ボーダーカラーを「なし」に設定します。四角形に BannerBG という ID を設定します。仕様に合わせて四角形をすばやく作成するには、とりあえずドラッグで適当な四角を描いてからプロパティに値を入力します。その際、W/H サイズプロパティの横にあるリンクをクリックし、縦横比の固定を解除しておいてください。

  3. エレメントパネルで、BannerBG の横にあるエレメントをロックボタンをクリックします。BannerBG の横に南京錠が表示され、ステージ上の青いボックスを誤って選択したり移動したりできなくなります。

  4. テキストツールを選択し、ドラッグでテキストボックスを作成します。「ON the EDGE」と入力します。Arial Black フォント、サイズ 72 px中央揃えに設定します。このテキストは、アニメーションテキストの配置テンプレートとして機能します。

  5. プロパティで、テキストボックスに OnEdgeTemplate と名付けます。グラフィックと同様、タイムラインエレメントパネルで様々なテキストブロックを指定できます。この時点で、テキストのプロパティは図 9 のようになっています。

    Fig9
  6. 色付きの四角形に合わせて、テキストボックスのサイズを 550 px x 100px、位置を X= 0、Y= 0 に設定します。設定が完了すると、Animate のステージの上部は、図 10 のようになります。何らかの理由でテキストが青いボックスの背面にある場合、エレメントパネルで Z オーダーを変更できます。OnEdgeTemplate を BannerBG の上にドラッグするだけです。

    Fig10
  7. OnEdgeTemplate を選択して、Ctrl+D キーを押すと、テキストが複製されます。元のテキストと重なっているためわかりにくいのですが、エレメントパネルを見ると、OnEdgeTemplateCopy ができています。

  8. OnEdgeTemplateCopy をステージ中央にドラッグします。以降の手順では、これを使用して「ON」、「the」、「EDGE」の各語に個別のテキストボックスを作成します。その前に、配置テンプレートを設定しておくことをお勧めします。

  9. 元の OnEdgeTemplate を選択し、テキストカラーを赤(#ff0000)に設定します。先に述べたように、このテキストは配置テンプレートに使用されるため、鮮やかな赤い色にしておくと、テキストが正しく配置されているか確認しやすくなります。

  10. エレメントパネルで、OnEdgeTemplate の横にあるエレメントをロックボタンをクリックします。これで配置テンプレートの位置が固定され、誤って選択したり移動したりできなくなります。

  11. OnEdgeTemplateCopy を選択して、Ctrl+D キーを 2 回押すと、バナーテキスト全体のコピーが 2 つ作成されます。

  12. 1 つ目の OnEdgeTemplateCopy をダブルクリックします。テキスト編集ボックスで「ON」を除くすべてを削除してから、プロパティでテキスト名を変更します。1 つの単語または文字をアニメートする場合、余分なスペースを排除し、編集後のテキストに合わせてテキストボックスの幅を減らすことをお勧めします。

  13. 手順 12 を繰り返して、「the」と「EDGE」 のテキストエレメントを作成します。これで、3 つ単語が正しくラベル付けされ、個別に指定してアニメーション化できるようになりました。必要に応じて、テキストボックスの幅を単語に合わせて変更します(図 11 参照)。

    Fig11
  14. 単語「ON」をステージ上方の少し左側にドラッグします。単語「EDGE」をステージ上方の少し右側にドラッグします。単語「the」をまっすぐステージ上方にドラッグします。これらが各単語の開始位置です。すべて完全にステージの外に配置してください。

  15. 「ON」を選択し、回転プロパティを -30 に変更します。「Edge」を選択し、回転角度を 30 度に設定します。これら 2 つの単語は、それぞれの側から傾斜した状態で画面に出現します。

  16. 3 つの単語すべてを選択し、位置ボタンと回転のキーフレームを追加ボタンをクリックします。すると、各単語の開始位置がキーフレームに記録されます。

  17. 再生ヘッドを 0.5 秒の位置(0:00.500)にドラッグします。アニメーションは、全部で 1 秒間ですが、この手のシンプルなアニメーションには十分な時間です。閲覧者を退屈させないようにしましょう。各単語は、別々のタイミングで動き始め、0.5 秒後に動き終わります。

  18. 「ON」を選択して回転プロパティを 0 に戻し、「ON」を配置テンプレートの同じ単語の上に移動します。動作を確認するには、再生ヘッドを前後にドラッグします。必要に応じて、開始点または終了点を調整することができます。再生ヘッドを所定の位置に移動して単語の位置を微調整します。

  19. 再生ヘッドを 0:00.250 に移動してから、単語「the」を選択し、位置のキーフレームを追加ボタンをクリックします。ここでは「ON」の動きが完了する前に「the」の動きを開始させようとしています。ただし、最初の 0.25 秒間は単語「the」を静止したままにしておきたいので、0:00.000 と 0:00.250 に同一の値を持つ 2 つの位置キーフレームを作成する必要があります。

  20. 再生ヘッドを 0:00.750 にドラッグしてから、「the」を配置テンプレートの同じ単語の上に移動します。タイムラインのズームスライダーを使用して、タイムラインを見やすくします。タイムライン上部の時間軸の単位は、ズームレベルによって変化します(図 11 参照)。

    「the」は回転が適用されていないので、まっすぐ下に移動します。

    Fig12
  21. 再生ヘッドを 0:00.500 に移動し、単語「EDGE」を選択して位置回転のキーフレームを追加ボタンをクリックします。

    これにより、アニメーションの最初の 0.5 秒間「EDGE」が所定位置に保持されます。

  22. 再生ヘッドを 0:01 に移動してから、「EDGE」を配置テンプレートの同じ単語の上にドラッグします。

    タイムラインの 1 秒の位置ですべての単語の動作が終わり、後は配置テンプレートを削除すればアニメーションの最初のバージョンが完成します。

    赤の配置テンプレートを削除する前に、アニメーションをプレビューしましょう。Home キーを押してからスペースバーを押すと表示されます。必要に応じて、アニメーションの開始点と終了点を引き続き微調整できます。例えば、「ON」と「EDGE」が最初に現れ、「the」が最後に追加されるようにしてもかまいません。

テンプレートの取り扱い

赤い配置テンプレートは、アニメーションの作業中ずっと必要なわけではないので、満足できる状態になったら、削除できます。まず、エレメントをロックボタンをオフにして、テンプレートを選択できるようにしてから、エレメントパネルまたはステージ上でテンプレートを選択して Delete キーを押します。削除せずに、テンプレートのテキストにドロップシャドウ(図 13)や光彩効果を適用して使用することもできます。

Fig13
  • ドロップシャドウの場合は、テキストを中間調グレーに設定して、好みの不透明度に調整します。通常 30% 程度が適切です。3 つの単語の動作が完了するまでドロップシャドウを非表示にしておきたければ、アニメーションのそのポイントまで不透明度をゼロに設定しておきます。
  • 光彩効果の場合、黄色またはオレンジ色を選択します。拡大/縮小コントロールを使用して、テキストを出現時よりも少し大きくします。ここでも、不透明度を使用すれば、光彩効果のタイミングと外観を制御できます。光彩効果をフェードインしてからフェードアウトして、見出しをさらに目立たせることもできます。

バウンスを追加する

テキストが所定の位置に出現する先ほどの例では物足りないという方には、アクションに少しバウンスを追加するという方法もあります。バウンスを追加したテキストは、物理法則に従って動くバスケットボールのように、まず大きく跳ねてから何度か小さく跳ねて所定の位置に収まります。位置のキーフレームを追加することで独自のバウンスを作成することや、タイムラインのトランジションに含まれるイージングプロパティを使用してバウンスを作成することができます。

バウンスを手動で作成する

ファイルを開き、エレメントパネルを確認すると、3 つのエレメントを持つステージが表示されます。「BOUNCE」は、アニメーション化しようとしている単語です。「BounceTemplate」(赤いテキスト)は、配置テンプレートです。前の例と同じように、これはアニメーションテキストの最終的な位置を示しています。一番下のエレメントは、ステージの下部にあるグレーの四角形です。これはテキストがこの上で跳ねる地面と見なすことができます。

タイムラインで上下交互の位置にキーフレームを追加することによって、跳ねる動きが作成されます(図 14 参照)。再生ヘッが 0:00 にある状態で、BOUNCE を選択し、プロパティで「Yのキーフレームを追加」ボタンをクリックします。これで開始点が設定されます。次に、再生ヘッドを 1:00 にドラッグし、BOUNCE を移動して BounceTemplate に重ねます。

Fig14

Yのキーフレームを追加」をクリックして、新しい位置のキーフレームを追加します。再生ヘッドを 1.75 にドラッグし、BOUNCE をステージの中央付近に移動します。再生ヘッドを 2.25 に移動し、BOUNCE をテンプレート上に戻します。モーションの時間を 0.5 秒、次に 0.25 秒と短くして、さらにバウンスを作成します。跳ねるたびに間隔を縮めてください。

まっすぐ上下するバウンスに飽きたら、動きに少し回転を付けて、単語が両下隅から前後に跳ねているように見せることもできます。テキストが地面に接触するときに垂直スケールプロパティを小さくすると、テキストが地面とぶつかって圧迫されているかのように見える、漫画のようなスムージングクションを作成できます。

Animate の作成済みバウンスを使用する

まずは、トランジションとイージングの概念について少し説明します。ステージ上のエレメントをアニメーション化するときに、プロパティを変更し、タイムラインでキーフレームのプロパティを作成して、トランジションを作成します。トランジションは、タイムラインにバーとして視覚的に表示されます。ステージ上のエレメントと同様、トランジションにもプロパティがあります。そのプロパティの 1 つがイージングです。現実の世界では、物体が移動するとき、加速してから減速します。車が全速力で動き始めたり、一瞬で停止したりすることはありえません。イージングプロパティを使用すると、エレメントのトランジションを自動的に制御することによって、よりリアルな動きを作成できます。また、イージングオプションの 1 つが、バウンスモーションの作成に役立ちます。

トランジションのプロパティを詳しく見るには以下の手順を実行します。

  1. 再生ヘッドを 0:01 にドラッグし、BOUNCE を下にドラッグして BounceTemplate に重ねます。タイムラインにトランジションが作成されます。

  2. タイムラインで、BOUNCE の横にあるトランジションレーンをクリックします。タイムライン内のトランジションがハイライト表示されます。

  3. タイムラインの上部にあるイージング ボタンをクリックします。イージングパネルがタイムラインの上に表示されます。適用されるのはイージングメソッドであるため、このボタンのツールヒントにはイージング:線状と表示されます。線状イージングでは、トランジションは最初から最後まで一定の割合で適用されます。

  4. イージングパネルの左側にある「イーズアウト」をクリックします。次に、右側の「バウンス」をクリックします(図 15 参照)。「イーズアウト」をクリックすると、パネルにイーズアウトメソッドの数が表示されます。グラフには、イージングメソッドが視覚的に表現されます。

    Fig15
  5. イージングパネルの外をクリックします。パネルが閉じ、選択したトランジションにイージングメソッドが適用されます。

  6. Home キーを押してからスペースバーを押します。

    アニメーションが再生され、モーションの終わりにバウンドするアクションが見られます。EaseInBounce を適用した場合、バウンスモーションはトランジションの開始時に発生します。

    イージングプロパティを使用すると、効率良くトランジションを作成できます。Animate には様々なトランジションが用意されていますが、少しわかりにくい名前のものもあります。様々なイージングの特徴を知るには、練習用のアニメーションを作成し、同一のエレメントやトランジションに異なるイージングを適用してみるのが最善の方法です。

初めてのアニメーションを作成する

  1. Animate を起動し、ファイル新規作成を選択して、新しいドキュメントを作成します。新しいドキュメントでは、空のステージから作業を始めます。「ステージ」は、エレメントウィンドウとプロパティウィンドウにリストされている唯一の要素です。プロパティパネルを見るとわかるように、ステージにはサイズ、カラーなどのプロパティがあります。これらのプロパティそれぞれについては後ほど詳しく説明します。

  2. プロジェクトのフォルダーを作成し、ファイル名前を付けて保存を選択して、「Hello_World」や「First_Try」といった名前でファイルを保存します。

    Windows Explorer または Finder を使用して Animate の外部にフォルダーを作成することも、ファイル名前を付けて保存コマンドの一環として新しいフォルダーを作成することもできます。作成したらすぐに、わかりやすい名前を付けて Animate プロジェクトを保存することをお勧めします。こうしておけば、中身を覚えていない「名称未設定」のプロジェクトがたくさんできてしまうことはありません。また、早めかつ頻繁に Ctrl+S キーまたは Command+S キーで作業中のファイルを保存すると確実です。Animate では、プロジェクトを最初に保存するときにいくつかのファイルと edge_includes フォルダーが作成されるため、各プロジェクトを独自のフォルダーに保存することをお勧めします。

  3. プロパティウィンドウで、白い背景色スウォッチをクリックします。パネルが表示され、カラーを選択できます(図 16 参照)。視覚的な方法できめ細かく選択したい場合は、左のスペクトラムバーで基本的な色相をクリックしてから、正方形の内側をクリックして選択を微調整します。RGB(赤、緑、青)形式または 16 進数値で色の仕様を指定してもかまいません。

    Fig16
  4. カラーピッカーが表示されたら、深宇宙を表す濃い青のカラーを選択します。不確かなら、このプロジェクトではR= 30 G= 45 B= 90 A=100 を試してください。Animate では、アドビの標準的な方法で数値を選択します。数字がハイライト表示されていたら、クリックして値を入力するか、クリック&ドラッグで数字を「スクラブ」するかできるということです。右にドラッグすると数字が増え、左にドラッグすると減ります。

  5. 引き続きステージプロパティパネルで、オーバーフロー非表示に変更します。オーバーフロープロパティは、Web ブラウザーでのアイテムの表示を制御します。Web ページでは、ステージは Web ページ全体の一部だけを表すことができます。ステージの四角形の外側にある要素の表示を制御できます。ステージの外側にある要素を表示しない場合は、このプロパティを「非表示」に変更します。

  6. ファイル読み込みを選択します。表示される読み込みウィンドウで、イメージ(地球など)を選択します。「開く」をクリックして、イメージをプロジェクトに読み込みます。

    Animate プロジェクトにファイルを読み込むと、要素ウィンドウにファイルの名前が一覧表示され、ファイルの内容がステージに表示されます。新しくインポートした要素が自動的に選択され、そのプロパティがプロパティウィンドウに表示されます。「Planet_earth」には、パネルの上部に表示プロパティがあります。すぐ下に、位置とサイズのプロパティがあります。その下に、要素の回転、ゆがみ、拡大/縮小を行うための変形のプロパティがあります。その下にソースファイルが表示されます。ここを見れば、操作しているファイルの名前をすぐに思い出すことができます。

  7. プロパティパネルの一番上にある「ID」ボックスをクリックし、planet_earth を World に変更します。

    Animate では、読み込んだグラフィックにはファイル名を使用して名前を付けます。それで問題ない場合もありますが、Animate 内での名前を要素に付けることができます。 名前を付けても、グラフィックのファイル名は変更されません。World という ID は、Animate で作業しているときに使用されます。ID は HTML コード内で重要な機能で持っています。これについては後で説明します。要素パネルに、グラフィックが World という新しい名前で表示されます。World はステージ上にあるので、タイムラインにも表示されます。

  8. タイムラインで、再生ヘッドが 0:00 であることを確認します。このプロジェクトの作成後にタイムラインを変更していない場合、再生ヘッドは 0:00 の位置にあり、アニメーションの最初の瞬間またはフレームをマーキングします。これを図 17 に示します。再生ヘッドを移動する必要がある場合は、再生ヘッドの下部の金色の部分をドラッグします。上部をピンと呼びます。ピンは再生ヘッドの動きを自動的に反映します。

    2 つの部分で構成される再生ヘッドについては、この後の手順の中で詳しく説明します。

  9. ステージの底辺のさらに下まで World をドラッグします。手順 5 で説明したように、ステージの外側にあるアイテムを Web ページに表示するかどうかを制御できます。「オーバーフロー」を「非表示」に設定すると、Animate ワークスペースでは、ステージの外側にある要素は通常よりも少し暗く表示されます。最終的なプロジェクトをブラウザーで表示したとき、これらの要素は非表示になります。

  10. タイムラインで、「自動キーフレームモード」ボタンが押されていることを確認します。「自動キーフレームモード」ボタン(図17)が押されていると、要素のプロパティを変更したときに、キーフレームがタイムラインに自動的に作成されます。キーフレームマーカーは、菱形で表示されます。

    Fig17
  11. タイムラインで、「自動トランジションモード」ボタンが押されていることを確認します。このボタンが押されていると、Animate は急激な変化ではなく滑らかなトランジションを作成します。ここでは、World グラフィックは、ある位置から別の位置に滑らかに移動します。

  12. タイムラインで、再生ヘッドを 0:01 までドラッグします。タイムラインでは、0:01 はアニメーションの 1 秒目をマークします。再生ヘッドから下方向に赤色の線が引かれ、すべての要素とプロパティレイヤーのマーカーが設定されます。

  13. World を選択した状態で、プロパティパネルの位置とサイズに移動し、「X」と「Y」の横にある菱形のボタンをクリックします。World グラフィックの左端上端の位置を示す 2 つの菱形のキーフレームがタイムラインに表示されます。「X」プロパティと「Y」プロパティは、ステージ上の要素の位置を設定します。プロパティパネルの位置の横にある菱形をクリックすることで、ステージ上の World の位置が手動で記録されました。その結果、World は、アニメーションの最初の 1 秒の間、同じ XY の位置に留まります。

  14. ピンの切り替え」ボタンをクリックした後、再生ヘッドの下部の金色の部分を 0:03 までドラッグします。要素をアニメーション化するために、特定の期間にわたるプロパティを変更します。再生ヘッドとピンを使用して、ある時点の 2 つのポイントをマークできます。これを図 18 に示します。

    Fig18
  15. World グラフィックをドラッグして、ステージ上に地球が表示されるようにします。ステージの中央にイメージを配置するか、見た目の良いレイアウトを選択できます。

  16. ピンの切り替え」ボタンをクリックした後、Home キーを押し、スペースキーを押します。Home キーを押すと、再生ヘッド が 0:00 に戻ります。スペースキーを押すとアニメーションが再生され、ステージ上で動きをプレビューできます。

  17. 再生ヘッドを 0:00 に戻した後、ツールバーの文字「T」をクリックします。テキストツールが選択され、カーソルが十字形に代わります。

  18. ステージ上をクリックし、Hello World と入力します。入力が完了したら、Esc キーを押すか、右上隅にある「X」ボタンをクリックしてテキストウィンドウを閉じます。「Hello World」という文字がステージに表示されますが、配置や書式が望みどおりでない可能性があります。

  19. プロパティウィンドウで、テキストボックスの ID として HelloWorld を設定します。名前を付けると、タイムライン要素パネルで簡単に識別できるようになります。Animate では名前にスペースを使用できないので、HelloWorld または Hello_World を使用する必要があります。

  20. プロパティパネルを使用して、テキストの書式を設定します。テキストカラーを白または非常に明るい青に変更します。「Arial Black」または別の太字のフォントを選択します。ほぼ画面いっぱいに表示されるようにサイズを調整します(Arial Black の場合は 72 ピクセルが適切です)。Animate は、テキストに対するそれぞれの変更をタイムラインにメモし、プロパティレイヤーを追加し、キーフレームを作成します。

  21. テキストを配置します。配置について確信が持てない場合は、水平方向で中央、垂直方向にステージの上から約 1/3 の位置にしておきます。

  22. 再生ヘッドを 0:00 に置いたまま、不透明度を 0 に設定します。不透明度スライダーはプロパティパネルの一番上にあります。これは、アニメーションの開始時にはテキストは表示されないことを意味します。選択ボックスだけが表示され、何かをクリックすると選択ボックスが消えます。心配しないでください。要素は、その表示状態に関係なく、要素パネルの名前をクリックすることで選択できます。

  23. ピンの切り替え」がオフになっていることを確認します。「ピンの切り替え」がオフの場合、ボタンの表示は押された状態ではなくなり、ピンは再生ヘッドと一緒に移動します。

  24. 再生ヘッドを 0:02 までドラッグします。テキストを選択した状態で、プロパティパネルの「不透明度」の横にある菱形をクリックします。再生ヘッドをドラッグすると、ステージ上で World が移動します。映画製作者とアニメーターは、再生ヘッドのドラッグをスクラブと呼びます。これはアニメーションの断片をすばやくプレビューするための簡単な方法です。「不透明度」の菱形をクリックすると、2 秒目にキーフレームが作成されます。この時点ではテキストはまだ表示されていません。

  25. ピンの切り替え」をオンに戻した後、再生ヘッドを 0:03 までドラッグします。ピンを 0:02 に、再生ヘッドを 0:03 に置いた状態で、別のトランジションを作成できます。

  26. HelloWorld テキストボックスを選択し、不透明度を 100 に設定します。アニメーションの 0:02 から 0:03 の間にテキストの不透明度が徐々に 0 から 100 に変化するトランジションが作成されます。

  27. ピンを 0:03 までドラッグし、再生ヘッドを 0:04 までドラッグします。不透明度の設定を 0 に戻します。テキストは再び表示されなくなります。

  28. Ctrl+S(Command-S)を押して作業を保存します。

    既に説明したように、Animate ではアニメーションを HTML と JavaScript ファイルのコレクションとして保存します。メインの HTML ファイルでは、プロジェクトを初めて保存するときに、手順 2 で指定した名前が使用されます。したがって、例えば Hello_World .html がプロジェクトフォルダー内に表示されます。planet_earth.png イメージを読み込んだときに、Animate によってイメージフォルダーが作成され、グラフィックのコピーがそのフォルダーに配置されます。以上で、単純なアニメーションは完成しました。Home キー、スペースキーの順で押すことで、Animate でアニメーションをプレビューできます。地球が画面に徐々に登場し、メッセージがフェードインしてからフェードアウトします(図 19)。全体のアニメーションは 4 秒で再生されます。

    Fig19

ステージの設定

吟遊詩人は数百年前にこう言っています。「すべての世界はステージだ」。それは、確かに Edge Animate では事実です。第 1 章で説明したように、要素をステージ上に配置すると、それは閲覧者に見えるようになります。ステージから要素を削除するか非表示にする方法はいくつかあります。ステージの「オーバーフロー」プロパティを「非表示」に設定しておくと、要素をステージの右、左、上、または下方向へ外側に移動することで、ステージから消すことができます。

少なくとも、ブラウザーで表示したときに要素は表示されなくなります。Edge Animate で操作するステージは、ブラウザーで表示するときの Web ページの一部を表します。ステージには限られた数のプロパティがあります。最も明確なプロパティはそのサイズと背景色ですが、ここではすべてのプロパティについて説明します。プロパティパネルの一番上の項目から説明を始めます。

  • ID」は、すぐに推察できると思いますが、アニメーションの名前です。プロジェクトを保存すると、Animate は Web ページを作成します。これは HTML ドキュメントとも呼ばれます。ほとんどのブラウザーは、Web ページの ID を、タブまたはウィンドウのタイトルバーに表示します。
  • ステージのサイズは、「W」(幅)プロパティと「H」(高さ)プロパティに最初はピクセル単位で表示されます。ここには大して驚くようなことはありません。ステージの幅と高さは、値を入力するかスクラブすることで変更できます。ステージは常に Web ページの左上隅に表示する必要はありません。例えば、Animate でバナー広告を作成する場合は、縦長のステージを作成し、それをページの左側に配置できます。ステージの縦横比を維持するか無視するかを調整するには、「W 」プロパティと「H」プロパティの横にあるリンクを使用します。「高さの値をリンク」がオンの場合は、片方のサイズを変更すると、ステージの縦横比が維持されるように他方のサイズも自動的に変更されます。リンクがオフの場合、「W」と「H」は別々に変更できます。サイズの単位をピクセル(「px」)からパーセント(「」)に変更できます。例えば、ステージの幅を 80%に設定すると、ステージのサイズは、それが表示される Web ブラウザーウィンドウの 80%になります。この機能は、コンピューター、タブレットおよび携帯電話用のページを開発する場合に非常に便利です。さらに、ブラウザーウィンドウのサイズが変更された場合に、ステージは、自動的に新しいサイズに調整されます。
  • 背景色は、カラーピッカーを使用して設定します。プロパティパネルで、カラースウォッチをクリックします。図 20 のようにカラーピッカーが表示されます。左側のバー(スペクトルとも呼ばれます)をクリックして色相を選択し、大きな正方形をクリックして色調を微調整します。選択した色の上に円が配置され、右下に色見本が表示されます。右上にある 3 つの色見本を使用して、白、黒または透明の背景をすばやく選択できます。チームで作業している場合は、カラースペックを RGB または16 進形式で指定されることがあります。逆に、自分が中心になって作業している場合は、他のデザイナーにカラーを指定できます。
Fig20
  • ステージの最小と最大の幅を設定するには、「最小幅」と「最大幅」を使用します。Web ページのサイズは固定ではありません。ページは、スマートフォンや大画面テレビで表示される可能性があります。それに加えて、閲覧者がブラウザーウィンドウのサイズを変更することがあります。最小と最大の幅を設定することで、プロジェクトがどのように表示されるかをいくらか制御できます。ピクセルを使用して絶対値を設定することも、パーセンテージを使用して応答性の高い設計にすることもできます。「最大幅」には最初は「なし」が設定されています。それをオンにするには、ラベルをクリックして「なし」を選択解除します。この時点でパネルに値が表示され、調整することができます。
  • オーバーフロー」メニューは、要素がステージの外側にあるときの表示方法を制御します。多くの場合、このメニューは非表示に設定して、ステージの四角形の外側にある要素が表示されないようにします。非表示オプションは、要素をステージに登場させ、退場させる場合に役立ちます。メニューを表示に設定すると、ステージの境界を超えて移動された要素は、Web ページに余裕がある限り、そのまま表示されます。スクロールオプションは、ステージの右側と下部にスクロールバーを配置することで、特定のサイズのステージの外側に移動された要素を確認できるようにします。自動オプションは、コンテンツがステージの境界を超えて存在する場合、自動的にスクロールバーを追加します。
  • Web ページがブラウザーに読み込まれたときにアニメーションを自動的に実行するには、「自動再生」チェックボックスを使用します。このチェックボックスをオフにした場合は、JavaScript トリガーを使用してアニメーションを実行する必要があります。
  • コンポジション ID」は、この特定のステージとそれに付随するタイムラインを識別するために使用されます。これは、1 つの Web ページに複数の Animate コンポジションがある場合に重要になります。これについては、JavaScript の章で詳しく説明します。
  • 下位レベル」プロパティと「ポスター」プロパティは、HTML5 に対応していない Web ブラウザー用の代替要素を作成します。
  • プリローダー」は、コンポジションを Web ページに表示するために必要なすべてのリソースの読み込みを行います。これらのリソースには、JavaScript ライブラリとグラフィックスが含まれます。

Animate でのアートの作成

次のセクションでは、四角形のプロパティについて詳しく説明します。ただし、これらのプロパティの多くは、Animate に読み込むテキストブロックやアートワークなどの他のオブジェクトでも使用されます。このため、四角形に対する回転、ゆがみ、拡大/縮小の方法がわかれば、テキストや写真も同じように回転、ゆがみ、拡大/縮小を実行できることを覚えておいてください。

四角形:基本的なボックスの作成

四角形ツール(「M」)を使用して、ステージにカラーブロックを追加できます。これらのブロックは、Web ページの一部を区別する場合に便利です。例えば、サイドバーを配置するとします。四角形を追加した後、その上にテキストやグラフィックを配置することで、ページの残りの部分と区別することができます。四角形を作成するための基本的な方法は、ツールパレットの四角形ツールをクリックした後、ステージ上でクリックしてドラッグして形を作ることです。正方形を作成するには、Shift キーを押しながらドラッグします。新しい要素がステージ上に表示され、自動的に選択されます。境界線上に、ハンドルを表す 8 個の白い正方形が表示されます(図 21)。四角形が描画された後、ハンドルをドラッグすることで、サイズと形状を変更できます。四角形には、次の基本的なプロパティがあります。

  • IDステージ上に四角形を描画すると、その ID が要素パネルにすぐに表示されます。四角形を選択すると、そのプロパティがプロパティパネルに表示されます。Animate のすべての要素には、LeftSidebar や Header といった意味のある ID を指定できます。ID を指定しないと、Rectangle1Rectangle2Rectangle3 のような似たような名前の中から目的の四角形を探すことになります。四角形の名前を変更するには、四角形を選択し、プロパティパネルの一番上にある「ID」を変更します。別の方法として、要素パネルの名前をダブルクリックできます。
  • タグ要素パネルの Rectangle を見て、名前の後ろに <div> が表示されていることを確認してください。四角形には、HTML の <div> タグが自動的に割り当てられます。Animate では、これらのタグを使用して、要素の識別、配置および変形を行います。Edge Animate の他の要素では、別のタグを選択できます。例えば、アニメーションに写真を追加したときは、<div> の代わりに <img> タグを使用できます。
  • 位置プロパティパネルの名前の下に、位置サイズのプロパティがあります。ステージの左上隅が X=0、Y=0 として参照されます。左から右に移動すると、X 値が大きくなります。上から下に移動すると、Y 値が大きくなります。四角形の位置は、最初は左上によって参照されます。「相対位置」ツールを使用して、参照ポイントを変更できます。それは、四隅に正方形があるボックスのように表示されます。ステージの右下隅から離れた特定の距離に要素を配置する必要があるとします。要素の右下隅を参照ポイントとして使用するとします。この場合は、単に「相対位置」ボックスの右下の正方形をクリックします。
  • サイズ位置のプロパティの次に、サイズのプロパティである「W」(幅)と「H」(高さ)があります。これらは、四角形のハンドルをドラッグすると自動的に変更されます。特定の数値を入力するか、スクラブできます。四角形のサイズのプロパティでは、最初の単位としてピクセルが使用されます。ただし、ピクセルからパーセンテージに変更できます。幅 20%の四角形は、ステージの幅の 20%になります。四角形の縦横比を維持するか無視するかを調整するには、「W 」プロパティと「H」プロパティの横にあるリンクを使用します。「伸縮の縦横比を保持」をオンにすると、片方のサイズを変更すると、四角形の縦横比が維持されるように他方のサイズが自動的に変更されます。リンクをオフにすると、「W」と「H」を別々に変更できます。
  • 表示要素の中には、常にステージに表示されるものと、ステージに表示されて消えるものがあります。「表示」メニューには、必要になるまで要素を簡単に非表示にできる方法が用意されています。「常時オン」、「オン」および「オフ」という 3 つの選択肢があります。
  • オーバーフロー四角形のオーバーフローコントロールは、ステージに対するコントロールと同じように動作しますが、明示的に四角形に適用される点が異なります。
  • 不透明度四角形全体の不透明度を制御するには、プロパティパネルの上端の近くにあるスライダーを使用します。境界線または背景の不透明度を個別に調整する場合は、それぞれのカラースウォッチ(次の「カラー」の項で説明します)をクリックし、「A」(アルファプロパティ)を変更します。
  • カラー 四角形には、境界線と背景という 2 つの基本部分があり、それぞれの色を設定できます。境界線の色は四角形の外縁を示し、背景色は四角形の内側のカラーになります(他のプログラムでは、これらのプロパティはストロークと塗りつぶしと呼ばれることがあります)。境界線と背景に別の色を割り当てることができます。「アルファチャンネル」をゼロに設定することで透明にすることもできます。ストロークには、他に 2 つのプロパティがあります。ピクセル単位(「px」)で太さを設定でき、実線、破線、点線またはなしの中から選択できます。ワークスペースの上部にあるツールバーを使用して、選択した要素の境界線の色と背景色をすばやく変更できます。それは、プロパティパネルのカラーピッカーと同じように機能します。

要素の位置揃え、分布および整列

「すべてのものにはふさわしい場所がある」という言葉は、アニメーションに関して言えばそのとおりです。ステージ上に複数の要素がある場合、それらの相互関係は非常に重要です。デザイナーは、多くの場合、特定のグリッドを意識しながら、印刷されるページや Web ページを作成します。テキストボックスやグラフィックは、この目に見えないグリッドに沿って整列するときれいです。様々な要素を整列させるときは、それらを等距離に配置すると、通常はもっとも見た目がよくなります。ステージをじっと見て、時間をかけて目分量ですべてを適切に配置することもできますが、幸いなことに、そのようにする必要はありません。

Animate の整列ツール、位置揃えツールおよび分布ツールを試すために、四角形ツールと角丸四角形ツールを使用して、図 22 に示すような単純なオブジェクトを 3 ~ 4 個作成します。ステージで要素をドラッグすると、端と中間点を結ぶマゼンタ色の直線が表示されます。これらはスマートガイドであり、移動中にこれらを使用して 1 つまたは複数のオブジェクトをすぐに整列させることができます。多くの場合、これで満足のいく結果を得ることができます。

Fig22

より幾何学的な整列が必要な場合は、修正整列メニューに切り替えます。整列を機能させるには、少なくとも 2 つの要素を選択する必要があります。これらの要素の 1 つはステージが可能です。ステージ上の要素を選択するか、要素パネルを使用できます。コマンドを使用するには、整列させるすべての要素を選択した後、いずれかのオプションを選択します。

  • 修正整列左揃え
  • 修正整列中央揃え(水平方向)
  • 修正整列右揃え
  • 修正整列上揃え
  • 修正整列中央揃え(垂直方向)
  • 修正整列下揃え ステージ上で 3 つ以上のエレメントを等間隔に配置するには、修正分布メニューのコマンドを使用します。分布コマンドを使用するときは、エレメントのどの部分を、横軸と縦軸のどちらに沿って配置するかを選択できます。具体的には、次のコマンドがあります。
  • 修正分布左端を基準に分布
  • 修正分布水平方向中央を基準に分布 修正分布右端を基準に分布
  • 修正分布上端を基準に分布
  • 修正分布垂直方向中央を基準に分布
  • 修正分布下端を基準に分布

ルーラーと手動のガイド

ステージ上にあるルーラーを使用すると、エレメントを正確に配置することができます。ルーラーを表示または非表示にするには、表示メニュー(表示ルーラー)か、ショートカットキー Ctrl+R(Command+R)を使用します。ルーラーはステージの端を超えて表示されますが、マーカーがあるのでステージの現在のサイズを確認できます。エレメントを整列するには、ガイドを作成すると便利です。水平ルーラーか垂直ルーラーをクリックし、ステージの方へドラッグしてマウスボタンを離すと、その場所にガイドが作成されます。目的の場所からずれてしまった場合は、さらにガイドをドラッグして正しい場所に設定します。ガイドが不要になった場合は、ルーラーまでドラッグして戻せば削除できます。ガイドを誤って選択したり移動したりできないようにするには、表示ガイドをロックを使用します。

これによりガイドがロックされ、表示ガイドのロックを解除を使用するまで、その場所に固定されます。手早く簡単に整列させるには、ガイドにスナップ表示ガイドにスナップ)をオンにします。

ステージ上に複数のガイドをドラッグして、様々な整列作業に使用できます。表示ガイド(Ctrl+; または Command+;)を使用すると、一度にすべてのガイドを表示または非表示にすることができます。

エレメントの配置:Z オーダー

水平位置や垂直位置のほかにも、ステージ上にオブジェクトを配置する方法があります。エレメントを作成すると、新しいエレメントは既存のエレメントよりも前面に配置されます。そのため、ステージ上で新しいエレメントを既存のエレメントと同じ X/Y 座標に配置すると、既存のエレメントが隠れてしまいます。Photoshop では、このような配置のことを「レイヤー」と呼びます。より専門的な用語では、Z レイヤーまたは Z オーダーといいます。なぜなら、この 3 次元は Z 軸として知られているからです。

ステージ上のエレメントZ オーダーを確認するには、エレメントパネルを使用します。リストの上の方にあるエレメントほど、ステージ上ではより前面に配置されています。順序を変更する場合は、パネル上でエレメントを目的の位置までドラッグします。または、エレメントを並べ替えるためのメニューやショートカットキーも利用できます。

  • 修正配置最前面へ(Ctrl+Shift+] または Shift+Command+])
  • 修正配置前面へ(Ctrl + ] または Command + ])
  • 修正配置背面へ(Ctrl + [ または Command + [)
  • 修正配置最背面へ(Ctrl + Shift + [ または Shift + Command + [)

四角形のアニメーション

それでは、これまでの説明をもとに、アニメーションを作ってみましょう。この演習では 4 つの四角形を作成し、名前を付けて色を適用して、傾斜を付けます。

次に、四角形をステージ上に配置して、それらがステージ上を動き、形を変えて、次第に薄れていくような効果を作ります。このような効果は、バナー広告の一部や、より複雑なアニメーションの導入部分に使用されることがあります。

この演習は 2 段階に分かれており、最初の手順ではカラーバーを作成して配置します。

  1. 新しい Animate プロジェクトを開き、Color_Bars という名前を付けて保存します。このプロジェクト用に新しいフォルダーを作成する必要があります。

  2. ステージの色を白に、サイズを幅 550 px、高さ 400 px に設定します。Animate には最後に使用したステージ設定が記憶されています。そのため、この演習を行う前に独自の設定で使用していた場合は、必要に応じて設定を変更してください。

  3. タイムライン(図23)で、「自動キーフレームモード」ボタンと「自動トランジションモード」ボタンが押されていることを確認します。ボタンの上にカーソルを移動すると、ツールヒントにボタン名が表示されます。例えば、タイムラインの上部には、自動キーフレームモード自動トランザクションモードピンの切り替えイージングがあります。

    Fig23
  4. 四角形を 1 つ描画し、プロパティID に「Red」と入力します。ID ボックスは、四角形を選択するとプロパティパネルの上に表示されます。

  5. プロパティで、背景色をクリックして赤に設定し、なしに設定します。設定が終わると、16 進数のカラー値は #ff0000 になっているはずです。

  6. 四角形のサイズを幅 550 px、高さ 100 px に設定します。プロパティパネルに直接サイズを入力するのが最も簡単な方法ですが、四角形のハンドルをマウスでドラッグして設定することも可能です。幅と高さをそれぞれ個別に変更するには、WH の横にある「リンク」ボタンをクリックする必要があります。

  7. 傾斜(x)を 50 度に設定します。水平方向の傾斜は、上端の設定です。正の値に設定すると、上端が左側に、下端が右側にスライドします。

  8. 傾斜を付けた赤色の四角形をステージの左上隅に動かして、先端のみが表示されるように配置します。位置のプロパティは X = -550 px、Y = 0px です。ステージの左上に赤色の三角形のみが表示されていれば、正しい位置に配置されています。

  9. 赤の四角形を選択した状態で、Ctrl + D(Command + D)を押します。RedCopy の ID を Green に変更し、これと一致するように色も変更します。緑色の 16 進値は #00ff00 です。選択したエレメントの背景色を変更するには、プロパティカラーサブパネルか、ステージの上のツールバーにあるカラースウォッチを使用します。

  10. 緑色の四角形の上端を赤色の四角形の下端の位置に合わせます(Y = 100 px)。次に、Shift キーを押しながら緑色の四角形を右側にスライドさせて、頂点のみが表示されるように配置します(X = 430 px)。

    Shift キーを押しながら動かすことで、横軸または縦軸に沿ってエレメントをドラッグすることができます。軸から離れた場所にドラッグすることもできますが、軸への吸着力は保たれます。

  11. さらに 2 つの四角形を作成して傾斜を付け、それぞれ「Blue」と「Yellow」という名前を付けて、青色と黄色を適用します。作成した四角形をステージの両側に配置します。青色は #0000ff、黄色は #ffff00 です。配置が完了すると、ステージは図 23 のようになります。

プロパティキーフレームの追加によるアニメーション化

カラーバーを作成して配置したので、次のステップに移ります。第 1 章では、タイムラインのプロパティキーフレームによってステージ上のエレメントの位置を制御する方法を紹介しました。図 23 に示すように、「自動キーフレームモード」ボタンが押されている場合、プロパティを設定または変更するたびに新しいプロパティキーフレームが作成されます。プロパティキーフレームは手動で作成することもでき、その場合はプロパティパネルの菱形のボタンをクリックします。アニメーションの最初の位置サイズ不透明度の各プロパティを固定するには、プロパティキーフレームを作成します。その後、タイムフレームを先に進み、別のプロパティキーフレームを作成していけば、アニメーションができます。

  1. タイムラインの再生ヘッドの位置が 0:00 にあることを確認します。Red という名前の平行四辺形を選択し、プロパティパネルで、XYWH不透明度の横にある菱形のボタンをクリックします。

    X プロパティと Y プロパティは位置サイズサブパネルにあり、位置を制御します。W ボタンと H ボタンは、幅と高さのキーフレームを作成します。不透明度スライダーは、プロパティパネルの上部付近にあります。図 24 に示すように、菱形のボタンをクリックすると、プロパティキーフレームと個々のプロパティレイヤーがタイムラインに追加されます。プロパティキーフレームは、特定の時点の特定のプロパティ値を固定します。タイムラインには、次のプロパティキーフレームとプロパティレイヤーが表示されます。

    • 高さ
    • 不透明度

    Red の下にこれらすべてのキーフレームとプロパティタイムラインが表示されていない場合は、表示されないプロパティの横にある菱形のボタンをクリックして、手動で作成する必要があります。

    Fig24
  2. 緑、青、黄の各カラーバーについて手順 1 を繰り返して、それぞれのプロパティキーフレームとプロパティレイヤーを作成します。作業をスピードアップするには、3 つのバーすべてを最初に選択してから、キーフレームボタンをクリックします。

  3. 自動キーフレームモード自動トランジションモードがオン(押された状態)になっていること、その他のボタンがオンになっていないことを確認します。自動キーフレームをオンにすると、ステージ上のエレメントを変更したときに、Animate によりプロパティキーフレームが自動的に作成されます。これは 2 ステップの手順です。再生ヘッドを任意の時点に移動し、エレメントのプロパティを変更します。変更はプロパティパネルで行うか、ステージで選択ツールと変形ツールを使って行います。

  4. タイムラインで再生ヘッドを 0:02 の位置にドラッグします。この手順では、ピンがオフ(押されていない状態)になっています。

  5. 傾斜を付けた四角形の末尾が表示されるまで、各四角形をステージにドラッグします。

    この時点で、ステージのほとんどはカラーバーで覆われ、端に白い三角形が表示されます。バーの垂直方向の位置を固定する場合は、Shift キーを押したままドラッグします。

  6. すべての四角形を選択した状態で、「プロパティ」で不透明度のキーフレームを追加ボタンをクリックします。再生ヘッドを前後にドラッグしてアニメーションをプレビューします。各カラーバーの不透明度は、2 秒時点の 100 パーセントに設定されています。再生ヘッドをスクラブするとアクションをすばやく確認できます。

  7. 再生ヘッドを 0:03 マーカーにドラッグします。この位置は、アニメーションの 3 秒の時点になります。

  8. 各四角形を選択し、高さ(H プロパティ)を 300 px、不透明度を 50 パーセントに変更します。これは、四角形を拡大し、互いに垂直にスライスさせると同時にぼかしを開始する効果に影響します。図 25 を参照してください。これらを個々に変更する場合は、W および H プロパティのリンク解除が必要になる場合があります。

  9. 再生ヘッドを 0:04 マーカーにドラッグします。次に、各四角形の高さを 500 px に、不透明度を 0 パーセントに変更します。これにより、四角形が大きくなり続けて、次第にぼやけて視界から消えます。

    Fig25

角丸長方形:隠された事実

四角形角丸長方形、および楕円形ツールでは Animate に一杯食わされました。ここだけの話ですが、これらのすべてのシェイプは四角形ツールを使いプロパティを調整して作成できます。このトリックの秘密は、JavaScript コードがこれらのシェイプを定義するという事実と関係があります。これは、各ツールを使ってシェイプを作成し、そのプロパティを調べることで確認できます。四角形を角丸長方形に変えるには、図 26 に示すように、単に半径プロパティを調整します。同様に、同じツールを使用して、角丸長方形を四角形にすることができます。では、そのしくみを見てみましょう。

Fig26

新しい Animate プロジェクトで四角形を作成し、選択したままにします。変形ツール(Q)を選択し、マウスを使って角丸長方形プロパティのキーフレームの菱形をマウスでポイントします。ツールヒントにより、これが「境界線の半径のキーフレームを追加」することが示されます。パネル上部に 1、4、および 8 という 3 つのボタンがあります。その下にボタンで構成された正方形があります。ここで、四角形の 4 つの角を個々に選択できます。この角ボタンの横に数値が表示されています。デフォルトでは 0 に設定されています。角丸の半径 0 は、完全にシャープな角の四角形を意味します。数値をクリックし、右にドラッグして角に丸みをつけます。数値ボックスに指定できるのは正の数値のみのため、左にはドラッグできません。ドラッグすると、四角形の角の黒い菱形が中央に移動することに注意してください。これらのひし形は、角丸の半径のコントロールポイントです。任意の四角形の菱形を手動でドラッグして、角丸を手動で作成、調整できます。

正方形になるように四角形をリセットし、プロパティパネルで右上の角をクリックします。半径の設定を変更すると、右上の角は四角のまま、それ以外の角は角丸になります。角のボタンを押すと、角の角丸設定が解除されます。

四角形を再度リセットし、右上の角をクリックして再度ポップアウトさせます。次に、角プロパティの上部にある 4 のボタンをクリックします。4 つの新しい数値ボックスが各角の横に表示されます。ここで、各角にそれぞれ異なる半径の値を設定できます。これにより、厳密に四角形ではあるものの、不規則な角を持ったシェイプを作成できます。これをゆがみや拡大/縮小のプロパティと組み合わせて、非常に面白いアメーバ効果を作成できます。ボタン 8 をクリックすると、各角のコントロール数値が 2 つになります。これにより、もう一方より平らな角を作って、コントロールポイントを中心からずらすことができます。設定を調整すると、黒い菱形のコントロールポイントも移動します。数値ボックスか、四角形のコントロールポイントを使用して角をいつでも調整できます。

円は非常に丸みを帯びた四角形

四角形を楕円形や円形に変えて、半径プロパティを試してみることができます。例として、正方形を円形に変える手順を説明します。

 

  1. 長方形ツールをクリックし、Shift キーを押したままボックスをドラッグします。Shift キーを押したまま、すべての辺が同じになるまで四角形を調整します。

  2. プロパティで、ボタン 1 をクリックします。この設定では、角丸の半径の値がすべての角で同じになります。

  3. 図 27 に示されているように、正方形が円になるまで境界線の半径の数値ボックスをクリックしてドラッグします。

    Fig27

    角丸の半径が次々と中心に移動するように数値をドラッグできますが、これは円の作成には必要ありません。円プロパティの変更、調整は、Animate で他のオブジェクトを作成した場合と同じように行えます。オブジェクトに傾斜を付けて、楕円形を作成できます。それを拡大/縮小して、楕円形を作成できます。もちろん、適切な設定により正方形と楕円の間のあらゆるシェイプを作成できます。

グラフィックにドロップシャドウを追加する

ドロップシャドウを使用すると見栄えが良くなるだけでなく、複数のエレメントを視覚的に分けることができます。グラフィックにドロップシャドウを適用して、ステージの上に浮かんでいるかのように見せることができます。また、エレメントの内部にシャドウを追加すると、3 次元のように見せる効果があります。シャドウは、ボタンをマウスオーバー、クリック、または選択したときの状態を表すためにもよく使用されます。Animate には、ドロップシャドウを作成して自由に修正するための簡単な方法が用意されています。

背景からエレメントを切り離すための薄いシャドウを作成するには、以下の操作を行ってください。

  1. ステージ上に 3 つのエレメントを描画します。

  2. エレメントを 1 つ選択し、プロパティパネルを下にスクロールしてドロップシャドウコントロール(図 28)を表示します。

    Fig28
  3. カラースウォッチをクリックし、黒を選択します。

  4. 水平方向のオフセット」をクリックし、「4」と入力します。

  5. 垂直方向のオフセット」をクリックし、「4」と入力します。

  6. ぼかしの半径」をクリックし、「14」と入力します。

  7. 広がり」をクリックし、「2」と入力します。

    エレメントの 1 つを 3 次元のように見せるには、上記と同じ設定を使用しますが、「挿入」ボタンをクリックします。シャドウはエレメントの外側ではなく、内側に表示されるように作成します。広がりのプロパティは、その名前のとおり、シャドウを全方向に広げてそのサイズを制御します。他のプロパティと同様に、ドロップシャドウを時間の経過と共に変化させることができます。例えば、影を動かしてその形を変化させれば、太陽が上空を動いている様子を作り出すことができます。また、シャドウはテキスト向けの重要なツールでもあります。込み入った背景であっても、シャドウによって背景からテキストが分離されるので、読みやすくすなります。

アートのインポート

Animate で基本的なシェイプやテキストを作成するのはとても簡単です。しかし複雑なアートワークとなると、使い慣れたアート制作ツールに頼る人も多いでしょう。複雑な図面やラインアートであれば Adobe Illustrator、写真の加工であれば Photoshop や Lightroom、iPhoto などです。Adobe Fireworks は Animate ととても相性の良いツールです。どちらも Web コンテンツの制作に適しているからです。JPEG、GIF、PNG、SVG ファイルを Animate にインポートして、ステージ上の位置と外観を変更することで、アニメーションを作成できます。どのような方法で作成したファイルでも問題ありません。

アートワークのインポート方法は、どのファイル形式でも同じです。ファイル/インポートを選択し、プロジェクトにインポートするファイルを指定します。Missing CD フォルダー 02-2_Sliding_Show には、JPEG 形式の写真が 3 つ格納されています。02-2_Sliding_Show というフォルダー名で新しいプロジェクトを作成し、これらの写真をインポートしてみましょう。ファイルインポートを選択すると、使用している PC または Mac の標準のファイル / フォルダーウィンドウが開きます。3 つのファイルを一度にインポートするには、Shift キーを押しながらクリックして全ファイルを選択します。ファイルがインポートされ、元のファイル名に基づいて名前が付けられます。この例では、エレメントパネルで squirrel、farmhouse、bike という 3 つのファイルを確認できます。また、各画像はステージ上の 0,0 位置に自動的に配置されます。3 つの画像が重なっているので、ステージ上で見える画像は 1 つのみです。

GIF、JPG、PNG、SVG の選択

2 次元コンピューターグラフィックスの世界では、画像を保存および表示するためのシステムとして、ビットマップ(ラスターグラフィックス)とベクターグラフィックスの 2 種類があります。

コンピュータープログラムは、ビットマップをピクセルの束として保存します。これは、色と位置によって識別されます。ビットマップグラフィックスという用語は、Windows ビットマップ(.bmp)拡張子のファイルのことだけを指すのではありません。ビットマップ形式で保存されるすべての画像(.gif、.jpg、.tiff、.png)を含みます。

ビットマップグラフィックスのメリットは、複雑な色、グラデーション、微妙な陰影により、細部までリアルに表現できる点です。デメリットとしては、圧縮されていないビットマップは一般的に多くのディスク領域を消費し、拡張性もあまりありません。例えば、ビットマップ形式の車の画像のサイズを 500%増やしてみたとします。

この場合、より大きな画像を作成するために新しいピクセルが必要になるので、画像の既存のピクセル(色の付いたドット)が複製されます。できあがった画像は、全体がぼやけて見えたり、曲線のエッジに濃淡のむらができ、モザイク状に見えたりする可能性があります。

ベクターグラフィックスは、一連の公式としてコンピューターに保存されます。ラスターグラフィックスと比較すると、ベクターグラフィックスは比較的サイズが小さく、拡張性があります。そのため、小さいサイズの車を描画して 500% 拡大しても画質は良好で、細部まで鮮明に表現されます。

画像を扱うときは、各形式のメリットとデメリットを考慮するようにしてください。ビットマップは多くの色と色合いを使用するので、写実的な画像に適しています。ベクターグラフィックスは、ラインアートやグラフ、図のほか、様々なサイズで使用する画像に適しています。Animate では 4 種類(JPG、GIF、PNG、SVG)のグラフィックスファイルをインポートできますが、いくつか注意点があります。

JPG ファイル(JPEG ファイル)は、Web や多くのカメラでよく使用される一般的なビットマップ形式です。Joint Photographic Experts Group によって開発されたので、その頭文字をとって JPG または JPEG と呼ばれます。JPEG では、非可逆圧縮と呼ばれる技術によってファイルサイズを縮小しています。通常、JPEG を扱うイメージエディターでは、圧縮率を選択することができます。画面上に表示するだけが目的の場合は、圧縮率を上げても問題ありません。ポスターサイズに拡大して印刷する場合は、すべてのピクセルが必要になります。

GIF ファイルは、初期のオンラインサービスの 1 つである CompuServe によって開発されました。Graphic Interchange Format の頭文字をとって、GIF と呼ばれます。GIF は JPEG や PNG に比べると人気が下がってきているように思われますが、まだ多くの Web サイトで使用されています。GIF は可逆圧縮方式で保存されるビットマップですが、使用するカラーパレットは限られています。そのため、会社ロゴや横向き棒グラフなど、単色の大きな帯状の画像では、ファイルサイズをとても小さくできる可能性があります。一方、GIF では写真画像でも圧縮せず、色の数に制限があるので、例えば JPEG のようなきれいな画質にはなりません。GIF ならではの機能としては、フレーム単位のシンプルなアニメーションに変換することで、GIF アニメーションを作成できます。Adobe Fireworks などのプログラムと、

Flash を使用して簡単に作成できます。GIF ではまた、画像の一部を透明にすることもできます。これは、既にできあがっている背景に重ねて不規則な図形を配置する場合にとても便利な機能です(例えば、部屋のインテリアにアニメーションキャラクターを重ねる場合など)。

PNG ファイルは、GIF に関する特許上の問題があったときに開発されたファイル形式です。PNG(「ピング」と呼びます)は、Portable Network Graphics の頭文字をとったものです。PNG 形式は(印刷向けではなく)Web で使用することと、既に普及していた GIF の機能を強化することを目的として設計されています。PNG では可逆圧縮方式を使用し、より多くのカラーパレットが使用可能です。アニメーションシーケンスを表示することも、画像内に透明な部分を作ることもできます。最近の Web ブラウザーであれば PNG に対応していますが、このフォーマットを処理できない古いブラウザーがまだ使用されている可能性もあります。Animate でも PNG 形式を問題なく使用できます。どちらも Web での使用を想定して開発されているからです。SVG ファイルはベクターベースの形式で、Scalable Vector Graphics の頭文字をとったものです。SVG ファイルは画像のピクセル単位のマップを記録する代わりに、直線、曲線、シェイプ、およびその他の画像の詳細を描写する公式を含んでいます。最近の Web ブラウザーであれば SVG 形式に対応していますが、古いブラウザーの対応状況は様々です。

Animate で SVG 形式の画像のサイズを変更すると、拡大された画像がモザイク状(ギザギザの階段状)に見えるようになる可能性があります。この画像をブラウザーで表示すると、ピクセレーションが生じます。画像を Animate 内で変更しなければ、ブラウザーウィンドウに合わせて自動的に画像のサイズが調整されます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー