Панель инструментов со скроллом - Страница 2

kotyavo · 17.05.2014, 14:06

Буквально вчера думал как сделать скроллинг контента без компонента с полоской и что бы в AIR работал)

Код AS3:

public var slide_size:Number = 1070;  // размер области для показа

Код AS3:

 
conteiner_items = new Sprite;
conteiner_items.x = 30;
conteiner_items.y = 250;
conteiner_items.scrollRect = new Rectangle(0,0, slide_size, 280);
addChild(conteiner_items);
// Создаем врапер именно его мы и будем двигать
conteiner_wpare= new Sprite;
conteiner_items.addChild(conteiner_wpare);
 
// Это рисуем полостку
var bar:Sprite = new Sprite;
bar.graphics.beginFill(0x474747);
bar.graphics.drawRect(0, 0, slide_size, 10);
bar.graphics.endFill();
bar.y =  260;
conteiner_items.addChild(bar);
// Русуем бегунок
slider = new Sprite;
slider.graphics.beginFill(0xFFFFFF);
slider.graphics.drawRect(0, 0, 100 , 10);
slider.graphics.endFill();
slider.y = 260;
conteiner_items.addChild(slider);
 
addEventListener(Event.ADDED_TO_STAGE, onAddedStage);

onAddedStage

Код AS3:

/**
 * 
 * @param	e
 */
private function onAddedStage(event:Event):void 
{
	removeEventListener(Event.ADDED_TO_STAGE, onAddedStage);	
        //За контейнер двигать удобнее на телефоне для десктопа за ползунок итд.
	//conteiner_wpare.addEventListener(MouseEvent.MOUSE_DOWN, onMouseSliderDown);
	slider.addEventListener(MouseEvent.MOUSE_DOWN, onMouseSliderDown);
	stage.addEventListener(MouseEvent.MOUSE_UP, onMouseSliderUp);
}

Код AS3:

		/**
		 * 
		 * @param	event
		 */
		public function onMouseSliderDown(event:Event)
		{
			slider.startDrag (false, new Rectangle(0,260, slide_size-slider.width, 0));
			slider.addEventListener(Event.ENTER_FRAME, onEnterFrameDrag);
		}
 
		public function onMouseSliderUp(event:Event)
		{
			slider.stopDrag();
			slider.removeEventListener(Event.ENTER_FRAME, onEnterFrameDrag);
		}
 
                // Тот самый метод где я двигаю контенер
		/**
		 * 
		 * @param	e
		 */
		private function onEnterFrameDrag(e:Event)
		{
			conteiner_wpare.x =  -((Math.abs(conteiner_wpare.x - slider.x)/slide_size)*(conteiner_wpare.width-slide_size))
		}

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

Добавлено через 2 минуты
За был сказать, то что мы хотим двигать нужно положить в conteiner_wpare что бы увеличить ширину контейнера.

PrincessRoma · 19.05.2014, 01:26

Сижу уже третий час над скроллбаром и ничего не получается. Близок к отчаянию, ибо завтра с утра сдавать курсовую, а такая мелочь полностью сводит на нет возможность сдачи, т.к. без скролл панели не сделаешь интерфейс.
Народ, киньте готовый fla или as, пожалуйста, с реализацией, если есть.

samana · 19.05.2014, 01:55

Почему не воспользуетесь встроенным из компонентов?

ZackMercury · 19.05.2014, 01:55

Ну вот, например, мой, кривоватый, но рабочий скроллбар.
В него передаёте экземпляр класса TextField, и он использует его scrollV и maxScrollV для прокрутки, а также передать ширину и высоту.
Разбирайтесь) Вам останется только заменить scrollV на scrollRect аналоги и принимать спрайт.
P.S. Хотя тут много лишнего, поэтому проще воспользоваться компонентом)

Код AS3:

