Moto CMS Template is an XML Flash template with the particular structure. It consists of two FLA files - moto.fla, which contains the preloader, and website.fla with the main animation and the website elements. Also it has several XML files with the website's configuration, structure, content, etc. Let's examine the Moto template's structure with the help of this article.

Click here to download a template. The archive contains the template with the source files. It will let you explore the template and its features. The control panel is not included. You need to have the Moto CMS license to use this template with the control panel. You can also take a free 30-days trial version of Moto CMS. In order to use the template with the control panel, just copy the controlPanel folder contents to your server and extract the template's archive contents to the same place.

So, let's start looking into the template's structure.

1.1. Flash sources.

Moto CMS Template consists of two parts - the preloader (moto.fla) and the website (website.fla). While the preloader embedded in HTML page initializes Moto CMS engine, the other SWF file is loading alongside with animation and the elements of the template. So, we can say that moto.swf loads the website.swf.

All the AS files are placed in the src folder. They are categorized and put in different folders for the ease of use.

1.2. XML Files.

Most of the XML files are edited automatically when you work with the control panel, but some should be edited manually. Let's start with the configuration file which is placed in the root - config.xml. This file contains the locations of all the necessary template's folders and files, and also some important parameters which are used for the integration of the SWF into HTML.

Now let's open the xml folder and find the structure.xml file. It is the main file that the flash developer edits while creating the Moto CMS template. This file contains the description of the website structure, its layouts, types of the pages and pop-ups, and all the animated elements - slots and modules.

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

settings.xml - the website settings file that contains the initial page, title, warning message options, the Google analytics and the webmaster tools accounts.

fonts.xml - the file that contains fonts and their information. Each of the fonts has its name, file name, characters - the type of the symbols used in the font, may be enabled or disabled.

content.xml - the content file that comprises all the website data, except the menu and modules. This file has a similar structure with structure.xml, but it describes the concrete objects used on the site, layouts, pages and pop-ups and their properties.

menus.xml - the menu file contains the structure and the data of the site Menu. This file combines the structure and the content of the menu, describing all possible types of the menu and menu data providers.

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

1.3. External widgets.

Some slots and modules are made as the external SWF files. They are placed in the slots and the modules folders. Most of the external widgets are standard for all templates, for example: RssReader, ShareButtonSlot, HTMLWidget, newsModule, etc.

But there are can be the external widgets that were made specially for the particular template. In this template the gmapModule and the customGalleryModule are the examples of custom widgets. Unlike the standard widgets, custom widgets come with the Flash sources. They can be found in the same folder where the widget's SWF is placed.

1.4. Template assets.

Every template has a lot of different objects like images, videos, sound files, etc. When these files are added to the control panel, they are put in the appropriate folders.

Fonts - the folder for the SWF font files that were made by the Online Font Creator.
Images - all website images used in the galleries or on the pages are placed here.
Media - the folder which contains various media files.
Music - the folder for the MP3 files which are used by the sound player.
Sound - the WAV sound files which are used as the website sound effects are placed in this folder.
Video - the folder for the video files. The video files can be used by the video player or the media gallery.

It's not necessary that all folders contain files. Some of them can be empty if no files of this type are used in the template.

Let's open the FLA files in Flash and see what they have inside.

2.1. moto.fla

This file contains the preloader. The preloader's Movie Clip is named AppPreloader and it is placed in the first frame of the fourth layer. If you open it, you can see the 100 frames animation. 100 frames match the 100% of the loading progress.



The AppPreloader class is placed in src\common\. The commented code can be used for setting the loading progress to the text field.

When the loading is finished, the preloader disappears with animation (the "hide" label on timeline) and the website is opened. The code which loads the website is placed in the frame 10:

showWebsite();

2.2. website.fla

Website.fla contains the page switching logic and all the website elements.

This template has one layout, so there is only the animation of layout loading and rotation. The labels are placed on the "labels" layer. The layout loading animation is labeled as "layout_1_in" on timeline. It is played only once - when the website is opening. The rotation animation is labeled as "layout_1_rotate" and is called by the code every time the page is switched. This code is placed in the 4th frame of the "actions" layer.

Let's open the Library. There are three folders in the root: Components, Sounds and Template Elements.



All the Moto CMS components are placed in the Components folder. The Sounds folder contains the sound effects. The Template Elements folder contains all the elements sorted into different folders.

The elements, which refer to a certain slot or module, are placed in this slot's or module's Assets folder. It helps to easily find the needed elements when something has to be changed.

All the symbols, that do not refer to any slot or module, are put into the Graphics & Animation folder.

The types of the pages are added to the pages block of the structure.xml file. The number of the page types depends on the design of the website and as a minimum is equal to the number of the layouts of the site. For each of the layouts there is at least one page that is based on it. Each type of the pages has the following properties:

id - identification of the layout that is used to identify what layout the page type refers to;
layoutType - the type of the layout, which the current page refers to;
backgroundImage - (optional parameter) - Background image is used for the objects that are animated in FLA files and may not be added on the stage dynamically as other objects;
name - the name of the page type;
preview - the image used for the preview of the page's look when creating a new page;
locked - true/false - if the page type is locked (locked="true"), then the page of this type can not be created through the Control Panel;
contentHolders - the holders of the current page type. All the content placed in these holders will be visible only on the pages of this type.
template - the default content of the page. This content will be used when a new page of this type is created in the control panel. The default content is added here by the control panel automatically when you update the page's template.

If we open the structure.xml of our template, we will see that it has one page type:


Holders are the empty Movie Clips where the website content is added. The template's holders are placed on timeline of website.fla. The Default Holders folder contains the holders which were included in the source template. Other holders were created by developer. Each holder can be animated in a different way. It helps to expand the possibilities of appearance and transitions on the flash site.



The content is added to holders with the help of the code. The website-level holders' content is added only once, when the website is opened, and never changes, so there is only the code which adds content to them.

For example, there is the code which adds content to the "website_holder_1" holder in the 2nd frame of layer "actions":


The page-level and the layout-level holders have the code which adds and then removes content when needed. For example, we can open the 21st frame on layer "actions" and see the code which adds content to a page-level holder named "page_1_holder_7":


In the frame 69, when the layout-rotation animation is playing, this holder's content is removed by the following code:


All the holders have their nodes in structure.xml. Here is the node of the "page_1_holder_7" holder:


id - identification number; must be unique in the entire structure.
type - type of the holder depending on the site level where the holder will be placed - website, layout, page or popup.
x,y - the holder coordinates.
width, height - the holder dimensions.
depth - depth of the holder relative to other holders; must be set according to the arrangement in the website.fla file.
locked - true / false - when a holder is locked, new objects can't be added to it - only the ones which are already placed there can be edited.

Slots are the animated objects in the Moto templates. Each slot is presented as a Movie Clip in website.fla, has the own AS file in the src\slots\ folder and has the node in structure.xml. Let's take the CloseButtonSlot as an example. We can find this slot and its Assets folder in the Library, in Template Elements - Slots.



There are four labels on the timeline of this slot: show, over, out and hide.



The script is placed in the CloseButtonSlot.as file in the src\slots\ folder. The script takes the Flash elements which are placed in the CloseButtonSlot Movie Clip, sets the color, assigns the text to the textfield and sets the sizes of the elements.

Let's find the CloseButtonSlot's node in the structure.xml file:


id - an identification number of a slot.
librarySymbolLinkage - the export name of the slot's MovieClip (Class name).
animated - an attribute which states if the slot is animated or not.
resizable - states if there is the logic for resizing inside the slot or not.
locked - states if the slot should be enabled for adding in the control panel or not.
name - a name of the slot in the control panel.
properties - properties of the slot which can be configured by user via the control panel; this slot has the color and the text properties.
template - default values of all properties of the slot; it's necessary to add an attribute alpha - transaprency of the slot, from 0 to 1.

Modules are the Moto objects which have their own data provider and the control panel. Modules are more advanced objects than slots. Their placement in the template is similar to slots: the Movie Clip and the Assets folder are placed in Template Elements - Modules, the AS file is placed in the src\modules\ folder, and the node is placed in the structure.xml file. Modules with data providers also have their XML files in the xml\modules\ folder.

Let's consider an example of the menu module. The current template has the menu with the submenu. Both Movie Clips and their Assets folders are placed in Template Elements - Modules.



Both modules have the item renderers - the elements that are used as menu buttons. They are placed in the modules' Assets folders.



Though the menu and the submenu are created as different modules, they work toghether. The menu module's script calls the submenu when the mouse is put over the appropriate menu button. The menu, submenu and their item renderers' AS files can be found in the src\modules\folder under the names: MainMenu.as, MainMenuItemRenderer.as, MainSubMenu.as, MainSubMenuItemRenderer.as.

Let's examine the main menu and the submenu modules' nodes in structure.xml:


Most of the properties are the same as the slots have, but some are unique.

menu - ID of the menu's content which should be used for this module by default *.
itemRenderer - the export name of the main menu item renderer symbol.
dropDown - true/false - states whether the submenu is enabled for this menu or not.
maxDepth - maximal number of the submenu levels (-1 for unlimited number).
maxRootItems - maximal number of the menu items.
dropDownOnRollOver - true/false - if true, the submenu will open on mouse over, otherwise - on click.
dropDownMenuType - ID of the submenu module's node in structure.xml
dropDownItemRenderer - the export name of the submenu item renderer symbol.

* - the menu module's content file is named as menus.xml and can be found in the xml folder. It can have several sets of content, each having the unique ID. This template's menus.xml contains one content list.

The popup is a window which appears on the top of the whole website. The popup opening doesn't change pages or layouts as it opens over them.

Moto template can have multiple popup types. The current template has one popup type. The popup's Movie Clip and its Assets folder are placed in Template Elements - Popup.



The popup has its own holders, which are placed on its own timeline. There are the "show" and "hide" labels on timeline for the animation of appearance and disappearance.



The WebsitePopup.as file is placed in the src\popups\ folder. This file contains the logic of the popup dragging on the stage.

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.