ウェブアニメーターを使って動きのある画像を挿入する方法を紹介します
「ウェブ アニメーター」 は、ホームページ・ビルダーに付属しているアニメーション GIF 作成プログラムです。アニメーション GIF とは、GIF 形式の画像ファイルの一種で、いくつかの画像を組み合わせてパラパラ漫画のように動かすものです。アニメーション GIF は普通の GIF 画像と同じようにページに貼り付けることができます。
「ウェブ アニメーター」を使うと、次のことができます (画像は実際には、左から右へ順番に書き換えられていきます)。
手持ちの画像を組み合わせてパラパラ漫画のようなアニメーションを作成する
1つの画像にアニメーション効果を加えてインパクトのあるアニメーションを作成する
指定した文字列にアニメーション効果を加えて文字アニメーションを作成する
作成したアニメーション GIF は、Web ブラウザーでプラグインなどを使わずに見ることができます。アニメーション GIF は、Web ページで動画を見せるための、一番手軽で確実な方法です。
当サイトのトップページに挿入されているアニメーションです。
ホームページに貼り付けられたアニメーションは、Web ブラウザーでそのページを開くとすぐにアニメーションが動き出します。
ウェブ アニメーターで作成されるアニメーションは、「フレーム」という要素の集まりです。フレームは、フレーム表示ウィンドウに表示されます。フレームをダブルクリックするとダイアログが表示され、そこでフレームのプロパティを設定できます。
フレームには、「属性フレーム」、「イメージ フレーム」、「コメント フレーム」の 3 種類があります。
フレームの状態には、次の 3 種類があります。フレームの状態は、マウスやキーボードの操作で切り替えることができます。
アニメーション ウィザードを使わずにアニメーションを新規に作成するための、一般的な流れを説明します。
アニメーションを新規に作成する前に、環境設定の設定内容をチェックします。メニューバーから 「ファイル」 → 「環境設定」 で 「環境設定」 ダイアログを表示させ、[画像] タブをクリックして、以下を設定します。
グローバル パレットとローカル パレット
グローバル パレット
ローカル パレット
ローカル パレット と グローバル パレットの切り替えや、パレットの編集をした場合に、元の画像に新しいパレットを当てはめます。これを「パレットの変換」と呼びます。
ウェブ アニメーター では、パレットの変換の方法として、「ディザあり」と「ディザなし」という 2種類の変換方法を選択することができます。
一般に、
に適しています。
何度も繰り返して画像のパレットを変換すると、画像の品質が低下します。パレットの編集は、必要なときだけにとどめるべきです。一般に、画像の挿入はローカル パレットを使う設定にして作業を進めていきます。最後にファイルのサイズを小さくしたいときに、グローバル パレットに切り替えるのが良いでしょう。
「アニメーションの最適化」を利用し、「アニメーションの最適化 (パレットの最適化設定 - 1/3)」ダイアログで最適化パレットを生成する設定にしておくと、自動的に作成したアニメーションに最適なグローバル パレットが生成され、画像に適用されます。
メニューバーから 「ファイル」 → 「新規作成」 で新規のアニメーション作成を開始したら、まずアニメーションの背景色を設定します。背景色は、画像の挿入時の減色やアニメーション効果、文字アニメーションの作成で重要な役割を持ちます。通常は、アニメーションを貼り付けるページの背景色をアニメーションの背景色にします。次の手順で背景色を設定します。
① 属性フレームをダブルクリックする。
② グローバル パレットを設定します。 [グローバル パレット] にチェック マークが付いていない場合はチェック マークを付けます。[編集] ボタンをクリックし、グローバル パレットに背景色にしたい色があるか確認します。ない場合は、グローバル パレットを編集します。
③ [背景色] ボタンをクリックし、背景色を設定します。
ページ背景情報の取得
ホームページ・ビルダーでページを編集しているときは、メニューバーから 「編集」 → 「ページ背景情報の取得」 で背景色を取得することもできます。
アニメーションのコマになる画像を、メニューバーから 「編集」 → 「画像の挿入」 やドラッグ アンド ドロップを使ってアニメーションに挿入します。
挿入された画像の数だけ、イメージ フレームが生成されます。イメージ フレームをドラッグ アンド ドロップして、適当な順番に入れ替えます。
イメージ フレームを一つ一つクリックし、画像表示ウィンドウを見ながらフレームのプロパティを設定します。
フレームをダブルクリックすると表示される、「フレームのプロパティ (イメージ フレーム)」 ダイアログを主に使用します。
画像が表示される場所、大きさが思っていたところと違う
画像表示ウィンドウ上で画像をクリックすると、ハンドルマークが表示されます。ハンドルマークをドラッグして、画像の場所、大きさを調整します。ダイアログで設定する場合は、[X座標]、[Y座標]、[幅]、[高さ] を調整します。
前のフレームと画像を重ねたい (重ねたくない)
[消去方法] を設定します。たとえば、あるフレーム (B) の画像を、前のフレーム (A) の画像と重ねたいときには、フレーム (A) のプロパティで、[消去方法] を [画像をそのまま残す] に設定します。
画像の一部分を透明にしたい
[透明化する] にチェック マークを付けた後、スポイト ボタンをクリックして、画像の透明にしたい部分をクリックします。
複数のフレームのプロパティを一括して設定するには、「プロパティの一括変換」 ダイアログを使います。
必要に応じて、フレームにアニメーション効果や文字アニメーションを追加します。効果を加えたいフレームをクリックし、メニューバーから 「効果」 から 「アニメーション効果の追加」 「文字アニメーション効果の追加」 を選択して、効果を加えます。
再生ツールバーを使ってアニメーションをプレビューし、全体の流れを見ながら各フレームの表示時間を設定します。設定には、「フレームのプロパティ (イメージ フレーム)」ダイアログを使用します。
インターネットで公開するファイルは、できるだけファイル サイズが小さいほうが好都合です。一通りアニメーションが完成したら、アニメーションを最適化しましょう。
最後に、アニメーションをファイルに保存します。
メニューバーからの 「ファイル」 → 「上書き保存」 を選択し、保存場所とファイル名を指定して保存します。
アニメーションの再編集のためには、最適化する前のファイルの方が便利です。捨てずにこちらも別のファイルに保存しておきましょう。
ホームページ・ビルダーで編集中のページに直接アニメーションを貼り付けたいときには、メニューバーから 「ファイル」 → 「送る」 → 「ホームページ・ビルダーへ」 を選択してください。
アニメーション ウィザードを使って、文字をアニメーションにすることができます。実際には、指定した文字に効果を加えた複数の画像からなる 1つの GIF ファイルを作成することになります。
アニメーション ウィザードを使わずに、画像に文字アニメーションを追加することもできます。
アニメーション ウィザードを使わずに、画像に文字アニメーションを追加することもできます。 文字アニメーションを編集するを参照する。
① メニューバーから 「ファイル」 → 「アニメーション ウィザード」 を選択します。
② [文字アニメーションを使用してアニメーションを作成] を選択し、[次へ] ボタンをクリックします。
③ 文字アニメーションの背景を設定します。
④ [次へ] ボタンをクリックします。
⑤ 文字を入力します。必要に応じて、フォント名、文字のサイズ、色なども指定します。
⑥ 効果の種類を選択します。
⑦ 必要に応じて [効果の設定] グループのオプションを設定し、[OK] ボタンをクリックします。(とりあえず効果を試してみたい場合は、そのまま [OK] ボタンをクリックします。)
⑧ ボタンをクリックすると、プレビューを見ることができます。 ボタンをクリックすると、プレビューが停止します。
⑨ このアニメーションを作成するには、[完了] ボタンをクリックします。
1つのアニメーション ウィンドウは 1つのアニメーション GIF ファイルに対応しています。
⑩ メニューバーから 「ファイル」 → 「名前を付けて保存」 を選択します。
⑪ アニメーション GIF ファイルの保存場所とファイル名を指定して、[保存] ボタンをクリックします。
アニメーション ファイル サイズの最適化時の注意
保存する前に、メニューバーから 「ファイル」 → 「簡単最適化」 (または 「アニメーションの最適化」) を選択すると、アニメーション GIF ファイルのサイズを小さくすることができます。ただし、最適化するとフレーム (アニメーションの各コマ) の一部が壊れて表示され、再編集が難しくなるので注意してください。
途中で[戻る]、[キャンセル] ボタンをクリックすると・・・
操作の途中で効果の種類または設定を変更したい場合は、[戻る] ボタンをクリックすると、手順 3. に戻るので、前述の手順を繰り返します。文字アニメーションの作成を終了したい場合は、[キャンセル] ボタンをクリックします。
文字アニメーション機能を使うと、ウェブアート デザイナーで作成できるようなロゴを簡単にアニメーションにすることができます。
① イメージ フレームを選択し、メニューバーから 「効果」 → 「文字アニメーションの追加」 を選択します。
イメージ フレームがない場合の文字アニメーションの追加
イメージ フレームがなくても、メニューバーから 「効果」 → 「文字アニメーションの追加」 を選択することができます。
このとき、属性フレームの [サイズの自動設定] にチェック マークが付いていないと 「文字アニメーションのサイズ指定」 ダイアログが表示されるので、アニメーションの縦横のサイズを指定してください。
② [文字] フィールドにアニメーションにしたいロゴの文字を入力します。
③ 文字アニメーションのプレビュー ウィンドウで、ハンドルマークを操作してロゴの大きさや場所を調整します。
④ [色] ボタンをクリックして、ロゴの色を変更します。[文字の装飾] ボタンをクリックすると、文字に縁取りや効果を設定し、さらに凝ったロゴにすることができます。
⑤ [効果の種類] から、ロゴに加える効果を選択します。 ボタンをクリックすると、効果のプレビューを行うことができます。[効果の設定] で効果のオプションを設定し、お好みのアニメーションに調整してください。
⑥ [OK] ボタンをクリックすると、指定した文字アニメーションが追加されます。
追加された文字アニメーションのロゴを再度設定しなおすことはできません
[OK] ボタンをクリックして追加された文字アニメーションのロゴを再度設定しなおすことはできません。
追加された [効果] フレームを全て削除して、最初から作り直してください。
以前に作成したアニメーションを再編集するときは次の方法にて開始します。
① メニューバーから 「ファイル」 → 「開く」 を選択します。
② 編集したい GIF ファイル (拡張子が .gif のファイル) を選択し、[開く] ボタンをクリックします。
GIF 以外のフォーマットの画像をアニメーションに使用するとき
GIF 以外のフォーマットの画像をアニメーションに使用するときは、新しいアニメーションを作成して、画像をアニメーションに挿入してください。