开发学院图形图像Flash 超酷滚动公式实现自定义滚动条 阅读

超酷滚动公式实现自定义滚动条

 2007-01-04 10:57:59 来源:WEB开发网   
核心提示: 在updateContentPos()函数中我们把原有的contentMain._y改为contentMain.newY,通过它确定移动的新位置目标,超酷滚动公式实现自定义滚动条(7),下面的这段代码就是移动到新位置的缓动过程,代码:contentMain.onEnterFrame = f

在updateContentPos()函数中我们把原有的contentMain._y改为contentMain.newY,通过它确定移动的新位置目标。下面的这段代码就是移动到新位置的缓动过程。

代码:

contentMain.onEnterFrame = function()
  {
    if (!easing || easing == undefined)
    {
      this._y = this.newY;
    }
    else
    {
      this._y += (this.newY-this._y)/easingSpeed;
    }
};

最后通过scrolling(true)传递true给easing来执行缓动,如果不执行缓动,那么newY仍是原值this._y。

这种标准的缓动在前面的第3章就已经有过介绍,现在看上去并不算复杂了,只要理解了原理,就增加了无限的创意空间了。

最后给你留下一点发挥的空间,你可以试试缓动动态载入文本,做一提示,在遮罩时需要应用setMask()方法。

附加内容:

上边的内容为本书原稿内容,下面是应群内网友的要求,特增加如下两个功能.自动滚动和中键滚动.

自动滚动 演示文件

如果你能完成上面的例子,并理解了滚动公式,那现面的问就变得很简单了.

操作方法:

1.  打开scrollbar_ease.fla文件,将其另存为auto_scrollbar_ease.fal

2.  打开后,选中actionscript层,按下F9,打开actionscript面板.我们将在此代码的基础上进行修改.

3.  将原来的代码修改为所下所示:

代码:

//copyright by webstudio.com.cn.author by egoldy.
function scrolling(easing, auto) {
  //滚动速度
  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));
    trace(contentMain.newY);
  }
  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 = dragger.onReleaseOutside=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();
  //++++++++++++++++++++++++++++++++++++++++++
  //自动滚动代码段
  if (auto == true) {
    onEnterFrame = function () {
      if (dragger._y<bottom) {
        dragger._y = dragger._y+0.2;
        updateContentPos();
      } else {
        dragger._y = top;
      }
    };
  }
  
}
//调用函数
scrolling(true, true);

在这段代码中,有两处变化,一处是我们把原来的scrolling(easeing)函数增加了一个参数,变为scrolling(easeing,auto),目的是可以随意的开关,另一处就是自动滚动代码段,我已经标出了自动滚动代码段.

上一页  2 3 4 5 6 7 8  下一页

Tags:超酷 滚动 公式

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接