ウェブ アニメータへようこそ

ここでは、ウェブ アニメータの紹介など、操作前に知っておきたいことについて説明します。

ウェブ アニメータとは

サンプルのアニメーションを表示する


ウェブ アニメータとは

ウェブ アニメータは、ホームページ・ビルダーに付属しているアニメーション GIF 作成プログラムです。アニメーション GIF とは、GIF 形式の画像ファイルの一種で、いくつかの画像を組み合わせてパラパラ漫画のように動かすものです。アニメーション GIF は普通の GIF 画像と同じようにページに貼り付けることができます。

ウェブ アニメータを使うと、次のことができます (画像は実際には、左から右へ順番に書き換えられていきます)。

手持ちの画像を組み合わせてパラパラ漫画のようなアニメーションを作成する

1 つの画像にアニメーション効果を加えてインパクトのあるアニメーションを作成する

指定した文字列にアニメーション効果を加えて文字アニメーションを作成する

作成したアニメーション GIF は、Web ブラウザでプラグインなどを使わずに見ることができます。アニメーション GIF は、Web ページで動画を見せるための、一番手軽で確実な方法です。

関連情報

複数の画像を使用してアニメーションを作る (アニメーション ウィザード)

1 つの画像を使用してアニメーションを作る (アニメーション ウィザード)

文字アニメーションを作る (アニメーション ウィザード)

アニメーションのファイル サイズを小さくする (簡単最適化)

アニメーションのファイル サイズを小さくする (オプション設定)


サンプルのアニメーションを表示する

ウェブ アニメータで作成できる「アニメーション」とは一体どんなものかを知るために、試しに素材集のアニメーション GIF ファイルを開いてみましょう。

  1. メニューバーから「ファイル」→「素材集から開く」を選択します。

    「素材集から開く」ダイアログが表示されます。

  2. 適当なファイルを 1 つ選択し、[開く] ボタンをクリックします。

    選択したアニメーション GIF ファイルがアニメーション ウィンドウに表示されます。

    ウィンドウの上半分を画像表示ウィンドウ、下半分をフレーム表示ウィンドウと呼びます。フレーム表示ウィンドウには、アニメーションを構成するコマ (これをフレームと呼びます) が表示されています。

  3. それではアニメーションを実際に動かしてみましょう。「再生」ツールバーの 再生を開始 ボタンをクリックしてください。

    画像表示ウィンドウに、アニメーションが動いている様子が表示されます。アニメーションをホームページに貼り付けておくと、Web ブラウザでは、そのページを開くとすぐにアニメーションが動き出します。

  4. アニメーションの再生を停止するには、 再生を停止 ボタンをクリックします。


操作編

操作編では、アニメーションの作成方法や編集方法など、ウェブ アニメータの操作方法を説明します。

ウェブ アニメータの基礎知識

アニメーションを作る

アニメーションを編集する

フレームを操作する

アニメーションを保存する

アニメーションを他のアプリケーションに貼り付ける

ウェブ アニメータをさらに使いこなす

ファイルのサイズを小さくする

パレットを使いこなす


ウェブ アニメータの基礎知識

ここでは次の項目について説明します。

  • フレームとは？
  • フレームの状態


フレームとは？

ウェブ アニメータで作成されるアニメーションは、「フレーム」という要素の集まりです。フレームは、フレーム表示ウィンドウに表示されます。フレームをダブルクリックするとダイアログが表示され、そこでフレームのプロパティを設定できます。

フレームには、「属性フレーム」、「イメージ フレーム」、「コメント フレーム」の 3 種類があります。

属性フレーム

アニメーションの先頭に必ず 1 つだけ表示されています。このフレームは、この場所から移動したり、削除したりすることはできません。ここには、カラーパレットの指定やアニメーションの繰り返しの回数など、アニメーションの全体に関する情報が含まれています。これらの情報を表示、変更するには、属性フレームをダブルクリックします。Web ブラウザで再生したときには、このフレームは画面に表示されません。

イメージ フレーム

アニメーションを構成する 1 つ 1 つの画像 (コマ) です。画像ファイルを挿入したとき、また、アニメーション効果を追加したときなどに、イメージ フレームが生成されます。イメージ フレームの属性を変更するには、イメージ フレームをダブルクリックします。

コメント フレーム

アニメーションに、作成日や作者の情報を記録しておくのに使われます。コメント フレームを挿入するには、メニューバーから「編集」→「コメントの挿入」を選択してください。なお、Web ブラウザ上で再生したときには、このフレームは画面に表示されません。

関連情報

「フレームのプロパティ (属性フレーム)」ダイアログ

「フレームのプロパティ (イメージ フレーム)」ダイアログ

「フレームのプロパティ (コメント フレーム)」ダイアログ

アニメーション ウィンドウ

画像表示ウィンドウ

フレーム表示ウィンドウ


フレームの状態

フレームの状態には、次の 3 種類があります。フレームの状態は、マウスやキーボードの操作で切り替えることができます。

選択

サムネイル表示 | リスト表示
(サムネイル表示) | (リスト表示)
  • フレームの名前やサムネイルの周りが、ブルー (設定によって、違う色の場合もあります) に反転した状態です。フレームをマウスでクリックすると、この状態になります。
  • 選択されたフレームは、削除や移動の対象になります。
  • [Ctrl] キーを押しながらフレームをクリックすると、クリックするたびに選択状態と非選択状態が切り替わります。他のフレームの選択状態は変わりません。
  • [Shift] キーを押しながらフレームをクリックすると、前回クリックしたフレームからクリックしたフレームの間のフレームが、すべて選択されます。

アクティブ

サムネイル表示 | リスト表示
(サムネイル表示) | (リスト表示)
  • フレームの名前やサムネイルの周りが、点線で囲まれた状態です。現在選択状態のフレーム、または最後にマウスでクリックされたフレームがこの状態になります。
  • 画像表示ウィンドウに表示されるのは、アクティブなフレームです (そのフレームが画像だった場合)。
  • 「フレームのプロパティ」ダイアログで設定できるのは、アクティブなフレームのプロパティです。
  • 通常、アクティブ状態のフレームは、同時に選択状態になっています。

非選択 (通常の状態)

サムネイル表示 | リスト表示
(サムネイル表示) | (リスト表示)
  • 選択されていない状態です。


アニメーションを作る

ここではアニメーションを作る方法について説明します。

  • 一般的なアニメーションの作成手順
  • 複数の画像を使用してアニメーションを作る (アニメーション ウィザード)
  • 1 つの画像を使用してアニメーションを作る (アニメーション ウィザード)
  • 文字アニメーションを作る (アニメーション ウィザード)
  • ホームページ・ビルダーでページに挿入した画像を、文字アニメーションにする


一般的なアニメーションの作成手順

アニメーション ウィザードを使わずにアニメーションを新規に作成するための、一般的な流れを解説します。アニメーション ウィザードを使ってアニメーション作成をする方法に関しては、次の項目を参照してください。

  • 複数の画像を使用してアニメーションを作る (アニメーション ウィザード)
  • 1 つの画像を使用してアニメーションを作る (アニメーション ウィザード)
  • 文字アニメーションを作る (アニメーション ウィザード)

  1. 環境設定

    アニメーションを新規に作成する前に、環境設定の設定内容をチェックしておきます。メニューバーから「ファイル」→「環境設定」で「環境設定」ダイアログを表示させ、[画像] タブをクリックして、以下を設定します。

    • [パレット] を [ローカル パレット] に設定

      不要なパレットの変換を減らし、画質をできるだけ維持するために有効です。

    • [パレット変更時の設定] で [変換方法] を適切に設定します。

      [ディザあり]、[ディザなし] のどちらが適しているかは、アニメーションに使用する画像の方向性によって決まります。詳細は「パレットを変換する」を参照してください。

    関連情報

    グローバル パレットとローカル パレット

  2. 背景色の設定

    メニューバーから「ファイル」→「新規作成」で新規のアニメーション作成を開始したら、まずアニメーションの背景色を設定します。背景色は、画像の挿入時の減色やアニメーション効果、文字アニメーションの作成で重要な役割を持ちます。通常は、アニメーションを貼り付けるページの背景色をアニメーションの背景色にします。次の手順で背景色を設定します。

    1. 属性フレームをダブルクリックして、「フレームのプロパティ (属性フレーム)」ダイアログを表示させます。
    2. グローバル パレットを設定します。 [グローバル パレット] にチェック マークが付いていない場合はチェック マークを付けます。[編集] ボタンをクリックし、グローバル パレットに背景色にしたい色があるか確認します。ない場合は、グローバル パレットを編集します。
    3. [背景色] ボタンをクリックし、背景色を設定します。ホームページ・ビルダーでページを編集しているときは、メニューバーから「編集」→「ページ背景情報の取得」で背景色を取得することもできます。

    関連情報

    ページ背景情報を取得して文字のギザギザをなくす

  3. 画像の挿入

    アニメーションのコマになる画像を、メニューバーから「編集」→「画像の挿入」やドラッグ アンド ドロップを使ってアニメーションに挿入します。挿入された画像の数だけ、イメージ フレームが生成されます。イメージ フレームをドラッグ アンド ドロップして、適当な順番に入れ替えます。

    関連情報

    画像を挿入する

    フレームを操作する

  4. イメージ フレームのプロパティ設定

    イメージ フレームを一つ一つクリックし、画像表示ウィンドウを見ながらフレームのプロパティを設定します。フレームをダブルクリックすると表示される、「フレームのプロパティ (イメージ フレーム)」ダイアログを主に使用します。

    • 画像が表示される場所、大きさが思っていたところと違う

      画像表示ウィンドウ上で画像をクリックすると、ハンドルマークが表示されます。ハンドルマークをドラッグして、画像の場所、大きさを調整します。ダイアログで設定する場合は、[X座標]、[Y座標]、[幅]、[高さ] を調整します。

    • 前のフレームと画像を重ねたい (重ねたくない)

      [消去方法] を設定します。たとえば、あるフレーム (B) の画像を、前のフレーム (A) の画像と重ねたいときには、フレーム (A) のプロパティで、[消去方法] を [画像をそのまま残す] に設定します。

    • 画像の一部分を透明にしたい

      [透明化する] にチェック マークを付けた後、スポイト ボタンをクリックして、画像の透明にしたい部分をクリックします。

    複数のフレームのプロパティを一括して設定するには、「プロパティの一括変換」ダイアログを使います。

    関連情報

    イメージ フレームのプロパティを変更する

    複数のイメージ フレームのプロパティを一度に変更する

    画像の位置や大きさを調整する

  5. アニメーション効果、文字アニメーションの追加

    必要に応じて、フレームにアニメーション効果や文字アニメーションを追加します。効果を加えたいフレームをクリックし、メニューバーから「効果」から「アニメーション効果」「文字アニメーション」を選択して、効果を加えます。

    関連情報

    文字アニメーションを追加する

    アニメーション効果を追加する

    「アニメーション効果の作成」ダイアログ

    「文字アニメーションの作成」ダイアログ

  6. フレームの表示時間の設定

    再生ツールバーを使ってアニメーションをプレビューし、全体の流れを見ながら各フレームの表示時間を設定します。設定には、「フレームのプロパティ (イメージ フレーム)」ダイアログを使用します。

    関連情報

    画像の表示時間を設定する

  7. アニメーションの最適化 (ファイル サイズの圧縮)

    インターネットで公開するファイルは、できるだけファイル サイズが小さいほうが好都合です。一通りアニメーションが完成したら、アニメーションを最適化しましょう。メニューバーから「ファイル」→「簡単最適化」を選択すると、ファイル サイズを圧縮した、新しいアニメーションが作成されます。メニューバーから「ファイル」→「アニメーションの最適化」を使うと、より細かく最適化の設定を行うことができます。

    関連情報

    アニメーションのファイル サイズを小さくする (簡単最適化)

    アニメーションのファイル サイズを小さくする (オプション設定)

  8. アニメーションを保存

    最後に、アニメーションをファイルに保存します。メニューバーからの「ファイル」→「上書き保存」を選択し、保存場所とファイル名を指定して保存します。アニメーションの再編集のためには、最適化する前のファイルの方が便利です。捨てずにこちらも別のファイルに保存しておきましょう。ホームページ・ビルダーで編集中のページに直接アニメーションを貼り付けたいときには、メニューバーから「ファイル」→「送る」→「ホームページ・ビルダーへ」を選択してください。

    関連情報

    アニメーションをファイルに保存する

    アニメーションをパーソナル フォルダに保存する

    アニメーションをホームページ・ビルダーへ送る


複数の画像を使用してアニメーションを作る (アニメーション ウィザード)

2 つ以上の画像をもとにアニメーション GIF ファイルを作成します。あらかじめアニメーションに使う画像 (フレーム) をすべて用意している場合は、この方法でアニメーションを作成してください。

  1. メニューバーから「ファイル」→「アニメーション ウィザード」を選択します (または「スタートアップ」ダイアログの [アニメーション ウィザード] ボタンをクリックします)。

    「アニメーション ウィザード (アニメーションの選択)」ダイアログが表示されます。

  2. [複数の画像ファイルを使用してアニメーションを作成] を選択し、[次へ] ボタンをクリックします。
  3. 「アニメーション ウィザード (ファイルの指定)」ダイアログで [画像の追加] ボタンをクリックし、「ファイルを開く」ダイアログで画像ファイルを選択して、[開く] ボタンをクリックします。

    画像がリストに追加されます。画像の追加は何度でも行うことができます。

    ヒント

    • [Shift] キーまたは [Ctrl] キーを押しながらファイルをクリックすると、1 度に複数のファイルを選択することができます。
  4. アニメーションは、リスト上の最初の画像から順に再生されます。リスト上でファイル名をドラッグするか、 [最初]、[上]、[下]、[最後] ボタンをクリックすると順番を変更できます。
  5. [次へ] ボタンをクリックします。
  6. 「アニメーション ウィザード (フレーム位置の指定)」ダイアログで、必要に応じて位置を指定し、[次へ] ボタンをクリックします。
  7. 「アニメーション ウィザード (繰り返し/表示時間の指定)」ダイアログで、必要に応じてアニメーションの繰り返しの回数、各フレームの表示時間を指定します。
  8. [次へ] ボタンをクリックします。
  9. 「アニメーション ウィザード (アニメーションのプレビュー)」ダイアログで アニメーションのプレビューを開始 ボタンをクリックすると、アニメーションのプレビューが表示されます。 アニメーションの回数が無限の場合は、 アニメーションのプレビューを停止 ボタンをクリックするとプレビューが停止します。
  10. [完了] ボタンをクリックします。

    ウィザードは終了し、「newimage○○」というタイトルのアニメーション ウィンドウに、アニメーションに使われるすべての画像のフレームが表示されます。

    ヒント

    • 1 つのアニメーション ウィンドウは 1 つのアニメーション GIF ファイルに対応しています。
  11. メニューバーから「ファイル」→「名前を付けて保存」を選択します。

    「名前を付けて保存」ダイアログが表示されます。

  12. アニメーション GIF ファイルの保存場所とファイル名を指定して、[保存] ボタンをクリックします。

    作成したアニメーションが 1 つのアニメーション GIF ファイルとして保存されます。

関連情報

1 つの画像を使用してアニメーションを作る (アニメーション ウィザード)

文字アニメーションを作る (アニメーション ウィザード)

アニメーションのファイル サイズを小さくする (簡単最適化)

アニメーションのファイル サイズを小さくする (オプション設定)

フレームとは？

アニメーション ウィンドウ

「スタートアップ」ダイアログ


1 つの画像を使用してアニメーションを作る (アニメーション ウィザード)

アニメーション ウィザードを使用して、1 つの画像ファイルにアニメーション効果を加え、アニメーションを簡単に作成する方法を説明します。

  1. メニューバーから 「ファイル」→「アニメーション ウィザード」を選択します (または「スタートアップ」ダイアログの [アニメーション ウィザード] ボタンをクリックします)。

    「アニメーション ウィザード (アニメーションの選択)」ダイアログが表示されます。

  2. [一枚の画像ファイルから、アニメーション効果を使用してアニメーションを作成] を選択し、[次へ] ボタンをクリックします。

    「アニメーション ウィザード (アニメーション効果 - ファイルの指定)」ダイアログが表示されます。

  3. [参照] ボタンをクリックします。

    「ファイルを開く」ダイアログが表示されます。

  4. 画像ファイルを 1 つ選択し、[開く] ボタンをクリックします。

    [画像ファイル名] に選択したファイル名が表示されます。

  5. [次へ] ボタンをクリックします。

    「アニメーション効果の作成」ダイアログが表示されます。このダイアログでは、アニメーション効果の種類、アニメーションの時間、作成するフレーム (アニメーションのコマ) の数を指定することができます。

  6. [効果の設定] グループからアニメーション効果の種類を選択します。[ワイプ]、[モザイク]、[渦] などの中から好きな効果を選んでください。

    ヒント

    • [効果のプレビュー] の下にある 効果のプレビューを開始 ボタンをクリックすると、プレビューを見ることができます。
  7. 必要に応じて、アニメーションの表示時間と作成する総フレーム数を変更します。また、開始イメージと終了イメージを入れ替えます。
  8. [OK] ボタンをクリックします。

    「アニメーション ウィザード (アニメーションのプレビュー)」ダイアログが表示されます。

  9. アニメーションのプレビューを開始 ボタンをクリックすると、プレビューを見ることができます。プレビューを停止するには、 アニメーションのプレビューを停止 ボタンをクリックします。
  10. アニメーションを作成するには、[完了] ボタンをクリックします。

    ウィザードが終了し、「newimage○○」という名前の新しいアニメーション ウィンドウに、アニメーションを構成するすべての画像 (フレーム) が表示されます。

    ヒント

    • 1 つのアニメーション ウィンドウは 1 つのアニメーション GIF ファイルに対応しています。
  11. メニューバーから「ファイル」→「名前を付けて保存」を選択します。

    「名前を付けて保存」ダイアログが表示されます。

  12. アニメーション GIF ファイルの保存場所とファイル名を指定して、 [保存] ボタンをクリックします。

    作成したアニメーションが 1 つのアニメーション GIF ファイルとして保存されます。

    ヒント

    • 保存する前に、メニューバーから「ファイル」→「簡単最適化」 (または「アニメーションの最適化」) を選択すると、アニメーション GIF ファイルのサイズを小さくすることができます。ただし、最適化するとフレームの一部が壊れて表示され、再編集が難しくなるで注意してください。

