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

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

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

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

Социальные закладки:
Комментарии:
Комментатор
Комментарий добавил(а): edapskov
Дата добавления: 2013-05-28
Превратите свой мувиклип в класс: зайдите в библиотеку проекта и над мувиклипом правым кликом мышки вызовите контекстное меню - в контекстном меню жмите пункт СВОЙСТВА - откроется окно СВОЙСТВА СИМВОЛА, в котором поставьте галочку у пункта ЭКСПОРТИРОВАТЬ ДЛЯ ACTIONSCRIPT, а в поле ввода КЛАСС введите имя вашего класс (например, Mc) - кнопка OK. Со сцены флеш-ролика мувиклип удаляем, а для создания скроллбара используем код из последнего примера.
Комментатор
Комментарий добавил(а): Алексей
Дата добавления: 2013-05-28
разместил прямоуголник на сцену как moveclip с именем scroll_bar_,на кадр 65, затем нужно использовать классы, или технология такая - что если используешь классы то нужно программно создавать экземпляры. как??? цель сделать свой скорлл бар.
Добавить комментарий:







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

Идиот-тест

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

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