Webpage-Widget: Webinhalte in Captivate-Projekte referenzieren

Heu­te habe ich einen Widget-Tipp für Sie. Mit dem kos­ten­lo­sen Webpage-Widget von Jim Leich­li­ter kön­nen Sie Web­in­hal­te in Ihre Captivate-Projekte refe­ren­ziert ein­bin­den. Dadurch bie­tet sich Ihnen eine Viel­zahl neu­er Mög­lich­kei­ten der Content-Erstellung und -Pfle­ge in Captivate.

Zu die­sem Tutorial

Pro­gramm: Adobe Captivate 5, 5.5

Schwie­rig­keits­grad: Fortgeschrittene

Bear­bei­tungs­emp­feh­lung: Dies ist ein Fortgeschrittenen-Artikel und setzt bereits Grund­kennt­nis­se in Adobe Captivate 5 oder 5.5 vor­aus, ins­be­son­de­re im Umgang mit Wid­ge­ts. Wenn Sie mein Buch Adobe Captivate 5 – Erfolg­rei­che Screen­casts und E-Learning-Anwendungen erstel­len besit­zen, emp­feh­le ich Ihnen vor­ab das Kapi­tel Wid­ge­ts nut­zen (S. 370-388) zu bearbeiten.

Ziel: In die­sem Tuto­ri­al ler­nen Sie, wie Sie mit dem Webpage-Widget Web­in­hal­te in Captivate-Projekte refe­ren­zie­ren können.

Benö­tig­te Zeit: ca. 15-20 Minuten

Referenzierte Webseite
Refe­ren­zier­te Webseite

Einsatzbeispiele

Was Sie z. B. alles mit die­sem Wid­get tun können:

  • PDFs ein­bin­den
  • Tex­te oder Bil­der referenzieren
  • Inhal­te refe­ren­zie­ren, die mit ande­ren Autoren­werk­zeu­gen erstellt wurden

Kurz­um: Sie kön­nen mit dem Webpage-Widget alles inner­halb eines Captivate-Projektes dar­stel­len, was sich in einem Web­brow­ser dar­stel­len lässt.

Widget herunterladen und in Captivate einfügen

  1. Laden Sie das Webpage-Widget vom Blog von CaptivateDev.com herunter. 

    Die Homepage von CaptivateDev
    Die Web­sei­te von CaptivateDev.com
  2. Ent­pa­cken Sie die Zip-Datei.
  3. Fügen Sie das Wid­get in Ihr Captivate-Projekt ein: Wäh­len Sie dazu Ein­fü­gen > Wid­ge­ts und navi­gie­ren Sie zur ent­pack­ten SWF-Datei. 

    Der entpackte Ordner mit der SWF-Datei
    Inhalt des ent­pack­ten Ordners

Das Wid­get ist nun auf der Folie ein­ge­fügt und kann ver­wen­det werden.

Widget eingefügt
Wid­get eingefügt

Mit dem Wid­get kön­nen Sie:

  • Web­sei­ten über eine URL einbinden
  • Web­sei­ten über rela­ti­ve Pfa­de einbinden
  • HTML-Code ein­bin­den
  • Benut­zer­va­ria­blen ausgeben

So binden Sie eine Webseite über die direkte URL ein

Wenn Sie eine Web­sei­te über die direk­te Adres­se, z. B. https://www.tecwriter.de/infoseite-adobe-captivate.html ein­bin­den möch­ten, dann gehen Sie wie folgt vor:

  1. Geben Sie dem Wid­get im Bedien­feld Eigen­schaf­ten einen spre­chen­den Objekt­na­men, z. B. „W1_Link“ und notie­ren Sie sich diesen. 

    Sprechende Objektnamen
    Spre­chen­de Objektnamen
  2. Dop­pel­kli­cken Sie auf das Wid­get auf der Bühne.
    Die Widget-Eigenschaften öff­nen sich.

    Webpage-Widget Eigenschaften
    Webpage-Widget Eigen­schaf­ten
  3. Wäh­len Sie unter Dis­play your web page using a die Opti­on Web Address und tra­gen Sie in das Feld die URL der Web­sei­te ein, die Sie ein­bin­den möchten.
    Hin­weis: Sie müs­sen das Über­tra­gungs­pro­to­koll „http://“ immer voranstellen.

    Einbindung über eine URL
    Ein­bin­dung über eine URL
  4. Tra­gen Sie im Bereich Dis­play opti­ons unter Wid­get Item Name den Objekt­na­men des Wid­ge­ts ein, den Sie gera­de ver­ge­ben haben.
  5. Wäh­len Sie unter Show scroll­bars on web page die Opti­on Auto. Dadurch wird sicher­ge­stellt, dass die brow­ser­ty­pi­schen Scroll­bal­ken zur Ver­fü­gung ste­hen, wenn die Grö­ße der Web­sei­te es verlangt. 

    Anzeigeoptionen
    Anzei­geop­tio­nen
  6. Kli­cken Sie auf OK.