ヒント

  • アニメーション ウィザードを使わずに、画像にアニメーション効果を追加することもできます。
  • フレームをクリックし、メニューバーから「編集」→「フレームのプロパティ」を選択すると、「フレームのプロパティ (イメージ フレーム)」ダイアログが表示されます。このダイアログでは、フレーム内の画像の大きさや位置、フレームの表示時間などを設定できます。
  • 左端のフレーム (属性フレーム) をクリックし、メニューバーから「編集」→「フレームのプロパティ」を選択すると、「フレームのプロパティ (属性フレーム）」ダイアログが表示されます。このダイアログでは、グローバル パレットの編集や繰り返し回数の指定などを設定できます。

関連情報

複数の画像を使用してアニメーションを作る (アニメーション ウィザード)

文字アニメーションを作る (アニメーション ウィザード)

アニメーション効果を追加する

アニメーションのファイル サイズを小さくする (簡単最適化)

アニメーションのファイル サイズを小さくする (オプション設定)

フレームとは？

アニメーション ウィンドウ

「アニメーション効果の作成」ダイアログ

「フレームのプロパティ (イメージ フレーム)」ダイアログ

「フレームのプロパティ (属性フレーム)」ダイアログ


文字アニメーションを作る (アニメーション ウィザード)

アニメーション ウィザードを使って、画像をアニメーションにするのと同様に、文字をアニメーションにすることができます。実際には、指定した文字に効果を加えた複数の画像からなる 1 つの GIF ファイルを作成することになります。

  1. メニューバーから「ファイル」→「アニメーション ウィザード」を選択します。

    「アニメーション ウィザード (アニメーションの選択)」ダイアログが表示されます。

  2. [文字アニメーションを使用してアニメーションを作成] を選択し、[次へ] ボタンをクリックします。

    「アニメーション ウィザード (文字アニメーション - 背景の指定)」ダイアログが表示されます。

  3. 文字アニメーションの背景を設定します。
    • 文字の背景に画像を使用する場合： [背景を指定する] をクリックし、画像ファイルを選択します。
    • 文字の背景に画像を使用しない場合： [背景を指定しない] をクリックし、一覧からアニメーション画像の幅と高さを選択するか、「カスタム」を選択して直接画像の幅と高さを入力します。また、一覧から「文字サイズに連動」を選択すると、次のダイアログ「文字アニメーションの作成」にて設定された文字サイズに合わせたアニメーション画像が作成されます。

  4. [次へ] ボタンをクリックします。

    「文字アニメーションの作成」ダイアログが表示されます。

  5. 文字を入力します。必要に応じて、フォント名、文字のサイズ、色なども指定します。
  6. 効果の種類を選択します。

    選択した効果の種類に応じて、その効果に対して設定できるオプションが下に表示されます。

  7. 必要に応じて [効果の設定] グループのオプションを設定し、[OK] ボタンをクリックします。(とりあえず効果を試してみたい場合は、そのまま [OK] ボタンをクリックします。）

    「アニメーション ウィザード (アニメーションのプレビュー)」ダイアログが表示されます。

  8. アニメーションのプレビューを開始 ボタンをクリックすると、プレビューを見ることができます。 アニメーションのプレビューを停止 ボタンをクリックすると、プレビューが停止します。
  9. このアニメーションを作成するには、[完了] ボタンをクリックします。

    「newimage○○」という名前の新しいアニメーション ウィンドウが開き、文字アニメーションを構成するすべての画像 (フレーム) が表示されます。

    ヒント

    • 1 つのアニメーション ウィンドウは 1 つのアニメーション GIF ファイルに対応しています。
  10. メニューバーから「ファイル」→「名前を付けて保存」を選択します。

    「名前を付けて保存」ダイアログが表示されます。

  11. アニメーション GIF ファイルの保存場所とファイル名を指定して、[保存] ボタンをクリックします。

    作成したアニメーションが 1 つのアニメーション GIF ファイルとして保存されます。

    ヒント

    • 保存するまえに、メニューバーから「ファイル」→「簡単最適化」 (または「アニメーションの最適化」) を選択すると、アニメーション GIF ファイルのサイズを小さくすることができます。ただし、最適化するとフレーム (アニメーションの各コマ) の一部が壊れて表示され、再編集が難しくなるので注意してください。
    • 操作の途中で効果の種類または設定を変更したい場合は、[戻る] ボタンをクリックすると、手順 3. に戻るので、前述の手順を繰り返します。文字アニメーションの作成を終了したい場合は、[キャンセル] ボタンをクリックします。
    • メニューバーから「効果」→「文字アニメーションの追加」を選択しても、文字アニメーションを作成できます。

ヒント

  • アニメーション ウィザードを使わずに、画像に文字アニメーションを追加することもできます。

関連情報

複数の画像を使用してアニメーションを作る (アニメーション ウィザード)

1 つの画像を使用してアニメーションを作る (アニメーション ウィザード)

文字アニメーションを追加する

アニメーションのファイル サイズを小さくする (簡単最適化)

アニメーションのファイル サイズを小さくする (オプション設定)

ページ背景情報を取得して文字のギザギザをなくす

フレームとは？

アニメーション ウィンドウ

「文字アニメーションの作成」ダイアログ


ホームページ・ビルダーでページに挿入した画像を、文字アニメーションにする

ホームページ・ビルダーで編集中のページに貼り付けられた GIF 画像に文字アニメーションを追加するには、以下の手順で操作します。

  1. ホームページ・ビルダーで、文字アニメーションを追加したい画像を右クリックし、「画像を編集」→「ウェブ アニメータで編集」を選択します。

    ウェブ アニメータが起動し、画像が開かれます。

  2. イメージ フレームをクリックして、選択します。

    フレームが選択状態になります。

    ヒント

    • 画像がアニメーション GIF の場合は、複数のイメージ フレームがウィンドウに表示されるので、アニメーションを挿入したい場所の前のフレームを選択します。
  3. メニューバーから「効果」→「文字アニメーションの追加」を選択します。

    「文字アニメーションの作成」ダイアログが表示されます。

  4. ダイアログを操作して、文字アニメーションを追加します。

    新しいフレームが挿入されます。

  5. メニューバーから「ファイル」→「上書き保存」を選択して、ファイルを保存します。
  6. メニューバーから「ファイル」→「終了」を選択して、ウェブ アニメータを終了します。

    ホームページ・ビルダーで [プレビュー] タブをクリックして、修正を確認してください。

関連情報

文字アニメーションを追加する

フレームを操作する

「文字アニメーションの作成」ダイアログ


アニメーションを編集する

ここではアニメーションを編集する方法について説明します。

  • 編集を開始する
  • 画像を挿入する
  • スキャナやデジタルカメラから画像を取り込む
  • 文字アニメーションを追加する
  • アニメーション効果を追加する
  • 画像の位置や大きさを調整する
  • 画像の表示時間を設定する
  • アニメーションを再生する


編集を開始する

アニメーションの編集は、次の方法で開始できます。

新しいアニメーションを作成するとき

  1. メニューバーから「ファイル」→「新規作成」を選択します。

    新しいウィンドウが表示されます。

以前に作成したアニメーションを再編集するとき

  1. メニューバーから「ファイル」→「開く」を選択します。

    「開く」ダイアログが表示されます。

  2. 編集したい GIF ファイル (拡張子が .gif のファイル) を選択し、[開く] ボタンをクリックします。

    新しいウィンドウに、選択したアニメーションを構成するフレームが表示されます。

ヒント

  • GIF 以外のフォーマットの画像をアニメーションに使用するときは、新しいアニメーションを作成して、画像をアニメーションに挿入してください。

関連情報

画像を挿入する


画像を挿入する

画像をアニメーションに挿入するには、次の 3 つの方法があります。

ヒント

  • フレームが挿入される位置は、選択状態のフレームのうち、一番左にあるものの前です。

ファイル名を指定して挿入する

  1. メニューバーから「編集」→「画像の挿入」を選択します。

    「画像の挿入」ダイアログが表示されます。

  2. アニメーションに使用したい画像ファイルを選択して、[開く] ボタンをクリックします。

    画像が挿入されます。

    ヒント

    • [Shift] キーまたは [Ctrl] キーを押しながらファイルをクリックすると、一度に複数のファイルを選択することができます。

ドラッグ アンド ドロップで挿入する

  1. Windows のスタートメニューからエクスプローラを起動します。
  2. アニメーションに使用したい画像ファイルが入っているフォルダを開きます。
  3. 画像ファイルをフレーム表示ウィンドウにドラッグ アンド ドロップします。

    画像が挿入されます。

    ヒント

    • 複数のファイルを選択して、一度にドラッグ アンド ドロップすることもできます。また画像ファイルのほかに、ウェブアート デザイナーのオブジェクトもドラッグ アンド ドロップできます。

コピー (カット) アンド ペーストで挿入する

  1. ウェブアート デザイナーやその他の画像編集アプリケーションで、好きな画像を開きます。
  2. アニメーションに使いたい画像やファイルをコピーまたはカットします (コピーやカットの方法は、それぞれのアプリケーションのマニュアルを参照してください)。
  3. ウェブ アニメータのメニューバーから「編集」→「貼り付け」を選択します。

    画像が挿入されます。

関連情報

フレームとは？


スキャナやデジタルカメラから画像を取りこむ

スキャナやデジタルカメラから画像を取り込む

TWAIN 対応機器から画像を取り込みます。

  1. メニューバーから「編集」→「TWAIN 対応機器からの画像挿入」を選択します。

    「TWAIN 対応機器の選択と画像の取り込み」ダイアログが表示されます。ここに、使用可能な TWAIN 対応機器の一覧が表示されます。

    注意

    • このダイアログに TWAIN 機器の名前が表示されていない場合は、TWAIN ドライバがインストールされていません。[閉じる] ボタンをクリックして作業を中断してください。
  2. 機器を選択し、[画像の取込] ボタンをクリックします。

    画像の取り込みが開始されます。


文字アニメーションを追加する

文字アニメーション機能を使うと、ウェブアート デザイナーで作成できるようなロゴを簡単にアニメーションにすることができます。

  1. イメージ フレームを選択し、メニューバーから「効果」→「文字アニメーションの追加」を選択します。

    「文字アニメーションの作成」ダイアログが表示されます。

    ヒント

    • イメージ フレームがなくても、メニューバーから「効果」→「文字アニメーションの追加」を選択することができます。このとき、属性フレームの [サイズの自動設定] にチェック マークが付いていないと「文字アニメーションのサイズ指定」ダイアログが表示されるので、アニメーションの縦横のサイズを指定してください。
  2. [文字] フィールドにアニメーションにしたいロゴの文字を入力します。

    文字アニメーションのプレビュー ウィンドウで、ハンドルマークを操作してロゴの大きさや場所を調整します。

  3. [色] ボタンをクリックして、ロゴの色を変更します。[文字の装飾] ボタンをクリックすると、文字に縁取りや効果を設定し、さらに凝ったロゴにすることができます。
  4. [効果の種類] から、ロゴに加える効果を選択します。 アニメーションのプレビューを開始 ボタンをクリックすると、効果のプレビューを行うことができます。[効果の設定] で効果のオプションを設定し、お好みのアニメーションに調整してください。
  5. [OK] ボタンをクリックすると、指定した文字アニメーションが追加されます。

注意

  • [OK] ボタンを押して追加された文字アニメーションのロゴを再度設定しなおすことはできません。追加されたフレームを全て削除して、最初から作り直してください。

関連情報

文字アニメーションを作る (アニメーション ウィザード)


アニメーション効果を追加する

挿入した画像に対して、または、作成したアニメーションの特定のフレームに対してアニメーション効果を追加することができます。アニメーション効果を使用すると、画像が 1 枚しかない場合でも簡単にアニメーションを作成することができます。

ここでは、渦状になった画像から元の画像が現れてくるようなアニメーションの作り方を説明します。

  1. イメージ フレームを選択し、メニューバーから「効果」→「アニメーション効果の追加」を選択します。
  2. 「アニメーション効果の作成」ダイアログで、効果の種類として [渦] を選択します。
  3. [開始イメージと終了イメージの入れ替え] ボタンをクリックし、イメージを入れ替えます。
  4. [OK] ボタンをクリックすると、指定されたアニメーション効果が追加されます。


画像の位置や大きさを調整する

画像の大きさや位置は自由に変更することができます。

マウスを使う方法と、「フレームのプロパティ (イメージ フレーム)」ダイアログでキーボードから設定する方法があります。

マウスを使って調整するには

  1. イメージ表示ウィンドウで画像をクリックするか、メニューバーから「編集」→「画像の移動/リサイズ」を選択します。

    画像の周囲に「ハンドルマーク」と呼ばれる四角形が現れます。

  2. 画像の角と各辺にある正方形 (ハンドル) をドラッグすると拡大または縮小できます。画像の中央部をドラッグすると、画像を移動することができます。
  3. 希望の大きさや、位置に調整したら、画像以外の部分をクリックしてください。ハンドルマークが消え、設定が終了します。

「イメージ フレームの設定」ダイアログで調整するには

  1. フレーム表示ウィンドウで、目的のイメージ フレームをダブルクリックするか、目的のイメージ フレームを選択してから、メニューバーから「編集」→「フレームのプロパティ」を選択します。

    「フレームのプロパティ (イメージ フレーム)」ダイアログが表示されます。

  2. [幅]、[高さ]、[X 座標]、[Y 座標] フィールドにそれぞれ好きな値 (ピクセル単位) を入力します。各フィールドの右にある矢印をマウスでクリックして、値を変化させることもできます。

ヒント

  • 画像をアニメーションに挿入した直後、その画像は「環境設定」ダイアログの [画像] タブにある [位置] で設定された位置に配置されます。
  • スクリーンからはみ出した場所に画像を配置した場合、属性フレームをダブルクリックすると表示される「フレームのプロパティ (属性フレーム)」ダイアログの [サイズの自動設定] にチェック マークが付いているかいないかによって、画像の配置が異なります。
    • チェック マークが付いている場合： 必ずその画像がスクリーンに収まるように、自動的にスクリーンの大きさが変更されます。
    • チェック マークが付いていない場合： 画像はスクリーンからはみ出したままです。


画像の表示時間を設定する

アニメーションを再生してみて、画像の表示時間が希望と異なる場合には、表示時間を調整することができます。

  1. フレーム表示ウィンドウで目的のイメージ フレームをダブルクリックするか、目的のイメージ フレームを選択し、メニューバーから「編集」→「フレームのプロパティ」を選択します。

    「フレームのプロパティ (イメージ フレーム)」ダイアログが表示されます。

  2. [表示時間] フィールドに、好きな値をミリ秒単位で入力します。フィールドの右にある矢印をマウスでクリックして、値を変化させることもできます。

ヒント

  • 画像が挿入されたとき、その表示時間は「環境設定」ダイアログの [画像] タブにある [表示時間] で設定された値になります。
  • 複数のフレームの表示時間を一度に変更するには、複数のフレームを選択後、メニューバーから「編集」→「プロパティの一括変換」を選択します。アニメーション全体の再生時間を縮めたり伸ばしたりするには、メニューバーから「編集」→「アニメーション合計時間の変更」を選択します。

注意

  • 表示時間には最小で 0 ミリ秒の値を設定することができます。しかし、あまり小さい値を設定しても、表示アプリケーションの処理が追いつかないため、思いどおりに表示できない可能性があります。


アニメーションを再生する

作成したアニメーションの再生は、「再生」ツールバーまたは「再生」メニューを使って行います。

再生を開始 [再生を開始]

現在アクティブなフレームから、アニメーションの再生を開始します。「フレームのプロパティ (属性フレーム)」ダイアログで設定した回数だけ、アニメーションの再生は繰り返されます。

ヒント

  • 繰り返しの回数が 1 回で、最後のフレームがアクティブな状態で再生を開始すると、なにも画面が変化せずに再生が終了してしまいます。このような場合は、[最初のフレーム] ボタンをクリックしてから再生を開始すると、正常に再生することができます。

再生を停止 [再生を停止]

アニメーションの再生を中断します。

スライダ [スライダ]

つまみが付いたスライダをマウスで左右にドラッグすると、すばやくアニメーションの途中のフレームに移動することができます。

最初のフレーム [最初のフレーム]

最初のフレームに移動します。

前のフレーム [前のフレーム]

現在表示されているフレームの 1 つ前のフレームに移動します。

次のフレーム [次のフレーム]

現在表示されているフレームの次のフレームに移動します。

最後のフレーム [最後のフレーム]

最後のフレームに移動します。

関連情報

再生の繰り返し回数を設定する


フレームを操作する

ここではフレームの操作方法について説明します。

  • フレームを操作する
  • イメージ フレームのプロパティを変更する
  • 複数のイメージ フレームのプロパティを一度に変更する


フレームを操作する

アニメーションのフレームに対して、切り取り、削除、貼り付けなどの操作を行うことができます。

ヒント

  • 各編集操作には、それぞれショートカット キーが割り当てられています。ショートカット キーを活用すると、よりすばやく操作を行うことができます。

フレームの選択

フレームをクリックすると、そのフレームが選択されます。選択されたフレームに対して削除、切り取り、コピー、複製、移動の各操作を行うことができます。

フレームの複数選択

[Shift] キーまたは [Ctrl] キーを押しながらフレームをクリックすると、フレームを複数選択できます。

フレームの全選択

メニューバーから「編集」→「すべて選択」を選択する (または [Ctrl] キーを押しながら [A] キーを押す) と、すべてのフレームが選択されます。

フレームの削除

メニューバーから「編集」→「削除」を選択する (または [Delete] キーを押す) と、フレームが削除されます。

フレームの切り取り

メニューバーから「編集」→「切り取り」を選択する (または [Ctrl] キーを押しながら [X] キーを押す) と、フレームが削除されます。削除されたフレームはクリップボードにコピーされ、他の場所または他のアニメーション ウィンドウに貼り付けることができます。

フレームのコピー

メニューバーから「編集」→「コピー」を選択する (または [Ctrl] キーを押しながら [C] キーを押す) と、フレームがクリップボードにコピーされます。コピーされたフレームは、他の場所または他のアニメーション ウィンドウに貼り付けることができます。

フレームの複製

メニューバーから「編集」→「複製」を選択すると、フレームが複製されます。

フレームの貼り付け

メニューバーから「編集」→「貼り付け」を選択する (または [Ctrl] キーを押しながら [V] キーを押す) と、クリップボードにコピーされたフレームを貼り付けることができます。

フレームの移動

選択したフレームをドラッグし、フレームとフレームの間にドロップすると、その位置に移動します。

操作の取り消し

メニューバーから「編集」→「元に戻す」を選択する (または [Ctrl] キーを押しながら [Z] キーを押す) と、直前の操作が取り消されます。

操作のやり直し

メニューバーから「編集」→「やり直し」を選択する (または [Ctrl] キーを押しながら [Y] キーを押す) と、取り消された操作がもう一度実行されます。

関連情報

フレームとは？

複数のイメージ フレームのプロパティを一度に変更する


イメージ フレームのプロパティを変更する

選択したイメージ フレームのプロパティを変更します。イメージ フレームの幅、高さ、位置、表示時間、透明化オプションなどを変更できます。

  1. プロパティを変更したいフレームをクリックします。
  2. メニューバーから「編集」→「フレームのプロパティ」を選択します。

    「フレームのプロパティ (イメージ フレーム)」ダイアログが表示されます。

  3. プロパティを変更します。
  4. ダイアログを閉じるには、ダイアログ右上の 閉じる をクリックします。

    プロパティが変更されます。

関連情報

複数のイメージ フレームのプロパティを一度に変更する


複数のフレームのプロパティを一度に変換する

複数のイメージ フレームのプロパティを一度に変更する

選択した複数のイメージ フレームのプロパティを一度に変更することができます。

  1. [Shift] キーや [Ctrl] キーを押しながらフレームをクリックし、プロパティを設定したいフレームを複数選択します。
  2. メニューバーから「編集」→「プロパティの一括変換」を選択します。

    「プロパティの一括変換」ダイアログが表示されます。

  3. 変更したいプロパティにチェック マークを付けます。

    チェック ボックスの右にあるフィールドが入力可能になります。

    ヒント

    • チェック ボックスはいくつでもチェック マークを付けることができます。
  4. 設定したい値を入力して、[OK] ボタンをクリックします。

    プロパティが変更されます。

ヒント

  • 「フレームのプロパティ (イメージ フレーム)」ダイアログでは、複数のフレームのプロパティを一度に変更することはできません。アクティブなフレームにのみ、プロパティの変更が適用されます。


アニメーションを保存する

ここではアニメーションの保存方法について説明します。

  • アニメーションをファイルに保存する
  • アニメーションをパーソナル フォルダに保存する
  • アニメーションの各フレームを画像ファイルとして保存する


アニメーションをファイルに保存する

作成したアニメーションをファイルとして保存するには、以下のようにします。保存したファイルは他のアプリケーションから開いて自由に使うことができます。

編集中のファイルに上書き保存する

  1. メニューバーから「ファイル」→「上書き保存」を選択します。

    ファイルが保存されます。このとき、まだアニメーションにファイル名が付いていない場合は、「名前を付けて保存」ダイアログが表示されるので、保存するフォルダとファイル名を入力してください。

ファイルに新しい名前を付けて保存する

  1. メニューバーから「ファイル」→「名前をつけて保存」を選択します。

    「名前を付けて保存」ダイアログが表示されます。

  2. 保存先のフォルダとファイル名を指定して、[保存] ボタンをクリックします。

    ファイルが保存されます。

注意

以下の情報はファイルに保存されません。次回ファイルを開いたときには、これらの情報は回復しないので注意してください。

  • 画像の拡大、縮小を行う前の画像データ (元ファイルのデータ)
  • 画像がスクリーンからはみ出した部分
  • イメージ フレームに付けられた名前 (挿入したファイルのファイル名、「効果」など)

    これらはすべて再読み込み時には「イメージ」という名前になります。

  • パレットの正確な色数

    パレットの色数は 2、4、8、16、32、64、128、256 色のいずれかに固定されます。これ以外の色数をもったパレットを保存すると、自動的に色数が増やされます。たとえば、70 色のパレットは 128 色に、230 色のパレットは 256 色になります。

  • 属性フレームの「サイズの自動設定」の状態

関連情報

アニメーションをパーソナル フォルダに保存する


アニメーションをパーソナル フォルダに保存する

  1. メニューバーから「ファイル」→「送る」→「パーソナル フォルダへ」を選択します。

    「ファイル名を付けて保存」ダイアログが表示されます。

  2. ファイル名を入力し、[保存] ボタンをクリックします。

    ファイルがパーソナル フォルダに保存されます。

注意

以下の情報はファイルに保存されません。次回ファイルを開いたときには、これらの情報は回復しないので注意してください。

  • 画像の拡大、縮小を行う前の画像データ (元ファイルのデータ)
  • 画像がスクリーンからはみ出した部分
  • イメージ フレームに付けられた名前 (挿入したファイルのファイル名、「効果」など)

    これらはすべて再読み込み時には「イメージ」という名前になります。

  • パレットの正確な色数

    パレットの色数は、2、4、8、16、32、64、128、256 色のどれかに固定されます。これ以外の色数をもったパレットを保存すると、自動的に色数が増やされます。たとえば、70 色のパレットは 128 色に、230 色のパレットは 256 色になります。

  • 属性フレームの「サイズの自動設定」の状態

関連情報

アニメーションをファイルに保存する


アニメーションの各フレームを画像ファイルとして保存する

アニメーションの各フレームを、 GIF ファイルとして保存することができます。

  1. 保存したいイメージ フレームをクリックして選択します。
  2. メニューバーから「ファイル」→「フレームの保存」を選択します。

    選択したイメージそれぞれについて、「画像に名前を付けて保存」ダイアログが表示されます。

  3. それぞれのファイル名を入力し、[保存] ボタンをクリックします。

ヒント

  • イメージ フレームを選択するときに、[Shift] キーまたは [Ctrl] キーを押しながらクリックすると、複数選択できます。
  • 複数のイメージ フレームを連続して保存するとき、ある画像に対して、中に数字を含めたファイル名 ( 例えば FILE001) を入力すると、その次に保存される画像のファイル名は、自動的にその連続番号 (FILE002) に初期設定されます。画像に連番を付けて保存したいときに便利です。


アニメーションを他のアプリケーションに貼り付ける

ここでは作成したアニメーションをホームページ・ビルダーに送る方法や、他のアプリケーションに挿入する方法について説明します。

  • アニメーションをホームページ・ビルダーへ送る
  • アニメーションを他のアプリケーションにドラッグ アンド ドロップする


アニメーションをホームページ・ビルダーへ送る

作成したアニメーションをファイルに保存せずに、直接ホームページ・ビルダーの編集領域に貼り付けることができます。

  1. メニューバーから「ファイル」→「送る」→「ホームページ・ビルダーへ」を選択します。

    アニメーションが編集領域に貼り付けられます。

    [ページ編集] タブでは、アニメーション GIF ファイルの一番はじめの画像だけが表示されています。[プレビュー] タブでアニメーションが実際に動作します。


アニメーションを他のアプリケーションにドラッグ アンド ドロップする

ウェブ アニメータから、ホームページ・ビルダーやその他のアプリケーションに直接アニメーションをドラッグ アンド ドロップして使うことができます。

  1. 標準ツール バーの一番右端にある ドラッグ開始 ボタン (ドラッグ開始ボタン) の上でマウスの左ボタンをクリックします。
  2. そのままボタンを離さずに、他のウィンドウまでカーソルを移動します。
  3. 目的のウィンドウの上でボタンを離します。

注意

  • アニメーションを新規に作成した場合は、1 回目の保存を行うまでドラッグ開始ボタンは使用できません。


ウェブ アニメータをさらに使いこなす

ここでは次の項目について説明します。

  • 再生の繰り返し回数を設定する
  • 消去方法を設定する
  • 画像を回転または反転する
  • スクリーンの大きさを設定する
  • コメントを挿入する
  • ページ背景情報を取得して文字のギザギザをなくす


再生の繰り返し回数を設定する

アニメーション再生の繰り返し回数を自由に決めることができます。

  1. フレーム表示ウィンドウの一番左端にある、属性フレームをダブルクリックします。

    「フレームのプロパティ (属性フレーム)」ダイアログが表示されます。

  2. 再生を無限に繰り返す場合は [無限] が選択されている状態にします。回数を設定する場合は [有限] を選択し、回数を設定します。


消去方法を設定する

イメージ フレームのプロパティには、[消去方法] という項目があります。これは、そのフレームから次のフレームに移る際に、どのようにして画像を消去するかを設定するものです。消去方法の設定は、「フレームのプロパティ (イメージ フレーム)」ダイアログから行います。消去方法として、以下の 4 種類から 1 つを選択することができます。

指定しない

どのように処理するかは、その画像を表示する Web ブラウザやその他のアプリケーションに依存します。ウェブ アニメータは、この消去方法を指定した場合、[画像をそのまま残す] と同じ動作をします。

画像をそのまま残す

その画像を消さずに次のイメージを重ねて描画します。

背景色で画像を消す

その画像が占めていた領域を、背景色で塗りつぶします。

フレームが表示される前の画像に戻す

その画像が表示される前の状態にいったん戻します。すべての Web ブラウザやその他のアプリケーションがこの消去方法をサポートしているわけではないので注意が必要です。


画像を回転または反転する

次の手順で、選択した画像を 90 度単位で回転させたり、上下、左右の反転を行うことができます。

  1. 回転または反転させたいイメージ フレームをクリックして選択します。
  2. メニューバーから「編集」→「回転」または「反転」の中から行いたい処理を選択します。

    画像が回転または反転します。

ヒント

  • イメージ フレームを選択するときに、[Shift] キーまたは [Ctrl] キーを押しながらクリックすると、複数選択できます。
  • 回転 (反転) するときに、その回転 (反転) 軸をイメージの中心にするか、スクリーンの中心にするかを選択することができます。「環境設定」ダイアログの [画像] タブで、[反転/回転の設定] を設定してください。


スクリーンの大きさを設定する

アニメーションの画像は、仮想的なスクリーンの上に描画されます。

ウェブ アニメータの初期設定では、常にすべての画像がスクリーンに収まるように、スクリーンの大きさが自動的に調節されます。

スクリーンの大きさを自分で決めたい場合には、次の手順で操作してください。

  1. フレーム表示ウィンドウの一番左端にある、属性フレームをダブルクリックします。

    「フレームのプロパティ (属性フレーム)」ダイアログが表示されます。

  2. [サイズの自動設定] チェック ボックスのチェック マークを外します。

    チェック ボックスの下にある [幅]、[高さ] が入力可能になります。

  3. [幅]、[高さ] に、希望のスクリーンの幅と高さを入力します。

    イメージ表示ウィンドウに変更が反映されます。

注意

  • スクリーンからはみ出した部分は、アニメーションを保存して再び開いたときには削除されます。

ヒント

  • アニメーションを新規に作成する際、またはファイルを開いた際に、[サイズの自動設定] を有効にするかどうかは、「環境設定」ダイアログの [新規アニメーション] タブにある [サイズの自動設定] チェック ボックスで設定できます。

    この設定を行うと、スクリーンの外に画像を一部はみ出させることができるようになります。また、スクリーンの大きさより大きい画像を挿入してもスクリーンの大きさは変わらないので、画像がスクリーンの外にはみ出します。


コメントを挿入する

アニメーション GIF ファイルの中に、好きな情報をコメントとして入れることができます。たとえば、次のような情報をコメントに入れておくと便利です。

  • アニメーションの作者
  • アニメーションを作成した日付
  • アニメーションを作成したアプリケーション
  • その他

コメントは、アニメーションを構成する 1 フレームとして挿入されます。コメント フレームは、アニメーションを再生しても表示されません。

コメントを挿入するには

  1. メニューバーから「編集」→「コメントの挿入」を選択します。

    コメント フレームが挿入され、「フレームのプロパティ (コメント フレーム)」ダイアログが表示されます。

  2. コメントの内容を入力します。

    コメント フレームに入力したコメントが表示されます。

  3. 閉じる ボタンをクリックしてダイアログを閉じます。

コメントを変更するには

  1. コメント フレームをダブルクリックします。または、コメントを選択し、メニューバーから「編集」→「フレームのプロパティ」を選択します。

    「フレームのプロパティ (コメント フレーム)」ダイアログが表示されます。

  2. コメントを変更します。
  3. 閉じる ボタンをクリックしてダイアログを閉じます。

コメントを削除するには

  1. コメント フレームを選択します。
  2. メニューバーから「編集」→「削除」を選択します。

注意

  • コメントは、できるだけアニメーションの最後に置いてください。コメントをアニメーションの途中に置いたまま保存しようとすると、コメントをアニメーションの最後に移動するかどうか質問されるので、特別な理由がなければ [はい] ボタンをクリックしてください。

ヒント

  • コメント フレームが挿入される位置は、選択状態のフレームのうち、一番左にあるものの前です。

関連情報

フレームとは？


ページ背景情報を取得して文字のギザギザをなくす

ホームページ・ビルダー本体が起動中の場合、編集中のページの背景色情報を取得して、アニメーションの背景色をそれに一番近い色に設定することができます。透明な背景の上にアンチエイリアスのかかった文字 (縁のギザギザがない) を作成するときに、プログラムはページの背景色と文字の色をブレンドすることによって、ギザギザのない文字を実現します。

  1. メニューバーから「編集」→「ページ背景情報の取得」を選択します。

    属性フレーム (一番左端にあるフレーム) の背景の色が変わります。

注意

  • 属性フレームの [グローバル パレット] にチェック マークが付いていない場合は、ページ背景情報を取得することができません。


ファイルのサイズを小さくする

ここではファイルのサイズを小さくする方法について説明します。

  • アニメーションのファイル サイズを小さくする (簡単最適化)
  • アニメーションのファイル サイズを小さくする (オプション設定)
  • 参考資料 ： フレームの最適化を手作業で行う


アニメーションのファイル サイズを小さくする (簡単最適化)

アニメーション GIF ファイルのファイル サイズを小さくしたい場合は、次の手順で「アニメーションの最適化」を行ってください。「アニメーションの最適化」とは、アニメーションを構成するフレーム (アニメーションの各コマ) の無駄を省いたり、色を簡略化することによって、アニメーション GIF ファイルのサイズを小さくすることです。

  1. メニューバーから「ファイル」→「開く」を選択し、ファイル サイズを小さくしたいアニメーション GIF ファイルを選択して、[開く] ボタンをクリックします。

    アニメーション ウィンドウが開きます。

  2. メニューバーから「ファイル」→「簡単最適化」を選択します。

    処理の進行状況が表示されたあとで、「簡単最適化」ダイアログが表示されます。

    ヒント

    • 最適化によるファイル サイズの変化を確認するには、[元ファイル] の数値と [最適化ファイル] の数値を比較してください。
  3. [完了] ボタンをクリックします。

    「○○○-Opt」というタイトルのアニメーション ウィンドウが新しく表示されます。(○○○は、元のアニメーション GIF ファイルの名前です。)
    元のアニメーション ウィンドウはそのまま残っています。

    ヒント

    • アニメーションを最適化すると、余分な情報がすべて省かれるため、再編集が難しくなります。再編集する予定がある場合は、元のファイルをそのまま残しておくことをお勧めします。
  4. メニューバーから「ファイル」→「名前を付けて保存」を選択します。

    「名前を付けて保存」ダイアログが表示されます。

  5. アニメーション GIF ファイルの保存場所とファイル名を指定して、[保存] ボタンをクリックします。

    最適化したアニメーションが 1 つのアニメーション GIF ファイルとして保存されます。

  6. アニメーションを閉じるには、メニューバーから「ファイル」→「閉じる」を選択します。

ヒント

  • ここで説明した「簡単最適化」で使用されている最適化オプションは次のとおりです。
    • パレットの最適化を行う
    • 最適化パレットを生成する (256 色)
    • コメントを削除する
    • フレーム間の差分値のみ更新する
  • [パレット変更時の設定] については、「環境設定」ダイアログの「画像」ページで設定した内容が使用されます。
  • 上記以外の最適化オプションを使用したい場合は、メニューバーから「ファイル」→「アニメーションの最適化」を選択し、「アニメーションの最適化」ダイアログでオプションを設定しながらアニメーションを最適化してください。

関連情報

アニメーションのファイル サイズを小さくする (オプション設定)


アニメーションのファイル サイズを小さくする (オプション設定)

アニメーションのカラー パレットおよびフレーム (アニメーションの各コマ) の最適化を行い、ファイルのサイズを小さくします。最適化されたアニメーションが新しいアニメーションウィンドウに表示されます (オリジナルのアニメーションは、最適化されない状態で残っています)。

  1. メニューバーから「ファイル」→「アニメーションの最適化」を選択します。

    「アニメーションの最適化 (パレットの最適化設定 - 1/3)」ダイアログが表示されます。

  2. パレットの最適化に関する項目を設定します。グローバル パレットを使用することによってファイルのサイズを小さくしたい場合は、[パレットの最適化を行う] にチェック マークを付け、どのグローバル パレットを使用するかを設定してください。
  3. [パレットの最適化を行う] にチェック マークを付けた場合、パレット変更時の設定として [ディザあり] または [ディザなし] を選択します。
  4. [次へ] ボタンをクリックします。

    「アニメーションの最適化 (フレームの最適化設定 - 2/3)」ダイアログが表示されます。

  5. フレームの最適化に関する項目を設定します。

    指定された条件で最適化が行われ、「処理の進行状況」ダイアログに状況が表示されます。最適化が終了すると、「アニメーションの最適化 (アニメーションのプレビュー - 3/3)」ダイアログが表示されます。

  6. [完了] ボタンをクリックします。

    最適化されたアニメーションが新しいウィンドウに表示されます。

関連情報

アニメーションのファイル サイズを小さくする (簡単最適化)

グローバル パレットとローカル パレット

グローバル パレットを使う

パレットを変換する

「アニメーションの最適化 (パレットの最適化設定 - 1/3)」ページ

「アニメーションの最適化 (フレームの最適化設定 - 2/3)」ページ

「アニメーションの最適化 (アニメーションのプレビュー - 3/3)」ページ


参考資料 ： フレームの最適化を手作業で行う

ここでは、「アニメーションの最適化 (フレームの最適化設定 - 2/3)」ダイアログの [フレームの差分値のみ更新する] の処理を手作業で行う方法について解説します。最適化の内部動作を知るための参考にしてください。

たとえば、このような 2 枚の画像を順に表示するアニメーションがあったとします。

ufo1 | ufo2
RED.gif | BLUE.gif

これら 2 つの画像の違う部分は、UFO の明かりの部分だけなので、以下のように明かりの部分だけの画像を用意して描きかえるようにすれば、ファイル サイズを節約することができます。

ufo3 ufo4

このようなアニメーションは、以下のような操作で作成することができます。

  1. ウェブアート デザイナーで 2 枚目の画像 (BLUE.gif) を読み込み、明かりの部分だけを切り抜きます (赤矢印で示した部分)。

  2. ウェブ アニメータ で、1 枚目のイメージ (RED.gif) を 1 つ目のフレームとして読み込み、明かりのオブジェクトを 2 つ目のフレームとしてドラッグ アンド ドロップします。

    関連情報

    画像を挿入する

  3. 1 つ目のフレームのプロパティで、[消去方法] を [イメージをそのまま残す] に設定します。これで、 2 つ目のフレームは 1 つ目のフレームの上に重ねて描かれます。

    関連情報

    「フレームのプロパティ (イメージ フレーム)」ダイアログ

  4. 2 つ目のフレームのイメージを動かして、1 枚目の画像の明かりの部分にぴたりと重なるように調整します。

    関連情報

    画像の位置や大きさを調整する

ヒント

  • 実際に、「簡単最適化」ダイアログや「アニメーションの最適化」ダイアログがアニメーションのフレームを最適化する際の内部動作は、ここで解説する手順より、より高度で精密です。通常は、手作業でフレームの最適化を行う必要はありません。

関連情報

アニメーションのファイル サイズを小さくする (簡単最適化)

アニメーションのファイル サイズを小さくする (オプション設定)

消去方法を設定する


パレットを使いこなす

ここではパレットを使いこなす方法について説明します。

  • パレットとは？
  • グローバル パレットとローカル パレット
  • グローバル パレットとローカル パレットを切り替える
  • グローバル パレットを使う
  • パレットを編集する
  • パレットを変換する


パレットとは？

「パレット」とは、1 つの画像で使用できる色のリストです。ウェブ アニメータで扱う GIF ファイルは、1 つの画像につき最大 256 種類の色を使用することができます。

関連情報

グローバル パレットとローカル パレット

パレットを編集する

パレットを変換する


グローバル パレットとローカル パレット

GIF ファイルで扱うパレットには、「グローバル パレット」と「ローカル パレット」があります。

グローバル パレット

アニメーション全体で 1 つだけ存在するパレットです。イメージ フレームがローカル パレットを使わないときは、このグローバル パレットが使われます。グローバル パレットを設定するには、属性フレームをダブルクリックして表示される「フレームのプロパティ (属性フレーム)」ダイアログを使って行います。

ローカル パレット

1 つのイメージ フレーム専用に使われるパレットです。各イメージ フレームのローカル パレットを設定するには、イメージ フレームをダブルクリックして表示される「フレームのプロパティ (イメージ フレーム) ダイアログを使って行います。

各イメージ フレームがそれぞれローカル パレットを持つと、GIF ファイル全体のサイズが大きくなります。逆に、すべてのイメージ フレームが 1 つのグローバル パレットを共有するようにすれば、ファイルのサイズを小さくすることができ、ファイルの転送に時間をかけずに済みます。ただし、グローバル パレットを使うときには、パレットの色をうまく選ばないと、画像が汚くなってしまいます。ファイル サイズと画像の品質のどちらに重点をおくかに応じて、グローバル パレットとローカル パレットを使い分けてください。

関連情報

パレットとは？

グローバル パレットとローカル パレットを切り替える

アニメーションのファイル サイズを小さくする (簡単最適化)

アニメーションのファイル サイズを小さくする (オプション設定)


グローバル パレットとローカル パレットを切り替える

グローバル パレットの有効/無効、ローカル パレットの有効/無効は、それぞれ「フレームのプロパティ (属性フレーム)」ダイアログと「フレームのプロパティ (イメージ フレーム)」ダイアログを使って行うことができます。

グローバル パレットを無効にすると...

グローバル パレットを使用していたイメージ フレームはローカル パレットが有効になります。

グローバル パレットを有効にすると...

グローバル パレットと同じローカル パレットを持つイメージ フレームは、自動的にローカル パレットが無効になります。

ローカル パレットを無効にすると...

グローバル パレットの有効/無効の状態によって、動作が異なります。

  • グローバル パレットが有効の場合

    グローバル パレットが、そのイメージのパレットとして使用されます。その際、パレットの変換が行われてイメージが変化する場合があります。

  • グローバル パレットが無効の場合

    そのイメージのパレットが、グローバル パレットになります。イメージの画質は変化しません。

ローカル パレットを有効にすると...

イメージの画質や、他のフレームに特に影響を与えることはありません。

関連情報

パレットとは？

グローバル パレットとローカル パレット


グローバル パレットを使う

各イメージ フレームで、それぞれグローバル パレットを使うか、ローカル パレットを使うかを設定することができます。グローバル パレットを使い、複数のイメージ フレームでグローバル パレットを共有するようにすれば、ファイルのサイズを小さくすることができます。

グローバル パレットを使うときには、以下の順番で作業します。

  1. グローバル パレットを設定する
  2. 各イメージ フレームのローカル パレットを無効にする

ヒント

  • アプリケーションと一緒にインストールされるサンプル アニメーション (「素材集から開く」で開くことができます) は、すべてグローバル パレットを使っています。
  • 表示色数の少ないディスプレイでアニメーションを表示する際に、できるだけ正確な色を表示する、という点でもグローバル パレットは有効です。
  • 「アニメーションの最適化」を利用して、「アニメーションの最適化 (パレットの最適化設定 - 1/3)」ダイアログで最適化パレットを生成する設定にしておくと、自動的に作成したアニメーションに最適なグローバル パレットが生成され、画像に適用されます。

関連情報

アニメーションのファイル サイズを小さくする (オプション設定)


パレットを編集する

「カラーパレットの編集」ダイアログを使って、グローバル パレットやローカル パレットを編集することができます。パレットを編集するにあたっては、次の点に注意してください。

  • グローバル パレットを編集すると、グローバル パレットを使用している ( = ローカル パレットを使用していない) すべての画像の品質が低下する場合があります。
  • パレットの編集を何度も繰り返すと、画像の品質が低下します。

以上の点から、パレットの編集は必要なときだけにとどめるべきです。一般に、画像の挿入はローカル パレットを使う設定にして作業を進めていきます。最後にファイルのサイズを小さくしたいときに、グローバル パレットに切り替えるのが良いでしょう。

ヒント

  • 「アニメーションの最適化」を利用し、「アニメーションの最適化 (パレットの最適化設定 - 1/3)」ダイアログで最適化パレットを生成する設定にしておくと、自動的に作成したアニメーションに最適なグローバル パレットが生成され、画像に適用されます。

関連情報

パレットとは ？


パレットを変換する

ローカル パレット と グローバル パレットの切り替えや、パレットの編集をした場合に、元の画像に新しいパレットを当てはめます。これを「パレットの変換」と呼びます。

ウェブ アニメータ では、パレットの変換の方法として、「ディザあり」と「ディザなし」という 2 種類の変換方法を選択することができます。

一般に、

  • ディザありの変換は、写真のような多階調の画像
  • ディザなしの変換は、イラスト風の画像

に適しています。

次の例を参考にしてください。

  • 写真調の画像を 216 色のパレットに変換
    「ディザあり」 | 「ディザなし」
    ディザあり写真 | ディザなし写真
  • イラスト調の画像を 27 色のパレットに変換
    「ディザあり」 | 「ディザなし」
    ディザありイラスト | ディザなしイラスト

変換方法は、「環境設定」ダイアログの [画像] タブにある [変換方法] で設定することができます。

ヒント

  • 何度も繰り返して画像のパレットを変換すると、画像の品質が低下します。パレットの編集は、必要なときだけにとどめるべきです。一般に、画像の挿入はローカル パレットを使う設定にして作業を進めていきます。最後にファイルのサイズを小さくしたいときに、グローバル パレットに切り替えるのが良いでしょう。
  • 「アニメーションの最適化」を利用し、「アニメーションの最適化 (パレットの最適化設定 - 1/3)」ダイアログで最適化パレットを生成する設定にしておくと、自動的に作成したアニメーションに最適なグローバル パレットが生成され、画像に適用されます。

関連情報

パレットとは？


リファレンス編

ここでは、ウェブ アニメータの操作に使用するボタンやメニュー、ダイアログについて、その用途と使用方法を説明します。ダイアログを表示中に、ダイアログ内の [ヘルプ] ボタンをクリックすると、そのダイアログを説明するヘルプ トピックが表示されます。

ウェブ アニメータ メイン画面の説明

ショートカット キー一覧 (ウェブ アニメータ)

ウィンドウ

メニュー

ツールバー

ダイアログ一覧


ウェブ アニメータ メイン画面の説明

ウェブ アニメータのメイン画面は、以下のような構成になっています。詳しくは各項目をクリックしてください。

ウェブ アニメータ メイン ウィンドウ

アニメーション ウィンドウ

現在編集中のアニメーションが表示されるウィンドウです。

メニューバー

ウェブ アニメータのさまざまな機能は、このメニューバーに埋め込まれています。

ツール バー

便利なものやよく使うものはツール バーとして準備されています。

ステータスバー

メニューの説明や、編集中のアニメーション ファイルの情報が表示されます。 ステータスバー アニメーション ウィンドウ ツールバー メニューバー ステータスバー アニメーション ウィンドウ ツールバー メニューバー ウェブアニメーター


ショートカット キー一覧 (ウェブ アニメータ)

キー操作だけで直接メニューの機能が実行できる、ショートカット キーの一覧です。

キー | メニュー/操作
[Ctrl]+[N] | 「ファイル」→「新規作成」
[Ctrl]+[O] | 「ファイル」→「開く」
[Ctrl]+[S] | 「ファイル」→「上書き保存」
[F12] | 「ファイル」→「アプリケーションの終了」
[Ctrl]+[Z] | 「編集」→「元に戻す」
[Ctrl]+[Y] | 「編集」→「やり直し」
[Ctrl]+[X] | 「編集」→「切り取り」
[Ctrl]+[C] | 「編集」→「コピー」
[Ctrl]+[V] | 「編集」→「貼り付け」
[Delete] | 「編集」→「削除」
[Ctrl]+[U] | 「編集」→「複製」
[Ctrl]+[A] | 「編集」→「すべて選択」
[Alt]+[Enter] | 「編集」→「フレームの編集」
[Ctrl]+[B] | 「編集」→「ページ背景情報の取得」
[Ctrl]+[R] | 「再生」→「再生を開始」
[Ctrl]+[E] | 「再生」→「再生を停止」
[Alt]+[F4] | 閉じる


ウィンドウ

ここでは次の項目について説明します。

  • アニメーション ウィンドウ
  • 画像表示ウィンドウ
  • フレーム表示ウィンドウ


アニメーション ウィンドウ

現在編集中のアニメーションが表示されるウィンドウです。

  • 1つのアニメーション、すなわち 1 つの GIF ファイルに、 1 つのアニメーション ウィンドウが対応しています。
  • 複数のアニメーション ウィンドウを開き、同時に複数のアニメーションを編集することができます。
  • アニメーション ウィンドウはさらに上下 2 つのウィンドウに分かれています。上部にあるのが画像表示ウィンドウ、下部にあるのがフレーム表示ウィンドウです。

画像表示ウィンドウ

映画でいえば、スクリーンに相当する部分です。アニメーションの再生内容は、このウィンドウに表示されます。

フレーム表示ウィンドウ

アニメーションを構成する要素(フレーム)が表示されるウィンドウです。映画でいえば、フィルムの 1 つ 1 つのコマがフレームに対応します。

関連情報

編集を開始する

フレームとは？


画像表示ウィンドウ

アニメーション ウィンドウの上方を占めているのが、画像表示ウィンドウです。

  • フレーム表示ウィンドウで最後にクリックされた(アクティブな)画像がここに表示されます。
  • アニメーションの再生の際は、ここにアニメーションの再生内容が表示されます。
  • このウィンドウを使って、表示されている画像の位置、大きさを調整することができます。
  • 画像の表示の大きさを変えることができます。変更は、メニューの 「表示」→「拡大表示」、「表示」→「縮小表示」、および 「表示」→「原寸表示」 を使って行います。

    注意 拡大表示や縮小表示を行っても、アニメーションを保存するときは原寸の大きさで保存されます。

  • アニメーションの再生を行っていないときの表示内容は、メニューの「表示」→「アクティブな画像だけを表示」のオン/オフによって変化します。
  • オンになっているときは、アクティブな画像だけが表示されます。画像が透明化されていて、画像の位置が分かりにくいようなときは、オンにすると見やすくなります。
  • オフになっているときは、アニメーションの再生中の状況をそのまま表示します。アクティブな画像に加えて、その前に表示された画像が、消去方法に応じてすべて表示されます。消去方法を「画像をそのまま残す」にしている場合に、背景の状態を確認しながら画像の位置や大きさを調整したいときは、オフにすると便利です。

関連情報

アニメーション ウィンドウ

フレーム表示ウィンドウ

消去方法を設定する


フレーム表示ウィンドウ

(サムネイル表示)

(リスト表示)

アニメーション ウィンドウの下方を占めているのが、フレーム表示ウィンドウです。表示の形式には、サムネイル表示とリスト表示があります。メニューの「表示」→「フレームの表示」 から、 [リスト形式]または [サムネイル形式]を選択して、それぞれの表示形式へ切り替えることができます。

  • サムネイル表示それぞれの画像が、縮小された状態で表示（サムネイル表示）されます。サムネイルの大きさは、 メニューの「表示」→「サムネイル サイズ」 から変更することができます。再生の際には、ウィンドウの左にある画像から順に再生されます。

  • リスト表示アニメーションの属性や、それぞれの画像の詳細な情報がリストの形式で表示されます。再生の際には、ウィンドウの上にある画像から順に再生されます。画像表示ウィンドウとリスト表示の境目の部分をドラッグして、リスト表示の広さを変えることができます。

関連情報

フレームとは？

アニメーション ウィンドウ

画像表示ウィンドウ


メニュー

ここでは次の項目について説明します。

  • メニューバー
  • 「ファイル」メニュー
  • 「編集」メニュー
  • 「表示」メニュー
  • 「効果」メニュー
  • 「再生」メニュー
  • 「ウィンドウ」メニュー
  • 「ヘルプ」メニュー


メニューバー

ウェブ アニメータのメニューバーには以下のメニューがあります。

メニュー

「ファイル」メニュー
「編集」メニュー

「表示」メニュー
「効果」メニュー

「再生」メニュー
「ウィンドウ」メニュー

「ヘルプ」メニュー


「ファイル」メニュー

「ファイル」メニューは、アニメーション GIF ファイルを操作するときに使います。ウィザード形式で簡単にアニメーションを作成するための「アニメーション ウィザード」ダイアログも、この「ファイル」メニューから起動することができます。

メニュー |  | 機能
新規作成 |  | 新しいアニメーション GIF ファイルを作成します。作成されたアニメーションは、「環境設定」ダイアログの[新規アニメーション] タブで設定されている属性をもちます。
開く |  | 既存のアニメーション GIF ファイルを開きます。「開く」ダイアログが表示されますので、ファイルを選択してください。 関連情報 編集を開始する
閉じる |  | 編集中のアニメーション GIF ファイルを閉じます。ファイルに変更を加えた場合は、保存確認のメッセージが表示されます。
上書き保存 |  | 編集中のアニメーション GIF ファイルを保存します。新規のアニメーション GIF ファイルの場合は、「名前を付けて保存」ダイアログが表示されますので、ファイル名を指定してください。 関連情報 アニメーションを保存する
名前を付けて保存 |  | 編集中のアニメーション GIF ファイルに新しい名前を付けて保存します。「名前を付けて保存」ダイアログが表示されますので、ファイル名を指定してください。 関連情報 アニメーションを保存する
送る |  |
 | ホームページ・ビルダーへ | 編集中のアニメーション GIF ファイルをホームページ・ビルダー本体の編集領域（カーソル位置）に挿入します。 関連情報 アニメーションをホームページ・ビルダーへ送る
 | パーソナル フォルダへ | 編集中のアニメーション GIF ファイルをパーソナル フォルダに保存します。
フレームの保存 |  | フレーム表示ウィンドウで選択したフレームを単体のGIFファイルとして保存します。「イメージに名前を付けて保存」ダイアログが表示されますので、ファイル名を指定してください。このメニューは、既存のアニメーション GIF を開いて、その中に含まれる画像を取り出して利用する場合などに使うと便利です。 関連情報 アニメーションの各フレームを画像 ファイルとして保存する
簡単最適化 |  | 選択したアニメーションのカラーパレットおよびフレームの最適化を自動的に行います。最適化されたアニメーションが新しいアニメーション ウィンドウに表示されます。（オリジナルのアニメーションは、最適化されない状態で残っています。） 関連情報 アニメーションを最適化する（簡単最適化）
アニメーションの最適化 |  | 編集中のアニメーション GIF ファイルのサイズを小さくします。ウィザード画面が表示されますので、画面の指示に従って操作してください。最適化されたアニメーションが新しいアニメーション ウィンドウに表示されます。（オリジナルのアニメーションは、最適化されない状態で残っています。） 関連情報 「アニメーションの最適化」ダイアログ アニメーションを最適化する（オプション設定）
アニメーション ウィザード |  | ウィザード形式で簡単にアニメーション GIF ファイルを作成します。ウィザード画面が表示されますので、画面の指示に従って操作してください。 関連情報 「アニメーション ウィザード」ダイアログ アニメーション ウィザードを使ってアニメーションを作る（アニメーション ウィザード） アニメーション効果を使用してアニメーションを作る（アニメーション ウィザード） 文字アニメーションを作る（アニメーション ウィザード）
素材集から開く |  | ウェブ アニメータで用意されている素材を利用してアニメーション GIF ファイルを作成します。素材の一覧から好きな素材を選んでください。
環境設定 |  | ウェブ アニメータの環境設定を行います。「環境設定」ダイアログが表示されますので、あなたの好みに合わせてウェブ アニメータの設定や動作を変更してください。 関連情報 [一般] タブ （「環境設定」ダイアログ） [新規アニメーション] タブ （「環境設定」ダイアログ） [画像] タブ （「環境設定」ダイアログ）
(最近使ったファイル) |  | 最近使ったファイルの一覧がこの位置に表示されます。ファイル名をクリックすると、そのファイルが開きます。
アプリケーションの終了 |  | ウェブ アニメータを終了します。編集中のファイルが保存されていない場合には、保存確認のメッセージが表示されます。


「編集」メニュー

「編集」メニューは、アニメーションの 1 コマ 1 コマに相当する「フレーム」を編集するときに使います。

メニュー | 機能
元に戻す | 直前の操作を取り消し、元の状態に戻します。
やり直し | 「元に戻す」メニューで元に戻した操作をもう一度やり直します。
切り取り | 選択されているフレームを切り取ってクリップボードにコピーします。
コピー | 選択されているフレームの内容をクリップボードにコピーします。
貼り付け | クリップボードの内容を選択されているフレームの前にコピーします。
削除 | 選択されているフレームを削除します。
複製 | 選択されているフレームの複製を選択されているフレームの前に貼り付けます。
すべて選択 | 編集中のアニメーション GIF ファイルの全フレームを選択します。
選択の反転 | フレームの選択状態を逆にします（選択されているフレームの選択をやめ、選択されていないフレームを選択します）。 関連情報 フレームを操作する
フレームの順番を反転 | 選択されたフレームの順番を逆にします。選択されたフレームのうち一番後ろにあるものが一番前に、一番前にあるものが一番後ろに移動します。
画像の挿入 | 選択されているフレームの前に別のフレーム（画像ファイル）を挿入します。「画像の挿入」ダイアログが表示されますので、ファイルを選択してください。複数のファイルを選択することもできます。 関連情報 画像を挿入する
TWAIN 対応機器からの画像挿入 | TWAIN 対応機器から画像ファイルを取り込みます。「TWAIN対応機器からの画像挿入」ダイアログ が表示されます。
コメントの挿入 | アニメーション GIF ファイルの中に作者や日付などをコメントとして残すために、選択されているフレームの前にコメント専用のフレームを挿入します。コメント用フレームはアニメーションを再生しても表示されません。 関連情報 コメントを挿入する
反転 | 選択したフレームを反転します。サブメニューから「上下反転」または「左右反転」を選択してください。 関連情報 画像を回転、反転する
回転 | 選択したフレームを回転します。サブメニューから「左へ 90 度回転」、「右へ 90 度回転」、または「180 度回転」を選択してください。 関連情報 画像を回転、反転する
画像の移動/リサイズ | 画像表示ウィンドウ上で画像のサイズや位置を変更します。 関連情報 画像の位置や大きさを調整する
ページ背景情報の取得 | ホームページ・ビルダー本体が起動中の場合、編集中のページの背景色情報を取得し、アニメーション属性の背景色をそれに一番近い色に設定します。属性フレーム（一番左端にあるフレーム）の背景の色が変ります。透明な背景の上にアンチエイリアスのかかった文字（縁のギザギザが無い）を作成するときに、プログラムはページの背景色と文字の色をブレンドすることによって、ギザギザの無い文字を実現します。
アニメーション合計時間の変更 | アニメーションの再生時間を変更します。「アニメーションの合計時間の変更」ダイアログが表示されますので、時間を指定してください。
プロパティの一括変換 | 複数のフレームを選択した場合、それらのプロパティを一度に変更します。「プロパティの一括変換」ダイアログが表示されますので、プロパティを指定してください。 関連情報 複数のイメージ フレームのプロパティを一度に変更する
フレームのプロパティ | 選択したフレームのプロパティを表示、変更します。属性フレームを選択するとアニメーション全体のプロパティが表示され、イメージ フレームを選択するとそのイメージ フレームのプロパティが表示されます。コメント フレームを選択すると、コメントが表示されます。


「表示」メニュー

「表示」メニューは、表示方法を変えるときに使います。

メニュー | 機能
拡大表示 | 画像を拡大して表示します。サブメニューが表示されますので、倍率を「2倍」、「3倍」、「4倍」の中から選択してください。
縮小表示 | 画像を縮小して表示します。サブメニューが表示されますので、倍率を「1/2 倍」、「1/3 倍」、「1/4 倍」の中から選択してください。
原寸表示 | 画像を原寸大で表示します。
グリッドの表示 | グリッドの表示/非表示を切り替えます。グリッドとは、画像表示ウィンドウに表示される補助線のことです。
グリッドに合わせる | グリッドに画像の位置を合わせます。
アクティブな画像だけを表示 | このメニューをオンにすると、選択された画像だけが画像表示ウィンドウに表示されます。オフにすると、前のフレームとの合成が表示されます。
フレームの表示 | フレーム表示ウィンドウにフレームの内容を表示する方法を切り替えます。サブメニューから「リスト形式」または「サムネイル形式」を選択してください。初期値では「サムネイル形式」が選択されています。
サムネイルサイズ | フレーム表示ウィンドウがサムネイル形式の場合、各フレームの表示する大きさを設定します。サブメニューから、「64X64」、「80X80」、「96X96」、「128X128」のいずれかを選択してください。 関連情報 画像表示ウィンドウ フレーム表示ウィンドウ
標準ツールバー | 「標準」ツールバーの表示/非表示を切り替えます。
再生ツールバー | 「再生」ツールバーの表示/非表示を切り替えます。
ステータスバー | ステータスバーの表示/非表示を切り替えます。


「効果」メニュー

「効果」メニューは、アニメーションに効果を追加するときに使います。

メニュー | 機能
アニメーション効果の追加 | 選択したフレームに効果を加えることによってアニメーションを作成します。「アニメーション効果の作成」ダイアログが表示されますので、効果を選択してください。
文字アニメーションの追加 | 選択したフレームの上に文字を入れ、その文字に効果を加えることによって文字のアニメーションを作成します。「文字アニメーションの作成」ダイアログが表示されますので、文字を入力し、効果を選択してください。 関連情報 アニメーション効果を使用してアニメーションを作る


「再生」メニュー

「再生」メニューは、アニメーションを再生（プレビュー）するときに使います。

メニュー | 機能
再生を開始 | アニメーションのプレビューを開始します。
再生を停止 | アニメーションのプレビューを停止します。
最初のフレーム | 最初のフレームを選択状態にし、表示します。
前のフレーム | 現在選択されているフレームの前のフレームを選択状態にし、表示します。
次のフレーム | 現在選択されているフレームの次のフレームを選択状態にし、表示します。
最後のフレーム | 最後のフレームを選択状態にし、表示します。

関連情報

アニメーションを再生する


「ウィンドウ」メニュー

「ウィンドウ」メニューは、複数のアニメーション ウィンドウを開いている場合に、表示方法を変えるために使います。

メニュー | 機能
重ねて表示 | 複数のウィンドウを重ねて表示します。
並べて表示 | 複数のウィンドウを並べて表示します。
アイコンの整列 | メイン画面の一番下にアイコン化されているウィンドウを整列させます。
(ウィンドウ名) | 現在開いているファイルの一覧が表示されていますので、編集したいファイルを選択します。


「ヘルプ」メニュー

「ヘルプ」メニューは、オンラインヘルプやバージョン情報を参照するときに使います。

メニュー | 機能
トピックの検索 | オンラインヘルプを表示します。「トピックの検索」ダイアログが表示されますので、調べたい用語があるときは[キーワード]タブをクリックして用語を入力してください。
バージョン情報 | ウェブ アニメータのバージョン情報を表示します。


ツールバー

ここでは次の項目について説明します。

  • ツールバー
  • 「標準」 ツールバー
  • 「再生」 ツール バー


ツールバー

ウェブ アニメータのツールバーには以下のものがあります。

「標準」ツールバー

「再生」ツールバー


「標準」 ツールバー

ボタン | 機能
新規ファイル | 新規アニメーションを作成します。
開く | 「開く」ダイアログが表示されます。
保存 | 編集中のファイルを上書き保存します。
フレームの保存 | 選択されているイメージ フレームを個別に GIF ファイルとして保存します。
アニメーション ウィザード | 「アニメーション ウィザード」ダイアログが表示されます。
簡単最適化 | 簡単最適化を行います。
切り取り | 選択されているフレームを切り取ってクリップボードにコピーします。
コピー | 選択されているフレームの内容をクリップボードにコピーします。
貼り付け | クリップボードの内容を選択されているフレームの前に貼り付けます。
消去 | 選択されているフレームを削除します。
複製 | 選択されているフレームのコピーを選択されているフレームの前にコピーします。
元に戻す | 直前に行った操作を 1 つ前に戻します。
やり直し | 元に戻した操作をもう一度やり直します。
プロパティ ツールの表示/非表示 | 「フレームのプロパティ」ダイアログが表示されます。
リスト形式で表示 | フレーム表示ウィンドウにフレームの内容をリスト形式で表示します。
サムネイル形式で表示 | フレーム表示ウィンドウにフレームの内容をサムネイル形式で表示します。
画像ファイルをアニメーションに挿入 | 「画像の挿入」ダイアログが表示されます。
アニメーション効果の追加 | 「アニメーション効果の作成」ダイアログが表示されます。
文字アニメーションの追加 | 「文字アニメーションの作成」ダイアログが表示されます。
他のアプリケーションにドキュメントをドラッグ アンド ドロップ | ほかのアプリケーションに現在開いているファイルをドラッグ アンド ドロップします。

関連情報

ウェブ アニメータ メイン ウィンドウの説明

ツールバー


「再生」 ツール バー

ボタン | 機能
再生を開始 | アニメーションのプレビューを開始します。
再生を停止 | アニメーションのプレビューを停止します。
フレームを指定 | スライダーを動かすことにより、選択し表示するフレームを指定できます。
最初のフレーム | 最初のフレームを選択状態にし、表示します。
前のフレーム | 現在選択されているフレームの前のフレームを選択状態にし、表示します。
次のフレーム | 現在選択されているフレームの次のフレームを選択状態にし、表示します。
最後のフレーム | 最後のフレームを選択状態にし、表示します。

関連情報

ウェブ アニメータ メイン ウィンドウの説明

ツールバー


ダイアログ一覧

ここでは次の項目について説明します。

  • 「カラー パレット」ダイアログ
  • 「カラー パレットの編集」ダイアログ
  • 「定義済みパレットの選択」ダイアログ
  • 「プロパティの一括変換」ダイアログ
  • 「フレームのプロパティ (属性 フレーム)」ダイアログ
  • 「フレームのプロパティ (イメージ フレーム)」ダイアログ
  • 「フレームのプロパティ （コメント フレーム）」ダイアログ
  • 「スタートアップ」ダイアログ
  • 「アニメーションの合計時間の変更」ダイアログ
  • 「文字アニメーションの作成」ダイアログ
  • 「アニメーション効果の作成」ダイアログ
  • 「処理の進行状況」ダイアログ
  • 「TWAIN 対応機器の選択と画像の取り込み」ダイアログ
  • 「アニメーションの最適化」ダイアログ
  • 「アニメーション ウィザード」ダイアログ
  • 「環境設定」ダイアログ


「カラー パレット」ダイアログ

アニメーションの背景色や画像の透明色を指定します。

ダイアログ上には、現在有効なカラー パレットが表示されます。好みの色をクリックすると、その色が背景色や透明色として使用されます。色の指定を行わずにダイアログを閉じるには、 [キャンセル]ボタンをクリックするか、 [Esc]キーを押してください。

関連情報

パレットとは？


「カラー パレットの編集」ダイアログ

アニメーションのグローバル パレットや画像のローカル パレットを編集します。

[追加] ボタン/[削除] ボタン

パレットに色を追加、またはパレットから色を削除します。

ヒント パレットの色数は、最大 256 色、最小 2 色です。

[保存] ボタン

パレットを保存します。「ファイル名をつけて保存」ダイアログで、保存する名前を指定してください。保存したパレットは、他のアニメーションや画像のパレットとして使用することができます。

[読み込み] ボタン

保存されたパレットを読み込みます。「開く」ダイアログで、読み込むパレットを指定してください。

[選択] ボタン

あらかじめ用意された一般的なパレットを選んで読み込むことができます。ボタンをクリックすると、「定義済みパレットの選択」ダイアログが表示されるので、そこで好みのパレットを選択してください。

[カラーマップの割り当てをやり直す] チェック ボックス

このチェック ボックスをオンにすると、パレットを画像に適用するときに、できるだけ元の画像の色を変えないように調整します。

ヒント カラーマップの色数が編集前と編集後で異なる場合は、自動的にこのチェック ボックスはオンになります。パレットを変更する際には、[画像] タブ（「環境設定」ダイアログ）にあるパレット変更時の設定が使用されます。

関連情報

パレットとは？

パレットを編集する


「定義済みパレットの選択」ダイアログ

このダイアログは、「カラー パレットの編集」ダイアログで、 [選択] ボタンをクリックすると表示されます。このダイアログであらかじめ用意されたパレットを選択して、グローバル パレットやローカル パレットとして使用することができます。

ダイアログ上部のボックスでパレットを選択すると、その内容が表示されます。好みのパレットが見つかったら、 [OK]ボタンをクリックしてください。「カラー パレットの編集」ダイアログにそのパレットが表示されます。

関連情報

パレットとは？


「プロパティの一括変換」ダイアログ

選択された複数のフレームのプロパティを一度に変更します。

[幅] [高さ] [X 座標] [Y 座標] [透明化] [インターレース化] [表示時間] [パレット] [消去方法] チェック ボックス

変更したいプロパティのチェック ボックスをオンにしてください。すると、その右にあるフィールドやボックス、ラジオ ボタンが入力可能になりますので、好みの値を設定してください。

ヒント

  • 各設定値の初期値は、選択されたフレームのうち一番左(または上)にあるフレームの設定値になっています。
  • 透明化のインデックスは、選択されたすべてのフレームのパレットが同じ場合か、[パレット] チェック ボックスをオンにして、「グローバル パレット」を選択した場合のみ設定可能になります。

関連情報

複数のイメージ フレームのプロパティを一度に変更する


「フレームのプロパティ （属性 フレーム）」ダイアログ

スクリーンの大きさ、グローバル パレット、繰り返しといった、アニメーション全体に関する設定を行います。

[サイズの自動設定] チェック ボックス

このチェック ボックスをオンにしておくと、常にすべてのフレームがスクリーン内に収まるように、スクリーンの大きさが自動調整されます。

ヒント 普段はこのチェック ボックスを常にオンにしておいて構いません。ただし、スクリーンから画像がはみ出した状態を意図的に作りたい場合（例えば、スクリーンの中を車が通り過ぎていくようなアニメーションを作る場合）は、このチェック ボックスをオフにすると便利です。

[幅] [高さ] フィールド

[サイズの自動設定] をオフにした場合は、このフィールドで、スクリーンの大きさを指定してください。

関連情報

スクリーンの大きさを設定する

[グローバル パレット] チェック ボックス、 [編集] ボタン

グローバル パレットを使用するときにオンにします。グローバル パレットの内容は、サムネイル表示ウィンドウの属性フレームに表示されます。 [編集] ボタン をクリックすると、「カラー パレットの編集」 ダイアログが表示され、グローバル パレットを編集することができます。

関連情報

パレットとは？

[背景色] - [インデックス] フィールド、 [パレットから指定] ボタン

グローバル パレットのうち、どの色を背景色にするか指定します。[パレットから指定] ボタンをクリックすると、「カラー パレット」 ダイアログが表示されるので、そこで背景色を指定することもできます。

[繰り返し] - [無限] [有限] ラジオ ボタン

アニメーションを再生するときに、何回繰り返すかを指定します。

[有限]をオンにした場合は、繰り返しの回数をフィールドに入力してください。


「フレームのプロパティ（イメージ フレーム）」ダイアログ

イメージ フレームのプロパティ設定を行います。

[幅] [高さ] フィールド

画像の幅と高さを設定します。

[X座標] [Y座標] フィールド

画像の X座標と Y座標を設定します。座標の原点はスクリーンの左上です。

ヒント イメージ表示ウィンドウで画像の移動/リサイズを行った場合も、[幅][高さ][X座標][Y座標] フィールドの値が変化します。大雑把な場所、大きさの調整はイメージ編集ウィンドウでマウスを使って行い、細かい調整はフィールドに値を入力して行うのが便利です。

[表示時間] フィールド

画像の表示時間を設定します。単位はミリ秒 (1000 分の 1 秒)です。ただし、10 ミリ秒以下の細かい設定は無効となり、切り捨てられます(例 ： 1234 ミリ秒 → 1230 ミリ秒)。

注意 実際にWeb ブラウザでアニメーションを表示するときは、約 50 ミリ秒以下の細かい指定を行っても、意図したとおりに表示されないことがあります。

[透明化する] チェック ボックス、 [インデックス] フィールド

このチェック ボックスをオンにすると、画像の特定の色を透明にすることができます。どの色を透明にするかは、[インデックス] フィールドに表示されます。指定は、以下の 3 つの方法で行うことができます。

  • フィールドに直接値を入力します。
  • フィールドの右にある色指定ボタンをクリックし、「カラーパレット」ダイアログで指定します。
  • スポイトボタンをクリックし、画像表示ウィンドウ上で透明にしたい場所をクリックします。

[ローカル パレットを使用する] チェック ボックス、 [編集] ボタン

ローカル パレットの使用/不使用を指定します。[編集] ボタンをクリックすると、「カラー パレットの編集」ダイアログが表示され、ローカル パレットを編集することができます。

関連情報

パレットとは？

[インターレース化する] チェック ボックス

画像をインターレース化して保存するときにチェックします。インターレースになっている画像は、Web ブラウザに表示させたときに、解像度の低い全体像が徐々に鮮明になっていくように表示されます。

[消去方法] ボックス

このフレームから次のフレームに移るときに、このフレームの画像をどのように消すか指定します。

関連情報

消去方法を設定する


「フレームのプロパティ （コメント フレーム）」ダイアログ

コメント フレームの内容を設定します。

最大文字数は 255 文字です。漢字や、その他の全角文字は 2 文字として数えられます。

ヒント

  • コメントには漢字を含めてどのような文字でも入力できますが、あなたが作成したアニメーションを世界中の人が見ることを考え、できるだけ半角の英数字を使うことをお勧めします。

関連情報

コメントを挿入する


「スタートアップ」ダイアログ

ウェブ アニメータ を起動したときに表示されるダイアログです。行いたい作業のボタンをクリックしてください。

[アニメーション ウィザード] ボタン

このボタンをクリックすると、「アニメーション ウィザード」ダイアログ が開始します。アニメーションの素材となる画像ファイルが用意してあるときは、アニメーション ウィザードを使うと簡単にアニメーションを作成できます。

関連情報

複数の画像を使用してアニメーションを作る（アニメーション ウィザード）

アニメーション効果を使用してアニメーションを作る（アニメーション ウィザード）

文字アニメーションを作る（アニメーション ウィザード）

[新規作成] ボタン

新規にアニメーションを作成するときは、このボタンをクリックしてください。

[ファイルを開く] ボタン

過去に作成したアニメーションやダウンロードしたアニメーションを読み込んで、再生や編集を行うときは、このボタンをクリックしてください。

関連情報

編集を開始する

[素材集から開く] ボタン

ウェブ アニメータで用意されているアニメーション素材を開きます。

[次回の起動時には、このダイアログを表示しない] チェック ボックス

ウェブ アニメータ を起動したときにこの「スタートアップ」ダイアログを表示したくないときは、このチェック ボックスをオンにしてください。再び「スタートアップ」ダイアログを表示したくなったときには、「環境設定」ダイアログの [一般] タブで設定することができます。


「アニメーションの合計時間の変更」ダイアログ

アニメーションの再生時間を変更します。すべてのフレームの表示時間が一度に変更されますが、フレーム同士の表示時間の割合は変わりません。

ダイアログの上部には、現在のアニメーションの再生時間が表示されます。

  • 「その再生時間を○○倍したい」場合は、2 つのフィールドのうち、上のフィールドにその値を入力します。
  • 「再生時間を○○秒にしたい」場合は、下のフィールドに値を入力します。一方のフィールドの値を変更すると、それに応じてもう一方の値も変化します。

注意

  • フレームの表示時間が 0 秒だった場合は、そのフレームの表示時間は 10 ミリ秒であるとみなして計算されます。
  • このダイアログで指定した合計時間と、設定後にステータスバーに表示される合計時間が異なる場合があります。これは各フレームの表示時間が 10 ミリ秒単位で四捨五入されるためです。


「文字アニメーションの作成」ダイアログ

好きなロゴを元に、様々な効果を加えたアニメーション (文字アニメーション) を作成します。

[文字アニメーションのプレビュー] ウィンドウ

文字アニメーションの元になるロゴが表示されます。ロゴの周囲に表示される枠 □ (ハンドルマーク) をドラッグして、ロゴの場所や大きさを調整することができます。

  • プレビュー ウィンドウの着脱 - [プレビュー ウィンドウの着脱] ボタン

    このボタンをクリックすると、 [文字アニメーションのプレビュー] ウィンドウがダイアログから外れて、独立したウィンドウになります。再度クリックすると、ウィンドウは元の状態に戻ります。

  • アニメーションのプレビューを開始 - [アニメーションのプレビューを開始] ボタン

    アニメーションのプレビューを開始します。

  • アニメーションのプレビューを停止 - [アニメーションのプレビューを停止] ボタン

    アニメーションのプレビューを停止します。

[文字] グループ

文字アニメーションの文字を入力したり、フォントや大きさを設定します。

  • [文字] テキスト ボックス

    アニメーションにしたいロゴの文字を入力します。複数行の文字を入力するには、行の終わりで [Enter] キーを押します。

  • [フォント名] リスト ボックス

    ロゴのフォントを設定します。

  • [サイズ] スピン ボックス

    ロゴの大きさを設定します。[文字アニメーションのプレビュー] ウィンドウで □ (ハンドルマーク) を動かすと、このフィールドの値も変化します。

  • [色] ボタン

    ロゴの色を設定します。詳細は [色] タブを参照してください。

  • [文字の装飾] ボタン

    このボタンをクリックすると、「ロゴの編集」ダイアログが表示されます。そこで、ロゴの縁取りや効果といった装飾に関する設定や、文字間隔や文字のスタイルのような詳細設定を行うことができます。

[効果の種類] リスト ボックス

ロゴに加える効果を選択します。画像の上にマウス ポインタを合わせると、効果の一例をプレビューすることができます。項目をクリックして選択すると、[効果の設定] の内容が変化して、効果のオプションを設定することができます。選択できる効果は以下の 23 種類です。それぞれ、設定できるオプションが異なります。詳細は、それぞれの効果をクリックして参照してください。

  • ワイプ
  • スクロール
  • フェードイン
  • 渦
  • タイル
  • ズーム
  • 動き
  • グラデーション
  • 回転
  • 飛び去り
  • 炎
  • 文字間隔
  • 蜃気楼
  • 拡散
  • 立ち上がり
  • 一文字づつ表示
  • 点滅
  • クロス
  • ぼかし
  • ブラインド
  • モザイク
  • テクスチャ
  • なし

[効果の設定] グループ

[効果の種類] リスト ボックスで選択した効果ごとにそれぞれの設定を行います。ここでは主な設定のみ説明しています。

  • [合計時間] スピン ボックス

    アニメーションの時間を設定します。1 秒から 5 秒の数値が設定できます。

  • [作成するフレーム数] スピン ボックス

    作成するフレーム数を設定します。選択した効果の種類によって、この値が無効になる場合があります。

  • [方向] グループ

    アニメーションの動く方向を上下、左右の 4 方向から設定できます。

  • [速度の変化] スライダー

    アニメーションの速度を設定します。

注意

  • [OK] ボタンをクリックして作成された文字アニメーションのロゴを再度設定しなおすことはできません。再度作り直してください。

関連情報

文字アニメーションを追加する

[アニメーション ウィザード (アニメーションの選択)] ページ (「アニメーションウィザード」) ダイアログ


「アニメーション効果の作成」ダイアログ

このダイアログでは、 1 枚または 2 枚の画像を使用して、アニメーション効果を作成します。

  • 1 枚の画像を使用してアニメーション効果を作成する効果を選択した場合、選択された画像が開始イメージとして、選択された画像に効果を加えた画像が終了イメージとして使用されます。この場合、効果の種類によっては [開始イメージと終了イメージの入れ替え] ボタンをクリックして、開始イメージと終了イメージを入れ替えることもできます。
  • 2 枚の画像を使用してアニメーション効果を作成する効果を選択した場合、選択された画像が開始イメージとして、選択された画像の次の画像が終了イメージとして使用されます。この場合、元のアニメーションにイメージ フレームが 1 枚しかない場合や、選択されたイメージ フレームの次にイメージ フレームがない場合は、透明な画像が終了イメージとして使用されます。

ヒント 1枚の画像を使用するアニメーション効果の場合は、効果の種類に 1枚の画像を使用する効果 が、2 枚の画像を使用するアニメーション効果の場合は、 2枚の画像を使用する効果 が表示されます。

[効果の開始イメージ]

アニメーション効果の開始イメージが表示されます。

[効果のプレビュー]

アニメーション効果のプレビューが表示されます。

プレビューの開始 ボタンをクリックすると、プレビューが開始されます。　プレビューを停止するには、 プレビューの停止 ボタンをクリックします。

[効果の終了イメージ]

アニメーション効果の終了イメージが表示されます。

[効果の設定] グループ

以下の効果を選択することができます。

  • ワイプ　(上→下、下→上、右→左、左→右、中→外、外→中)

  • 矩形ワイプ　（中→外、外→中）

  • モザイクワイプ（規則的、不規則）

  • スクロール　(上→下、下→上、右→左、左→右)

  • ブレンド

  • ぼかし

  • 渦

  • タイル

  • モザイク

  • ノイズ

  • 油絵

  • 拡散

  • ピンチ

  • センターフォーカス

  • ズーム

  • グレースケール

  • 2階調

  • セピア

  • ハーフトーン

  • 動き

  • 風

  • 回転　（時計回り、反時計回り）

[時間] フィールド

アニメーション効果の時間を設定します。1 秒から 5 秒の数値が設定できます。

[作成するフレーム数] フィールド

作成するフレーム数を設定します。　画像の大きさや、効果の種類により、設定できる数値の範囲は異なります。

[開始イメージと終了イメージの入れ替え] ボタン

効果の種類が、[ぼかし]、[渦]、[タイル]、[モザイク] 、[ノイズ]、[油絵] 、[拡散]、[ピンチ] 、[センターフォーカス]、[ズーム] 、[グレースケール]、[2階調化] 、[セピア]、[ハーフトーン]の場合に表示されます。

このボタンをクリックすることにより、効果の開始イメージと終了イメージを入れ替えることができます。

[OK] ボタン

アニメーション効果を作成し、元のアニメーションに作成されたフレームを追加します。

注意

  • アニメーション効果作成の元となる画像は、メニューの「表示」→「アクティブな画像だけを表示」のチェックがオフになっている場合に、画像表示ウィンドウに表示されている画像です。
  • アニメーション効果で作成されるイメージ フレームはすべてローカル パレットをもちます。


「処理の進行状況」ダイアログ

このダイアログは、以下の場合に表示されます。

  • アニメーションの最適化を行っているとき
  • アニメーション ウィザードで、複数の画像からアニメーションを作成したとき

プログレスバーに、処理の進行状況が表示されます。

[キャンセル] ボタン

処理を途中でキャンセルします。


「TWAIN対応機器からの画像挿入」ダイアログ

「TWAIN対応機器の選択と画像の取り込み」ダイアログ

このダイアログでは、TWAIN機器の選択と画像の取り込みができます。

[TWAIN 機器] ボックス

使用可能なTWAIN機器の一覧が表示されます。使用したいTWAIN機器をメニューから選択してください。

[画像の取込] ボタン

選択されたTWAIN機器から画像の取り込みを開始します。


「アニメーションの最適化」ダイアログ

ここでは次の項目について説明します。

  • [アニメーションの最適化 （パレットの最適化設定 - 1/3）] ページ
  • [アニメーションの最適化 （フレームの最適化設定 - 2/3）] ページ
  • [アニメーションの最適化 （アニメーションのプレビュー - 3/3）] ページ


[アニメーションの最適化 （パレットの最適化設定 - 1/3）] ページ (「アニメーションの最適化」)ダイアログ

[アニメーションの最適化 （パレットの最適化設定 - 1/3）] ページ (「アニメーションの最適化」ダイアログ)

「アニメーションの最適化」ダイアログは、アニメーションを構成するフレーム(アニメーションの各コマ)の無駄を省いたり、色を簡略化して、アニメーション GIF ファイルのサイズを小さくします。

このページでは、パレットの最適化に関する設定を行います。

[パレットの最適化を行う] チェック ボックス

全てのイメージ フレームが同じパレット（グローバル パレット）を使用するように設定します。どのようなパレットを使用するか、[グローバル パレットの設定] から選択してください。

[グローバル パレットの設定]

フレームで使用するグローバル パレットの設定をします。

[最適化パレットを生成する] ラジオ ボタン

アニメーションの全画像の色を調べ、最適なパレットを生成します。パレットの最大色数をフィールドに指定してください。

注意 全画像の色を合わせて最大色数に満たない場合は、指定した色数より少ない色数のパレットが生成されます。

[元ファイルのグローバル パレットを使用する] ラジオ ボタン

元のアニメーションのグローバル パレットを新しいアニメーションのパレットに設定します。

[定義済みパレットから選択する] ラジオ ボタン

ボックスで選択した定義済みパレットをグローバル パレットに設定します。

[カスタム パレットを使用する] ラジオ ボタン

「カラー パレットの編集」ダイアログで保存したカラー パレットをグローバル パレットとして使用します。[参照...] ボタンをクリックして、パレットのファイル名を指定してください。

[パレット変更時の設定]

画像のパレットが変化したとき、どのようにパレットの変換を行うか設定します。

詳細はパレットとは？ を参照してください。

関連情報

[アニメーションの最適化 （フレームの最適化設定 - 2/3）]ページ

[アニメーションの最適化 （アニメーションのプレビュー - 3/3）]ページ

パレットとは？

アニメーションを最適化する(簡単最適化)

アニメーションを最適化する(オプション設定)

参考資料：フレームの最適化を手作業で行う


[アニメーションの最適化 （フレームの最適化設定 - 2/3）] ページ (「アニメーションの最適化」)ダイアログ

[アニメーションの最適化 （フレームの最適化設定 - 2/3）] ページ (「アニメーションの最適化」ダイアログ)

フレームの最適化に関する設定を行います。

[コメントを削除する] チェック ボックス

コメント フレームを削除します。

[同じフレームを削除する] チェック ボックス

複数のフレームにわたって同じ画像が続く場合、それらを一つのフレームにまとめます。表示時間はまとめられたフレームの表示時間の合計になります。

ヒント このチェック ボックスの設定内容は、[フレーム間の差分のみ更新する] チェック ボックスがオンになっているときには変更することはできません（常にオンになります）。

[フレーム間の差分のみ更新する] チェック ボックス

あるフレームから次のフレームにかけて、画像の一部分だけが変化している場合に、その変化した部分だけを描画するフレームを、自動的に生成します。

ヒント 文字アニメーションによって生成されたアニメーションを、この最適化オプションを使用して最適化すると、大幅にサイズを減らすことができます。

関連情報

[アニメーションの最適化 （パレットの最適化設定 - 1/3）]ページ

[アニメーションの最適化 （アニメーションのプレビュー - 3/3）]ページ


[アニメーションの最適化 （アニメーションのプレビュー - 3/3）] ページ (「アニメーションの最適化」)ダイアログ

[アニメーションの最適化 （アニメーションのプレビュー - 3/3）] ページ (「アニメーションの最適化」ダイアログ)

アニメーションを最適化した結果がここで表示されます。

[ファイル サイズ]

最適化前（元ファイル）と最適化後（最適化ファイル）のファイル サイズが表示されます。

[転送予想時間]

28.8kbps、33.6kbps、64kbps のネットワーク接続機器を用いた場合に、ファイルをダウンロードするのに要する時間の予想を、最適化前のファイルと最適化後のファイルについてそれぞれ表示します。

注意 すでに十分に最適化されたアニメーションに対して最適化を行うと、最適化後のファイル サイズが最適化前のファイル サイズよりも大きくなる場合があります。

再生ボタン - [再生] ボタン

アニメーションのプレビューを開始します。ダイアログの左側にプレビューが表示されます。

停止ボタン - [停止] ボタン

プレビューを停止します。

関連情報

アニメーションを最適化する(簡単最適化)

[アニメーションの最適化 （パレットの最適化設定 - 1/3）]ページ

[アニメーションの最適化 （フレームの最適化設定 - 2/3）]ページ


「アニメーション ウィザード」ダイアログ

ここでは次の項目について説明します。

  • [アニメーション ウィザード (アニメーションの選択)] ページ
  • [アニメーション ウィザード (文字アニメーション - 背景の指定)] ページ
  • [アニメーション ウィザード (アニメーション効果 - ファイルの指定)] ページ
  • [アニメーション ウィザード (ファイルの指定)] ページ
  • [アニメーション ウィザード (フレーム位置の指定)] ページ
  • [アニメーション ウィザード (繰り返し/表示時間の設定)] ページ
  • [アニメーション ウィザード (アニメーションのプレビュー)] ページ


[アニメーション ウィザード （アニメーションの選択）] ページ (「アニメーション ウィザード」ダイアログ)

アニメーション ウィザードを使うと、1つの画像、または複数の画像から、3 種類の方法で、簡単にアニメーションを作成することができます。

作成方法を選択して、[次へ]ボタンを押してください。

[複数の画像ファイルを使用してアニメーションを作成] ボタン

2 つ以上の画像をもとにアニメーション GIF ファイルを作成します。あらかじめアニメーションに使う画像をすべて用意している場合は、この方法でアニメーションを作成してください。

[文字アニメーションを使用してアニメーションを作成] ボタン

好きなロゴに、ワイプやスクロール、グラデーションといった、様々な効果を加えたアニメーションを作成します。必要に応じて、ロゴの背景の画像を指定することもできます。

[一枚の画像ファイルから、アニメーション効果を使用してアニメーションを作成] ボタン

画像ファイルを一つ指定して、その画像に効果を加えることによってアニメーションを作成します。

関連情報

[アニメーション ウィザード （アニメーション効果 - ファイルの指定）]ページ

[アニメーション ウィザード （文字アニメーション - 背景の指定）]ページ

[アニメーション ウィザード （ファイルの指定）]ページ

[アニメーション ウィザード （フレーム位置の指定）]ページ

[アニメーション ウィザード （繰り返し/表示時間の設定）]ページ

[アニメーション ウィザード （アニメーションのプレビュー）]ページ

複数の画像を使用してアニメーションを作る（アニメーション ウィザード）

アニメーション効果を使用してアニメーションを作る（アニメーション ウィザード）

文字アニメーションを作る（アニメーション ウィザード）


[アニメーション ウィザード （文字アニメーション - 背景の指定）] ページ (「アニメーション ウィザード」ダイアログ)

文字アニメーションを作成するための、背景についての設定を行います。背景に画像を使用する場合は、その背景画像のファイル名、画像を使用しない場合はアニメーションの縦横のピクセル数を指定して、 [次へ]ボタンを押してください。

[背景を指定する] ラジオ ボタン

文字アニメーションの背景として画像を使用する場合は、このラジオ ボタンを選択します。[参照] ボタンを押して使用する画像ファイル名を指定してください。

[画像ファイル名] フィールド

ここに表示されているファイル名の画像が、文字アニメーションの背景になります。

[参照] ボタン

このボタンを押すと、「開く」 ダイアログが表示されます。ここで指定したファイル名が、[画像ファイル名] フィールドに表示されます。

[背景を指定しない] ラジオ ボタン

文字アニメーションの背景に画像を使用しない場合は、このラジオ ボタンを選択し、下のテキスト ボックス一覧からアニメーション画像の幅と高さを選択するか、「カスタム」を選択して直接画像の幅と高さを入力します。また、一覧から「文字サイズに連動」を選択すると、次のダイアログ「文字アニメーションの作成」にて設定された文字サイズに合わせたアニメーション画像が作成されます。

[幅] [高さ] フィールド

ボックスで「カスタム」 メニューを選択した場合は、このフィールドで幅と高さを直接指定してください。

関連情報

[アニメーション ウィザード （アニメーションの選択）]ページ

[アニメーション ウィザード （アニメーション効果 - ファイルの指定）]ページ

[アニメーション ウィザード （ファイルの指定）]ページ

[アニメーション ウィザード （フレーム位置の指定）]ページ

[アニメーション ウィザード （繰り返し/表示時間の設定）]ページ

[アニメーション ウィザード （アニメーションのプレビュー）]ページ

文字アニメーションを作る（アニメーション ウィザード）


[アニメーション ウィザード （アニメーション効果 - ファイルの指定）] ページ (「アニメーション ウィザード」ダイアログ)

アニメーション効果を加える元となる画像ファイル名を指定します。[参照]ボタンを押してファイル名を指定した後、[次へ]ボタンをクリックすると「アニメーション効果の作成」 ダイアログが表示されます。

[画像ファイル名] フィールド

ここに表示されているファイル名の画像が、効果を加える対象となります。

[参照] ボタン

このボタンを押すと、「開く」ダイアログが表示されます。ここで指定したファイル名が、[画像ファイル名] フィールドに表示されます。

関連情報

[アニメーション ウィザード （アニメーションの選択）]ページ

[アニメーション ウィザード （文字アニメーション - 背景の指定）]ページ

[アニメーション ウィザード （ファイルの指定）]ページ

[アニメーション ウィザード （フレーム位置の指定）]ページ

[アニメーション ウィザード （繰り返し/表示時間の設定）]ページ

[アニメーション ウィザード （アニメーションのプレビュー）]ページ

アニメーション効果を使用してアニメーションを作る（アニメーション ウィザード）


[アニメーション ウィザード （ファイルの指定）] ページ (「アニメーション ウィザード」ダイアログ)

複数の画像からアニメーションを作成する場合に、アニメーションに使用する画像ファイルを指定します。

[画像の追加] ボタン

このボタンを押すと、「開く」ダイアログが表示されます。アニメーションにしたい画像ファイルを選択して、 [開く]ボタンを押してください。選択されたファイルは、画像ファイル リストに表示されます。

ヒント [Shift]キーや [Ctrl]キーを押しながらファイルをクリックすると、一度に複数のファイルを選択することができます。[Ctrl]キーを押しながら [A]キーを押すと、全部のファイルを選択できます。

画像ファイル リスト

ダイアログの中央にある白い部分が、画像ファイル リストです。 [画像の追加] で追加された画像のファイル名がここに表示されます。上にあるファイルから順番に再生されます。画像ファイル リストに表示されたファイルは、ドラッグしたり、 [最初] [上] [下] [最後] ボタンで順番を変えることができます。

[最初] [上] [下] [最後] ボタン

画像ファイル リストに表示されたそれぞれのファイルを、リストの最初、上、下、最後に移動します。

[画像の削除] ボタン

画像ファイル リストに表示されたファイルを削除したいときは、ファイル名を選択して、このボタンを押してください。

関連情報

[アニメーション ウィザード （アニメーションの選択）]ページ

[アニメーション ウィザード （アニメーション効果 - ファイルの指定）]ページ

[アニメーション ウィザード （文字アニメーション - 背景の指定）]ページ

[アニメーション ウィザード （フレーム位置の指定）]ページ

[アニメーション ウィザード （繰り返し/表示時間の設定）]ページ

[アニメーション ウィザード （アニメーションのプレビュー）]ページ


[アニメーション ウィザード （フレーム位置の指定）] ページ (「アニメーション ウィザード」ダイアログ)

アニメーションのスクリーンに対して、どこに画像を配置するかを指定します。

9 つのボタンはスクリーンの大きさより小さい画像を、それぞれ

(左上) | ( 上 ) | (右上)
( 左 ) | (中央) | ( 右 )
(左下) | ( 下 ) | (右下)

に配置します。好きな場所を一つだけ選ぶことができます。

ヒント

  • スクリーンの大きさは、一番大きい画像の大きさになります。

関連情報

[アニメーション ウィザード （アニメーションの選択）]ページ

[アニメーション ウィザード （アニメーション効果 - ファイルの指定）]ページ

[アニメーション ウィザード （文字アニメーション - 背景の指定）]ページ

[アニメーション ウィザード （ファイルの指定）]ページ

[アニメーション ウィザード （繰り返し/表示時間の設定）]ページ

[アニメーション ウィザード （アニメーションのプレビュー）]ページ


[アニメーション ウィザード （繰り返し/表示時間の設定）] ページ (「アニメーション ウィザード」ダイアログ)

アニメーションの再生が最後まで終わったら、最初に戻って再生を繰り返すことができます。このページで、その繰り返しの回数を設定します。また、それぞれの画像をどれくらいの時間表示するかを設定します。

[無限] ラジオ ボタン

再生を無限に繰り返したいときに選択します。

[有限] ラジオ ボタン

繰り返しの回数を指定したいときに選択して、[繰り返し回数] フィールドに繰り返し回数を入力してください。

[表示時間] フィールド

各画像をどのくらいの時間表示するかを入力してください。

関連情報

[アニメーション ウィザード （アニメーションの選択）]ページ

[アニメーション ウィザード （アニメーション効果 - ファイルの指定）]ページ

[アニメーション ウィザード （文字アニメーション - 背景の指定）]ページ

[アニメーション ウィザード （ファイルの指定）]ページ

[アニメーション ウィザード （フレーム位置の指定）]ページ

[アニメーション ウィザード （アニメーションのプレビュー）]ページ


[アニメーション ウィザード （アニメーションのプレビュー）] ページ (「アニメーション ウィザード」ダイアログ)

どのようなアニメーションが作成されたかチェックします。

設定を変更したいときは、[戻る]ボタンを押して、いつでも前のページに戻ることができます。

[完了]ボタンを押すと、アニメーション ウィザードが終了し、作成したアニメーションがアニメーション ウィンドウに表示されます。

この後の作業に関しては、以下のヘルプを参照してください。

  • 作成したアニメーションをホームページ・ビルダーに貼りつけたい

    アニメーションをホームページ・ビルダーへ送る

  • 作成したアニメーションを保存したい

    アニメーションをファイルに保存する

    アニメーションをパーソナルフォルダに保存する

  • さらにアニメーションを編集したい

    ヘルプの目次から、「操作編」の「アニメーションを編集する」および「フレームを操作する」の内容を参照してください。

プレビューを開始 - [アニメーションのプレビューを開始] ボタン

アニメーションのプレビューを開始します。ダイアログの左側にプレビューが表示されます。

プレビューを停止 - [アニメーションのプレビューを停止] ボタン

プレビューを停止します。

ヒント

  • プレビュー画面より画像が大きいときは、プレビューは実際のアニメーションより小さくなり、実際のアニメーションより色が汚く表示される場合があります。正確な色を見たいときは、[完了]ボタンを押して、アニメーション ウィンドウでチェックしてください。

関連情報

[アニメーション ウィザード （アニメーションの選択）]ページ

[アニメーション ウィザード （アニメーション効果 - ファイルの指定）]ページ

[アニメーション ウィザード （文字アニメーション - 背景の指定）]ページ

[アニメーション ウィザード （ファイルの指定）]ページ

[アニメーション ウィザード （フレーム位置の指定）]ページ

[アニメーション ウィザード （繰り返し/表示時間の設定）]ページ


「環境設定」ダイアログ

ここでは次の項目について説明します。

  • [一般] タブ
  • [新規アニメーション] タブ
  • [画像] タブ


[一般] タブ (「環境設定」ダイアログ)

「環境設定」ダイアログは、ウェブ アニメータの環境設定を行い、好みに合わせてウェブ アニメータの設定や動作を変更することができます。

このタブでは、ウェブ アニメータの動作に関する一般的な設定を行います。

[グリッドの設定]

プレビュー画面に表示されるグリッド(縦横の補助線)の設定を行います。グリッドは、画像を移動したりリサイズしたりするときの目安として使われます。

[間隔] フィールド

グリッドの間隔を指定します。

[グリッドの色] ボタン

グリッドの色を指定します。ボタンをクリックすると「色の設定」ダイアログが表示されますので、好みの色を指定してください。

[グリッドを表示する] チェック ボックス

プレビュー画面にグリッドを表示するかどうかを設定します。

ヒント メニューの「表示」→「グリッドの表示」でも、同じ内容を設定することができます。

[グリッドに合わせる] チェック ボックス

このチェック ボックスをオンにすると、画像を移動したりリサイズしたりするとき、自動的にグリッドの線上に画像の端が合わせられます。

ヒント メニューの「表示」→「グリッドに合わせる」でも、同じ内容を設定することができます。

[メニューにアイコンを表示する] チェック ボックス

メニューにアイコンを表示する場合には、このチェック ボックスをオンにします。

この設定は、次回の起動時から有効になります。

[操作履歴保存回数] フィールド

元に戻す(アンドゥ)で操作の取り消しを行う際に、どれだけ操作の履歴を保存しておくかを設定します。

この設定は、次に GIF ファイルを開いたとき、または新規作成を行うときから有効になります。

[起動時にスタートアップ ダイアログを表示する] チェック ボックス

ウェブ アニメータの起動時に「スタートアップ」ダイアログを表示したいときは、このチェック ボックスをオンにします。

関連情報

[新規アニメーション] タブ (「環境設定」ダイアログ)

[画像] タブ (「環境設定」ダイアログ)


[新規アニメーション] タブ (「環境設定」ダイアログ)

アニメーションを新規に作成したときの、初期状態の設定を行います。これらの内容は、新規作成の後は「フレームのプロパティ(属性フレーム)」ダイアログ で変更することができます。

[グローバル パレットを使用しない] ラジオ ボタン

を使用しません。

グローバル パレット

[定義済みパレットから選択する] ラジオ ボタン

コンボボックスで選択した定義済みパレットをグローバル パレットに設定します。

[カスタム パレットを使用する] ラジオ ボタン

「カラー パレットの編集」ダイアログで保存したカラー パレットをグローバル パレットとして使用します。[参照]ボタンをクリックして、パレットのファイル名を指定してください。

[サイズの指定]

[サイズの自動設定] チェック ボックスをオンにすると、常にすべてのフレームがスクリーン内に収まるように、スクリーンの大きさが自動調整されます。[サイズの自動設定] チェック ボックスをオフにしたときは、[幅] [高さ] フィールドでスクリーンの大きさを指定してください。

[繰り返し回数の設定]

アニメーションの繰り返し回数を設定します。[無限] [有限]のどちらかを選択します。[有限] を選択した場合は、フィールドで繰り返しの回数を指定してください。

関連情報

[一般] タブ (「環境設定」ダイアログ)

[画像] タブ (「環境設定」ダイアログ)

「フレームのプロパティ(属性フレーム)」ダイアログ

パレットとは？


[画像] タブ (「環境設定」ダイアログ)

イメージ フレームの取り扱いに関する設定を行います。

[画像挿入時の設定]

画像の挿入、およびドラッグ アンド ドロップで画像をアニメーションに挿入したときの設定を行います。

[インターレース化する] チェック ボックス、 [表示時間] フィールド、 [消去方法] ボックス

挿入時のプロパティの初期値を指定します。詳細は 「フレームのプロパティ（イメージ フレーム）」ダイアログ を参照してください。

[位置] ボックス

挿入した画像がスクリーンの大きさと違うとき、スクリーンのどこに画像を配置するか指定します。

[パレット] ボックス

挿入した画像のパレットをグローバル パレットにするかローカル パレットにするかを指定します。

詳細はパレットとは？ を参照してください。

[パレット変更時の設定]

画像の挿入時やローカル パレット／グローバル パレットの設定変更時、また、パレットの編集によって画像のパレットが変化したとき、どのようにパレットの変換を行うか設定します。

詳細はパレットとは？ を参照してください。

[反転/回転の設定]

メニューの「編集」→「反転」や「回転」を行うとき、どこを反転や回転の中心にするかを設定します。

関連情報

[一般] タブ (「環境設定」ダイアログ)

[新規アニメーション] タブ (「環境設定」ダイアログ)

「フレームのプロパティ（イメージ フレーム）」ダイアログ

パレットとは？


Q&A 集

ウェブ アニメータ Q&A 集

Q&A 集では、ウェブ アニメータに関するよくある質問と回答をまとめています。

背景を透明化することはできますか

JPEG ファイルや PNG ファイルをウェブ アニメータで開いて編集したい

作成したアニメーションを Web ブラウザで表示すると、動作が違います

透明色を設定したのに、前のフレームの画像が透けて見えません

画像をスクリーンの外に移動しようとしたら、スクリーンが大きくなってしまった


背景を透明化することはできますか

このページを表示するには、フレームをサポートしているブラウザが必要です。


JPEG ファイルや PNG ファイルをウェブ アニメータで開いて編集したい

このページを表示するには、フレームをサポートしているブラウザが必要です。


作成したアニメーションを Web ブラウザで表示すると、動作が違います

このページを表示するには、フレームをサポートしているブラウザが必要です。


透明色を設定したのに、前のフレームの画像が透けて見えません

このページを表示するには、フレームをサポートしているブラウザが必要です。


画像をスクリーンの外に移動しようとしたら、スクリーンが大きくなってしまった

このページを表示するには、フレームをサポートしているブラウザが必要です。


「文字アニメーションのサイズ指定」ダイアログ

文字アニメーションの作成を行うとき、スクリーンの大きさが決まっていない場合は、このダイアログが表示されます。サイズを設定して [OK]ボタンをクリックすると、「文字アニメーションの作成」ダイアログが表示されます。

[規定サイズから選択] ラジオ ボタン

ウェブサイトのバナー広告など、あらかじめ決められたサイズから選択したい場合は、このラジオ ボタンをクリックして、コンボ ボックスで、サイズを選択してください。

[カスタム] ラジオ ボタン

このラジオ ボタンをクリックすると、スクリーンの横の幅と縦の幅を、それぞれ数値(ピクセル)で指定することができます。

ヒント

  • 「スクリーンの大きさが決まっていない場合」とは、白紙のパネルを開いてから、メニューの 「効果」 → 「文字アニメーションの追加」を行うときなど、メニューの 「ファイル」 → 「環境設定」 → [新規アニメーション] タブの 「サイズの自動設定」 がオフで、イメージ フレームが一個もない状況のことです。

関連情報

「文字アニメーションの作成」ダイアログ

文字アニメーションを追加する


アクティブなフレーム

フレームの名前やサムネイルの周りが、点線で囲まれた状態です。現在選択状態のフレーム、または最後にマウスでクリックされたフレームがこの状態になります。

通常、アクティブ状態のフレームは、同時に選択状態になっています。


グローバル パレットを設定する

次の手順でグローバル パレットを設定すれば、どのような環境でもイメージがきちんと表示できることがある程度保証されています。

  1. 属性フレームをダブルクリックします。または属性フレームを選択し、メニューバーから「編集」→「フレームのプロパティ」を選択します。

    「フレームのプロパティ (属性フレーム)」ダイアログが表示されます。

  2. [グローバル パレット] にチェック マークを付け、[編集] ボタンをクリックします。

    「カラーパレットの編集」ダイアログが表示されます。

  3. [選択] ボタンをクリックします。

    「定義済みパレットの選択」ダイアログが表示されます。

  4. [216 色: ウェブ セーフ] を選択します。

ヒント

  • 「アニメーションの最適化」を利用して、「アニメーションの最適化 (パレットの最適化設定 - 1/3)」ダイアログで最適化パレットを生成する設定にしておくと、自動的に作成したアニメーションに最適なグローバル パレットが生成され、画像に適用されます。ある画像を 1 つ選び、その画像のパレットをグローバル パレットにすることもできます。そのためには、次の順番で操作します。
    1. 「フレームのプロパティ (属性フレーム)」ダイアログで [グローバル パレット] のチェック マークを外します。
    2. グローバル パレットにしたい画像の「フレームのプロパティ (イメージ フレーム)」ダイアログで、[ローカル パレットを使用する] のチェック マークを外します。
    3. グローバル パレットの設定が再び有効になり、その画像のパレットがグローバル パレットになります。


各イメージ フレームのローカル パレットを無効にする

以下の手順でフレームのローカル パレットを無効にし、グローバル パレットを使用するように設定します。

  1. イメージ フレームをダブルクリックして、「フレームのプロパティ (イメージ フレーム)」ダイアログを表示させます。
  2. [ローカル パレットを使用する] のチェック マークを外します。

ヒント

  • 「プロパティの一括変換」ダイアログを使うと、選択した複数のフレームのプロパティを一度に変更できるので便利です。ダイアログの使い方は、複数のイメージ フレームのプロパティを一度に変更するを参照してください。

    ここで気をつけなければならないのは、ローカル パレットからグローバル パレットへの変更を行うと、パレットの変換が起こり、そのときに画像の品質が低下する可能性があるということです。できるだけ品質が低下しないようにするためには、次のことに留意する必要があります。

    • グローバル パレットを適切に設定しておく
    • 使われている画像の種類に応じて、「環境設定」ダイアログの [画像] タブにある [パレットの変更時の設定] を適切に設定しておく
  • パレットの変換についての詳細は、パレットを変換するを参照してください。


既存のアニメーションの背景を透明化する

アニメーションを構成している各イメージ フレームの背景色がすべて同じ場合、まとめて背景を変更することができます。この作業の前に「アニメーションの最適化」を行い、色を簡略化しておきます。

  1. イメージ フレームを選択し、メニューバーから「編集」→「フレームのプロパティ」を選択します。

    「フレームのプロパティ (イメージ フレーム)」ダイアログが表示されます。

  2. [透明化する] チェック ボックスにチェック マークを付けます。
  3. スポイト ボタンをクリックします。

    マウス ポインタがスポイトの形になります。

  4. 画像表示ウィンドウに表示された背景部分をクリックします。

    背景が透明化されます。

  5. 「フレームのプロパティ (イメージ フレーム)」ダイアログの [インデックス] に記載された数字を確認し、[閉じる] ボタンでダイアログを閉じます。
  6. メニューバーから「編集」→「すべて選択」を選択します。

    編集中のアニメーション GIF ファイルの全フレームを選択します。

  7. メニューバーから「編集」→「プロパティの一括変換」を選択します。

    「プロパティの一括変換」ダイアログが表示されます。

  8. [透明化する] チェック ボックスにチェック マークを付け、[する] ラジオ ボタンを選択します。
  9. [インデックス] に手順5.で確認した数値を入力し、[OK] ボタンをクリックします。

    すべてのイメージ フレームの背景が透明化されます。

関連情報

複数のイメージ フレームのプロパティを一度に変更する


背景を透明化することはできますか

「フレームのプロパティ (イメージ フレーム)」ダイアログの [透明化する] チェック ボックスにチェック マークを付け、その後選択した一色を透明化することができます。


JPEG ファイルや PNG ファイルをウェブ アニメータで開いて編集したい

ウェブ アニメータで JPEG ファイルや PNG ファイルなどのアニメーションを作ることはできません。画像を挿入することはできますが、保存時に GIF フォーマットに変換されます。画像を挿入する方法は以下を参照してください。


作成したアニメーションを Web ブラウザで表示すると、動作が違います

ウェブ アニメータで作成したアニメーションを、Web ブラウザで表示したとき動作が違う場合の原因については、以下を参照してください。


画像をスクリーンの外に移動しようとしたら、スクリーンが大きくなってしまった

属性フレームをダブルクリックして、「フレームのプロパティ (属性フレーム)」ダイアログを開き、[サイズの自動設定] を確認してください。チェック ボックスにチェック マークが付いている場合は、すべての画像がスクリーンの中に収まるように自動的にスクリーンが拡大または縮小されます。画像をスクリーンからはみ出させたい場合は、スクリーンサイズを手動で設定してください。


透明色を設定したのに、前のフレームの画像が透けて見えません

透明色を設定したイメージ フレーム (A とします) の、前のイメージ フレーム (B とします) のプロパティを確認してください。消去方法が [画像をそのまま残す] 以外になっていると、そのイメージ フレーム (B) はイメージフレーム (A) を表示する前に消去されてしまいます。


画像をスクリーンの外に移動しようとしたら、スクリーンが大きくなってしまった

属性フレームをダブルクリックして、「フレームのプロパティ (属性フレーム)」ダイアログを開いてください。

[サイズの自動設定] にチェック マークが付いているときは、すべての画像がスクリーンの中に収まるように自動的にスクリーンが拡大または縮小されます。したがって、画像をスクリーンから少しはみ出させたい場合には、[サイズの自動設定] のチェック マークを外してから作業してください。

関連情報

「アニメーションの属性」ダイアログ

スクリーンの大きさを設定する


ウェブ アニメータで作成したアニメーションを Web ブラウザで表示したら、動作が異なる

ウェブ アニメータで作成したアニメーションを Web ブラウザで表示したとき、動作が違う場合は次の 2 つの原因が考えられます。

  • 消去方法の問題
  • 表示可能な色数の問題

消去方法の問題

イメージ フレームのプロパティに、[消去方法] という項目があります。消去方法として、

  • [フレームが表示される前の画像に戻す]
  • [指定しない]

のいずれかを使用している場合、表示する Web ブラウザによって表示内容が変わる場合があるので、注意してください。

[フレームが表示される前の画像に戻す] は、高度なアニメーションを作成するために便利な消去方法ですが、Netscape はこれをサポートしていないので、表示内容が変わってしまいます。

[指定しない] の際の動作は、表示アプリケーションに依存しています。

表示可能な色数の問題

ディスプレイの表示色数が 256 色のパソコンでアニメーションを表示した場合、想定していない色が表示されることがあります。これを解決するには、

  • 表示可能な色数を増やす (「画面のプロパティ」で設定します)。詳しくは、利用してるパソコンのマニュアルを参照してください。
  • アニメーションが使用している色数を減らす。具体的には、各イメージ フレームがグローバル パレットを共有するようにします。

関連情報

消去方法を指定する

グローバル パレットを使う


JPEG ファイルや PNG ファイルをウェブ アニメータで開いて編集したい

ウェブ アニメータで直接開いて編集できるのは、 GIF フォーマットのファイルに限られます。その他のフォーマットの画像ファイルを編集することはできません。

アニメーションに GIF ファイル以外の画像を使用するには、次の手順で操作してください。

  1. メニューバーから「ファイル」→「新規作成」を選択します。

    新規のアニメーション ウィンドウが開きます。

  2. メニューバーから「編集」→「画像の挿入」で、目的のファイルを選択するか、目的のファイルをドラッグ アンド ドロップして、アニメーションに挿入します。

関連情報

編集を開始する

画像を挿入する


透明色を設定したのに、前のフレームの画像が透けて見えない

透明色を設定したイメージ フレーム (A とします) の、前のイメージ フレーム (B とします) のプロパティを確認してください。

消去方法が [画像をそのまま残す] 以外になっていると、そのイメージ フレーム (B) はイメージ フレーム (A) を表示するまえに消去されてしまいます。

関連情報

消去方法を指定する


効果の種類 - フェードイン （「文字アニメーションの作成」ダイアログ)

効果の種類 - フェードイン（「文字アニメーションの作成」ダイアログ）

ロゴが透明な状態から、徐々に姿をあらわします。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - ブラインド （「文字アニメーションの作成」ダイアログ)

