Re: [問題] 關於浮動按鈕

看板Flash作者jonathanmeow (喵)時間19年前 (2007/01/14 20:23)推噓4(4推 0噓 0→)

留言4則, 3人參與討論串2/2 (看更多)

※ 引述《proust1900 (普魯斯特)》之銘言： : 像這個網站這樣的http://www.glay.co.jp/ : 跟著滑鼠移動 : 也改變其透明度的浮動解釋 : 想了很久 : 希望有人為我解答(⊙o⊙) 先說明我無法做得跟該網頁一模一樣但是我說說我的看法若只是要讓說明視窗跟著滑鼠移動那只要將說明視窗的xy座標在MouseMove的時候跟著_xmouse和_ymouse跑既可這樣子滑鼠一動那說明視窗就會跟著滑鼠動但是該網頁的說明視窗會在移入選單後從剛剛滑鼠的軌跡走過來也就是說明視窗是追著滑鼠跑的我想他應該是歸功於利用一個Array將滑鼠移動時的座標存起來並且讓說明視窗的xy座標等於一段時間之前的_xmouse和_ymouse 可是這樣子如果是MouseMove時才存入滑鼠座標到Array中剛測試好像有一點問題.... 所以我設定OnEnterFrame的時候就一直存入滑鼠的座標但又怕這個Array太大所以我設定他的長度只能是6 若超過6 就移除第0個因此這一段的程式碼是這樣的 _root.onEnterFrame=function () { //當array的長度等於6時移除第一個 if(mousetraceX_array.length==6){ mousetraceX_array.shift(); mousetraceY_array.shift(); } //每次EnterFrame時就把滑鼠的座標存入array中 //又，該網頁的說明視窗離滑鼠還有一點點距離大概往左5像素 //所以在存入的時候讓x座標往左5像素 mousetraceX_array.push(_root._xmouse-5); mousetraceY_array.push(_root._ymouse); //所以若滑鼠不動的時候 array的6個值都會是一樣的 //每次EnterFrame的時候 //都讓說明視窗(smooth_mc)的xy座標更新為前面紀錄的滑鼠軌跡 smooth_mc._x=mousetraceX_array[0]; smooth_mc._y=mousetraceY_array[0]; 以上就可以讓說明視窗隨著滑鼠的軌跡跑並且和滑鼠有一段距離感覺像是視窗追著滑鼠跑然後接下來是淡入淡出的部份這裡我們要知道何時淡入淡出就是當滑鼠移到選單的時候說明視窗會跟著滑鼠軌跡淡入到現在滑鼠的位置而當滑鼠移開選單的時候就會淡出因此我們必須要先判斷滑鼠是否在說明視窗上此地我選擇hitTest來做是否碰到滑鼠因為選單元件不多不然也可以另外寫個選單的onRollOver事件重點是要設定兩個變數讓電腦知道"說明視窗要出現怎樣的說明" 以及"滑鼠碰到選單了" 由於我這裡適用巢狀if...else if 所以"說明視窗要出現怎樣的說明"的部份我就直接讓說明視窗gotoAndStop到相對應的影格不另外作變數而"滑鼠碰到選單了" 我就用變數hit去紀錄接著判斷hit是否為真若是讓透明度每次EnterFrame時增加10直到70 hit若為否讓透明度每次EnterFrame時減少10直到0 //以下判斷個選單是否碰到滑鼠 //若有則設定hit是true的， //且說明視窗(smooth_mc)gotoAndStop至相對應的影格 if(a1_mc.hitTest(_root._xmouse,_root._ymouse)){ hit=true; smooth_mc.gotoAndStop("content1"); }else if(a2_mc.hitTest(_root._xmouse,_root._ymouse)){ hit=true; smooth_mc.gotoAndStop("content2"); }else if(a3_mc.hitTest(_root._xmouse,_root._ymouse)){ hit=true; smooth_mc.gotoAndStop("content3"); }else if(a4_mc.hitTest(_root._xmouse,_root._ymouse)){ hit=true; smooth_mc.gotoAndStop("content4"); }else if(a5_mc.hitTest(_root._xmouse,_root._ymouse)){ hit=true; smooth_mc.gotoAndStop("content5"); }else if(a6_mc.hitTest(_root._xmouse,_root._ymouse)){ hit=true; smooth_mc.gotoAndStop("content6"); }else{ hit=false; } //若滑鼠有碰到說明選單(hit為真) //那就讓說明視窗的透明度一直增加10直到70 //而若透明度增加10之後會超過70(也就是還沒加10是等於或比60大) //就直接設定其為70 //反之亦然 if(hit){ if(smooth_mc._alpha>=60){ smooth_mc._alpha=70; }else{ smooth_mc._alpha=smooth_mc._alpha+10; } }else{ if(smooth_mc._alpha<=10){ smooth_mc._alpha=0; }else{ smooth_mc._alpha=smooth_mc._alpha-10; } } } 以上就可以有類似該網頁的效果但是還是有一點點差異我覺得這樣寫出來說明視窗好像沒有那麼優雅個人認為該網頁應該不只是讓說明視窗跟著滑鼠跑還會說在接近滑鼠的時候變慢靠近的速度這裡可能就要更進一步做說明視窗x y座標的設定了應該是設定說明視窗的速度至於怎麼做我就不是很清楚了需要時間再想想以上程式原始檔 http://163.19.207.214/flash/smooth.fla 另外這個還可以微調的部份 "透明度" 不一定要70 "透明度增減" 不一定要+-10，可以更多或更少 "滑鼠軌跡Array" 不一定只要紀錄6組還可以更多或更少 "hitTest"的部份可以用onRollOver代替，這樣要增加選單比較容易修改程式碼 "說明視窗"的各影格可以透過繪圖和TextField以及XML等方式做更動態的調整不用像我這樣子都寫死但是如果只用一次以後很少修改的話那用我這樣的方式寫就可以了.... 其他有想到再補充.... -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.141.0.109