|
ActionScript学习:用纯AS写滚动条
前两个星期抽时间看了看一直很感爱好却没时间研究的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 huakuaibiankuangto
umingdou = 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.maxsc
roll); 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,代码写的比较乱,请前辈高手多多指教。
返回类别: Flash教程 上一教程: Flash制作实用别致的导航菜单 下一教程: Flash制作可随意拖动的四边形
您可以阅读与"ActionScript学习:用纯AS写滚动条"相关的教程: · Flash制作带缓冲的滚动条 · Flash5 ActionScript入门学习-Action Script编辑环境 · AS学习:也谈加载外部图片进行循环滚动的无缝连接 · Flash ActionScript学习:深入研究条件语句 · Flash ActionScript学习:初识条件语句与变量
|