1枚の画像に様々なカメラワークを適用することで臨場感あふれる効果を得られます。

少ない画像枚数で効果的な表現を実現できますので、多忙なWEBクリエイターに最適です。

それではカメラ移動とズーム効果の利用方法をSTEP1からSTEP6にわけてご紹介します。

STEP1へ進む前に右図を御覧になって下さい。
右図では、カメラ移動とズーム機能の概念を分かり易くするために、画像中央部に枠を表示しています。

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

図1.カメラ移動とズーム機能の考え方

STEP 1

a.9種類のカメラ位置(ファインダー)

9種類のカメラ位置

カメラ移動はズームイン(2倍表示)状態で使用します。
左図の赤枠で囲まれた箇所がカメラ位置(ファインダー)となります。

b.数値とカメラ位置の関係

数値とカメラ位置の関係

カメラ位置を数値に置き換えて考えましょう。

カメラ位置は9種類あります。

No.1 左下
No.2 下
No.3 右下
No.4 左
No.5 中央
No.6 右
No.7 左上
No.8 上
No.9 右上

※テンキーをイメージしていただければ理解しやすいと思います。

c.左下から右上への移動

左下から右上へのイメージ図

カメラ位置をNo.1(左下)からNo.9(右上)に移動させたい場合は19という数値をイメージして下さい。

d.右上から中央への移動

右上から左上へのイメージ図

カメラ位置をNo.9(右上)からNo.5(中央)に移動させたい場合は95という数値をイメージして下さい。

「移動元の番号+移動先の番号」という考え方になります。

カメラ位置を数値に置き換えて連想できたら次のステップに進みましょう。

STEP 2

16種類のカメラ移動方法

カメラ移動サンプル

カメラ移動方法は11番から26番まで16種類が用意されています。

カメラ移動方法一覧
11.等速移動
12.減速パターン1
13.加速パターン1
14.加速&減速
15.減速パターン2
16.加速パターン2
17.減速パターン3
18.加速パターン3
19.跳ねる
20.戻る
21.横減速&縦加速パターン1
22.横加速&縦減速パターン1
23.横減速&縦減速パターン2
24.横加速&縦減速パターン2
25.横減速&縦加速パターン3
26.横加速&縦減速パターン3
STEP 3

カメラ移動の公式

STEP 1でカメラ位置を数値に置き換えて連想することを理解しました。
次は定義ファイル(config.xml)に記述するeffect_type(エフェクト種別)を具体的に説明します。

1から9への移動

等速移動で左下(No.1)から右上(No.9)へ移動させましょう。

左下(No.1)から右上(No.9)へカメラを移動することから19という数値が連想されます。

カメラ移動方法一覧を参照すると「等速移動」11番であることがわかりますから

11(等速移動) + 19(No.1からNo.9への移動) = 「1119」= effect_type(エフェクト種別)

よって1119という数値をeffect_typeに指定することになります。

STEP 4

ズームの使い方

STEP 3でカメラ位置を制御する方法を理解しました。
次は特定のカメラ位置をズームイン、特定の位置からズームアウトする方法を説明します。

ズームイン

等速移動で中央(No.5)をズームインしましょう。

中央(No.5)をズームインする場合は「55」という数値を使用します。

これは「移動元の番号」と「移動先の番号」が同一の数値の場合「ズームイン」扱いになることを意味します。

11(等速移動) + 55 = 「1155」= effect_type

よって1155という数値をeffect_typeに指定することになります。

ズームアウト

等速移動で中央(No.5)からズームアウトしましょう。

中央(No.5)からズームアウトする場合は「50」という数値を使用します。

これは「移動先の番号」が「0」の場合「ズームアウト」扱いになることを意味します。

11(等速移動) + 50 = 「1150」= effect_type

よって1150という数値をeffect_typeに指定することになります。

STEP 5

カメラ移動特別効果

ここでは特殊なカメラ移動効果を説明します。

ズームイン効果無し

中央(No.5)をズームイン効果無しで拡大表示させましょう。

中央(No.5)をズームイン効果無しで拡大表示する場合は「05」という数値を使用します。

これは「移動元の番号」が「0」の場合「ズームイン効果無しの拡大表示」扱いになることを意味します。

11(等速移動) + 05 = 「1105」= effect_type

よって1105という数値をeffect_typeに指定することになります。

1.2倍から等倍へ

1.2倍の拡大状態から全体表示状態へ移行させましょう。

1.2倍拡大状態から全体表示状態へズームアウトするには「00」という数値を使用します。

これは「移動元の番号」と「移動先の番号」が「0」の場合「1.2倍拡大状態から全体表示状態(等倍)への移行」扱いになることを意味します。

11(等速移動) + 00 = 「1100」= effect_type

よって1100という数値をeffect_typeに指定することになります。

STEP 6

カメラ移動とズーム機能のポイント

  1. カメラ位置を数値に置き換えて覚えましょう。
  2. カメラ移動方法は11~26までの16種類が用意されています。
  3. effect_type = 「移動方法番号」+「移動元の番号 + 移動先の番号」という式を覚えましょう。