ScrollBar на ActionScript 3.0
Продовжимо знайомство з флеш- «пляшками», знайденими на буржуйському ресурсі, який я вже згадував декількома постами раніше. І сьогодні розглянемо роботу з бібліотекою Zscrollez. яка, як можна зрозуміти з її назви, дозволяє створити ScrollBar. тобто скролліруемое текстове поле (насправді створюється скролліруемий мувікліп, але про це трохи пізніше). В принципі, ScrollBar - штука затребувана і в мережі можна знайти багато способів її реалізації на мові ActionScript 3.0. Але особисто мені бібліотека Zscrollez сподобалася тим, що вона невелика (складається всього з двох класів), створена в стилі «code only», легко налаштовується і виглядає вельми симпатично в готовому вигляді.
Код ActionScript 3.0:
Добре. Бібліотеку підключили. Але, перед тим, як її застосувати, нам треба виконати деякі підготовчі кроки. Справа в тому, що у нас немає на поточний момент найголовнішого - текстового поля, яке ми і будемо прокручувати. Давайте його створимо.
Код 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:
Властивість scrollWheel відповідає за реакцію скролліруемого текстового поля на прокручування коліщатка мишки: якщо властивість scrollWheel має значення true, то при прокручуванні коліщатка мишки над текстовим полем відбувається скроллінгом цього текстового поля, а якщо false - скроллінгом не відбувається.
Код ActionScript 3.0:
Властивість handCursor відповідає за відображення курсора мишки при наведенні на скроллер: якщо властивість має значення true, то курсор мишки набуває вигляду руки (як при наведенні на кнопку), а якщо false - курсор не змінюється.
Код ActionScript 3.0:
А тепер давайте об'єднаємо всі перераховані раніше кроки в єдиний закінчений код.
Код 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 Bu ilder, а також доступний в 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 можна скачати тут.