効果の種類 - ブラインド（「文字アニメーションの作成」ダイアログ）

ブラインドの向こうにロゴがあり、徐々にブラインドが開いてロゴが現れる雰囲気の効果です。

[方向]

ロゴが現れる方向を設定します。

[動きをずらす] チェック ボックス

各領域での、ロゴの現れかたに時間差をつけます。

[分割数] スライダー

ロゴをいくつの領域に分割するか指定します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 点滅 （「文字アニメーションの作成」ダイアログ)

効果の種類 - 点滅（「文字アニメーションの作成」ダイアログ）

ロゴが点滅します。

[速度の変化]スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - ぼかし （「文字アニメーションの作成」ダイアログ)

効果の種類 - ぼかし（「文字アニメーションの作成」ダイアログ）

ぼかしのかかったロゴが、徐々に姿をあらわします。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - クロス （「文字アニメーションの作成」ダイアログ)

効果の種類 - クロス（「文字アニメーションの作成」ダイアログ）

ロゴがキラキラ光ります。

[速度の変化]スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 拡散 （「文字アニメーションの作成」ダイアログ)

効果の種類 - 拡散（「文字アニメーションの作成」ダイアログ）

ロゴがバラバラに飛び散った状態から、合体してもとの状態に戻ります。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 一文字づつ表示 （「文字アニメーションの作成」ダイアログ)

