Teil 1: Slideshow mit Bullets

In diesem Tutorial erfährst du etwas über den Umgang mit Dynamic Panels. Anhand einer Bühne / Slideshow zeigen wir dir, wie man in einem Dynamic Panel verschiedene Inhalte in States separat voneinander trennen kann.

Axure Version: 8.0
Level: Beginner
Dauer: 30 min
Themen: Axure Basics, Bühne, Bullets, Dynamic Panel, Slideshow

Preview:

Das Konzept

Die ‚Slideshow‘ ist ein Dynamic Panel mit mehreren States. In jedem State ist ein Bild mit einem Label. Das Panel bekommt den Befehl von einem State zum nächsten zu wechseln. Zusätzlich werden 3 Bullets (Kreise) unter dem Panel angelegt, die parallel zur Slideshow durchroutieren und den aktuell angezeigte Inhalt durch ihre Füllfarbe symbolisieren.

1 Vorbereitung

Im ersten Schritt werden alle benötigten Elemente auf der Bühne angelegt und platziert. Ziehe auf die Arbeitsfläche ein Dynamic Panel Widget und nenne es ‚Slideshow‘. Füge dem Panel drei States hinzu und nenne diese Bild 1, Bild 2 und Bild 3. Größe und Platzierung des Panels kann individuell angepasst werden.

Dynamic Panel mit drei States erstellen

2 States mit Inhalten füllen

Öffne das Dynamic Panel im ersten State und füge mit Image ein Bild und mit Label einen Text hinzu.
Füge ebenso die Inhalte vom 2. und 3. State hinzu.

Panel ‚Slideshow‘ State: Bild 1

Panel ‚Slideshow‘ State: Bild 2

Panel ‚Slideshow‘ State: Bild 3

Nachdem alle Inhalte gesetzt sind, verlasse das Dynamic Panel wieder. Setze 3 gleichgroße Bullets unter das Panel. Hierfür kannst du ein Rectangle Widget auf die Arbeitsfläche ziehen, den kleinen grauen Punkt auf der oberen rechten Ecke anklicken um die Kreisform auswählen. Anschließend Höhe und Breite des Kreises anpassen.

Rectangle Widget: in einen Kreis umwandeln

Kopiere den Kreis zweimal und platziere alle Kreise mittig unter das Dynamic Panel.

Slideshow mit Bullet Points

Füge den Kreisen jeweils mit Rechtsklick unter Interaction Styles… einen Selected-Style zu.
In unserem Fall wird eine graue Füllfarbe bei Fill Color ausgewählt.

Interaction Style auf Bullet Points hinzufügen

3 Interaktion erstellen

Die Slideshow soll nun bei OnLoad drei Sekunden warten und dann im 3-Sekunden-Takt die 3 Bilder durchroutieren. Auch die drei Bullets sollen parallel zu den Bildern mitroutieren und jeweils in den Selected-Style versetzt werden. Markiere hierfür das Slideshow-Panel und füge dem Event OnLoad die Aktionen Wait und Set Panel State hinzu. Wähle im Case Editor nun das Dynamic Panel ,Slideshow‘ aus und wähle unter Select the state die Aktion Next aus.

Wähle die Animationseigenschaften Animate In & Animate Out aus und bestimme die Zeit für die Bildrotation und für die Animation.

Case Editor: Set Dynamic Panel ‚Slideshow‘ – Select the state ‚Next‘

Case Editor: setzte Animate In & Animate Out

Die fertige Interaktion sieht dann wie folgt aus:

Fertige Interaktion auf dem Panel ‚Slideshow‘

4 Bullets mitrotieren lassen

Damit die Bullets symbolisch zu den Bildern mitrotieren, muss dem Dynamic Panel ‚Slideshow‘ über OnPanelStateChange mit einer Bedingungsabfrage mitgeteilt werden, wann, welches Bullet mit der Farbe Grau gefüllt werden soll. Hierfür klickt man doppelt auf OnPanelStateChange, benennt den Case zu ‚1. Bullet setzten‘ und setzt über Add Condition die Bedingungen.