前兩個星期抽時間看了看一直很感興趣卻沒時間研究的XML類和繪圖API 覺得也沒之前想象的那么神秘:)
用了三個晚自習(xí)的時間用AS1.0寫了這個純AS+XML的滾動條,算做練習(xí)吧。 請高手多多指教!
下面是所有的AS代碼:
//%%%%%%%%%%%%MC類自定義方法%%%%%%%%%%%%// //——————繪圖方法————// //三角型方法 MovieClip.prototype.sanjiaoxing = function(zuobiao1, zuobiao2, zuobiao3, bangzhi, yanse, toumingdu) { this.lineStyle(bangzhi, yanse, toumingdu); this.moveTo(zuobiao1.x, zuobiao1.y); this.lineTo(zuobiao2.x, zuobiao2.y); this.lineTo(zuobiao3.x, zuobiao3.y); this.lineTo(zuobiao1.x, zuobiao1.y); }; //寬高矩形法,根據(jù)初始點坐標(biāo)和寬與高確定矩形。x,y為初始點坐標(biāo),kuan和gao為矩形的寬和高。 MovieClip.prototype.changkuanjuxing = function(x, y, kuan, gao, bangzhi, yanse, toumingdu) { this.lineStyle(bangzhi, yanse, toumingdu); this.moveTo(x, y); this.lineTo(x+kuan, y); this.lineTo(x+kuan, y+gao); this.lineTo(x, y+gao); this.lineTo(x, y); }; //中心點矩形法,根據(jù)中心點的坐標(biāo)和寬與高確定矩形。x,y為中心點坐標(biāo),kuan,gao為矩形的長和寬。 MovieClip.prototype.zhongxinjuxing = function(x, y, kuan, gao, bangzhi, yanse, toumingdu) { this.lineStyle(bangzhi, yanse, toumingdu); this.moveTo(x-kuan/2, y+gao/2); this.lineTo(x+kuan/2, y+gao/2); this.lineTo(x+kuan/2, y-gao/2); this.lineTo(x-kuan/2, y-gao/2); this.lineTo(x-kuan/2, y+gao/2); }; //————定位方法————// MovieClip.prototype.dingwei = function(x, y) { this._x = x; this._y = y; }; //————上色方法————// //定義一個獲取顏色值,并把它轉(zhuǎn)化成16進(jìn)制的函數(shù) //獲取顏色值的后六位,使此方法可以同時滿足“#FFFFFF”和“0xFFFFFF”兩種格式的顏色值 function jinzhizhuanhuan(yansezhi) { var yansezhi = yansezhi.substr(-6, 6); return parseInt(yansezhi, 16); } Color.prototype.shangse = function(yansezhi) { this.setRGB(jinzhizhuanhuan(yansezhi)); }; MovieClip.prototype.shangse = function(yansezhi) { var linshi_color = new Color(this); linshi_color.shangse(yansezhi); }; //%%%%%%%%%%%加載XML文檔%%%%%%%%%%%%%// gundongtiao_xml = new XML(); gundongtiao_xml.ignoreWhite = true; gundongtiao_xml.load("gundongtiao.xml"); gundongtiao_xml.onLoad = function() { var jiedianlujing_xml = gundongtiao_xml.firstChild.childNodes; //滾動條背景參數(shù) with (jiedianlujing_xml[0]) { var gundongtiaobeijingse = jinzhizhuanhuan(attributes["背景色"]); var gundongtiaotoumingdu = attributes["背景透明度"]; var gundongtiaobiankuangse = jinzhizhuanhuan(attributes["邊框色"]); var gundongtiaobiankuangtoumingdou = attributes["邊框透明度"]; var gundongtiaobiankuangcuxi = attributes["邊框粗細(xì)"]; var gundongtiaokuan = attributes["寬"]; } //方塊參數(shù) with (jiedianlujing_xml[1]) { var fangkuaibeijingse = jinzhizhuanhuan(attributes["背景色"]); var fangkuaitoumingdu = attributes["背景透明度"]; var fangkuaibiankuangse = jinzhizhuanhuan(attributes["邊框色"]); var fangkuaibiankuangtoumingdou = attributes["邊框透明度"]; var fangkuaibiankuangcuxi = attributes["邊框粗細(xì)"]; } //三角參數(shù) with (jiedianlujing_xml[2]) { var sanjiaoyuanshise = jinzhizhuanhuan(attributes["原始色"]); var sanjiaohuodongse = jinzhizhuanhuan(attributes["活動色"]); //記錄下原始色和活動色,以備在“上”,“下”按鈕中使用 jiluyuanshise = attributes["原始色"]; jiluhuodongse = attributes["活動色"]; var sanjiaotoumingdou = attributes["透明度"]; } //滑塊參數(shù) with (jiedianlujing_xml[3]) { var huakuaibeijingse = jinzhizhuanhuan(attributes["背景色"]); var huakuaitoumingdu = attributes["背景透明度"]; var huakuaibiankuangse = jinzhizhuanhuan(attributes["邊框色"]); var huakuaibiankuangtoumingdou = attributes["邊框透明度"]; var huakuaibiankuangcuxi = attributes["邊框粗細(xì)"]; } //先根據(jù)文本域的高確定滾動條的高 gundongtiaogao = wenben_txt._height; ////////////中心法繪制滾動條背景矩形條 createEmptyMovieClip("gundongtiao_mc", 1000); gundongtiao_mc.beginFill(gundongtiaobeijingse, gundongtiaotoumingdu); gundongtiao_mc.zhongxinjuxing(0, 0, gundongtiaokuan, gundongtiaogao, gundongtiaobiankuangcuxi, gundongtiaobiankuangse, gundongtiaobiankuangtoumingdou); gundongtiao_mc.endFill(); //根據(jù)文本域的位置確定滾動條位置,使其緊貼在文本域的右端 gundongtiao_mc.dingwei(wenben_txt._x+wenben_txt._width+gundongtiao_mc._width/2, wenben_txt._y+wenben_txt._height/2); /////////中心點矩形法繪制滾動條上下按鈕 //////繪制上按鈕背景方塊 gundongtiao_mc.createEmptyMovieClip("shangfangkuai_mc", 1); gundongtiao_mc.shangfangkuai_mc.beginFill(fangkuaibeijingse, fangkuaitoumingdu); gundongtiao_mc.shangfangkuai_mc.zhongxinjuxing(0, 0, gundongtiao_mc._width, gundongtiao_mc._width, fangkuaibiankuangcuxi, fangkuaibiankuangse, fangkuaitoumingdu); gundongtiao_mc.shangfangkuai_mc.endFill(); //定位上按鈕背景方塊 gundongtiao_mc.shangfangkuai_mc.dingwei(0, -gundongtiao_mc._height/2+gundongtiao_mc.shangfangkuai_mc._height/2); //////繪制上按鈕三角形 gundongtiao_mc.createEmptyMovieClip("shangsanjiao_mc", 2); //中心點法繪制三角形 //首先定義一個因子,此因子等于正三角形中心到各頂點的距離,用來定位三角形各頂點的位置。 var yinzi = gundongtiaokuan/3; var zuobiao1x = -1/2*Math.pow(3, 1/2)*yinzi; var zuobiao1y = 1/2*yinzi; var zuobiao2x = 1/2*Math.pow(3, 1/2)*yinzi; var zuobiao2y = 1/2*yinzi; var zuobiao3x = 0; var zuobiao3y = -yinzi; var zuobiao1 = {x:zuobiao1x, y:zuobiao1y}; var zuobiao2 = {x:zuobiao2x, y:zuobiao2y}; var zuobiao3 = {x:zuobiao3x, y:zuobiao3y}; gundongtiao_mc.shangsanjiao_mc.beginFill(sanjiaoyuanshise, sanjiaotoumingdou); gundongtiao_mc.shangsanjiao_mc.sanjiaoxing(zuobiao1, zuobiao2, zuobiao3, 1, 0x000000, 0); gundongtiao_mc.shangsanjiao_mc.endFill(); //定位上三角形 gundongtiao_mc.shangsanjiao_mc.dingwei(0, -gundongtiao_mc._height/2+gundongtiao_mc.shangfangkuai_mc._height/2); //////復(fù)制上按鈕背景方塊和三角形,并定位于下方 //復(fù)制下方塊 gundongtiao_mc.shangfangkuai_mc.duplicateMovieClip("xiafangkuai_mc", 3); //定位下按鈕背景方塊,這里的Y坐標(biāo)加一,是為了讓下方塊跟文本框底部對齊! gundongtiao_mc.xiafangkuai_mc.dingwei(0, Math.floor(gundongtiao_mc._height/2-gundongtiao_mc.xiafangkuai_mc._height/2)+1); //復(fù)制下三角形 gundongtiao_mc.shangsanjiao_mc.duplicateMovieClip("xiasanjiao_mc", 4); //旋轉(zhuǎn)180度 gundongtiao_mc.xiasanjiao_mc._rotation = 180; //定位下三角形 gundongtiao_mc.xiasanjiao_mc.dingwei(0, gundongtiao_mc._height/2-gundongtiao_mc.xiafangkuai_mc._height/2); ///////////繪制滑塊 //長寬矩形法繪制滑塊矩形 gundongtiao_mc.createEmptyMovieClip("huakuai_mc", 5); gundongtiao_mc.huakuai_mc.beginFill(huakuaibeijingse, huakuaitoumingdu); gundongtiao_mc.huakuai_mc.changkuanjuxing(-gundongtiao_mc._width/2, 0, gundongtiao_mc._width, gundongtiao_mc._width, huakuaibiankuangcuxi, huakuaibiankuangse, huakuaibiankuangtoumingdou); gundongtiao_mc.huakuai_mc.endFill(); //---------滾動初始化---------// //滑塊的初始高度,并記錄 chushigaodu = Math.floor(gundongtiao_mc.xiafangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._height); //初始化滑塊Y坐標(biāo),并記錄 ychushiweizhi = gundongtiao_mc.huakuai_mc._y=Math.round(gundongtiao_mc.shangfangkuai_mc._y+gundongtiao_mc. shangfangkuai_mc._height/2); //小滑塊不可見 gundongtiao_mc.huakuai_mc._visible = false; }; //%%%%%%%%%%%%%%%%滾動代碼%%%%%%%%%%%%%%%%%%// //////////為父剪輯的文字域注冊偵聽器,以偵聽在文字域產(chǎn)生變化時,也就是在文本被載入進(jìn)來時,執(zhí)行下面的代碼。這樣就不用擔(dān)心代碼執(zhí)行順序問題! var zhentingqi = new Object(); wenben_txt.addListener(zhentingqi); //當(dāng)文字域載入完成時,為什么觸發(fā)onScroller事件,而不是onChange事件? zhentingqi.onScroller = function() { trace("-------------------------"); trace("滾動總行數(shù)="+wenben_txt.maxscroll); trace("當(dāng)前行="+wenben_txt.scroll); //判斷滑塊兒是否顯示,并根據(jù)文本內(nèi)容多少定義滑塊高度 if (_parent.wenben_txt.maxscroll != 1) { gundongtiao_mc.huakuai_mc._visible = true; //定義一個高度因子,此因子隨加載文本的增多,將無限趨向于1。 var gaoduyinzi = 1-(wenben_txt.maxscroll-1.5)/wenben_txt.maxscroll; //初始化滑塊的高度,它的最小高度定義為2象素。 gaodu = gundongtiao_mc.huakuai_mc._height=Math.floor(chushigaodu*Math.pow(gaoduyinzi, 1/6)); trace("滑塊高="+gaodu); } //滑塊滾動的總象素數(shù) var zongxiangsu = gundongtiao_mc.xiafangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._height-gundongtiao_mc.huakuai_mc._height; //定義平均象素,每一行所包含的像素數(shù),即文本域每滾動一行,滑塊需要移動的象素數(shù)。 var pingjunxiangsu = zongxiangsu/(wenben_txt.maxscroll-1); //定義平均行數(shù),每一像素包含的行數(shù),即滑塊每移動一象素,文本域在理論上應(yīng)當(dāng)滾動的行數(shù)(盡管非整數(shù)行在視覺上沒有反映)。 var pingjunhangshu = (wenben_txt.maxscroll-1)/Math.floor(zongxiangsu); trace("滾動總象素="+zongxiangsu); trace("平均象素值="+pingjunxiangsu); ///////////定義上按鈕 gundongtiao_mc.shangfangkuai_mc.onRollOver = function() { gundongtiao_mc.shangsanjiao_mc.shangse(jiluhuodongse); this.onPress = function() { this.onEnterFrame = function() { wenben_txt.scroll--; // 使滑塊兒移動到相應(yīng)的位置。 gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1); trace("滑塊Y坐標(biāo)="+gundongtiao_mc.huakuai_mc._y); }; }; this.onRelease = function() { delete this.onEnterFrame; }; this.onRollOut = function() { gundongtiao_mc.shangsanjiao_mc.shangse(jiluyuanshise); }; }; ////////////定義下按鈕 gundongtiao_mc.xiafangkuai_mc.onRollOver = function() { gundongtiao_mc.xiasanjiao_mc.shangse(jiluhuodongse); this.onPress = function() { this.onEnterFrame = function() { wenben_txt.scroll++; //使滑塊兒移動到相應(yīng)的位置。 gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1); trace("滑塊Y坐標(biāo)="+gundongtiao_mc.huakuai_mc._y); }; }; this.onRelease = function() { delete this.onEnterFrame; }; this.onRollOut = function() { gundongtiao_mc.xiasanjiao_mc.shangse(jiluyuanshise); }; }; ///////////換用MOUSE對象的onMouseWheel方法結(jié)合偵聽器實現(xiàn)滑塊隨鼠標(biāo)滾球滾動 mouseListener = new Object(); Mouse.addListener(mouseListener); mouseListener.onMouseWheel = function(delta) { delta = 1; gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1); }; ///////////滑塊MC事件處理,當(dāng)鼠標(biāo)經(jīng)過或按下時 gundongtiao_mc.huakuai_mc.onPress = function() { //開始拖動 this.startDrag(false, this._x, ychushiweizhi, this._x, Math.round(gundongtiao_mc.xiafangkuai_mc._y-gundongtiao_mc.xiafangkuai_mc._height/2-gundongtiao_mc.huakuai_mc._height)); //使文本隨滑塊滾動 this.onEnterFrame = function() { //在滾動過程中即時獲得“滑塊所處位置” var xianzaiweizhi = Math.floor(this._y); trace("現(xiàn)在位置="+xianzaiweizhi); //使文本隨滾動條滾動,這里為什么要加1,可見scroll屬性值應(yīng)該是取正的,也就是說它會刪除小數(shù)部分,而非采用四舍五入制? wenben_txt.scroll = (xianzaiweizhi-ychushiweizhi)*pingjunhangshu+1; trace("scroll值="+Math.floor((xianzaiweizhi-ychushiweizhi)*pingjunhangshu+1)); trace("初始位置="+ychushiweizhi); trace("現(xiàn)在位置="+xianzaiweizhi); }; }; //滑塊MC事件處理,鼠標(biāo)移出或釋放時 gundongtiao_mc.huakuai_mc.onRollOut = gundongtiao_mc.huakuai_mc.onRelease=function () { // “滑塊”停止拖動 this.stopDrag(); // 停止文本隨滑塊滾動事件 delete this.onEnterFrame; }; };
下面是XML文檔代碼:
<?xml version="1.0" encoding="UTF-8"?> <滾動條> <滾動條背景 背景色="#666666" 背景透明度="100" 邊框色="#666666" 邊框透明度="100" 邊框粗細(xì)="1" 寬="20"/> <方塊 背景色="#000000" 背景透明度="100" 邊框色="#999999" 邊框透明度="100" 邊框粗細(xì)="0"/> <三角 原始色="#ffff00" 活動色="#ff0000" 透明度="100"/> <滑塊 背景色="#000000" 背景透明度="100" 邊框色="#999999" 邊框透明度="100" 邊框粗細(xì)="0"/> </滾動條>
說明:
由于我這個滾動條是完全由AS寫成的,你只需要像在HTML網(wǎng)頁中插入JS腳本一樣,把上面的那段AS代碼插入你的文本域所在貞,運行后,就會自動繪制滾動條并吸附到你的文本框右邊了! 注意: ★你的文本域要命名為:wenben_txt。由于是練習(xí),我沒處理接口,不好意思:) ★你可以在XML中修改相應(yīng)的參數(shù)。 ★這個滾動條基本具備了scrollbar組件的所有功能,包括精確定位,而且避免了在輸入文本時容易產(chǎn)生的滑塊跳動事件。當(dāng)然,最最關(guān)鍵的是:我這個滾動條只有2K多! ★這個作品純屬自娛自樂,挑戰(zhàn)自我。采用基于原型的AS1.0,代碼寫的比較亂,請前輩高手多多指教。
經(jīng)典論壇討論帖: http://m.95time.cn/bbs/NewsDetail.asp?id=2497990
出處:藍(lán)色理想
責(zé)任編輯:moby
◎進(jìn)入論壇Flash專欄版塊參加討論
|