効果の種類 - 一文字づつ表示（「文字アニメーションの作成」ダイアログ）

ロゴが一文字づつ表示されます。作成されるフレーム数は、文字数と同じになります。

[速度の変化]スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 炎 （「文字アニメーションの作成」ダイアログ)

効果の種類 - 炎（「文字アニメーションの作成」ダイアログ）

ロゴが燃えます。

[燃え具合]

ちょぼちょぼ - 少し燃えます。

ボーボー - 激しく燃えます。

燃え広がり - 燃え方がだんだん激しくなります。

[速度の変化]スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

注意

  • 文字に設定してある色は無視されます。

ヒント

  • この効果を使うときには、背景に暗い色を使う方が、炎がきれいに見えます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - グラデーション（「文字アニメーションの作成」ダイアログ）

効果の種類 - グラデーション （「文字アニメーションの作成」ダイアログ)

ロゴをグラデーションで塗りつぶし、そのグラデーションの色を変化させます。

[色]

このグループには 3 つのボタンがあります。左から、（始点色）（終点色）（スペクトル）の設定を行います。

注意 文字に設定してある色は無視されます。ここで設定した色が文字のグラデーションの色として使用されます。

  • （始点色）

    グラデーションの始まりの色を設定します。

  • （終点色）

    グラデーションの終わりの色を設定します。

  • スペクトル （スペクトル）

    このボタンは押すたびにオン/オフが切り替わります。このボタンをオンにすると、スペクトル状の虹がかかったようなグラデーションになります。このボタンがオンになっているときは、始点色の指定のみが有効になります。

