 |
| |
| はじめての「Anfy」 |
| INDEX |
| 1.「Anfy」ってどんなソフト |
| 2.「Anfy」はシェアウェアソフトです |
| 3.「Anfy」はどうやつて入手するの ! |
| 3-1.「Anfy」ソフトのダウンロード法 |
| 4.「Anfy」のインストール |
| 5.「Anfy」を起動する |
| 5-1.「Anfy」を起動する方法 |
| 5-2.「Category(カテゴリ)」と「アブレツト」の選択 |
| 5-3.「Category(カテゴリ)」と「アブレツト」の組み合わせ |
| 5-4.「Anfy」を起動する方法の続き |
| 6.「Anfy」のアニメーションをホームページで利用する |
| 6-1.単独のページとして利用す方法 |
| 6-2.特定のページ(トップページ等)に埋め込む方法 |
| 1.「Anfy」ってどんなソフト |
| 「Anfy」は４０種類ものJava appletを利用して、複雑なアニメーションを簡単な操作で生成するツールです。 |
| Java applet(アプレツト)は、いわゆるJave(ジヤバ)というもので、異なるプラツト(OS)でも動作するプログラミング言語のことを指します。 |
| |
| 2.「Anfy」はシェアウェアソフトです |
| 「Anfy」はシェアウェアソフトですが、無料でユーザーが利用するのは問題ありません。 |
| ただし、機能が限定され、サポートが受けられないことになっています。初心者は慣れるまでこのまま利用し、将来中級・上級を目指し、もっと多機能な |
| 部分を利用したくなつたらしたくなったら、料金を払って登録しましょう。 |
| 登録すると、各アブレットにリンクを付けることが可能になり、アブレットをクリツクした際に表示される「クレジツトウインド」も表示それなく |
| なります。 |
| なお、「Anfy」の登録はプロバイダ単位(ホームページのアドレス単位)となっています。 |
| 登録料は、10米ドルです。 |
| |
| 3.「Anfy」はどうやつて入手するの ! |
| 「Anfy」は、次のURLをクリツクすることで入手できます。 |
| http://www.anfyteam.com/ |
| |
| 3-1.「Anfy」ソフトのダウンロード法 |
| 上記 3. のURLをクリツクすると次の画面(図 1)が表示されます。 |
| 図 1 が表示されたら、赤丸で囲った「>Download」または「Get It!」をクリックすると次の画面(図 2)が表示されます。 |
 |
| 図 1 |
| |
| 図 2 が表示されたら、赤丸で囲った「DOWNLOAD anfy210.exe(from site 1)から(from site 3)」の3ツのどれかをクリックすると次の画面(図 3)が表 |
| 示されます。 |
| (from site 1)から(from site 3)のどれをクリックしても同じです。 |
 |
| 図 2 |
| |
| 図 3 はWindows ７ の場合に表示さる画面です。 |
| 「保存(S)」右の「▼」をクリックします。① |
| メニューが表示されますので「名前を付けて保存(A)」をクリックします。② |
| 次の「名前を付けて保存」の画面(図 4)が表示されます。 |
 |
| 図 3 |
| |
| 次の「名前を付けて保存」の画面(図 4)が表示されますが、ファイルを保存する場所は任意です。ここでは仮にデスクトツプとしています。① |
| 任意の場所に保存用フォルダをつくると便利です。② |
| 保存場所が決まりましたら最下段の「保存(S)」をクリックすると③、「anfy210e.exe」が指定した場所に保存されます。 |
 |
| 図 4 |
| |
| 4.「Anfy」のインストール |
| 「Anfy」のインストールには、図 4 で保存した実行フアイルをダブルクリックする方法と、図 5 の最下段の「実行(P)」をダブルクリックする方法がありま |
| すが、後者はWindows7の場合です。ただし、Windows7の場合でも保存して実行フアイルをダブルクリックする方法もとれます。 |
| ここでは、Windows7の例で説明します。 |
| 図 5 で「anfy210e.exe のダウンロードが完了しました。」で完了を確認する。① |
| 「実行(R)」をクリックするとインストールが始まり、図 6 の「Anfy Installation」が表示されます。 |
 |
| 図 5 |
| |
| 図 6 で特に何もせずにいますと、図 7 の「Welcome」画面が表示されます。 |
 |
