Erstellen einer HTML-Seite mit eingebetteten FLASH-Animationen

Hausarbeit zum Projekt

ERSTELLEN DER ONLINE-VERSION EINES ARTIKELS

Sommersemester 2006

Friedrich-Schiller-Universität Jena

vorgelegt von

Christiane Topp Matrikel-Nr. 67302

Lehramt Gymnasium Informatik/Biologie 6. Fachsemester

12. Oktober 2006

II

Kurzzusammenfassung In dieser Hausarbeit wird das Vorgehen beim Erstellen einer HTML-Seite dokumentiert. Zusätzlich wir der Leser anhand diverser Lektionen an die Erstellung einer FLASH-Animation herangeführt. Dabei werden allgemeine Grundlagen von HTML und FLASH angesprochen, sowie konkrete Beispiele aus der von der Autorin erstellten Online-Version der Antrittsvorlesung von Prof. M. Fothe erläutert. Demzufolge ist die vorliegende Arbeit als eine Art Handbuch zu verstehen, die Anfängern den Einstieg in die Thematik erleichtern kann.

III

Inhaltsverzeichnis

1. Einleitung _____________________________________________________________ 1

2. HTML________________________________________________________________ 2 2.1 Was ist HTML?_____________________________________________________ 2

2.2 Der HTML-Editor ___________________________________________________ 2

2.3 Allgemeiner Aufbau einer HTML-Datei__________________________________ 3

2.4 Formatierung von Text _______________________________________________ 4

2.5 Listen_____________________________________________________________ 5

2.6 Tabellen___________________________________________________________ 6

2.7 Verweise (Links)____________________________________________________ 7

2.8 Grafiken___________________________________________________________ 8

2.9 Cascading Style Sheets (CSS)__________________________________________ 9

2.10 Grundregeln der HTML-Programmierung _______________________________ 11

2.11 Darstellung in verschiedenen Browsern _________________________________ 12

3 FLASH ______________________________________________________________ 13 3.1 Was ist Flash? _____________________________________________________ 13

3.2 Arbeitsumgebung __________________________________________________ 13

3.3 Grafiken__________________________________________________________ 15

3.4 Animationen ______________________________________________________ 16

3.5 Schaltflächen ______________________________________________________ 17

3.6 Action Script ______________________________________________________ 19

3.7 Einbinden von Flash in eine HTML-Datei _______________________________ 20

Glossar ___________________________________________________________________ I

Literaturverzeichnis _______________________________________________________ II

Sonstige Quellen __________________________________________________________ II

IV

Abbildungsverzeichnis Abbildung 1: Grundgerüst einer HTML-Datei................................................................................. 3 Abbildung 2: Kopf der Datei avl_fothe.html..................................................................................... 3 Abbildung 3: Erzeugen eines Absatzes / Umformung von Umlauten............................................... 4 Abbildung 4: Aufzählungsliste ......................................................................................................... 5 Abbildung 5: Tabelle zur Ausrichtung von Elementen auf einer Seite............................................. 6 Abbildung 6: mittels einer Tabelle ausgerichtete Elemente............................................................... 6 Abbildung 7: externer und interner Verweis ..................................................................................... 7 Abbildung 8: Verweis mit Grafik anstelle von Verweistext.............................................................. 7 Abbildung 9: Definition der Funktion „FensterOeffnen“.................................................................. 7 Abbildung 10: Verweis innerhalb des selben Dokuments................................................................. 8 Abbildung 11: Verweis auf eine E-Mail-Adresse.............................................................................. 8 Abbildung 12: Einbinden einer Grafik .............................................................................................. 8 Abbildung 13: CSS-Datei................................................................................................................... 9 Abbildung 14: Einbinden einer Stylesheet-Datei in ein HTML-Dokument...................................... 10 Abbildung 15: Anwendung der mittels CSS definierten Tags........................................................... 10 Abbildung 16: Verwendung von Stylesheets über ein Attribut......................................................... 11 Abbildung 17: Benutzeroberfläche von Flash.......................................................………………… 13 Abbildung 18: Bearbeitung einer Schaltfläche......................................................………………… 18 Abbildung 19: Aktionsfenster................................................................................………………… 19 Abbildung 20: Schaltflächenanimation..................................................................………………… 20 Abbildung 21: Einbinden von Flash in eine HTML-Datei....................................………………… 21

1

1. Einleitung Das Thema Internet hat in den letzten Jahren so viel öffentliches Interesse gefunden, wie kaum ein anderes Thema (vgl. [1]). Laut dem statistischen Bundesamt Deutschland stieg die Zahl der Haushalte mit Internetzugang auch in den letzten drei Jahren rapide an. Mit mehr als 50% an Internet-Nutzern nähert sich die Bundesrepublik langsam den führenden Staaten Japan und USA an (vgl. [6]). Dabei werden die Möglichkeiten des Internets in diversen Anwendungsbereichen genutzt. Zu nennen wären unter anderem Rechercheangebote (z.B. Suchmaschinen), Bereitstellung von Informationen und Wissen, Kommunikation und der elektronische Handel. Grundlage für die Bereitstellung dieses breiten Dienstleistungsangebotes ist die Erstellung von Web-Seiten. In dieser Hausarbeit soll der Anfänger an die Grundlagen der Erstellung von Web-Seiten mittels HTML herangeführt werden. Dabei wird die Seitenbeschreibungssprache nicht bis ins Detail vorgestellt – dafür gibt es ausreichend hochwertige Literatur. Vielmehr soll anhand eines konkreten Beispiels, in diesem Fall die Umsetzung eines Artikels in eine Online-Version, die Herangehensweise an dieses konkrete Problem thematisiert werden. Die Hausarbeit kommt somit einer Art Handbuch zur Erstellung einer einfachen Seite gleich. Vertiefend wird auf die Entwicklung von Animationen und deren Einbindung in HTML-Seiten eingegangen. Animationen machen eine Seite lebendiger und können oft zum besseren Verständnis eines Sachverhaltes beitragen. Zur Anwendung kommt in diesem Fall das Programm FLASH 8.0 von Macromedia.

2

