画像スクロールメニュー

質問

http://www.rakuten.co.jp/plus-tick/

↑まさにこのメニューをそのまんま画像がスクロールするメニューを作りたいのですが、イマイチ作り方が分かりません（泣）

とくに右側の矢印と下にある●のしくみがわかりませんので宜しくお願いします！！

回答No.1

BlurFiltan

> 画像がスクロールするメニューを作りたいのですが

写真は全くスクロールしていませんよ。
白→だんだん現れる→ちゃんと表示される→だんだん消える→白
つまりそのままの場所で現れたり消えたりしているだけです。

写真の枠はスクロールしていますね。
ただし，必ず左方向にしか動きません。
どのボタンをクリックしても左方向に動きます。

作り方や考え方は色々ですが，
上の２つの特徴を考えると，単なる簡単な普通のタイムラインアニメでできますね。

まず写真用の枠を作ります(描きます)。
枠は２枚分の写真が入るだけの物で良いです。

　■■■■■■■■■■■■■
　■□□□□□■□□□□□■
　■□□□□□■□□□□□■
　■□□□□□■□□□□□■
　■■■■■■■■■■■■■

これをムービークリップまたはグラフィックシンボルに変換して，
左の枠が中央に見えている状態から
右の枠が中央に見える状態までモーショントゥイーンで動かします。

その右の枠が中央に見える状態をしばらく持続させるためにそのままフレームを伸ばします。
タイムラインのレイヤーを図的に描くと次のようになります。

　レイヤー　筆・・|●--->|●//////////[]|

（///の部分は実際は斜線があるのではなくグレーになっています。）

これを写真の枚数分コピペで繰り返せば良いわけです。

　レイヤー　筆・・|●--->|●//////////[]|●--->|●//////////[]|…

それで /// の部分で写真をフェードインフェードアウトさせればいいですね。

　レイヤー　筆・・|●--->|●//////////[]|●--->|●//////////[]|…
　レイヤー　筆・・|○　 ［］|●-->|●-->|●|○　 ［］|●-->|●-->|●|…

(上レイヤーが枠で下レイヤーが写真です。)

これでボタンが全く存在しない場合に自動再生されるムービーができます。

写真の下にある●のボタンでは，
それに対応する写真が表示されるフレームに gotoAndPlay() すれば良いのです。

　各写真のこのフレームにgotoAndPlay()
　 ↓
　|●--->|●//////////[]|
　|○　 ［］|●-->|●-->|●|

それで，
写真の下にある●のボタン対応の写真が表示されているときだけは，
その●をボタンではなく，緑色の塗りにでもしておけば良いでしょう。

右の縦長ボタンも同じです。
次の写真が表示されるフレームに gotoAndPlay() すれば良いのです。

gotoAndPlay() 自体は ActionScript1.0～3.0(Flash5～FlashCS4)まで同じです。
他の部分のスクリプトや，その書き方や場所 はバージョンによって変わるので何とも言えません。