（4）测试影片，如下图所示。:
现在你已经能制作自已的滚动条了，你只需要发挥一下设计能力，就会诞生一个自定义的有特色的滚动条了。
3．为自定义滚动条加入缓动
有了上面的范例，要加入easing缓动，就很简单了，对于easing无非就是新位置和老位置的问题，对于当前的滚动条来说，只要在拖动时让contentMain不断地移向新位置就可以了。移动过程就是要加入easing的过程。
范例14
演示文件
范例14源文件
booksource/第8章/scrollbar/scrollbar_ease.fla
针对这个范例的其他操作过程这里就不赘述了，现在直接打开上例中的源文件scrollbar.fla。
选中第1帧，打开ActionScript面板，将其中的代码做一下简单的改写如下。
| 代码: |
| |
function scrolling (easing){
//滚动速度
var moveSpeed = 1;
var easingSpeed =10;
var scrollHeight = scrollbg._height;
//可滚动的区域
var scrollable = contentMain._height - maskedView._height;
var top_scroll = contentMain._y;
//滑块可拖动的区域
var left = scrollbg._x;
var top = scrollbg._y;
var right = scrollbg._x;
var bottom = scrollbg._y+scrollbg._height-dragger._height;
//在开始前检测滚动是否可行，如果内容高度不足则不执行滚动，隐藏dragger等，并返回
if(scrollable <0){
dragger._visible =false;
btnup._alpha =50;
btndown._alpha =50;
scrollbg._alpha=50;
btnup.enabled = false;
btndown.enabled = false;
return;
}
//更新滚动内容的位置，公式的应用
function updateContentPos(){
var percent_scrolled =(dragger._y-btnup._height)/(scrollHeight-dragger._height);
contentMain.newY = Math.round(top_scroll -(scrollable * percent_scrolled));
}
contentMain.onEnterFrame = function()
{
if (!easing || easing == undefined)
{
this._y = this.newY;
}
else
{
this._y += (this.newY-this._y)/easingSpeed;
}
};
//拖动滑块
dragger.onPress = function(){
startDrag(this,false,left,top,right,bottom);
this.onMouseMove = function(){
updateContentPos();
}
}
dragger.onRelease = function(){
stopDrag();
delete this.onEnterFrame;
}
btnup.onPress = function(){
this.onEnterFrame = function(){
//技巧
dragger._y = Math.max(top,dragger._y-moveSpeed);
updateContentPos();
}
}
btnup.onRelease = function(){
delete this.onEnterFrame;
}
btndown.onPress = function(){
this.onEnterFrame = function(){
dragger._y = Math.min(bottom,dragger._y+moveSpeed);
updateContentPos();
}
}
btndown.onRelease = function(){
delete this.onEnterFrame;
}
updateContentPos();
}
//调用函数
scrolling(true);
|
| 上一页 1 2 3 45 6 7 下一页 |
| 文章如果有错误或者缺少文件，请发邮件提交给我们 |
|
|
|
|
|
|
|
| >>> 最新评论:(共有 0 位网友发表了评论) 查看所有评论 |
|
|
| 发表评论 |
|
| ·本站发布内容均为客观表达作者观点，不代表闪无忧立场，请勿攻击和漫骂 |
| ·用户发表意见仅代表其个人意见，并且承担一切因发表内容引起的纠纷和责任 |
| ·本站管理人员有权在不通知用户的情况下删除不符合规定的评论信息或留做证据 |
| ·请客观的评价您所看到的资讯，提倡就事论事，杜绝漫骂和人身攻击等不文明行为 |
|
|