Nun haben Sie eine Web­sei­te über eine URL in Captivate eingebunden.

Hin­weis: Sie kön­nen das Wid­get nicht in der nor­ma­len Vor­schau tes­ten, son­dern nur über die Vor­schau im Web­brow­ser (Datei > Vor­schau > Im Web­brow­ser). Außer­dem müs­sen Sie die Sicher­heits­ein­stel­lun­gen Ihres Flash-Players so ein­stel­len, dass er den Zugriff auf exter­ne Sei­ten zulässt. Eine Anlei­tung dazu fin­den Sie hier.

So binden Sie eine Webseite über einen relativen Pfad ein

Wenn Sie eine Web­sei­te über einen rela­ti­ven Pfad, z. B. tecwriter/index.htm ein­bin­den möch­ten, dann gehen Sie wie folgt vor:

  1. Fügen Sie eine neue Folie mit einem wei­te­ren Webpage-Widget-Objekt ein.
  2. Geben Sie dem Wid­get im Bedien­feld Eigen­schaf­ten einen spre­chen­den Objekt­na­men, z. B. „W2_Pfad“ und notie­ren Sie sich diesen.
  3. Dop­pel­kli­cken Sie auf das Wid­get auf der Bühne.
    Die Widget-Eigenschaften öff­nen sich.
  4. Wäh­len Sie unter Dis­play your web page using a die Opti­on Rela­ti­ve Path und tra­gen Sie in das Feld den rela­ti­ven Pfad zu der Web­sei­te ein, die Sie ein­bin­den möchten.
    Hin­weis: Geben Sie den rela­ti­ven Pfad aus­ge­hend von dem Ort an, an dem Sie das Pro­jekt spei­chern. Neh­men wir z. B. an, Sie haben Ihr Captivate-Projekt in einem Ord­ner test abge­legt. In die­sem Ord­ner befin­den sich wie­der­um wei­te­re Unter­ord­ner, dar­un­ter z. B. auch der Ord­ner tec­wri­ter, der die gewünsch­te Datei ent­hält, die Sie ein­bin­den möch­ten. Der kor­rek­te Pfad wäre in die­sem Fall also: tecwriter/index.htm.
  5. Füh­ren Sie die Schrit­te 4-6 wie bereits oben­be­schrie­ben aus. 

    Webseite einbinden
    Web­sei­te einbinden

Sie haben nun eine Web­sei­te über einen rela­ti­ven Pfad in Captivate eingebunden.

So binden Sie einen HTML-String ein

Wenn Sie einen HTML-String, z. B. „Hel­lo World“ ein­bin­den möch­ten, dann gehen Sie wie folgt vor:

  1. Fügen Sie eine neue Folie mit einem wei­te­ren Webpage-Widget-Objekt ein.
  2. Geben Sie dem Wid­get im Bedien­feld Eigen­schaf­ten einen spre­chen­den Objekt­na­men, z. B. „W3_HTML_String“ und notie­ren Sie sich diesen.
  3. Dop­pel­kli­cken Sie auf das Wid­get auf der Bühne.
    Die Widget-Eigenschaften öff­nen sich.
  4. Wäh­len Sie unter Dis­play your web page using a die Opti­on HTML String und tra­gen Sie z. B. „<html><head>Mein HTML-String</head><body><h1>Hello World</h1></body></html>“ in das Feld ein. 

    HTML-String
    HTML-String
  5. Füh­ren Sie die Schrit­te 4-6 wie bereits oben beschrie­ben aus. 

    Eingebetteter HTML-String
    Ein­ge­bet­te­ter HTML-String

Sie haben nun einen HTML-String in Captivate eingebunden.

So geben Sie eine Benutzervariable aus

Wenn Sie eine Benut­zer­va­ria­ble aus­ge­ben möch­ten, dann gehen Sie wie folgt vor:

  1. Fügen Sie eine neue Folie mit einem wei­te­ren Webpage-Widget-Objekt ein.
  2. Ver­ge­ben Sie dem Wid­get im Bedien­feld Eigen­schaf­ten einen spre­chen­den Objekt­na­men, z. B. „W4_Variable“ und notie­ren Sie sich diesen.
  3. Dop­pel­kli­cken Sie auf das Wid­get auf der Bühne.
    Die Widget-Eigenschaften öff­nen sich.
  4. Wäh­len Sie unter Dis­play your web page using a die Opti­on User Varia­ble und tra­gen Sie die Varia­ble in das Feld ein.
    Hin­weis: Tra­gen Sie die Varia­ble in der Form $$Varia­blen­na­me$$ ein.
  5. Füh­ren Sie die Schrit­te 4-6 wie bereits oben beschrie­ben aus. 

    Benutzervariable einbinden
    Benut­zer­va­ria­ble einbinden

