Скролл в контейнере ScrollRect

Drac0Sha · 30.08.2011, 14:50

здравствуйте )
суть.
у меня в контейнере-раздвижные блоки...и их может быть очень много, так что при отображении многих не будет видно. мне нужно сделать скролл их.
пытался и с маской, и просто ScrollRect
и насколько я понял последнее и быстрее и эффективнее, и для контейнера самый лучший подход
хотел призвать о помощи, а то совсем...уж (
Правильно ли я объявляю, и вызываю функцию для скролла
ошибок не выдаёт, но ничего и не работает (((

Код AS3:

private function dataCompleteHandler(event:Event):void 
		{
			var data:XML = new XML( (event.currentTarget as URLLoader).data );
			var parties:XMLList = data.party;
			scene.addChild(blocksContainer);
 
			blocksContainer.x = 10;
			blocksContainer.y = 130;
 
			var circle:Sprite = new Sprite();
			circle.graphics.beginFill(0xFFCC00);
			circle.graphics.drawCircle(200, 200, 200);
			circle.scrollRect = new Rectangle(0, 0, 200, 200);
			this.addChild(circle);
			circle.addEventListener(MouseEvent.CLICK, clicked);
 
			var blockHeight:Number = 0;
			for (var i:uint = 0; i < parties.length(); i++)
			{
				var block:InfoBlock = new InfoBlock(parties[i]);
				block.y = blockHeight;
				blockHeight += block.height + 1;
				block.addEventListener(MouseEvent.CLICK, infoBlockClickHandler);
				blocksContainer.addChild(block);
				_blocksArray.push(block);
 
 
			}
 
		}
 
		public function clicked(event:MouseEvent):void 
		{
    	var rect:Rectangle = event.target.scrollRect;
   		 rect.y -= 5;
    	event.target.scrollRect = rect;
		}

P.S.
пытался с механизмом прокрутки, то есть сбоку скроллинг, интересно, а это подразумевает ещё и прокрутку колёсиком мышки!?

Vreden · 30.08.2011, 15:30

Вот класс, реализующий вертикальный скролл, писал мульон лет назад, может иметь не совсем оптимизированный алгоритм, но работает как часы. Разбирайся на здоровье

Код AS3:

package Admin.fElements
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
 
	public class Scroll extends Sprite
	{
		private var __width:int = 100;
		private var __height:int = 100;
		private var __color:uint = 0x000000;
 
		private var __sprite:Sprite = new Sprite()
 
		public function Scroll()
		{
			super();
			__draw.useHandCursor = true;
			__draw.buttonMode = true;
 
			this.addEventListener(Event.ADDED_TO_STAGE, addStage);
		}
 
		private function addStage(e:Event):void
		{
			stage.addEventListener(MouseEvent.MOUSE_UP, outDraw);
		}
 
		public function set setHeight(value:int):void
		{
			__height = value;
		}
		public function set setWidth(value:int):void
		{
			__width = value;
		}
		public function set setColor(value:uint):void
		{
			__color = value;
		}
 
		private var __content:Sprite;
		private var __HC:Number;
		public function set setContent(value:Sprite):void
		{
			__content = null
			__content = value;
			__HC = __content.height;
			start();	
		}
		public function get setContent():Sprite
		{
			return __content;
		}
 
		private var __line:Sprite = new Sprite();
		private var __draw:Sprite = new Sprite();
		private var __rectangle:Rectangle;
		private var __HD:int;
 
		private var __maxY:int;
		private function start():void
		{
			if (__HC > __height)
			{
				this.graphics.beginFill(0xffffff, 0);
				this.graphics.lineStyle(0, 0xffffff, 0);
				this.graphics.drawRect(0,0, __width, __height);
				this.graphics.endFill();
 
				__content.scrollRect = new Rectangle(0,0,__width,__height);
				addChild(__content);
 
				__line.graphics.beginFill(__color);
				__line.graphics.lineStyle(0, __color);
				__line.graphics.moveTo(__width-4, __height);
				__line.graphics.lineTo(__width-4, 0);
 
				__HD = (__height * (__height/__HC * 100)) / 100;
				__draw.graphics.beginFill(__color);
				__draw.graphics.lineStyle(0, __color);
				__draw.graphics.drawRect(0, 0, 4, __HD);
 
				this.addEventListener(MouseEvent.MOUSE_WHEEL, wheel);
 
				__maxY = __content.height - __height;
 
				addChild(__line);
				addChild(__draw);
				__draw.x = __width-6;
				__draw.y = 0;
 
				//__draw.addEventListener(MouseEvent.MOUSE_OVER, overDraw);
				//stage.addEventListener(MouseEvent.MOUSE_UP, outDraw);
 
				__draw.addEventListener(MouseEvent.MOUSE_DOWN, downDraw);
			}
			else
			{
				__content.scrollRect = new Rectangle(0,0,__width,__height);
				addChild(__content);
			}
		}
 
		private var __Y:int=0;
		private var __backWheel:int;
 
		private var __result:int=0;
		private function wheel(e:MouseEvent):void
		{
			if (__backWheel > 0) {__Y-=20;} else {__Y+=20};
			__backWheel = e.delta;
			if (__Y > __maxY) __Y = __maxY;
			if (__Y < 0) __Y = 0;
			__content.scrollRect = new Rectangle(0,__Y,__width,__height);
 
			__draw.graphics.clear();
			__draw.graphics.beginFill(__color);
			__draw.graphics.lineStyle(0, __color);
 
			__result = __height*(__Y/__HC*100)/100;
			__draw.graphics.drawRect(0, 0, 4, __HD);
			__draw.x = __width-6;
			__draw.y = __result;
		}
 
		private var drawWidth:Number = 0;
		private function overDraw(e:MouseEvent):void
		{
			this.removeEventListener(Event.ENTER_FRAME, outDrawListener);
			this.addEventListener(Event.ENTER_FRAME, overDrawListener);
		}
		private function overDrawListener(e:Event):void
		{
			if (drawWidth < 4)
			{
				drawWidth+=0.6;
 
				__draw.graphics.clear();
				__draw.graphics.beginFill(__color);
				__draw.graphics.lineStyle(0, __color);
				__draw.graphics.drawRect(0, 0, 4+drawWidth, __HD);
				__draw.x = __width-6 - drawWidth/2;
				__draw.y = __result;
			}	
			else
			{
				this.removeEventListener(Event.ENTER_FRAME, overDrawListener);
 
				drawWidth = 4;	
			}
		}
		private function outDraw(e:MouseEvent):void
		{
			this.removeEventListener(Event.ENTER_FRAME, downDrawListener);
			this.removeEventListener(Event.ENTER_FRAME, overDrawListener);
			this.addEventListener(Event.ENTER_FRAME, outDrawListener);
		}
		private function outDrawListener(e:Event):void
		{
			if (drawWidth > 0)
			{
				drawWidth-=0.6;
 
				__draw.graphics.clear();
				__draw.graphics.beginFill(__color);
				__draw.graphics.lineStyle(0, __color);
				__draw.graphics.drawRect(0, 0, 4-drawWidth, __HD);
				__draw.x = __width-6 + drawWidth/2;
				__draw.y = __result;
			}	
			else
			{
				this.removeEventListener(Event.ENTER_FRAME, outDrawListener);
 
				drawWidth = 0;	
			}
		}
 
		private var __drawY:Number;		
 
		private var fDrawY:int;
		private function downDraw(e:MouseEvent):void
		{
			this.addEventListener(Event.ENTER_FRAME, downDrawListener);
			var draw:Sprite = Sprite(e.currentTarget);
			fDrawY = draw.mouseY
		}
		private function downDrawListener(e:Event):void
		{
			__drawY = this.mouseY - fDrawY;
 
			var Y:int = (100 * __drawY/__height) * __HC/100;
			if (Y > __maxY) Y = __maxY;
			if (Y < 0) Y = 0;
			if (__drawY > __height - __HD) __drawY = __height - __HD;
			if (__drawY < 0) __drawY = 0;
			__content.scrollRect = new Rectangle(0,Y,__width,__height);	
			__draw.y = __drawY;
			__result = __draw.y;
			__Y = Y;
		}
 
 
	}
}

Drac0Sha · 30.08.2011, 17:05

Спасибо ) но как в него вставить мои блоки ?

in4core · [+4 06.05.14]

Взять мой класс и всатвлять

Код AS3:

package com.in4core.navigation 
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.display.Sprite;
	import flash.errors.IllegalOperationError;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.text.TextField;
	/**
	 * ...
	 * @author in4core
	 * Display or Text Object Scroller
	 * use addScroll methods to define Scroller
	 * Version 1.0
	 */
	public final class UIScrollBar 
	{	
		//-----------------DisplayObjectInit-----------//
		/*objects*/
		private var _scroll:Sprite;
		private var _mask:DisplayObject;
		private var _content:DisplayObjectContainer;
		private var _rect:Rectangle;
 
		/*coords*/
		private var _startYScroll:int;
		private var _startYContent:int;
		private var _wayOfScroll:int;
 
		//-----------------TextFieldInit-----------//
 
		/*objects*/
		private var _tscroll:Sprite;
		private var _tf:TextField;
		private var _trect:Rectangle;
 
		/*coords*/
		private var _wayOfTextScroll:int;
 
		/////////////////////////////////////////////////////////////////////
		//!4
		//!  4                       PUBLIC
		//!    4                                                           
		/////////////////////////////////////////////////////////////////////
 
		public function addScrollObject( scroll:Sprite,mask:DisplayObject,content:DisplayObjectContainer,way:int ):void {
 
			this._scroll = scroll;
			this._mask = mask;
			this._content = content;
			this._wayOfScroll = way;
			this._startYScroll = _scroll.y;
			this._startYContent = _content.y;
			this._rect = new Rectangle(_scroll.x, _scroll.y, 0, _wayOfScroll);
 
			/*events*/
 
			_scroll.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);
			_scroll.stage.addEventListener(MouseEvent.MOUSE_UP, dragStop);
 
			trace( 'UIScrollBar-Display : INIT' );
		}
 
		public function addScrollText( tf:TextField , scroll:Sprite , way:int ):void {
 
			this._tscroll = scroll;
			this._tf = tf;
			this._wayOfTextScroll = way;
			this._trect = new Rectangle(_tscroll.x, _tscroll.y, 0, _wayOfTextScroll);
 
			/*events*/
 
			_tscroll.addEventListener(MouseEvent.MOUSE_DOWN , tdragStart);
			_tscroll.stage.addEventListener(MouseEvent.MOUSE_UP , tdragStop);
 
			trace( 'UIScrollBar-Text : INIT' );
		}
 
		public function destroy():void {
 
			if (_scroll != null ) {
 
				_scroll.stage.removeEventListener(MouseEvent.MOUSE_MOVE, updatePosition);
				_scroll.removeEventListener(MouseEvent.MOUSE_DOWN, dragStart);
				_scroll.stage.removeEventListener(MouseEvent.MOUSE_UP, dragStop);
			}
 
			if (_tscroll != null ) {
 
				_tscroll.removeEventListener(MouseEvent.MOUSE_DOWN , tdragStart);
				_tscroll.stage.removeEventListener(MouseEvent.MOUSE_UP , tdragStop);
				_tscroll.stage.removeEventListener(MouseEvent.MOUSE_MOVE ,updateTextPosition);
			}
 
			trace( 'UIScrollBar : REMOVED' );
 
		}
		/////////////////////////////////////////////////////////////////////
		//!4
		//!  4                       PRIVATE
		//!    4                                                           
		/////////////////////////////////////////////////////////////////////
		private function tdragStart(e:MouseEvent):void {
 
			_tscroll.startDrag(false, _trect);
			_tscroll.stage.addEventListener(MouseEvent.MOUSE_MOVE ,updateTextPosition);
		}
 
		private function tdragStop(e:MouseEvent):void {
 
			_tscroll.stopDrag();
			_tscroll.stage.removeEventListener(MouseEvent.MOUSE_MOVE ,updateTextPosition);
		}
 
		private function dragStart(e:MouseEvent):void {
 
			_scroll.startDrag(false, _rect);
			_scroll.stage.addEventListener(MouseEvent.MOUSE_MOVE, updatePosition);
		}
 
		private function dragStop(e:MouseEvent):void {
 
			_scroll.stopDrag();
			_scroll.stage.removeEventListener(MouseEvent.MOUSE_MOVE, updatePosition);
		}
 
		private function updatePosition (e:MouseEvent):void {
 
			if (_mask.height < _content.height)
 
			{
				//_scroll.mouseEnabled = true;
				_content.y = _startYContent - ( (_content.height - _mask.height) / _wayOfScroll ) * ( _scroll.y - _startYScroll );
			}
 
		}
 
		private function updateTextPosition(e:MouseEvent):void {
 
			_tf.scrollV = Math.round(((_tscroll.y - _trect.y) / _wayOfTextScroll ) * _tf.maxScrollV);
		}
 
		private function updateVisible():void {
 
			if (_mask.height < _content.height) _scroll.visible = true;
			else _scroll.visible = false;
		}
 
	}
 
}

