アニメ編（その九）

戻る：アニメ編（その八）

目次

進む：アニメ編（その十）

基本テクニック：フェード part3

今回はフェードの第三回としてクロスフェードを取り上げます。

クロスフェードとは

クロスフェード cross-fade とは、一方の映像がフェードアウトしながら、他方の映像がフェードインするものをいいます。
その意味ではこれもトランジション（場面転換）の一手法ではありますが、連続的に継ぎ目なく移行するという点に意味があります。
つまり、フェードアウト／フェードインが無機質な一色の画面を挟むことによって時間の断絶を暗示しているのに対し、クロスフェードにはそれがなく、時間の連続性を損なわない形でトランジションを行うわけです。

映像編集ではありませんが、クラブＤＪのリミックスにおけるクロスフェードはまさにこれですね。
音楽の世界でも曲をフェードアウトしつつ次の曲をフェードインしてスムーズにつなぐ手法をクロスフェードといいますが、これはリズムとグルーヴを損なわないためにわざわざこういうことをするわけです。
ぶつっと曲が終わってしまうと、いったん途切れた感じがしてしまいますからね。

一方、映像編集においては特に時間経過を省略するという目的でクロスフェードはよく使われます。
たとえば前のシーンでは登場人物たちが汽車に乗り込む映像が流され、次のシーンはその人物たちが駅で降りて迎えに来ていた誰かと会話をする、というような具合ですが、この際に二つのシーンをクロスフェードでつなぐとスムーズに汽車での移動時間を省略することが出来るわけです。

それ以外の目的で、つまり単にシーンとシーンをつなぐためのエフェクトとしてクロスフェードを使っていけないことはありませんが、環境映像のような、のっぺりとした感じの印象になりますので注意が必要です。

クロスフェードの原理と実装

エフェクトブースターにおけるクロスフェードの原理はフェードイン／フェードアウトと同じで、背景画像の上に alpha パラメータを変化させながら別の画像を一時描画させるだけです。

今回は無人バージョンの冒険者の宿（AdventureresInn_.bmp）に通常の冒険者の宿（Adventurersinn.bmp）を重ねてみます。
まず、コンテントツリーはこのように構成します。

カウントダウン直後の無人宿というのは、このような画像構成です。

そして、エフェクトブースターを実行する背景変更コンテントはこのようにします。

背景には「背景継承」を選択し、JPY ファイルは今までと異なり冒険者の宿サイズ（400*260）として配置します。JPY ファイルの定義内容は下記の通りです。

  1: [init]
  2: backwidth=400
  3: backheight=260
  4: backcolor=$ff00ff
  5: 
  6: [冒険者の宿_00]
  7: fileName=AdventurersInn.bmp
  8: dirtype=2
  9: savecache=1
 10: visible=0
 11: transparent=0
 12: paintmode=3
 13: alpha=51
 14: animation=3
 15: animeposition=116,15
 16: wait=200
 17: 
 18: [冒険者の宿_01]
 19: loadcache=1
 20: visible=0
 21: transparent=0
 22: paintmode=3
 23: alpha=102
 24: animation=3
 25: animeposition=116,15
 26: wait=200
 27: 
 28: [冒険者の宿_02]
 29: loadcache=1
 30: visible=0
 31: transparent=0
 32: paintmode=3
 33: alpha=153
 34: animation=3
 35: animeposition=116,15
 36: wait=200
 37: 
 38: [冒険者の宿_03]
 39: loadcache=1
 40: visible=0
 41: transparent=0
 42: paintmode=3
 43: alpha=204
 44: animation=3
 45: animeposition=116,15
 46: wait=200
 47: 
 48: [冒険者の宿_04]
 49: loadcache=1
 50: visible=1
 51: transparent=0
 52: paintmode=3
 53: alpha=255
 54: animation=3
 55: animeposition=116,15
 56: wait=200

これを実行してみましょう。

さらにフレームを細かく割ると・・・