| 図 6 |
|
| 図 7 が表示されますので、下段の「Next>(次へ>)」をクリツクしますと、図 8の「Read Me File」画面が表示されます。 |
 |
| 図 7 |
| |
| 図 8 が表示されますので、下段の「Next>(次へ>)」をクリツクしますと、図 9の「Choose Destination
Location」画面が表示されます。 |
 |
| 図 8 |
| |
| 図 9 が表示されますので、下段の「Next>(次へ>)」をクリツクしますと、図 10の「Choose Destination Location」画面が表示されます。 |
 |
| 図 9 |
|
| 図 10 が表示されますので、下段の「Next>(次へ>)」をクリツクしますと、図 11の「Start Installation」画面が表示されます。 |
| * 留意事項 図 10 の画面で中段枠内に「Anfy Team」が選択されていることを確認すること。 |
 |
| 図 10 |
| |
| 図 11 が表示されますので、下段の「Next>(次へ>)」をクリツクしますと、図 12の「Installing」画面が表示されます。 |
 |
| 図 11 |
| |
| 図 12 が表示され、インストール作業が始まります。 |
| 作業が終わると、図 13の「Installation Complete」画面が表示されます。 |
 |
| 図 12 |
| |
| 図 13 が表示されますので、下段の「Finish>(終了>)」をクリツクしますとインストールは終了します。 |
 |
| 図 13 |
| |
| インストールが終了するとデスクトップに図 14 の「Anfy」のショートカット・アイコンが表示されます。(スタートメニューも登録されます。) |
 |
| 図 14 |
| |
| 5.「Anfy」を起動する |
| 5-1.「Anfy」を起動する方法 |
| 「Anfy」を起動する方法としては、①.デスクトプに生成された図 14 のがショートカット・アイコンから起動する方法と②.スタート・メニューに登録され |
| た名前 から起動する方法の二つがありますが、この例では.デスクトプに生成された図 14 のがショートカット・アイコンから起動する方法で説明します。 |
| 図 14 の「Anfy」のショートカツト・アイコンをダブルクリツクすると、図 15 の「Anfy」のトップ・ページが表示゛されます。 |
 |