Drac0Sha · 30.08.2011, 17:46

извините, но я совсем начинающий. но не совсем понятно куда именно вставлять.
есть функция, которая рисует блоки-контейнеры, она описана выше.
туда надо вставить этот класс!?

in4core · [+4 06.05.14]

Код AS3:

var sc:UIScrollBar = new UIScrollBar();
 
sc.addScrollObject ( пимпочка скрола наша красивая - как спрайт ,  тут маска для контейнера который крутим - должна быть DO ,  тут контент который будем крутить - спрайт или другой DOc , ну и высота на которую можно крутить )

Vreden · 30.08.2011, 17:53

Drac0Sha, нужно создать экземпляр класса и использовать его методы. Вот пример, конкретно для моего класса

Код AS3:

                private var __scroll:Scroll = new Scroll();
 
		public function PhaseView()
		{
			super();
 
			__scroll.setWidth = 370;
			__scroll.setHeight = 400;
			__scroll.setColor = 0xAD1807;
			__scroll.setContent = //Spite
			this.addChild(__scroll);
			__scroll.x = 0
			__scroll.y = 30;
		}

Вместо //Spite должен быть объект, который у тебя сейчас добавляется на сцену, тобишь блоки контейнеры.

Код AS3:

private var __scroll:Scroll = new Scroll();

Создай класс Scroll с кодом из второго поста.
Или юзай пример in4core аналогично

in4core · [+4 06.05.14]

Ну не совсем аналогично. ато он может дословно понять

Drac0Sha · 30.08.2011, 18:34

не совсем аналогично это как )))
а то походу я дословно понял )

in4core · [+4 06.05.14]

Ну я написал как. подробнее некуда. или что вас смущает?