Barcode scannen in Storyline?
Wir zeigen, wie’s geht!
Wir zeigen, wie’s geht!
Lesedauer
12 Minuten
Thema
Articulate Storyline
Articulate Storyline ist unser E-Learning Autorentool der Wahl. Wieso? Das haben wir dir in diesem Beitrag erzählt. Ein grosses Plus: die “Articulate E-Learning Heroes”. Eine Community, die Fragen rund um Articulate Storyline beantwortet, coole Umsetzungsbeispiele teilt und die immer wieder verblüffende Storyline-Tutorials teilt. Auch wir sind Teil dieser Community. In der Kategorie “HK Heroes” teilen wir auf diesem Blog immer wieder Tutorials von Interaktionen, Tipps & Tricks, die’s in sich haben. Erstes Thema: Eine Scanner-Interaktion. Wie im Supermarkt, einfach online. Online-Self-Scanning sozusagen.
Spielend lernen
Im Auftrag eines Kunden durften wir vor Kurzem eine Softwareschulung zu einem neuen Kassensystem umsetzen. Wir haben dafür mit Storyline eine Interaktion erstellt, die es dem Nutzer ermöglicht, mit einem virtuellen Handscanner auf der Oberfläche des Lernprogramms einen Barcode zu erfassen. Die gefundene Lösung kommt mit ein Paar wenigen Grafiken, etwas Storyline-Grundwissen und einem einfachen Programmierbefehl aus.
Wie das aussieht, siehst du hier.
Du brauchst:
- Leere Folie in einem Storyline-Projekt
- Bild eines Scanners (ausgeschnittenes Icon als .png-Datei)
- Bild eines Laserstrahls (.png-Datei)
- Bild eines Produkts mit einem Barcode
Du kannst die Dateien als Vorlage downloaden:
So geht’s:
Die wichtigsten Schritte in Kürze
- Einfaches Rechteck “Scanner” anlegen (=Erfassungsbereich für den ”Scanner”)
- Rechteck unsichtbar machen (“keine Füllung”, “keine Linie”)
- Bild des Scanners auf den Zustand “Normal” des Rechtecks legen und unterhalb des Rechtecks positionieren
- Zustand “Nach unten” des Rechtecks erstellen und Bild des Lasers in das Rechteck einfügen
- Bild eines Produkts mit einem Barcode auf der Folie einfügen
- Linie “Barcode” über den Barcode legen und unsichtbar machen (“Durchgezogene Linie”, Transparenz: “100%”)
- Reihenfolge der Objekte festlegen : Produktbild – Linie “Barcode” – Rechteck “Scanner” (von unten nach oben)
- Ebene “Erfolgsmeldung” erstellen und gestalten
- Neuen Trigger erstellen:
- Aktion: “Ebene anzeigen”
- Ebene: “Erfolgsmeldung”
- Wenn: “Objekt wird gezogen über”
- Objekt: Rechteck “Scanner”
- Mit dem Mauszeiger über ein Element fahren: Linie “Barcode”
- In der Vorschau testen und beliebig anpassen für eigene Projekte
Viel Spass und Erfolg beim Nachbauen und Ausprobieren!
Wenn du Fragen hast oder Hilfe benötigst, kannst du dich jederzeit bei uns melden – wir helfen dir gerne weiter!
+41 56 430 09 09 | info@hklearning.ch
Barcode scannen in Storyline? Wir zeigen, wie’s geht!
Autor: Lukas
Lesedauer: 12 Minuten
Thema: Articulate Storyline
Articulate Storyline ist unser E-Learning Autorentool der Wahl. Wieso? Das haben wir dir in diesem Beitrag erzählt. Ein grosses Plus: die “Articulate E-Learning Heroes”. Eine Community, die Fragen rund um Articulate Storyline beantwortet, coole Umsetzungsbeispiele teilt und die immer wieder verblüffende Storyline-Tutorials teilt. Auch wir sind Teil dieser Community. In der Kategorie “HK Heroes” teilen wir auf diesem Blog immer wieder Tutorials von Interaktionen, Tipps & Tricks, die’s in sich haben. Erstes Thema: Eine Scanner-Interaktion. Wie im Supermarkt, einfach online. Online-Self-Scanning sozusagen.
Spielend lernen
Im Auftrag eines Kunden durften wir vor Kurzem eine Softwareschulung zu einem neuen Kassensystem umsetzen. Wir haben dafür mit Storyline eine Interaktion erstellt, die es dem Nutzer ermöglicht, mit einem virtuellen Handscanner auf der Oberfläche des Lernprogramms einen Barcode zu erfassen. Die gefundene Lösung kommt mit ein Paar wenigen Grafiken, etwas Storyline-Grundwissen und einem einfachen Programmierbefehl aus.
Wie das aussieht, siehst du hier.
Du brauchst:
-
Leere Folie in einem Storyline-Projekt
-
Bild eines Scanners (ausgeschnittenes Icon als .png-Datei)
-
Bild eines Laserstrahls (.png-Datei)
-
Bild eines Produkts mit einem Barcode
So geht’s:
Die wichtigsten Schritte in Kürze
-
Einfaches Rechteck “Scanner” anlegen (=Erfassungsbereich für den ”Scanner”)
-
Rechteck unsichtbar machen (“keine Füllung”, “keine Linie”)
-
Bild des Scanners auf den Zustand “Normal” des Rechtecks legen und unterhalb des Rechtecks positionieren
-
Zustand “Nach unten” des Rechtecks erstellen und Bild des Lasers in das Rechteck einfügen
-
Bild eines Produkts mit einem Barcode auf der Folie einfügen
-
Linie “Barcode” über den Barcode legen und unsichtbar machen (“Durchgezogene Linie”, Transparenz: “100%”)
-
Reihenfolge der Objekte festlegen : Produktbild – Linie “Barcode” – Rechteck “Scanner” (von unten nach oben)
-
Ebene “Erfolgsmeldung” erstellen und gestalten
-
Neuen Trigger erstellen:
-
Aktion: “Ebene anzeigen”
-
Ebene: “Erfolgsmeldung”
-
Wenn: “Objekt wird gezogen über”
-
Objekt: Rechteck “Scanner”
-
Mit dem Mauszeiger über ein Element fahren: Linie “Barcode”
-
-
In der Vorschau testen und beliebig anpassen für eigene Projekte