当前位置: 王朝网络 >> other >> ActionScript学习：用纯AS写滚动条

ActionScript学习：用纯AS写滚动条

王朝other·作者佚名 2006-11-24

窄屏简体版字體: 小|中|大|超大

前两个星期抽时间看了看一直很感兴趣却没时间研究的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;