| 図 15 |
| |
| 5-2.「Category(カテゴリ)」と「アブレツト」の選択 |
| 「Anfy」のトツプ画面(図 15)左側の「Category(カテゴリ)」①を上から順番に選択し、右側の「アブレット欄」の「▼」②をクリックし、イメージに会った |
| 項目を選択してください。 |
| 図 16 |
| |
| 5-3.「Category(カテゴリ)」と「アブレツト」の組み合わせ |
| 5-2で説明した「Category(カテゴリ)」と「アブレット」の組み合わせは、次の表のとおりです。 |
| 「Category(カテゴリ)」と「アブレット」との組み合わせ表 |
| カテゴリ |
アブレット |
効 果 |
| Banner/Slideshow(バナー/スライドシヨー) |
BOOKFLIP |
スライドショー、ページめくりの効果 |
| CFADE |
スライドショー、クロースフェード |
| MOSAIC |
スライドショー、モザイク模様に分割したプロセス |
| Fractals/Alife(数学モデル) |
FLOZOIDS |
フロゾイドをアニメーション |
| IFSFRACT |
フラクタルの樹 |
| LIFE2D |
人口生命をシュミレート |
| MANDEL |
フラクタルをシュミレート |
| Image effect(画像効果) |
ANSTRETCH |
|
| BUMP |
凸 凹な表面を移動する光源効果 |
| DEFORM |
連続的な変形 |
| FIREWORKS |
打ち上げ花火 |
| HUEROT |
色相を回転しながら連続的に変化 |
| LAKE |
水面反射をアニメート |
| LENS |
|
| ROT |
イメージをズーム、回転、変形 |
| SNOW |
雪を降らせます |
| WARP |
イメージをワープ、螺旋変形 |
| WATER |
すいめんであるかのようにアニメーション |
| WEATHER |
|
| WOBBLER |
奇妙に変形、波打つ金属液体 |
| ZOOMPAN |
|
| 3d Applets(3Dアニメーション) |
ANFY3D LIGHT |
3Dアニメーション |
| ANFY3D PLATER |
|
| ANPANO RAMA |
|
| FLUID |
液体の表面をアニメート |
| GALAXY |
リアルな銀河の様子をアニメート |
| TMPPCUBE |
立方体を作り出す |
| TUNNEL |
マツピングしたトンネルを作り出す |
| TUNNEL3D |
マツピングしたトンネルを内部から見た様子 |
| VOXEL |
リアルな惑星の地表を作り出す |
| WORMHOLE |
リアルタイムでワークホール効果を作り出す |
| Navigation menu(ナビゲーション・メニュー) |
ANFYBUTTON |
|
| CUBEMENU |
立方体アブレツト |
| MORPHMENU |
背景がアニメーションする |
| TREEMENU |
WindowsのExploler風のメニューを作成 |
| WHEELMENU |
文字が軸を中心に回転する |
| Other(その他) |
ANCLOOK |
時計の時刻が回転する |
| ANFYCAN |
指定したURLを特定の間隔でイメージ・フアイルとして読み込む |
| ANFYCHAT |
|
| ANFYPAINT |
ペイントプログラム、様々な幾何図形が使用できる |
| ANPUZZLE |
|
| BLOBS |
リアルタイムでアニメーション光球を生成 |
| BLUR |
ぼかし効果を加えながら連続的に再生、音声を割り当てることも可能 |
| FIRE |
リアルタイムで炎を作り出す |
| FLAG |
旗が風になびく様子をシュミレート |
| FLAGLOAD |
イメージを旗としてたなびかせる |
| MADTEXT |
|
| PLASMA |
プラズマ効果を生成 |
| SPIRALSTAR |
|
| STARTEXT |
|
| TEXTSCROLLER |
テキストストローラ |
| ZOOM BLUR |
|
| 上記のように52種の効果が作成できますが、一っ一っを確認品がイメージに会った効果を選択。 |
| * 次のURLをクリツクすると上記組み合わせの効果画面が見られます。 |
| http://shtezuka.com/anfy_gallery/anfygallery.html |
|
| |
| 5-4.「Anfy」を起動する方法の続き |
| 「Anfy」の組み合わせによる効果は５２種類ありますが、全ての効果の説明は、ここではできませんので代表例として、「Banner/Slideshow(バナー |
| /スライドシヨー) 」と「BOOKFLIP」を組み合わせの例で説明します。 |
| 「Anfy」が起動して、図 １７ が表示されたら、 |
| 左側の「Category(カテゴリー)」から 「Banner/Slideshow(バナー/スライドシヨー)」の○をクリツクします。① |
| 次に右側「アブレツト欄」の「▼」をクリックし「BOOKFLIP」を選択します。② |
 |
| 図 17 (図 15と同じ) |
| |
| 「Banner/Slideshow(バナー/スライドシヨー)」と「BOOKFLIP」の効果を確認するため、次の図 18 の「Applet preview...(アブレツト・プレビュー)」をク |
| リツクします。 |
 |
| 図 18 |
| |
| Windows7の場合、画面の最下段に図 19 の画面が表示される場合がありますので、「ブロックされているコンテンツを許可(A)」をクリックし画面が |
| 表示 されるようにしてください。/ |
 |
| 図 19 |
|
| 図 20が表示されますので、効果を確認してください。よろしければ画面右上隅の「×」で画面を閉じてください。図 21 の画面に元セリます。 |
| ＊ 説明用の画面ですので静止画になっていますが、実際は画像をめくる動きがあります。 |
 |
| 図 20 |
| |
| 図 21 の「Anfy」の画面に戻りましたら、最下段の「Next(次へ)」をクリツクします。 |
 |
| 図 21 |
| |
| 図 22 の「Anfy-BOOKFLIP」画面が表示されますので、右側「Images」欄に所定の画像が掲載されているか確認した後、最下段の「Next(次へ)」を |
| クリッ クします。 |
 |
| 図 22 |
| |
| 図 23 の「Anfy-BOOKFLIP」画面が表示されますので、今回は特になにもせず最下段の「Next(次へ)」をクリツクします。 |
 |
| 図 23 |
| |
| 図 24 の「Anfy-BOOKFLIP」画面が表示されますので、今回は特になにもせず最下段の「Next(次へ)」をクリツクします。 |
 |
