ActionScript学习：用纯AS写滚动条

王朝other·作者佚名 2008-05-19

宽屏版字体: 小|中|大|超大

前两个星期抽时间看了看一直很感兴趣却没时间研究的XML类和绘图API

觉得也没之前想象的那么神秘：）

用了三个晚自习的时间用AS1.0写了这个纯AS+XML的滚动条，算做练习吧。

请高手多多指教！

下面是所有的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);

};

//宽高矩形法，根据初始点坐标和宽与高确定矩形。x，y为初始点坐标，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);

};

//中心点矩形法，根据中心点的坐标和宽与高确定矩形。x，y为中心点坐标，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;

};

//――――上色方法――――//

//定义一个获取颜色值，并把它转化成16进制的函数

//获取颜色值的后六位，使此方法可以同时满足“#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;

//滚动条背景参数

with (jiedianlujing_xml[0]) {

var gundongtiaobeijingse = jinzhizhuanhuan(attributes["背景色"]);

var gundongtiaotoumingdu = attributes["背景透明度"];

var gundongtiaobiankuangse = jinzhizhuanhuan(attributes["边框色"]);

var gundongtiaobiankuangtoumingdou = attributes["边框透明度"];

var gundongtiaobiankuangcuxi = attributes["边框粗细"];

var gundongtiaokuan = attributes["宽"];

}

//方块参数

with (jiedianlujing_xml[1]) {

var fangkuaibeijingse = jinzhizhuanhuan(attributes["背景色"]);

var fangkuaitoumingdu = attributes["背景透明度"];

var fangkuaibiankuangse = jinzhizhuanhuan(attributes["边框色"]);

var fangkuaibiankuangtoumingdou = attributes["边框透明度"];

var fangkuaibiankuangcuxi = attributes["边框粗细"];

}

//三角参数

with (jiedianlujing_xml[2]) {

var sanjiaoyuanshise = jinzhizhuanhuan(attributes["原始色"]);

var sanjiaohuodongse = jinzhizhuanhuan(attributes["活动色"]);

//记录下原始色和活动色，以备在“上”，“下”按钮中使用

jiluyuanshise = attributes["原始色"];

jiluhuodongse = attributes["活动色"];

var sanjiaotoumingdou = attributes["透明度"];

}

//滑块参数

with (jiedianlujing_xml[3]) {

var huakuaibeijingse = jinzhizhuanhuan(attributes["背景色"]);

var huakuaitoumingdu = attributes["背景透明度"];

var huakuaibiankuangse = jinzhizhuanhuan(attributes["边框色"]);

var huakuaibiankuangtoumingdou = attributes["边框透明度"];

var huakuaibiankuangcuxi = attributes["边框粗细"];

}

//先根据文本域的高确定滚动条的高

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();

//根据文本域的位置确定滚动条位置，使其紧贴在文本域的右端

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);

//////复制上按钮背景方块和三角形，并定位于下方

//复制下方块

gundongtiao_mc.shangfangkuai_mc.duplicateMovieClip("xiafangkuai_mc", 3);

//定位下按钮背景方块，这里的Y坐标加一，是为了让下方块跟文本框底部对齐！

gundongtiao_mc.xiafangkuai_mc.dingwei(0, Math.floor(gundongtiao_mc._height/2-gundongtiao_mc.xiafangkuai_mc._height/2)+1);

//复制下三角形

gundongtiao_mc.shangsanjiao_mc.duplicateMovieClip("xiasanjiao_mc", 4);

//旋转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坐标，并记录

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;

};

//%%%%%%%%%%%%%%%%滚动代码%%%%%%%%%%%%%%%%%%//

//////////为父剪辑的文字域注册侦听器，以侦听在文字域产生变化时，也就是在文本被载入进来时，执行下面的代码。这样就不用担心代码执行顺序问题！

var zhentingqi = new Object();

wenben_txt.addListener(zhentingqi);

//当文字域载入完成时，为什么触发onScroller事件，而不是onChange事件？

zhentingqi.onScroller = function() {

trace("-------------------------");

trace("滚动总行数="+wenben_txt.maxscroll);

trace("当前行="+wenben_txt.scroll);

//判断滑块儿是否显示，并根据文本内容多少定义滑块高度

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);

}

//滑块滚动的总象素数

var zongxiangsu = gundongtiao_mc.xiafangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._y-gundongtiao_mc.shangfangkuai_mc._height-gundongtiao_mc.huakuai_mc._height;

//定义平均象素,每一行所包含的像素数，即文本域每滚动一行，滑块需要移动的象素数。

var pingjunxiangsu = zongxiangsu/(wenben_txt.maxscroll-1);

//定义平均行数,每一像素包含的行数，即滑块每移动一象素，文本域在理论上应当滚动的行数（尽管非整数行在视觉上没有反映）。

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--;

// 使滑块儿移动到相应的位置。

gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1);

trace("滑块Y坐标="+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++;

//使滑块儿移动到相应的位置。

gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1);

trace("滑块Y坐标="+gundongtiao_mc.huakuai_mc._y);

};

this.onRelease = function() {

delete this.onEnterFrame;

};

this.onRollOut = function() {

gundongtiao_mc.xiasanjiao_mc.shangse(jiluyuanshise);

};

///////////换用MOUSE对象的onMouseWheel方法结合侦听器实现滑块随鼠标滚球滚动

mouseListener = new Object();

Mouse.addListener(mouseListener);

mouseListener.onMouseWheel = function(delta) {

delta = 1;

gundongtiao_mc.huakuai_mc._y = ychushiweizhi+pingjunxiangsu*(wenben_txt.scroll-1);

};

///////////滑块MC事件处理，当鼠标经过或按下时

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("现在位置="+xianzaiweizhi);

//使文本随滚动条滚动,这里为什么要加1，可见scroll属性值应该是取正的，也就是说它会删除小数部分，而非采用四舍五入制？

wenben_txt.scroll = (xianzaiweizhi-ychushiweizhi)*pingjunhangshu+1;

trace("scroll值="+Math.floor((xianzaiweizhi-ychushiweizhi)*pingjunhangshu+1));

trace("初始位置="+ychushiweizhi);

trace("现在位置="+xianzaiweizhi);

};

//滑块MC事件处理，鼠标移出或释放时

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" 边框粗细="1" 宽="20"/>

<方块背景色="#000000" 背景透明度="100" 边框色="#999999" 边框透明度="100" 边框粗细="0"/>

<三角原始色="#ffff00" 活动色="#ff0000" 透明度="100"/>

<滑块背景色="#000000" 背景透明度="100" 边框色="#999999" 边框透明度="100" 边框粗细="0"/>

</滚动条>

说明：

由于我这个滚动条是完全由AS写成的，你只需要像在HTML网页中插入JS脚本一样，把上面的那段AS代码插入你的文本域所在贞，运行后，就会自动绘制滚动条并吸附到你的文本框右边了！

注意：

★你的文本域要命名为：wenben_txt。由于是练习，我没处理接口，不好意思：）

★你可以在XML中修改相应的参数。

★这个滚动条基本具备了scrollbar组件的所有功能，包括精确定位，而且避免了在输入文本时容易产生的滑块跳动事件。当然，最最关键的是：我这个滚动条只有2K多！

★这个作品纯属自娱自乐，挑战自我。采用基于原型的AS1.0，代码写的比较乱.