ホームページビルダー・グレート初心者講座

　アニメーションを使ってみましょう

アニメーションは画面切り替えに特殊効果を使うなどができます。　複数の画像のスライドショーなどに使え、切り替える処理もズームやワイプ、押し出しなど色んな処理を使いながら切り替えていく事ができます。
アニメーションのサンプルアニメーションを使うと、複数の画像を切り替える際にとトランジションという切り替え時の特殊効果を使った切り替えなどができます。アニメーションのサンプル　作成手順１．　アニメーション効果を加える画像を用意アニメーションさせる画像を用意するのですが、HotMedia 作成ウィザードを利用して新規作成する場合、特に注意する点はないですが、HotMediaクリエイターを利用して作成する場合、アニメーションさせるフレームは同じサイズでないといけないので、画像を用意する場合も同じサイズにしておく必要があります。２．　ＨｏｔＭｅｄｉａウィザードを使うここでは簡単なＨｏｔＭｅｄｉａウィザードを使ってやってみます。まず、マウスで挿入したい部分をクリックし、カーソルを表示させます。その後、メニューバーの「挿入」 → 「ＨｏｔＭｅｄｉａアプレット」 → 「アニメーション」を選択します。３．　効果を加える画像を選択次にウィザードに従って効果を加える画像を選択します。「追加」を押して次々と画像を選択していきますが、画像の表示される順番は左から右へ向かって表示されていきますので、ここで順番を整えておきます。他にも色々と設定項目がありますが、後で変更していけるので、とりあえずは完了してプレビューで見てみましょう。４．　ＨｏｔＭｅｄｉａクリエイターで修正アニメーション効果を入れたアプレットの上で右クリックすると、「ＨｏｔＭｅｄｉａクリエイターで編集」という項目がありますので選択します。このソフトで修正などをしていくのですが、初めからこのソフトで作ってしまっても結構です。また、サンプルでは初めから自動で切り替わっていきますが、初めの時点では静止している状態にする事も可能です。５．　ＨｏｔＭｅｄｉａクリエイターの編集とプレビュー動きを編集するときは、プロパティから設定できます。　また、これにはプレビュー機能がついているので、いちいちページ編集画面に戻る事なくソフト上で効果を見る事ができます。プレビューをするには「ファイル」 → 「プレビュー」で見えます。効果は設定を変えながらプレビューで確認するのが分かりやすいと思いますので、色々設定を変えて試してみましょう。　アニメーションの一部にリンクを設定するサンプルで確認アニメーション画像の一部にリンクを設定する事ができます。手順、サンプル共に「パノラマ」と同じなので、サンプルはそちらを参照してみて下さい。リンクの設定これをするには、挿入したアプレットを右クリックし、ＨｏｔＭｅｄｉａクリエイターを選択し、表示された画像の中からリンクを設定したい画像をダブルクリックします。するとリンクに設定する所を指定する画面になりますので、リンクとして設定したい部分をドラッグして指定します。　また、一度設定したリンクなどは、四角い赤枠や四角い緑枠（音声ファイル）などで表示され、それをダブルクリックする事で修正する事ができます。次にマウスクリックの部分の「編集」を選択し、「外部リンク」で、リンクしたいページの「URL」と「ターゲット」を指定します。ターゲットで、同一ページにリンク先を表示する時は「　_self　」と入れます。　その後、「OK」すればリンクの設定は完了です。リンクを設定したらプレビューで確認し、保存しましょう。　マウスオーバーで音を鳴らすサンプルで確認アニメーション中の画像のの一部にマウスが上に来た時に音を鳴らす設定をする事ができます。手順、サンプル共に「パノラマ」と同じなので、サンプルはそちらを参照してみて下さい。サンプルの「初心者の私が．．」の「初心者」文字の上にマウスを乗せてみて下さい。　「ブピッ」と変な音が出たと思います．．．１．　サウンドファイルを用意するＨｏｔＭｅｄｉａで利用できるサウンドファイルは、ファイルのサイズが64KB未満のAU、WAV、AIF、AIFF、AVI、MOVファイルで、ファイルの形式が8 kHz、8 ビット１チャネル（モノラルと言う事です）の CCITT mu-Lawでコーディングされたファイルとされているので、これに変換する必要があります。２．　サウンドファイルの形式変換サウンドファイルはWAV形式ならWindows標準の「サウンドレコーダー」で変換する事ができます。　変換したいサウンドファイルを右クリックし「記録」を選択、その後、「ファイル」 → 「プロパティ」から「変換」を選択し、上記の設定に合わせ「OK」すれば変換されます。変換したファイルは保存しておきます。３．　アニメーションの画像に音を設定作ったアニメーション画像を右クリックし、「HotMedia クリエイター」を選択し、リンクの時と同じように音を設定したい対象の画像をダブルクリックします。音を鳴らしたい部分をドラッグし、選択します。　すると、リンクのときと同じ画面が出てきますので、今度はマウスオーバーアクションの「編集」をクリックし、サウンド再生タブを選択し、その中の「サウンドファイル」に用意したサウンドファイルを選び、設定します。　サウンドファイルはページが保存されているフォルダと別のフォルダに保存されていても、ページ保存時メッセージに合わせて選択していけばページが保存されているフォルダに自動的に保存されるのでOKです。設定が完了したらプレビューで音がなるかを確認してみましょう！　アプレット同士をリンクさせるサンプルで確認手順、サンプル共に「パノラマ」と同じなので、サンプルはそちらを参照してみて下さい。ページにリンクさせたり、サウンドファイルを再生したりする他にも、アプレット同士をリンクさせる事もできます。サンプルのアヒルの吹き出し「えへっ♪」をクリックしてみて下さい。これはアニメーションのアプレットにリンクするようになっています。これを使えば、色んなアプレット同士をリンクさせ、より効果的なアプレットを作成することができます。リンクを設定作ったアプレットを右クリックし、「 HotMedia クリエイター」を選択し、リンクの時と同じように作成しておいたアニメーションの対象画像をダブルクリックします。リンクを設定したい部分をドラッグし、選択します。　設定画面が出てきますのでマウスクリックの「編集」を選択し、「外部リンク」で「HotMediaファイルの置き換え」を選択、リンクさせたいほかのアプレットを選択して完了です。保存してプレビューで確認してみましょう。 ※ 注意事項リンクさせるアプレット同士は同じフォルダに置く必要があります。動作しない時やアプレットの画面が灰色に表示される時は置かれているフォルダを確認してみましょう！また、切り替えるフレーム（切り替える一つずつの画面）　は同じ　　サイズである必要がある所にも注意して作成していきましょう。動作しない時などはこれらを確認してみましょう。