Einleitung
 Was bringt dieses Tutorial?



Aufbau
Planung
Beispiel
Basis erstellen
Action Script
Module erstellen
Schluss


Aussichten
 Was kann man damit machen
 Wo im Internet kann man das sehen
 Das FLA zum Beispiel downloaden

Was bringt dieses Tutorial?

Der Zweck dieses Tutorials ist es dem Flasher zu zeigen wie man mit systematischem Vorgehen eine interessante Internetseite aufbauen kann. Vor allem geht es hier darum das Prinzip der Verknuepfung mehrerer unanbhangiger Module zu beschreiben. Es kann zum Beispiel sehr nuetzlich sein wenn mehrere Entwickler an einem Projekt arbeiten. Oder wenn ein Flasher seine Seite nach und nach ausbauen will, ohne dabei das Ganze umstellen zu muessen.

Eine elegante Methode die Sache sauber strukturiert zu halten, ist die Aufteilung eines grossen Projektes in mehrere Module. Die Skizze stellt vereinfacht den Grundgedanken des Systems dar. Auf ein spezielles Grundgeruest (Basis) werden einzelne Teile (Module) aufgehangen. Deren Anzahl sowie inhaltlicher Zusammenhang ist dabei nicht so wichtig.

ESCARION.DE benutz diese Struktur um aktuelle Experimente staendig in einem etablierten System zu veroeffentlichen.


Planung

 Jedes Projekt sollte mit einer Planungsphase beginnen. Und gerade beim Herausarbeiten komplizierter Systeme sollte man um so mehr Wert auf gruendliche Vorueberlegung legen. Es muessen nicht alle Einzelheiten bedacht werden, aber eine grundsaetzliche Richtung sollte schon feststehen! Es ist immer gut eine Check-Liste mit den wichtigsten Angaben zu erstellen. In unserem Beispiel koennte sie so aussehen:

1. Gesamtbildschirmgroesse (600x300)
2. Anzahl angezeigter Module (3)
3. Modulenbreite (200x300)
4. Steuerung des Ladevorgangs (mit AS)
5. Preloader (im jeweiligen Modul integriert)
6. ....

Kommen wir doch einfach mal zu unserem Beispiel,dann wird einiges deutlicher erscheinen.

Ein einfaches Bespiel
Stellen wir uns folgendes vor: wir muessen eine Flash Seite fuer die Jazz Band "Jazzmood" erstellen. Sie soll mindestens drei Teilbereiche beinhalte: Fotos von der Band, Presse Artikel und aktuelle Tour Daten. Also etwa so:

Die sichtbare Flaeche wird hier 600x300 px gross sein, jedes der drei Module bekommt 200x300 px. In der Basis-Flash Datei ist der Action Script versteckt, der den Ladevorgang steuert. Beim Laden wird in jedem Fenster der Preloader des jeweiligen Teils angezeigt - dies ist die einfachste Moeglichkeit eine Ladeanzeige einzubauen. Inhalte der Einzelteile haben keinen Einflus auf den Aufbau der Seite. (Das muss keineswegs so bleiben. Es ist durch aus denkbar dass die Module in einer bestimmten Reihenfolge geladen werden muessen. Andere Zusammenhaenge sind ebenfalls denkbar )

Basis erstellen
Als erstes werden wir die Basis erstellen. Dazu oeffnen wir Flash, und gehen in 'Datei' auf 'Neu' . In 'Modifizieren' ,'Film' soll die Groesse auf 600x300 gestellt werden.