[形状]

グラデーションの形を設定します。「円形」「四角形」「放射状」「波型」「線形」から選択することができます。

[波の数]スライダー

このスライダーは [波型]ボタンの右下の三角形をクリックすると表示されます。波型グラデーションの波の数を設定します。

[角度]スライダー

このスライダーは [線形]ボタンの右下の三角形をクリックすると表示されます。線形グラデーションの傾き具合を設定します。

[1 文字ごと]チェック ボックス

1文字ごとにグラデーションがかかります。

[動きを反転]チェック ボックス

色の変化の方向を逆にします。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 文字間隔（「文字アニメーションの作成」ダイアログ）

効果の種類 - 文字間隔 （「文字アニメーションの作成」ダイアログ)

それぞれの文字が離れた状態から、徐々に近づいて通常の状態に戻ります。

注意 「文字の装飾」ダイアログで[行間][字間]が100 に近い値になっていると、効果が現れない場合があります。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - モザイク（「文字アニメーションの作成」ダイアログ）

効果の種類 - モザイク（「文字アニメーションの作成」ダイアログ)

モザイクがかかったロゴが、だんだんとはっきりと姿をあらわします。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - なし （「文字アニメーションの作成」ダイアログ)

効果の種類 - なし（「文字アニメーションの作成」ダイアログ）

