TextFieldにスクロールバーとかつけてみる
zahirです
*いつもどおり適当にやってみました。
*水平までつくるのはメンドクかったので今回はやりませんでした。
*なのに無駄に行数がかさんだorz
*何か不備があったらコメント下さい。
* 説明？
*
* 上向き矢印2つのは一気に1行目まで飛びます
* 上向き矢印1つのは1行上にスクロールします
* 下向き矢印1つのは1行下にスクロールします
* 下向き矢印2つのは一気に末行まで飛びます
*
/**
* Copyright zahir ( http://wonderfl.net/user/zahir )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/7lz9
*/
/*
*zahirです
*いつもどおり適当にやってみました。
*水平までつくるのはメンドクかったので今回はやりませんでした。
*なのに無駄に行数がかさんだorz
*何か不備があったらコメント下さい。
* 説明？
*
* 上向き矢印2つのは一気に1行目まで飛びます
* 上向き矢印1つのは1行上にスクロールします
* 下向き矢印1つのは1行下にスクロールします
* 下向き矢印2つのは一気に末行まで飛びます
*
*/
package{
import flash.display.Sprite;
import flash.text.TextField;
import flash.events.Event;
import flash.text.TextFieldType;
[SWF(width=465, height = 465, backgroundColor = 0x666666)]
public class MyTextBox extends Sprite{
private var t:TextField;
private var scrollV:TextBoxVScrollBar;
private var scrollBarWidth:int = 18;
public function MyTextBox(){
t = new TextField();
t.addEventListener(Event.ADDED, function(e:Event):void{
var str:String = "";
for(var i:int = 1; i<= 100; i++){
str += "Line " + String( i ) + " :: " + "\n";
}
t.text = str;
t.width = t.maxScrollV > 0 ? stage.stageWidth - scrollBarWidth : stage.stageWidth;
t.height = stage.stageHeight;
t.wordWrap = true;
t.type = flash.text.TextFieldType.DYNAMIC;
if(t.maxScrollV > 1){
scrollV = new TextBoxVScrollBar( t, scrollBarWidth, t.height );
scrollV.x = t.width;
addChild(scrollV);
}
});
addChild(t);
}
}
}
import flash.display.Sprite;
import flash.text.TextField;
import flash.display.Shape;
import flash.display.Graphics;
import flash.geom.Matrix;
import flash.display.CapsStyle;
import flash.events.*;
class TextBoxVScrollBar extends Sprite{
private var t:TextField;
private var w:int, h:int;
// Line
private var lineHeight:Number;
// item
private var up:UpArrow;
private var down:DownArrow;
private var top:TopArrow;
private var bottom:BottomArrow;
private var slider:TextBoxVSlider;
public function TextBoxVScrollBar( target:TextField , width:int, height:int){
t = target;
w = width;
h = height;
lineHeight = t.textHeight / t.numLines;
var m:Matrix = new Matrix();
m.createGradientBox( w, h);
var g:Graphics = this.graphics;
g.lineStyle(0, 0x111111 );
g.beginGradientFill( "linear", [ 0x999999, 0x777777],[1.0,1.0],[0,255],m);
g.drawRect(0, 0, w, h );
g.endFill()
initGUI();
t.addEventListener(Event.SCROLL, function(e:Event):void{
slider.y = (t.scrollV -1) * lineHeight + minY;
});
this.addEventListener( MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
var pos:int = mouseY;
if(pos <= minY) return;
if(pos >= maxY + slider.height) return;
if( pos >= slider.y && pos <= (slider.y + slider.height)) return
if(pos >= maxY) pos -= slider.height;
slider.y = pos;
t.scrollV = int((pos - minY) / lineHeight) + 1;
});
}
private function initGUI():void{
up = new UpArrow( w );
down = new DownArrow( w );
top = new TopArrow( w );
bottom = new BottomArrow( w );
up.y = top.height;
bottom.y = h - down.height;
down.y = h - down.height - bottom.height;
var d:Number = down.y - (up.y + up.height);
d *= d/t.textHeight;
slider = new TextBoxVSlider( w - 4, d );
slider.y = minY = up.y + up.height;
maxY = (down.y - d) + 2;
lineHeight = (maxY - minY) / ( t.maxScrollV -1);
addChild(slider);
addChild( top );
addChild( bottom );
addChild( up );
addChild( down );
slider.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
cY = slider.mouseY;
slider.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
slider.stage.addEventListener(MouseEvent.MOUSE_UP, offMove);
});
top.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
t.scrollV = 1;
slider.y = minY;
});
bottom.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
t.scrollV = t.maxScrollV;
slider.y = maxY;
});
up.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
if( !(t.scrollV > 1) ) return
t.scrollV = t.scrollV - 1;
slider.y -= lineHeight;
if(slider.y < minY) slider.y = minY;
});
down.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{
if( !(t.scrollV < t.maxScrollV) ) return
t.scrollV = t.scrollV + 1;
slider.y += lineHeight;
if(slider.y > maxY) slider.y = maxY;
});
}
private var cY:int;
private var minY:int;
private var maxY:int;
private function onMove(e:MouseEvent):void{
var yy:int = stage.mouseY - cY;
if(yy <= minY) yy = minY;
if(yy >= maxY) yy = maxY;
slider.y = yy;
t.scrollV = int((yy - minY) / lineHeight) + 1;
}
private function offMove(e:MouseEvent):void{
slider.stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
slider.stage.removeEventListener(MouseEvent.MOUSE_UP, offMove);
}
}
class TextBoxVSlider extends Sprite{
private var w:int, h:Number;
private var w_2:int;
private var md_flg:Boolean = false;
private var g:Graphics;
public function get SliderHeight():Number{
return h;
}
public function set SliderHeight( value:Number ):void{
h = value;
}
public function TextBoxVSlider( width:int, height:int ){
w = width;
h = height;
w_2 = (w>>1) + 2;
g = this.graphics;
drawUp();
this.addEventListener( MouseEvent.ROLL_OVER, function(e:MouseEvent):void{
if(md_flg) return;
drawOver();
addEventListener( MouseEvent.ROLL_OUT, onOut);
});
this.addEventListener( MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
md_flg = true;
drawDown();
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
});
}
private function onOut(e:MouseEvent):void{
removeEventListener( MouseEvent.MOUSE_OUT, onOut);
if(md_flg) return;
drawUp();
}
private function onUp(e:MouseEvent):void{
drawUp();
stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}
private function drawUp():void{
g.clear();
g.lineStyle( w, 0x333333, 1, true, "normal", flash.display.CapsStyle.ROUND);
g.moveTo( w_2 , w_2);
g.lineTo( w_2, h - w_2);
}
private function drawDown():void{
g.clear();
g.lineStyle( w , 0x0, 1, true, "normal", flash.display.CapsStyle.ROUND);
g.moveTo( w_2 , w_2);
g.lineTo( w_2, h - w_2);
g.lineStyle( w-2, 0xFFFFFF, 1, true, "normal", flash.display.CapsStyle.ROUND);
g.moveTo( w_2 , w_2);
g.lineTo( w_2, h - w_2);
}
private function drawOver():void{
g.clear();
g.lineStyle( w, 0x111111, 1, true, "normal", flash.display.CapsStyle.ROUND);
g.moveTo( w_2 , w_2);
g.lineTo( w_2, h - w_2);
}
}
class UpArrow extends Sprite{
private var w:int, h:int;
private var g:Graphics;
private var flg:Boolean = false;
public function UpArrow( size:int ){
w = h = size;
g = this.graphics;
drawUp();
this.addEventListener( MouseEvent.ROLL_OVER, function(e:MouseEvent):void{
drawOver();
flg = true;
});
this.addEventListener( MouseEvent.ROLL_OUT, function(e:MouseEvent):void{
drawUp();
flg = false;
});
this.addEventListener( MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
drawDown();
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
});
}
private function onUp(e:MouseEvent):void{
flg ? drawOver() : drawUp();
stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}
private function drawUp():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xCCCCCC );
g.moveTo( w/2, 5 );
g.lineTo(3, h - 5 );
g.lineTo( w - 3 , h- 5);
g.endFill();
}
private function drawDown():void{
g.clear();
g.lineStyle(0, 0x0099FF);
g.beginFill( 0x000000 );
g.drawRect( 1, 1, w - 2, h -2 );
g.endFill();
g.lineStyle(0, 0x111111);
g.beginFill( 0xFFFFFF );
g.moveTo( w/2, 5 );
g.lineTo(3, h - 5 );
g.lineTo( w - 3 , h- 5);
g.endFill();
}
private function drawOver():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xFFFFFF );
g.moveTo( w/2, 5 );
g.lineTo(3, h - 5 );
g.lineTo( w - 3 , h- 5);
g.endFill();
}
}
class DownArrow extends Sprite{
private var w:int, h:int;
private var g:Graphics;
private var flg:Boolean = false;
public function DownArrow( size:int ){
w = h = size;
g = this.graphics;
drawUp();
this.addEventListener( MouseEvent.ROLL_OVER, function(e:MouseEvent):void{
drawOver();
flg = true;
});
this.addEventListener( MouseEvent.ROLL_OUT, function(e:MouseEvent):void{
drawUp();
flg = false;
});
this.addEventListener( MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
drawDown();
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
});
}
private function onUp(e:MouseEvent):void{
flg ? drawOver() : drawUp();
stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}
private function drawUp():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xCCCCCC );
g.moveTo( w/2, h - 5 );
g.lineTo(3, 5 );
g.lineTo( w - 3 , 5);
g.endFill();
}
private function drawDown():void{
g.clear();
g.lineStyle(0, 0x0099FF);
g.beginFill( 0x000000 );
g.drawRect( 1, 1, w-2, h-2 );
g.endFill();
g.lineStyle(0, 0x111111);
g.beginFill( 0xFFFFFF);
g.moveTo( w/2, h - 5 );
g.lineTo(3, 5 );
g.lineTo( w - 3 , 5);
g.endFill();
}
private function drawOver():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xFFFFFF);
g.moveTo( w/2, h - 5 );
g.lineTo(3, 5 );
g.lineTo( w - 3 , 5);
g.endFill();
}
}
class TopArrow extends Sprite{
private var w:int, h:int;
private var g:Graphics;
private var flg:Boolean = false;
public function TopArrow( size:int ){
w = h = size;
g = this.graphics;
drawUp();
this.addEventListener( MouseEvent.ROLL_OVER, function(e:MouseEvent):void{
drawOver();
flg = true;
});
this.addEventListener( MouseEvent.ROLL_OUT, function(e:MouseEvent):void{
drawUp();
flg = false;
});
this.addEventListener( MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
drawDown();
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
});
}
private function onUp(e:MouseEvent):void{
flg ? drawOver() : drawUp();
stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}
private function drawUp():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xCCCCCC );
g.moveTo( w/2, 3 );
g.lineTo(4, 8 );
g.lineTo( w - 4 , 8);
g.moveTo( w/2, 10 );
g.lineTo(4, h - 3 );
g.lineTo( w - 4 , h - 3);
g.endFill();
}
private function drawDown():void{
g.clear();
g.lineStyle(0, 0x00099FF);
g.beginFill( 0x000000 );
g.drawRect( 1, 1, w-2, h-2 );
g.endFill();
g.lineStyle(0, 0x333333);
g.beginFill( 0xFFFFFF);
g.moveTo( w/2, 3 );
g.lineTo(4, 8 );
g.lineTo( w - 4 , 8);
g.moveTo( w/2, 10 );
g.lineTo(4, h - 3 );
g.lineTo( w - 4 , h - 3);
g.endFill();
}
private function drawOver():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xFFFFFF );
g.moveTo( w/2, 3 );
g.lineTo(4, 8 );
g.lineTo( w - 4 , 8);
g.moveTo( w/2, 10 );
g.lineTo(4, h - 3 );
g.lineTo( w - 4 , h - 3);
g.endFill();
}
}
class BottomArrow extends Sprite{
private var w:int, h:int;
private var g:Graphics;
private var flg:Boolean = false;
public function BottomArrow( size:int ){
w = h = size;
g = this.graphics;
drawUp();
this.addEventListener( MouseEvent.ROLL_OVER, function(e:MouseEvent):void{
drawOver();
flg = true;
});
this.addEventListener( MouseEvent.ROLL_OUT, function(e:MouseEvent):void{
drawUp();
flg = false;
});
this.addEventListener( MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void{
drawDown();
stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
});
}
private function onUp(e:MouseEvent):void{
flg ? drawOver() : drawUp();
stage.removeEventListener(MouseEvent.MOUSE_UP, onUp);
}
private function drawUp():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xCCCCCC );
g.moveTo( w/2, 8 );
g.lineTo(4, 3 );
g.lineTo( w - 4 , 3);
g.moveTo( w/2, h - 3 );
g.lineTo(4, 10);
g.lineTo( w - 4 , 10);
g.endFill();
}
private function drawDown():void{
g.clear();
g.lineStyle(0, 0x00099FF);
g.beginFill( 0x0 );
g.drawRect( 1, 1, w-2, h-2 );
g.endFill();
g.lineStyle(0, 0x333333);
g.beginFill( 0xFFFFFF );
g.moveTo( w/2, 8 );
g.lineTo(4, 3 );
g.lineTo( w - 4 , 3);
g.moveTo( w/2, h - 3 );
g.lineTo(4, 10);
g.lineTo( w - 4 , 10);
g.endFill();
}
private function drawOver():void{
g.clear();
g.lineStyle(0, 0x111111);
g.beginFill( 0x333333 );
g.drawRect( 0, 0, w, h );
g.endFill();
g.beginFill( 0xFFFFFF );
g.moveTo( w/2, 8 );
g.lineTo(4, 3 );
g.lineTo( w - 4 , 3);
g.moveTo( w/2, h - 3 );
g.lineTo(4, 10);
g.lineTo( w - 4 , 10);
g.endFill();
}
}