Der Trick des Reinladens von Modulen besteht darin einzelne Teile in vorgefertigte leere auf der Buehne liegende Filmsequenzen reinzuschicken. Die Anzahl dieser leeren Instanzen muss gleich der Anzahl der Module sein. (wichtig ist die Unterscheidung zw Symbolen und Instanzen.Die Symbole liegen in der Bilbiothek und koennen beliebig unterschiedlich sein. Instanzen dagegen sind "Auf die Buehne gezogene Symbole". Sie untersheiden sich nur in der Groesse, Position, Farbe und Skalierung .Wird das Symbol in der Bibliothek veraendert, so betrifft diese Aenderung alle Instanzen dieses Symbols auf der Buehne - in allen Ebenen und Frames.) Damit jede Instanz auch individuell ansteuerbar ist, muss ihr ein eindeutiger Name zugewiesen sein. (gleich mehr dazu)

Um ein leeres Symbol herzustellen drueck Ctrl-F8. Der Name des Symbols ist vollkommen unwichtig (nicht verwechseln mit dem Namen der Instanz), in diesem Tutorial heisst es "Kreuz".

Jetzt muessen wir drei mal (Anzahl der Module) die Instanz vom Symbol 'Kreuz' auf der Buehne platzieren und benennen. Dazu reicht es das Symbol aus dem Bibliothek-Fenster (Ctrl-L) per Drag and Drop auf die Buehne zu ziehen. Jedes der gerade eben entstandenen Instanzen bekommt einen unverwechselbaren Namen. Waehle jede einzelne Instanz aus und gebe im Eigenschaften-Fenster "position1", "position2" und "position3" ein.

Bild 1: Benennung

Fuer die richtige Positionierung ist es nuetzlich zu wissen dass Flash die obere linke Ecke unseres Moduls auf den Mittelpunkt des Symbols legt, in das es hineingeladen wird. Skizze 3 soll es verdeutlichen.

Die rote Umrandung symbolisiert die Groesse unseres Moduls.

Skizze 4 zeigt wie die drei Instanzen angeordnet sein muessen.

Damit ist die Basis fast fertig, es muessen nur noch die wenigen Zeilen Action Script einfuegt werden.

Action Script
Action Script sorgt dafuer dass alle Module auf den richtigen Platz kommen. Dazu muss es in den ersten Frame der Hauptzeitleiste platziert werden. (egal in welche Ebene):

"modul1.swf" ist der DateiName unseres Moduls, "position1" ist der Instanz-Name der Zielinstanz. Wichtig ist dass alle Flash Dateien im selben Ordner liegen, sollte es nicht der Fall sein muesste man die Adressierung aendern (z.B. loadMovie ("src\flash\modul1.swf", "position1");

Bild 2: Action Script

so koennte es aussehen! jetzt nur noch die Datei unter irgendeinem Namen exportieren, z.B "basis.swf" (Datei - Film Exportieren)



Module erstellen
Beim Erstellen der Module ist die Phantasie der Entwickler gefragt. Hier geht es vor allem um eine grafisch anspruchsvolle Darstellung vorgegebener Inhalte. Viel falsch machen, kann man hier nicht. Es sind nur ein paar Anforderungen zu beachten. In unserem Beispiel ist die sichtbare Flaeche eines Moduls auf 200x300 px begrenzt und der Dateiname ist modul1.swf (bzw. 2, 3)

Schluss
Nachdem alle Einzelteile bereit liegen, steht einer Veroeffentlichung im Internet nichts mehr im Wege. Im HTML Code der Seite soll nur die basis.swf eingebunden sein. Alle anderen Dateien werden automatisch reingeladen.

Aussichten

Die Idee die ich in diesem Tutorial vorgestellt habe ist in ESCARION.DE massiv eingesetzt. So lassen sich zum Beispiel lange Ladezeiten auf mehrere Module verteilen, oder nicht genutzte Information gar nicht erst laden! Gestaltungsmoeglichkeiten sind vielfaeltig, lassen Sie sich inspirieren und entwickeln Sie Ihre eigene Ideen.

escarion
abiflash v.1
funfu
praystation
onyro
amontobin
ultrashock

Zu dem Beispiel gibt es auch noch das passende FLA (Die Quelldatei fuer Flash). Zum Download klick hier (40 kb)