Online-Tutorial mit FlashShoweffekte

Anleitung mit Bild

Online-Tutorial mit Flash

Hilfen sind meist eine staubtrockene Sache. Klar kann man einen Menübefehl im Text niederschreiben, ein dauerhafter Lerneffekt tritt aber nur ein, wenn der Nutzer das Gezeigte sofort in der Software nachvollzieht. Eine praktische Lösung bietet das Video-Capturing. Dabei nimmt eine Software die Arbeitsschritte auf dem Rechner als Videofilm auf, die dann in einem Videoformat gespeichert werden. Meist wird beim Video-Capturing dann noch der Mauszeiger eingeschlossen, um genauer zu zeigen, was gerade passiert.

Ein Video allein ist im Web allerdings selten eine gute Idee: Zum einen sind Player und Abspielformate nicht einheitlich, zum anderen hat der Nutzer keine Kontrolle über das, was passiert.

Eine Technologie, die Abhilfe schaffen kann, ist Flash. Die Videointegration klappt in Flash MX und MX 2004 dank des Sorenson-Spark-Codecs gut und vor allem plattformübergreifend. Interaktivität kann leicht hinzugefügt werden. Der vorliegende Workshop zeigt dies an einem Beispiel: Es besteht aus zwei Filmen, die jeweils ein kleines Thema aus Flash erklären. Wenn Sie die Grundzüge dieses Beispiels nachvollziehen, gelingt es Ihnen sehr einfach, eigene Online-Demos zu erstellen.

Ausgangsmaterial: das Video

Online-Tutorial mit Flash

Zu Anfang benötigen Sie das Video mit den Arbeitsschritten in der Software. Als Video-Capturing-Software kommt Snagit zum Einsatz. Starten Sie das Programm und wechseln Sie dort zum Video-Capturing. Achten Sie darauf, dass der Cursor der Maus mit eingeschlossen wird und dass der Input nur ein Fenster ist. Zum Starten der Aufnahme drücken Sie das Tastenkürzel für die Aufnahme. Standardmäßig ist das [Strg Shift P]. Oft ist es praktisch, die [Druck]-Taste dafür zu verwenden. Nun wählen Sie das aktive Fenster und starten dann die Aufnahme. Das Tastenkürzel beendet den Aufnahmeprozess.

Anfangs machen Sie sicherlich einige Fehler und benötigen mehrere Versuche. Nach ein wenig Üben sind aber die richtigen Shots im Kasten. Es gibt einige Dinge, auf die Sie achten sollten: Nehmen Sie relativ kurze Filme auf und hängen Sie lieber mehrere aneinander. Bewegen Sie die Maus geradlinig und ohne allzu viel Stocken.

Video importieren

Online-Tutorial mit Flash

Wenn Sie das oder die Videos erstellt haben, müssen Sie sie in Flash importieren. Dazu bietet sich der Import in die Bibliothek an. Beim Import können Sie in Flash MX 2004 die Standardeinstellungen variieren. Wenn Sie ein eigenes Komprimierungsprofil wählen, können Sie die Qualität wie schon aus Flash MX bekannt zwischen 0 und 100 festlegen. Weniger als 80 führt allerdings gerade bei Menüs und kleinen Schriften zu hässlichen Ergebnissen. Bei den erweiterten Einstellungen gibt es eine sehr praktische Option: Unter Importieren in können Sie als Ziel einen Movieclip wählen. Das ist für unsere Online-Demos die richtige Wahl. Flash erstellt dann automatisch in der Bibliothek einen Movieclip, der das importierte Video enthält.

Damit Sie den Movieclip aus Actionscript ansprechen können, klicken Sie ihn in der Bibliothek mit der rechten Maustaste an. Wählen SieEigenschaften und dort Export für ActionScript (eventuell mit Erweitert einblenden). Geben Sie einen passenden Bezeichner an, um den Movieclip mit Video per Actionscript aufrufen zu können.

Im nächsten Schritt bearbeiten Sie die Demos. Klicken Sie dazu mit der rechten Maustaste auf den Movieclip, der das jeweilige Video enthält, und wählen Sie Bearbeiten. Nun sehen Sie den großen Vorteil daran, dass Sie das Video in einen eigenen Movieclip gelegt haben. Sie können nun beliebige Zeichenebenen über das Video legen und dort von Kommentaren bis zu komplexen Animation alles einfügen.