JPYソースを表示

  1: [init]
  2: backwidth=400
  3: backheight=260
  4: backcolor=$ff00ff
  5: 
  6: [冒険者の宿_00]
  7: fileName=AdventurersInn.bmp
  8: dirtype=2
  9: savecache=1
 10: visible=0
 11: transparent=0
 12: paintmode=3
 13: alpha=12
 14: animation=3
 15: animeposition=116,15
 16: wait=50
 17: 
 18: [冒険者の宿_01]
 19: loadcache=1
 20: visible=0
 21: transparent=0
 22: paintmode=3
 23: alpha=25
 24: animation=3
 25: animeposition=116,15
 26: wait=50
 27: 
 28: [冒険者の宿_02]
 29: loadcache=1
 30: visible=0
 31: transparent=0
 32: paintmode=3
 33: alpha=38
 34: animation=3
 35: animeposition=116,15
 36: wait=50
 37: 
 38: [冒険者の宿_03]
 39: loadcache=1
 40: visible=0
 41: transparent=0
 42: paintmode=3
 43: alpha=51
 44: animation=3
 45: animeposition=116,15
 46: wait=50
 47: 
 48: [冒険者の宿_04]
 49: loadcache=1
 50: visible=0
 51: transparent=0
 52: paintmode=3
 53: alpha=63
 54: animation=3
 55: animeposition=116,15
 56: wait=50
 57: 
 58: [冒険者の宿_05]
 59: loadcache=1
 60: visible=0
 61: transparent=0
 62: paintmode=3
 63: alpha=76
 64: animation=3
 65: animeposition=116,15
 66: wait=50
 67: 
 68: [冒険者の宿_06]
 69: loadcache=1
 70: visible=0
 71: transparent=0
 72: paintmode=3
 73: alpha=89
 74: animation=3
 75: animeposition=116,15
 76: wait=50
 77: 
 78: [冒険者の宿_07]
 79: loadcache=1
 80: visible=0
 81: transparent=0
 82: paintmode=3
 83: alpha=102
 84: animation=3
 85: animeposition=116,15
 86: wait=50
 87: 
 88: [冒険者の宿_08]
 89: loadcache=1
 90: visible=0
 91: transparent=0
 92: paintmode=3
 93: alpha=114
 94: animation=3
 95: animeposition=116,15
 96: wait=50
 97: 
 98: [冒険者の宿_09]
 99: loadcache=1
100: visible=0
101: transparent=0
102: paintmode=3
103: alpha=127
104: animation=3
105: animeposition=116,15
106: wait=50
107: 
108: [冒険者の宿_10]
109: loadcache=1
110: visible=0
111: transparent=0
112: paintmode=3
113: alpha=140
114: animation=3
115: animeposition=116,15
116: wait=50
117: 
118: [冒険者の宿_11]
119: loadcache=1
120: visible=0
121: transparent=0
122: paintmode=3
123: alpha=153
124: animation=3
125: animeposition=116,15
126: wait=50
127: 
128: [冒険者の宿_12]
129: loadcache=1
130: visible=0
131: transparent=0
132: paintmode=3
133: alpha=165
134: animation=3
135: animeposition=116,15
136: wait=50
137: 
138: [冒険者の宿_13]
139: loadcache=1
140: visible=0
141: transparent=0
142: paintmode=3
143: alpha=178
144: animation=3
145: animeposition=116,15
146: wait=50
147: 
148: [冒険者の宿_14]
149: loadcache=1
150: visible=0
151: transparent=0
152: paintmode=3
153: alpha=191
154: animation=3
155: animeposition=116,15
156: wait=50
157: 
158: [冒険者の宿_15]
159: loadcache=1
160: visible=0
161: transparent=0
162: paintmode=3
163: alpha=204
164: animation=3
165: animeposition=116,15
166: wait=50
167: 
168: [冒険者の宿_16]
169: loadcache=1
170: visible=0
171: transparent=0
172: paintmode=3
173: alpha=216
174: animation=3
175: animeposition=116,15
176: wait=50
177: 
178: [冒険者の宿_17]
179: loadcache=1
180: visible=0
181: transparent=0
182: paintmode=3
183: alpha=229
184: animation=3
185: animeposition=116,15
186: wait=50
187: 
188: [冒険者の宿_18]
189: loadcache=1
190: visible=0
191: transparent=0
192: paintmode=3
193: alpha=242
194: animation=3
195: animeposition=116,15
196: wait=50
197: 
198: [冒険者の宿_19]
199: loadcache=1
200: visible=1
201: transparent=0
202: paintmode=3
203: alpha=255
204: animation=3
205: animeposition=116,15
206: wait=50

キャラクターだけフェードインしたように見えますね。
CardWirth において、演出的に意味のあるクロスフェードはおそらくこのような使い方になるでしょう。この例のように、ほとんど同じ画像で部分的に違うものをクロスフェードすると、その差分にあたる要素を強調することが出来ます。

背景バリエーションを利用したクロスフェード

