Interaktives Wimmelbild in Storyline – Lernspass nicht nur für Kinder
Lesedauer
10 Minuten
Thema
Articulate Storyline
Wir alle kennen sie, die detailreichen Bilder, auf denen es vor Menschen, Tieren oder Dingen nur so wimmelt. Der Klassiker unter ihnen ist bis heute “Wo ist Walter?”. Stundenlang kann man diese Bilder anschauen und immer wieder Neues entdecken. Auch wir verwenden Wimmelbilder in unseren Projekten: Sie wecken die Neugier der Benutzer und bringen eine spielerische Komponente ins Lernen. Diese Form setzen wir gerne ein, wenn es zum Beispiel in einer Schulung darum geht, verschiedene Gegenstände kennenzulernen oder Gefahren zu erkennen.
In einer dreiteiligen Reihe zeigen wir, wie man Wimmelbilder in Articulate Storyline gestalten und den Benutzern eine spannende, interaktive Lernerfahrung bieten kann.
Entdeckungsreise im Regenwald
Das Lernprogramm bietet dem Benutzer eine Entdeckungsreise im Regenwald, wo er die verschiedenen Tiere dieses Lebensraums kennenlernen kann. In einer ersten Version erstellen wir das Grundgerüst des Wimmelbilds. Die Tiere können durch Anklicken hervorgehoben und ihr Name angezeigt werden. Zusätzliche Funktionen werden in den nachfolgenden Tutorials erklärt.
In diesem Tutorial trainierst du folgende Storyline-Skills:
- Neue Ebenen erstellen
- Trigger erstellen zum Anzeigen und Verbergen von Ebenen
So geht’s:
Für dieses Tutorial brauchst du
- Wimmelbild als Hintergrund (Vorlage oder selbst gestaltet)
- Bilder der einzelnen Tiere des Regenwalds (ausgeschnitten, als .png-Dateien)
Die wichtigsten Schritte in Kürze
1. Wimmelbild für den Hintergrund anlegen/einfügen
2. Ellipsen als klickbare Bereiche über Tiere (Füllung: 100% Transparenz) legen
3. Ebenen für Infos zu den einzelnen Tieren anlegen und gestalten:
- Rechteck mit halbtransparenter Füllung als Hintergrund
- Illustration des Tiers
- Name
- Rechteck mit Kreuz (in Zustand)
4. Trigger auf Ellipse erstellen (Aktion: “Ebene anzeigen”; Ebene: [Ebene mit Infos zum jeweiligen Tier], Wenn: “Benutzer klickt”, Objekt: “Ellipse”)
5. Trigger zum Schliessen der Ebene auf dem Rechteck mit dem Kreuz anlegen (Aktion: “Ebene verbergen”; Ebene: “diese Ebene”, Wenn: “Benutzer klickt”, Objekt: “Rechteck”)
Viel Spass und Erfolg beim Nachbauen und Ausprobieren!
Wenn du Fragen hast oder Hilfe benötigst, kannst du dich jederzeit bei mir melden – ich helfe dir gerne weiter!
Interaktives Wimmelbild in Storyline – Lernspass nicht nur für Kinder
Autor: Lukas
Lesedauer: 10 Minuten
Thema: Articulate Storyline
Wir alle kennen sie, die detailreichen Bilder, auf denen es vor Menschen, Tieren oder Dingen nur so wimmelt. Der Klassiker unter ihnen ist bis heute “Wo ist Walter?”. Stundenlang kann man diese Bilder anschauen und immer wieder Neues entdecken. Auch wir verwenden Wimmelbilder in unseren Projekten: Sie wecken die Neugier der Benutzer und bringen eine spielerische Komponente ins Lernen. Diese Form setzen wir gerne ein, wenn es zum Beispiel in einer Schulung darum geht, verschiedene Gegenstände kennenzulernen oder Gefahren zu erkennen.
In einer dreiteiligen Reihe zeigen wir, wie man Wimmelbilder in Articulate Storyline gestalten und den Benutzern eine spannende, interaktive Lernerfahrung bieten kann.
Entdeckungsreise im Regenwald
Das Lernprogramm bietet dem Benutzer eine Entdeckungsreise im Regenwald, wo er die verschiedenen Tiere dieses Lebensraums kennenlernen kann. In einer ersten Version erstellen wir das Grundgerüst des Wimmelbilds. Die Tiere können durch Anklicken hervorgehoben und ihr Name angezeigt werden. Zusätzliche Funktionen werden in den nachfolgenden Tutorials erklärt.
In diesem Tutorial trainierst du folgende Storyline-Skills:
-
Neue Ebenen erstellen
-
Trigger erstellen zum Anzeigen und Verbergen von Ebenen
So geht’s:
Für dieses Tutorial brauchst du
-
Wimmelbild als Hintergrund (Vorlage oder selbst gestaltet)
-
Bilder der einzelnen Tiere des Regenwalds (ausgeschnitten, als .png-Dateien)
Die wichtigsten Schritte in Kürze
1. Wimmelbild für den Hintergrund anlegen/einfügen
2. Ellipsen als klickbare Bereiche über Tiere (Füllung: 100% Transparenz) legen
3. Ebenen für Infos zu den einzelnen Tieren anlegen und gestalten:
-
Rechteck mit halbtransparenter Füllung als Hintergrund
-
Illustration des Tiers
-
Name
-
Rechteck mit Kreuz (in Zustand)