作成したロゴをそのままアニメーションに挿入します。設定項目はありません。挿入されるフレーム数は必ず 1 になります。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 飛び去り （「文字アニメーションの作成」ダイアログ)

効果の種類 - 飛び去り（「文字アニメーションの作成」ダイアログ）

ロゴが遠くに飛んでいったり、逆に近づいて来たりします。

[方向]

ロゴが飛ぶ方向を設定します。

[残像] スライダー

ロゴの動きに残像をつけます。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 蜃気楼 （「文字アニメーションの作成」ダイアログ)

効果の種類 - 蜃気楼（「文字アニメーションの作成」ダイアログ）

ロゴが蜃気楼がかかったようにぐにゃぐにゃになった状態から、徐々にもとの状態に変化します。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[1 文字ごと] チェック ボックス

通常は、ロゴ全体をまとめて変形させますが、このチェック ボックスをオンにすると、 1 文字ごとに変形させることができます。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 動き （「文字アニメーションの作成」ダイアログ)

効果の種類 - 動き（「文字アニメーションの作成」ダイアログ）

ロゴがぶるぶるとその場で動きます。

[1 文字ごと] チェック ボックス

通常は、ロゴ全体が一緒に動きますが、このチェック ボックスをオンにすると、 1 文字ごとに動きます。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 回転 （「文字アニメーションの作成」ダイアログ)

