Smartform-Schaltflächen mit Mouse-Over-Effekt

Stan­dard­mä­ßig ändert sich der Zustand einer Smartform-Schaltfläche nicht, wenn der Benut­zer mit der Maus dar­über fährt. Im heu­ti­gen Blog­ar­ti­kel möch­te ich Ihnen zei­gen, wie Sie auch die­se Schalt­flä­chen um einem Hover-Effekt ergänzen.

Zu die­sem Artikel

Pro­gramm: Adobe Captivate 6
Schwie­rig­keits­grad: Fortgeschrittene
Benö­tig­te Zeit: ca. 10 Minuten
Ziel: Sie erfah­ren, wie Sie einen Hover-Effekt für Smartform-Schaltflächen erzeu­gen können.

Hover-Effekt
Hover-Effekt

So erzeugen Sie einen Hover-Effekt für Smartform-Schaltflächen

  1. Fügen Sie eine Smart­form ein und ver­wen­den Sie die­se als Schaltfläche. 
    Smartform als Schaltfläche
    Smart­form als Schaltfläche

    Hin­weis: In einem frü­he­ren Blog­ar­ti­kel habe ich Ihnen bereits beschrie­ben, wie Sie eine Smart­form als Schalt­flä­che ver­wen­den.

  2. Dupli­zie­ren Sie die Smartform-Schaltfläche: Drü­cken Sie [Strg] + [D] (Win)/ [Cmd] + [D] (Mac).
  3. Kli­cken Sie im Bedien­feld Eigen­schaf­ten der (neu­en) Smart­form im Bereich Fül­lung und Strüch unter Fül­lung auf den Farb­wäh­ler und wäh­len Sie eine gewünsch­te Far­be für den Hover-Effekt aus, z. B. Oran­ge.

    Farbe des Hover-Effekts festlegen
    Far­be des Hover-Effekts festlegen
  4. Tra­gen Sie außer­dem unter Alpha fül­len den Wert 100 % sowie eine Brei­te von 0 ein.

    Transparenz und Rahmen
    Trans­pa­renz und Rahmen
  5. Mar­kie­ren Sie mit gedrück­ter Tas­te [Shift] die (bestehen­de) Smartform-Schaltfläche sowie die (neue) Smart­form und plat­zie­ren Sie die­se mit Hil­fe der Leis­te Aus­rich­ten direkt über­ein­an­der.

    Ausrichten
    Aus­rich­ten
  6. Rechtskli­cken Sie auf die neue Smart­form und wäh­len Sie In Rollover-Smartform kon­ver­tie­ren.
    Die Smart­form wird in eine Rollover-Smartform umge­wan­delt und Sie sehen den Rollover-Bereichauf der Folie.

    Rollover-Smartform
    Rollover-Smartform
  7. Mar­kie­ren Sie den Rollover-Bereich und tra­gen Sie in den Eigen­schaf­ten im Bereich Fül­lung und Strich unter Alpha fül­len den Wert 0 % sowie eine Brei­te von 0 ein.

    Rollover-Bereich formatiert
    Rollover-Bereich for­ma­tiert
  8. Plat­zie­ren Sie den Rollover-Bereich über der Rollover-Smartform und pas­sen Sie die Grö­ße an die Rollover-Smartform an. 

    Rollover-Bereich in der Größe anpassen
    Rollover-Bereich in der Grö­ße anpassen
  9. Tes­ten Sie das Pro­jekt in der Vorschau.

Sie sehen, dass nun beim Über­fah­ren der Schalt­flä­che mit der Maus ein typi­scher Hover-Effekt aus­ge­löst wird – auch wenn die Objek­te über­ein­an­der lie­gen, kön­nen Sie wei­ter­hin die Schalt­flä­che auslösen.

Übri­gens: Wenn Sie gene­rell mehr über Adobe Captivate mit prak­ti­schen Bei­spie­len erfah­ren möch­ten, emp­feh­le ich Ihnen mein Buch zu Captivate 6 – wenn es spe­zi­el­ler und noch detail­lier­ter sein soll: Ein Semi­nar oder einen Captivate-Workshop bei unsKon­tak­tie­ren Sie uns ein­fach. Wir ana­ly­sie­ren Ihr Vor­ha­ben und stel­len Ihnen eine idea­le Lösung vor.

Ähnliche Themen:

Captivate 6: Smartformen
Was ist neu in Adobe Captivate 6?

Schreiben Sie einen Kommentar

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