您的位置: 首页 > 技术文档 > 多媒体制作 > 用纯AS写滚动条
完美的loading—完美到底 回到列表 Flash Lite 2.0 中文版发布
 用纯AS写滚动条

作者:jimohuoshan 时间: 2006-03-16 文档类型:原创 来自:蓝色理想

前两个星期抽时间看了看一直很感兴趣却没时间研究的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,代码写的比较乱,请前辈高手多多指教。

经典论坛讨论帖:
http://www.blueidea.com/bbs/NewsDetail.asp?id=2497990

出处:蓝色理想
责任编辑:moby

◎进入论坛Flash专栏版块参加讨论

相关文章 更多相关链接
Flash Player 8.5 开始公测
Intel Mac 版 Flash Player 发布
Flash 与外部通讯的所有方法
Danger Video Player 1.0 发布
影响 ActiveX 内容的 IE 升级包
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2