Quickstart Guide

From MegaZine3
Jump to: navigation, search


Although this guide tries to be as basic as possible, a certain knowledge about HTML and/or XML will prove to be very helpful. Please note that all references to files will assume you have extracted the contents of the bin folder in the package somewhere, and that this directory you extracted the contents to represents the root directory for your MegaZine project. E.g. you extracted the contents of the bin folder to C:\MyMegaZine\, then that is your root directory, and should contain the index.html (webpage displaying the book), style.css (stylesheet for the webpage) and two folders named js (containing additional JavaScript libraries) and megazine (the actual engine files).

Contents

Setting It Up

Page Size

If you wish not to use the default page size there are two adjustments to make.

XML

First comes the XML adjustment. Open the file megazine.mz3 in the megazine subfolder. You will see a tag named book. To its attributes, add the following: pagewidth and pageheight, and enter the values of the desired page size. An example: say you want your pages to be 300 pixels wide and 200 pixels high, then it would look like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE book SYSTEM "http://megazine.mightypirates.de/megazine2.dtd">
<book pagewidth="300" pageheight="200">
    <chapter>
        <page>
        </page>
    </chapter>
</book>

And that's it for the XML.

HTML (Deprecated in Version 2.0.?)

Update: This section is deprecated now, as the size is dynamically defined in the CSS, so you most likely don't have to change the sizes in the HTML any more. If you do, make sure to give a fixed size in the CSS class #megazine, otherwise the settings in the script section won't have any effect.

Next a little change to the HTML is necessary, to give Flash enough space on the webpage. Open the file index.html in the root directory. Look for the <script> Block in the head of the file.

Here you need to change the width (default 750, marked (1)) and the height (default 700, marked (2)). As a general rule of thumb for minimum sizes, use width = pagewidth * 2 + 200 and height = pageheight * 2, although the height calculation only works for pages higher than wide. The actual formula for the minimum height, so that pages cannot be cut off at the top or bottom while turning is height = sqrt(pagewidth * pagewidth + pageheight * pageheight) * 2 - pageheight i.e. the page diagonale times two minus the page height. But using a value a bit bigger never hurts, as it allows more of the reflection to be seen. Also, if you have a lot of pages, making the movie higher gives more room to the page navigation. Alternatively you can just try some values until it fits.

Although this was a bit on the mathematical end, now you're done with setting up the page size.

Used space

Per default you will find there is some spacing below and above the book when using liquid scaling which is not used. This is to avoid the pages and bars from the navigationbar plugin to overlap if possible. To disable this spacing, have a look at the megazine.asul file, where you'll find this:

<scrollpane id="pagecontainer" anchors="25,75,pw-25,ph-75" clipchildren="false" mousemode="mouse_move">
    <box name="$viewport$" width="pagew*2" height="pageh" clipchildren="false"/>
</scrollpane>

This is the outermost container for the pages, which is also used for scrolling when the page size exceeds the available size (e.g. when zoomed in). The important part is the anchors attribute. Replace the original values with 0, 0, pw, ph, which means it'll span all the available space (also see Layouting). So after that it should look like this:

<scrollpane id="pagecontainer" anchors="0,0,pw,ph" clipchildren="false" mousemode="mouse_move">
    <box name="$viewport$" width="pagew*2" height="pageh" clipchildren="false"/>
</scrollpane>

Background Color

If you wish to change the webpage's background, here is how: if you have closed it, open the file index.html again.

In the same place you changed earlier to adjust the size (see previous section) now change the value #333333 (marked (3)) to a color of your choice (in HTML/CSS format, meaning the hexadecimal representation with a leading #. See Wikipedia:Webcolors). Look for the the style block in the head, and in it for the text background: #333333; (marked (5)). Modify the value right to background to the same value.

Alternatively you can use a background image. In that case remove the two slashes (//) at the line marked (4) and in the CSS section write url('path/to/some/image.jpg'); next to background: instead of a color value. And that's that.

Creating the Pages

Creating the Page Elements

After all the basic obstacles have been cleared, you are now ready to create your pages. For this purpose, open the file megazine.mz3 in the megazine subdirectory.

To start with, copy the <page></page> block until there is one page element for every page you want. Please note that a page element represents a page side, not a real page / physical page. A real page is made up from two page elements. This also means there has to be an even number of pages. In fact, there has to be an even number of pages in each chapter. If there is not, a blank one will be automatically inserted as the very last page.

Setting Page Properties

There are some very basic settings you should know about: the bgcolor, foldfx and Page#stiff attributes for pages.

A page with some attributes set would look like this:

<page bgcolor="0xFF0000" stiff="true"></page>

and would produce a stiff, red page. Also, no folding effects will be used, because stiff pages never use them.

Another example:

<page bgcolor="0x0000FF" foldfx="0"></page>

would produce a blue page, without folding effects.

Enabling plugins

In version 2.0 you have to list the plugins you plan to use in the book element. Otherwise the respective features will not be available. The available plugins can be found in the shipped modules under ../megazine/plugins/. The names of the .swf files are the same that should go into the plugin list. Here is an example with most of the available plugins enabled:

<book plugins="anchors, navigationbar, backgroundsound, batchpages, gallery, keyboardnavigation, links, titles, swfaddress"
bgcolor="0xbba978" pageheight="610" pagewidth="460" lang="de,en" reflection="false" zoominit="0">

Inserting Page Content

Let's go with the easiest case, and assume you have an image of every page, you just want the images to be displayed as pages in the MegaZine. Create an img element in every page, referencing to the image to display. The syntax for this is:

<img src="path/to/my/image.jpg"/>

Do this for every page, until your XML looks something like this:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE book SYSTEM "http://megazine.mightypirates.de/megazine2.dtd">
<book>
    <chapter>
        <page>
            <img src="src/cover_outside.jpg"/>
        </page>
        <page>
            <img src="src/cover_inside_and_inprint.jpg"/>
        </page>
        <page>
            <img src="src/content.jpg"/>
        </page>
        <page>
            <img src="src/some_picture.jpg"/>
        </page>
        <page>
            <img src="src/cover_back_blank.jpg"/>
        </page>
        <page>
            <img src="src/cover_back_outside.jpg"/>
        </page>
    </chapter>
</book>


In this case the images are in the folder megazine/src, with the names as seen above. This is very synonymous to using the img element in HTML.

That is all of the basics, enough to create a simple book. For more features see the elements category, which holds a basic listing of all elements and their attributes.

Lastly, you might want to validate your megazine.xml, to avoid typos and other syntactical errors. A nice validator can be found here.

Further Configuration

Personal tools
Namespaces
Variants
Actions
Navigation
documentation
miscellaneous
Toolbox