Шаблон MotoCMS - это Flash-шаблон с определенной структурой. Он состоит из двух файлов-исходников - moto.xfl, который содержит прелодер, и website.xfl, в котором находятся анимация и элементы веб-сайта. Данные файлы находятся в папке "fla". Также в структуру входят несколько XML файлов с конфигурацией веб-сайта, его структурой, содержимым, и т.д.

Нажмите здесь, чтобы скачать шаблон. Архив содержит шаблон вместе с исходными файлами. Это даст Вам возможность изучить шаблон и его свойства. Панель управления не включена в архив. Чтобы использовать шаблон с панелью управления, Вам необходимо иметь лицензию MotoCMS. Также у Вас есть возможность воспользоваться 30-дневной бесплатной версией MotoCMS. Для использования шаблона вместе с панелью управления просто скопируйте содержимое папки controlPanel на сервер, затем извлеките содержимое архива с шаблонов в то же местоположение.

Итак, перейдем к структуре шаблона.

1.1. Исходные файлы Flash.

Moto-шаблон состоит из двух частей - прелодер (moto.xfl) и веб-сайт (website.xfl). В то время как прелодер, вставленный в страницу HTML, инициализирует движок MotoCMS, другой SWF-файл загружается вместе со всей анимацией и элементами шаблона. По сути, moto.swf загружает website.swf.

Все AS-файлы находятся в папке src. Для удобства использования они категоризированы и размещены в разных папках.

1.2. Файлы XML.

Большая часть XML-файлов редактируется системой автоматически во время работы с панелью управления. Но есть и такие, изменения в которые нужно внести вручную. Начнем с конфигурационного файла, который находится в корневом каталоге - config.xml. Данный файл описывает местоположения всех необходимых папок и файлов шаблона, а также некоторые важные параметры, используемые при интеграции SWF в HTML.

Теперь перейдем к файлу structure.xml. Это главный файл, который редактируется разработчиком в процессе создания Moto-шаблона. Данный файл содержит описание структуры веб-сайта, его макетов, типов страниц и всплывающих окон, и анимированных элементов, таких как слоты и модули.

There are also the XML files in the xml folder which are generated automatically and do not require the manual editing:

Также есть файлы в папке xml, не требующие ручного редактирвоания. Все изменения в них вносятся панелью управления автоматически. Такими файлами являются:

settings.xml - файл настроек веб-сайта, который содержит информацию о стартовой странице, заголовке, а также опции предупреждения и данные аккаунтов Google Analytics и Google Webmaster Tools.

fonts.xml - файл, содержащий информацию об используемых шрифтах. Каждый шрифт имеет название, имя файла, символы (тип символов, использованных в шрифте).

content.xml - файл с содержимым, который включает в себя все данные веб-сайта, кроме меню и модулей. Данный файл имеет похожую структуру с файлов structure.xml, но content.xml описывает конкретные объекты, добавленные на веб-сайт, макеты, страницы и всплывающие окна, а также свойства этих объектов.

menus.xml - файл меню содержит структуру и данные меню веб-сайта. Этот файл совмещает в себе структуру и содержимое меню, описывая все доступные типы меню и источники данных.

The xml/modules folder contains the content files of such modules as gallery, Google Map widget, sound player and the contact form.

В папке xml/modules находятся файлы с содержимым таких модулей, как галерея, Google Map, звуковой проигрыватель и контакт-форма.

1.3. Внешние виджеты.

Некоторые слоты и модули выполнены в виде внешних SWF файлов. Они находятся в папках slots и modules, соответственно. Большинство внешних виджетов являются стандартными для всех шаблонов, например: RssReader, ShareButtonSlot, HTMLWidget, newsModule, и т.д.

Но есть также и внешние виджеты, разработанные специально для конкретного шаблона. В данном шаблоне примерами таких виджетов явлюятся gmapModule и customGalleryModule. В отличие от стандартных виджетов, специальные виджеты поставляются вместе с исходными файлами Flash. Исходные файлы находятся в одной папке с SWF-файлом виджета.

1.4. Объекты шаблона.

Каждый шаблон имеет множество разных объектов, таких как изображения, видео-, аудио-файлы, и так далее. При загрузке в панель управления, такие файлы помещаются в соответствующие папки.