背景画像を公開されておられる素材作家さんで、同じ風景についてバリエーションを作っておられる方は案外多いものです。
そのバリエーションとは、同じ場所で違う天気（晴天・曇天・雨天・雪など）の情景であったり、あるいは違う時間帯（朝景・昼景・夕景・夜景）であったりですね。
前項で示した、人がいたりいなかったりする画像もバリエーションに当たりますが、これらのバリエーション画像にクロスフェードを用いると、興味深い効果を得ることが出来ます。

以下のサンプルはこと。様の公開されている背景画像をお借りして、バリエーションを用いたクロスフェードを示すものです。

まず、天候バリエーションを用いたクロスフェードです。

JPYソースを表示

  1: [init]
  2: backwidth=400
  3: backheight=260
  4: backcolor=$ff00ff
  5: 
  6: [Scene_00]
  7: fileName=koto_bg25.jpg
  8: savecache=1
  9: visible=0
 10: transparent=0
 11: paintmode=3
 12: alpha=12
 13: animation=3
 14: animeposition=116,15
 15: wait=200
 16: 
 17: [Scene_01]
 18: loadcache=1
 19: visible=0
 20: transparent=0
 21: paintmode=3
 22: alpha=25
 23: animation=3
 24: animeposition=116,15
 25: wait=200
 26: 
 27: [Scene_02]
 28: loadcache=1
 29: visible=0
 30: transparent=0
 31: paintmode=3
 32: alpha=38
 33: animation=3
 34: animeposition=116,15
 35: wait=200
 36: 
 37: [Scene_03]
 38: loadcache=1
 39: visible=0
 40: transparent=0
 41: paintmode=3
 42: alpha=51
 43: animation=3
 44: animeposition=116,15
 45: wait=200
 46: 
 47: [Scene_04]
 48: loadcache=1
 49: visible=0
 50: transparent=0
 51: paintmode=3
 52: alpha=63
 53: animation=3
 54: animeposition=116,15
 55: wait=200
 56: 
 57: [Scene_05]
 58: loadcache=1
 59: visible=0
 60: transparent=0
 61: paintmode=3
 62: alpha=76
 63: animation=3
 64: animeposition=116,15
 65: wait=200
 66: 
 67: [Scene_06]
 68: loadcache=1
 69: visible=0
 70: transparent=0
 71: paintmode=3
 72: alpha=89
 73: animation=3
 74: animeposition=116,15
 75: wait=200
 76: 
 77: [Scene_07]
 78: loadcache=1
 79: visible=0
 80: transparent=0
 81: paintmode=3
 82: alpha=102
 83: animation=3
 84: animeposition=116,15
 85: wait=200
 86: 
 87: [Scene_08]
 88: loadcache=1
 89: visible=0
 90: transparent=0
 91: paintmode=3
 92: alpha=114
 93: animation=3
 94: animeposition=116,15
 95: wait=200
 96: 
 97: [Scene_09]
 98: loadcache=1
 99: visible=0
100: transparent=0
101: paintmode=3
102: alpha=127
103: animation=3
104: animeposition=116,15
105: wait=200
106: 
107: [Scene_10]
108: loadcache=1
109: visible=0
110: transparent=0
111: paintmode=3
112: alpha=140
113: animation=3
114: animeposition=116,15
115: wait=200
116: 
117: [Scene_11]
118: loadcache=1
119: visible=0
120: transparent=0
121: paintmode=3
122: alpha=153
123: animation=3
124: animeposition=116,15
125: wait=200
126: 
127: [Scene_12]
128: loadcache=1
129: visible=0
130: transparent=0
131: paintmode=3
132: alpha=165
133: animation=3
134: animeposition=116,15
135: wait=200
136: 
137: [Scene_13]
138: loadcache=1
139: visible=0
140: transparent=0
141: paintmode=3
142: alpha=178
143: animation=3
144: animeposition=116,15
145: wait=200
146: 
147: [Scene_14]
148: loadcache=1
149: visible=0
150: transparent=0
151: paintmode=3
152: alpha=191
153: animation=3
154: animeposition=116,15
155: wait=200
156: 
157: [Scene_15]
158: loadcache=1
159: visible=0
160: transparent=0
161: paintmode=3
162: alpha=204
163: animation=3
164: animeposition=116,15
165: wait=200
166: 
167: [Scene_16]
168: loadcache=1
169: visible=0
170: transparent=0
171: paintmode=3
172: alpha=216
173: animation=3
174: animeposition=116,15
175: wait=200
176: 
177: [Scene_17]
178: loadcache=1
179: visible=0
180: transparent=0
181: paintmode=3
182: alpha=229
183: animation=3
184: animeposition=116,15
185: wait=200
186: 
187: [Scene_18]
188: loadcache=1
189: visible=0
190: transparent=0
191: paintmode=3
192: alpha=242
193: animation=3
194: animeposition=116,15
195: wait=200
196: 
197: [Scene_19]
198: loadcache=1
199: visible=1
200: transparent=0
201: paintmode=3
202: alpha=255
203: animation=3
204: animeposition=116,15
205: wait=200