効果の種類 - 回転（「文字アニメーションの作成」ダイアログ）

ロゴがぐるぐる回転します。

[種類]

ロゴの回り方を設定します。

2D回転 （2D 回転） - 回るレコードを上から見るような効果が得られます。

3D 横回転 （3D 横回転） - 回転するガソリンスタンドの看板のような効果が得られます。

3D 縦回転 （3D 縦回転） - 文字が前転するような効果が得られます。

[1 文字ごとに回転] チェック ボックス

通常は、ロゴ全体をまとめて回転させますが、このチェック ボックスをオンにすると、 1 文字ごとに回転させることができます。

[逆方法に回転] チェック ボックス

ロゴの回転方向を通常と逆にします。

[拡大しながら回転] チェック ボックス

ロゴが回転しながらだんだん大きくなります。

注意 このオプションは [種類]で 2D 回転 を選択した場合にのみ設定できます。

[回転の中心]

回転の中心軸の場所を設定します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - スクロール （「文字アニメーションの作成」ダイアログ)

効果の種類 - スクロール（「文字アニメーションの作成」ダイアログ）

ロゴがスクリーンの中にスクロールしてきます。

[方向]

スクロールの方向を設定します。

[通過] チェック ボックス

このチェック ボックスをオンにした場合は、ロゴがスクロールして、そのままスクリーンの外に出て行きます。

[文字の出現間隔] スライダー

このスライダーを右に動かすと、文字が一文字づつ間隔をおいてスクロールします。

[残像]スライダー

ロゴの動きに残像をつけます。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - ズーム （「文字アニメーションの作成」ダイアログ)

効果の種類 - ズーム（「文字アニメーションの作成」ダイアログ）

小さなロゴが、だんだん大きくなります。

[種類]

ズームの種類を設定します。

縦方向ズーム （縦方向ズーム） - 横に細長い状態のロゴが縦に伸びて大きくなります。

