お遍路アニメ動作確認

お遍路アニメHTMLファイル作成

動作確認をしていきます。
あらかじめ、フォルダの例として
C:\ohenro\css
C:\ohenro\img
を作成しておきます。
ここからはTeraPadをエディタとして使用することを前提に説明していきます。
TeraPadを起動して「表示(V)」を開いて「オプション(O)」をクリックしてください。
オプション画面が開いたら「文字コ－ド」タプをクリックして下記のようになっていることを確認し［OK］をクリックします。

次に、左サイドナビ｢動くアニメ－ション作成｣の中の
お遍路アニメHTMLファイル
を画面に表示させておき、ファイル名のohenro.html部分を除き、
<!doctype html> 以下をすべてコピ－します。
既に開いているTeraPadのなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、ohenro
「ファイルの種類(T)」は、htmlファイル(*.html)
とし、あらかじめ作成しておいたフォルダ
C:\ohenro
に保存します。
これで、ohenro.html の作成は完了です。

お遍路アニメCSSファイル作成

左サイドナビ｢お遍路アニメ－ション作成｣の中の
お遍路アニメCSSファイル
を画面に表示させておき、ファイル名のohenro.css部分を除き、@charset "utf-8"; 以下をすべてコピ－します。
再度開いたTeraPadのなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、ohenro
「ファイルの種類(T)」は、cssファイル(*.css)
とし、あらかじめ作成しておいたフォルダ
C:\ohenro\css
に保存します。
これで、ohenro.css の作成は完了です。

お遍路アニメIMGファイル作成

IMGファイルを作成します。作成するといっても、ノナカシ君と四国の地図のIMGファイル２個をただダウンロ－ドするだけです。
IMGファイルダウンロ－ド
をクリックし、一旦保存し必ず解凍してから、gifファイルとjpgファイルを
C:\ohenro\img
に保存してください。
これで、C:\ohenro\img の作成は完了です。

ブラウザでお遍路アニメを確認

サンプルで確認

まず始めにシンプルアニメがどのように動くかのサンプルを確認しておきましょう。
左サイドナビ｢お遍路アニメ－ション作成｣の中の｢お遍路アニメ表示｣をクリックするとサンプル表示されます。
これと同じように自分の作成したファイルが動くか確認していきます。

作成したファイル確認

IEで見ることを前提に説明します。
まず、エクスプロ－ラを起動します。
C:\ohenro\ohenro.html
を右クリックし、
「プログラムから開く」→｢Internet Explorer｣
をクリックして、ohenro.html を起動します。
起動したら、ノナカシ君が動いていることを確認しましょう。
もし、Internet Explorerの他にもブラウザがインスト－ルされているなら、 Mozilla Firefox 、Google Chrome、Opera でも動くことを確認しましょう。

ノナカシ隊が行くを確認

お遍路アニメを応用した｢ノナカシ隊が行くアニメ｣もどのように動くかも確認してください。
MoveImageに戻り、左サイドナビ｢お遍路アニメ－ション作成｣の中の｢ノナカシ隊が行く｣をクリックすると見ることができます。