|
前兩個星期抽時間看了看一直很感興趣卻沒時間研究的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://www.95time.cn/bbs/NewsDetail.asp?id=2497990
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇Flash專欄版塊參加討論
|