Fonts - папка для SWF-файлов шрифтов, сделанных в Online Font Creator.
Images - все изображения, используемые в галереях или на страницах веб-сайта.
Media - папка, содержащая различные медиа-файлы.
Music - папка для MP3-файлов, используемых звуковым проигрываетелем.
Sound - звуковые файлы в формате WAV, которые используются в качестве звуковых эффектов веб-сайта.
Video - папка для видео-файлов, которые используются видео-плеером или медиа-галереей.

Некоторые папки могут быть пустыми, если файлы данного типа не использованы в шаблоне.

Откроем FLA-файлы в Adobe Flash и посмотрим, что находится внутри.

2.1 moto.xfl

Данный файл содержит прелодер веб-сайта. MovieClip прелодера называется AppPreloader и находится на первом кадре четвертого слоя. Если октрыть его, мы увидим 100-кадровую анимацию. 100 кадров соответсвуют 100 процентам прогресса загрузки.



Файл класса AppPreloader находится в папка src\common\. Закомментированный код может быть использован для присвоения численного значения процентов загрузки текстовому полю.

Когда загрузка завершена, прелодер анимированно исчезает (метка "hide" на временной шкале) и появляется веб-сайт. Код, который загружает веб-сайт, находится в 10-м кадре:

showWebsite();

2.2 website.xfl

Website.xfl содержит логику смены страниц и все элементы веб-сайта.

Данный шаблон имеет только один макет, поэтому на временной шкале присутствует только анимация появления макета и смены страниц в его рамках (чередования). Метки анимации находятся на слое "labels". Анимация появления макета обозначена как "layout_1_in". Она проигрывается только один раз, при открытии веб-сайта. Анимация чередования имеет метку "layout_1_rotate" и вызывается кодом при каждой смене страниц. Код находится в четвертом кадре слоя "actions".

Откроем библиотеку Flash. В корне находятся три каталога: Components, Sounds и Template Elements.



Все компоненты MotoCMS находятся в каталоге Components. Каталог Sounds содержит звуковые эффекты. В каталоге Template Elements находятся все элементы веб-сайта, рассортированные по разным папкам.

Все элементы, относящиеся к определенному слоту или модулю, находятся в папке Assets данного слота или модуля. Это помогает быстро найти нужные элементы когда возникает необходимость в редактировании.

Те символы, которые не относятся ни к одному слоту или модулю, помещаются в каталог Graphics & Animation.

Типы страниц описаны в секции <pages> файла structure.xml. Количество типов страниц зависит от дизайна веб-сайта и как минимум равняется количеству макетов сайта. Для каждого макета есть по крайней мере одна страница, базирующаяся на нем. Каждый тип страниц имеет следующие свойства:

id - идентификационный номер типа страницы. Должен быть уникальным для каждого типа.

layoutType - идентификационный номер макета, к которому относится текущая страница.

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

name - название для текущего типа страницы.

preview - изображение, которое используется для предпросмотра при создании новой страницы в панели управления.

locked - true/false - если тип страницы заблокирован (locked="true"), то страницу данного типа нельзя создать в панели управления.

contentHolders - контейнеры данного типа страницы. Все содержимое, размещенное в этих контейнерах, будет отображаться только на страницах текущего типа.

template - содержимое страницы, используемое по умолчанию. Это содержимое используется при создании страницы текущего типа в панели управления. Содержимое, используемое по умолчанию, добавляется сюда автоматически при обновлении шаблона страницы в панели управления.

Если мы окроем structure.xml нашего шаблона, мы увидим что у него есть один тип страниц:


Контейнерами являются пустые MovieClip, куда добавляется содержимое веб-сайта. Контейнеры шаблона распологаются на временной шкале файла website.xfl. Папка Default Holders содержит контейнеры, которые были включены в исходный шаблон. Остальные контейнеры были созданы разработчиком. Каждый контейнер может быть анимирован по-своему. Это помогает расширить возможности появления и переходов на Flash-сайте.



Содержимое добавляется в контейнеры посредством кода. В контейнеры уровня веб-сайта содержимое добавляется только один раз, при открытии веб-сайта, и в последствии не изменяется. Для таких контейнеров есть только код добавления содержимого.

Например, во 2-ом кадре слоя "actions" находится код, который добавляет содержимое в контейнер "website_holder_1":


Для контейнеров уровней страниц и макетов имеется код как добавления, так и удаления содержимого. Например, откроем 21-ый кадр слоя "actions" и увидим код, который добавляет содержимое в контейнер уровня страницы под названием "page_1_holder_7":


