※ 引述《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