Bildschirmschoner herstellen
© Copyright Didier Ludwig 2004
Vorwort:
Es war nicht unbedingt leicht, einen Vortragsstoff zum Thema Macromedia Flash zu erarbeiten, der einerseits in dreiviertel Stunden abgehandelt werden kann, und der sowohl Flash-"Ahnungslosen" wie (eventuell auch anwesenden) Fortgeschritteneren etwas bringt. Ich habe deshalb das Thema Bildschirmschoner-Herstellung gewählt, weil es einerseits einfach genug für Anfänger und andererseits entwicklungsfähig genug für Fortgeschrittene ist.
Ich nehme an, dass die meisten von Euch schon irgendwann mal irgendwas mit Flash zumindest ausprobiert haben. Aber es geht auch ohne Flash Kenntnisse. Wer Flash beherrscht und schon -zig Bildschirmschoner selber gemacht hat, wird gebeten, entweder möglichst diskret zu schnarchen oder sich für 45 Minuten ins Hotel-Foyer oder an die Seepromenade zurück ziehen.
Der Vortrag ist so konzipiert, dass wir hier den Arbeitsablauf aus Zeitgründen zügig durchgehen; und dass die Tagungsteilnehmer, falls Sie daran interessiert sind, anhand des Webtutorials sämtliche Arbeitsschritte zuhause auf Ihrem Computer nachvollziehen können.
Ich nehme an, dass die meisten von Euch schon irgendwann mal irgendwas mit Flash zumindest ausprobiert haben. Aber es geht auch ohne Flash Kenntnisse. Wer Flash beherrscht und schon -zig Bildschirmschoner selber gemacht hat, wird gebeten, entweder möglichst diskret zu schnarchen oder sich für 45 Minuten ins Hotel-Foyer oder an die Seepromenade zurück ziehen.
Der Vortrag ist so konzipiert, dass wir hier den Arbeitsablauf aus Zeitgründen zügig durchgehen; und dass die Tagungsteilnehmer, falls Sie daran interessiert sind, anhand des Webtutorials sämtliche Arbeitsschritte zuhause auf Ihrem Computer nachvollziehen können.
Aufbau:
Das Prinzip eines mit Flash erstellten Bildschirmschoners ist einfach:
· Schritt 1:
Man erstellt in Flash eine selbst-wiederholende Sequenz (auf gut Deutsch: einen "Loop"), und speichert ihn als swf Movie. Oder noch einfacher: Man schnappt sich irgendeinen swf Movie von irgendwoher (im Web wimmelts davon, eine Anlaufstelle ist zB. Flashkit).
· Schritt 2:
Man öffnet diesen Movie mit einem Tool zu Herstellung von Bildschirmschonern, und speichert den Bildschirmschoner ab. Den zweiten Schritt wiederholt man mit einem andern Tool auf einer andern Computerplattform, um mehrere Versionen des Bildschirmschoners anbieten zu können.
Der Flashmovie darf keinerlei Tastatur- oder Mausgeführte Interaktivität enthalten - da ja das Berühren der Tastatur oder der Maus üblicherweise dazu dient, einen Bildschirmschoner zu stoppen. Also wirklich nur ein Animationsloop erstellen und sonst nichts!
Der Benutzer-Compi braucht weder Flash Player noch Plugin, denn der Flash Movie wird vom Bildschirmschoner selber abgespielt. So einfach ist das.
· Schritt 1:
Man erstellt in Flash eine selbst-wiederholende Sequenz (auf gut Deutsch: einen "Loop"), und speichert ihn als swf Movie. Oder noch einfacher: Man schnappt sich irgendeinen swf Movie von irgendwoher (im Web wimmelts davon, eine Anlaufstelle ist zB. Flashkit).
· Schritt 2:
Man öffnet diesen Movie mit einem Tool zu Herstellung von Bildschirmschonern, und speichert den Bildschirmschoner ab. Den zweiten Schritt wiederholt man mit einem andern Tool auf einer andern Computerplattform, um mehrere Versionen des Bildschirmschoners anbieten zu können.
Der Flashmovie darf keinerlei Tastatur- oder Mausgeführte Interaktivität enthalten - da ja das Berühren der Tastatur oder der Maus üblicherweise dazu dient, einen Bildschirmschoner zu stoppen. Also wirklich nur ein Animationsloop erstellen und sonst nichts!
Der Benutzer-Compi braucht weder Flash Player noch Plugin, denn der Flash Movie wird vom Bildschirmschoner selber abgespielt. So einfach ist das.
Plattformen:
Der Flashmovie kann auf irgendeiner Plattform erstellt werden, da das swf Format plattformübergreifend ist.
Der Bildschirmschoner muss aber einzeln auf jeder Plattform erzeugt werden. Wer den ihn nur für sich selbst bauen will, dem genügt das Screensaver-Tool für seine Plattform. Wer ihn jedoch für einen Kunden erstellt und/oder ihn im Web publizieren will, hat Interesse daran, ihn möglichst plattformübergreifend anzubieten.
Wir benutzen heute PC seitig Flash2X (ein 20$ Tool für Win95 bis XP), und Mac-seitig Screentime for Flash (deckt MacOSX und Classic ab). Wie bei Macintosh Programmen üblich, ist dieses viel feature-reicher und teurer als das PC Pendant, nämlich 200$. Wer PC seitig auch unbedingt viel Geld für (einige allerdings nicht dringend benötigte) Features mehr ausgeben will, wählt SWF Kit für satte 300$.
Mit diesen Tools deckt man etwa 99.7% der potentiellen Benutzerplattformen ab. Der Rest besteht vorwiegend aus Linux, und es entzieht sich meiner Kenntnis; ob für diese Plattform überhaupt ein swf-Bildschirmschoner-Tool existiert.
Wir benutzen heute PC seitig Flash2X (ein 20$ Tool für Win95 bis XP), und Mac-seitig Screentime for Flash (deckt MacOSX und Classic ab). Wie bei Macintosh Programmen üblich, ist dieses viel feature-reicher und teurer als das PC Pendant, nämlich 200$. Wer PC seitig auch unbedingt viel Geld für (einige allerdings nicht dringend benötigte) Features mehr ausgeben will, wählt SWF Kit für satte 300$.
Mit diesen Tools deckt man etwa 99.7% der potentiellen Benutzerplattformen ab. Der Rest besteht vorwiegend aus Linux, und es entzieht sich meiner Kenntnis; ob für diese Plattform überhaupt ein swf-Bildschirmschoner-Tool existiert.
Bildschirmgrösse:
Die Screensaver stellen die Flash Movies in jeder beliebigen Monitorauflösung dar, der Movie wird einfach auf die entsprechende Grösse gestretcht. Nun gibt es aber wie in Kino und TV verschiedene Formate. Das am meisten verbreitete ist das 4:3 Format; neuerdings gibt es aber immer mehr (leider untereinander verschiedene) Breitformate, wie zB. 3:2 (neuere Apple Powerbooks), 16:10 (Dell) und 16:9 (andere PC's). Zudem gibt es noch das schon länger bestehende 5:4 Format (die 1280x1024 Auflösung).
Deshalb gilt es folgendes zu bedenken: Der Movie sollte keine Animations-Elemente enthalten, welche die seitlichen Ränder berühren, oder man muss in Kauf nehmen, dass die Animation bei Breitwandformaten rechts und links etwas abgeschnitten wird. Die Flash-Hintergrundfarbe wird jedoch bei allen Formaten über den ganzen Monitor gezeigt. Das Apple Tool Screentime erlaubt die Option, dass der Flash Movie im Screensaver auch unproportional über jedes mögliche Format gestretcht werden kann. Dies führt aber in der Regel zu einer Verlangsamung der Animationen, vor allem wenn sie flächendeckend sind.
Deshalb gilt es folgendes zu bedenken: Der Movie sollte keine Animations-Elemente enthalten, welche die seitlichen Ränder berühren, oder man muss in Kauf nehmen, dass die Animation bei Breitwandformaten rechts und links etwas abgeschnitten wird. Die Flash-Hintergrundfarbe wird jedoch bei allen Formaten über den ganzen Monitor gezeigt. Das Apple Tool Screentime erlaubt die Option, dass der Flash Movie im Screensaver auch unproportional über jedes mögliche Format gestretcht werden kann. Dies führt aber in der Regel zu einer Verlangsamung der Animationen, vor allem wenn sie flächendeckend sind.
Herstellung einer Animation in Flash:
Wie schon erwähnt, reicht die Zeit nicht, um eine detaillierte Einführung in Flash zu machen. Zudem hat der Beamer eine zu kleine (800x600) Auflösung, um das Flash Interface vernünftig darzustellen, weshalb ich auf eine Live-Darstellung verzichte und Screenshots zeige. Ich habe eine super-banale Animation mit einem Schriftzug erstellt, und habe zusätzlich eine bereits früher erstellte Animation dazugenommen.
Also: man starte Flash (in meinem Fall Version MX 2004) und eröffne ein neues Dokument:
Anschliessend bestimmen wir im Eigenschaften-Menü die Filmgrösse, Bildgeschwindigkeit, Hintergrundfarbe und Flash Version (Ausgabe). Als Grösse nehmen wir die am meisten verbreitete Auflösung 1024x768; es könnte aber auch eine andere sein:
12 Bilder pro sekunde ist OK, mehr könnte bei älteren Compis zu Rucklern führen. Die Flash Version ist eigentlich eher egal, man muss ausprobieren, welche Version das Screensavertool verträgt. Da wir mit der alten Version von SWF Kit arbeiten, geben wir ihm Flash 5. Kann das Tool jedoch Flash MX (=6) annehmen, sollte mam dies vorziehen, da F6 Dateien vom Gewicht noch leichter sind als F5.
Nun erstellen wir mit dem Typo Werkzeug einen Schriftzug, wählen Font, Farbe und Grösse:
Den erstellten Schriftzug wählen wir nun mit dem Auswahlwerkzeug an und zerlegen ihn in Vektoren (Pfade). Dazu muss zweimal CTRL-B (Apple: Befehl-B) gedrückt werden (Menü "Modifizieren" > "Teilen"):
Beim ersten mal CTRL-B wird das Wort in Einzelbuchstaben zerlegt, die aber textverarbeitungsmässig immer noch verändert werden könnten; beim zweiten Mal werden die Buchstaben in Pfade umgewandelt (der Font kann danach nicht mehr verändert werden, wohl aber Grösse, Farbe und Form).
Wenn wir den Schriftzug mit dem Pfad-Auswahlwerkzeug anwählen, erkennen wir nun die vektortypischen Ankerpunkte und Handler (vergrösserte Ansicht):
Nun layouten wir die Ausgangsposition unserer Animation mit dem
Transformationswerkzeug
Und jetzt wählen wir das Schlüsselbild (auf gut Deutsch: Keyframe) im Ebenenmenü an:
und weisen diesem Einzelbild ("Frame") in der Zeitleiste einen "Formtween" zu. Fragt nicht was ein Formtween ist, macht es einfach!
Das Schlüsselbild-Symbol in der Zeitleiste sollte nun grünlich sein. Nun wählen wir irgendwo weiter hinten in der Zeitleiste ein neues Einzelbild:
und drücken die Taste F7 (= Menü "Einfügen" > "Zeitleiste" > "Leeres Schlüsselbild")
Nun erstellen wir in diesem Einzelbild eine neu Grafik. Dies kann wieder ein Schriftzug sein, oder sonst irgend eine Pfad-zeichnung. Mit F6 statt F7 hätte man auch ein neues Schlüsselbild des bisherigen Schriftzuges machen können, und diesen mit dem Pfad-Auswahlwerkzeug bearbeiten können. Ich ziehe jedoch eine neue Form vor, da es etwas spektakulärer wirkt.
Wenn wir nun den Zeitleistenschieber zwischen den beiden Schlüsselbildern hin und her bewegen, erkennen wir bereits eine Animation. Um noch einen draufzugeben, erstellen wir mit F7 bei Frame 60 einen weiteres (leeres) Schlüsselbild und erzeugen dort eine weitere Grafik.
Damit ein endloser Loop entseht, wählen wir in der Zeitleiste das erste Schlüsselbild an und kopieren es ganz nach hinten (ALT-Drag). Ich habe danach noch einige weitere Schlüsselbilder eingefügt, um die drei Hauptzustände etwas zu verlängern, und um die Animationen leicht zu antizipieren ("Abbremsen am Anfrang oder am Ende"). Doch darauf will ich nicht weiter eingehen.
Diesem an Genialität kaum zu übertreffenden Kunstwerk fügen wir nun noch eine zweite, bereits fertigerstellte Animation in einer darüberliegenden Ebene hinzu (Ameise). Die Zeitleiste sieht dann etwa so aus:
Danach geben wir diese Animation als swf Movie aus (CTRL-Enter bzw. auf Mac Befehl-Enter). So sieht nun dieser primitive Loop aus:
Man kann nebst Form-Tweens (das haben wir nun gesehen: das ist das "morphen" von einzelnen Vektorgrafiken) auch Bewegungstweens und handgemachte Einzelbild-Animationen erstellen, auf soviel Ebenen wie man will. Der Zeitrahmen lässt aber leider keine weitere Erläuterung der vielfältigen Animationsmöglichkeiten von Macromedia Flash zu.
Im zweiten Screen geht man den gewünschten Flash Movie auf der Harddisk suchen (wonach eine Vorschau desselben in diesem Screen erscheint):
Im dritten Screen gibt man noch das Zielverzeichnis (Ordner) und den Dateinamen ein - That's it!
Der Screensaver ist nun mitsamt eingebautem Installer fertig erstellt.Das nachträglich noch von mir gezippte Resultat, eine .exe-Datei, kann untenstehend heruntergeladen werden (es empfiehlt sich dringend, .exe-Dateien fürs Internet zu komprimieren, da sie sonst in sämtlichen Viren- und Junkmailfiltern hängenbleiben).
Download "HOTEL EDEN" Bildschhirmschoner für Windows.
Der User braucht, nachdem er es entkomprimiert hat, bloss noch darauf zu doppelklicken und wird dann durch den einfachen Installationsdialog geführt. Der Screensaver ist danach per default eingestellt. Weitere Einstellungen kann man danach in der Systemsteuerung "Anzeige" > "Bildschirmschoner" vornehmen.
Ein Bild für den Installer (350x150 Pixel):
Sowie eines mit einem Logo oder was auch immer (350x50 Pixel):
Danach öffnen wir auf dem Apple Computer Screentime for Flash. Auch hier haben wir wieder 3 Screens. Auf dem ersten geben wir den Namen und das kleinere der beiden Bilder ein, und haben noch weitere Einstellungsmöglichkeiten:
Auf dem zweiten Screen geben wir den gewünschten Flash Movie ein:
Auf dem dritten Screen geben wir das grössere der beiden Pict's ein und können von hier aus sowohl die
Classic- wie die OSX-Version ausgeben:
Das wärs auf der Mac Seite. Auch hier idealerweise noch die Screensavers komprimieren, bevor man sie online stellt. Auch hier wird der User durch den Installationsdialog geführt.
Download Bildschirmschoner HOTEL EDEN MacOSX
Download Bildschirmschoner HOTEL EDEN MacOS 8+9
© Copyright Didier Ludwig 2004
Also: man starte Flash (in meinem Fall Version MX 2004) und eröffne ein neues Dokument:
Anschliessend bestimmen wir im Eigenschaften-Menü die Filmgrösse, Bildgeschwindigkeit, Hintergrundfarbe und Flash Version (Ausgabe). Als Grösse nehmen wir die am meisten verbreitete Auflösung 1024x768; es könnte aber auch eine andere sein:
12 Bilder pro sekunde ist OK, mehr könnte bei älteren Compis zu Rucklern führen. Die Flash Version ist eigentlich eher egal, man muss ausprobieren, welche Version das Screensavertool verträgt. Da wir mit der alten Version von SWF Kit arbeiten, geben wir ihm Flash 5. Kann das Tool jedoch Flash MX (=6) annehmen, sollte mam dies vorziehen, da F6 Dateien vom Gewicht noch leichter sind als F5.
Nun erstellen wir mit dem Typo Werkzeug einen Schriftzug, wählen Font, Farbe und Grösse:
Den erstellten Schriftzug wählen wir nun mit dem Auswahlwerkzeug an und zerlegen ihn in Vektoren (Pfade). Dazu muss zweimal CTRL-B (Apple: Befehl-B) gedrückt werden (Menü "Modifizieren" > "Teilen"):
Beim ersten mal CTRL-B wird das Wort in Einzelbuchstaben zerlegt, die aber textverarbeitungsmässig immer noch verändert werden könnten; beim zweiten Mal werden die Buchstaben in Pfade umgewandelt (der Font kann danach nicht mehr verändert werden, wohl aber Grösse, Farbe und Form).
Wenn wir den Schriftzug mit dem Pfad-Auswahlwerkzeug anwählen, erkennen wir nun die vektortypischen Ankerpunkte und Handler (vergrösserte Ansicht):
Nun layouten wir die Ausgangsposition unserer Animation mit dem
Transformationswerkzeug Und jetzt wählen wir das Schlüsselbild (auf gut Deutsch: Keyframe) im Ebenenmenü an:
und weisen diesem Einzelbild ("Frame") in der Zeitleiste einen "Formtween" zu. Fragt nicht was ein Formtween ist, macht es einfach!
Das Schlüsselbild-Symbol in der Zeitleiste sollte nun grünlich sein. Nun wählen wir irgendwo weiter hinten in der Zeitleiste ein neues Einzelbild:
und drücken die Taste F7 (= Menü "Einfügen" > "Zeitleiste" > "Leeres Schlüsselbild")
Nun erstellen wir in diesem Einzelbild eine neu Grafik. Dies kann wieder ein Schriftzug sein, oder sonst irgend eine Pfad-zeichnung. Mit F6 statt F7 hätte man auch ein neues Schlüsselbild des bisherigen Schriftzuges machen können, und diesen mit dem Pfad-Auswahlwerkzeug bearbeiten können. Ich ziehe jedoch eine neue Form vor, da es etwas spektakulärer wirkt.
Wenn wir nun den Zeitleistenschieber zwischen den beiden Schlüsselbildern hin und her bewegen, erkennen wir bereits eine Animation. Um noch einen draufzugeben, erstellen wir mit F7 bei Frame 60 einen weiteres (leeres) Schlüsselbild und erzeugen dort eine weitere Grafik.
Damit ein endloser Loop entseht, wählen wir in der Zeitleiste das erste Schlüsselbild an und kopieren es ganz nach hinten (ALT-Drag). Ich habe danach noch einige weitere Schlüsselbilder eingefügt, um die drei Hauptzustände etwas zu verlängern, und um die Animationen leicht zu antizipieren ("Abbremsen am Anfrang oder am Ende"). Doch darauf will ich nicht weiter eingehen.
Diesem an Genialität kaum zu übertreffenden Kunstwerk fügen wir nun noch eine zweite, bereits fertigerstellte Animation in einer darüberliegenden Ebene hinzu (Ameise). Die Zeitleiste sieht dann etwa so aus:
Danach geben wir diese Animation als swf Movie aus (CTRL-Enter bzw. auf Mac Befehl-Enter). So sieht nun dieser primitive Loop aus:
Man kann nebst Form-Tweens (das haben wir nun gesehen: das ist das "morphen" von einzelnen Vektorgrafiken) auch Bewegungstweens und handgemachte Einzelbild-Animationen erstellen, auf soviel Ebenen wie man will. Der Zeitrahmen lässt aber leider keine weitere Erläuterung der vielfältigen Animationsmöglichkeiten von Macromedia Flash zu.
Originaldateien:
Wer diesen Flash Movie näher studieren möchte, kann das Autoren-File als gezippte .fla-Datei hier herunterladen (Flash MX). Wer bloss den swf Movie (das Ausgabeformat) klauen möchte, bedient sich hier.Animationsbeispiel:
Ein Beispiel für eine ausgedehntere Bildschirmschoner-Animation (mit noch mehr Insekten) findet man auf der Website von Inzec Records.Flash Tutorial für Anfänger:
Ein ausführlicheres, von mir erstelltes Anfänger-Tutorial zu Flash MX befindet sich hier (PDF, 290KB). Es ist passwortgeschützt, damit es nicht grad jeder beliebige arbeitsscheue Kunsthochschuldozent abkupfern kann. Das Passwort wird mündlich mitgeteilt. Wer's vergessen hat, kann sich per E-Mail bei mir melden.Herstellung des PC Screensavers
Flash2X ist echt tubelisicher und geht ruckzuck. Man startet das Programm und gibt im ersten Screen Titel (dieser erscheint dann im User-PC bei der Bildschirmschoner-Auswahl), sowie Autor, URL und Email ein:Im zweiten Screen geht man den gewünschten Flash Movie auf der Harddisk suchen (wonach eine Vorschau desselben in diesem Screen erscheint):
Im dritten Screen gibt man noch das Zielverzeichnis (Ordner) und den Dateinamen ein - That's it!
Der Screensaver ist nun mitsamt eingebautem Installer fertig erstellt.Das nachträglich noch von mir gezippte Resultat, eine .exe-Datei, kann untenstehend heruntergeladen werden (es empfiehlt sich dringend, .exe-Dateien fürs Internet zu komprimieren, da sie sonst in sämtlichen Viren- und Junkmailfiltern hängenbleiben).
Download "HOTEL EDEN" Bildschhirmschoner für Windows.
Der User braucht, nachdem er es entkomprimiert hat, bloss noch darauf zu doppelklicken und wird dann durch den einfachen Installationsdialog geführt. Der Screensaver ist danach per default eingestellt. Weitere Einstellungen kann man danach in der Systemsteuerung "Anzeige" > "Bildschirmschoner" vornehmen.
Herstellung des Bildschirmschoner für Mac
Für diesen Bildschirmschoner stellen wir zuerst noch zwei kleine Bildchen her für die Vorschau im Installer. Diese müssen im Pict-Format, 32-Bit/Px., sein.Ein Bild für den Installer (350x150 Pixel):
Sowie eines mit einem Logo oder was auch immer (350x50 Pixel):
Danach öffnen wir auf dem Apple Computer Screentime for Flash. Auch hier haben wir wieder 3 Screens. Auf dem ersten geben wir den Namen und das kleinere der beiden Bilder ein, und haben noch weitere Einstellungsmöglichkeiten:
Auf dem zweiten Screen geben wir den gewünschten Flash Movie ein:
Auf dem dritten Screen geben wir das grössere der beiden Pict's ein und können von hier aus sowohl die
Classic- wie die OSX-Version ausgeben:
Das wärs auf der Mac Seite. Auch hier idealerweise noch die Screensavers komprimieren, bevor man sie online stellt. Auch hier wird der User durch den Installationsdialog geführt.
Download Bildschirmschoner HOTEL EDEN MacOSX
Download Bildschirmschoner HOTEL EDEN MacOS 8+9
© Copyright Didier Ludwig 2004