Вопрос:
…Возникла надобность в другом:- прокрутка области, содержащей, текстовые поля, картинки.. различные элементы…
*…другими словами человек просит меня создать скроллинг для Movie Clip объектов…*
Ответ:
Подобный эффект в Flash реализуется через использование масок. На объект, который нам нужно будет “прокручивать”, в данном случае это будет Movie Clip, накладывается маска, причём объект по своим размерам будет больше маски. Теперь, при правильном перемещении клипа-контейнера какая-то его часть будет видна, а какая-то будет скрываться. Собственно вот и весь скроллинг, который я реализовал в примере (swf) к этому уроку. Как обычно вместе с swf файлом вы можете скачать fla файл исходника и покопаться в исходном коде флешки сами.
Подготавливаем почву для нашей флешки
Для того, чтобы эффект скроллинга в нашей флешке заработал, нам нужно создать:
а) Объект, который будем прокручивать (объект, в котором будут содержаться картинки, текст и прочее);
б) Кнопку скроллинга, потянув которую и будет происходить смещение главного объекта.

На картинке показаны оба элемента. Конечно, как они должны выглядеть каждый из вас будет решать сам. В моём примере прокручиваемый объект содержит только картинки и текст, разбитый на заливку, т.е. фактически такой текст и не является текстом для Flash. Если же вам необходимо использовать именно стандартное Text Field поле, то шрифт, который вы будете использовать, для начала нужно встроить в флешку (я надеюсь, все знают, как встроить шрифт в библиотеку). Необходимо это потому, что шрифты, которые не встроены в Flash приложение, обладают рядом ограничений, одно из которых — при наложении маски текст становится невидимым.
Программируем флешку
После того, как все необходимые элементы созданы, можно приступать и к написанию кода, но для начала нужно как-то назвать объекты, с которыми мы в дальнейшем будем работать. Пусть клип-контейнер будет у нас obj_mc, а кнопка скроллинга scroll_mc. Теперь осталось только вставить следующий код во Flash:
Stage.scaleMode = “noScale”;
_root._quality = “BEST”;
//
//Накладываем маску на объект.
obj_mc.setMask(mask_mc);
//Находим разницу между общей высотой обхекта и высотой “видимой части”, видимая
//часть у нас будет составлять площадь маски, и, соответственно, высота видимой
//части - это будет высота маски.
var varDif:Number = obj_mc._height-mask_mc._height;
//Создаём событие на нажатие кнопки скроллинга
scroll_mc.onPress = function() {
//Переходим во второй кадр скроллинга, чтобы сделать нажатие наглядней
this.gotoAndStop(2);
//Начинаем перетаскивание кнопки скроллинга
this.startDrag(false, this._x, 0, this._x, 150);
//Создаём событие на ДВИЖЕНИЕ МЫШКИ.
this.onMouseMove = function() {
//Пропорционально тому, на сколько скроллинг сместился ниже начала оси Y
//объект, который мы прокручиваем, должен смещаться вверх.
_root.obj_mc._y = -_root.varDif*(this._y/150);
};
};
//После того, как пользователь отпустил кнопку мышки, мы должны остановить
//прокручивание.
scroll_mc.onRelease = scroll_mc.onReleaseOutside=function () {
//Переходим на первый кадр скроллинга.
this.gotoAndStop(1);
//Останавливаем перетаскивание скроллинга
this.stopDrag();
//Удаляем событие на ДВИЖЕНИЕ МЫШКИ, с помощью которого и происходило
//прокручивание объекта.
delete this.onMouseMove;
};
Если что-то не понятно, то как обычно скачиваем исходник к уроку и смотрим, как же всё устроено там.
Сама флешка (swf) | Исходник (fla) |
А подскажите еще как можно реализовать эффект плавного торможения ( после того как кнопку отпустили и тащить перестали - клип еще продолжает прокручиваться до полной остановки)
и еще было бы неплохо прикрутить колесико мыши - чтобы от него тоже прокрутка шла.
скачал исходник
решил изменить размер документа, теперь не могу разобраться почему при прокрутки вверх до конца
отображается ни вся информация
подскажите что нужно сделать, спасибо!
asdd,
Для торможения замени:
_root.obj_mc._y = -_root.varDif*(this._y/150);
на:
_root.tempY = -_root.varDif*(this._y/150);
и добавь в конце кода:
speed = 0.7;
setInterval(smoothscroll, 40);
function smoothscroll() {
if (_root.obj_mc._y <> _root.tempY) {
_root.obj_mc._y = speed*obj_mc._y+(1-speed)*_root.tempY;
}
}
Snok,
Если менял размер текста программно, попробуй заново пересчитать varDif
я вот ту что-то математику не понимаю ни черта...
очень интересует строчка.
_root.obj_mc._y = -_root.varDif*(this._y/150);я так понял что если верхняя граница находиться не в y=0 то перед -_root.varDif должно стоять какое-то число, но как его считать что-то не улавливаю.
где-то я помню видел что-то про это.. но по всей видимости было это на строй версии сайта
В общем запись -root.varDif*(this._y/150) равнозначна 0-root.varDif*(this._y/150). Вот и всё =)
а как сделать чтоб еще от колёсика мыши прокрутка работала?
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
grabber._y += delta;
grabber.Slide();
}
Mouse.addListener(mouseListener);
Из хелпа к onMouuseWheel
Или (не знаю, какой подойдет) http://www.flashist.ru/2007/12/08/vrashhenie-kolyosika-myshki-i-peremotka
Поменял в fla файле исходника прокручиваемый объект, и теперь при нажатие кнопки скроллинга этот объект сразу прокручивается до конца (хотя кнопку скролинга я не двигал) и потом не до конца прокручивается наверх. Зачем?
А какого размера ваш прокручиваемый объект? Может он слишком маленький?
Не скорее слишком большой.
У меня такой вопрос:можно ли,чтобы прокручиваемый объект был не movie clipом,а кнопками. То есть из прокручиваемых изображений можно выбрать какое-либо и при нажатии на него переходить на определенный кадр?
что б все работало надо тут
this.startDrag(false, this._x, 0, this._x, 400);
я написал 400 - так как у меня висота 400(ви пишете вашу)
и тут
_root.obj_mc._y = -_root.varDif*(this._y/400)+650;
тоже пишете какая висота и добавляете + 650 ето у меня висота фото 1050-400 висота скрола=650.
пишете все по вашим меркам и готово-наслаждайтесь работу )))
что б с кнопками создайте прозрачние кнопки поместите их куда хотите дайте им имя
и добавте код за всякой кнопки меняя только имя кнопки
_root.btn_btn._y = -_root.varDif*(this._y/400)+650;
после етого кода
_root.obj_mc._y = -_root.varDif*(this._y/400)+650;
(числа договорились что строго индивидуальние)
маркируйте кнопку и в поле действия введите код
on (release) {
gotoAndPlay("2");
}
где "2" ето имя кадра которого хотите проиграть.
Посмотрите пример (кнопку сделал не на 100% прозрачной что б ее заметили)))
http://prevodionlain.hit.bg/skrol.swf
http://prevodionlain.hit.bg/skrol.swfhttp://prevodionlain.hit.bg/skrol.swf
ganevv, можешь прислать, пожалуйста, исходник? http://prevodionlain.hit.bg/skrol.swf
в AS3 скролл лучше делать не под маской, а используя свойство scrollRect. Есть два преимущества: 1. не надо постоянно за дисплей обжектом таскать маску, 2. скролл работает даже для девайс шрифтов (т.е. шрифтов, которые не встроены во флешку.)
Ну и еще одно: скорее всего такой скролл меньше грузит проц.
http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/DisplayObject.html#scrollRect
Как сделать так, чтобы из списка перетаскивать
on (press) { startDrag ("", false); } on (release) { stopDrag (); }MovieClip в основное окно, не в "MASK" и чтоб он потом не прокручивался уже, а оставался на месте?
Использовал вышепредложенный код для контента (obj_mc) и для ползунка (scroll_mc). Как можно ограничить прокрутку колесом по Y?
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
obj_mc._y += delta*4;
obj_mc.Slide();
}
Mouse.addListener(mouseListener);
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta) {
scroll_mc._y -= delta*4;
scroll_mc.Slide();
}
Mouse.addListener(mouseListener);
Здравствуйте.
Удалось реализовать предложенный вариант скроллинга,
но возникла проблема с Load movie в клип-контейнер:
скролинг не работает. Что делать?
Честно говоря, не очень понимаю, в чём у вас возникла проблема, поэтому не знаю, как помочь вам.
Сделал клип, но не получается "встроить" его в общую сцену.
Попробовал подгрузить через Load movie файл-пример, но тоже не работает - бегунок есть,
а объект скролла не работает
Скорее всего проблемы в путях к клипам, попробуйте отредактировать все места, где используется root.
Спасибо!!!
действительно, нужно быть внимательнее,
не задавая таких вопросов