Im vorliegenden Beispiel kommentiert ein gelber Kasten jeden der vier Arbeitsschritte im Video as_voreinstellung. Im letzten Schlüsselbild des Movieclips wird das Video mit stop()angehalten.

Videos wechseln

Online-Tutorial mit Flash

Damit die Flash-Anwendung sehr einfach mehrere Videos aufnehmen kann, muss sie logisch aufgebaut sein. Jedes Video liegt wie bereits erwähnt in einem eigenen Movieclip.

Der Hauptfilm sieht für jedes Video ein Schlüsselbild vor. Um das jeweils angezeigte Video zu wechseln, kommt eine selbst geschriebene Actionscript-Funktion zum Einsatz. Sie steht im ersten Schlüsselbild des Hauptfilms und erwartet als Parameter den Bezeichner des Movieclips mit dem Video. Dieser Movieclip wird dann in eine Instanz video_mc geladen:

function video_wechseln(name) {
this.attachMovie(name, "video_mc", 0);

Die Positionierung erfolgt relativ zur Bühnengröße und zur Größe des Videos mittig auf der Bühne:

var video_x = Math.floor((Stage.width ? video_mc._width) / 2);
var video_y = Math.floor((Stage.height ? 100 ? video_mc._height) / 2);
video_mc._x = video_x; video_mc._y = 100 + video_y;
}

Diese Funktion muss nun nur noch für jedes Video aufgerufen werden:

video_wechseln("as_voreinstellung");

Der Aufruf steht im jeweiligen Schlüsselbild für das Video. Es ist empfehlenswert, den Code auf eine eigene Ebene zu packen. Um von Video zu Video zu gelangen, kommen zwei Movieclips als Schaltflächen zum Einsatz, die jeweils ein Bild vor und zurück springen:

zurueck_mc.onRelease = function() {
prevFrame();
}
weiter_mc.onRelease = function() {
nextFrame();
}

Diese Movieclips haben Textfelder, deren Inhalt Sie über Actionscript in jedem Schlüsselbild dynamisch bestimmen können:

zurueck_mc.text_txt.text = "";
weiter_mc.text_txt.text = "ActionScript-Verhalten ->";

Ein drittes Textfeld zeigt den Namen des aktuellen Demo-Videos an.

Mit diesen einfachen Komponenten haben Sie schon eine grundlegende Steuerung, mit der Sie zwischen beliebig vielen Videos wechseln können. Natürlich sind ebenso auch noch Auswahllisten oder andere Navigationselemente denkbar.

Video-Steuerung

Online-Tutorial mit Flash

Zur Video-Steuerung setzt die Beispiel-Anwendung auf eine Stopp- und eine Abspiel/Pause-Schaltfläche. Die Abspiel-Schaltfläche erscheint in einer anderen Farbe, wenn das Video gerade abgespielt wird. Realisiert ist das über einen farbigen Movieclip, der nach Bedarf ein- und ausgeblendet wird. Die Stopp-Schaltfläche springt zum ersten Bild und hält den Film an:

navigation_mc.stop_mc.onRelease = function() {
video_mc.gotoAndStop(1); navigation_mc.leucht_mc._visible = false;
}

Die Abspiel-Schaltfläche prüft, ob das Video gerade spielt oder nicht. Dies geschieht über die _visible-Eigenschaft des farbigen Movieclips:

navigation_mc.play_mc.onRelease = function() { if(navigation_mc.leucht_mc._visible) {
video_mc.stop(); navigation_mc.leucht_mc._visible = false;
}
else {
video_mc.play(); navigation_mc.leucht_mc._visible = true;
}
}

Bei der Video-Steuerung steht es Ihnen natürlich frei, noch zusätzliche Funktionalität einzubauen. Beispielsweise kann ein Schieberegler sinnvoll sein, mit dem der Nutzer beliebige Stellen des Films erreicht. Das fertige Beispiel finden Sie unter dem Namen flashdemo.fla auf der Heft-CD. Die Videos sind natürlich auch einzeln vorhanden, um die Arbeitsschritte nachzuvollziehen.

