您的位置: 首页 > 技术文档 > 多媒体制作 > 用纯AS写滚动条
回到列表 Flash Lite 2.0 中文版发布
用户名:
密 码: 忘记密码
注册会员 游客参观 论坛帮助
 用纯AS写滚动条

作者:jimohuoshan 时间: 2006-03-16 文档类型:原创 来自:蓝色理想
浏览统计 total:1655 | year:1655 | Quarter:1655 | Month:1655 | Week:829 | today:43

前两个星期抽时间看了看一直很感兴趣却没时间研究的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专栏版块参加讨论

相关文章 更多相关链接
Intel Mac 版 Flash Player 发布
Flash 与外部通讯的所有方法
Danger Video Player 1.0 发布
影响 ActiveX 内容的 IE 升级包
FLASH与后台数据交换方法整理
全网 本站 论坛
热门搜索:CSS Fireworks 设计比赛 网页制作 Dreamweaver Studio8 Flash
站点最新 站点最新列表
无组件生成验证码
谈PHP生成静态页面
缓存技术详谈—php
目录,文件操作详谈—php
用php读取xml数据
模板用xml的思路
多表查询技巧
手绘苹果教程
中国插画网新版发布
说鸥
栏目最新 栏目最新列表
无组件生成验证码
谈PHP生成静态页面
缓存技术详谈—php
目录,文件操作详谈—php
用php读取xml数据
模板用xml的思路
多表查询技巧
如何用CSS定义表格与模拟表格
div下图片自适应解决方法
[css]IE5/IE5.5/IE6/FF兼容性

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

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

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

本文暂时没有评论和评分

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误