いつの間にか雪が降り出した、というような情景描写に使えそうですよね。
続いて、時刻のバリエーションを用いたクロスフェード（昼景→夕景→夜景）を示します。

JPYソースを表示

  1: [init]
  2: 
  3: [Scene_01_00]
  4: fileName=koto_bg16_b.jpg
  5: savecache=1
  6: visible=0
  7: transparent=0
  8: paintmode=3
  9: alpha=12
 10: animation=3
 11: wait=50
 12: 
 13: [Scene_01_01]
 14: loadcache=1
 15: visible=0
 16: transparent=0
 17: paintmode=3
 18: alpha=25
 19: animation=3
 20: wait=50
 21: 
 22: [Scene_01_02]
 23: loadcache=1
 24: visible=0
 25: transparent=0
 26: paintmode=3
 27: alpha=38
 28: animation=3
 29: wait=50
 30: 
 31: [Scene_01_03]
 32: loadcache=1
 33: visible=0
 34: transparent=0
 35: paintmode=3
 36: alpha=51
 37: animation=3
 38: wait=50
 39: 
 40: [Scene_01_04]
 41: loadcache=1
 42: visible=0
 43: transparent=0
 44: paintmode=3
 45: alpha=63
 46: animation=3
 47: wait=50
 48: 
 49: [Scene_01_05]
 50: loadcache=1
 51: visible=0
 52: transparent=0
 53: paintmode=3
 54: alpha=76
 55: animation=3
 56: wait=50
 57: 
 58: [Scene_01_06]
 59: loadcache=1
 60: visible=0
 61: transparent=0
 62: paintmode=3
 63: alpha=89
 64: animation=3
 65: wait=50
 66: 
 67: [Scene_01_07]
 68: loadcache=1
 69: visible=0
 70: transparent=0
 71: paintmode=3
 72: alpha=102
 73: animation=3
 74: wait=50
 75: 
 76: [Scene_01_08]
 77: loadcache=1
 78: visible=0
 79: transparent=0
 80: paintmode=3
 81: alpha=114
 82: animation=3
 83: wait=50
 84: 
 85: [Scene_01_09]
 86: loadcache=1
 87: visible=0
 88: transparent=0
 89: paintmode=3
 90: alpha=127
 91: animation=3
 92: wait=50
 93: 
 94: [Scene_01_10]
 95: loadcache=1
 96: visible=0
 97: transparent=0
 98: paintmode=3
 99: alpha=140
