Gaia Начало работы
Привожу перевод части документации Gaia Flash Framework
Часть первая - Начало Работы
Инсталляция, простой проект, скаффолдинг (scuffolding), навигация через контекстное меню (меню правой кнопки).
Загрузка и установка
Во-первых, скачайте Gaia Framework MXP файл и установить его. После того как Gaia установлена, откройте Flash и открыте Windows > Other Panels > Gaia Framework. Вы также можете удалить файлы ASO, если захотите.
Убедитесь, что вы прикрепили панели (Docking)! JSFL может сбоить в некоторых командах, если панель не прикрепленена.
Начнем работу!
Создание проекта Gaia
- Создать новую папку для вашего Gaia проекта.
- В панели Gaia, установить ширину и высоту Вашего проекта.
- Нажмите кнопку для AS3 или AS2 проекта и выберите папку, которую вы создали.
Gaia будет теперь создавать файлы проекта внутри папки, которую вы создали. Этот процесс занимает всего несколько секунд. После того, как это сделано, перейдите к вашей папке и загляните внутрь. Вы должны увидеть четыре папки: deploy, document, src, и templates.
* В deploy содержаться все файлы для публикации.
* В папке doc содержится документация Gaia.
* В src папка содержаться main.fla, preload.fla, GaiaProject.flp и все базовые классы.
* В tempates находятся шаблоны классов и fla файлов
Откроем папку deploy, в которой на данный момент содержится папка js, index.html файл, preload.swf файл и site.xml файл.
Сайт XML
Gaia использует XML файл site.xml, чтобы определить структуру сайта.
Откройте файл в вашем любимом xml редакторе. Site.xml по умолчанию выглядит так:
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
Gaia использует ветви (как ветви дерева) как метафору, для структуры сайтов. Ветви работают как папки в пути адреса веб-сайта, при этом косая черта (слэш) разделяет идентификаторы каждой страницы.
Вышеприведенный xml-site имеет всего лишь одну ветвь: “index/nav/home”.
Ветвь состоит из узлов, каждый из которых может иметь любое количество других под-узлов, в качеств детей. Каждый узел swf, входящий в ветвь, представляет собой часть страницы который будет загружена при загрузке последнего в цепочке узлов-детей узла.
Gaia загружает всю ветвь, начиная с index до оконечной страницы одной ветви (терминальной страницы). В вышеприведенном примере, вам не удасться загрузить ветвь “index/nav”, поскольку страница “nav” имеет по крайней мере однин под-узел, в этом случае страница с идентификатором “home”. При попытке загрузить “index/nav” Gaia будет автоматически загружать “index/nav/home”. Вы можете переопределить это поведение, используя атрибут “target” в странице узла.
Подробная информация об узлах в site.xml и их атрибутах можно найти в разделе Site XML документации.
Структура дерева XML
Прежде чем мы начнем настройку site.xml, давайте взглянем на его структуру и каким образом это связано с тем как Gaia загружает контент сайта. Gaia загружает файлы в порядке с вершины ветви вниз, укладывая swf так, что дочерние клипы находятся в слоях над своими клипами-родителями. Вы можете переопределить это поведение, используя атрибут depth, как описано ниже.
Сайт узла
Корневой узел site.xml называется <site>. Узел <site> не имеет необходимых атрибутов, а также имеет необязательный атрибутов title.
Страница Index
Первый дочерний узел это узел страницы <page> с идентификатором id=”index”. Все примеры в документации использоуют “index” в качестве идентификатора первой страницы . Это стандартное соглашения для Gaia, но вы можете использовать ваш собственный идентификатор для первой страницы, если хотите.
“Index” является специальной страницой по двум причинам: она может быть настроена на нагрузку самой по себе и произвести переход (transition-in) до загрузки любой другой страницы а также она по умолчанию грузится снизу всех остальных страницы.
Страницы
В шаблоне site.xml, первый дочерний узел для “index” это узлел page с идентификатором “nav”. Страница “nav” была создана для использования в качестве глобальной навигации: она загружалется в слой выше всех других страниц с помощью (необязательного) параметра “depth” со значением “top” и, что еще более важно, в этой конфигурации и остается, поскольку она является потомком только “index” и таким образом является частью каждой ветки в дереве под ним.
Следующая дочерняя страница нашей последней страницы в примере ветки, называется “home”. Эта страница имеет атрибут title (заголовок) установленый в “Home”. Это значение будет появляться в браузере в строке заголовка, где вы увидите это строку вместо %Page% в атрибуте названия сайта. Эта страница также называется “Терминальной страницой”, как это последний дочерний узел в ветке.
Только названия терминальных страниц ветки (или страниц с langing = “true”) будут отображаться в строке заголовка браузера, поэтому вам нужно лишь установить атрибут title на терминальных страницах, чтобы он заменит %Page% в шаблоне названия сайта.
Preloader передает названия страниц в момент загрузке по событию onProgress, поэтому, если вы хотите поставить заголовок каждой страницы в прелоадер, то это лекго можно сделать, эта тема рассматривается в разделе документации Preloader.
Добавление страницы в Site XML
Сайт с только одной веткой не так много для сайта, поэтому давайте добавим еще несколько страниц!
<site title="Gaia Scaffold Site: %PAGE%" menu="true">
<page id="index" src="background.swf">
<page id="nav" src="nav.swf" depth="top">
<page id="people" src="people.swf">
<page id="friends" title="Friends" src="friends.swf" menu="true"/>
<page id="family" title="Family" src="family.swf" menu="true">
<page id="tree" title="The Family Tree" src="familytree.swf"/>
</page>
</page>
<page id="home" title="Home" src="home.swf" menu="true"/>
</page>
</page>
</site>
Теперь у нас есть три ветви ура! Вот они
1. “index/nav/man/friends”
2. “index/nav/man/family/tree”
3. “index/nav/home”
Отметим, что только последний ребенок в каждой ветви имеет название, и есть новый атрибут узла <site> и у некоторых узлах <page>, атрибут “menu”.
Если вы хотите иметь контекстное меню для навигации по сайту (при нажатии правой кнопки мыши), добавьте menu=”true” в узел <site>.
Если вы хотите чтобы конкретная страница показывалась в контекстном меню, установите menu=”true” на узле <page> и добавьте атрибут title.
Примечание: страницы без заголовков не будут отображаться в контекстном меню.
Кроме того, как вы видите, страница узла family имеет контекстное меню, но не явлвется последней страницей ветки. При этом, Gaia покажет в контекстном меню “Family”, но переход будет на “index/nav/family/tree”.
Хорошо! У нас есть достаточно структуры для построение строительных лесов (т.е. Scuffolding’a) на нашей испытательной площадке так давайте создадим их. Скопируйте и вставьте вышепреведенный xml в site.xml и сохраните его.
Scuffolding или Строительные леса
Ладно, сейчас пришло время для интересные части. Scaffolding!
Вернитесь в Flash и в панель Gaia Framework, нажмите кнопку Scuffold Gaia Project. В диалоговом окне появится выбор папки для развертывания классов, выберите созданную ранее папку src/classes и найти или создайте путь для пакета в котором будут находится классы для ваших страниц сайтов.
Например, что-то вроде com.clientname.projectname.pages. Вы можете создать этот пакет, прежде чем нажать кнопку Scuffold, или же вы можете создать его в диалоговом окне.
Gaia Scuffolding автоматически определяет, какую версию Actionscript использует проект.
Gaia Scaffolding создает все FLA файлы на основе информации в дереве в site.xml (атрибуты src). Он устанавливает всем флашкам пути публикации в папку deploy, добавляет файлы страниц во флэш-проект, создает файл классов для каждой страницы и определяет класс как класс документа на каждой странице. AS2 scuffolding создает файлы exclude.xml для каждой страницы Flash файлов, что значительно уменьшает размеры swf файлов.
Как только Gaia создаст все необходимые файлы, он публикует весь сайт и запускает main.fla.
Использовую щелчок правой кнопкой, вы можете перемещаться по сайту с помощью контекстного меню и посмотреть переходы в- и из- между страницами.
Поздравляем, вы только что построили ваш первый Gaia FrameWork всего лишь за несколько минут!
Следующая часть - cтраницы в Gaia Framework.
P.S. Переводить этот текст не пришлось намного дольше чем читать английский и сделать пробный проект в Gaia. Извините за неточности в переводе, буду рад их исправить
Метки: actionscript, flash, framework, gaia, how-to, документация, начало работы