В кадре 69, когда проигрывается анимация смен страниц макета, содержимое данного контейнера удаляется с помощью следующего кода:


Все контейнеры описаны в structure.xml. Пример элемента контейнера "page_1_holder_7":


id - идентификационный номер контейнера. Должен быть уникальным во всей структуре.

type - тип контейнера в зависимости от уровня расположения - веб-сайт, макет, страница или всплывающее окно.

x,y - координаты контейнера.

width, height - размеры контейнера.

depth - глубина расположения контейнера по отношению к другим контейнерам. Данное значение должно соответствовать относительному расположению MovieClip контейнеров в файле website.xfl.

locked - true / false - когда контейнер заблокирован (locked="true"), новые объекты добавить в него нельзя. Можно только редактировать уже имеющееся в контейнере содержимое.

Слоты - это анимированные объекты Moto-шаблонов. Каждый слот имеет свой MovieClip в website.xfl, AS-файл в папке src\slots\ и свой элемент в structure.xml. Рассмотрим CloseButtonSlot в качестве примера. Данный слот и его папку Assets можно найти в Template Elements - Slots библиотеки Flash.



На временной шкале присутствуют такие метки для анимации: show, over, out и hide.



AS-код данного слота находится в файле CloseButtonSlot.as, который размещен в папке src\slots\. Код обращается к Flash-элементам из символа CloseButtonSlot, задает цвет, присваивает текст текстовому полю и устанавливает размеры элементов.

Давайте найдем элемент CloseButtonSlot в файле structure.xml:


id - идентификационный номер слота.

librarySymbolLinkage - название класса, заданное для экспорта MovieClip слота.

animated - атрибут, который устанавливает, является ли слот анимированным.

resizable - устанавливает, есть ли у слота логика изменения размера.

locked - устанавливает, должен ли слот быть доступен для добавления в панели управления.

name - название слота в панели управления.

properties - свойства слота, которые могут быть изменены пользователем с помощью панели управления. У данного слота имеются свойства цвета и текста.

template - значения всех свойств слота, используемые по умолчанию.

Модули - это объекты, которые имеют собственные источники данных и панель управления. Модули являются более совершенными объектами, чем слоты. Их размещение в шаблоне аналогично размещению слотов: MovieClip и папка Assets находятся в Template Elements - Modules, AS-файл находится в папке src\modules\, и имеется свой элемент в structure.xml. Модули со своими источиками данных также имеют XML-файлы в папке xml\modules\.

Рассмотрим пример модуля меню. Данный шаблон имеет меню и подменю. Символы и папки Assets как меню, так и подменю, распологаются в папке Template Elements - Modules библиотеки Flash.



У обоих модулей имеются рендереры элементов (Item Renderers), использующиеся как кнопки меню. Символы рендереров находятся в папках Assets модулей.



Несмотря на то, что меню и подменю созданы как отдельные модули, они работают вместе. Код модуля меню вызывает подменю при наведении мыши на соответсвующую кнопку меню. AS-файлы меню, подменю и их рендереров элементов находятся в папке src\modules\ под такими именами: MainMenu.as, MainMenuItemRenderer.as, MainSubMenu.as, MainSubMenuItemRenderer.as

Рассмотрим элементы меню и подменю в файле structure.xml:


Большая часть свойств аналогична свойствам слотов, однако есть и особенные.

menu - идентификационный номер источника данных, используемый в текущем модуле меню по умолчанию.

itemRenderer - имя класса рендерера элемента главного меню, заданное для экспорта символа.

dropDown - true/false - устанавливает, используется ли подменю для данного меню.

maxDepth - максимальное количество уровней подменю (-1 означает неограниченное количество).

maxRootItems - максимальное количество кнопок меню.

dropDownOnRollOver - true/false - если "true", подменю будет открываться при наведении мыши, если "false" - по нажатию.

dropDownMenuType - идентификационный номер элемента подменю в structure.xml, который следует использовать с текущим меню.

dropDownItemRenderer - имя класса рендерера элемента подменю, заданное для экспорта символа.

* - файл с содержимым модуля меню называется menus.xml и распологается в папке xml. В нем может содержаться несколько источников данных, каждый со своим уникальным идентификатором (ID). Файл menus.xml данного шаблона содержит один источник данных.

Всплывающее окно появляется над всем сайтом. Открытие всплывающего окна не приводит к смене страниц либо макетов, так как появление происходит уровнем выше.