package com.general 
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import com.engine.core.App;
 
 
	public class ScrollBar extends Sprite
	{
		private const MIN_DRAG_HEIGHT:int = 9;
 
		private var _tf:TextField;
		private var _drag:Sprite;
		private var _width:int;
		private var _height:int;
 
		public function ScrollBar(tf:TextField, width:int, height:int) 
		{
			trace("... ScrollBar initialized.");
			super();
 
			_tf = tf;
			_width = width;
			_height = height;
			_drag = new Sprite();
 
			drawBackground();
			drawDrag();
 
			updateDrag();
 
			_drag.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
			_tf.addEventListener(Event.SCROLL, updateDrag);
		}
 
		private function scrollUp(e:MouseEvent):void
		{
			if(_tf.scrollV - 5 >= 0)
				_tf.scrollV -= 5;
			else _tf.scrollV = 0;
		}
 
		private function scrollDown(e:MouseEvent):void
		{
			if(_tf.scrollV + 5 <= _tf.maxScrollV)
				_tf.scrollV += 5;
		}
 
		private function drawDrag():void
		{
			_drag.graphics.lineStyle(1, 0x435249, 0.7);
			_drag.graphics.beginFill(0xb9e6ca, 0.6);
			_drag.graphics.drawRect(0, 0, _width, _height);
			_drag.graphics.endFill();
		}
 
		private function startDragging(e:MouseEvent):void
		{
			_drag.removeEventListener(MouseEvent.MOUSE_DOWN, startDragging);
			_tf.removeEventListener(Event.SCROLL, updateDrag);
 
			stage.addEventListener(MouseEvent.MOUSE_MOVE, updateDragging);
			stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
		}
 
		private function updateDragging(e:MouseEvent):void
		{
			if(e.stageY > _drag.height / 2 && e.stageY < _height - _drag.height / 2)
				_drag.y = e.stageY - _drag.height / 2;
			else
			{
				if(e.stageY <= _drag.height / 2)
					_drag.y = 0;
				else
					_drag.y = _height - _drag.height;
			}
 
			_tf.scrollV = _tf.maxScrollV * ((_drag.y) / (_height - _drag.height));
		}
 
		private function stopDragging(e:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, updateDragging);
			stage.removeEventListener(MouseEvent.MOUSE_UP, stopDragging);
 
			_drag.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
			_tf.addEventListener(Event.SCROLL, updateDrag);
		}
 
		private function drawBackground():void
		{
			super.graphics.lineStyle(1, 0x0d3d1f, 0.7);
			super.graphics.beginFill(0x749380, 0.6);
			super.graphics.drawRect(0, 0, _width, _height);
			super.graphics.endFill();
			super.cacheAsBitmap = true;
		}
 
		public function updateDrag(e:Event = null):void
		{
			_drag.scaleY = 1 - _tf.maxScrollV / _tf.height;
			if(_drag.scaleY < 0.05)
			{
				_drag.scaleY = 1;
				_drag.height = MIN_DRAG_HEIGHT;
			}
			_drag.y = _tf.scrollV / _tf.maxScrollV * (_height - _drag.height);
			addChild(_drag);
		}
	}
 
}

PrincessRoma · 19.05.2014, 02:12

Встроенный из компонентов это который fl.controls.Scrollbar? Не получается у меня с ним сдружиться - импорт как-то странно работает - хелпер по коду даже подсказок по полям не дает - приходится смотреть в справочник адобовский, и не понимаю какие ивенты использовать, чтобы понимать, что пользователь дергает бегунок ((

Добавлено через 1 минуту
SuriTheAngel, а что сделать, чтобы скролился не текстфилд уже, а просто спрайт с нарисованным Rectangle?

Добавлено через 5 минут
Так, перепрочел внимательно, увидел ответ на вопрос..но все еще плохо понимаю, что нужно сделать Т_Т

Добавлено через 6 минут
Буду очень рад, если скинете пример с тем же стандартным (

ZackMercury · 19.05.2014, 03:31

Нашёл на одном форуме самый, кажется, простой код по работе со стандартным скроллбаром.

Код AS3:

//set scrollbar event
cmpntScrollBar.addEventListener(ScrollEvent.SCROLL , scrollArticle);
 
function scrollArticle(evt:ScrollEvent):void{
    // Get access to the current scroll rectangle.
    var rect:Rectangle = mcListing.scrollRect;
 
    rect.y = cmpntScrollBar.scrollPosition;
    // Reassign the rectangle to the TextField to "apply" the change.
    mcListing.scrollRect = rect;
}

in4core · [+4 06.05.14]

PrincessRoma на пользуйся, если срочно надо, как текст, так и спрайт будет скролить.

Код AS3:

package com.in4core.navigation 
{
	import com.greensock.TweenMax;
	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 _maskHeight:int;
		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;
		private var _delta:int;
 
		/////////////////////////////////////////////////////////////////////
		//!4
		//!  4                       PUBLIC
		//!    4                                                           
		/////////////////////////////////////////////////////////////////////
 
		public function addScrollObject( scroll:Sprite,maskHeight:int,content:DisplayObjectContainer,way:int ):void {
 
			this._scroll = scroll;
			this._maskHeight = maskHeight;
			this._content = content;
			this._wayOfScroll = way;
			this._startYScroll = _scroll.y;
			this._startYContent = _content.y;
			this._rect = new Rectangle(_scroll.x, _scroll.y, 0, _wayOfScroll);
 
			_scroll.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);
			_scroll.stage.addEventListener(MouseEvent.MOUSE_UP, dragStop);
 
		}
 
		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);
 
			_tscroll.addEventListener(MouseEvent.MOUSE_DOWN , tdragStart);
			_tscroll.stage.addEventListener(MouseEvent.MOUSE_UP , tdragStop);
 
		}
 
		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);
				_scroll.stage.removeEventListener(MouseEvent.MOUSE_WHEEL , onWheel);
			}
 
			if (_tscroll != null ) {
 
				_tscroll.removeEventListener(MouseEvent.MOUSE_DOWN , tdragStart);
				_tscroll.stage.removeEventListener(MouseEvent.MOUSE_UP , tdragStop);
				_tscroll.stage.removeEventListener(MouseEvent.MOUSE_MOVE ,updateTextPosition);
			}
 
			TweenMax.killTweensOf(_content);
 
		}
		/////////////////////////////////////////////////////////////////////
		//!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);
		}
 
		public function updatePosition (e:MouseEvent):void {
 
			if (_maskHeight < _content.height)
			{
				var yy:int = _startYContent - ( (_content.height - _maskHeight) / _wayOfScroll ) * ( _scroll.y - _startYScroll );
 
				//TweenMax.to(_content , 1 , { y:yy } );
				_content.y = yy;
			}
		}
 
		private function updateTextPosition(e:MouseEvent):void {
 
			_tf.scrollV = Math.round(((_tscroll.y - _trect.y) / _wayOfTextScroll ) * _tf.maxScrollV);
		}
 
 
		public function useWheel(delta:int = 4):void
		{
			_delta = delta;
			_scroll.stage.addEventListener(MouseEvent.MOUSE_WHEEL , onWheel);
		}
 
		private function onWheel(e:MouseEvent):void 
		{
			_scroll.y = _scroll.y - e.delta * _delta;
 
			if (_scroll.y < _startYScroll) _scroll.y = _startYScroll;
			else if (_scroll.y > _wayOfScroll + _startYScroll) _scroll.y = _wayOfScroll + _startYScroll;
 
			updatePosition(null);
		}
 
		public function lockWheel():void
		{
			_scroll.stage.removeEventListener(MouseEvent.MOUSE_WHEEL , onWheel);
		}
 
		public function unlockWheel():void
		{
			_scroll.stage.addEventListener(MouseEvent.MOUSE_WHEEL , onWheel);
		}
	}
 
}

ZackMercury · 19.05.2014, 03:35

Цитата:

как текст

У текстовых полей свой "движок" прокрутки, там скроллрект не пройдёт. Если у текста есть граница, она будет обрезаться, ибо скроллрект есть скроллрект и он не изменяет scrollV/scrollH.

in4core · [+4 06.05.14]

Цитата:

У текстовых полей свой "движок" прокрутки, там скроллрект не пройдёт. Если у текста есть граница, она будет обрезаться, ибо скроллрект есть скроллрект и он не изменяет scrollV/scrollH.

Им там и не пользуются. Для текста отдельный инит по скроллВ

ZackMercury · 19.05.2014, 03:40

Цитата:

Сообщение от in4core

Им там и не пользуются. Для текста отдельный инит по скроллВ

Извиняюсь, уже засыпаю, внимательностью не пахнет.