ActionScript スクロールメニュー

ActionScriptで以下のサイトのように、下段のサムネールが左右にスクロールするメニューを作成したいのですが、実現方法がわかりません。

http://www.wasedazemi.com/

・下段の最右、または最左の矢印ボタンを押すとその方向にメニュー1個分スクロールし、下段の真ん中のメニューの画像が上段に表示される。
・下段の任意のサムネールを押すとその画像が下段真ん中に移動し、上段にその画像が表示される。
・下段のサムネールはループしていて、スクロールをし続けても端にならずに回り続ける。
・上段の画像にマウスオーバーすると青い枠線が表示される。

ActionScript 3.0、Flash CS5を利用しています。

ご教授よろしくお願いいたします。

No.1 ベストアンサー 回答者： BlurFiltan 回答日時： 2013/10/04 18:52

質問内容が欲張り過ぎでしょう。

まるで業者に対する客の仕様発注書です。

質問に全て回答するなら本ができてしまいますよ。
(内容がそれだけ難しいという意味ではなく，「論理」や「手順」を説明するには相当な字数や画像が必要という意味。)

字数制限も厳しく画像が１枚しか貼れないココでは説明不可能です。


特に，

>・上段の画像にマウスオーバーすると青い枠線が表示される。

それくらいのこと
モーショントゥイーンとかシェイプトゥイーンとか使って自力で作成すべきでしょう。


とにかく字数制限もあるため
上記以外の項目についてスクリプトのみ(日本語説明抜き)で回答します。

CS5 で新規ドキュメントを作成し
フレーム1にコピペするスクリプト例です↓。



//---------------------------
[SWF(frameRate = "20",width = "940",height = "380")]

var col_arr:Array = [0xFF6666,0x66FF66,0x6666FF,0xCCCC00,0xCC66CC,0x66CCCC];

var c_len:int = col_arr.length;

var cnt:int = 0;

var big_mc_arr:Array = new Array();
for (var i:int = 0; i<c_len; i++) {
big_mc_arr[i] = new MovieClip();
with (big_mc_arr[i].graphics) {
beginFill(col_arr[i]);
drawRect(0,0,900,280);
endFill();
}
big_mc_arr[i].x = 20;
big_mc_arr[i].y = 20;
addChild(big_mc_arr[i]);
}

var slide_mc:MovieClip = new MovieClip();
slide_mc.x = 50;
slide_mc.y = 310;
addChild(slide_mc);

var small_mc_arr:Array = new Array();
for (i= 0; i<c_len*2; i++) {
small_mc_arr[i] = new MovieClip();
with (small_mc_arr[i].graphics) {
beginFill(col_arr[(i>=c_len)? i-c_len:i]);
drawRect(0,0,160,50);
endFill();
}
small_mc_arr[i].n = i;
small_mc_arr[i].x = 170 * i;
small_mc_arr[i].addEventListener(MouseEvent.CLICK,setCnt);
slide_mc.addChild(small_mc_arr[i]);
}

var mask_mc:MovieClip = new MovieClip();
with (mask_mc.graphics) {
beginFill(0x000000);
drawRect(0,0,840,50);
endFill();
}
mask_mc.x = 50;
mask_mc.y = 310;
addChild(mask_mc);

slide_mc.mask = mask_mc;

var l_btn_shape:Shape = new Shape();
with (l_btn_shape.graphics) {
beginFill(0x666666);
drawRect(0,0,20,50);
endFill();
beginFill(0xFFFFFF);
moveTo(3,25);
lineTo(15,18);
lineTo(15,32);
endFill();
}

var l_btn:SimpleButton = new SimpleButton();
with (l_btn) {
upState = overState = downState = hitTestState = l_btn_shape;
x = 20;
y = 310;
}
addChild(l_btn);

var r_btn_shape:Shape = new Shape();
with (r_btn_shape.graphics) {
beginFill(0x666666);
drawRect(0,0,20,50);
endFill();
beginFill(0xFFFFFF);
moveTo(5,18);
lineTo(17,25);
lineTo(5,32);
endFill();
}

var r_btn:SimpleButton = new SimpleButton();
with (r_btn) {
upState = overState = downState = hitTestState = r_btn_shape;
x = 900;
y = 310;
}
addChild(r_btn);

slide_mc.addEventListener(Event.ENTER_FRAME,approacheSlide);

function approacheSlide(e:Event):void {
e.target.x += ((cnt*170+50)-e.target.x)/5;
if (e.target.x>50) {
e.target.x-=c_len*170;
cnt-=c_len;
} else if (e.target.x < 50-c_len*170) {
e.target.x+=c_len*170;
cnt+=c_len;
}
}

l_btn.addEventListener(MouseEvent.CLICK,upCnt);

function upCnt(e:Event):void {
cnt+=1;
setBigMC();
}

r_btn.addEventListener(MouseEvent.CLICK,downCnt);

function downCnt(e:Event):void {
cnt-=1;
setBigMC();
}

function setCnt(e:Event):void {
cnt=2-e.currentTarget.n;
setBigMC();
}

function setBigMC():void {
addChild(big_mc_arr[(cnt <= 2-c_len)?2-cnt-c_len:2-cnt]);
}

setBigMC();

var tmr:Timer=new Timer(5000,0);
tmr.addEventListener(TimerEvent.TIMER,downCnt);
tmr.start();

this.addEventListener(MouseEvent.MOUSE_OVER,stopTimer);

function stopTimer(e:MouseEvent):void {
tmr.stop();
}

this.addEventListener(MouseEvent.MOUSE_OUT,startTimer);

function startTimer(e:MouseEvent):void {
tmr.start();
}

var point_sh:Shape = new Shape();
with (point_sh.graphics) {
beginFill(0x666666);
moveTo(0,0);
lineTo(0,-3);
lineTo(74,-3);
lineTo(80,-8);
lineTo(86,-3);
lineTo(160,-3);
lineTo(160,-0);
endFill();
}
point_sh.x=390;
point_sh.y=309;
addChild(point_sh);
//---------------------------



上記スクリプトを フレーム1 にコピペして
そのままパブリッシュやムービープレビューなどすれば動作確認できると思います。


本来 Sprite で済む部分にも
あえて MovieClip を使っているのは
「本来そのようなものはそういうムービークリップを手作業で作れば良い。」
という意味合い(思い)を含めています。

この回答へのお礼

丁寧なご回答ありがとうございます！！
頂いたサンプルを元に作成してみます。

お礼日時：2013/10/04 22:52