360 graden foto’s in Storyline

Om een interactieve 360 graden foto of een virtuele rondleiding te maken in Storyline heb je twee programma’s nodig:

  • Storyline
  • Pano2VR

In deze tutorial leggen we je uit hoe je een 360 graden foto interactief kunt maken met Storyline. Hiermee ontwikkel  je een virtuele rondleiding of tour. Tijdens deze virtuele toer kijkt de deelnemer om zich heen en reageert op de omgeving die hij daar ziet.

Om dit te kunnen realiseren gaan we aan de slag met variabelen in Storyline. Door de 360 graden foto een eenvoudig javascirpt commando te laten uitvoeren, reageert het leermiddel hierop. Klinkt misschien lastig, maar we hopen dat dit je niet meteen afschrikt. We gaan het proces zo goed mogelijk uitleggen in enkele stappen. Met deze opgedane kennis  van variabelen, kun jij straks zelf een 360 graden foto interactief maken.

Storyline project starten.

We beginnen het proces in Storyline. Hier bepaal ik de variabelen. Voor dit project stellen we 5 variabelen in omdat ik vijf verschillende locaties aan wil maken waar ik naar toe wil springen. Voor deze tutorial heb ik algemene namen gebruikt, maar deze kun je natuurlijk instellen zoals je zelf wilt. Let wel op dat je later in het proces steeds dezelfde namen gebruikt.

  • Maken van de variabelen.
    • slideTrigger1
    • slideTrigger2

Storyline 360 graden variabelen

Nu we de variabelen hebben, gaan we de foto’s bewerken in het panorama programma. Ik heb hiervoor Pano2VR gebruikt. Misschien lukt het ook wel met andere tools maar dat heb ik niet getest. Zelf heb ik goede ervaringen met Pano2VR.

Pano2VR

Je maakt de 360 graden foto in Pano2VR. Wij hebben hiervoor een 360 graden fotocamera. Heb je die niet? Zorg er dan voor dat je in een ander programma de panorama stitcht. (bv PTGUI of autostitch)

Leg de foto in Pano2VR.

storyline 360 graden pano

Maak een hotspot aan

storyline 360 graden hotspot maken

Geef bij de url een javascript code op: javascript:parent.player.SetVar(‘slideTrigger1’,Math.floor((Math.random() * 100000) + 1))

Wat doet dit stukje code:

  • “javascript:”: Het aanroepen van een javascript code op de hotspot.
  • “parent.player.SetVar”: Aangeven dat een variabelen bepaald moet worden in de parent pagina waarvandaan je de foto aanroept (in ons geval het Storyline leermiddel).
  • “(‘slideTrigger1’,)”: Dit is de variabele die bepaald wordt. Deze heb je in Storyline gemaakt.
  • “Math.floor((Math.random() * 100000) + 1))”: Een random getal genereren waarop deze bepaald moet worden. De functionaliteit Math.random() genereert normaal een getal tussen 0 en 1. Math.floor rond een getal af. Door Math.random eerst te vermenigvuldigen met 100000 krijg je een heel groot getal. Door dit getal +1 te doen weet je zeker dat je niet het getal 0 krijgt en de variabele niet veranderd.

Zet de bestemming op: “_self”.

In Pano2VR genereren we nu een html5 output zodat we deze kunnen integreren in het Storyline project.storyline 360 graden html5

Let goed  op waar je het bestand opslaat. Dit moet je zowel bij het instellingen als het HTML tabblad goed zetten.

Nu kun je alles genereren en de interactieve 360 graden foto wordt gegenereerd.

Terug naar Storyline

In het Storyline project maken we de pagina aan waar de 360 graden foto in moet komen. En een (aantal) pagina(‘s) waar je naar toe moet kunnen springen in het project.

Op de slide van de 360 graden foto gaan we een webobject embedden. Om dit te doen voer je de volgende stappen uit.

storyline 360 graden embedden

Kies in het webobject scherm het storyline 360 graden insert webobjectfolder icoontje achter address:

Wijs hiermee de map aan waar het html bestand van Pano2VR staat.

Wanneer je meerdere 360 foto’s heb gemaakt voor één Storyline project, zorg dan dat je de Pano2VR bestanden in aparte mappen zet.

Nu komt het spannendste deel. De panorama staat nu in Storyline. Daar zit interactie in, maar die communiceert nog niet met je leermiddel.

Hiervoor gaan we een minimaal 2 variabelen instellen:

  1. Execute javascript when timestoryline 360 graden instellen variabelenline starts.

Deze javascript moet starten aan het begin
van de pagina en zorgt ervoor dat de player wordt herkend.

var player=GetPlayer();

  1. Jump to when variable changes (deze heb je net zoveel nodig als pagina’s die je wilt kunnen aanroepen).

In de volgende trigger bepaal je wat er moet gebeuren als de variabele verandert. In ons geval ga je naar pagina 1.2 als je de variabele wijzigt.

Je bent nu klaar om je leermiddel te testen. Helaas werkt dit niet in de preview functies omdat de javascript functies zijn uitgeschakeld. Je moet het project eerst publiceren en vanuit daar testen. Let op! Niet elke browser doet dit goed. Met Firefox moet je vanaf de harde schijf de test goed uitvoeren voordat je hem via internet aanbiedt. Vanaf internet werkt het leermiddel wel in alle browsers.

 

Een paar lessons learned

  • Web objecten werken niet goed in de Storyline player op een android apparaat (IOS is niet getest).
  • Een lightbox slide op een webobject werkt niet goed omdat je dan eerst over het grijze van de lightbox moet hoveren voordat de pagina ververst. Dit lijkt een bug van Storyline te zijn.

 

Veel plezier en succes met het maken van je eigen virtuele tour.

.

UA-68307674-1