Sådan bygger du dine egne Play/pause-knapper

Afspilningskontrol i Captivate

– Lær at lave en Play/Pause-knap ved siden af hinanden

I Adobe Captivate kan du godt selv bestemme, hvilke knapper du kunne tænke dig, og du kan tilpasse farverne til din e-læring. Men du vil muligvis komme ud for, at farverne eller stilen ikke passer ind i det visuelle udtryk du ønsker. Der er også en række funktionalitetsmæssige ulemper, der betyder, at vi helt fraråder at bruge den indbyggede playback control i Captivate-projekter. Derfor har vi lavet en guide til at lave de mest nødvendige funktioner selv. Heriblandt tæller Play/pause-knapperne, som er to vigtige funktioner i e-læring.

Vi har produceret en række blogindlæg som dette, hvor vi gennemgår, hvordan du kan lave følgende:

  • En pause/play-knap
  • En progress-bar
  • En spol tilbage-knap

Men først kan vi skille os af med den indbyggede playbar. Klik på Themes i menulinjen og vælg Skin Editor.

Her fjerner du fluebenet fra ’Show Playback Control’. Nu klikker du på knappen med den blå firkant og fjerner fluebenet fra ’Show Borders’.

Sådan gør du:

Først skal vi have skillet os af med den indbyggede playbar. For dette skal du klikke på “Themes” i menulinjen, og vælge “Skin Editor”.

Her skal du fjerne fluebenet fra ’Show Playback Control’. Derefter skal du klikke på  knappen med den blå firkant og fjerner fluebenet fra ’Show Borders’.

Sådan!

Det første vi herefter har brug for, er en mulighed for at stoppe og starte afspilningen. Dette vil vi gennemgå nu.

Få en videogennemgang af processen her:

Herunder kan du se en trin-for-trin videogennemgang af hele forløbet, der er beskrevet her i blogindlægget.

Play/Pause-knapper

Nu er vi nået til at lave de to knapper. Her skal du starte med at lave to objekter – den ene skal være en pause-knap, den anden skal være en play-knap. Du kan bruge Shapes eller finde noget i Adobes Assets-menu – det er kun vigtigt at de passer sammen og har samme størrelse. Undgå Captivates Button-objekter – de giver dig langt færre muligheder.

Når du har indsat de to objekter, vælger du ’Use as Button’ under Properties og fjerner flueben fra ’Pause After’ under Timing. Nu er du klar til at få dem til at virke.

To knapper ved siden af hinanden

Den simpleste mulighed er at placere knapperne ved siden af hinanden. Derefter vælger du din pause-knap, kigger under Properties i højre side og vælger fanen Actions midt på siden. On Success vælger du ’Pause’ som action. Nu gør du det samme med play-knappen og vælger ’Continue’ som action.

Og så virker de.

Det er dog lidt klodset, at de ligger der ved siden af hinanden som på en kassettebåndoptager. I næste indlæg, viser vi hvordan du kan kombinere de to knapper til en enkelt.

Inden vi går videre, kan vi lige sørge for, at knapperne ser godt ud, og er rare at bruge. Som det første kan vi kigge på indstillingerne under Actions-fanen i Properties. Under ’Others’ kan vi vælge, om musen skal vise en hånd, når den er over knappen, om den skal kræve dobbeltklik og om, der skal afspilles en klik-lyd. Klik-lyden er ikke så elegant, så lad os sætte flueben ved Disable Click Sound, og lade resten stå, som det er.

I toppen af Properties-fanen, lige under navnet, kan vi se knappens Object States. Nu står den på normal, men da vi lavede den til en knap, fik den automatisk en RollOver, som vi kan se, når vi går ind i State View, ude i Filmstrippen i venstre side. Hvis du bruger vores knapper, vælger du blot RollOver-staten og klikker på billedfilen under Properties og finder Hover-udgaven af knappen. Ellers prøv at lege med at få den til at blive en anelse mørkere eller lysere i RollOver. Det kan du gøre ved at klikke på Edit Image, når du ser på den rigtige state.