[Tutorial] Schnelleinstieg (DE)

[Florian Nücke]

MegaZine 3 - Schnelleinstieg

Auch wenn diese Anleitung so grundlegend wie möglich bleibt, kann es nicht schaden schon einmal mit HTML und/oder XML gearbeitet zu haben.
Bei allen folgenden Verweisen auf Dateien wird davon ausgegangen, dass der Inhalt des bin-Ordners im Archiv der heruntergeladenen Version entpackt wurde, und das Hauptverzeichnis ist, in dem gearbeitet wird. Wenn Sie z.B. die Inhalte des bin-Ordners nach C:\MeinMegaZine\ entpackt haben, dann ist das jetzt das Hauptarbeitsverzeichnis, und sollte die index.html und drei Ordner namens swfobject, swfaddress und megazine enthalten.


1 - Grundlegende Einrichtung
    
1.1 - Seitengröße
Wenn Sie die Seitengröße ändern möchten bedarf dies zweier Anpassungen.

1.1.1 - XML
Zunächst die Änderung in der XML-Datei. Öffnen Sie die Datei megazine.xml im Unterordner megazine. Sie werden einen Tag namens book sehen (ein Tag ist ein Element im XML, und wird von zwei spitzen Klammern (<...>)eingefasst). Fügen Sie die folgenden zwei Attribute hinzu:

pagewidth und pageheight, und tragen sie die gewünschte Seitenbreite und -höhe, respektive, ein.
Ein Beispiel: angenommen Sie wollen, dass die Seiten 300 Pixel breit und 200 Pixel hoch sind. Dann sähe die XML-Datei nach den Änderungen so aus:

Code: (xml)

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

Damit sind wir mit dem XML vorerst fertig.


1.1.2 - HTML

