右図の様な回転効果を表現するための応用テクニックをご紹介します。

画像加工ソフトを若干使いこなせる方を対象としたテクニックです。

画像加工の経験が少ない方は参考程度に御覧下さい。

それではSTEP1から始めましょう。

STEP 1

画像を準備しましょう

準備した12枚の画像例

角度を変えて撮影した画像を準備しましょう。
ご紹介するサンプルは12枚で構成されています。

1枚目は正面を向いたシーサーの画像です。
2枚目以降は、少しずつ角度を変えた画像になります。

画像加工ソフトを利用して商品(シーサー)のみ切り抜きます。
無地の生地等に商品(シーサー)を置いて撮影すると画像加工が容易になります。

2枚の画像サイズは同一サイズが望ましいです。
それぞれファイル名を001.jpg~012.jpgと変更します。

STEP 2

定義しましょう

  • 各画像ファイル(001.jpg~012.jpg)
  • 定義ファイル(config.xml)
  • HTMLファイル(misfpe.html)
  • FPE本体(misfpe.swf)

適当なフォルダを作成し画像ファイル、定義ファイル、HTMLファイル、FPE本体を全て同一のフォルダに移動します。

準備した12枚の画像を特殊効果無し(No.1)でFPEを動作させる為の定義(config.xml)を行います。

config.xml定義例

001.jpg
./image_360/001.
002.jpg
./image_360/002.
003.jpg
./image_360/003.
004.jpg
./image_360/004.
005.jpg
./image_360/005.
006.jpg
./image_360/006.
007.jpg
./image_360/007.
008.jpg
./image_360/008.
009.jpg
./image_360/009.
010.jpg
./image_360/010.
011.jpg
./image_360/011.
012.jpg
./image_360/012.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>

<copyright>elz.jp</copyright>

<!-- 準備した画像枚数を指定 -->
<image_max>12</image_max>

<!-- 特殊効果無し -->
<effect_type>1</effect_type>

<!-- 特殊効果無しを1秒持続させる -->
<effect_time>1</effect_time>

<!-- 0.3秒停止 -->
<stop_time>3</stop_time>

<!-- 準備した画像のプレフィックスを指定 -->
<prefix>./image_360/</prefix>

</common>

</pagedata>

フェードインでの回転

001.jpg
./image_360/001.
002.jpg
./image_360/002.
003.jpg
./image_360/003.
004.jpg
./image_360/004.
005.jpg
./image_360/005.
006.jpg
./image_360/006.
007.jpg
./image_360/007.
008.jpg
./image_360/008.
009.jpg
./image_360/009.
010.jpg
./image_360/010.
011.jpg
./image_360/011.
012.jpg
./image_360/012.
 
<?xml version="1.0" encoding="UTF-8" ?>
<pagedata>
<common>

<copyright>elz.jp</copyright>

<!-- 準備した画像枚数を指定 -->
<image_max>12</image_max>

<!-- フェードイン効果 -->
<effect_type>31</effect_type>

<!-- フェードイン効果を0.3秒間持続させる -->
<effect_time>3</effect_time>

<!-- 停止無し -->
<stop_time>0</stop_time>

<!-- 準備した画像のプレフィックスを指定 -->
<prefix>./image_360/</prefix>

</common>

</pagedata>

12枚の画像を「No.1 特殊効果無し」で連続表示させることで「回転効果」を表現できます。
stop_timeを長くすると「ゆっくり回転する」感じになり、短くすると「高速に回転する」といった効果を得ることができます。

effect_typeを「No.31 フェードイン」指定とした場合擬似モーフィング的な効果も得られます。

HTMLファイルへの組込方法を御覧になりたい方は3分でフラッシュスライドショーを作成を御覧下さい。