Розробка компонентів користувача у FLASH MX 2004
Зв’язування компонентів – нововведення у Flash MX 2004. Створення компонентів із стандартним інтерфейсом: налагодження параметрів, додавання, вилучення та зміна порядку. Розробка інтерфейсного файла .swf. Засоби для створення професійних компонентів.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | реферат |
| Язык | украинский |
| Дата добавления | 15.08.2011 |
| Размер файла | 138,1 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Розробка компонентів користувача у Flash MX 2004
1. Зв'язування компонентів
Зв'язування компонентів - це нововведення, що з'явилося у Flash MX 2004. Дуже часто буває потрібно, щоб значення якої-небудь властивості компонента при зміні переносилося в іншу властивість іншого компонента. Зазвичай при цьому пишеться подібний код:
txtResult.text = txtName1.text;
Однак при відстеженні змін значень кількох компонентів ця задача дуже ускладнюється. Тому простіше для вирішення даної задачі використовувати зв'язані компоненти - «прикріплення» потрібної властивості одного компонента до властивості іншого. При цьому задачу відстеження зміни значення цієї властивості бере на себе Flash, а точніше - особливий невізуальний компонент DataBindingClasses. Цей компонент додається в бібліотеку документа самим Flash при створенні зв'язування.
Зв'язування відбувається між властивостями різних компонентів. При цьому можна використовувати лише ті властивості, для яких явно не була задана можливість зв'язування, - властивості, що зв'язуються. Зазвичай властивістю, що зв'язується, в будь-якому компоненті є тільки та властивість, яка містить значення цього компонента, наприклад: text у компоненті TextInput тощо. Однак можна перетворити будь-яку властивість компонента у зв'язану.
Для опису процесу зв'язування компонентів опишемо приклад.
Припустимо, що для зв'язування на робочому аркуші розміщені два компоненти: поле введення TextInput та лічильник NumericStepper. Надамо їм імена відповідно txtData і spnData. Припустимо, що ми хочемо, аби значення, введене в лічильник, відразу ж поміщалося в поле введення, і навпаки, введене в поле введення значення відразу ж переносилося в лічильник. Для цього нам потрібно виконати зв'язування властивості text поля введення і властивості value лічильника.
Виділимо на робочому аркуші лічильник spnData. Нехай властивість виділеного компонента, який ми зв'язуємо з властивістю іншого компонента, назвемо первинною властивістю, що зв'язується, (в нашому випадку - це властивість value компонента spnData). Властивість же іншого компонента назвемо вторинною властивістю, що зв'язується, (це властивість text компонента txtData).
Зв'язування створюється за допомогою вкладки Bindings (Зв'язування) панелі Component Inspector (рис. 1).
Рисунок 1 - Вкладка Bindings панелі Component Inspector
Верхню частину цієї панелі займає список вже створених зв'язувань; поки що він порожній. У нижній її частині знаходиться список параметрів виділеного в верхньому списку зв'язування.
Для створення першого зв'язування натиснемо на кнопку з позначкою плюс. На екрані з'явиться діалогове вікно Add Bindings (Додати зв'язування), що показане на рис. 2.
Більшу частину вікна займає список зв'язуваних властивостей виділеного компонента. Для вибору необхідної властивості потрібно клацнути мишкою на відповідному пункті цього списку та натиснути на кнопку OK.
Створене зв'язування відразу ж з'явиться у списку зв'язування вкладки Bindings панелі Component Inspector. Виберемо тепер його клацанням мишки та задамо необхідні параметри, користуючись нижнім списком цієї панелі. Нижній список панелі складається із двох стовпчиків (рис. 1). У лівому стовпчику (Name) знаходяться імена всіх параметрів зв'язування, а у правому (Value) - їх значення. Ці значення вводяться або за допомогою списку, що розкривається, в правому стовпчику обраного пункту, або за допомогою додаткового діалогового вікна, для виклику якого потрібно натиснути кнопку, що з'являється у правій частині стовпчика при виборі даного пункту.
Рисунок 2 - Діалогове вікно Add Bindings
Перший потрібний нам параметр - direction - визначає напрямок зв'язування, тобто вказує, чи буде значення первинної зв'язуваної властивості переноситися у вторинну зв'язувану властивість (значення out цього параметра) чи, навпаки, змінене значення вторинної зв'язуваної властивості переноситиметься в первинну зв'язувану (значення in параметра). В обох випадках йдеться про так зване однобічне зв'язування. Аналогічно можна задати двостороннє зв'язування, обираючи значення in/out цього параметра.
В даному прикладі нам необхідне значення in/out.
Параметр bound to задає вторинну зв'язувану властивість. Потрібно клацнути на кнопку, яка з'явиться в правій частині стовпчика Value після вибору цього параметра, та на екрані виникне діалогове вікно Bound To (зв'язати з) (рис. 3).
У списку Component Path (Шлях компонента) вибираємо потрібний компонент (txtData), у списку Schema location (Місце знаходження схеми) - потрібна зв'язувана властивість (text), та натискаємо кнопку OK. На цьому процес зв'язування завершено.
Рисунок 3 - Діалогове вікно Bound To
Також ми можемо створити нову зв'язувану властивість за допомогою панелі Component Inspector та її третьої вкладки Schema (рис. 4). Вкладка складається з двох списків: списку зв'язуваних властивостей вверху та списку параметрів внизу.
При створенні застосувань часто буває потрібно зробити так, щоб який-небудь елемент керування (або декілька елементів керування) були недоступні для введення даних, поки користувач не зробить якої-небудь дії - наприклад, не установить прапорець. Такі задачі зазвичай вирішуються за допомогою написання додаткового коду, але ми розглянемо її вирішення за допомогою зв'язування. Єдина проблема полягає в тому, що властивість enabled, за допомогою якої компоненти робляться недоступними, не оголошена як зв'язувана, тому доведеться створити нову властивість.
Створимо нове застосування Flash, що містить поле введення (з ім'ям txtData) та прапорець (chkControl). Необхідно зв'язати властивість прапорця selected із властивістю поля введення enabled. Для цього необхідно оголосити властивість enabled.
Відкриємо панель Component Inspector, виділимо на робочому аркуші компонент chkControl та перейдемо на вкладку Schema. У верхньому списку вже присутня оголошена як зв'язувана властивість text. Для додавання в список нового поля необхідно натиснути на кнопку «плюс». Після цього у верхньому списку з'явиться рядок виду “new filed: String”; це означає, що ми створили безіменну властивість рядкового типу.
Рисунок 4 - Вкладка Schema панелі Component Inspector
У нижньому списку необхідно замінити значення параметра field name (ім'я властивості) на “enabled”, а значення поля data type (тип даних) на Boolean. Тепер створимо на вкладці Bindings панелі Component Inspector нове однобічне зв'язування між властивістю selected прапорця chkControl з властивістю enabled поля введення txtData, як було описано вище.
2. Створення компонентів зі стандартним інтерфейсом
На рис. 5 показано інтерфейс компонента, еквівалентний такому коду ініціалізації змінних:
this.numSpark = 10;
this.randomDispersion = true;
this.duration = 1300;
Рисунок 5 - Приклад інтерфейсу налагодження компонента
Також інтерфейс компонента може бути більш дружнім до користувача, тому можна стандартний інтерфейс компонентів замінити власним. Отже, компоненти можуть мати два види інтерфейсів: стандартні та користувальницькі.
Під час побудови будь-якого компонента спочатку потрібно створити звичайний кліп, що керується значеннями однієї або кількох змінних. Наприклад, у наступному коді змінні xPos та yPos визначають становище кліпу на сцені:
this._x = this.xPos;
this._y = this.yPos;
Під час створення кліпу у вигляді компонента передбачається, що деякі змінні будуть установлені за допомогою інспектора властивостей при розташуванні кліпу на сцені. Ці змінні називаються параметрами компонента, коли кліп, поведінка якого визначається одним або більше параметрами компонента, створений. Слід додати йому інтерфейс компонента, за допомогою якого можна встановлювати ці параметри.
Додавання стандартного інтерфейсу в компонент
Щоб додати у кліп інтерфейс компонента за замовчуванням, слід виконати такі дії:
1) вибрати кліп у бібліотеці;
2) вибрати Component Definition у меню, що випливає, Options вікна бібліотеки (з'явиться діалогове вікно Component Definition);
3) над вікном Parameters клацнути на кнопці «плюс» (+), щоб додати параметр компонента;
4) повторити крок 3 для кожного параметра компонента;
5) налагодити параметри компонента, як описано в наступному розділі.
Налагодження стандартних параметрів компонента
Додавши параметр у компонент, слід присвоїти йому ім'я, ім'я змінної та необов'язкове значення за замовчуванням. Як і змінні, параметри компонентів можуть містити дані різних типів. Однак типи параметрів компонентів не зовсім співпадають з типами, які підтримуються змінними. Параметрами компонента можуть бути масиви, об'єкти, списки, рядки, числа, булеві величини, назва шрифту та колір. Від типів даних, що підтримуються змінними, вони відрізняються таким:
– параметри компонентів підтримують три типи значень, які використовуються тільки в інтерфейсах: список, назва шрифту та колір. Список призначень для обмеження значень, які можуть бути привласнені параметру, якоюсь раніше визначеною множиною. Ім'я шрифту дозволяє обрати встановлений на комп'ютері шрифт за допомогою особливого меню. Колір дає можливість вибрати ціле RGB-значення;
– елементарні типи null та undefined не можна задавати безпосередно як значення параметрів компонентів. Це обмеження накладається інтерфейсом компонентів, а не самим параметром: код, що знаходиться усередині компонентів, може присвоювати значення null або undefined змінним, ініціалізованим як параметри.
Щоб надати параметру компонента екранне ім'я, ім'я змінної та необов'язкове значення за замовчуванням, необхідно виконати такі дії:
1) клацнути по імені (Name) параметра та ввести короткий рядок, що описує параметр;
2) клацнути по змінній (Variable) параметра та ввести фактичне ім'я змінної параметра;
3) клацнути по типу (Type) параметра та вибрати один з таких:
– Default для параметрів, що приймають рядкові або числові значення;
– Array для параметрів, що приймають значення масиву;
– Object для параметрів, що мають значенням об'єкт, у тому числі точки, що містять координати x та y;
– List для параметрів із попередньо встановленим набором можливих рядкових або числових значень;
– String для рядкових значень;
– Number для числових (цілих або з точкою, що плаває) значень;
– Boolean для значень true або false;
– Font Name для створення меню вибору шрифту;
– Color для створення меню вибору кольору;
4) клацнути по значенню параметра та ввести значення за замовчуванням, якщо воно потрібно. Це значення буде виведено в інтерфейсі компонента як початкове. Спосіб введення значень за замовчуванням залежить від типу параметра:
– для параметрів Default, String та Number клацнути по значенню параметра та ввести рядок або число;
– для параметрів Array, Object та List клацнути по значенню параметра. У діалоговому вікні Values (Значення) можна додавати, вилучати та упорядковані елементи за допомогою кнопок «плюс», «мінус» та стрілок. Закінчивши настроювання, клацнути по кнопці OK;
– для параметрів Boolean, Font Name та Color клацнути по значенню параметра. У меню, що з'явилося, вибрати булеве значення, ім'я шрифту або колір;
5) щоб заборонити користувачеві компонента змінювати ім'я параметра, установити прапорець Parameters are Locked in Instances;
6) в діалоговому вікні Component Definition клацнути по кнопці OK для завершення налагодження параметрів.
Вилучення та зміна порядку стандартних параметрів компонента
Для вилучення параметра компонента необхідно:
1) вибрати в бібліотеці компонент;
2) вибрати Component Definition у меню, що випливає, Options бібліотеки (з'явиться вікно діалогу Component Definition);
3) вибрати параметр, що вилучається, та клацнути по кнопці «мінус».
Для зміни порядку параметрів компонента необхідно виконати таку саму послідовність кроків, а на кроці 3 скористатися кнопками зі стрілками.
професійний компонент стандартний інтерфейс
3. Створення компонентів із інтерфейсом, що налагоджується
Щоб побудувати компонент із інтерфейсом, що налагоджується, спочатку слід створити звичайний кліп, поведінка якого задовольняється набором параметрів компонента, як це було описано вище. Після цього створюється незалежний файл .swf (так званий інтерфейсний .swf), який використовуватиметься для задання параметрів компонента через текстові поля, меню, кнопки та інші елементи GUI. Ці значення автоматично зчитуються та пересилаються в компонент як параметри.
Компонент обмінюється даними з інтерфейсом .swf через екземпляр xch (від exchange) - екземпляр зі спеціальною назвою в інтерфейсному .swf. На рис. 6 показано, як імена та значення параметрів пересилаються із інтерфейсного .swf у компонент.
Рисунок 6 - Обмін даними в компоненті
Обмін даними між інтерфейсним .swf та компонентом відбувається в циклі. Коли екземпляр компонента вибирається на сцені, відповідний інтерфейс .swf завантажується в панель інспектора властивостей або вікно Component Parameters. Після цього поточні параметри екземпляра компонента передаються екземпляру xch файла .swf. Файл .swf має вилучати ці параметри та налагодити відповідним чином стан інтерфейсу. Змінні, які будуть потім установлені в xch файлом .swf, автоматично передаються компоненту як параметри. Якщо з екземпляра компонента знімається виділення, інтерфейсний .swf вилучається з панелі Component Parameters. Однак значення параметрів не втрачаються, вони зберігаються екземпляром компонента. При кожному виділенні екземпляра компонента його параметри передаються кліпу xch файла .swf. Цей цикл дозволяє зберігати синхронізацію інтерфейсного файла .swf з панеллю Component Parameters.
Створення інтерфейсного файла .swf
Для створення файла .swf, що використовується як особливий інтерфейс компонента, необхідно:
1) створити новий документ Flash;
2) створити новий шар з ім'ям xchLayer;
3) вибрати Insert New Symbol і створити порожній символ кліпу;
4) надати новому символу ім'я xchClip;
5) у шарі xchLayer розташувати екземпляр символу xchClip;
6) надати екземпляру ім'я xch;
7) у кадрі 1 головної часової діаграми розмістити кнопки, текстові поля та інші елементи інтерфейсу, необхідні для встановлення значень змінних (задача полегшується використанням вбудованих Flash UIComponents);
8) у кадрі 2 головної часової діаграми розмістити код для читання параметрів компонента з екземпляра xch. Налагодити користувальницький інтерфейс так, щоб він відображав значення параметрів компонента. Наприклад, наступний код ініціалізує текстове поле param1Input_txt значенням param1 з компонента:
param1Input_txt.text = xch.param1;
9) зупинити головку відтворення в кадрі 3 головної часової діаграми. Додати код інтерфейсу, який встановлює параметри компонента як змінні в екземплярі xch. Змінні в xch будуть автоматично додані в компонент як параметри. Наприклад, так можна задати значення для двох таких параметрів:
xch.param1 = value1;
xch.param2 = value2;
10) експортувати файл .swf.
Додавання власного інтерфейсу в компонент
Після створення інтерфейсного .swf слід додати його до компонента, для чого потрібно:
1) закрити інтерфейсний .swf та повернутися до вихідного файла .fla, що містить компонент;
2) вибрати компонент у бібліотеці;
3) вибрати Component Definition у меню, що випливає, Options бібліотеки (з'явиться вікно діалогу Component Definition);
4) поряд з Custom UI клацнути по кнопці Set;
5) у вікні Custom UI вказати для Type:
– щоб вмонтувати інтерфейсний файл .swf прямо у файл компонента .fla, виберіть «Custom UI with .swf file embedded in .fla file». Вбудовані інтерфейсні .swf зберігаються усередині файлів компонентів .fla, що дозволяє використовувати та переміщувати файл компонента .fla незалежно від інтерфейсного .swf. При модифікації вбудованого файла інтерфейсу .swf його слід оновити вручну за допомогою кнопки Update у вікні Custom UI;
– щоб установити зовнішній зв'язок з файлом інтерфейсу .swf, виберіть «Custom UI in external .swf file». Зовнішні приєднані файли інтерфейсу .swf завжди мають бути доступні за адресою, що задана в «Custom UI .swf file». Вони оновлюються автоматично щоразу, коли виділяється екземпляр компонента;
6) для Display оберіть:
– якщо інтерфейсний файл .swf невеликий та поміщається в інспекторі властивостей, виберіть «Display in Property Inspector»;
– якщо інтерфейсний файл .swf занадто великий, щоб поміститися в інспекторі властивостей, виберіть «Display in Component Parameters Panel»;
7) для файла .swf Custom UI вкажіть адресу файла .swf, що виступає як інтерфейс користувача, відносно поточного файла .fla (файл .swf можна також вибрати за допомогою кнопки Browse).
Засоби для створення професійних компонентів
Для досвідчених програмістів та сторонніх розробників, що поширюють бібліотеки коду у вигляді компонентів, Flash MX надає ряд можливостей, призначених для додання компонентам професійного блиску. Ці можливості описані за адресами:
www.macromedia.com/support/flash/applications/creating_comps
www.macromedia.com/support/flash/ts/document/doc_update_mx.htm.
4. Приклад створення компонента користувача
Створимо Flash-застосування, що збиратиме різні дані про користувача та оброблятиме їх. Результатом роботи застосування буде видача користувачеві вітання, заснованого на цих даних.
Створимо новий документ Flash та помістимо на робочий аркуш декілька елементів керування: три поля введення, список, що розкривається, прапорець і кнопку. Додамо й текстові надписи (або статичні текстові блоки, або компоненти Label - це принципово неважливо), що пояснюють призначення цих елементів керування. У результаті повинна вийти форма введення даних застосування, приклад якої зображений на рис. 7.
Дамо елементам керування такі імена:
– перше поле введення - txtName1;
– друге поле введення - txtName2;
– список, що розкривається, - cboGender;
– прапорець - chkSendMail;
– третє поле введення - txtAddress;
– кнопка - btnOK.
Тепер призначимо властивостям списку, що розкривається, cboGender такі значення:
– rowCount - 2;
– labels - масив, що містить елемент «Муж» та «Жен»;
– data - масив, що містить елементи “m” та “f”.
Після чого призначимо властивостям прапорця chkSendMail значення:
– label - «Вислати лист-підтвердження»;
– selected - true.
Дамо властивості label кнопки btnOK значення «Відправити».
Рисунок 7 - Форма введення даних застосування, що використовує елементи керування
Закінчивши роботу над формою введення даних, розпочнемо до створення вітання. Вітання виводитиметься у другому ключовому кадрі фільму. Створимо порожній ключовий кадр та помістимо на робочий аркуш динамічний текстовий блок по імені txtOutput. Задамо йому такі розміри, щоб він займав більшу частину робочого аркуша.
Тепер необхідно визначити, де зберігатиметься готовий рядок вітання, який з'явиться на другому кадрі в динамічному текстовому блоці. Для простоти використовуватиметься глобальна змінна _global.dataStorage. Виділимо динамічний текстовий блок txtOutput та введемо повне ім'я (з модифікатором _global) цієї змінної в поле введення Vars інспектора властивостей.
Тепер необхідно створити три сценарії. Для цього прив'яжемо до першого кадру нашого застосування такий сценарій:
_root.stop();
Він зупинить відтворення анімації на першому кадрі, де знаходиться форма введення даних.
До прапорця chkSendMail сценарій-обробник події click, який буде у відповідь на установку, але зняття прапорця відповідно дозволятиме або заборонятиме доступ до поля введення txtAddress. Подібна заборона призначень для тих користувачів, які не захочуть одержувати листа від даного застосування, тому питати у нього адресу не потрібно.
on (click) {
_root.txtAddress.enabled = _root.chkSendMail.selected;
}
Ще один сценарій-обробник потрібно прив'язати до кнопки btnOK.
on (click){
_global.dataStorage = “Здравствуйте, уважаем”;
with (_root){
if (cboGender.value = = “m”){
_global.dataStorage += “ый ”;
} else {
_global.dataStorage += “ая ”;
}
_global.dataStorage +=txtName1.text+“ “+txtName2+ “!”;
if (chkSendMail.selected){
_global.dataStorage += “ На адрес `” + txtAddress.text + “' вам отправлено лист”;
}
nextFrame();
}
}
У цей сценарій ми створюємо глобальну змінну
_global.dataStorage
та наповнюємо її даними. Після переміщення у другий кадр (методом nextFrame()) значення змінної з'явиться в динамічному текстовому блоці txtOutput.
Размещено на Allbest.ru
Подобные документы
Створення програми скріпт мови управління віконним інтерфейсом. Можливості середовища програмування С++ BILDER фірми Borland. VCL для прикладних програмістів. Палітра компонентів з піктограмою TLahel. Типи компонентів. Оболонка графічного інтерфейсу.
курсовая работа [464,2 K], добавлен 24.03.2009Використання редактора Macromedia Flash MX 2004 для вдосконалення програмного продукта і налагодження середовища. Установка можливостей редагування виділеної групи об'єктів; налагодження автоматичного форматування коду Action Script і комбінацій клавіш.
реферат [261,6 K], добавлен 27.06.2011Компонент як складний зразок-кліп, присвоєння значення його властивостям за допомогою графічного інтерфейсу користувача в середовищі розробки Flash. Перевага використання компонентів, їх основні групи. Прості елементи керування, що служать для виведення.
реферат [126,5 K], добавлен 18.08.2011Характеристика формування навичок розробки додатків із використанням кнопкових компонентів у середовищі програмування Visual Studio. Створення програми, що переводить числа з однієї системи числення до іншої. Особливість застосування додатку Converter.
практическая работа [249,7 K], добавлен 01.12.2022Основні аспекти використання стандартних компонентів ООС програмування Delphi для створення звітної документації. Опис компонентів – QReport, PrintDialog та PrintSetupDialog. Приклади створення звітів. Iнше програмне забезпечення для побудови звітів.
курсовая работа [488,4 K], добавлен 08.12.2008Методи кодування звуку в цифровий формат: пряме оцифрування, командне та семплерне кодування. Перейменування, дублювання, імпортування та вилучення звукових зразків, їх редагування засобами Macromedia Flash MX 2004. Основні види аудіоформатів Microsoft.
реферат [349,2 K], добавлен 03.07.2011Середовище розробки програм Borland Delphi, робота компонентів. Створення нових компонентів та використання компонентів Delphi для роботи з базами даних. Системи керування базами даних InterBase та Firebird. Компоненти Delphi для роботи з СКБД FireBird.
реферат [71,4 K], добавлен 12.04.2010Поняття та властивості компонента DataGrid. Компоненти DataChooser та DateField, які являють собою календар, що дозволяє користувачеві вибрати потрібну дату. Приклад використання компонентів Menu та MenuBar. Властивості компонента NumericStepper та Tree.
реферат [80,7 K], добавлен 20.08.2011Кодування відео у Flash. Кодек Sorenson Spark. Параметри цифрового відео. Використання імпортованих кліпів. Профілі діалогового вікна Wizard. Редагування кліпу, що імпортується засобами Flash. Macromedia Flash Video. Групи елементів Track options.
контрольная работа [301,8 K], добавлен 28.06.2011Огляд середовища програмування Delphi виробництва корпорації Inprise. Засоби масштабування для побудови баз даних. Візуальна побудова додатків із програмних прототипів. Об’єктно-орієнтована модель компонентів. Опис структури програми, компонентів OpenGL.
курсовая работа [1,9 M], добавлен 09.06.2010
