Voordat Articulate Storyline 360 de ingebouwde functie had om een 360° foto in je silde te importeren, moest je wat extra stappen doorlopen. Hoe je dit doet, zie je hieronder beschreven. Ben je juist benieuwd naar de ingebouwde functie van Storyline 360, dat lees je in dit artikel.
Om een interactieve 360° foto of een virtuele rondleiding te maken in storyline heb je twee programma’s nodig:
- Storyline
- Pano2VR (misschien kan het ook met andere maar dat heb ik niet getest)
In deze tutorial krijg je uitleg over hoe je een 360° foto interactief kunt maken met Storyline. Hierdoor kun je een virtuele rondleiding of virtuele tour ontwikkelen waarbij de deelnemer om zich heen moet kijken en moet reageren op de omgeving die hij daar ziet.
Om dit te kunnen realiseren gaan we aan de slag met variabelen in storyline. Door de 360° foto een eenvoudig javascirpt commando te laten uitvoeren reageert het leermiddel hierop. Hopelijk schrikt dit je niet meteen af, we zullen het proces zo goed mogelijk uitleggen in de stappen hieronder waardoor dit met een klein beetje kennis van variabelen goed te doen moet zijn.
Storyline project starten
We beginnen het proces in Storyline omdat hier de variabelen bepaald gaan worden. Voor dit project stellen we 5 variabelen in omdat ik vijf verschillende locaties aan wil maken waar we naar toe moeten kunnen springen. Voor deze tutorial heb ik algemene namen gebruikt maar deze kun je natuurlijk instellen zoals je zelf wilt. Als je later in het proces maar dezelfde namen gebruikt.
- Maken van de variabelen.
- slideTrigger1
- slideTrigger2
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 omdat ik hier goede ervaringen mee heb.
Pano2VR
In Pano2VR wordt de 360° foto gemaakt. Wij hebben hiervoor een 360° fotocamera maar Pano2VR kan ook meerdere foto’s stitchen om dit te doen.
Leg de foto in Pano2VR
Maak een hotspot aan
Geef bij de url een javascript code op:
javascript:parent.GetPlayer().SetVar('Slidetrigger1',Math.floor((Math.random() * 100000) + 1))Wat doet dit stukje code:
- “
javascript:”: Het aanroepen van een javascript code op de hotspot - “
parent.GetPlayer().SetVar”: Aangeven dat een variabelen bepaald moet worden in de parent pagina waarvandaan de foto wordt aangeroepen (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() genereerd normaal een getal tussen 0 en 1. Door Math.floor wordt een getal op een rond getal afgerond. Door Math.random eerst te vermenigvuldigen met 100000 krijg je dus een heel groot getal. Door dit getal +1 te doen weet je zeker dat je niet het getal 0 kunt krijgen 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.
Let er hierbij op waar het bestand wordt opgeslagen. Dit moet je zowel bij het instellingen als het HTML tabblad goed zetten.
Nu kun je alle genereren en de interactieve 360° foto wordt gegenereerd.
Terug naar Storyline
In het Storyline project maken we de pagina aan waar de 360° 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° foto gaan we een webobject embedden. Om dit te doen voer je de volgende stappen uit.
Kies in het webobject scherm het folder icoontje achter address:
Wijs hiermee de map aan waar het html bestand van pano2VR staat.
Wanneer er meerdere 360 foto’s heb gemaakt voor één storyline project dan moet je de Pano2VR bestanden in aparte mappen zetten.
Nu komt het spannendste deel want de panorama staat nu in storyline en daar zit interactie in, maar die communiceert nog niet met je leermiddel.
Hiervoor gaan we een minimaal 2 variabelen instellen:
Nu komt het spannendste deel want de panorama staat nu in storyline en daar zit interactie in, maar die communiceert nog niet met je leermiddel.
Hiervoor gaan we een minimaal 2 variabelen instellen:
- Execute javascript when timeline starts
Deze javascript moet dus starten aan het begin van de pagina en zorgt er voor dat de player wordt herkend.
var player=GetPlayer();
- 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 veranderd. In ons geval dus ga naar de pagina 1.2 Als de variabele wordt gewijzigd.
Je bent nu klaar om je leermiddel te testen. Helaas werkt dit niet in de preview functies doordat dan de javascript functies zijn uitgeschakeld. Je moet het project dus publiceren en vanuit daar testen. Let op, niet elke browser doet dit goed. Met Firefox moet je vanaf de harde schijf de test goed uit kunnen voeren voordat je hem via internet moet aanbieden. Vanaf internet werkt het 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!
