Adobe Captivate 5.5 – Inhaltsverzeichnis (TOC) mit eigenem Button öffnen

Captivate 5.5 Logo

Möchten Sie in Captivate das Inhaltsverzeichnis (TOC) gerne mit einem eigenem Button öffnen oder schließen, bleibt Ihnen nichts anderes übrig, als selbst Hand anzulegen und sich ein entsprechendes Widget mit Flash zu programmieren.

Wie Sie ein solches Widget mit Hilfe des Frameworks „WidgetFactory“ realisieren, wird Ihnen in diesem Tutorial Schritt für Schritt erläutert.

Sollten Sie zu diesem Zeitpunkt nicht wissen, wie man das Framework „WidgetFactory“ in Flash einrichtet, empfehlen wir Ihnen den folgenden Artikel zu lesen:

Adobe Captivate 5.5 – Wie richtet man das Captivate Widget Framework ein?

Zunächst einmal muss ein Captivate-Projekt existieren, indem Sie später Ihr Widget einbinden können. Wenn Sie noch kein Projekt angelegt haben, wäre spätestens jetzt der richtige Zeitpunkt, um dies zu tun.

Um mit der Widget-Programmierung in Flash beginnen zu können, müssen Sie vorher zwei Dateien erstellen. Zum einen benötigen Sie eine .fla-Datei und zum anderen eine .as-Datei, wo Sie Ihren Programmcode reinschreiben.

Schritt 1: FLA-Datei erstellen
Klicken Sie in Flash auf „Datei“ -> „Neu…“, wählen Sie innerhalb des gerade geöffneten Fensters, aus der linken Seite, den Typ „ActionScript 3.0“ aus und bestätigen Sie mit „OK“.

Sie haben nun die sogenannte „Stage“ erstellt, wo später der Button programmatisch platziert wird.

Speichern Sie die eben erstellte .fla-Datei mit einem eindeutigen und selbsterklärenden Namen ab.

Tipp: Erstellen Sie sich einen Widget-Ordner innerhalb Ihres Projekt-Ordners und speichern Sie alle Widgets dort ab. Dies erleichtert die Übersicht. 😉

Schritt 2: ActionScript-Datei erstellen
Klicken Sie erneut auf „Datei“ -> „Neu…“, wählen Sie innerhalb des gerade geöffneten Fensters, aus der linken Seite, den Typ „ActionScript-Datei“ aus und bestätigen Sie wieder mit „OK“.

Beim Abspeichern dieser Datei gilt es zu beachten, dass die .fla-Datei und .as-Datei beide den selben Namen verwenden und im selben Ordner liegen.

Wenn Sie diese Schritte ausgeführt haben, sollten Sie nun in Flash, oben im Reiter, zwei Tabs sehen.

Schritt 3: Dokumentenklasse vergeben
Wechseln Sie in die .fla-Datei und vergeben Sie in den „Eigenschaften“ eine Dokumentenklasse. Verwenden Sie am Besten die selben Namen, denen Sie Ihren beiden Dateien gegeben haben. Anschließend speichern Sie die .fla-Datei ab.

Wechseln Sie nun in die .as-Datei, in dem sich der interne Flash-Editor befindet.
Hier werden Sie nun Ihren Button programmatisch erzeugen und eine passende Funktion definieren, mit der Sie über den Button das Inhaltsverzeichnis öffnen bzw. schließen.

Schritt 4: Eine Klasse erstellen

package
{
	import widgetfactory.StaticWidget;

	public class tocButton extends StaticWidget
	{
		public function tocButton():void
		{

		}
	}
}

Dies ist die Syntax zum Erstellen eines statischen Widgets mit Hilfe des Frameworks „WidgetFactory“. Wichtig ist, dass die Klasse und die Funktion den Namen der zuvor vergebenen Dokumentenklasse besitzen.

Für eine ausführlichere Erklärung zum Erstellen von statischen Widgets, verweisen wir gerne auf den Blog des Entwicklers Tristan Ward:

http://www.infosemantics.com.au/widgetking/2010/11/building-widgets-in-flash/

Um zu testen, ob Ihr Widget auch funktioniert oder Fehler enthält, lohnt es sich eine Ausgabe mit „trace“ zu erzeugen:

package
{
	import widgetfactory.StaticWidget;

	public class tocButton extends StaticWidget
	{
		public function tocButton():void
		{
			trace('Happy Coding!');
		}
	}
}

Speichern Sie die .as-Datei ab und testen Sie anschließend den Film, indem Sie im Menü „Steuerung“ ->  „Film testen“ -> „Testen“ auswählen.

Tipp:
Shortcuts erleichtern das Arbeiten ungemein! Für das Abspielen des Films, einfach folgende Tastenkombination auf dem jeweiligen System ausführen:

  • Windows -> Strg + Enter
  • Mac -> cmd + Enter

Sollte nun im Ausgabefenster eine Ausgabe mit „Happy Coding!“ erscheinen, wissen Sie, dass Ihr Widget keine Fehler enthält!

Schritt 5: Button programmatisch erzeugen
Wechseln Sie in die .fla-Datei und navigieren Sie über das Menü zu „Fenster“ -> „Komponenten“. Ziehen Sie aus dem geöffneten Komponenten-Fenster ein Button-Objekt in Ihre Biblothek.

Speichern Sie anschließend die .fla-Datei ab.

