動きのあるページを作る                                 
文字アニメーションの作成
ウェブアニメータを使い,文字をアニメーションにしてみましょう。

1.メニューバーから「ツール」→「ウェブアニメータの起動」を選択する。


       ↓

2.「アニメーションウィザード」を選択する。


       ↓ 
3.「アニメーションウィザード」(アニメーションの選択)ダイアログが表示されるので「文字アニメーションを使用してアニメーションを作成」を選択し,「次へ」をクリックする。


       ↓ 
4.「アニメーションウィザード」(アニメーション・背景の指定)ダイアログが表示されるのでここでは「背景を指定しない」を選択し,「次へ」をクリックする。


       ↓ 
5.「文字アニメーションの作成」ダイアログが表示されるので,アニメーションにしたい文字を「文字」ボックスに入力し,必要に応じて,フォント,文字サイズ,文字の色などを指定する。


       ↓ 
6.ダイアログの右側で効果の種類を選択し,必要に応じて効果の設定を行う。


※ここではグラデーションを選択しました。
       ↓ 
7.できあがったら,「OK」をクリックする。


       ↓ 
8.「アニメーションウィザード」(アニメーションのプレビュー)ダイアログに作成したアニメーションのプレビューが表示されるので,良ければ「完了」をクリックする。効果の種類やアニメーションの速度などを変更したい場合は,「戻る」をクリックして手順「4」に戻って修正する。


       ↓ 

9.「newimage○○」というタイトルのアニメーションウィンドウが表示されアニメーションを構成する複数の画像が表示されるので,メニューバーから「ファイル」→「名前を付けて保存」を選択する。

 
      ↓ 

10.「名前を付けて保存」ダイアログが表示されるので,アニメーションGIFファイルを保存する場所とファイル名を指定して,「保存」をクリックする。


       ↓ 

11.メニューバーから「ファイル」→「アプリケーションの終了」を選択する。


       ↓ 
12.作ったアニメーションをホームページに挿入するので新しいページを開く。
※ここでは「どこでも配置モード」のページを開きました。
       ↓ 
13.ナビメニューから「画像ファイルの挿入」→「ファイルから」をクリックする。


       ↓ 
14.作成したアニメーションGIFファイル「cooking1.gif」をを選択し,「開く」をクリックする。


       ↓ 
15.アニメーションが挿入されるので,画像をドラッグして適当な位置に配置する。


       ↓ 
16.ページを保存する。


       ↓
17.「プレビュー」タブでアニメーションの動きを確認する。
      ↓ 
18.確認が終わったら「ページ編集」タブに戻しておく。

ロールオーバー効果
画像の上にマウスポインタをおくと別の画像に置き換えられる効果を「ロールオーバー効果」といいます。ロールオーバー効果を使って,より変化のあるホームページにしましょう。

1.ページ上で何も選択されていない状態にする。
       ↓
2.ナビメニューから「ロールオーバー効果画像の挿入」をクリックする。


       ↓
3.まず通常時の画像を指定するので,ここでは「素材集から」をクリックする。


       ↓
4.「素材集から開く」ダイアログが表示されるので,使いたい画像(アニメーションを除く)を選んで「開く」をクリックする。


       ↓
5.選択した画像がダイアログに表示されるので,「次へ」をクリックする。


     ↓
6.「画像のロールオーバー効果ウィザード」(マウスポインタが上にきたときの画像の指定)ダイアログが表示されるので,マウスポインタが上にきたときの画像を指定する。


※2通りの指定の方法がありますが,ここでは「通常時の画像に効果を加えたものを使用する」を選択し,「効果の選択」をクリックします。
       ↓
7.画像に加えたい効果を選択する。


       ↓
8.「OK」をクリックする。


       ↓
9.手順「6」のダイアログに戻るので,「次へ」をクリックする。


       ↓
10.「画面ロールオーバー効果ウィザード」(その他の設定)ダイアログが表示されるので,作成するロールオーバー画像にリンクを設定する。


      ↓  
11.通常時の画像とマウスポインタが上にきたときの画像を入れ替えたい場合は,「入れ替え」をクリックする。
       ↓
12.左右の画像が入れ替わるので,「次へ」をクリックする。


       ↓
13.「画面ロールオーバー効果ウィザード」(他の場所の画像と交換)ダイアログが表示されるので,ここではそのまま「完了」をクリックする。


       ↓
14.ロールオーバー画像がページに挿入されるので画像をドラッグして適当な場所に配置する。



       ↓


       ↓
15.ページを上書き保存する。
       ↓

16.「プレビュー」タブで効果を確認し,「ページ編集」タブに戻しておく。



HotMediaのアニメーション画像の挿入
「HotMediaクリエータ」を使うと,マルチメディアコンタンツを作成し,JAVAアプレットとしてページに貼り付けることができます。

1.ナビメニューから「その他の挿入」→「HotMediaアニメーション」を選択する。
     

       ↓
2.「HotMediaアニメーション作成ウィザード」ダイアログが表示されるので,「次へ」をクリックする。


       ↓
3.「HotMediaアニメーション作成ウィザード」(画像ファイル選択)ダイアログが表示されるので,「追加」をクリックする。


       ↓
4.「ファイルを開く」ダイアログが表示されるので,HotMediaで使用する画像ファイルを選択し,「開く」をクリックする。


       ↓
5.選択した画像が手順「3」のダイアログに並べて表示されるので,「次へ」をクリックする。


       ↓
6.「ホットリンク設定」ダイアログが表示されるので,ここではそのまま「次へ」をクリックする。


       ↓
7.「トラジション設定」ダイアログが表示されるので,1つの画像から次の画像へ切り替える際にどのような効果を与えるかを指定し,「次へ」をクリックする。



       ↓
8.「表示設定」ダイアログが表示される。このアニメーションを表示するサイズ,自動再生などを指定できるが,ここではこのまま「完了」をクリックする。


       ↓
9イラストがページに挿入されるので,HotMediaのイラストをページの適当な場所にドラッグする。


       ↓
10「プレビュー」タブでHotMediaの動きを確認し,確認が終わったら「ページ編集」タブに戻しておく。



       ↓
11.ページを上書き保存する。


ここで作ったページを見る←クリック