画像をループさせるうまい方法を教えてください。

質問

Flash 8 (ActionScript2.0)

画像をドラッグで移動させる処理をしているんですが、
画像をループ（横のみ）させて、表示するにはどうすればいいでしょうか？
つまり、画像を横に移動し続けて画像の端がくれば、また画像の最初からあたかも画像が繋がっているかのように表示したいです。

良い処理の仕方、アルゴリズムを教えてください。

回答No.1

BlurFiltan · ベストアンサー

表示させたい画像が

　ＡＢＣＤＥ

という柄の一枚の画像であって，
ＢＣＤのみが見えているとします。

　　　　ＡＢＣＤＥ
　　　　　└┬┘
　　　　　見えている範囲(例えばステージの範囲)

このような場合，
簡単にするにはこの画像を左右に２つ，もしくは３つ並べます。
左右に２つ並べるとするなら次のような感じになります。

　　　　ＡＢＣＤＥＡＢＣＤＥ
　　　　　└┬┘
　　　　　見えている範囲

たとえば，
この２つ並べた画像を右に１つ動かしたとします

　　　　　ＡＢＣＤＥＡＢＣＤＥ
　　　　　└┬┘
　　　　　見えている範囲

さらにもう１つ動かしたとします。

　　　　　　ＡＢＣＤＥＡＢＣＤＥ
　　　　　└┬┘
　　　　　見えている範囲

Ａの画像の左に背景が見えてしまいますから，この時点で アウト! です。
アウトになった瞬間，ＡＢＣＤＥの幅と同じ座標分，左に画像を動かします。

　ＡＢＣＤＥＡＢＣＤＥ
　　　　　└┬┘
　　　　　見えている範囲

これでＡの左の背景が見えなくなりＡの左にはＥが表示されます。

だいたいこのようなパターンが多いです。
左右に画像を並べるのは手動でコピペでも良いですし，
ActionScriptでコピペしても良いです。
ＡＢＣＤＥＡＢＣＤＥ
と２重（または３重）連結された画像を同じムービークリップの中に入れて，
１つのムービークリップとして動かすのが簡単です。

「無限にスクロールするメニュー　FLASHRAVE - FLASH 講座 -」
http://flashrave.org/anima/infinity_scroll/
～引用～
> 動作の概要としては、初期表示時に「MENU00」を
> 上下に一つずつ複製して配置しています。
> スクロールボタンにマウスが重なることで
> この複製物を合わせた3つのシンボルを移動させ、
> 一定距離移動すると元の場所に戻すことで
> 無限にスクロールしているように錯覚させています。

「Flash MX ActionScript　ほぼ10行道場」
http://book.mycom.co.jp/support/e5/actionscript10/
　→Chapter13　その他のバリエーション
　　→13-01　無限ループ背景

しかしそんなことより，
ループした画像（ちゃんとつながる画像）を作成するアルゴリズム(というべき？)の方が場合によっては難しいと思います。

ＡＢＣＤＥという別々の写真が５枚あって，５枚セットで１枚の画像でしたら簡単ですが，
横長い風景写真であったり，地図であったりする場合はどうするのでしょうか？？？
その辺の工夫の方が難しい気がします。

たとえば風景写真で

　山川町丘海

というようなものの場合，
この画像を左右反転させた画像を１枚の画像とするとうまくつながる場合があります。

　山川町丘海海丘町川山

これを２重連結させますから

　山川町丘海海丘町川山山川町丘海海丘町川山

山と海の部分をなんとかごまかせばうまく行くと思います。

しかし地図のような画像ではそれはできませんし...，
もしそのような画像の場合はどうにかこうにか考えてみてください。

お礼

図入りの解説で分かりやすかったです。
ありがとうございました。

回答No.2

BlurFiltan

＃１です。

わかるかどうかが不安になったので，＃１ の補足をします。

＃１で書いたのはアルゴリズム，いわば考え方です。
考え方のみではなく，
具体的なスクリプト例と，ムービークリップの構造を図示します。

左右に２枚の画像を連結して，
その画像の左端を基準点に設定してムービークリップに変換したとします。
そのムービークリップ自体に書くスクリプト例です。

---------------------------------------------------------
on (press) {
this.startDrag(false, -10000, this._y, 10000, this._y);
}
on (release) {
this.stopDrag();
}
on (releaseOutside) {
this.stopDrag();
}
onClipEvent (mouseMove) {
if (this._x<-this._width/2) {
this._x += this._width/2;
} else if (this._x>0) {
this._x -= this._width/2;
}
updateAfterEvent();
}
---------------------------------------------------------

このスクリプトを書くムービークリップとは，
下の図のように作成したものの場合です。