Wechseln Sie nun wieder zurück in die .as-Datei und schreiben Sie in die Funktion „tocButton()“ folgenden Code:

package
{
	import widgetfactory.StaticWidget;
	import fl.controls.Button;

	public class tocButton extends StaticWidget
	{
		public function tocButton():void
		{
			var customBtn:Button = new Button();
			customBtn.label = 'TOC öffnen';
			customBtn.width = 100;
			customBtn.move(0, 0);
			customBtn.useHandCursor = true;
			addChild(customBtn);
		}
	}
}

Um eine Button-Instanz zu erzeugen, benutzen Sie den „new“ Operator. Damit können Sie dann über die Variable „customBtn“ auf die Eigenschaften des Button-Objektes zugreifen und nach belieben anpassen. Zum Beispiel können Sie über die „label“-Eigenschaft Ihres Buttons einen Namen vergeben.
Mit „addChild()“ platzieren Sie Ihren Button auf die „Stage“.

Wichtig: Achten Sie darauf, dass die „fl.controls.Button“-Klasse am Anfang importiert wird.

Speichern Sie nun die .as-Datei ab und spielen Sie den Film, wie bereits in Schritt 4 beschrieben, ab. Wie war die Tastenkombination gleich noch einmal? 😉

Sollte es anschließend keine Fehlermeldungen geben und sich ein Fenster mit Ihrem Button öffnen, dann haben Sie alles richtig gemacht!

Schritt 6: Dem Button ein Ereignis zuweisen
Nun müssen Sie Ihrem Button ein Ereignis-Listener zuweisen, der auf ein bestimmtes Ereignis reagiert und eine Funktion ausführt. In Ihrem Fall soll auf einem „Klick“ auf den Button, das Inhaltsverzeichnis geöffnet bzw. geschlossen werden.

package
{
	import widgetfactory.StaticWidget;
	import fl.controls.Button;
	import flash.events.MouseEvent;
	import flash.events.Event;

	public class tocButton extends StaticWidget
	{
		public function tocButton():void
		{
			var customBtn:Button = new Button();
			customBtn.label = 'TOC öffnen';
			customBtn.width = 100;
			customBtn.height = 30;
			customBtn.move(0, 0);
			customBtn.useHandCursor = true;
			addChild(customBtn);
			addEventListener(MouseEvent.CLICK, clickTocBtn);
		}

		function clickTocBtn(event:Event):void
		{
			cpVariables.TOCManager.showTOC();
		}
	}
}

Innerhalb der Funktion „tocButton()“ rufen Sie die addEventListener()-Methode auf, welche auf ein Event-Typ „MouseEvent“ mit dem Event-Name „CLICK“ reagiert und anschließend die Funktion „clickTocBtn()“ ausführt.

Wichtig: Achten Sie darauf, dass die Klassen „flash.events.MouseEvent“ und „flash.events.Event“ am Anfang importiert werden.

Schritt 7: Fertiges Widget in Captivate einbinden
Nachdem der Programmierteil abgeschlossen ist, binden Sie nun das Widget in Ihr Projekt ein.

Öffnen bzw. erstellen Sie ein Captivate-Projekt und entscheiden Sie sich, ob das Widget auf einer Folie oder Masterfolie eingebunden werden soll.

Klicken Sie dann in der Menüleiste auf „Einfügen“ und wählen „Widget…“ aus.
Es öffnet sich nun ein Fenster, mit dem Sie zu Ihrem Projektordner navigieren. Anschließend wählen Sie die darin befindliche .swf-Datei aus und klicken auf „Öffnen“.

Es sollte sich ein „Widget-Eigenschaften“-Fenster öffnen, dass Sie mit „OK“ bestätigen. Anderenfalls erhalten Sie eine Fehlermeldung „Widget ungültig“. Öffnet sich diese Fehlermeldung wissen Sie, dass etwas mit Ihrem in Flash programmierten Widget nicht stimmt.

Nun befindet sich das Widget auf Ihrer Folie.

Was Sie jetzt noch tun müssen ist, das Inhaltsverzeichnis einzublenden. Dies ist nämlich standardmäßig ausgeblendet. Dies erreichen Sie, indem Sie über das Menü zu „Projetkt“ -> „Inhaltsverzeichnis…“ navigieren. Es öffnet sich nun der „Skin-Editor“, wo Sie die Option „TOC einblenden“ aktivieren. Im „Skin-Editor“ gibt es weitaus mehr Einstellungsmöglichkeiten, um das Inhaltsverzeichnis nach Ihren Bedürfnissen anzupassen. Probieren Sie es am Besten aus!

Anschließend speichern Sie Ihr Projekt ab und veröffentlichen es, indem Sie es als HTML exportieren lassen. Rufen Sie die erzeugte HTML-Datei in einem modernen Browser auf und probieren Sie Ihr Widget aus.

Das gesamte Projekt (inkl. alle Dateien) stellen wir Ihnen als .zip-Datei zum Download zur Verfügung. Als Gegenleistung würden wir uns über einen Tweet sehr freuen. Viel Spaß! :-)


  • Diesen Beitrag weiterempfehlen:

Ein Gedanke zu „Adobe Captivate 5.5 – Inhaltsverzeichnis (TOC) mit eigenem Button öffnen

  1. Pingback: Adobe Captivate 5.5 – Wie richtet man ein Captivate Widget Framework ein? | Das Brainworxx Weblog

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Lösen Sie bitte die Rechenaufgabe. *