2. HTML 2.1 Was ist HTML? HTML steht für HyperText Markup Language. Hypertext ist im Vergleich zu normalem Text, den man sequentiell vom Anfang bis zum Ende durchliest, nicht rein linear. Hypertext ist ein Text mit vielen Verweisen, die zu weiteren „informationellen Einheiten“ [05, SelfHtml/intro/hypertext/begriffe.htm#einheiten] führen. Die Bezeichnung Hypertext geht auf Ted Nelson1 zurück. HTML ist eine Seitenbeschreibungssprache und stellt das Basisformat für Web-Seiten im WWW dar. Das heißt, Dokumente, die im WWW übertragen und vom Browser dargestellt werden sollen, sind in HTML codiert. Die möglichen Verweise auf andere Dokumente sind hierbei mittels sog. Hyperlinks realisiert. HTML besteht aus einer Reihe von Befehlen, die man dem ASCII-Text hinzufügt, um ihn zu formatieren. Somit ist HTML ist eine Sprache zur Strukturierung von Texten, wobei aber auch die Möglichkeit besteht, Grafiken und multimediale Inhalte in Form einer Referenz einzubinden und in den Text zu integrieren. Erstmals spezifiziert wurde HTML im Jahr 1990 im Rahmen des Projektes „World Wide Web“ von Tim Berners-Lee zusammen mit dem Kommunikationsprotokoll des WWW, HTTP genannt, und der Spezifikation der Adressierung im Web – die sogenannten URIs (URI = Universal Resource Identifier, universeller Quellenbezeichner). Für die Standardisierung von HTML ist das World Wide Web Consortium2 (W3C) zuständig. HTML-Spezifikationen gibt es in den Versionen 1.0, 2.0, 3.2 und 4.0 und 4.01. Die jeweils aktuelle Version HTML 4.x ist auf den Seiten des W3-Konsortiums zu finden. Neben dem klassischen HTML gibt es eine Weiterentwicklung von HTML, die auf XML basiert und mit XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache) bezeichnet wird. Von XHTML gibt es mittlerweile auch schon zwei Versionen: eine Version 1.0 und eine Version 1.1. Zwischen HTML und XHTML gibt es diverse Unterschiede im Detail. Hilfe zu diesem Thema findet man u.a. auf den Seiten von SELFHTML unter [05]. 2.2 Der HTML-Editor Es kann prinzipiell zwischen zwei verschiedenen Arten von HTML-Editoren unterschieden werden. Da HTML ein sogenanntes Klartextformat ist, können HTML-Dateien mit jedem beliebigen Texteditor, der Daten als reine Textdateien abspeichern kann, bearbeitet werden. Texteditoren mit speziellem Highlighting (Syntax-Hervorhebung) erhöhen den Überblick. Zusammengehörige Strukturen werden farbig markiert. Dies trägt zur Vermeidung von Flüchtigkeitsfehlern, wie das Weglassen von Klammern oder - speziell auf HTML bezogen - von schließenden Tags, bei. Neben den textbasierten Programmen gibt es sogenannte WYSIWYG-Editoren. Die Abkürzung WYSIWYG steht für What You See Is What You Get („Was du siehst, ist, was du bekommst.“). Diese Art von Editoren erlauben das „Zusammenklicken“ von HTML-Seiten, ohne, dass man konkrete Befehle eingeben muss. Dabei erscheint die Seite beim Bearbeiten genau so, wie sie später im Browser angezeigt

1 Theodor Holm Nelson (geboren 1937), amerikanischer Soziologe, Philosoph und Pionier der Informationstechnologie, prägte den Begriff im Jahr 1963. 1960 gründete er das Projekt Xanadu mit den Ziel ein Computernetzwerk mit einer einfachen Nutzerschnittstelle zu kreieren. Es kam jedoch nie zum entscheidenden Durchbruch. „Damit hat Ted Nelson die Technologie des World Wide Web schon 25 Jahre vor dessen Entstehen vorweggenommen, und seine Konzepte sind zum Teil ausgereifter.“ [05] 2 Das W3C wurde 1994 von Tim Berners-Lee , mit dem Auftrag alle Möglichkeiten des Web zu erschließen, gegründet. Es setzt sich aus etwa 400 Organisationen zusammen und wird von einem firmenneutralen technischen Team geleitet.

3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>New Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> </body> </html>

<head> <title>Unterricht - bald nur noch mit Computer?</title> <link rel="stylesheet" media="screen" type="text/css" href="./CSS/formate.css"> <link rel="stylesheet" media="print, embossed" type="text/css" href="./CSS/druck.css"> <script type="text/javascript"> function FensterOeffnen (Adresse) { Fenster1 = window.open(Adresse, "Zweitfenster", "width=440,height=410"); Fenster1.focus(); } </script> </head>

wird. Somit braucht sich der Ersteller der Seite ausschließlich auf das Design zu konzentrieren. Die meisten WYSIWYG-Editoren verfügen jedoch über eine Möglichkeit, den erzeugten Quelltext direkt zu bearbeiten, um Änderungen oder Ergänzungen einarbeiten zu können. Für die Erstellung der Seite im Rahmen dieses Projektes wurde der Quelltexteditor „Weaverslave“ für Windows benutzt. Dabei handelt es sich um ein Freeware-Produkt. Die aktuelle Version dieses Editors kann via Internet unter [08] heruntergeladen werden. 2.3 Allgemeiner Aufbau einer HTML-Datei Jede HTML-Datei hat prinzipiell die gleiche Struktur. Nach der Dokumenttyp-Deklaration beginnt die eigentliche Seite immer mit dem Tag <html> und endet mit dem Tag </html>. Zwischen diesen beiden Tags ist der Kopf (head) und der Körper (body) der Seite platziert. Sowohl der Kopf, als auch der Körper werden von den entsprechenden Tags (<head>...</head> bzw. <body>...</body>) flankiert. Folgendes Schema spiegelt den allgemeinen Aufbau wieder:

Der in diesem Projekt genutzte Editor stellt das Grundgerüst beim Anlegen einer neuen HTML-Datei automatisch zur Verfügung. Die erste Zeile ist die Dokumenttyp-Deklaration. Diese gibt die verwendete HTML-Version an und wird benötigt, damit der Browser, der diese Seite darstellen soll, den Quelltext in der richtigen Art und Weise interpretieren kann. Innerhalb des Quelltextes sollte man sich folglich auch an die Spezifikation der angegebenen Version halten. Die im Kopf der Seite angegeben Informationen sind später nicht direkt auf der Seite zu sehen. Üblicherweise findet man dort die Angabe des Titels. Dieser erscheint später in der Titelleiste des Browsers. In Abbildung 2 ist der Kopf der Seite der, in dieser Ausarbeitung näher betrachteten, Online-Version der Antrittsvorlesung von Prof. M. Fothe dargestellt.

Abb. 1: Grundgerüst einer HTML-Datei

Abb. 2: Kopf der Datei avl_fothe.html

4

Der Titel ist zwischen den beiden Tags <title> und </title> platziert und lautet in diesem Fall: „Unterricht – bald nur noch mit Computer?“. Neben der Titelangabe wurden im Kopf der HTML-Datei zusätzlich zwei Verweise auf CSS-Dateien und eine Methode in JavaScript angegeben. Diese zusätzlichen Angaben werden zu einem späteren Zeitpunkt näher erläutert. Alle Informationen, d.h. der gesamte Text der HTML-Seite sowie alle Bilder und Animationen, die direkt auf der Seite angezeigt werden sollen, werden im Körper der HTML-Datei platziert. Die in den nächsten Kapiteln erläuterten Grundlagen von HTML sind auf die Elemente des Körpers, also auf alles zwischen den beiden Tags <body> und </body>, anzuwenden. 2.4 Formatierung von Text Der Großteil des Artikels, der in dieser Projektarbeit in eine Online-Version umgewandelt werden sollte, besteht aus Text. Dieser Text kann nicht eins zu eins in die HTML-Datei übernommen werden. Kopiert man Fließtext einfach in eine HTML-Datei, werden weder Leerzeichen am Zeilenanfang oder mehrere aufeinanderfolgende Leerzeichen, noch Zeilenumbrüche oder Absätze übernommen. Möchte man einen Zeilenumbruch an einer bestimmte Stelle erzwingen, ist die Eingabe des Tags <br> (engl.: break) nötig. Ohne Angabe von definierten Zeilenumbrüchen, wird der Text automatisch umgebrochen. Diese Tatsache ermöglicht das Anzeigen des Textes mittels verschiedener Browser in unterschiedlich großen Fenstern auf unterschiedlich dimensionierten Bildschirmen. Der automatische Zeilenumbruch erfolgt jeweils am Zeilenende. Ein Absatz lässt sich mittels des öffnenden Tags <p> und des schließenden Tags </p> erzeugen. Das „p“ steht hierbei für das englische Wort „paragraph“, was übersetzt „Absatz“ heisst.

Die Abbildung 3 zeigt die Umrahmung eines Absatzes durch <p> und </p>. Des Weiteren fällt in der Abbildung auf, dass alle deutschen Umlaute („ä“, „ö“, „ü“) durch entsprechende Zeichenfolgen ersetzt wurden. Diese Umformung gewährleistet die korrekte Darstellung der Umlaute in allen Browsern. Auch Sonderzeichen, wie „&“, „>“, „<“ und das deutsche „ß“ müssen umgeformt werden. Tabellen mit den wichtigsten Entsprechungen sind in allen Büchern zu diesem Thema zu finden. Der hier zum Einsatz gekommene Editor „Weaverslave“ wandelt die Umlaute und Sonderzeichen automatisch um. Neben der Gliederung in Absätze kann Text strukturiert werden mittels Überschriften und Hervorhebungen von Textpassagen. Eine Überschrift erster Ordnung wird beispielsweise von den Tags <h1> (engl.: headline) und </h1> umrahmt. In HTML kann man standardmäßig Überschriften bis zur Ebene 6 – also <h6>...</h6> angeben. Die Schriftgröße verkleinert sich in jeder Ebene. Wie die Überschrift im konkreten Browser dargestellt wird, unterliegt jedoch den Einstellungen des entsprechenden Browsern. Um ein einheitliches Bild zu erzeugen, können Überschriften auch mittels Stylesheets formatiert werden. Die Verwendung von Stylesheets wird in einem nachfolgenden Kapitel thematisiert. Das Hervorheben bestimmter Textpassagen ist mit einer großen Anzahl sogenannter physischer Auszeichner möglich. Diese bestimmen präzise, wie der Browser den Text wiedergeben soll. Es gibt keine Interpretationsmöglichkeiten. Die wohl bekanntesten

<p>In der Ausarbeitung zur &ouml;ffentlichen Antrittsvorlesung des Autors am 8. Oktober 2004 an der Friedrich-Schiller-Universit&auml;t Jena geht es um Ziele und Inhalte des Informatik- und Mathematikunterrichts, um den Computereinsatz im Fachunterricht und um die Forschung der Casio-Stiftungsprofessur f&uuml;r Didaktik der Informatik/Mathematik.</p>

Abb. 3: Erzeugen eines Absatzes / Umformung von Umlauten

5

Auszeichner formatieren den Text fett (<b></b>) oder kursiv (<i></i>). In Tabelle 1 sind alle zur Verfügung stehenden Elemente dieser Art aufgelistet.

Element (Notation) Bedeutung <b>...</b> zeichnet einen Text als fett aus <i>...</i> zeichnet einen Text als kursiv aus <tt>...</tt> zeichnet einen Text als dicktengleich formatiert aus (tt = Teletyper =

Fernschreiber) <u>...</u> zeichnet einen Text als unterstrichen aus <strike>...</strike> zeichnet einen Text als durchgestrichen aus <s>...</s> zeichnet einen Text als durchgestrichen aus <big>...</big> zeichnet einen Text größer als normal aus <small>...</small> zeichnet einen Text kleiner als normal aus ^... zeichnet einen Text als hochgestellt aus _... zeichnet einen Text als tiefgestellt aus

2.5 Listen In Texten, so auch in dem betrachteten Artikel, kommen häufig Aufzählungen vor. Diese können in HTML mittels Listen verwirklicht werden. Dabei wird zwischen ungeordneten (ul = unordered list) und geordneten (ol = ordered list) Listen unterschieden. Die ungeordneten Listen werden mit dem Tag <ul> eingeleitet und mit dem Tag </ul> abgeschlossen. Einzelne Listenpunkte werden von den Tags <li> und </li> umrahmt. Jeder Listenpunkt wird im Browser mit einem Aufzählungszeichen, wie z.B. einem Punkt oder Anstrich, dargestellt. Die geordneten Listen sind vom Prinzip her genauso aufgebaut, wie die ungeordneten Listen. Anstelle des einleitenden Tags <ul> muss jedoch das Tag <ol> verwendet werden. Demzufolge ist auch als abschließendes Tag </ol> zu gebrauchen. Im Browser werden die Listenpunkte durchnummeriert angezeigt. Ein Verschachteln mehrere Listen ist möglich. Abbildung 4 ist aus dem Quelltext des Online-Artikels entnommen und zeigt eine ungeordnete Liste. Aufgrund der Tatsache, dass jeder Browser die Liste, je nach seinen Einstellungen, unterschiedlich darstellen kann, wurde diese Liste mit Hilfe von Stylesheets formatiert. Im Listenkopf ist deshalb zusätzlich die Zeile style="list-style-type:none" eingefügt worden. Mit dem Attribut „list-style-type“ kann das Aussehen des Aufzählungszeichens bzw. der Nummerierung in einer geordneten Liste individuell angepasst werden. Der Attributwert „none“ gibt an, dass in dieser Liste die Aufzählungszeichen weggelassen werden sollen.

Die einzelnen Listenpunkte sind im dargestellten Beispiel gleichzeitig als Verweise zu, innerhalb des Dokuments definierten, Ankern deklariert. Die Möglichkeiten der Schaffung von Verknüpfungen innerhalb eines HTML-Dokuments oder zu anderen Seiten wird in Kapitel 2.7 erläutert.

Tab. 1: physische Auszeichnung im Text (vgl. [05]: HTML-Elemente für physische Auszeichnung im Text)

<ul style="list-style-type:none"> <li><a href="#Einf&uuml;hrung">Einf&uuml;hrung</a></li> <li><a href="#Thesen">Zentrale Thesen</a></li> <li><a href="#Kommunikation">Kommunikation zwischen Sch&uuml;ler und Computer</a></li> <li><a href="#Kulturtechnik">Rechnen als Kulturtechnik</a></li> <li><a href="#Mathematikunterricht">Computer im Mathematikunterricht</a></li> <li><a href="#Informatikunterricht">Ziele und Inhalte des Informatikunterrichts</a></li> <li><a href="#Quicksort">Zeit- und Speicherverhalten von Quicksort</a></li> <li><a href="#Ausblick">Ausblick</a></li> </ul>

Abb. 4: Aufzählungsliste

6

2.6 Tabellen Neben Listen tragen auch Tabellen zur übersichtlichen Gestaltung von Text bei. Bei der Erstellung von Webseiten mit HTML kommt den Tabellen noch eine weitere wichtige Bedeutung zu. Nutzt man eine Tabelle ohne Rahmen und Gitternetzlinien, wird sie teilweise als gestalterisches Mittel eingesetzt, indem einzelne Elemente der Seite, wie Text, Bilder oder Animationen, sauber ausgerichtet werden. Abbildung 5 zeigt den Quellcode für eine dreispaltige Tabelle mit einer Zeile. Aus dem Beispiel wird ersichtlich, dass eine Tabelle mit dem öffnenden Tag <table> und dem schließenden Tag </table> umrahmt wird. Das Attribut „border“ im einleitenden Tag gibt die Breite des Rahmens bzw. der Gitternetzlinien in Pixeln an. Da dem Attribut in diesem Fall der Wert Null zugewiesen wurde, erscheint die Tabelle ohne Rahmen. Die zwei wichtigsten Elemente einer Tabelle sind die Zeilen und die Spalten. Eine neue Zeile wird mit dem Tag <tr> (engl.: table row) eingeleitet. Anschließend folgt die Definition der Spalten mittels <td> (engl.: table data) und </td>. Der Inhalt der Spalten wird zwischen den beiden Tags platziert. Nachdem alle Spalten angegeben wurden, weist das Tag </tr> das Zeilenende aus. In der Abbildung wurde der eigentliche Text und der Quellcode für die Animation aus Gründen der Übersichtlichkeit durch Kommentare ersetzt.

Die Abbildung 6 stellt dar, wie die oben im Quellcode angegebene Tabelle im Browser angezeigt wird. Dabei fällt auf, dass der Text den größten Teil der Seitenbreite einnimmt, die Spalten also nicht die gleiche einheitliche Breite haben. Diese Aufteilung der zur Verfügung stehenden Breite wurde mittels der Vorabdefinition der Tabellenspalten mit <colgroup> (engl.: column group) realisiert. Für jede Tabellenspalte definiert das <col>-Tag mit dem Attribut „width“ die Spaltenbreite prozentual zur Breite der Gesamttabelle. So werden auch bei verschiedenen Anzeigemodalitäten die Seitenverhältnisse beibehalten und es ergibt sich ein geordnetes Erscheinungsbild.

<table border="0"> <colgroup> <col width="80%"> <col width="5%"> <col width="15%"> </colgroup> <tr> <td> <--! ***Text*** --> </td> <td> &#160; </td> <td align="right"> <--! ***Animation*** --> </td> </tr> </table>

Abb. 5: Tabelle zur Ausrichtung von Elementen auf einer Seite

Abb. 6: mittels einer Tabelle ausgerichtete Elemente

7

2.7 Verweise (Links) Dieser Abschnitt behandelt das Element, was einen normalen Text erst zum Hypertext macht - den Verweis (sog. Hyperlink). In einer HTML-Datei kann auf andere HTML-Dateien des gleichen Projektes (interner Verweis), aber auch auf beliebige Seiten eines anderen Teilnehmers des World Wide Web (externer Verweis) verwiesen werden. Dabei ist der Verweis immer gleich aufgebaut. Abbildung 7 veranschaulicht die Verweistechnik.

Es sind zwei verschiedene Referenzen zu sehen. Die erste verweist auf eine externe www-Seite. Die zweite stellt einen internen Verweis dar. Der Verweis wird mit Hilfe des Anker-Tags, dass durch das Präfix-Suffix <A></A> (engl.: anchor) gekennzeichnet ist, definiert. Das angegebene Attribut href steht für „hyper reference“ und macht aus dem Element erst einen echten Verweis. Als Wert enthält es die URL der Seite, die Ziel des Hyperlinks sein soll. Im Beispiel eins handelt es sich um eine absolute Pfadangabe. Im zweiten Beispiel bot sich die Angabe eines relativen Pfades an, da das Ziel des Verweises innerhalb des selben Projektes lokal zu finden ist. Zwischen dem öffnenden und schließenden Tag des Anchor-Elements, also zwischen <a> und </a> ist der Text zu notieren, der später im Browser als Hyperlink erscheint. In den beiden Beispielen wäre das einmal der Name „H. Zemanek“ und die Zahl „1“, die im Text eine Fussnote darstellt. Anstelle des Verweistextes kann das Anchor-Element auch eine Grafik enthalten (siehe Abb. 8).

Die soeben beschriebenen Angaben reichen absolut aus, um einen Link zu codieren. Es besteht jedoch die Möglichkeit, mittels verschiedener Attribute Anpassungen nach eigenen Vorstellungen vorzunehmen. Das Attribut target im ersten Verweisbeispiel definiert ein Zielfenster für den Verweis. Der Wert „_blank“ bedeutet dabei, das der Verweis in einem neuen Fenster geöffnet werden soll. Fehlt dieses Attribut bei der Definition eines Verweises, wird das Ziel des Verweises automatische im selben Fenster angezeigt. Das zweite Beispiel in Abb.7 und der Verweis in Abb.8 enthalten anstelle des Attributes target den Aufruf einer selbst definierten Funktion mit dem Namen „FensterOeffnen“ (siehe Abb. 9). Die Definition der Funktion ist im Kopf der HTML-Datei (siehe Abb. 2) zu finden. Auch diese Funktion gibt ein Zielfenster für den Verweis an. Der Grund für die Nutzung der Funktion in diesem Fall, ist die Möglichkeit, die Größe des zu öffnenden Fensters festlegen zu können.

<a href="http://www.zemanek.at/" target="_blank">H. Zemanek</a> <a href="./html/fussnote1.html/" onclick="FensterOeffnen(this.href); return false">1</a>

Abb. 7: externer und interner Verweis

<a href="./Bilder/vier.gif" onclick="FensterOeffnen(this.href); return false"><img src="./Bilder/4.jpg" width="106" height="96" border="0"></a>

Abb. 8: Verweis mit Grafik anstelle von Verweistext

<script type="text/javascript"> function FensterOeffnen (Adresse) { Fenster1 = window.open(Adresse, "Zweitfenster", "width=440,height=410"); Fenster1.focus(); } </script>

Abb. 9: Definition der Funktion „FensterOeffnen“

8

Zusätzlich zu der beschriebenen Nutzung externer und interner Verweise, besteht die Möglichkeit, Anker innerhalb eines Dokuments zu setzten und diese dann mittels eines Verweises anzuspringen. So wird das Navigieren in einem Dokument vereinfacht, welches nicht vollständig im Browserfenster angezeigt werden kann. Von diesem technischen Mittel wurde auch in der vorliegenden Online-Antrittsvorlesung gebrauch gemacht (siehe Abb. 10). Wieder kommt das a-Element zum Einsatz. Dabei wird mit Hilfe der Attribute name und href bestimmt, was Quelle und was Ziel des Hyperlinks ist. Ziel des Linkes ist genau die Stelle im Text, an der der Anker gesetzt wurde. Das a-Element im Zusammenspiel mit dem Attribut name erzeugt diesen Anker. Der Ankername ist frei wählbar. Zwischen <a name="ankername"> und </a> muss das Sprungziel, d.h. die spezifische Stelle im Text, die angesprungen werden soll, angegeben werden. Im vorliegenden Beispiel dienen die Überschriften der einzelnen Text-Absätze als Sprungziel. Der Verweis auf den Anker hat den gleichen Aufbau, wie die Referenzen in den vorangegangenen Beispielen. Als Sprungziel wird jedoch keine URL angegeben, sondern das Rautenzeichen („#“) gefolgt vom Namen des Ankers. Dabei ist zu beachten, dass der Ankername sowohl in der Definition des Ankers, als auch im Verweis auf diesen Anker syntaktisch exakt gleich sein müssen. Ein weiteres Anwendungsbeispiel für das a-Element ist das Einbinden von E-Mail-Adressen (siehe Abb. 11). Dabei folgt der Aufbau des Befehls exakt dem gleichen Muster, wie bei Verweisen auf andere WWW-Seiten. Das href-Attribut enthält die Angabe des Protokolls (mailto:) gefolgt von der E-Mail-Adresse, die angesprungen werden soll. Zu beachten ist, dass im Gegensatz zu anderen Protokollen, wie http oder ftp, bei mailto: kein // verwendet wird.

2.8 Grafiken Eine schöne Möglichkeit, die Aussage einer Web-Seite bzw. eines Textes zu unterstreichen, ist das Einbinden von Grafiken. HTML stellt hierfür das <img>-Tag (engl.: image) zur Verfügung (siehe Abb. 12). Dabei wird auf die, im Browser darzustellende, Bilddatei verwiesen. Die Angabe der Referenz erfolgt mittels des Attributes src (engl.: source). Der Wert dieses Attributs entspricht wiederum einer relativen oder absoluten Pfadangabe.

Es ist zu empfehlen, die Breite und Höhe der Grafik anzugeben. Dies erfolgt, wie in Abbildung 12 ersichtlich, mit den beiden Attributen width und height, die als Werte die entsprechende Pixelzahl des Bildes enthalten. Ist die Größenangabe vorhanden, wird der benötigte Platz für das Bild während des Ladens der Datei freigehalten. Nachfolgende Inhalte

<a name="Einf&uuml;hrung">1. Einf&uuml;hrung</a> ... <a href="#Einf&uuml;hrung">Einf&uuml;hrung</a>

Abb. 10: Verweis innerhalb des selben Dokuments

<a href="mailto:fothe@minet.uni-jena.de">fothe@minet.uni-jena.de</a>

Abb. 11: Verweis auf eine E-Mail-Adresse

<img src="./Bilder/TuermeVonHanoi.gif" width="743" height="471" alt="Puck: T&uuml;rme von Hanoi">

Abb. 12: Einbinden einer Grafik

9

können somit bereits angezeigt werden, bevor die eingebundene Grafik vollständig am Bildschirm aufgebaut wurde. Laut [05] ebenfalls zu den Pflichtattributen zählend, ist das, auch in unserem Beispiel angegebene, Attribut alt. Es enthält als Wert einen Text, der das Bild ersetzt, wenn dieses aus irgendeinem Grund nicht im Browser angezeigt werden kann. Um die Ladezeiten einer HTML-Seite nicht unnötig zu verlängern, ist es dringend notwendig, darauf zu achten, dass die Dateigröße der eingebundenen Grafiken einen bestimmten Wert nicht übersteigt. Dabei spielt die Wahl des Dateiformates eine entscheidende Rolle. Im Web haben sich die Dateiformate „gif“, „jpeg“ und „png“ durchgesetzt. Diese komprimieren die Bilder und ermöglichen somit den komfortablen Einsatz des Gestaltungsmittels Bild bzw. Grafik. 2.9 Cascading Style Sheets (CSS) „Stylesheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente“3 Der Einsatz von Stylesheets bietet vielerlei Vorteile. Zum einen können alle Formatierungen zentral festgelegt werden und auf beliebig viele HTML-Dateien angewandt werden. Somit reduziert sich der Aufwand für Formatierungen einzelner HTML-Elemente enorm. Zum anderen ergibt sich daraus die Möglichkeit, Änderungen vornehmen zu können, ohne dass jede betroffene Datei einzeln überarbeitet werden muss. Abbildung 13 zeigt den Quellcode der CSS-Datei der in dieser Ausarbeitung betrachteten HTML-Seite. Die CSS-Datei kann, wie die HTML-Datei, in einem einfachen Texteditor erstellt werden. Editoren mit Syntaxhervorhebung erhöhen jedoch auch in diesem Fall die Übersichtlichkeit und erleichtern somit den Umgang mit den CSS-Befehlen. In der vorliegenden CSS-Datei werden die Eigenschaften vier prinzipiell verschiedener HTML-Elemente festgelegt.

Die ersten beiden Zeilen geben Formatierungen an, die für die ganze HTML-Seite im Allgemeinen zutreffen sollen. Sie gelten also für den Körper (body) der HTML-Datei. Darunter fallen die Hintergrundfarbe (background-color), die Schriftart (font-family) und Schriftgröße (font-size) sowie die Ausrichtung des Textes (text-align) und die Breite der 3 http://www.selfhtml\css\intro.htm

* DATEI: formate.css */ body {background-color:#FFFFFF; font-family:Arial, sans-serif; font-size:12pt; text-align:justify; margin-left:50px; margin-right:50px;} h1 { font:bold; font-size:20pt; margin-top:2.0em; padding-bottom: 0.5em; } h2 { font:bold; font-size:12pt; margin-top:2.0em; margin-bottom: 0.5em; } h3 { font:bold; font-size:12pt; margin-top:1.0em; } h4 { font:bold; font-size:10pt; margin-top:1.0em; } a:link { color:black } a:visited { color:#666666; } a:active { color:#D6D3CE; } #rahmen { border-width:1px; border-style:solid; border-color:black; padding-top:0.5em padding-bottom:0.5em; padding-left:0.9em; padding-right:0.9em; }

Abb. 13: CSS-Datei

10

Seitenränder (margin-left; margin-right). Die nächsten vier Zeilen definieren die Formatierung der verschiedenen Überschriftebenen (h1 bis h4). Somit ist es nicht mehr dem jeweiligen Browser überlassen, wie eine Überschrift ersten Grades dargestellt wird. Die CSS-Datei legt für die Überschriften der Ebene eins bis vier verbindlich die Art der Hervorhebung (font), die Schriftgröße (font-size) sowie die Abstände zum vorhergehenden und nachfolgenden Text (margin-top; margin-bottom) fest. Die nachfolgenden drei Zeilen definieren das Aussehen der Hyperlinks, genauer des im vorletzten Abschnitt ausführlich beschriebenen a-Elements. Dabei wird die Farbe (color) für Verweise zu noch nicht besuchten Seiten („a.link“), für Verweise zu bereits besuchten Seiten („a.visited“) und für Verweise, die gerade angeklickt werden („a.active“), festgelegt. Die letzte CSS-Definition enthält alle Eigenschaften für im Dokument verwendete Rahmen. Dazu gehört die Rahmendicke (border-width), der Rahmentyp (border-style), die Rahmenfarbe (border-color) sowie die Abstände des Textes innerhalb der Umrandung zum Rahmen (padding). Aus dem angeführten Beispiel wird ersichtlich, dass die Syntax der Befehle einer CSS-Definition immer dem gleichen Aufbau folgt. Zuerst wir das zu formatierende Element, auch als Selektor bezeichnet, genannt. Dann folgt in geschweiften Klammern die Definition der Formatierung. Dazu wird ein bestimmtes Attribut angegeben, worauf nach einem Doppelpunkt der Attributwert folgt. In den geschweiften Klammern können, durch Semikolon getrennt, mehrere Attribute mit ihren Werten definiert werden. Damit die in der CSS-Datei gemachten Angaben auch greifen, muss in der HTML-Datei ein Verweis auf diese definiert werden. Die Syntax dieses Verweises zeigt Abb. 14.

Die dargestellte Anweisung muss im Kopf der HTML-Datei, also zwischen den Tags <head> und </head>, platziert werden. Das Attribut href enthält hierbei die relative Pfadangabe zur gewünschten Datei. Wurde die CSS-Datei erfolgreich eingebunden, können die in ihr definierten Tags wie gewohnt angewendet werden, ohne dass zusätzliche Formatierungshinweise nötig sind. Die Formatierungen werden automatisch übernommen. Die einzelnen HTML-Elemente werden, wie in der CSS-Datei definiert, im Browser angezeigt. Abbildung 15 zeigt einige Beispiele, in denen die in der CSS-Datei definierten Tags in der HTML-Datei zum Einsatz kommen.

Zusätzlich zur Einbindung externer Stylesheets, besteht die Möglichkeit, Stylesheets auch direkt im Quelltext zu definieren (=interne Stylesheets). Aus Gründen der Übersichtlichkeit sollte von dieser Variante aber nur gebrauch gemacht werden, wenn nur wenige Element-Formatierungen vorgesehen sind. Die Definition des Stylesheets erfolgt in diesem Fall im Kopf der HTML-Datei und wird zwischen die Tags <style> und </style> eingebettet. Ansonsten entspricht die Syntax eines einzelnen CSS-Befehls der bereits beschriebenen Syntax in externen Stylesheets.

<link rel="stylesheet" media="screen" type="text/css" href="./CSS/formate.css">

<h1>Unterricht - bald nur noch mit Computer?</h1> <a href="mailto:fothe@minet.uni-jena.de">fothe@minet.uni-jena.de</a> <div id="rahmen"> <--! Inhalt des Rahmens --> </div>

Abb. 14: Einbinden einer Stylesheet-Datei in ein HTML-Dokument

Abb. 15: Anwendung der mittels CSS definierten Tags

11

Obwohl die definierten Stylesheets für alle Elemente des entsprechenden HTML-Dokuments gelten, besteht die Möglichkeit, ein Stylesheet einem bestimmten Tag über ein Attribut zuzuordnen. Abbildung 16 demonstriert diese Variante.

Somit kann in Einzelfällen von den allgemein definierten Formaten abgewichen werden. Jedoch erhöht sich der Aufwand, falls Änderungen vorgenommen werden müssen. Bei dieser Variante des Einsatzes von Stylesheets wird innerhalb des einleitenden HTML-Tags das Attribut style und dahinter die gewünschte Formatdefinition notiert. 2.10 Grundregeln der HTML-Programmierung Die vorangegangenen Kapitel sollten einige grundlegende strukturierende und gestalterische Elemente von HTML vorstellen. Dabei wurde das Repertoire an Möglichkeiten nur angerissen. Jedoch ist es selbst bei dieser geringen Auswahl nötig, sich Gedanken über die Anordnung und den differenzierten Einsatz der Elemente zu machen. Es gilt einige allgemein anwendbare Gestaltungsregel zu befolgen.

(1) Der Text sollte sich, der Lesbarkeit willen, vom Hintergrund abheben. Dass heisst es bietet sich dunkle Schrift auf hellem Hintergrund bzw. helle Schrift auf dunklem Hintergrund an.

(2) Überschriften strukturieren einen Text indem sie ihn in einzelne Abschnitte

unterteilen. Überschriften der selben Hierarchieebene sollten gleiche Formatierungen aufweisen.

(3) Jedoch sollte auf eine Beschränkung auf eine geringe Anzahl von verschiedenen

Schriftarten geachtet werden. Sonst hat die Übersichtlichkeit darunter zu leiden. (4) Farben sollten allgemein dem Stil der Seite angepasst werden. Zu grelle Farben

machen z.B. den Eindruck einer sonst konservativen Seite zunichte. (5) Bei der Gestaltung der Web-Seite sollte immer die Zielgruppe im Blick gehalten

werden. Private Homepages, Homepages eines Vereins oder gewerblich Homepages unterscheiden sich in ihren Anforderungen.

(6) Zu viele Hyperlinks verwirren den Nutzer. (7) Es sollte stets eine Kontaktperson angegeben werden.

<p style="font-size:10pt;"> **Text** </p> <ul style="list-style-type:square"> <li>**Erster Listenpunkt**</li> <li>**Zweiter Listenpunkt**</li> <li>**...**</li> ... </ul>

Abb. 16: Verwendung von Stylesheets über ein Attribut

12

Auch bei der Programmierung an sich empfiehlt es sich, einige Regeln zu beachten.

(8) Text zwischen öffnenden und schließenden Tags ist einzurücken. So können sich auch Personen, die nicht an der Codierung beteiligt waren, im Quellcode zurechtfinden und ggf. Anpassungen vornehmen.

(9) Kommentare erhöhen die Lesbarkeit.

(10) Um den Überblick zu wahren, ist es sinnvoll z.B. Grafikdateien von HTML-Dateien

zu trennen. Im vorliegenden Fall existiert je ein Ordner für HTML-Dateien, für FLASH-Animationen, für die CSS-Dateien und für Bilder.

(11) Die Webseite ist insgesamt so anzulegen, dass der Nutzer nicht unnötig lange warten

muss bis die Seite angezeigt wird. Dabei spielt v.a. das Einbinden von Grafiken eine Rolle. Die Höhe und Breite ist anzugeben, ein entsprechendes Format ist zu wählen. Ggf. sind die Auflösung, Farbenvielfalt oder die Abmessungen der Grafik anzupassen.

(12) Es sollte nicht für eine bestimmte Bildschirmauflösung geschrieben werden, da man

auf die Einstellungen beim Anwender keinen Einfluss hat. Aus diesem Grund sollten Breiten und Höhenangaben eher prozentual angegeben werden. So passt sich das Erscheinungsbild automatisch den vorherrschenden Begebenheiten an.

Auch diese Liste lässt sich fortsetzen. Allgemein sollten alle Techniken sinnvoll und angemessen eingesetzt werden. 2.11 Darstellung in verschiedenen Browsern Bevor eine Seite ins Netz gestellt wird, sollte sie mit verschiedenen Browsern getestet werden. Nicht alle Browser unterstützen jedes HTML-Element. Teilweise weichen sie von den Definitionen der Spezifikation ab. Die bekannten Browser Mozilla, Seamonkey und Firefox nutzen die Gecko-Engine zum rendern der Seiten. Zu den am weitesten verbreiteten Produkten zählt der Internet-Explorer (IE) und der Netscape Navigator, der jedoch ab Version 8 die IE-Engine oder die Gecko-Engine von Mozilla nutzt. Der Browser Opera nutzt eine eigene Engine. Neben dem Testen verschiedener Browser sollte ein einzelner Browser, wenn möglich, auch in verschiedenen Versionen getestet werden. Welcher Browser, welches HTML-Element unterstützt, kann u.a. auf der Website von SelfHtml unter [05] nachgelesen werden.

13

3 FLASH 3.1 Was ist Flash? Flash, ursprünglich von dem Unternehmen Macromedia entwickelt und seit Dezember 2005 in den Händen der Firma Adobe Systems, ist ein Werkzeug zur Erstellung animierter Grafiken und interaktiver Multimediadateien. Es eignet sich somit gut zum Visualisieren von Abläufen und Zusammenhängen. Aufgrund dieser didaktischen Relevanz findet es auch in der vorliegenden Online-AVL seine Anwendung. Die proprietäre Scriptsprache ActionScript ermöglicht des Weiteren das Kreieren reiner Flash-Webseiten, die unabhängig von HTML existieren. Zum Anzeigen dieser Seiten bzw. von HTML-Seiten mit integrierten Flash-Animationen wird ein spezielles Browser-Plugin benötigt – der Macromedia Flash Player. Dieser kann im WWW kostenlos heruntergeladen werden. Die Flash-Autoren-Software, mit der die Flashdateien mit der Dateiendung „.fla“ erzeugt werden, ist jedoch ein kommerzielles Produkt. Zur Nutzung fallen Lizenzgebühren an. Die FLA-Dateien werden nur während der Entwicklung verwendet. Die später im Browser zur Anzeige kommenden Flash-Dateien werden komprimiert und im Format „.swf“ abgespeichert. Dateien im SWF-Format können nicht mehr angepasst werden. Der Einsatz von Flash bietet einige Vorteile, ist aber auch mit ein paar Nachteilen behaftet. Da Flash vektorbasiert arbeitet, benötigen Grafikdateien weniger Speicherplatz und können im Gegensatz zu HTML-Grafiken schneller geladen werden. Die Streamingfähikeit von Flash ermöglicht zusätzlich auch das relativ zeitnahe Anzeigen größer Datenmengen, die bei Multimediadateien zu erwarten sind. Nachteilig hervorgehoben wird häufig die Tatsache, dass es sich bei Flash nicht um einen offenen Standard handelt. Dies widerspräche der Idee des freien Informationsaustausches im Internet. 3.2 Arbeitsumgebung

1

2

3

6

54

7

Abb. 17: Benutzeroberfläche von Flash (vgl. [4], S.48)

14

Abbildung 17 zeigt die Benutzeroberfläche von Flash. Sie vereint folgende Funktionsbereiche:

(1) Bühne (2) Werkzeugleiste (Tool-Leiste) (3) Werkzeug-Modifizierer (4) Symbolleiste (5) Menüleiste (6) Zeitleiste (7) Bibliothek

Die beiden wohl am meisten hervorstechenden Funktionselemente sind die Bühne und die Zeitleiste. Auf der Bühne werden während des Erstellungsprozesses alle Elemente platziert, die später auf der Webseite angezeigt werden sollen. Die Ansicht der Bühne kann vergrößert und verkleinert werden, so dass auch am Detail gearbeitet werden kann. Genauso, wie die Elemente auf der Bühne platziert werden, sind sie später im fertigen Bild bzw. in der fertigen Animation angeordnet. Die Flash-Autoren-Software folgt also dem Prinzip eines WYSIWYG-Editors. Zur besseren Orientierung besteht die Möglichkeit, Raster einzublenden. Die Rastergröße kann frei gewählt werden. Auch die Größe der Bühne kann den individuellen Bedürfnissen angepasst werden. Alles, was mit Hilfe von Flash erzeugt wird, wird Film (Flash-Movie) genannt. Diese Tatsache trägt dem Umstand Rechnung, dass alle Objekte in der Zeitleiste aufgereiht werden. Ein Flash-Dokument setzt sich genau wie ein Film aus einer Abfolge von Einzelbildern zusammen. In der Zeitleiste wird festgelegt, zu welchem Zeitpunkt die Grafiken und andere Objektelemente angezeigt werden. Dabei lassen sich verschiedene Ebenen definieren, die jeweils unterschiedliche Bildbestandteile enthalten. Die Ebenen werden häufig mit dem Bild von durchsichtigen Folien veranschaulicht. Jede Folie enthält einen Bildbestandteil. Alle Folien übereinander gelegt, ergeben das Gesamtbild. Die Ebenen eines Films sind in einer Spalte am linken Rand der Zeitleiste aufgelistet. Um das Arbeiten mit Ebenen zu erleichtern, besteht die Möglichkeit einzelne Ebenen auszublenden (Auge – siehe Abb. 17) bzw. einzelne Ebenen für die Bearbeitung zeitweise zu sperren (Schloss – siehe Abb. 17) und Konturen der Objekte einer Ebene farbig hervorzuheben. Am oberen Rand der Zeitleiste sind die Bildnummern angegeben. Der rote Abspielknopf zeigt an, welches Bild zu diesem Zeitpunkt auf der Bühne dargestellt wird. Mit fortlaufender Zeit bewegt sich der Abspielknopf von links nach rechts. Mit welcher Geschwindigkeit das geschieht, hängt von der angegeben Bildrate ab. Standardmäßig ist eine Bildrate von 12 Bildern pro Sekunde eingestellt. Diese kann jedoch angepasst werden. Dabei ist darauf zu achten, dass der PC auch in der Lage sein muss, die Animationen in der vorgegebenen Geschwindigkeit zu berechnen. In dem Bedienfeld „Bibliothek“ werden alle in Flash erstellten Symbole oder importierte Grafiken, Sounddateien und Videoclips vorgehalten. Die hier gespeicherten Symbole wurden einmal erstellt und können anschließend beliebig oft als Instanz im gesamten Dokument oder in anderen Dokumenten verwendet werden. Eine Instanz ist die Kopie eines Symbols. Die Farbe, Größe oder Funktion einer Instanz kann angepasst werden. Dies hat keinen Einfluss auf andere Instanzen des selben Symbols. Werden jedoch Änderungen am eigentlichen Symbol in der Bibliothek vorgenommen, wirken sich diese auf alle Instanzen des Symbols aus. Für das Speichern mehrerer Symbolinstanzen wird weniger Speicherplatz benötigt, als für das speichern mehrerer identischer Symbole. Diese Vorgehensweise erhöht somit die Ladegeschwindigkeit der Flash-Animation und ist aus diesem Grund sehr zu empfehlen.

15

Das Menü ist an das Layout der bekannten Windowsmenüs angepasst. Die Menüstruktur im Detail zu erläutern, würde an dieser Stelle zu weit führen. Mit Hilfe der Werkzeuge können Grafiken erstellt und bearbeitet werden. Das Bedienfeld Werkzeuge gliedert sich in vier Bereiche. Der Bereich Werkzeuge enthält die Zeichen-, Mal- und Auswahlwerkzeuge. Der Bereich Ansicht enthält Werkzeuge zum Vergrößern, Verkleinern und Verschieben der Ansicht im Anwendungsfenster. Im Bereich Farbe kann die Strich- und Füllfarbe angepasst werden. Im Optionsbereich werden Modifizierer für das derzeit ausgewählte Werkzeug angezeigt. Modifizierer beeinflussen die Mal- oder Bearbeitungsvorgänge des Werkzeugs. Diese kurze Einführung in Flash soll mit den wesentlichen Elementen vertraut machen und am Ende befähigen, selbst eine kleine Animation zu erstellen und in ein HTML-Dokument einzubinden. Aus diesem Grund folgt nach jeder Erläuterung eine kurze Arbeitsanweisung. So vervollständigt sich von Abschnitt zu Abschnitt die Animation und am Ende kann der Erfolg anhand dieser erstellten Animation getestet werden. Lektion 1: Neues Flash-Dokument erstellen

• Starten Sie das Flash-Programm • Wählen Sie >Datei >Neu >Flash-Dokument und bestätigen Sie mit OK. Es wird nun

die leere Bühne und die Zeitleiste mit einer Ebene angezeigt. Der Abspielkopf befindet sich über dem ersten Bild.

• Zu Beginn passen wir die Größe der Bühne an und blenden uns Hilfslinien, zur leichteren Ausrichtung von Elemente auf der Bühne, ein.

Öffnen Sie das Bedienfeld Eigenschaften (Fenster > Eigenschaften > Eigenschaften)

Betätigen Sie den Button hinter „Größe:“ und ändern Sie die Werte für Breite und Höhe (600 x 110). Bestätigen Sie mit OK.

Wählen Sie anschließend aus der Menüleiste >Ansicht >Vergrößerung >an Fenster anpassen. Die Bühne ist jetzt optimal ausgerichtet.

Zum Einblenden des Rasters wählen Sie >Ansicht >Raster >Raster einblenden.

3.3 Grafiken Flash ermöglicht es sowohl Grafiken zu importieren, als auch mit Hilfe diverser Werkzeuge eigene Grafiken zu zeichnen. Beim Importprozess komplexer Bilddateien mit mehreren Ebenen erzeugt Flash die nötigen Ebenen automatisch in der Zeitleiste. Aus Gründen der Platzersparnis werden speichergierige Grafiken, wie z.B. BMP-Dateien, mit Hilfe des Befehls „Bitmap nachzeichnen“ in Vektorgrafiken umgewandelt. Die konvertierten Bitmaps können anschließend mit diversen Zeichenwerkzeugen editiert werden. Die Zeichenwerkzeuge, die in Flash zur Verfügung stehen, sind so oder ähnlich schon aus diversen Zeichenprogrammen bekannt. Der Anwender wird in einigen Bereichen beim Zeichnen unterstütz. So werden z.B. geometrische Formen beim Erstellen einer Zeichnung erkannt und Unregelmäßigkeiten in der Linienführung automatisch geglättet und begradigt und somit in eine regelmäßige Form gebracht. Außerdem bringt Flash eine große Anzahl von Bildvorlagen mit, die zur Gestaltung des Flash-Objektes herangezogen werden können. Die programminterne Hilfe erläutert sehr ausführlich die Möglichkeiten der einzelnen

16

Zeichenwerkzeuge. In dieser Arbeit beschränkt sich das Zeichnen auf die Erstellung einfacher geometrischer Formen. Aus diesem Grund wird die Thematik nicht weiter vertieft. Lektion 2: Symbol erstellen

• Bestimmen Sie im Bedienfeld Werkzeuge im Bereich Farbe die Linienfarbe und die Füllfarbe.

Klicken Sie dazu auf das Werkzeug „Strichfarbe“ und wählen Sie einen dunklen Farbton, indem Sie auf eines der angezeigten Farbquadrate klicken.

Gehen Sie genauso bei der Wahl der Füllfarbe vor. Das Werkzeug „Füllfarbe“

befindet sich unter dem Werkzeug „Strichfarbe“. Wählen Sie eine helle Farbe.

• Zeichnen Sie nun einen Kreis.

Wählen Sie dafür aus dem Bedienfeld Werkzeuge das „Ellipsenwerkzeug“ aus. Ziehen Sie auf der Bühne mit gedrückter linker Maustaste einen Kreis. Beim Loslassen der Maustaste erscheint der Kreis auf der Bühne.

Wählen Sie anschließend das „Auswahlwerkzeug“ . Markieren Sie sowohl den Rand als auch die Füllung des Kreises, indem Sie mit gedrückter linker Maustaste einen Rahmen um alles ziehen. Wählen Sie nun in der Menüleiste >Modifizieren >Gruppieren. Der Rand und die Füllung des Kreises wurden nun zu einem Objekt zusammengefügt. Mit dem Auswahlwerkzeug können Sie ihn nun beliebig auf der Bühne verschieben und somit wie gewünscht platzieren.

• Anschließend konvertieren Sie die Grafik in ein Symbol. Somit können Sie mehrere Instanzen des Kreises nutzen, ohne erneut eine Grafik erstellen zu müssen.

Klicken Sie dazu mit der rechten Maustaste auf den Kreis. Es öffnet sich ein Kontextmenü. Wählen Sie „in Symbol konvertieren“ und geben Sie dem Symbol den Namen Kreis. Bestätigen Sie mit OK. Das Symbol Kreis wird nun in der Bibliothek ihres Flashdokumentes aufgeführt. Um sich die Bibliothek anzeigen zu lassen, wählen Sie aus der Menüleiste den Befehl >Fenster > Bibliothek.

3.4 Animationen Animationen bilden das Kernstück von Flash. Bevor jedoch eine Animation erstellt werden kann, müssen einige Begriffe geklärt werde. Flash unterscheidet zwischen Bildern und Schlüsselbildern. Schlüsselbilder sind die Bilder, in denen entscheidende Veränderungen für eine Animation definiert werden. Sie fungieren als Start- bzw. Endzustand einer Animation. In der Zeitleiste werden Schlüsselbilder mit einem kleinen Kreis dargestellt. Leere Schlüsselbilder weisen einen leeren, belegte Schlüsselbilder einen ausgefüllten Kreis auf. Die Reihenfolge der Bilder und Schlüsselbilder in der Zeitleiste entspricht der Reihenfolge, in der die in ihnen enthaltenen Objekte während der Wiedergabe erscheinen sollen. Je größer die Abstände zwischen den einzelnen Schlüsselbildern ist, desto länger dauert die Animation. Die Position einzelner Schlüsselbilder kann durch Ziehen mit der Maus verändert werden. Bilder können über das Kontextmenü mit dem Befehl „in Schlüsselbild konvertieren“ in Schlüsselbilder umgewandelt werden. Bei Animationen kann prinzipiell zwischen zwei verschiedenen Varianten unterschieden werden. Zum einen gibt es die Bild-für-Bild-Animation. Hierbei besteht die Animation aus einer Aneinanderreihung vieler Einzelbilder, wobei jedes Bild als Schlüsselbild fungiert.

17

Beim Abspielen bewegt sich der Abspielkopf entlang der Zeitleiste und zeigt die einzelnen Bilder. Aufgrund der hohen Bildrate entsteht eine Art Daumenkinoeffekt und die Bilder vereinigen sich zu einer Animation. Mit eine höheren Bildrate wird erreicht, dass die Animation flüssiger abgespielt wird. Die zweite Variante stellt das Tweening dar. Der Begriff Tween ist eine Kurzform für „in-between“. Dabei fügt Flash mittels Interpolation zwischen zwei Schlüsselbildern automatisch Zwischenbilder ein. Es besteht also nur die Notwendigkeit, Schlüsselbilder für entscheidende Wendepunkte im Bewegungsablauf zu erstellen. Dies verringert den Aufwand für den Ersteller und reduziert den Bedarf an Speicherplatz, der für das Flash-Dokument zur Verfügung gestellt werden muss. Interpolierte Bilder werden hellblau oder hellgrün, gekennzeichnet mit einem Pfeil, dargestellt. Beim Tweening gibt es wiederum Form- und Bewegungstweening. Beim Formtweening wird zum Zeitpunkt x eine Form erstellt und zum Zeitpunkt x+1 einer weitere, andere Form. Flash interpoliert die Formen der dazwischen liegenden Bilder. Beim Bewegungstweening wird ein Objekt von einer Position zu einer anderen bewegt. In der nachfolgenden Lektion wird ein solches Bewegungstween erstellt. Lektion 3: Erstellen eines Bewegungstweens

• Der in Lektion 2 erstellt Kreis ist im ersten Bild der Ebene 1 platziert. Das erste Bild einer Ebene ist automatisch ein Schlüsselbild. Um einen Bewegungstween zu erzeugen, muss ein weiters Schlüsselbild definiert werden.

Klicken Sie dafür in der Zeitleiste in Ebene 1 mit der rechten Maustaste auf Bild 30. Es öffnet sich ein Kontextmenü. Wählen Sie den Befehl „Schlüsselbild einfügen“.

Ziehen Sie nun mit der Maus den Kreis auf der Bühne in eine deutlich andere Position.

• Im Anschluss an die Erzeugung der beiden Schlüsselbilder muss noch festgelegt werden, dass ein Tweening erfolgen soll.

Dazu klicken Sie wiederum mit der rechten Maustaste auf das erste Bild in der Zeitleiste und wählen aus dem Kontextmenü den Befehl „Bewegungs-Tween erstellen“ aus. Es erscheint ein Pfeil vom ersten zum zweiten Schlüsselbild.

• Anschließend können Sie überprüfen, ob die Erstellung der Animation erfolgreich war.

Wählen Sie dafür das erste Bild in der Zeitleiste aus und betätigen Sie die ENTER-Taste. Der Kreis sollte sich von der in Schlüsselbild 1 festgelegten Position mit allen Zwischenschritten zu der in Schlüsselbild 2 definierten Position bewegen.

• Vergessen Sie nicht zu Speichern. 3.5 Schaltflächen Schaltflächen tragen zur Interaktivität der Animationen bei. Jedes Objekt in Flash kann prinzipiell in eine Schaltfläche umgewandelt werden. Es existiert jedoch auch eine Flash-Bibliothek, die verschiedenartige Schaltflächen zur Verfügung stellt. Eine Schaltfläche besteht in Wirklichkeit aus vier Bildern (siehe Abb. 18). Die ersten drei Bilder symbolisieren die drei möglichen Zustände einer Schaltfläche. Das vierte Bild definiert den Bereich, in dem die Schaltfläche aktiv ist. Der erste Zustand ist der „AUF-Zustand“. In diesem befindet sich die Schaltfläche, wenn der Mauszeiger die Schaltfläche nicht berührt. Das zweite Bild – der „Darüber-Zustand“ – kommt zum tragen, wenn sich der Mauszeiger auf dem aktiven Bereich der Animation befindet. Der „Drücken-Zustand“ stellt die Schaltfläche

18

dar, die angezeigt wird, wenn die Schaltfläche vom Nutzer betätigt wird. In jedem Zustand kann das Aussehen und Verhalten der Schaltfläche den eigenen Vorstellungen angepasst werden. Kommt der Benutzer in der fertigen Animation nun mit der Schaltfläche in Kontakt, z.B. in dem er den Mauszeiger über die Schaltfläche bewegt, kommen die für diesen Zustand definierten Merkmale der Schaltfläche zum tragen. Lektion 4: Erstellen einer Schaltfläche

• Zu Beginn legen Sie eine neue Ebene an, auf der Sie die Schaltfläche platzieren werden.

Wählen Sie dazu in der Menüleiste den Befehl >Einfügen >Zeitleiste >Ebene. Eine weitere Ebene erscheint. Doppelklicken Sie auf den Namen der Ebene und geben ihr den Namen „Button“.

Klicken Sie anschließend in das erste Bild dieser neu erstellten Ebene. • Nun wählen Sie aus den bereits in Flash definierten Schaltflächen eine aus.

Öffnen Sie dazu die Bibliothek „Schaltflächen“ in der Menüleiste unter >Fenster >Allgemeine Bibliotheken >Schaltflächen.

Wählen Sie aus dem Ordner „classic buttons“ den Ordner „Circle Buttons“. Ziehen Sie den dort angegeben Play-Button auf die Bühne an die gewünschte Position. Der Button wird nun auch in der Bibliothek ihres Dokumentes angezeigt.

• Im Bedienfeld Eigenschaften (Fenster > Eigenschaften > Eigenschaften) sollten Sie einen Instanznamen für den Button eingeben. Wählen Sie den Namen “my_play“.

• Anschließend verändern Sie die Beschriftung der Schaltfläche. Dazu führen Sie einen Doppelklick auf die Schaltfläche aus. Sie gelangen jetzt in den Bearbeitungsmodus für den Button. Sie sehen die Definition für die vier beschriebenen Bilder der Schaltfläche (siehe Abb. 18).

Es existiert eine Ebene für den Text. Klicken Sie in dieser Ebene auf das erste Bild. Auf der Bühne wird nun die Beschriftung des Buttons farbig umrandet. Klicken Sie auf der Bühne in das Feld der Beschriftung und ändern Sie diese in „Abspielen“ um. Ggf. müssen Sie das Feld etwas größer ziehen.

Abb. 18: Bearbeitung einer Schaltfläche

19

Fahren Sie mit den anderen Bildern dieser Ebene auf die gleiche Art und Weise fort.

Nach Abschluss dieser Arbeiten beenden Sie den Bearbeitungsmodus, indem Sie in der Bearbeitungsleiste (>Fenster >Symbolleisten >Bearbeitungsleiste) auf „Szene 1“ klicken.

• Prinzipiell ist die Schaltfläche jetzt fertiggestellt. Ihre volle Funktionsfähigkeit erlangt Sie jedoch erst, wenn die gesamte Animation noch mit einigen ActionScript-Befehlen versehen wird. Dies werden Sie in der nächsten Lektion tun.

3.6 Action Script ActionScript ist eine Flash-programminterne Scriptsprache. Sie unterliegt festen Syntaxregeln, die u.a. in der ActionScript-Referenz der Flash-Hilfe nachgelesen werden können. In dieser Ausarbeitung beschränkt sich die Anwendung von ActionScript auf das Zuweisen von Aktionen zu einzelnen Schlüsselbildern. Die Aktion wird gestartet, wenn beim Abspielen des Films der Abspielkopf das entsprechende Schlüsselbild erreicht bzw. wenn eine interaktive Aktion, wie das Betätigen einer Schaltfläche, ausgeführt wird. Lektion 5: Zuweisen einer Aktion zu einem Schlüsselbild

• In dieser Lektion werden Sie die Funktionalität ihrer Schaltfläche vervollständigen. Beim Betätigen der Schaltfläche soll die von Ihnen erstellte Animation gestartet werden. Dazu müssen Sie zunächst dafür sorgen, dass der Flash-Film nicht automatisch losläuft.

Klicken Sie in der Zeitleiste auf das erste Bild der Ebene 1. Auf der Bühne müsste Ihr Kreis in seiner Ausgangsposition und die von Ihnen erstellte Schaltfläche zu sehen sein.

Öffnen Sie anschließend das Aktionsfenster unter >Fenster >Aktionen. Das in Abbildung 19 dargestellte Fenster erscheint.

Abb. 19: Aktionsfenster

20

Wählen Sie unter >Globale Funktionen >Zeitleistensteuerung den Befehl „stop“ per Doppelklick aus. Da die Animation immer mit dem ersten Bild beginnt, bleibt Sie sofort nach Anzeigen des ersten Bildes stehen.

• Anschließend müssen Sie der Schaltfläche noch ihre Funktionalität zuweisen. Die Vorgehensweise ist prinzipiell die gleiche.

Klicken Sie in der Zeitleiste auf das erste Bild der Ebene „Button“. Öffnen Sie wiederum das Aktionsfenster unter >Fenster >Aktionen und geben Sie

im Editorfeld folgende Befehle ein:

Die Bezeichnung „my_play“ ist in diesem Fall der in Lektion 4 festgelegte Instanzname der Schaltfläche. Über den Instanznamen kann somit im ActionScript-Code auf die Schaltfläche verwiesen werden. ActionScript-Code wird immer beim Auftreten eines Ereignisses ausgeführt. Das Klicken auf eine Schaltfläche löst das Ereignis Button.onRelease aus. Der eingegebene Code gibt an, dass beim Auftreten dieses Ereignisses die Animation gestartet werden soll. Der entsprechende Befehl lautet „play“.

• Jetzt ist ihre Flash-Animation komplett. Um sie zu testen, wählen Sie aus der Menüleiste den Befehl >Datei >Vorschau für Veröffentlichung >HTML. Daraufhin öffnet sich ihr Standardbrowser und die Animation wird, eingebettet in eine sonst leere HTML-Seite, angezeigt.

Lektion 6: Veröffentlichen der Flash-Datei • Erfüllt das Flash-Dokument Ihre Erwartungen, veröffentlichen Sie es, indem Sie den

Befehl „Datei >Veröffentlichen“ wählen. Dadurch wird eine komprimierte Version der Datei mit der Erweiterung .swf (SWF) im selben Verzeichnis, wie Ihre FLA-Datei erstellt. Unter „Datei >Einstellungen für Veröffentlichungen“ können Sie außerdem festlegen, dass beim Veröffentlichen zusätzlich eine HTML-Datei erzeugt wird. Setzen Sie dafür einfach den entsprechenden Haken und bestätigen mit OK.

3.7 Einbinden von Flash in eine HTML-Datei Grafiken, Multimedia-Elemente und auch Flash-Animationen werden in HTML in Form einer Referenz eingebunden. Die Flash-Datei wird dabei von HTML allgemein als Objekt betrachtet und somit auch zwischen das öffnende und schließende Tag des object-Elementes platziert (siehe Abb. 21). Die beim Veröffentlichen automatisch erstellte HTML-Datei enthält dieses Objekt bereits. Um die Flash-Animation in Ihre HTML-Seite einbetten zu können, kopieren Sie einfach das object-Element samt Inhalt an die entsprechende Stelle in Ihrem Quellcode. Dabei müssen Sie darauf achten, dass die angegebenen Pfade (in Abb. 21 grün hervorgehoben) korrekt sind. Wie zu erkennen ist, wird die SWF-Datei innerhalb des object-Elementes auf zwei verschiedene Arten eingebunden. Die ersten sechs Zeilen ensprechen der

Abb. 20: Schaltflächenanimation

21

Einbindung nach Microsoft-Art. Das embed-Element stellt einen Alternativinhalt für diejenigen Browser dar, die die Microsoft-Methode nicht unterstützen. Diese Variante der doppelten Einbindung hat sich in der Praxis bewährt, ist jedoch nicht HTML-Standard-konform.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="500" height="80" id="Chemie5" align="middle">

<param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="./Animationen/Chemie5.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" />

<embed src="./Animationen/Chemie5.swf" quality="high" bgcolor="#ffffff" width="500" height="80" name="Chemie5" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>

Abb. 21: Einbinden von Flash in eine HTML-Datei

I

Glossar ASCII: steht für „American Standard Code for Information Interchange“. In der

Codetabelle des ASCII-Codes sind alle Ziffern, Satzzeichen und Buchstaben mittels Nullen und Einsen codiert, den beiden Werten, die die kleinste Verarbeitungseinheit heutiger PCs – das bit – annehmen kann.

Browser: Ein spezielles Programm, mit dem man über das WWW Zugang zu WWW-Servern

erlangen und von diesem angeforderte Dokumente anzeigen kann. dicktengleiche Schrift: Auch als nichtproportionale Schrift oder Rationalschrift bezeichnet. Eine Schrift,

bei der jedes Zeichen, unabhängig von seiner Breite, den gleichen horizontalen Raum einnimmt - der Buchstabe i beansprucht beispielsweise den gleichen Platz wie der Buchstabe m.

HTTP: Hypertext Transfer Protocol; das Protokoll, dass die Kommunikation von Browsern

und WWW-Servern im WWW regelt. Fordert ein Browser ein Dokument vom WWW-Server an oder beantwortet der WWW-Server eine Anfrage, muss diese Anfrage den Konventionen des HTTP-Protokolls gehorchen.

URL: Steht für Uniform Resource Locator und kann eine Web-Site eines bestimmten

Rechners im Netz eindeutig adressieren. Sie besteht aus vier Teilen: Protokoll, Servername (Domain), Pfad und Dateiname. Um auf ein Hypertext-Dokument (d.h. eine HTML-Datei) zu verweisen, wird als Protokoll das Hypertext Transfer Protocol (kurz: „HTTP“) verwendet.

WWW: World Wide Web; Dienst, den das Internet zur Verfügung stellt. Weltweites Netz

aus Webseiten, die mittels eines Webbrowsers angezeigt werden können. Das einheitliche Dokumentformat für Webseiten ist HTML. Das Kommunikations-protokoll im WWW ist HTTP.

XML: Ist eine Definitionssprache für Auszeichnungssprachen, wie XHTML. Die

Bestandteile einer Auszeichnungssprache müssen nach einem vorgeschriebenen Schema definiert werden. XML ist dabei das "Regelwerk", das Schema.

II

Literaturverzeichnis [01] Kentie, Peter: Web Graphics – Tools und Techniken für die Webgestaltung. 3.,

erweiterte und aktualisierte Auflage, München: Addison-Wesley Verlag, 2000. [02] Kobert, Thomas: Cascading Style Sheets. Landsberg: verlag moderne industrie Buch

AG & Co. KG, 2002. [03] Schleswig, Roland: Ökonomie des Web-Business – Einführung in das Web-Business.

o.O., AKAD Privat-Hochschulen GmbH, 2004. [04] Schmidt, Udo: Flash 5. Poing: Franzis Verlag GmbH, 2001. Sonstige Quellen [05] SELFHTML e.V.:

http://de.selfhtml.org/ (Stand: 10. Juli 2006) [06] Statistisches Bundesamt Deutschland: Ausstattung privater Haushalte mit

Informations- und Kommunikationstechnik in Deutschland. Ergebnisse der laufenden Wirtschaftsrechnungen 2003 – 2005. http://www.destatis.de (Stand: 10. Juli 2006)

[07] Wikipedia – Die freie Enzyklopädie:

www.wikipedia.de (Stand: 10. Juli 2006) [08] http://www.weaverslave.ws (Stand: 10. Juli 2006)