UIScrollBar

25_Kadr · 11.08.2005, 12:51

всем привет.
как заменить стандартные кнопки вверх вниз и бегунок у UIScrollBar на свои клипы?

setSkin? не могу догнать как он используется.
если можно пальцах.

тема конечно не один раз обсуждалась...
но ничего путного не нашел, наверно не умею искать.
если в хелп то предметно
если в поиск то тоже.

заранее спасибо

Andrew_J · 03.01.2007, 01:26

Не хотел начинать новую тему, поэтому задам вопрос тут.

Можно ли подцепить UIScrollBar для скролинга не текста а графики, может какие примеры кто подбросит, буду очень благодарен

wvxvw · 04.01.2007, 00:35

Код:

import flash.geom.ColorTransform;
import flash.geom.Transform;
class Slid {
	var __body:MovieClip;
	var __handle:MovieClip;
	var __lArr:MovieClip;
	var __rArr:MovieClip;
	var __ct:ColorTransform;
	function Slid(_mc:MovieClip, dir:Boolean, dim:Number, _tgt) {
		trace("Slider for: "+_tgt);
		__ct = new ColorTransform();
		var me:Slid = this.me();
		var overColor:Function = function () {
			var __ct:ColorTransform = new ColorTransform();
			var trans:Transform = new Transform(this);
			__ct.rgb = Usr.__col.__over;
			trans.colorTransform = __ct;
		};
		var downColor:Function = function () {
			var __ct:ColorTransform = new ColorTransform();
			var trans:Transform = new Transform(this);
			__ct.rgb = Usr.__col.__out;
			trans.colorTransform = __ct;
		};
		var outColor:Function = function () {
			var __ct:ColorTransform = new ColorTransform();
			var trans:Transform = new Transform(this);
			__ct.rgb = Usr.__col.__down;
			trans.colorTransform = __ct;
		};
		if (dir) {
			__body = _mc.createEmptyMovieClip("__body", _mc.getNextHighestDepth());
			with (__body) {
				beginFill(Usr.__col.__out, 100);
				moveTo(0, 0);
				lineTo(10, 0);
				lineTo(10, dim);
				lineTo(0, dim);
				lineTo(0, 0);
				endFill();
			}
			__ct.rgb = Usr.__col.__down;
			__rArr = __body.attachMovie("arr", "__rArr", __body.getNextHighestDepth());
			with (__rArr) {
				_rotation = -90;
				_y = 10;
			}
			__rArr.onRollOver = overColor;
			__rArr.onRollOut = outColor;
			var trans:Transform = new Transform(__rArr);
			trans.colorTransform = __ct;
			__lArr = __body.attachMovie("arr", "__lArr", __body.getNextHighestDepth());
			with (__lArr) {
				_rotation = 90;
				_y = dim-10;
				_x = 10;
			}
			__lArr.onRollOver = overColor;
			__lArr.onRollOut = outColor;
			var trans:Transform = new Transform(__lArr);
			trans.colorTransform = __ct;
			__handle = __body.attachMovie("sl", "__handle", __body.getNextHighestDepth());
			with (__handle) {
				_y = 11;
				_rotation = 90;
				_x = 10;
			}
			__handle.onRollOver = overColor;
			__handle.onRollOut = outColor;
			__handle._minY = __handle._y;
			__handle._maxY = __handle._y+__body._height-38;
			__handle._circut = __body._height-38;
			var trans:Transform = new Transform(__handle);
			trans.colorTransform = __ct;
			__handle.onPress = function() {
				Evt.regSlid(me);
				this._regPoint = this._ymouse;
				this.onEnterFrame = function() {
					if (this._y<=this._maxY && this._y>=this._minY) {
						this._y = this._parent._ymouse-this._regPoint;
						if (this._y>this._maxY) {
							this._y = this._maxY;
						}
						if (this._y<this._minY) {
							this._y = this._minY;
						}
						_tgt.__scroll((this._y-this._minY)/(this._circut/100));
					}
				};
			};
			__handle.onRelease = function() {
				var __ct:ColorTransform = new ColorTransform();
				var trans:Transform = new Transform(this);
				__ct.rgb = Usr.__col.__down;
				trans.colorTransform = __ct;
				delete this.onEnterFrame;
			};
			__handle.onReleaseOutside = __handle.onRelease;
			__handle.__move = function(_arr:Array):Void  {
				var shift:Number = _arr[0]-_arr[2];
				var maxShift:Number = _arr[1]-_arr[3];
				var pc:Number = shift/(maxShift/100);
				this._y = this._minY+this._circut*pc/100;
			};
		} else {
			__body = _mc.createEmptyMovieClip("__body", _mc.getNextHighestDepth());
			with (__body) {
				beginFill(Usr.__col.__out, 100);
				moveTo(0, 0);
				lineTo(dim, 0);
				lineTo(dim, 10);
				lineTo(0, 10);
				lineTo(0, 0);
				endFill();
			}
			__ct.rgb = Usr.__col.__down;
			__rArr = __body.attachMovie("arr", "__rArr", __body.getNextHighestDepth());
			with (__rArr) {
				_rotation = 180;
				_y = 10;
				_x = 10;
			}
			__rArr.onRollOver = overColor;
			__rArr.onRollOut = outColor;
			var trans:Transform = new Transform(__rArr);
			trans.colorTransform = __ct;
			__lArr = __body.attachMovie("arr", "__lArr", __body.getNextHighestDepth());
			with (__lArr) {
				_x = dim-10;
			}
			__lArr.onRollOver = overColor;
			__lArr.onRollOut = outColor;
			var trans:Transform = new Transform(__lArr);
			trans.colorTransform = __ct;
			__handle = __body.attachMovie("sl", "__handle", __body.getNextHighestDepth());
			with (__handle) {
				_x = 11;
			}
			__handle.onRollOver = overColor;
			__handle.onRollOut = outColor;
			__handle._minX = __handle._x;
			__handle._maxX = __handle._x+__body._width-38;
			__handle._circut = __body._width-38;
			var trans:Transform = new Transform(__handle);
			trans.colorTransform = __ct;
			__handle.onPress = function() {
				Evt.regSlid(me);
				this._regPoint = this._xmouse;
				this.onEnterFrame = function() {
					if (this._x<=this._maxX && this._x>=this._minX) {
						this._x = this._parent._xmouse-this._regPoint;
						if (this._x>this._maxX) {
							this._x = this._maxX;
						}
						if (this._x<this._minX) {
							this._x = this._minX;
						}
						_tgt.__scroll((this._x-this._minX)/(this._circut/100));
					}
				};
			};
			__handle.onRelease = function() {
				var __ct:ColorTransform = new ColorTransform();
				var trans:Transform = new Transform(this);
				__ct.rgb = Usr.__col.__down;
				trans.colorTransform = __ct;
				delete this.onEnterFrame;
			};
			__handle.onReleaseOutside = __handle.onRelease;
			__handle.__move = function(_arr:Array):Void  {
				var shift:Number = _arr[0]-_arr[2];
				var maxShift:Number = _arr[1]-_arr[3];
				var pc:Number = shift/(maxShift/100);
				this._x = this._minX+this._circut*pc/100;
			};
		}
		__lArr.onPress = function() {
			Evt.regSlid(me);
			this.onEnterFrame = function() {
				var tmp_arr:Array = _tgt.__move(false, 5);
				Usr.__slid.__handle.__move(tmp_arr);
			};
		};
		__lArr.onRelease = function() {
			var __ct:ColorTransform = new ColorTransform();
			var trans:Transform = new Transform(this);
			__ct.rgb = Usr.__col.__down;
			trans.colorTransform = __ct;
			delete this.onEnterFrame;
		};
		__lArr.onReleaseOutside = __lArr.onRelease;
		__rArr.onPress = function() {
			Evt.regSlid(me);
			this.onEnterFrame = function() {
				var tmp_arr:Array = _tgt.__move(true, 5);
				Usr.__slid.__handle.__move(tmp_arr);
			};
		};
		__rArr.onRelease = function() {
			var __ct:ColorTransform = new ColorTransform();
			var trans:Transform = new Transform(this);
			__ct.rgb = Usr.__col.__down;
			trans.colorTransform = __ct;
			delete this.onEnterFrame;
		};
		__rArr.onReleaseOutside = __rArr.onRelease;
	}
	function me():Slid {
		return this;
	}
}