| 図 24 |
| |
| 図 25 の「Anfy-BOOKFLIP」画面が表示されますが、今回は「Anfy」の起動を【例】を使って確認しましたので、最下段右の「Exit(終了)」をクリックし |
| 終了 します。 |
 |
| 図 25 |
| 6.「Anfy」のアニメーションをホームページで利用する |
| 「Anfy」のアニメーションをホームページで利用する方法として、単独のページとしして利用する方法と、特定のページに埋め込む方法等が考えられます。 |
| 6-1.単独のページとして利用す方法 |
| 今回は新しい画像５枚を準備し、この画像を使って説明します。(カテゴリとアブレツトを 「Banner/Slideshow(バナー/スライドシヨー)」と「BOOKFLIP」 |
| と仮定) |
| 「Anfy」を起動後、図 22を表示します。 今回は新しい画像５枚を使います。 |
| 図 26 で「Images」欄の3枚の画像を今回は新しい画像５枚と入れ替えるため削除します。 |
| 削除方法は「Images」欄の画像ファイルを1枚ずつ選択し、「Remove(削除)」をクリックし削除します。 |
 |
| 図 26(図 22と同じ) |
| |
| 全ての画像の削除が終わりましたら、今度は新しい画像を追加します。 |
| 新しい画像の追加は、図 27 で「Add...(追加)」をクリックします。 |
 |
| 図 27 |
| |
| 事前に新しい画像を準備していたフォルダとファイルが図 28 のとおり表示されますので、画像を１枚ずつ選択し①、右側下の「開く(O)」をクリツク |
| しま す。② |
 |
| 図 28 |
| |
| 全ての新しい画像の選択が終わると、図 29 の画面が表示されますので、「Images」欄に画像ファイルが表示されていることを確認します。①、 |
| 次に、「Flip mode for selected imsge」欄右側の「▼」をクリックし、好みの画像の動きを選択します。② |
| 最下段左側の「Preview」で画像の動きを確認します。③ |
 |
| 図 29 |
| |
| Windows7 の場合、図 30の画面が表示されますので、最下段右側の「プロックされているコンテンツを許可(A)」をクリツクしてください。 |
 |
| 図 30 |
| |
| 図 31の画面が表示されますので、動きを確認しよろしければ画面右上の「×」をクリツクしますと図 29 に戻りますので、最下段の「Next(次へ)」を |
| クリツクし ます。 |
 |
| 図 31 |
| |
| 図 32 の画面が表示されますが、今回は特に何もせず、最下段の「Next(次へ)」をクリックします。 |
 |
| 図 32 |
| |
| 図 33 の画面が表示されますが、今回は特に何もせず、最下段の「Next(次へ)」をクリックします。 |
 |
| 図 33 |
| |
| 図 34 の画面が表示されますので、右側の「Copy all files to...(すべてのファイルをコピー)」をクリックします。 (左側の「HTML code」がコピーされ |
| ます。) |
 |
| 図 34 |
| |
| 図 35 の「名前を付けて保存」の画面が表示されますので、「保存する場所(I)」欄は予め準備しておいたフォルダ(ここの例ではtest)を選定します。 |
| 次に「フアイル名(N)」欄にフアイル名を記入します。(ここの例ではtest.html)・・・「ファイルの種類(T)」では、拡張子に必ず「htmlまたはhtm」を選定 |
| すること。 |
| 次に右下の「保存(S)をクリツクします。 |
 |
| 図 35 |
|
| 図 36 (図 34と同じ)が表示されますので、右最下段の「Exit(終了)」をクリックします。 |
| 以上で単独ページが保存されましたので、図 35 の「test.html」をFTPソフトでプロバイダにアツプロードしてください。 |
 |
| 図 36 |
| |
| 次のマウス・アイコンをクリツクするとアップロードの結果が見られます。 |
 |
| |
| * アツプロードに当っての留意事項 |
| 参考までに「test.html」が保存されたフオルダを開くと、図 37 の通り「ajbut1.gif」外11ファイルが保存されていることが確認できます。 |
 |
| 図 37 |
| |
| なお、アツプロードのためのファイル転送時に図 38 のエラー・メッセージが表示されることがあります。 |
 |
| 図 38 |
| |
| 図 38 のエラー・メッセージの回避法として、図 39 フアイルの中の「bookflip.jar」名ファイルを削除することで、アツプロードが可能になります。 |
 |