Videogröße gering halten

Online-Tutorial mit Flash

Das Problem beim Capturing von Bildschirmaktionen ist die Größe des Videos, das in Flash eingebunden werden muss. Hier hängt es vom Einsatzzweck ab, wie viele Kompromisse möglich sind. Bei interaktiver Online-Hilfe sind Nutzer prinzipiell eher bereit, größere Datenmengen zu laden, als bei einer interaktiven Präsentation des eigenen Produkts.

Was aber können Sie tun, um Ihren Nutzer nicht mit riesigen Videos zu bombardieren? Zuerst einmal ist der Einsatz eines Preloaders sinnvoll. Wenn Sie viele verschiedene Videos einsetzen, können Sie diese außerdem als externe Filme anlegen und im Hintergrund vorladen.

Beim Video-Import können Sie natürlich die Qualität des Videos weiter herunterschrauben. Allerdings ist dies gerade beim Capturing von Software oder Webseiten mit hohem Qualitätsverlust bei feiner Schrift verbunden. Insofern ist das Herunterschrauben der Qualität gerade für interaktive Präsentationen, die möglichst klein sein müssen, keine gute Option.

Alternative: Video nachbauen

Online-Tutorial mit Flash

Die letzte Möglichkeit besteht darin, das Geschehen am Bildschirm in Flash nachzubauen. Dazu brauchen Sie zwei Dinge: Bildschirmfotos der wichtigen Arbeitsschritte und den Mauszeiger als Bild mit transparentem Hintergrund. Um ein Bildschirmfoto zu erhalten, verwenden Sie entweder ein Screen-Capturing-Tool oder [Druck] beziehungsweise [Alt Druck] für das aktive Fenster. Letztere Tasten speichern das Bildschirmfoto in die Zwischenablage. Sie können es dann in einem Bildbearbeitungsprogramm Ihrer Wahl abspeichern. Empfehlenswert ist ein Tool, da Sie so auch Teilausschnitte zum Beispiel von Menüs aufnehmen können. Einige Bildbearbeitungsprogramme wie etwa The Gimp haben auch gleich ein solches Tool integriert.

Den Mauszeiger erhalten Sie am einfachsten, indem Sie per Screen-Capturing-Tool ein Bildschirmfoto von diesem vor weißem Hintergrund machen. In einer Bildbearbeitung können Sie ihn dann problemlos ausschneiden. Bei [Druck] beziehungsweise [Alt Druck] wird der Mauszeiger leider nicht mit aufgenommen. Wenn Sie die Bildschirmfotos und den Mauszeiger haben, importieren Sie alles in Flash ? am besten in die Bibliothek. Basteln Sie dann den Movieclip mit dem fingierten Video: Zuerst platzieren Sie die Bildschirmfotos in regelmäßigen Abständen, etwa alle 20 Bilder.

Der Mauszeiger kommt in eine eigene Ebene. Bestimmen Sie dort Anfangs- und Endposition der Mausbewegung jeweils in einem eigenen Schlüsselbild und erstellen Sie dazwischen ein Bewegungs-Tween. So simulieren Sie das Bewegen der Maus. Je nach Wunsch können Sie den Bewegungspfad noch ein wenig variieren, damit die Bewegung nicht zu geradlinig aussieht. Ein Beispiel finden Sie auf der Heft-CD unter dem Namen video_nachgebaut.fla.

Seien Sie gewarnt: Der Nachbau ist recht zeitraubend und manches Mauscursor-Verhalten lässt sich kaum imitieren. Wollten Sie beispielsweise die Farbpipette im CD-Beispiel perfekt nachbilden, würden Sie mindestens zwei weitere Bildschirmfotos benötigen, was allerdings schon auf Grund der zusätzlichen Datenmenge nicht sinnvoll ist.

Ganz gleich ob Sie die Videos selbst bauen oder sie per Video-Capturing aufnehmen, Flash stellt tolle Möglichkeiten bereit, um aus einem Video eine interaktive Demo zu machen.

Alle Listings zum Workshop finden Sie auf der Heft-CD und unter
listings.internet-pro.de.