Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Создание прокручиваемого текстового поля


1. Создаём новый документ Flash размера 300x300.

2. Переименовываем единственный слой на "Main". Далее создаём на этом слое текстовое поле(у меня статическое) и вводим необходимый текст (я взял текст с курса лекций по системам автоматического управления:-) ). Спозиционируйте текст в центре рабочего поля. Выделяем текстовое поле и нажимаем F8 для преобразования в мувиклип. В поле Name вписываем имя "Text_mc". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу.

3. Теперь в поле Instance Name нашего мувиклипа с текстовым полем пишем "txt".

Вот что у вас примерно должно быть:

 

 

 

отсюда видно что текст даже длинее чем рабочая область документа!

3. Потом создаём новый слой выше слоя "Main" и переименовываем его на "scrollBar". Берём инструмент Rectangle(прямоугольник), убираем рамку, и рисуем полосу прокрутки шириной 20 пикселей и высотой 275 пикселей, примерно так:

 

 

4. Преобразуем нашу полосу прокрутки в мувиклип(F8). В поле Name вписываем имя "Scroll Bar". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу:

5. Теперь в поле Instance Name нашей полосы прокрутки пишем "scrollBar".

6. Двойным щелчком по полосе прокрутки переходим в область её редактирования. Переименовываем единственный слой - пишем "Scroll Line". Выделяем единственный кадр на этом слое и жмём F8, для преобразования текущего прямоугольника(теперь это линия прокрутки) в мувиклип. В поле Name вписываем имя "Scroll Line". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу.

7. В поле Instance Name нашей линии прокрутки пишем "scrollLine".

8. Теперь будем создавать ползунок для полосы прокрутки. Мы всё ещё находимся в мувиклипе "Scroll Bar". Создаём новый слой выше текущего и переименовываем его на "Scroller".

9. В слое "Scroller" рисуем прямоугольник без рамки такой же ширины, как и линия прокрутки 20 пикселей, а высота - 30 пикселей:

 

 

 

10. Не снимая выделения с нового прямоугольника нажимаем F8 и преобразуем его в мувиклип. В поле Name вписываем имя "Scroller". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу.

11. В поле Instance Name нашего ползунка пишем "scroller".

12. Переходим на главную временную шкалу и создаём новый слой выше слоя "Main" и переименовываем его на "Mask"(в нём будет прямоугольник - маска).

13. Рисуем прямоугольник шириной с мувиклип с текстовым полем, и высотой с полосу прокрутки и нажимаем F8. В поле Name вписываем имя "Mask". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу:

 

 

14. В поле Instance Name нашего ползунка пишем "masker".

15. Создаём новый слой выше всех и называем его "Actions"(в нём будем писать код).

16. Нажимаем на первый кадр слоя "Actions" и нажимаем F9, для перехода на панель Actions и пишем код. Вот код:

 

//сразу маскируем мувиклип с текстовым полем
//txt - мувиклип с текстовым полем
//masker - маска
txt.mask = masker;
//создаём прямоугольную область прокрутки в мувиклипе с текстовым полем(txt)
txt.scrollRect = new Rectangle(0,0,txt.width,txt.height);
//кешируем мувиклипе с текстовым полем(txt)
txt.cacheAsBitmap = true;
//устанавливаем наш ползунок в положение 0 по Y - самый верх
//scrollBar - полоса прокрутки(в ней находятся: линия прокрутки и ползунок)
//scrollBar.scroller - ползунок
scrollBar.scroller.y = 0;
//слушаем событие нажатия мышкой на ползунок и вызываем функцию 'downHandler'
scrollBar.scroller.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
//слушаем событие отпускания мышки над ползунком и вызываем функцию 'upHandler'
scrollBar.scroller.addEventListener(MouseEvent.MOUSE_UP, upHandler);
//слушаем событие уведения мышки с ползунка и вызываем функцию 'outHandler'
scrollBar.scroller.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
//функция вызывается при нажатии мышкой на ползунок
function downHandler(event:MouseEvent){
//слушаем событие движения мышки над ползунком и вызываем функцию 'moveHandler'
//event.currentTarget - в данном случае ползунок(передаётся через параметр)
event.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
//создаём область перетаскивания ползунка внутри полосы прокрутки
var dragRect:Rectangle = new Rectangle(0,0,0,scrollBar.scrollLine.height-scrollBar.scroller.height);
//начинаем перетаскивание по заданной области
event.currentTarget.startDrag(false,dragRect);
}
//------------
// функция вызывается при отпускании мышки над ползунком
function upHandler(event:MouseEvent){
//при отпускании мышки над ползунком удаляем слушатель события движения мышки
event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
//прекращаем перетаскивание
event.currentTarget.stopDrag();
}
//------------
//функция вызывается при уведении мышки с ползунка
function outHandler(event:MouseEvent){
//при уведении мышки с ползунка удаляем слушатель события движения мышки
event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
//прекращаем перетаскивание
event.currentTarget.stopDrag();
}
//------------
//функция вызывается при движении мышки над ползунком если на него нажали
function moveHandler(event:MouseEvent){
//передаём в новый объект Rectangle результаты прокрутки
var rect:Rectangle = txt.scrollRect;
//вычисляем процент прокрутки относительно передвижения ползунка
var percent:Number = event.currentTarget.y/(scrollBar.scrollLine.height-event.currentTarget.height)*(rect.height-masker.height);
//записываем вычисленный процент в объект Rectangle
rect.y = percent;
//применяем новые координаты для прокрутки
txt.scrollRect = rect;
}
//------------


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.