Update: Dieser Abschnitt kann inzwischen Übersprungen werden, da die Größe dynamisch ist (prozentuale Größen im CSS). Wenn Sie die Größen dennoch manuell setzen möchten oder müssen stellen Sie sicher, dass Sie auch eine absolute Größe im CSS angeben (Klasse #megazine), sonst hat die Angabe im script-Bereich keine Auswirkung.

Nun bedarf es einer kleinen Änderung in der HTML-Datei, um Flash genug Platz auf der Webseite zu geben. Öffnen Sie die Datei index.html im Hauptarbeitsverzeichnis.
Suchen Sie nach dem <script> Block im Kopf der Datei.
Hier müssen Sie die Breite (default 750, markiert mit (1)) und die Höhe (default 700, markiert mit (2) ) anpassen. Als Faustformeln lassen sich
Breite = Seitenbreite * 2 + 200
und
Höhe = Seitenhöhe * 2
nehmen, mit der Einschränkung, dass die Höhenberechnung nur funktioniert, wenn die Seiten höher als breit sind. Die mathematisch korrekte Formel für die minimale Höhe, so dass Seiten beim Blättern nicht abgeschnitten werden können, ist wie folgt:
Höhe = Wurzel(Seitenbreite * Seitenbreite + Seitenhöhe * Seitenhöhe) * 2 - Seitenhöhe
d.h. die Seitendiagonale mal zwei minus die Seitenhöhe. Aber es kann nie schaden einen etwas größeren Wert zu verwenden, da so (wenn aktiviert) mehr von der Spiegelung zu sehen ist und, wenn man recht viele Seiten hat die Navigation entsprechend mehr Platz hat.
Alternativ kann man natürlich auch rumprobieren bis es passt.
Etwas mathematisch angehaucht, aber das war's auch schon. Die Seitengöße ist damit erfolgreich angepasst.


1.2 - Hintergrundfarbe
Wenn Sie eine andere Hintergrundfarbe für die Webseite verwenden möchten, so geht's: falls Sie sie wieder geschlossen haben, öffnen sie erneut die Datei index.html.

An derselben Stelle an der Sie die Größe festgelegt haben (siehe vorigen Abschnitt) müssen sie nun den Wert #333333 (markiert mit (3)) in eine Farbe ihrer Wahl ändern (im HTML/CSS Format, also der Hexadecimaldarstellung mit führendem #. Fall Ihnen das nichts sagen sollte: Wikipedia zum Thema Webfarben). Suchen Sie dann den style-Abschnitt im Kopf der Datei, genauer den Text background: #333333; (markiert mit (5)). Ändern Sie den Wert rechts von background zum selben Wert wie eben.

Alternativ können Sie auch ein Hintergrundbild verwenden. Entfernen Sie dazu die beiden Schrägstriche (//) an der mit (4) markierten Stelle und schreiben Sie im CSS rechts von background: statt einem Farbwert folgendes: url('pfad/zu/einem/bild.jpg');.
Und das war's auch schon.


2 - Seiten erstellen

2.1 - Erstellen von Seitenelementen

Nachdem die erste Hürde genommen ist, können Sie nun damit anfangen Ihre Seiten zu erstellen. Dazu öffnen Sie zunächst die Datei megazine.xml im Unterordner megazine.
Kopieren Sie den <page></page>-Block so oft, bis für jede Seite die Sie benötigen ein page-Element gibt. Bitte beachten Sie, dass ein page-Element eine einzelne Seite repräsentiert (d.h. nur eine Vor- oder Rückseite eine Blattes), keine Doppelseite. Eine Doppelseite (welche eine physikalische Seite darstellt) besteht aus zwei page-Elementen. Das bedeutet auch, dass es immer eine gerade Anzahl an Seiten braucht. Falls es eine ungerade Anzahl an Seiten gibt, wird automatisch eine leere Seite als letzte Seite eingefügt.


2.2 - Seiteneigenschaften festlegen

Es gibt ein paar grundlegende Einstellungen die Sie kennen sollten: die bgcolor, foldfx und stiff Attribute von Seiten.

• bgcolor
  Erlaubt das individuelle festlegen von Hintergrundfarben für Seiten. Das ist nur wichtig wenn ein Teil der Seite durchscheint, und die Seite nicht komplett durch ein Bild oder andere Elemente abgedeckt wird. Die angegebene Zahl muss keine hexadezimal formatierte Zahl sein, aber aus Gründen der Lesbarkeit wird dringend empfohlen, solche zu verwenden. Anders als beim Setzen der Hintergrundfarbe der Webseite müssen die hexadezimalen Zahlen hier mit 0x und nicht mit dem #-Zeichen begonnen werden.
• foldfx
  Legt fest ob die Falzeffekte auf der Seite angezeigt werden oder nicht, d.h. die Schatten- bzw. Lichteffekte in der Mitte des Buches, die den Eindruck vermitteln sollen, dass die Seiten gewölbt sind (was das Ganze plastischer wirken lässt). Auch wenn es normalerweise unnötig sein sollte diese Einstellung zu ändern, so kann es z.B. sinnvoll sein wenn Sie ein großes Bild über zwei Seiten anzeigen.
• stiff
  Legt fest ob die Seite eine harte Seite ist, wie der Einband eines gebundenen Buches. Auch wenn diese Einstellung überall im Buch verwendet werden kann, wird es empfohlen sie nur für die erste und letzte Seite zu verwenden. Es reicht diese Einstellung für eine von zwei Teilseiten einer "physikalischen" Seite zu setzen.

Eine Seite mit einigen der genannten Attribute könnte so aussehen:

Code: (xml)

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

und würde eine harte Seite mit der Hintergrundfarbe rot ergeben. Da harte Seiten keine Falzeffekte haben werden diese auch nicht angezeigt.
Noch ein Beispiel:

Code: (xml)

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

würde eine blaue Seite ohne Falzeffekte ergeben.


2.3 - Seiteninhalte einfügen

Folgen wir dem einfachsten Fall, und nehmen wir an, dass Sie für jede Seite genau ein Bild haben, und Sie diese als die Seiten des Buches anzeigen wollen. Erstellen Sie dazu in jedem page-Element ein img-Element, das auf das Bild für die Seite verweist. Das sieht dann so aus:

Code: (xml)

<img src="pfad/zu/meinem/bild.jpg">

Relative Pfade sind relativ zu der megazine.swf-Datei im megazine-Ordner. Wenn Sie das für jede Seite machen sollte Ihr XML nachher ungefähr so aussehen:

Code: (xml)

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE book SYSTEM "http://megazine.mightypirates.de/megazine.dtd">
<book>
    <chapter>
        <page>
            <img src="src/einband_außen.jpg"/>
        </page>
        <page>
            <img src="src/einband_innen.jpg"/>
        </page>
        <page>
            <img src="src/inhalt.jpg"/>
        </page>
        <page>
            <img src="src/ein_bild.jpg"/>
        </page>
        <page>
            <img src="src/einband_hinten_innen.jpg"/>
        </page>
        <page>
            <img src="src/einband_hinten_außen.jpg"/>
        </page>
    </chapter>
</book>

In diesem Fall befänden sich die Bilder alle im Ordner megazine/src, mit den Namen wie im src-Attribut der img-Tags. Im Grunde läuft das synonym zur Verwendung des img-Elements in HTML.

Das sind die Grundlagen, die ausreichen, um ein einfaches Buch zu erstellen. Für weitere Möglichkeiten werfen Sie einen Blick auf die Dokumentation, welche eine komplette Auflistung aller Elemente und deren Attribute beinhaltet.
Zu guter Letzt ist es eine gute Idee die megazine.xml-Datei zu validieren, um Tippfehler und Syntaktische Fehler festzustellen. Einen guten Validierungsservice finden Sie z.B. hier.