横方向ズーム （横方向ズーム） - 縦に細長い状態のロゴが横に伸びて大きくなります。

全方向ズーム （全方向ズーム） - 遠くにあるロゴがだんだん近づいてくるような効果が得られます。

[順序を逆にする] チェック ボックス

通常は、小さなロゴがだんだん大きくなりますが、このチェック ボックスをオンにすると、動作が逆になります。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 立ち上がり （「文字アニメーションの作成」ダイアログ)

効果の種類 - 立ち上がり（「文字アニメーションの作成」ダイアログ）

ロゴが横になった状態からだんだん立ち上がってきます。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

[効果の起点]

ロゴがどこから立ち上がってくるか設定します。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - テクスチャ （「文字アニメーションの作成」ダイアログ)

効果の種類 - テクスチャ（「文字アニメーションの作成」ダイアログ）

文字に設定したグラデーション、またはテクスチャが移動します。

注意 文字の色として、単色を指定しているときには、この効果を使用することはできません。

[方向]

テクスチャの移動方向を設定します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - タイル （「文字アニメーションの作成」ダイアログ)

効果の種類 - タイル（「文字アニメーションの作成」ダイアログ）

ロゴがタイル状にバラバラになった状態から合体してもとの姿に戻ります。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - 渦 （「文字アニメーションの作成」ダイアログ)

効果の種類 - 渦（「文字アニメーションの作成」ダイアログ）

ロゴを渦巻き状に変形させます。

[順序を逆にする] チェック ボックス

通常は、効果が加えられた状態から通常の状態に変化しますが、このチェック ボックスをオンにすると、通常の状態から効果が加えられた状態に変化します。

[1 文字ごと] チェック ボックス

通常は、ロゴ全体をまとめて変形させますが、このチェック ボックスをオンにすると、1 文字ごとに変形させることができます。

[渦の強さ] スライダー

変形の度合を設定します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

[渦の中心]

渦の中心を、スクリーンの中心にするか、ロゴの中心にするかを設定します。

関連情報

「文字アニメーションの作成」ダイアログ


効果の種類 - ワイプ （「文字アニメーションの作成」ダイアログ)

効果の種類 - ワイプ（「文字アニメーションの作成」ダイアログ）

ロゴが徐々に現れます。

[方向]

ロゴが現れる方向を設定します。

[速度の変化] スライダー

このスライダーを中央から左右に動かすと、各フレームの表示時間が調整され、だんだん表示が速くなるアニメーションやだんだん表示が遅くなるアニメーションを作成することができます。

関連情報

「文字アニメーションの作成」ダイアログ


ステータスバー

ステータスバーには、イメージ フレームの総数とアニメーションの合計時間が表示されます。


「グラデーションの作成」ダイアログ

このパネルでは、ロゴ、ボタン、フレームで使用するグラデーションを作成します。また作成したグラデーションはウェブアート ファイル (*.mif) として保存できます。

[色の設定] グループ

グラデーションを作成するための色を指定します。左右それぞれに色を指定してください。色が表示されている部分をクリックすると、「色の設定」ダイアログが表示されます。好みの色を指定してください。

ヒント 中央部分の矢印をクリックすることで、グラデーションを作る色を切り替えることができます。たとえば、赤から白へ変化するグラデーションを作ったあとで、矢印をクリックすると、白から赤へ変化するグラデーションに切り替わります。

[形状] グループ

グラデーションの形状を指定します。形状には以下の種類があります。

[円形] ボタン

色が円を描くように変化していきます。

[角形] ボタン

色が四角形の形で、内側から外側へ変化していきます。

[放射状] ボタン

色が放射状に、内側から外側へ変化していきます。

[線形] ボタン

色が直線状に変化していきます。[角度]を指定することで、変化の方向を変えることができます。

[波状] ボタン

水面に広がる波紋を真上から見たようなグラデーションです。[数]を指定することで、波の数を変えることができます。

[線形スペクトル] ボタン

色のスペクトルの帯を作ります。[色の設定]で指定した色から少しずつ、直線状に変化し、最後に元の色に戻ります。[角度]を指定することで、変化の方向を変えることができます。

[角度] フィールド

[形状]の[線形]または[線形スペクトル]を選ぶと、[角度]を設定することができるようになります。0 度から 359 度の整数を指定してください。下に表示されている矢印をドラッグして指定することもできます。

[数] フィールド

[形状]の[波状]を選ぶと、[数]を指定することができるようになります。1 から 10 の整数で指定してください。下にあるスライダーで指定することもできます。右にドラッグすると数値が大きくなります。

[保存] ボタン

このボタンをクリックすると、「グラデーションの保存」ダイアログが表示されます。現在、表示されているグラデーションをウェブアート ファイル (*.mif) に保存することができます。

[読み込み] ボタン

このボタンをクリックすると、「グラデーションの読み込み」ダイアログが表示されます。既存のグラデーションファイルを読み込むことができます。読み込みが完了すると、読み込まれたグラデーションが表示されます。


[形状]タブ (「ボタンの編集」ダイアログ、｢ボタン作成ウィザード｣ダイアログ)

[形状]タブ (「ボタンの編集」ダイアログ、「ボタン作成ウィザード」ダイアログ)

ボタンの形状を指定します。

[一覧] フィールド

形状のサムネイルが表示されます。この中から使用したいものをクリックします。

[全体表示/原寸表示] ボタン (ボタン作成ウィザードの場合のみ)

プレビューの表示モードを切り替えます。原寸表示の場合は、マウスでドラッグして画像を詳しく見ることができます。

ヒント

  • [一覧] フィールドではポップアップ メニューからサムネイルの大きさを変えることができます。

関連情報

[色]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ、各種 「ウィザード」ダイアログ)


[形状]タブ (「フォトフレームの編集」ダイアログ、｢フォトフレーム作成ウィザード｣ダイアログ)

[形状]タブ (「フォトフレームの編集」ダイアログ、「フォトフレーム作成ウィザード」ダイアログ)

フォトフレームの形状を指定します。

[一覧]フィールド

形状のサムネイルが表示されます。この中から使用したいものをクリックします。

[全体表示/原寸表示] ボタン (フォトフレーム作成ウィザードの場合のみ)

プレビューの表示モードを切り替えます。原寸表示の場合は、マウスでドラッグして画像を詳しく見ることができます。

ヒント

  • [一覧]フィールドではポップアップ メニューからサムネイルの大きさを変えることができます。

関連情報

[色]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ、各種 「ウィザード」ダイアログ)


ぼかし

文字をぼかします。

[ぼかしの強さ] スライダー

ぼかしの強さを指定します。スライダーを右に動かすほどぼかしが強くなります。

注意

  • ぼかしの強さが強くなるほど、処理に時間がかかります。


切り抜き

文字部分を切り抜いたように見せます。

[影のぼかしの強さ] スライダー

切り抜いた部分にできる影に加えるぼかしの強さを指定します。スライダーを右に動かすほどぼかしが強くなります。もっとも左に動かすとぼかしなしとなります。

注意 ぼかしの強さが強くなるほど、処理に時間がかかります。

[影の色] ボタン

影の色を指定します。ボタンをクリックすると「色の設定」ダイアログが表示されます。

[影の位置] スライダー

切り抜いた部分に対する影の位置を、横方向、縦方向それぞれに指定します。スライダーを動かすか、フィールドに数値を入力して指定します。


エンボス

文字をふくらませます。

[エンボスの強さ] スライダー

ふくらみの大きさを指定します。スライダーを右に動かすほどふくらみが大きくなります。

注意 ふくらみの大きさが大きくなるほど、処理に時間がかかります。

[エンボスの方向]

ふくらみに当たる光の方向を指定します。矢印が描かれたボタンの一つをクリックします。


炎

文字を燃やします。

[炎の強さ] スライダー

炎の大きさを指定します。スライダーを右に動かすほど炎が大きくなります。

注意 炎の大きさが大きくなるほど、処理に時間がかかります。

[炎の色] ボタン

炎の元になる色を指定します。ボタンをクリックすると「色」ダイアログが表示されます。

ヒント

  • 炎効果を使うときには、背景に暗い色を使う方が、炎がきれいに見えます。
  • 青白いガスバーナーのような炎も効果的です。


動き

指定した方向に動いたようにぼかします。

[動きの強さ] スライダー

動きの強さを指定します。スライダーを右に動かすほど動きが強くなります。

注意 動きの強さが強くなるほど、処理に時間がかかります。

[動きの方向]

動きの方向を指定します。矢印が描かれたボタンの一つをクリックします。


影

文字に影を付けます。文字が背景から浮かんでいるように見えます。

[影のぼかしの強さ] スライダー

影に加えるぼかしの強さを指定します。スライダーを右に動かすほどぼかしが強くなります。もっとも左に動かすとぼかしなしとなります。

注意 ぼかしの強さが強くなるほど、処理に時間がかかります。

[影の色] ボタン

影の色を指定します。色が表示されている部分をクリックすると「色の設定」ダイアログが表示されます。

[影の位置] スライダー

文字に対する影の位置を、横方向、縦方向それぞれに指定します。スライダーを動かすか、フィールドに整数を入力して指定します。

ヒント

  • 影の位置を文字と同じにして、影に加えるぼかしを強くしていくと、文字の周囲に霧がかかったような効果を作り出せます。


囲み

文字の周囲にすきまをあけて、文字と同じ色で囲みます。

[縁の太さ] スライダー

文字と縁取りのすきまの大きさを指定します。スライダーを右に動かすほど、すきまが大きくなります。

注意

  • すきまが大きくなるほど、処理に時間がかかります。


白抜き

文字の周囲を指定された色で縁取りを作り、縁取りだけを表示します。文字の色は表示されません。

[縁の太さ] スライダー

縁の太さを指定します。スライダーを右に動かすほど、縁が太くなります。

注意 縁が太くなるほど、処理に時間がかかります。

[縁の色] ボタン

縁の色を指定します。ボタンをクリックすると「色」ダイアログが表示されます。


反転

文字と周囲の色を反転します。文字が透明になり、文字の周囲全体が文字色で表示されます。


通常

文字の周囲を指定された色で縁取ります。

[縁の太さ] スライダー

縁の太さを指定します。スライダーを右に動かすほど、縁が太くなります。

注意 縁が太くなるほど、処理に時間がかかります。

[縁の色] ボタン

縁の色を指定します。色が表示されている部分をクリックすると「色」ダイアログが表示されます。

ヒント 文字色に比較的薄い色を指定した場合、濃い色で縁取りすると文字がくっきりと見えるようになります。

[文字の透明度] スライダー

縁取られた文字の透明度を指定します。スライダーを動かすか、フィールドに整数を入力して指定します。透明度を高くすると、縁取りの内側で背景の色や画像が透けて見えるようになります。


封蝋 (ふうろう)

文字の周囲に、やわらかい蝋 (ろう) の上に印を押したような縁取りを作ります。

[縁の太さ] スライダー

縁の太さを指定します。スライダーを右に動かすほど、縁が太くなります。

注意 縁が太くなるほど、処理に時間がかかります。

[縁の色] ボタン

縁の色を指定します。色が表示されている部分をクリックすると「色の設定」ダイアログが表示されます。

[文字の透明度] スライダー

縁取られた文字の透明度を指定します。スライダーを動かすか、フィールドに整数を入力して指定します。透明度を高くすると、縁取りの内側で背景の色や画像が透けて見えるようになります。

[縁のふくらみ] ボタン

縁が「ふくらむ」か「へこむ」かを指定します。


[効果]タブ (「ロゴの編集」ダイアログ、各種 ｢ウィザード｣ダイアログ)

[効果]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)

ここでは、ロゴの効果を指定します。[種類]に表示されているサムネイルの中から、使いたい文字効果を一つ選択します。[なし]を選択すると、効果を加えません。

文字効果には以下のものがあります。

  • ぼかし
  • 動き
  • 影
  • 切り抜き
  • エンボス
  • 炎

[全体表示/原寸表示] ボタン (ロゴ作成ウィザードの場合のみ)

プレビューの表示モードを切り替えます。原寸表示の場合は、マウスでドラッグして画像を詳しく見ることができます。

関連情報

[文字]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)

[色]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ、各種 「ウィザード」ダイアログ)

[縁取り]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)


[縁取り]タブ (「ロゴの編集」ダイアログ、各種 ｢ウィザード｣ダイアログ)

[縁取り]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)

ここでは、ロゴの縁取りを指定します。[種類]に表示されているサムネイルの中から、作りたい縁取りをひとつ選択します。[なし]を選択すると、縁取りを作りません。

縁取りには以下のものがあります。

  • 通常
  • 封蝋 (ふうろう)
  • 白抜き
  • 囲み
  • 反転

[全体表示/原寸表示] ボタン (ロゴ作成ウィザードの場合のみ)

プレビューの表示モードを切り替えます。原寸表示の場合は、マウスでドラッグして画像を詳しく見ることができます。

関連情報

[文字]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)

[色]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ、各種 「ウィザード」ダイアログ)

[効果]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)


[文字]タブ (「ロゴの編集」ダイアログ、各種｢ウィザード｣ダイアログ)

[文字]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)

ここでは、ロゴを作るための文字、フォント情報などを指定します。

[文字] フィールド

ロゴにしたい文字を入力します。複数行の文字を入力するには、行の終わりで[Enter]キーを押します。

[フォント] グループ

[フォント名] ボックス、[サイズ] フィールド、[行間] フィールド、[字間] フィールドを指定します。

行間は、複数行の文字が入力されている場合の行と行の間隔を指定します。

また、字間は文字と文字の間隔を指定します。

ヒント 行間、字間として、負の値を指定することもできます。この場合、それぞれ行間、字間が標準よりも小さくなります。指定によっては、文字や行を重ね合わせることもできます。

注意

  • 入力した文字が文字化けを起こす場合には、[フォント名]ボックスで、日本語の表示できるフォントを選択してください。

[フォントサイズ自動] チェック ボックス (ウェブアート デザイナーのみ)

通常、ロゴのサイズは、指定したフォントのサイズと、入力された文字数によって決まります。フォントサイズ自動をオンにすると、ロゴのサイズに合うようにフォントのサイズが調整されます。

[スタイル] グループ

フォントのスタイルを指定します。[アンチエイリアス] チェック ボックスを指定すると文字の輪郭がなめらかになります。

注意

  • 作成したロゴの一部が欠ける場合には、[アンチエイリアス] チェック ボックスの指定をはずしてください。

[行揃え] グループ

複数行の文字が入力された場合に、文字の揃え方を指定します。

[全体表示/原寸表示] ボタン (ロゴ作成ウィザードの場合のみ)

プレビューの表示モードを切り替えます。原寸表示の場合は、マウスでドラッグして画像を詳しく見ることができます。

[方向] グループ

文字の向きを指定します。初期設定の値は横書きです。

[縦書き] チェック ボックス

オンにすると、文字の向きが縦書きになります。

ヒント

  • [縦書き] チェック ボックスは文字列の方向を縦書きにするものです。[フォント名] ボックスで先頭に＠マークの付いた日本語フォントを選択すると、縦書きの日本語ロゴを作成することができます。

関連情報

[色]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ、各種 「ウィザード」ダイアログ)

[縁取り]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)

[効果]タブ (「ロゴの編集」ダイアログ、各種 「ウィザード」ダイアログ)


「オブジェクトの選択」ダイアログ

キャンバス上のオブジェクトを指定します。

[一覧]

オブジェクトの選択候補一覧を表示します。

[オプション] グループ

一覧表示されるオブジェクトを切り替えます。

[オブジェクトごとに表示] ラジオ ボタン

オブジェクトを 1 つ 1 つ表示します。

[重なっているものをまとめて表示] ラジオ ボタン

キャンバス上で重なっているオブジェクトをまとめて 1 つにして表示します。

[近くにあるものをまとめて表示]ラジオ ボタン

キャンバス上で近くにまとまっているオブジェクトを 1 つにして表示します。

[範囲] スライダー

[近くにあるものをまとめて表示] ラジオ ボタンを選択した場合に、オブジェクト間の距離を指定します。範囲を広くすると、オブジェクトが離れていても 1 つにまとめられます。


プレビュー ウィンドウ

画像を全体表示または原寸表示します。

[全体表示/原寸表示]ボタン

全体表示/原寸表示の切り替えは、[全体表示/原寸表示]ボタンをクリックします。

[全体表示/原寸表示]ボタンは、現在の表示モードをあらわします。

初期設定の値は全体表示です。

原寸表示
全体表示

原寸表示の場合は、マウスでドラッグして画像を詳しく見ることができます。


[色]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ、各種｢ウィザード｣ダイアログ)

[色]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ、各種「ウィザード」ダイアログ)

オブジェクトやキャンバスの色を指定します。

[種類]

色は[単色] ボタン、[グラデーション] ボタン、[テクスチャ] ボタンの 3 つに分かれています。ボタンの中からひとつを選択すると、[一覧]に表示されるサムネイルがそれぞれグループに対応するものに切り替わります。

[一覧]

[種類]で選択したものに対応して、それぞれのサムネイルが表示されています。この中から使用したいものをクリックします。

[その他]ボタン

[種類]で[単色] ボタンを選択した場合、このボタンをクリックすると「色の設定」ダイアログが表示されます。

[グラデーション] ボタンを選択した場合は、「グラデーションの作成」ダイアログが表示されます。

[テクスチャ] ボタンを選択した場合は、「開く」ダイアログが表示されます。

[全体表示/原寸表示] ボタン (作成ウィザードの場合のみ)

プレビューの表示モードを切り替えます。原寸表示の場合は、マウスでドラッグして画像を詳しく見ることができます。

ヒント

  • [一覧]フィールドに[グラデーション]または[テクスチャ]が表示されている場合は、ポップアップ メニューからサムネイルの大きさを変えることができます。
  • 「図形の編集」ダイアログでは、「線の色」タブ、または「塗り潰しの色」タブです。


[情報]タブ (各種オブジェクトの編集ダイアログ、｢キャンバスの設定｣ダイアログ)

[情報]タブ (各種オブジェクトの編集ダイアログ、「キャンバスの設定」ダイアログ)

ここでは、オブジェクトの位置、大きさ、透明度などを指定します。

[オブジェクトの種類]

オブジェクトの種類を表示します。

[位置とサイズ] グループ

オブジェクトのキャンバス上での位置と大きさを、オブジェクトの左上隅の座標で指定します。

[X 座標] フィールド

数値を大きくすると、オブジェクトが右に移動します。0 がキャンバスの左隅を表します。

[Y 座標] フィールド

数値を大きくすると、オブジェクトが下に移動します。0 がキャンバスの上端を表します。

[幅] フィールド

オブジェクトの横幅を指定します。

[高さ] フィールド

オブジェクトの高さを指定します。

[縦横比保持] チェック ボックス

[幅]フィールドまたは[高さ]フィールドを変更するときに、自動的にもう一方の値を変更前の縦横比を保持した値に設定します。

注意 X座標やY座標フィールドに負の値や、キャンバスの横幅よりも大きな値を指定すると、オブジェクトがキャンバスからはみ出てしまい、見えなくなることがあります。

[透明度] グループ

オブジェクトの透明度を指定します。スライダーをドラッグするか、フィールドに整数を入力して指定します。透明度を高くすると、キャンバスの背景や後ろのオブジェクトが透けて見えるようになります。


LOGO_EFFECT_PARAM_POS1

スライダーを左に動かすと、影が文字に対して左、または上にできます。右に動かすと、文字に対して右、または下にできます。


LOGO_EFFECT_PARAM_POS2

数値の範囲は横方向、縦方向ともに -10 ～ 10 です。負の数を指定すると、影が文字に対して左または上にできます。正の数を指定すると、右または下にできます。0 を指定すると、文字と同じ位置にできます。


LOGO_EFFECT_SHADOW_HINT

横、縦ともに 0 を指定します。スライダーで指定する場合は、スライダーを中央に動かします。


LOGO_OUTLINE_PARAM_TRANS2

透明度の範囲は 0 ～ 100 です。数値が大きくなるほど透明度は高くなります。0 では完全に不透明に、100 では完全に透明になります。