用到了这个库TweenLite AS3 classes
下载地址:
http://www.greensock.com/tweenlite/
平滑滚动条源码下载地址:
vertical_scrollbar_bonus
使用方法:
Greensock
标签存档: 滚动条
使滚动更平滑
打造自己的as3滚动条(下)
完整的纵向滚动条类
[code]
package com.jessamin.controls {
import flash.display.DisplayObject;
import flash.display.InteractiveObject;
import flash.display.Sprite;
import flash.display.Stage;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import flash.events.Event;
public class VerticalScrollbar extends EventDispatcher {
public static const PRESSED:String = “pressed”;
public static const RELEASED:String = “released”;
public static const SCROLLING:String = “scrolling”;
private var stage:Stage;
private var thumb:InteractiveObject;
private var track:DisplayObject;
private var window:DisplayObject;
private var content:DisplayObject;
private var up:InteractiveObject;
private var down:InteractiveObject;
private var yOffset:Number;
private var topLimit:Number;
private var thumbRange:Number;
private var bottomLimit:Number;
private var _scrollPercent:Number;
private var contentRange:Number;
private var speed:Number
private var wheelSpeed:Number;
public function VerticalScrollbar( stage:Stage,
thumb:InteractiveObject,
track:InteractiveObject,
window:DisplayObject = null,
content:DisplayObject = null,
up:InteractiveObject = null,
down:InteractiveObject = null ) {
this.stage = stage;
this.thumb = thumb;
this.track = track;
this.window = window;
this.content = content;
this.up = up;
this.down = down;
yOffset = 0;
topLimit = this.track.y;
thumbRange = track.height – thumb.height;
bottomLimit = track.y + thumbRange;
if(content && window) contentRange = content.height – window.height;
_scrollPercent = 0;
speed = 0.01;
wheelSpeed = 0.02;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumb_onMouseDown);
if(down) down.addEventListener(MouseEvent.MOUSE_DOWN, down_onMouseDown);
if (up) up.addEventListener(MouseEvent.MOUSE_DOWN, up_onMouseDown);
//turn on mouse wheel by default (calls the class’s public setter method, below)
this.wheelEnabled = true;
}
private function stage_onMouseWheel(event:MouseEvent):void {
_scrollPercent -= event.delta * wheelSpeed;
//set boundaries:
if (_scrollPercent > 1) _scrollPercent = 1;
if (_scrollPercent < 0) _scrollPercent = 0;
if(content && window) content.y = window.y - (_scrollPercent * contentRange);
thumb.y = _scrollPercent * thumbRange + track.y;
dispatchEvent(new Event(VerticalScrollbar.SCROLLING));
}
private function thumb_onMouseDown(event:MouseEvent):void {
yOffset = thumb.parent.mouseY - thumb.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
dispatchEvent(new Event(VerticalScrollbar.PRESSED));
}
private function stage_onMouseMove(event:MouseEvent):void {
thumb.y = thumb.parent.mouseY - yOffset;
//restrict the movement of the thumb:
if (thumb.y < topLimit) thumb.y = topLimit;
if (thumb.y > bottomLimit) thumb.y = bottomLimit;
//calculate scrollPercent and make it do stuff:
_scrollPercent = (thumb.y – track.y) / thumbRange;
if(content && window) content.y = window.y – (_scrollPercent * contentRange);
event.updateAfterEvent();
dispatchEvent(new Event(VerticalScrollbar.SCROLLING));
}
private function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
dispatchEvent(new Event(VerticalScrollbar.RELEASED));
}
private function down_onMouseDown(event:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME, scrollDown);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScrollingDown);
dispatchEvent(new Event(VerticalScrollbar.PRESSED));
}
private function scrollDown(event:Event):void {
_scrollPercent += speed;
if(_scrollPercent > 1) _scrollPercent = 1;
if(content && window) content.y = window.y – (_scrollPercent * contentRange);
thumb.y = _scrollPercent * thumbRange + track.y;
dispatchEvent(new Event(VerticalScrollbar.SCROLLING));
}
private function stopScrollingDown(event:MouseEvent):void {
stage.removeEventListener(Event.ENTER_FRAME, scrollDown);
stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrollingDown);
dispatchEvent(new Event(VerticalScrollbar.RELEASED));
}
private function up_onMouseDown(event:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME, scrollUp)
stage.addEventListener(MouseEvent.MOUSE_UP, stopScrollingUp);
dispatchEvent(new Event(VerticalScrollbar.PRESSED));
}
private function scrollUp(event:Event):void {
_scrollPercent -= speed;
if(_scrollPercent < 0)_scrollPercent = 0;
if(content && window) content.y = window.y - (_scrollPercent * contentRange);
thumb.y = _scrollPercent * thumbRange + track.y;
dispatchEvent(new Event(VerticalScrollbar.SCROLLING));
}
private function stopScrollingUp(event:MouseEvent):void {
stage.removeEventListener(Event.ENTER_FRAME, scrollUp)
stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrollingUp);
dispatchEvent(new Event(VerticalScrollbar.RELEASED));
}
public function get scrollPercent():Number {
return _scrollPercent;
}
public function set visible(value:Boolean):void {
thumb.visible = value;
track.visible = value;
if (up) up.visible = value;
if (down) down.visible = value;
}
public function get visible():Boolean {
return (track.visible && thumb.visible);
}
public function reset():void {
thumb.y = track.y;
if (content && window) content.y = window.y;
_scrollPercent = 0;
}
public function set wheelEnabled(value:Boolean):void {
if (value == true) {
stage.addEventListener(MouseEvent.MOUSE_WHEEL, stage_onMouseWheel);
} else {
stage.removeEventListener(MouseEvent.MOUSE_WHEEL, stage_onMouseWheel);
}
}
}
}
[/code]
源文件下载
打造自己的as3滚动条(上)
项目中经常用到滚动条,adobe给的组件,样式改起来真不方便,而且体积也挺大,不如自己写,参考了下老外的博文,原文地址:
http://theflashconnection.com/content/flash-as3-scrollbar-class,老外写技术博还是蛮清楚的,就是对我来说可能废话多了点,今儿个难得有闲有心情整理下,为以后不时之需吧。
1.除startDrag以外的拖放操作,代码如下:
[code]
import flash.events.MouseEvent;
var xOffset:Number;
var yOffset:Number;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumb_onMouseDown);
function thumb_onMouseDown(event:MouseEvent):void {
xOffset = mouseX – thumb.x;
yOffset = mouseY – thumb.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseMove(event:MouseEvent):void {
thumb.x = mouseX – xOffset;
thumb.y = mouseY – yOffset;
event.updateAfterEvent();
}
function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
[/code]
2.限制拖动范围
[code]
import flash.events.MouseEvent;
var yOffset:Number;
var topLimit:Number = track.y;
var thumbRange:Number = track.height – thumb.height;
var bottomLimit:Number = track.y + thumbRange;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumb_onMouseDown);
function thumb_onMouseDown(event:MouseEvent):void {
yOffset = mouseY – thumb.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseMove(event:MouseEvent):void {
thumb.y = mouseY – yOffset;
//restrict the movement of the thumb:
if(thumb.y < topLimit) {
thumb.y = topLimit;
}
if(thumb.y > bottomLimit) {
thumb.y = bottomLimit;
}
event.updateAfterEvent();
}
function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
[/code]
3.计算拖动百分比
[code]
import flash.events.MouseEvent;
var yOffset:Number;
var topLimit:Number = track.y;
var thumbRange:Number = track.height – thumb.height;
var bottomLimit:Number = track.y + thumbRange;
//new variable: scrollPercent!
var scrollPercent:Number = 0;
myText.text = “0”;
circle.alpha = 0;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumb_onMouseDown);
function thumb_onMouseDown(event:MouseEvent):void {
yOffset = mouseY – thumb.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseMove(event:MouseEvent):void {
thumb.y = mouseY – yOffset;
//restrict the movement of the thumb:
if(thumb.y < topLimit) {
thumb.y = topLimit;
}
if(thumb.y > bottomLimit) {
thumb.y = bottomLimit;
}
//calculate scrollPercent and make it do stuff:
scrollPercent = (thumb.y – track.y) / thumbRange;
myText.text = String(scrollPercent);
circle.alpha = scrollPercent;
event.updateAfterEvent();
}
function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
[/code]
4.使content在window范围内随滚动条滚动
[code]
import flash.events.MouseEvent;
var yOffset:Number;
var topLimit:Number = track.y;
var thumbRange:Number = track.height – thumb.height;
var bottomLimit:Number = track.y + thumbRange;
//new variable: scrollPercent!
var scrollPercent:Number = 0;
var contentRange:Number = content.height – window.height;
content.mask = window;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumb_onMouseDown);
function thumb_onMouseDown(event:MouseEvent):void {
yOffset = mouseY – thumb.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseMove(event:MouseEvent):void {
thumb.y = mouseY – yOffset;
//restrict the movement of the thumb:
if(thumb.y < topLimit) {
thumb.y = topLimit;
}
if(thumb.y > bottomLimit) {
thumb.y = bottomLimit;
}
//calculate scrollPercent and make it do stuff:
scrollPercent = (thumb.y – track.y) / thumbRange;
content.y = window.y – (scrollPercent * contentRange);
event.updateAfterEvent();
}
function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
[/code]
5.增加上下按钮
[code]
import flash.events.MouseEvent;
import flash.events.Event;
import flash.utils.Timer;
var yOffset:Number;
var topLimit:Number = track.y;
var thumbRange:Number = track.height – thumb.height;
var bottomLimit:Number = track.y + thumbRange;
//new variable: scrollPercent!
var scrollPercent:Number = 0;
var contentRange:Number = content.height – window.height;
var speed:Number = 0.01;
content.mask = window;
thumb.buttonMode = true;
thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumb_onMouseDown);
function thumb_onMouseDown(event:MouseEvent):void {
yOffset = mouseY – thumb.y;
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.addEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
function stage_onMouseMove(event:MouseEvent):void {
thumb.y = mouseY – yOffset;
//restrict the movement of the thumb:
if(thumb.y < topLimit) {
thumb.y = topLimit;
}
if(thumb.y > bottomLimit) {
thumb.y = bottomLimit;
}
//calculate scrollPercent and make it do stuff:
scrollPercent = (thumb.y – track.y) / thumbRange;
content.y = window.y – (scrollPercent * contentRange);
event.updateAfterEvent();
}
function stage_onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, stage_onMouseUp);
}
down.buttonMode = true;
down.addEventListener(MouseEvent.MOUSE_DOWN, down_onMouseDown);
function down_onMouseDown(event:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME, scrollDown);
stage.addEventListener(MouseEvent.MOUSE_UP, stopScrollingDown);
}
function scrollDown(event:Event):void {
scrollPercent += speed;
if(scrollPercent > 1) {
scrollPercent = 1;
}
content.y = window.y – (scrollPercent * contentRange);
thumb.y = scrollPercent * thumbRange + track.y;
}
function stopScrollingDown(event:MouseEvent):void {
stage.removeEventListener(Event.ENTER_FRAME, scrollDown);
stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrollingDown);
}
up.buttonMode = true;
up.addEventListener(MouseEvent.MOUSE_DOWN, up_onMouseDown);
function up_onMouseDown(event:MouseEvent):void {
stage.addEventListener(Event.ENTER_FRAME, scrollUp)
stage.addEventListener(MouseEvent.MOUSE_UP, stopScrollingUp);
}
function scrollUp(event:Event):void {
scrollPercent -= speed;
if(scrollPercent < 0) {
scrollPercent = 0;
}
content.y = window.y - (scrollPercent * contentRange);
thumb.y = scrollPercent * thumbRange + track.y;
}
function stopScrollingUp(event:MouseEvent):void {
stage.removeEventListener(Event.ENTER_FRAME, scrollUp)
stage.removeEventListener(MouseEvent.MOUSE_UP, stopScrollingUp);
}
[/code]