100: animation=3
101: wait=50
102: 
103: [Scene_01_11]
104: loadcache=1
105: visible=0
106: transparent=0
107: paintmode=3
108: alpha=153
109: animation=3
110: wait=50
111: 
112: [Scene_01_12]
113: loadcache=1
114: visible=0
115: transparent=0
116: paintmode=3
117: alpha=165
118: animation=3
119: wait=50
120: 
121: [Scene_01_13]
122: loadcache=1
123: visible=0
124: transparent=0
125: paintmode=3
126: alpha=178
127: animation=3
128: wait=50
129: 
130: [Scene_01_14]
131: loadcache=1
132: visible=0
133: transparent=0
134: paintmode=3
135: alpha=191
136: animation=3
137: wait=50
138: 
139: [Scene_01_15]
140: loadcache=1
141: visible=0
142: transparent=0
143: paintmode=3
144: alpha=204
145: animation=3
146: wait=50
147: 
148: [Scene_01_16]
149: loadcache=1
150: visible=0
151: transparent=0
152: paintmode=3
153: alpha=216
154: animation=3
155: wait=50
156: 
157: [Scene_01_17]
158: loadcache=1
159: visible=0
160: transparent=0
161: paintmode=3
162: alpha=229
163: animation=3
164: wait=50
165: 
166: [Scene_01_18]
167: loadcache=1
168: visible=0
169: transparent=0
170: paintmode=3
171: alpha=242
172: animation=3
173: wait=50
174: 
175: [Scene_01_19]
176: loadcache=1
177: visible=1
178: transparent=0
179: paintmode=3
180: alpha=255
181: animation=1
182: wait=50
183: 
184: [Scene_02_00]
185: fileName=koto_bg17_b.jpg
186: savecache=2
187: visible=0
188: transparent=0
189: paintmode=3
190: alpha=12
191: animation=3
192: wait=50
193: 
194: [Scene_02_01]
195: loadcache=2
196: visible=0
197: transparent=0
198: paintmode=3
199: alpha=25
200: animation=3
201: wait=50
202: 
203: [Scene_02_02]
204: loadcache=2
205: visible=0
206: transparent=0
207: paintmode=3
208: alpha=38
209: animation=3
210: wait=50
211: 
212: [Scene_02_03]
213: loadcache=2
214: visible=0
215: transparent=0
216: paintmode=3
217: alpha=51
218: animation=3
219: wait=50
220: 
221: [Scene_02_04]
222: loadcache=2
223: visible=0
224: transparent=0
225: paintmode=3
226: alpha=63
227: animation=3
228: wait=50
229: 
230: [Scene_02_05]
231: loadcache=2
232: visible=0
233: transparent=0
234: paintmode=3
235: alpha=76
236: animation=3
237: wait=50
238: 
239: [Scene_02_06]
240: loadcache=2
241: visible=0
242: transparent=0
243: paintmode=3
244: alpha=89
245: animation=3
246: wait=50
247: 
248: [Scene_02_07]
249: loadcache=2
250: visible=0
251: transparent=0
252: paintmode=3
253: alpha=102
254: animation=3
255: wait=50
256: 
257: [Scene_02_08]
258: loadcache=2
259: visible=0
260: transparent=0
261: paintmode=3
262: alpha=114
263: animation=3
264: wait=50
265: 
266: [Scene_02_09]
267: loadcache=2
268: visible=0
269: transparent=0
270: paintmode=3
271: alpha=127
272: animation=3
273: wait=50
274: 
275: [Scene_02_10]
276: loadcache=2
277: visible=0
278: transparent=0
279: paintmode=3
280: alpha=140
281: animation=3
282: wait=50
283: 
284: [Scene_02_11]
285: loadcache=2
286: visible=0
287: transparent=0
288: paintmode=3
289: alpha=153
290: animation=3
291: wait=50
292: 
293: [Scene_02_12]
294: loadcache=2
295: visible=0
296: transparent=0
297: paintmode=3
298: alpha=165
299: animation=3
300: wait=50
301: 
302: [Scene_02_13]
303: loadcache=2
304: visible=0
305: transparent=0
306: paintmode=3
307: alpha=178
308: animation=3
309: wait=50
310: 
311: [Scene_02_14]
312: loadcache=2
313: visible=0
314: transparent=0
315: paintmode=3
316: alpha=191
317: animation=3
318: wait=50
319: 
320: [Scene_02_15]
321: loadcache=2
322: visible=0
323: transparent=0
324: paintmode=3
325: alpha=204
326: animation=3
327: wait=50
328: 
329: [Scene_02_16]
330: loadcache=2
331: visible=0
332: transparent=0
333: paintmode=3
334: alpha=216
335: animation=3
336: wait=50
337: 
338: [Scene_02_17]
339: loadcache=2
340: visible=0
341: transparent=0
342: paintmode=3
343: alpha=229
344: animation=3
345: wait=50
346: 
347: [Scene_02_18]
348: loadcache=2
349: visible=0
350: transparent=0
351: paintmode=3
352: alpha=242
353: animation=3
354: wait=50
355: 
356: [Scene_02_19]
357: loadcache=2
358: visible=1
359: transparent=0
360: paintmode=3
361: alpha=255
362: animation=1
363: wait=50

時間経過したことが映像だけで分かりますね。
こうした表現を使えば台詞やナレーションによる説明過多に陥ることなく、状況を描写することが可能になります。

まとめとおさらい

今回はクロスフェードを取り上げました。ポイントは以下の通りです。

• クロスフェードを行うには画像の上に透過度を操作して別の画像を一時描画する
• 画像のバリエーションでクロスフェードすると時間経過などの描写が出来る

次回は予期しない一時描画を抑制する方法について説明します。

戻る：アニメ編（その八）

目次

進む：アニメ編（その十）

---

※ 天候変化と時間経過のサンプルに用いた画像はこと。様の素材を使用いたしました。