ScrollBar на ActionScript 3.0

Продолжим знакомство с флеш-«плюшками», найденными на буржуйском ресурсе, который я уже упоминал несколькими постами ранее. И сегодня рассмотрим работу с библиотекой Zscrollez, которая, как можно понять из её названия, позволяет создать ScrollBar, то есть скроллируемое текстовое поле (на самом деле создаётся скроллируемый мувиклип, но об этом чуть позже). В принципе, ScrollBar - штука востребованная и в сети можно найти много способов её реализации на языке ActionScript 3.0. Но лично мне библиотека Zscrollez приглянулась тем, что она небольшая (состоит всего из двух классов), создана в стиле «code only», легко настраивается и выглядит весьма симпатично в готовом виде.

Итак, как я уже ранее сказал, библиотека классов Zscrollez состоит всего из двух классов (они прилагаются к исходнику, ссылка на который в конце данного поста). Библиотеку мы размещаем в одной папке с флеш-проектом, созданным в Adobe Flash, а затем подключаем Zscrollez к нашему флеш-проекту.

Код ActionScript 3.0:

import ph.component.Zscrollez;

Хорошо. Библиотеку подключили. Но, перед тем, как её применить, нам надо выполнить некоторые подготовительные шаги. Дело в том, что у нас нет на текущий момент самого главного - текстового поля, которое мы и будем скроллировать. Давайте его создадим...

Код ActionScript 3.0:

/* форматирование текста */ var fTxt:TextFormat = new TextFormat(); fTxt.align = TextFormatAlign.JUSTIFY; fTxt.size = 12; fTxt.bold = true; fTxt.color = 0x666666; fTxt.font = "Verdana"; /* создаём текстовое поле */ var myTxt:TextField = new TextField(); myTxt.width = 490; myTxt.autoSize = TextFieldAutoSize.CENTER; myTxt.multiline = true; myTxt.wordWrap = true; myTxt.selectable = false; myTxt.text = "Наш текст."; myTxt.setTextFormat(fTxt);

Текстовое поле мы создали, но пока не добавили его в список отображения. Почему? Дело в том, что мы должны наше текстовое поле поместить в MovieClip, а мувик передать экземпляру класса Zscrollez в качестве одного из параметров. И только потом данный экземпляр класса Zscrollez добавляется в список отображения. Поэтому создаём мувиклип-контейнер для ранее созданного текстового поля:

Код ActionScript 3.0:

var mc:MovieClip = new MovieClip(); mc.addChild(myTxt);

А теперь создадим экземпляр класса Zscrollez и поместим в него созданный выше мувиклип...

Код ActionScript 3.0:

var zscrollez:Zscrollez = new Zscrollez(mc,350);

Здесь в качестве первого параметра конструктора объекта фигурирует мувиклип-контейнер с текстовым полем внутри, а второй параметр - это высота видимой области скроллируемого мувиклипа.

А теперь, наконец-то, добавляем наш ScrollBar в список отображения...

Код ActionScript 3.0:

addChild(zscrollez); zscrollez.x = zscrollez.y = 25;

Как я уже ранее упоминал, имеется возможность настройки внешнего вида ScrollBar-а. Так, вид полосы прокрутки изменяется методом scrollBarProperties(), который принимает следующие параметры:

1-й - высота скроллера;

2-й - цвет скроллера;

3-й - цвет контейнера, внутри которого может перемещаться скроллер.

Код ActionScript 3.0:

zscrollez.scrollBarProperties(50, 0x333333, 0x999999);

С помощью метода backGround() можно установить цвет фона и прозрачность фона для скроллируемого текстового поля...

Код ActionScript 3.0:

zscrollez.backGround(0xdddddd, 1);

Свойство scrollWheel отвечает за реакцию скроллируемого текстового поля на прокручивание колёсика мышки: если свойство scrollWheel имеет значение true, то при прокручивании колёсика мышки над текстовым полем происходит скроллирование этого текстового поля, а если false - скроллирования не происходит.

Код ActionScript 3.0:

zscrollez.scrollWheel = true;