Sie haben nun eine Benut­zer­va­ria­ble in Captivate eingebunden.

Ein­satz­bei­spie­le:

  • Nut­zen Sie die­se Funk­ti­on, um z. B. einen län­ge­ren oder kom­ple­xe­ren HTML-Code in einer Benut­zer­va­ria­blen zu spei­chern. Sie kön­nen die­sen Code dann schnell und pro­blem­los über die Varia­blen­funk­ti­on des Wid­ge­ts aus­ge­ben lassen.
  • Las­sen Sie sich die ver­schie­de­nen Inhal­te Ihrer in Captivate ange­leg­ten Varia­blen ausgeben.
  • Ver­wen­den Sie die Varia­ble inner­halb einer URL und las­sen Sie somit je nach Benut­zer­inter­ak­ti­on unter­schied­li­che Web­in­hal­te anzeigen. 
    URL + Benutzervariable
    URL + Benutzervariable

    Hin­weis: Ver­wen­den Sie für die Kom­bi­na­ti­on von URL und Benut­zer­va­ria­ble immer die Opti­on Web Address.

Projekt veröffentlichen

Um das erstell­te Captivate-Projekt ver­öf­fent­li­chen, gehen Sie wie folgt vor:

  1. Pas­sen Sie die Grö­ße des Wid­ge­ts an. Der Inhalt der ein­ge­bun­de­nen Web­sei­te wird nur im Rah­men des Wid­ge­ts angezeigt.
  2. Fügen Sie auf jeder Folie, auf der Sie das Wid­get ver­wen­den, zusätz­lich noch eine Schalt­flä­che hin­zu, die das Pro­jekt anhält. 
    Eingefügte Schaltfläche
    Ein­ge­füg­te Schaltfläche

    Hin­weis: Das Wid­get über­deckt alle ande­ren Ele­men­te, auch wenn es auf der unters­ten Ebe­ne liegt. Ver­klei­nern Sie das Wid­get ent­spre­chend, um wei­te­re Objek­te auf der Folie darzustellen.

    Angepasstes Widget
    Ange­pass­tes Widget
  3. Ver­öf­fent­li­chen Sie Ihr Pro­jekt als Flash (SWF).

Hin­weis: Wenn Sie das ver­öf­fent­lich­te Pro­jekt lokal auf Ihrem Sys­tem betrach­ten möch­ten, dann müs­sen Sie die Sicher­heits­ein­stel­lun­gen Ihres Flash-Players anpas­sen, falls sie dies nicht schon für die Vor­schau getan haben. Wenn Sie das Pro­jekt direkt auf einem Web­ser­ver able­gen, funk­tio­niert es auch ohne eine Ände­rung der Sicher­heits­ein­stel­lun­gen des Flash-Players.

  1. Die von Ihnen publi­zier­te .htm-Datei benö­tigt noch eine klei­ne Ände­rung, um sicher­zu­stel­len, dass Ihr Pro­jekt kor­rekt ange­zeigt wird. Öff­nen Sie dazu die ver­öf­fent­lich­te .htm-Datei in einem Text­edi­tor und ändern Sie in der Zei­le „so.addParam(„wmode“, „win­dow“);“ den HTML-Code von „win­dow“  in „opa­que“ um.
HTML-Code
HTML-Code

Mit die­sem Wis­sen soll­ten Sie nun Ihre eige­nen Ideen rea­li­sie­ren kön­nen. Wir wün­schen Ihnen viel Spass damit.

Das Webpage-Widget in einem Beispiel-Projekt
Das Webpage-Widget in einem Beispiel-Projekt

Übri­gens: Wenn Sie gene­rell mehr über Captivate mit prak­ti­schen Bei­spie­len erfah­ren möch­ten, emp­feh­le ich Ihnen mein Buch zu Captivate 5 – wenn es spe­zi­el­ler und noch detail­lier­ter sein soll: Eine Schu­lung bei uns. Kon­tak­tie­ren Sie uns ein­fach und wir stel­len Ihnen einen indi­vi­du­el­len Fahr­plan zusammen.

1 Kommentar zu “Webpage-Widget: Webinhalte in Captivate-Projekte referenzieren

  1. …einer der bes­ten Wid­ge­ts über­haupt!!! Man stel­le sich nur ein­mal die Mög­lich­kei­ten vor…

    bes­te Grüße
    Mat­thi­as Beumer

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht.