３次ベジェ曲線アニメクラス
３次ベジェ曲線アニメクラス動作確認
３次ベジェ曲線アニメクラスの動作確認をするには、直接レンタルサ－バにあげるか、XAMPP を利用します。
通常はまずは XAMPP で確認します。
XAMPP がインスト－ルされていない場合は、Move Image に戻り、左サイドナビ｢円運動アニメ－ション作成｣の中の
｢PHP を始める準備｣
を参照して、XAMPP をインスト－ルしてください。
３次ベジェ曲線アニメクラススタ－トファイル保存
動作確認をしていきます。
あらかじめ、フォルダの例として
C:\xampp\htdocs\bez_cla\css
C:\xampp\htdocs\bez_cla\img
C:\xampp\htdocs\bez_cla\class
を作成しておきます。
XAMPP がインスト－ルされていれば、
C:\xampp\htdocs
のフォルダはあるはずです。
ここからは TeraPad をエディタとして使用することを前提に説明していきます。
TeraPad に関しては、Move Image に戻り、左サイドナビ｢動くアニメ－ション作成｣のなかの
｢動くサイトを始める準備｣
を参照してください。
TeraPadを起動して「表示(V)」を開いて「オプション(O)」をクリックしてください。
オプション画面が開いたら「文字コ－ド」タプをクリックして下記のようになっていること
を確認し［OK］をクリックします。
次に、Move Imageに戻り、左サイドナビ｢３次ベジェ曲線アニメクラス｣の中の
３次ベジェ曲線アニメクラススタ－ト PHP ファイル
を画面に表示させておき、
ファイル名の bez_cla_start.php 部分より上部を除き、
<!doctype html> 以下をすべてコピ－します。
既に開いているTeraPadのなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、bez_cla_start
「ファイルの種類(T)」は、phpファイル(*.php)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\bez_cla
に保存します。
これで、bez_cla_start.php の保存作業は完了です。
３次ベジェ曲線アニメクラス CSS ファイル保存
Move Image に戻り、左サイドナビ｢３次ベジェ曲線アニメ｣の中の
３次ベジェ曲線アニメクラス CSS ファイル
を画面に表示させておき、
ファイル名の bez_cla_sty.css 部分より上部を除き、@charset "utf-8";
以下をすべてコピ－します。
再度開いたTeraPadのなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、bez_cla_sty
「ファイルの種類(T)」は、cssファイル(*.css)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\bez_cla\css
に保存します。
これで、bez_cla_sty.css の保存作業は完了です。
３次ベジェ曲線アニメクラス IMG ファイル保存
IMGファイルを作成します。
作成するといっても、回転するリンゴの IMG ファイルとサッカボ－ルの２つのファイルをダウンロ－ドするだけです。
IMG ファイル-リンゴ ダウンロ－ド
IMG ファイル-サッカボ－ル ダウンロ－ド
をクリックし、一旦保存し必ず解凍してから、apple-2.gif と soccer_ball.gif ファイルを
C:\xampp\htdocs\bez_cla\img
に保存してください。
これで、apple-2.gif 及び soccer_ball.gif ファイルの保存作業は完了です。
ちなみに、この apple-2.gif は３次ベジェ曲線アニメ IMG ファイルと名前も中身も全く同じです。
３次ベジェ曲線アニメクラス設定ファイル保存
Move Imageに戻り、左サイドナビ｢３次ベジェ曲線アニメクラス｣の中の
３次ベジェ曲線アニメクラス設定 PHP ファイル
を画面に表示させておき、
ファイル名の bez_cla_sty.php 部分より上部を除き、
<?php 以下をすべてコピ－します。
既に開いている TeraPad のなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、bez_cla_sty
「ファイルの種類(T)」は、phpファイル(*.php)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\bez_cla
に保存します。
これで、bez_cla_sty.php の保存作業は完了です。
３次ベジェ曲線アニメクラス継承 class ファイル保存
Move Imageに戻り、左サイドナビ｢３次ベジェ曲線アニメクラス｣の中の
３次ベジェ曲線アニメクラス継承 class PHP ファイル
を画面に表示させておき、
ファイル名の bez_cla_ex.php 部分より上部を除き、
<?php 以下をすべてコピ－します。
既に開いている TeraPad のなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、bez_cla_ex
「ファイルの種類(T)」は、phpファイル(*.php)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\bez_cla\class
に保存します。
これで、bez_cla_ex.php の保存作業は完了です。
３次ベジェ曲線アニメクラス class ファイル保存
Move Image に戻り、左サイドナビ｢３次ベジェ曲線アニメクラス｣の中の
３次ベジェ曲線アニメクラス class PHP ファイル
を画面に表示させておき、
ファイル名の bez_cla.php 部分より上部を除き、
<?php 以下をすべてコピ－します。
既に開いている TeraPad のなかに今コピ－した内容を貼付けます。
「ファイル(F)」から「名前を付けて保存ファイル(A)」をクリックし
「ファイル名(N)」は、bez_cla
「ファイルの種類(T)」は、phpファイル(*.php)
とし、あらかじめ作成しておいたフォルダ
C:\xampp\htdocs\bez_cla\class
に保存します。
これで、bez_cla.php の保存作業は完了です。
ブラウザで３次ベジェ曲線アニメクラスを確認
サンプルで確認
まず始めに３次ベジェ曲線アニメクラスがどのように動くかのサンプルを確認しておきましょう。
Move Image に戻り、左サイドナビ｢３次ベジェ曲線アニメクラス｣の中の
３次ベジェ曲線アニメクラス表示
をクリックするとサンプル表示されます。
これと同じように自分の作成したファイルが動くか確認していきます。
作成したファイル確認
いよいよ３次ベジェ曲線アニメクラスを表示します。
IEで見ることを前提に説明します。
まず、xampp を起動します。
XAMPP Control Panel が開いたら、Apache Start ボタン、下記、赤丸のところをクリックして
Apacheを起動します。
起動すると、Start ボタンが Stop に変わります。
次に、IE を起動しアドレスバ－に、
http://localhost/bez_cla/bez_cla_start.php
と記入し、Enterキ－を押します。
リンゴとサッカボ－ルが指定した３次ベジェ曲線に沿って運動しながら表示されたら確認完了です。
もし、Internet Explorer の他にもブラウザがインスト－ルされているなら、
Mozilla Firefox 、Google Chrome、Opera でも動くことを確認しましょう。
３ベジェクラス隊が行くを確認
３次ベジェ曲線アニメクラスを応用した｢３ベジェクラス隊が行く｣もどのように動くかも確認してください。
Move Image に戻り、左サイドナビ｢３次ベジェ曲線アニメクラス｣の中の
３ベジェクラス隊が行く
をクリックすると見ることができます。
３次ベジェ曲線アニメクラス class ファイル作成に戻る
３次ベジェ曲線アニメクラス継承 class ファイル作成に戻る
３次ベジェ曲線アニメクラス設定ファイルに戻る
３次ベジェ曲線アニメクラススタ－トファイル作成に戻る
３次ベジェ曲線アニメクラス作成概要に戻る