Moto-шаблон может иметь несколько типов всплывающих окон. Рассматриваемый шаблон имеет один тип всплывающего окна. MovieClip всплывающего окна и его папка Assets находятся в каталоге Template Elements - Popup библиотеки Flash.



У всплывающего окна есть свои контейнеры, которые размещены на временной шкале его MovieClip. Анимация появления и исчезания на временной шкале обозначена метками "show" и "hide", соответственно.



Файл WebsitePopup.as находится в папке src\popups\. Данный файл содержит логику перемещения всплывающего окна по сцене.

The popup also has its node in the structure.xml file. The properties are the same as the page has. Same as pages, the popups may have the default content.

Всплывающее окно также описывается соответствующим элементом в structure.xml. Оно имеет такие же свойства, как и страницы. Так же, как и страницы, всплывающее окно может иметь содержимое, используемое по умолчанию.

Шаблон MotoCMS - это Flash-вебсайт, но его создание не совсем похоже на создание обычного веб-сайта на Flash. Поэтому мы публикуем этот список, который поможет Вам понять общий процесс создания Moto-шаблона. Вы можете найти более подробную информацию по каждому шагу в статьях Руководства для разработчиков.

Основные шаги

Первый шаг в создании шаблона на MotoCMS - это анализ дизайна веб-сайта, который Вы собираетесь создать, и определение количества макетов. Это число зависит от количества состояний, в которых присутствуют разные элементы сайта. Например, когда имеется вводная страница, страница с контентом и галерея, то такой сайт будет иметь три макета, так как на появление и исчезание элементов каждого состояния требуется создать разную анимацию. На основе каждого из макетов может быть создано множество страниц, например, несколько контент-страниц. Количество макетов при этом не увеличится, так как все контент-страницы могут появляться с одинаковой анимацией.

Когда количество макетов определено, Вы можете выбрать один из 5-ти исходных Moto-шаблонов. Узнайте больше о макетах и исходных шаблонах из нашего туториала. Исходные шаблоны можно найти на странице загрузок.

Если шаблон с необходимым количеством макетов отсутствует, Вы можете самостоятельно изменить существующий шаблон или создать свой собственный. В случае, если Вы решили создать Moto-вебсайт с чистого FLA-файла, не используя исходный шаблон, Вам необходимо добавить Moto-компонент. Нажмите здесь, чтобы узнать, как установить набор компонентов (MXP-файл).

Высота, ширина, а также фоновый цвет сайта должны быть заданы в Свойствах Документа файлов moto.xfl и website.xfl в Adobe Flash. Те же значения следует установить и в файле config.xml. Config.xml является конфигурационным файлом Moto-шаблона. Он редактируется только вручную, панель управления не вности никаких изменений в данный файл. Config.xml находится в корневом каталоге веб-сайта. Основными параметрами, которые следует задать, являются:

ALLOW_FULL_SCREEN - true / false - включение полноэкранного режима.
WEBSITE_WIDTH - ширина веб-сайта. Можно задать как число, так и 100%.
WEBSITE_HEIGHT - высота веб-сайта. Можно задать как число, так и 100%.
WEBSITE_MIN_WIDTH - минимальная ширина веб-сайта. Если ширина окна браузера меньше заданной ширины, появится полоса прокрутки.
WEBSITE_MIN_HEIGHT - минимальная высота веб-сайта. Если высота окна браузера меньше заданной высоты, появится полоса прокрутки.
FLASH_PLAYER_VERSION_REQUIRED - минимальная версия Flash-плеера, необходимая для просмотра сайта. 9.0.23 для CS3. 10 и выше для CS4, при условии, что задействованы функции CS4.

Все объекты Moto-шаблона распологаются в контейнерах. Контейнер - это пустой символ (MovieClip), в который можно добавлять различные элементы. Каждый контейнер может быть заанимирован по-своему, что расширяет возможности создания анимации веб-сайта в целом. Например, можно поместить верхнее меню в верхний контейнер, нижнюю плашку в нижний контейнер, содержимое страницы (контент) поместить в контейнер для контента, распологающийся по центру. Таким образом можно создать разную анимацию появления и исчезания для каждого из них.

Каждый шаблон по умолчанию имеет контейнеры уровня веб-сайта и страниц. Изначально они не имеют анимации, поэтому анимировать следует самостоятельно. Такие контейнеры уже содержат объекты и описаны в файле структуры (structure.xml).

