Продолжим знакомство с флеш-«плюшками», найденными на буржуйском ресурсе, который я уже упоминал несколькими постами ранее. И сегодня рассмотрим работу с библиотекой 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;
Фух! Сделали! А теперь самое время посмотреть на результат наших трудов :-) Смотрим, проверяем работоспособность и... наслаждаемся:
Как вы, наверно, уже могли догадаться, с помощью 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 CS5.5 и библиотеку Zscrollez можно скачать здесь.
Рейтинг поста: 