Это сам скроллер, очень простой, но довольно точный, весит гораздо меньше, чем компонент с аналогичной функцией от ММ.

Usr.__col - ссылка на статическую переменную класса Usr содержащую массив цетов в шестнадцатиричном представлении.

Usr.__slid.__handle - ссылка на текущий активный ползунок-скроллер

Evt.regSlid(me); - регистрация текущего активного ползунка

Для реализации элементов управления скроллером используются 2 клипа из библиотеки "arr" и "sl" - вот их-то можно нарисовать как угодно, ну и соответственно потом размеры подогнать, у меня они были 10х10 и 13х13 соответственно =)

пример подключения и использования:

Код:

class ListMenue {
	var __body:MovieClip;
	private var __mask:MovieClip;
	private var __holder:MovieClip;
	var __list_arr:Array = [];
	var __slid:Slid;
	var __long:Boolean = false;
	function ListMenue(_mc:MovieClip, _arr:Array, h:Number) {
		__body = _mc;
		__holder = __body.createEmptyMovieClip("__holder", 0);
		__list_arr = [];
		for (var i:Number = 0; i<_arr.length; i++) {
			var _tmp_mc:MovieClip = __holder.createEmptyMovieClip("_tmp"+i, __holder.getNextHighestDepth());
			var tmp_dir:String = _arr[i].uri;
			var func:Function = function (_str:String) {
				Evt.selectCategory(_str);
				Usr.__gallery.changeSubCategory();
			};
			var _temp_bt:But = new But(_tmp_mc, _arr[i], {h:25, w:190, _id:i, _father:this, _skinned:true}, func);
			__list_arr.push(_temp_bt);
			_tmp_mc._y = i*(_tmp_mc._height+1);
		}
		__mask = __body.createEmptyMovieClip("__mask", 2);
		with (__mask) {
			beginFill(0, 100);
			moveTo(0, 0);
			lineTo(_mc._width, 0);
			lineTo(_mc._width, h);
			lineTo(0, h);
			lineTo(0, 0);
			endFill();
		}
		__holder.setMask(__mask);
		__holder._absY = __holder._y;
		if (__holder._height>__mask._height) {
			__long = true;
		}
	}
	public function __move(dir:Boolean, step:Number):Array {
		if (__long) {
			if (dir) {
				__holder._y += step;
				if (__holder._y>__mask._y) {
					__holder._y = __mask._y;
				}
			} else {
				__holder._y -= step;
				if (__holder._y+__holder._height<__mask._y+__mask._height) {
					__holder._y = __mask._y+__mask._height-__holder._height;
				}
			}
		}
		return [__holder._absY, __holder._height, __holder._y, __mask._height];
	}
	public function __scroll(percent:Number) {
		if (__long) {
			var pc:Number = (__holder._height-__mask._height)/100;
			__holder._y = __holder._absY-pc*percent;
		}
	}
	public function selectBut(_n:Number):Void {
		for (var i:Number = 0; i<__list_arr.length; i++) {
			if (i == _n) {
				__list_arr[i].sel(true);
			} else {
				__list_arr[i].sel(false);
			}
		}
	}
}