| 図 39 |
| |
| 具体的には、図 40 の「test」フォルダの中の「bookflip.jar」名ファイルを右クリックし①、開いたメニューから「削除(D)」をクリツクします。② |
 |
| 図 40 |
| |
| 図 41 が表示されますので、「はい(Y)」をクリックします。 |
 |
| 図 41 |
| |
| 6-2.特定のページ(トップページ等)に埋め込む方法 |
| この項では、既に作成されているホームページの特定ページ(例としてトツプページ等)に「Anfy」で作成した「動きのある画像」を埋め込む方法を |
| 説明しま す。 |
| 図 42 は既に開設されているホームページのトツプ・ページで、赤線で囲った静止画像部分を「Anfy」で作成した「動きのある画像」に入れ替えま |
| す。 |
 |
| 図 42 |
| 図 42 のページを一旦、図 43 のように別に作成した「test2」フォルダ①に「test2.html」の名前②で保存します。③ |
 |
| 図 43 |
| |
| 「Anfy」を起動し、図 44 まで作業を進めます。(これまでの作業の流れは説明が重複しますので省略します。) |
| 図 44 が表示されたら、最下段の「Publish(発行)」をクリックする。① |
| 次に右側下部の「Copy into clipboard(コードをクリップボードへ)」をクリツクします。② |
| 次に右側最下段の「Exit(終了)」をクリツクします。③ |
 |
| 図 44 |
| |
| 図 44 で最下段の「Publish(発行)」をクリックする①と、図 45が表示されますが特に何もせず「OK」 をクリックすると図 44に戻ります。 |
 |
| 図 45 |
| |
| 図 43 で保存したファイルを図 46 のように開き、交換前の静止画像クリックします。 |
| 続いて、キーボードの「Delete}キーをタップし画像を削除します。 |
 |
| 図 46 |
| |
| 図 46 で画像を削除した後に図 44でコピーしたコード(左側の「HTML code」)を埋め込むため、図 47 でカーソールの点滅位置に「<!--Anfy
ここ |
| から-->」とHTMLタグ を書き込みます。 |
 |
| 図 47 |
| |
| 図 47 で書き込んだHTMLダグを確認するため、「ソース」を表示させます。(図 48 はホームページ・ビルダーの場合で「HTML
ソース」をクリック |
| します。) |
 |
| 図 48 |
| |
| 図 49 のとおり「HTML ソース」が表示され、図 47で書き込んだ「HTML タグ」が記入されているか確認します。① |
| 図 47 で書き込まれた「<!--Anfy ここから-->」タグの後に１行スペースをとります。② (このスペースに図 44
の「HTML code」を貼り付けます。) |
| 上述のスペース上で、「貼り付け」ボタンをクリックするか、または右クリツクで表示されるメニューの「貼り付け(P)のクリックします。 |
 |
| 図 49 |
| |
| 図 44 で「Copy into clipboard(コードをクリップボードへ)」をクリックし、クリップボードに保存されていた「HTML
code」」が貼り付けられ、図 50 の |
| ように表示されます。 |
 |
| 図 50 |
| |
| 図 50 で貼り付けられた「HTML code」の最後の行(</applet>)に後日の参考のために図 51のように「<!--Anfy
ここまで-->」とHTMLタグ を書き |
| 込みます。 (書かなくても良い) |
 |
| 図 51 |
| |
| 以上で特定ページ(トップページ等)に埋め込まれましたので、このページを保存後「test2.html」をFTPソフトでプロバイダにアツプロードしてください。 |
| アップロード後は、図 52 の通り当初の「静止画像」から「Anfy」の動きのある画像に入れ替わりました。 |
 |
| 図 52 |
| |
| 次のマウス・アイコンをクリツクするとアップロードの結果が見られます。 |
|
| * ページ作成に当っての留意事項(参考) |
| 「Anfy BOOKFLIP」の表示は正方形ですので、縦・横寸法が異なると余白が表示されますので、図 53 の「Extra height(余白)」で高さを調整して |
| みてください。また、「Back color...(背景色)」をクリックしページの背景色に合わせることで見易くなります。(フリーの場合は単色です。シェアウェア |
| の場合は複雑な色の作成が出来ます。) |
 |
| 図 53 |