Свойство handCursor отвечает за отображение курсора мышки при наведении на скроллер: если свойство имеет значение true, то курсор мышки принимает вид руки (как при наведении на кнопку), а если false - курсор не изменяется.

Код ActionScript 3.0:

zscrollez.handCursor = true;

А теперь давайте объединим все перечисленные ранее шаги в единый законченный код...

Код ActionScript 3.0:

/* подключаем библиотеку */ import ph.component.Zscrollez; /* форматирование текста */ var fTxt:TextFormat = new TextFormat(); fTxt.align = TextFormatAlign.JUSTIFY; fTxt.size = 12; fTxt.bold = true; fTxt.color = 0x666666; fTxt.font = "Verdana"; /* создаём текстовое поле */ var myTxt:TextField = new TextField(); myTxt.width = 490; myTxt.autoSize = TextFieldAutoSize.CENTER; myTxt.multiline = true; myTxt.wordWrap = true; myTxt.selectable = false; myTxt.text = "ActionScript является языком программирования, используемым в средах выполнения Adobe Flash Player и Adobe AIR. Он обеспечивает интерактивность, обработку данных и многие другие возможности в содержимом Adobe Flash, Flex и AIR, а также в приложениях. \n ActionScript выполняется виртуальной машиной ActionScript (AVM), которая является частью проигрывателя Flash Player и пакета AIR. Обычно код ActionScript компилируется в формате байт-кодов (разновидность языка программирования, записываемого и распознаваемого компьютерами) компилятором, таким, какой встроен в Adobe Flash CS4 Professional или Adobe Flex Builder, а также доступен в Adobe Flex SDK. Байт-коды встраиваются в SWF-файлы, которые выполняются в проигрывателе Flash Player и AIR. ActionScript 3.0 предлагает надежную модель программирования, знакомую разработчикам, имеющим базовые понятия об объектно-ориентированном программировании. Ниже перечислены некоторые из основных функций ActionScript 3.0, добавленные в процессе усовершенствования предыдущих версий ActionScript. \n • Новая виртуальная машина ActionScript, называемая AVM2, использует новый набор инструкций в байт-кодах и обеспечивает значительный прирост производительности. \n • Более современный программный код компилятора выполняет оптимизацию на более высоком уровне, чем предыдущие версии компилятора. \n • Расширенный и улучшенный интерфейс программирования приложений (API) с контролем объектов на нижнем уровне и подлинной объектно-ориентированной моделью. \n • Интерфейс программирования приложений XML создан на основе спецификации ECMAScript для XML (E4X) (ECMA-357 редакция 2). E4X является расширением языка ECMAScript, который добавляет XML в качестве поддерживаемого языком типа данных. \n • Модель события на основе спецификации событий DOM уровня 3."; myTxt.setTextFormat(fTxt); /* создаём мувик-контейнер для текстового поля */ var mc:MovieClip = new MovieClip(); mc.addChild(myTxt); /* создаём экземпляр класса Zscrollez, настраиваем его и добавляем в список отображения */ var zscrollez:Zscrollez = new Zscrollez(mc,350); zscrollez.scrollBarProperties(50, 0x333333, 0x999999); zscrollez.backGround(0xdddddd, 1); zscrollez.scrollWheel = true; zscrollez.handCursor = true; addChild(zscrollez); zscrollez.x = zscrollez.y = 25;

Фух! Сделали! А теперь самое время посмотреть на результат наших трудов :-) Смотрим, проверяем работоспособность и... наслаждаемся:

Загрузить Adobe Flash Player

Как вы, наверно, уже могли догадаться, с помощью Zscrollez можно скроллировать не только текстовые поля, но и MovieClip-ы. Пожалуй, это даже проще в плане кода :-)

Код ActionScript 3.0:

/* подключаем библиотеку */ import ph.component.Zscrollez; /* создаём мувик (класс Mc расширяет класс MovieClip) */ var mc:Mc = new Mc(); /* создаём экземпляр класса Zscrollez, настраиваем его и добавляем в список отображения */ var zscrollez:Zscrollez = new Zscrollez(mc,350); zscrollez.scrollBarProperties(50, 0x333333, 0x999999); zscrollez.scrollWheel = true; zscrollez.handCursor = true; addChild(zscrollez); zscrollez.x = zscrollez.y = 25;