Принципиально наличие функций __move и __scroll у объекта связанного со скроллером, все остальное - по желанию.

Andrew_J · 04.01.2007, 02:22

У меня это всё сразу чтото заэррорило

Пример покажи...

wvxvw · 04.01.2007, 04:42

http://www.semel-kitchens.co.il/
=)
В исходниках не хватает трех классов But, Evt, Usr, но они не имеют непосредственного отношения к делу, собственно:
But - создает кнопку
Evt - в данном конкретном случае переключает между скроллерами (если на сцене есть больше чем 1 скроллер, чтобы знать, кого двигать)
Usr - класс с набором статических переменных, в данном случае содержит всякую мишуру типа цветов, количества категорий\подкатегорий, текущие активные элементы управления и т.п.

PS. Сайт пока на стадии разработки, так что не все там работает.
Если очень захочется - могу выложить все исходники к нему. =)

//поправил ссылку, но она наверное тоже долго не проживет. Я больше над этим работать не буду, хз чего с этим будет =)

Nirth · 04.01.2007, 07:11

A чем ScrollPane не устраивает=)?

wvxvw · 04.01.2007, 13:40

2 Nirth:
Если вопрос ко мне, то компонент от ММ не устраивает по таким причинам:
- отсутствие возможности нормального редактирования (конечно, можно декомпилировать, и потом собрать заново, но это и не красиво, да и не стоит оно того, как по мне...)
- весит больше (флешка в примере весит около 7,5 К, в готовом виде будет что-то около 10 К) если бы я ее делал используя компоненты от ММ - было бы как минимум в 2 раза больше...
- Естесственно, мне со своим кодом проще жить, чем с чужим %) Но это по-сути пункт №1 =)
- Ползунок скроллера в стандартных компонентах перемещается не очень точно: когда дотаскиваешь его до максимального значения он немного "подпрыгивает" назад - мне кажется, что это не очень красиво...

jeno_kiev · 19.05.2007, 02:53

а можно еще раз пример...ссылка вроде битая...