论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Flash AS编程教程
Tag:2.0,3.0菜鸟,游戏,,cs,技巧,源码,,文本,文字,函数,音乐,随机,拖拽,asp,access,xml,mc,视频教程

用纯AS写滚动条

文章类别:Flash AS编程 | 发表日期:2008-10-6 18:07:16


下面是所有的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,代码写的比较乱,请前辈高手多多指教。

视频教程列表
文章教程搜索
 
Flash AS推荐教程
Flash AS热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058