Teil 2: Image-Replacement
- Image-Replacement
- Teil 2: Image-Replacement
- Teil 3: Image-Replacement
Erste Schritte Allgemein wird empfohlen, Sifr vor allem zum Styling von Überschriften oder Zitaten zu nutzen, während Mengentext wegen der für Flash erforderlichen Rechenzeit außen vor bleiben sollte. Um den folgenden Workshop nachzuvollziehen, benötigen Sie einen Webserver, da lokale Tests a...
Erste Schritte
Allgemein wird empfohlen, Sifr vor allem zum Styling von Überschriften oder Zitaten zu nutzen, während Mengentext wegen der für Flash erforderlichen Rechenzeit außen vor bleiben sollte. Um den folgenden Workshop nachzuvollziehen, benötigen Sie einen Webserver, da lokale Tests aus dem Dateisystem heraus zu Flash-Fehlern führen.
Als Erstes laden Sie das aktuelle Sifr-Release herunter, im Fall unseres Workshops Release 419. Packen Sie es aus und verschieben Sie die enthaltenen Ordner auf den Webserver. Einen ersten Eindruck von Sifrs Leistungsfähigkeit vermittelt die im Ordner demo enthaltene HTML-Seite.
Für den Workshop legen Sie am besten einen eigenen Ordner an, indem Sie eine HTML-Datei erzeugen, die eine <h1>-Überschrift enthält. Außerdem legen Sie einige Unterordner an und kopieren insgesamt fünf Dateien aus dem Sifr-Download herüber. Die fertige Ordnerstruktur sieht dann so aus:
•index.html •css/Sifr-screen.css •css/Sifr-print.css •js/sifr-config.js •js/sifr.js •flash/sifr.fla
Eigene Schriftdatei erstellen
Dreh- und Angelpunkt der Sifr-Technik ist das Erstellen einer SWF-Datei, die Ihre Schriftart enthält. Unter finden Sie einen Online-Konverter, der nach dem Upload einer TTF-Datei die SWF-Datei per E-Mail zustellt. Außerdem gibt es kostenlose Tools zum Herunterladen. Eines ist allen diesen Techniken gemeinsam: Die erstellten SWF-Dateien funktionieren nicht zuverlässig. Mal fehlen Umlaute, ein andermal verschwinden die Texte.
Am besten erzeugen Sie die SWF-Dateien mit Adobe Flash. Im Zweifel reicht dafür schon eine Demo-Version von der Adobe-Website. Öffnen Sie die im Ordner flash enthaltene Datei sifr.fla mit Flash. In der Bildmitte sehen Sie dann ein weißes Rechteck. Doppelklicken Sie auf dessen Rahmen, um es zu aktivieren. Jetzt erscheinen die Worte Bold Italic Normal. Markieren Sie diese mit dem Mauszeiger und wählen Sie am unteren Bildschirmrand die Schrift aus. Tippen Sie nun einen Buchstaben ein, beispielsweise ein "a". Möchten Sie auch Fett- und Kursivschrift verwenden, tippen Sie:
"a a a"Formatieren Sie das zweite und dritte a fett beziehungsweise kursiv. Die Vorgehensweise gleicht dabei dem Formatieren von Zeichen in Microsoft Word. Wichtig: Mit jeder zusätzlichen Formatierung steigt die Dateigröße der SWF-Datei an. Der Zuwachs liegt dabei je nach Schriftart bei ca. 10 bis 15 Kilobyte je Formatierung.
Flash-Einstellungen
Standardmäßig integriert Flash keine deutschen Sonderzeichen und Umlaute in die SWF-Datei. Das ändern Sie mit einem Klick auf Einbetten (Embed in englischen Flash-Versionen). Im folgenden Dialog klicken Sie bei gedrückter STRG-Taste auf Lateinisch einfach, um den Zeichensatz zusätzlich zu den bereits ausgewählten Zeichensätzen zu markieren.
Bestätigen Sie mit OK und klicken Sie auf Datei / Exportieren / Film exportieren. Steuern Sie den Unterordner flash an und geben Sie der Datei einen Namen, welcher der enthaltenen Schrift entspricht.
Im nächsten Schritt passen Sie die Einstellungen entsprechend dem Bildschirmfoto an. Veränderungen an der JPEG-Qualität führen dabei nach unserer Erfahrung zu keinen Vorteilen in der SWF-Dateigröße. Schließen Sie den Export mit einem Klick auf OK ab.
Stylesheets und Javascript
Als Nächstes verlinken Sie die beiden im Ordner css enthaltenen Sifr-Stylesheets mit Ihrer Testdatei. Dazu fügen Sie im <head>-Bereich ein:
<link rel="stylesheet" type="text/
css" media="screen" href="css/Sifr-screen.css"><link rel="stylesheet" type="text/
css" media="print" href="css/Sifr-print.css">Bei echten Projekten verkürzen Sie die Ladezeit für Stylesheets, indem Sie den Inhalt der Sifr-CSS-Dateien jeweils an das Ende Ihrer Screen- oder Print-Stylesheets kopieren.
Damit Sifr funktioniert, müssen Sie noch zwei Javascript-Dateien verlinken:
<script type="text/javascript" src=
"js/sifr.js"></script><script type="text/javascript" src=
"js/sifr-config.js"></script>Für Web-Entwickler ist vor allem der Inhalt der sifr-config.js interessant, denn über diese Datei steuern Sie, welche Texte Sifr ersetzt und konfigurieren deren Aussehen. Öffnen Sie die noch leere sifr-config.js in einem Texteditor und fügen Sie folgenden Code ein:
var IhreSchrift = {
src: '/flash/schriftart.swf'};
Sifr.activate(IhreSchrift);
Sifr.replace(IhreSchrift, {
selector: 'h1',
wmode: 'transparent'});In der ersten Zeile wird der Pfad, der zur Schrift-Datei führt, in der Variable IhreSchrift abgespeichert. Sinnvollerweise sollten Sie IhreSchrift durch den Namen der Schriftart ersetzen. Mit dem Kommando Sifr.activate wird Sifr initialisiert, während sich Sifr.replace um das Ersetzen der <h1>-Überschrift mit einem entsprechenden Flash-Clip kümmert. Speichern Sie das Skript ab und laden Sie die HTML-Seite über den Webserver.
zm_timkaufmann
