アニメFlash で背景を循環（ループ）スクロールさせる法　(安倍) 　08/1/14

画像を横方向に循環スクロールさせる方法は　→　こちらをどうぞ

背景画像をスクロールさせるには、単位画像が相互に連続的に繋がる必要がある。その方法としては、下記２つの方法がある。

1. 画像両サイド部分の色調が連続的になるように画像修正する。（無地の単色なら簡単だが複雑画像の場合は面倒。 フリーソフトあり※）
2. （裏技）基本画像（下図A）を180°反転させた画像（下図B）を組み合わせれば　画像の両サイドはどんな複雑画像でも必ず両端（AB、BAともに）境目は色調を含めピタリ一致するので背景スクロールに使用すると便利である。　
   ただし、文字入りなど反転画像が不自然になる場合は不可。

図・A		図・B

レイヤー１が右に動いたら、左から同じ画像のレイヤー２が同時に現れてみかけ上　同一画面に見させる方法です。
この２レイヤー法を使えば 　表示幅と同一幅の画像を用意すればよいので広幅表示にも対応でき、オススメである。

1）背景画像として、基本画像（上図・A）のみを使用：
・この方法は、画像が連続的に繋がるようにするために端面部分の画像修正が必要である。　フリーソフトあり※）
・Flash で　
レイヤー１：　　スタート：画像（全体）を表示画面に合わせる。　　終了：画像左端を表示画面の右端に合わせる。
レイヤー２：　　スタート：画像右端を表示画面の左端に合わせる。　　終了：画像（全体）を表示画面に合わせる。
タイムライン：　レイヤー１，２ とも、0スタートで終了も両者同時にする。　即ち、両レイヤーは同時進行させる。　下の例は（SWF:32KB）

2）（裏技）背景画像として、基本画像（図・A）と１８０°反転させた（図・B）を組合せた場合：
・表示幅と同一幅の画像を用意すればよいので広幅表示に便利である。
下の例は、横幅A+B (下図・BA) の画像を作り、この幅 を表示窓にして、画像BAの２つのレイヤーを作り、両者を表示窓幅分ずらして、タイムラインを両者同時進行で 移動させた。　　 　 （SWF:42KB）
・表示画像幅はこれより狭くしても、むろんOKである。

図・BA

1）背景画像として、基本画像（図・A）のみを使用：
・この方法は、下図のように表示幅の２倍幅画像（A+A）を用意し、さらに、２レイヤー法の 1）と同じく画像両端が連続的に繋がるように画像修正が必要である。　

2）（裏技）背景画像として、基本画像（図・A）と１８０°反転させた（図・B）を組合せた場合：
・この方法は原画修正がないので簡単だが、表示幅の３倍幅画像が必要で広幅表示には不適である。
・３倍幅画像は、ＡＢＡ　の配列（下図）にすることにより画像修正せずに連続的につながる。
・Flash で　スタート：画像右端を表示画面の右端。　　終了：画像左端が表示画面の左端。　にする。 （SWF:51KB）

図・ABA

・１レイヤーで行なう場合は、表示窓の２〜３倍幅の画像が必要。　一方、
・２レイヤーで行なう場合は、表示窓と等倍幅の画像でよい。　従って、２レイヤー法がよい。
・背景画像は、（裏技）180°反転画像と組み合わせると便利。

犬アニメの挿入法は → こちら参照　　

このページでの使用ソフト：PhotoShop ／ FlashMaker3

BACK