标签存档: 滚动条

使滚动更平滑

用到了这个库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]