From MegaZine3
Jump to: navigation, search

Elements, in the context of the MegaZine3 Engine are classes defining behavior of objects displayed inside a page side. They are loaded and displayed as defined inside a page node.


Core Elements

A few elements are always available, and directly integrated into the engine. Those elements are:

External Elements

Additional elements can be defined in form of swf files using the AbstractElement class as their document class or extending it. This is basically the same, only that the former variant is what you will use when working with the Flash IDE, the latter when using another compiler.

One external element is included with the engine by default:


A few attributes are handled by the engine core itself, and are therefore the same for all elements.


Distance of the element's left border to the left edge of the page.


May be used to position elements relative to the page. Horizontally via left, center and right, as well as vertically via top, middle and bottom. The two values left and top do not have a real effect, but only exist for completeness' sake. If this attribute is present, absolute positioning via attributes left and top will be ignored, if present.

The code position="center bottom" puts the element at the bottom of the page in the center.


Determines the priority of the element while loading. Elements where this value is lower will be loaded first. Default values vary by element. Unknown external elements will be given the default priority of 10.

In general, internal elements are loaded before external elements, and elements expected to be larger (i.e. which take longer to load) will be loaded after smaller elements. Therefore the default priorities are:


Distance of the element's top border to the top edge of the page.

Dynamic attribute values

Localization of the book's content works on a element-by-element basis, i.e. it is possible to set the appearance for each element, based on the currently selected language. Furthermore, it is possible to define different attribute values based on the book's current scaling. This way of defining context specific attribute values can be used for localization and for quality optimizations.

To define a context specific value for an attribute, add a child node to the element which is named like the attribute you wish to modify. This node can have two attributes, lang and scale, the first one holding the id of the language in which to use the attribute value (the content of the node), the second the scaling starting at which the value will be used.

Note that this can be done with every attribute, and of course also those handled by plugins (e.g. the title attribute, this way allowing to set different tool-tips, based on the current language).


To localize an element's attribute value, create a child node for the element, named after the attribute to localize, and set the lang attribute to the id of the language to which the attribute value corresponds. A simple example using the image element:

    <src lang="de">data/deutsch.jpg</src>

This will create an image element using the image data/english.jpg when the book is using the English language (assuming it is the default language), and data/deutsch.jpg when the book is using the German language. Note that the language can either be changed using the language chooser in the navigation bar plugin, or using the API (IMegaZine.localizer.language).


To use different attributes based on the current book's scaling, use the scale attribute of a childnode named after the attribute to specialize. For this to have an effect, the book's minimum scale must be different from its maximum scale, allowing the user to either manually zoom in or out, or passively do so using liquid scaling.

This can come in handy if you wish to specify content of differing quality, based on the current zoom level. E.g., when the book is rather small you might want to use low resolution images, which are highly compressed. When user zooms in, however, you want to display high quality images, maybe containing some text, which should then be readable.

The value given in the scale attribute is the book's scaling starting at which the attribute value will be used. This way one implicitly defines ranges in which to use certain values. E.g. when having one value for 0.5, one for 1 and one for 2, the first node (with scale="0.5") will be used while the book is in a scale range of [0.5,1[ (or, if no default value for the attribute is given, it will actually be from [book@zoomminscale,1[). The second range will be [1,2[, the value defined in the node with scale="1", and the last one for [2,infinity[, using the value defined for the node with scale="2"

In code:

<book zoomminscale="0.5" zoommaxscale="2">
    <!-- chapter/page -->
    <img src="data/small.jpg">
        <src scale="0.5">data/medium.jpg</src>
        <src scale="1">data/large.jpg</src>
        <src scale="2">data/huge.jpg</src>
<!-- ... -->

Note that in most cases it's probably a good idea that when using images to have the highest resolution match the maximum scale of the book, so that no scaling artifacts lessen the image's quality.


It is obviously also possible to mix the scale and lang attributes, to define custom resolutions / attribute values based on a mix of language and scaling. The only noteworthy thing in this regard is, that ranges from the default language are only "copied" before the start of the first localized scale range. In other words, when the current language's first range does not start at the book's minimum scale, the value from the default language is used for the range from the minimum scale to the value defined for the current language. An example:

<!-- book@zoomminscale="0.5" -->
    <content lang="de" scale="0.75">Eins</content>

In this case, "One" will be displayed even if the German language is selected as long as the book is in the scale range [0.5,0.75[, because for this range there is no valid definition for German.

MegaZine3 Core-related articles
Book elements Book · Chapter · Page · Spreadpage
Page elements Area · GIF · Image · Navigation · Sound · Text · Video

Pages in category "Elements"

The following 6 pages are in this category, out of 6 total.







Personal tools