Не обязательно создавать все контейнеры сразу. Их можно добавлять по мере необходимости в процессе создания веб-сайта.

Чтобы посмотреть пример создания и анимирования контейнеров, нажмите здесь.

Теперь можно перейти к созданию слотов. Вам следует создать слот в том случае, если Вы хотите, чтобы объект был анимирован и имел свойства, которые можно отредактировать в панели управления.

Примерами слотов являются кнопки "Узнать больше", кнопки закрытия, анимированные контейнеры изображений. Они могут иметь такие свойства, как цвет, размер, текст, и так далее. Эти свойства будут доступны пользователю для редактирования в панели управления.

Нажмите здесь, чтобы посмотреть примеры создания слотов.

Шаги для продвинутых

Когда слоты готовы, можно перейти к созданию усовершенствованных объектов - модулей. Модулями являются более сложные Moto-объекты, которые не только могут иметь анимацию и свойства, но также собственную панель управления. Панели управления модулей доступны из главной панели управления MotoCMS.

Наиболее распространенными примерами модулей являются меню, галерея, музыкальный проигрыватель, видео плеер, контакт-форма, и так далее.

Примеры создания модулей можно посмотреть здесь.

Прелодер со 100-кадровой анимацией находится в файле moto.xfl. Это тот главный прелодер, который отображается при загрузке сайта. Анимацию прелодера можно изменить под свои нужды.

По умолчанию в прелодере есть текстовое поле, но можно создать прелодер и без текстового поля.

Пожалуйста, используйте только стандартные шрифты в прелодере (Arial, Tahoma, и т. д.), так как использование нестандартных шрифтов может привести к конфликту со шрифтами в панели управления. Цвета, использованные в прелодере, не подлежат редактированию из панели управления.

Всплывающее окно - это модальное окно, появляющееся сверху всего веб-сайта, независимо от его состояния. Содержимое всплывающего окна редактируется в панели управления и может содержать текст, изображения, слоты, модули, и так далее. Всплывающее окно чаще всего используется для окон "Узнать больше" и "Политика конфиденциальности".

Добро пожаловать на форум разработчиков MotoCMS! Здесь Вы сможете найти всю необходимую документацию, касающущюся разработки Moto-вебсайтов, присоеденится к сообществу Moto-разработчиков и получить ответы на все свои вопросы.

Что такое MotoCMS?



MotoCMS - это система управления Flash-контентом. Она представляет собой Flex приложение, которое позволяет редактировать содержимое веб-сайта. MotoCMS предназначена для веб-разработчиков, которые занимаются созданием, кастомизацией и поддержкой Flash-сайтов.

С чего начать?

Есть два основных направления:

1. Кастомизация готовых шаблонов. Вы можете выбрать готовый шаблон из нашей коллекции. Вы также можете попробовать себя в кастомизации, скачав пример шаблона.

2. Создание веб-сайта на основе одного из исходных шаблонов. Статья Шаги по созданию Moto-шаблона поможет Вам ознакомиться с процессом создания веб-сайта на системе MotoCMS.

Если Вы не являетесь разрабочтиком, Вас, возможно, заинтересует приобретение готового шаблона. Пожалуйста, посетите магазин Moto-шаблонов и ознакомьтесь с нашей коллекцией качественных Flash-вебсайтов.

Двигаемся дальше



Узнайте больше о разработке Moto-вебсайтов и детальнее изучите их компоненты.

Слоты - узнайте больше об анимированных объектах Moto и научитесь создавать собственные слоты с помощью туториалов.
Модули - узнайте, что такое модули в системе MotoCMS, изучите примеры и научитесь создавать меню, галереи, и т.д.
Moto CMS API - найдите ответы на все Ваши вопросы как разработчика с помощью описания компонента MotoCMS, классов, их свойств, методов, а также примеров использования.

Скачать

Скачайте пример Moto-шаблона прямо сейчас. Данный пример позволит Вам изучить исходные файлы шаблона и ближе познакомиться с его структурой.

Кроме примера, раздел Downloads также содержит исходные шаблоны и компонент MotoCMS в виде MXP файла.

Получите бесплатную версию MotoCMS сроком на 30 дней чтобы оценить удобство использования Moto-шаблона вместе с панелью управления.

Форум MotoCMS

Задавайте любые вопросы и открывайте новые обсуждения на нашем форуме.

Спасибо за внимание! Получайте удовольствие от работы с MotoCMS!