Главная страница | Контакты | Случайная страница Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

Основи MXML

Вихідний код програми заснований на використанні мови розмітки MXML. Він досить простий з точки зору написання і читання коду. МХМL є різновидом XML, тому доцільно розглянути основні особливості останнього.

XML у MXML

XML – це структурований текст, будь-який текст з кутовими дужками (<і>). Дані представлені структуровано, за допомогою тегів, утворених кутовими дужками. У XML відсутній власний словник тегів, тому що автор коду створює свої власні теги в кожному конкретному випадку. XML - це лише синтаксис і структура. Щоб уявити структуру книги засобами XML, можна створити свої власні теги, такі як <book>,

<chapter> і <section>, а потім з їх допомогою додати

інформацію в документ.

<book>

<chapter>

<section/>

</chapter>

</book>

XML розшифровується як «розширена мова розмітки»

(англ. Extensible Markup Language). «Розширена», тому що 36 дозволяє створювати власні теги, «розмітки» – завдяки можливості подання з його допомогою не тільки тексту, ай додаткової інформації про нього, такий як форматування тексту.

Для Flex-розробника ще важливіше, що XML призначений для опису ієрархії та структури будь-якого об‘єкта. Можна сказати, що MXML – це набір створених спеціально для розробки Flex-додатків тегів XML.

Основоположні принципи XML

Для ефективної роботи у Flex, необхідно дотримуватись наступних правил: Все, що було відкрито, необхідно закрити. Дуже важливе правило використання XML полягає в необхідності закриття всіх тегів, тобто, якщо тег був відкритий, то в якомусь місці він повинен бути закритий. Визначення тега складається з відкриваючої дужки (<), імені тега і закриваючої дужки (>), наприклад, <book>. Такий тег вважається відкритим. Щоб показати, що тег

завершений і не містить більш вкладених елементів, використовується ліва коса риска (/).

Теги можна закривати двома способами. По-перше,

можна використовувати закривання тегу. Наприклад, якщо є відкриваючий тег <book>, йому повинен відповідати закриваючий тег </book>. По-друге, є ще більш швидкий спосіб, але його можна застосовувати лише за умови відсутності вкладених тегів. Для цього необхідно додати косу риску прямо перед правою дужкою тега, наприклад: <book/>. Таким чином, вираз <book></ book> еквівалентно <book/>.

Регістр має значення.

XML чутливий до регістру символів, тобто прописні і

рядкові символи не рівнозначні, і відповідно теги <book> і <Book> не тотожні. Причому <mx:Text> і <mx:text> також вважаються різними тегами.

Оголошення не обов’язкові, але бажані. Перший рядок документа, написаного на XML, може (хоча й не обов‘язково) містити оголошення про те, якою мовою він написаний і яке в ньому використовується кодування. Виглядає приблизно так:

<?xml version="1.0" encoding = "utf-8"?>

Якщо використовувати Flex Builder, цей рядок генерується автоматично, так що про це можна не турбуватися. MXML є версією XML, а отже, вона успадковує всі ці правила.

Тег

Тег може представляти інформацію в якості атрибута або вмісту. Вміст - це текст, розташований між двома тегами, а атрибут розміщується в відкриваючому тезі, при цьому інформація, яка надається (значення атрибуту) розміщується в лапках. Подивіться на наступний код:

<book title="Learning Flex" author="Alaric

Cole">

<chapter title="Getting Up to Speed"/>

<chapter title="Setting Up Your Environment"/>

</book>38

У даному прикладі <book> є кореневим тегом, а інформація про назву і автора представлена за допомогою його атрибутів title і author. Вкладені теги представляють два розділи.

Розглянемо код, який містить ту ж саму інформацію, але надану іншим способом:

<book>

<title> Learning Flex </title>

<author> Alaric Cole </author>

<chapter>

<title> Getting Up to Speed </title>

</chapter>

<chapter>

<title> Setting Up your Environment </title>

</chapter>

</book>

По суті цей код схожий на попередній, але більш громіздкий. У першому випадку використовуються атрибути, у другому - вкладені теги. Інформація, представлена за допомогоюатрибутів, виглядає набагато компактніші, а це важливо для сприйняття. Порівняємо попередні приклади з наступним кодом на MXML:

<mx:Label text="Learning Flex"/>

Але те ж саме можна записати і так:

<mx:Label>

<mx:text> Learning Flex </mx:text>

</mx:Label>

У першому випадку використовується атрибут для додавання властивості text, у другому з цією ж метою використовуються вкладені теги. Доцільно використовувати атрибути для компактності і зручності сприйняття. Проте в певних випадках буде краще скористатися другим способом представлення інформації. Вкладені теги дозволяють розміщувати дані з більш складною організацією, ніж прості текстові рядки, тому їх варто використовувати, якщо вміст не можна представити як атрибут. Це ще важливіше у випадку з даними, структурованими певним чином. Наприклад, для елемента списку потрібно надати дані, що представляють собою послідовність елементів, а не окремий текстовий рядок. Це справедливо і для інших властивостей, значеннями яких може бути набір даних, наприклад, для властивості columns елемента DataGrid, при цьому можливо використовувати властивості кожної окремої колонки. Щоб переконатися в цьому на практиці, можна перетягнути цей елемент на робочу область в режимі Design. Згенерований код буде виглядати приблизно таким чином:

<mx:DataGrid>

<mx:columns>

<mx:DataGridColumn headerText="Column 1"

dataField="col1"/>

<mx:DataGridColumn headerText="Column 2"

dataField="col2"/>

<mx:DataGridColumn headerText="Column 3"

dataField="col3"/>

</mx:columns>

</mx:DataGrid>

Властивість columns елемента DataGrid не може бути використана в якості атрибута, тобто його використання має на увазі кілька вкладених тегів DataGridColumn, для яких у свою чергу визначені свої властивості

Кліпи і лінійка часу.

Флеш–роликом називається готовий відкомпільований swf–файл (який можна запустити в браузері або зовнішньому флеш–плеєрі). Все, що намальовано в готовому флеш–ролику – так чи інакше намальовано всередині кліпів. Кліп є мінімальною порцією/частиною "намальованого матеріалу", з якою можна поводитися як з цілим: рухати, повертати, змінювати прозорість і порядок накладення.

Кліпи можуть бути досить великими, зокрема, містити в собі інші кліпи, а ті, у свою чергу – ще якісь кліпи і т.д. Кожен кліп містить у собі так звану "лінійку часу" (Timeline). У процесі редагування кліпів цю лінійку можна побачити – вона розташована над вікном редагування і являє собою "зебру" з маленьких прямокутників, витягнутих у ланцюжок зліва направо (рис. 1.6). Кожен прямокутник символізує собою окремий кадр. Після компіляції і запуску лінійки часу не видно, однак поняття "лінійки часу" залишається корисним: можна говорити про те, який по порядку кадр є поточним в даному кліпі. Як правило, лінійки усіх кліпів (у тому числі й вкладених один в одного) незалежні, хоча зміна поточних кадрів у всіх кліпах здійснюється синхронно. Незалежність проявляється в тому, що при зміні кадру кліп не обов‘язково переходить на наступний кадр; він може повернутися на перший кадр, зупинитися або взагалі опинитися на будь–якому кадрі, який йому задали. Таке управління здійснюється програмно.

Важливим моментом є те, що кожен з незалежних кліпів

переходить на той кадр, який йому задали (якщо не задали нічого – переходить на наступний), і ці кадри в різних кліпах не пов‘язані між собою. Лівіше від лінійки часу знаходиться вікно опцій кадрів (рис. 1.7).

Рис. 1.2 – Зовнійшій вигляд вікна опцій: 1 – шар (їх може бути необмежена кількість);

2 – сховати об‘єкти поточного шару;

3 – заборонити редактувати поточний шар;

4 – відображати лише контури шару;

5 – активний кадр;

6 – наступний кадр;

7 – покажчик поточного шару;

8 – створити новий шар;

9 – створити направляючий шар;

10 – створити директорію для збереження шарів;

11 –видалити шар.

Тепер докладніше про те, що таке шар. Можна легко зрозуміти, якщо припустити, що у вас є прозоре скло, під ним лежать листки паперу, на яких щось намальовано. Шари необхідні для того, щоб розділяти як відособлені 15 об‘єкти, так й анімовані композиції, що складаються з декількох об‘єктів. Розмір файлу не змінюється від кількості шарів. Під Flash є два способи малювання анімації. Перший – коли малюються вся кадри користувачем. У другому способі користувач вказуєте перший і кінцевий кадр, а програма автоматично домальовує відсутні проміжні кадри. Розберемо спосіб автоматичного створення кадрів.

Наприклад створимо об‘єкт (рис. 1.3).

Рис. – 1.3 Об‘єкт коло.

Далі перетворимо створений об‘єкт в ролик. Для цього необхідно вибрати меню Convert to Symbol або натиснути F8 (рис. 1.4).

Рис. 1.4 – Панель перетворення об‘єктів:

1 – вирівнювання;

2 - назва символу (може бути будь-яка);

3 -анімаційний кліп (варто перетворювати, якщо об‘єкт динамічний);

4 - кнопка (має чотири фіксованих положення);

5 - графіка (варто перетворювати, якщо об‘єкт статичний).

Вибираємо movie clip, ставимо галочку і тиснемо ОК. На лінії часу вставляємо ключовий кадр (F6) на позначці 20 У кадрі номер двадцять коло з правого нижнього кута переміщаємо в лівий верхній кут (рис. 1.5).

Рис. 1.5 – Зображення останнього кадра ролика.

Потім, виділяємо перший кадр і натискаємо правою кнопкою, вибираємо create motion tween або виділяємо перший кадр і в панелі властивостей вибираємо Tween - motion. Лінійка часу тут же забарвлюється в фіолетовий колір Тепер тиснемо Ctr + Enter і Flash автоматично створює кадри