В приведённом ниже примере вы можете скроллировать мувик с градиентной заливкой.

Загрузить Adobe Flash Player

Исходник под Adobe Flash CS5.5 и библиотеку Zscrollez можно скачать здесь.

Автор: admin

Дата добавления: 2011-11-07

Просмотров: 6051

Рейтинг поста: +11-

Правила перепечатки

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2017-05-10
Здравствуйте. Насколько я помню, этот скроллбар данную возможность не поддерживает.
Комментатор
Комментарий добавил(а): Дима
Дата добавления: 2017-05-09
Здравствуйте, скажите пожалуйста, что нужно изменить в классе, чтобы двигать мышкой можно было не ползунок, а содержимое (аналогия - сенсорный дисплей)(так же вверх и вниз)? Спасибо!
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-08-07
Вы что-то с путями намудрили. У вас путь указан:

ph - Zscrollez.as

а в оригинале:

ph - component - Zscrollez.as
Комментатор
Комментарий добавил(а): Василий
Дата добавления: 2013-08-07
Скролл не работает. Пишет ошибку
C:UserscenakDocumentsflashphscrollez.as, строка 1 5001: Имя пакета "@" не отображает местоположение этого файла. Измените имя определения пакета внутри этого файла или переместите файл. C:UserscenakDocumentsflashphscrollez.as
Как это исправить?
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-07-26
Всё нормально встраивается:

/*
подключаем библиотеку
*/
import ph.component.Zscrollez;
import flash.display.Sprite;
/*
создаём мувик (класс Mc расширяет класс MovieClip)
*/
var mc:Mc = new Mc();
/*
спрайт-контейнер
*/
var cont:Sprite = new Sprite();
addChild(cont);
cont.x = cont.y = 25;
/*
создаём экземпляр класса Zscrollez, настраиваем его и добавляем в список отображения
*/
var zscrollez:Zscrollez = new Zscrollez(mc,350);
zscrollez.scrollBarProperties(50, 0x333333, 0x999999);
zscrollez.backGround(0xdddddd, 1);
zscrollez.scrollWheel = true;
zscrollez.handCursor = true;
cont.addChild(zscrollez);

Код проверен на работоспособность.
Комментатор
Комментарий добавил(а): Дмитрий
Дата добавления: 2013-07-26
А как заставить работать этот скроллбар с мувиком из импортированного класса? (у меня работает только на сцене. Внутри класса, который я импортирую, не работает)
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-06-27
Олег, а в чём проблема-то? Конечно, вы должны измерять высоту контента и в зависимости от полученного результата добавлять или не добавлять скроллбар. Вроде, это довольно очевидно.
Комментатор
Комментарий добавил(а): Олег
Дата добавления: 2013-06-27
если высота клипа (собственно контента) окажется меньше маски (в примере, она равна 350), то должен отображаться контент без ScrollBar. А он не отображается совсем...
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-06-19
> в классе Zscrollez - как поменять на скролер с закругленными краями ?

В папке ph есть класс RectScuare. Этот класс и отвечает за отрисовку прямоугольных объектов. Сейчас он рисует именно прямоугольники (метод drawRect). Но, в принципе, можно этот метод поменять на drawRoundRect, чтобы рисовались прямоугольники с закруглёнными краями.
Комментатор
Комментарий добавил(а): Алексей
Дата добавления: 2013-06-06
в классе Zscrollez - как поменять на скролер с закругленными краями ?
Буду благодарен.
Добавить комментарий:







[ + ] помощь по форматирование текста

Идиот-тест

Если все обязательные поля (отмечены * ) заполнены необходимой информацией, то нажимаем кнопку Добавить комментарий.

Страница 1 из 2: 12
Меню
Подписка
Рубрики
Метки
Последние комментарии
Рейтинг постов
Реклама
Друзья
География гостей
Статистика
Яндекс.Метрика