9
фев
  Скроллинг Movie Clip объектов во Flash 0 баллов
 

Вопрос:


…Возникла надобность в другом:- прокрутка области, содержащей, текстовые поля, картинки.. различные элементы…
*…другими словами человек просит меня создать скроллинг для 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)

Комментарии (23)   Автор: admin
Комментарии
asdd
27.03.09 | 20:47
0 баллов

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

Shok
11.04.09 | 14:08
-14 баллов

скачал исходник

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

подскажите что нужно сделать, спасибо!

osip.sasha
21.04.09 | 06:45
0 баллов

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

Taiki
08.06.09 | 02:01
0 баллов

я вот ту что-то математику не понимаю ни черта...

очень интересует строчка.

_root.obj_mc._y = -_root.varDif*(this._y/150);

я так понял что если верхняя граница находиться не в y=0 то перед -_root.varDif должно стоять какое-то число, но как его считать что-то не улавливаю.

где-то я помню видел что-то про это.. но по всей видимости было это на строй версии сайта

admin
10.06.09 | 16:34
0 баллов

В общем запись -root.varDif*(this._y/150) равнозначна 0-root.varDif*(this._y/150). Вот и всё =)

dimetradim
17.06.09 | 14:43
0 баллов

а как сделать чтоб еще от колёсика мыши прокрутка работала?

Jerry
18.06.09 | 15:15
16 баллов

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

Safin
21.06.09 | 20:19
0 баллов

Поменял в fla файле исходника прокручиваемый объект, и теперь при нажатие кнопки скроллинга этот объект сразу прокручивается до конца (хотя кнопку скролинга я не двигал) и потом не до конца прокручивается наверх. Зачем?

JEX
22.06.09 | 14:05
0 баллов

А какого размера ваш прокручиваемый объект? Может он слишком маленький?

Safin
23.06.09 | 10:39
0 баллов

Не скорее слишком большой.

marusy
26.07.09 | 19:55
0 баллов

У меня такой вопрос:можно ли,чтобы прокручиваемый объект был не movie clipом,а кнопками. То есть из прокручиваемых изображений можно выбрать какое-либо и при нажатии на него переходить на определенный кадр?

ganevv
01.08.09 | 19:40
0 баллов

что б все работало надо тут
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.
пишете все по вашим меркам и готово-наслаждайтесь работу )))

ganevv
01.08.09 | 20:14
0 баллов

что б с кнопками создайте прозрачние кнопки поместите их куда хотите дайте им имя
и добавте код за всякой кнопки меняя только имя кнопки
_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

ganevv
01.08.09 | 20:15
0 баллов

http://prevodionlain.hit.bg/skrol.swfhttp://prevodionlain.hit.bg/skrol.swf

Sheih
07.06.10 | 19:27
0 баллов

ganevv, можешь прислать, пожалуйста, исходник? http://prevodionlain.hit.bg/skrol.swf

aztek
08.09.09 | 12:23
0 баллов

в AS3 скролл лучше делать не под маской, а используя свойство scrollRect. Есть два преимущества: 1. не надо постоянно за дисплей обжектом таскать маску, 2. скролл работает даже для девайс шрифтов (т.е. шрифтов, которые не встроены во флешку.)

Ну и еще одно: скорее всего такой скролл меньше грузит проц.

http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/DisplayObject.html#scrollRect

Sheih
29.10.09 | 12:07
0 баллов

Как сделать так, чтобы из списка перетаскивать

on (press) {
    startDrag ("", false); 
}
on (release) {    
stopDrag ();
}

MovieClip в основное окно, не в "MASK" и чтоб он потом не прокручивался уже, а оставался на месте?

Alex
26.11.09 | 14:30
0 баллов

Использовал вышепредложенный код для контента (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);

Anthon
28.02.10 | 17:23
0 баллов

Здравствуйте.
Удалось реализовать предложенный вариант скроллинга,
но возникла проблема с Load movie в клип-контейнер:
скролинг не работает. Что делать?

admin
28.02.10 | 19:41
0 баллов

Честно говоря, не очень понимаю, в чём у вас возникла проблема, поэтому не знаю, как помочь вам.

Anthon
01.03.10 | 00:59
0 баллов

Сделал клип, но не получается "встроить" его в общую сцену.
Попробовал подгрузить через Load movie файл-пример, но тоже не работает - бегунок есть,
а объект скролла не работает

admin
01.03.10 | 01:49
0 баллов

Скорее всего проблемы в путях к клипам, попробуйте отредактировать все места, где используется root.

Anthon
02.03.10 | 21:31
0 баллов

Спасибо!!!
действительно, нужно быть внимательнее,
не задавая таких вопросов

 
 
 
 

Последние комментарии

Полезные ссылки

Реклама сайтов

Купальники известный марки Amarea
В широком ассортименте мебель для ванной в Вашу квартиру
Сайт о фильмах любых жанров и направлений
проектирование пожаротушения на производстве для обеспечения пожарной безопасности