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)

Комментарии (27)   Автор: 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 баллов

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

AlexGodsmack
25.10.10 | 00:10
0 баллов

блин, да в чем же прикол?? как только пытаюсь написать что то по примеру вашего кода, ниче не получается, но как только открываю вашу флешку - вуаля!! все работает!! В чем же дело?? Может подскажет кто нибудь что не так?

Stage.scaleMode = "noScale";
_root._quality = "BEST";
mc.setMask(my_mask);
btn.onPress = function(){
	this.gotoAndStop(2);
	this.startDrag(false,this._x,100,this._x,300);
	this.onMouseMove = function(){
		_root.mc._y = this._y;
	};

};
btn.onRelease = btn.onReleaseOutside = function(){
	this.gotoAndStop(1)
	this.stopDrag()
	delete this.onMouseMove
}

AlexGodsmack
25.10.10 | 09:35
0 баллов

PS: врпочем у меня получается когда, я ввожу седующие коррективы:

btn.onPress = function(){
                  onEnterFrame = function(){
                  this.startDrag(false, this._x, 0, this._x, 300)
                  }
}

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

AlexGodsmack
26.10.10 | 00:02
0 баллов

Вобщем дела такие - я долго тумкал как сообразить и не дожидаясь ответа пришлось придумать свой код. Не без помощи этого урока конечно. И я бы здесь пожалуй написал бы свой урок, но увы мана и баллы мне этого не позволяют)) поэтому кому интересно, я просто оставлю код, считаю это из всех вариантов, какие я только нашел в инете, этот самый примитивный:

btn.onPress = function(){  //где btn наш скролл
              onMouseMove = function(){
              btn._y = _ymouse
              if (btn._y>= "наш верхний предел"){
                        btn._y = "равен нашему верхнему пределу"
              }
              if (btn._y<="наш нижний предел"){
                        btn._y = "равен нашему нижнему пределу"
              }
       }
}
btn.onRelease = btn.onReleaseOutside = function(){
              onMouseMove = function(){
                       btn._y = _root.btn._y//то бишь мы присваиваем значение y нашему скроллу то, которое у нас текущее в корне
             }
}    
mov.setMask(mymask) //  ну  за эту строчку спасибо уроку)))
onEnterFrame = function(){ // ну и  непосредственно ставим нашу связку игриков между mov и btn на постоянное обновление, потому что как показала практика, без этого они не сцепятся
              mov._y = -(varDif*(btn._y)-"разница между начальным y mov и начальным y btn ")
}

balamoot
24.12.10 | 15:24
0 баллов

По данному уроку есть вопрос:
Как регулировать нижнюю границу объекта который скролится?
Дело в том что у меня он большой(obj_mc), и при прокрутке он не выезжает до конца.
С верхней границей понятно.
admin писал:

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

А как быть с нижней подскажите?

 
 
 
 

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

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

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