Challenge - 360° video including hotspots in Storyline
Nov 25, 2012
Hello Storyline Heroes!
For an EHS eLearning, we are trying to build an interactive 360 virtual tour. The learner moves around a factory, and finds hotspots with quiz questions.
We are trying to achieve something similar to Montse Posner Anderson great example “making video more interactive” , but with the possibility for the learner to move around the area at its own pace.
This is an example of what we would like to create - but in Storyline:
http://vr.photoconcept.se/archive/locomotive/
(it’s in Sweedish – simply click on “Starta test”)
Any suggestions? Thanks in advance for any ideas!
Annick
44 Replies
Hi !
I have a similar problem. I created a virtual tour with Panotour pro with hotspots.
I put my virtual tour in Storyline as a web object. It works :)
I add a javascript code to a hotspot like "alert("...."). It works when I'm clicking on :
Now, I want to add a javascript code to change a variable value in Storyline. I created a variable "myvar1" in Storyline as Boolean. I add this code to a hotspot in Panotour : var player = GetPlayer(); player.SetVar("myvar1",True);
Unfortunatly, it doesn't work.
Have you any idea ? where have I to push my javascript code to communicate with Storyline ?
Thanks for your help !
Hi Quentin,
Chances are, you have to reference the parent SL Player in your Panotour JS code.
Hope this helps,
Alex
Hi Alexandros,
I'm trying with this JS code : var player = parent.GetPlayer(); player.SetVar("myvar1",True);
but this doesn't work. SL seems to have no reaction. I make a button displaying variable's value (false by default). There is no change when I'm clicking on hotspot.
Maybe I need to add JS code in SL or Panotour to force SL to do what Panotour wants ?
I'm a student and this virtual visit is very important for my final graduate exam. Maybe I'm looking for an impossible communication ? ;)
Thanks
Quentin
I also would have thought accessing the "parent" would have worked. Can you post your project file here?
Hi Michael,
Sorry I wasn'nt at work last days. I can't post my real project here (confidentiality) but here is a sample project with the same functions. I have 3 hotspots : 2 with simple text (lamp + wordmap) and the last one with JS Code (photo frame) : var player = parent.GetPlayer(); player.SetVar("myvar1",True);
I would like that the variable's that become "true" when the learner click on the photo frame.
Thanks for help
Which file has the "var player = parent.GetPlayer();" code in it? I can't seem to locate it in the WebObjects folder.
I found JS code in this file : story
According to the link below, it appears that the js code has to be entered in the Hotspot link setup. Did you try it there?
http://www.kolor.com/wiki-en/action/view/Panotour_Pro_-_Hotspot_Properties_-_Link
yes this the way I choose
Can you try replacing your javascript code for Storyline, with just 'alert("Hello");' instead, without the quotes? I tried editing the XML files directly and added that code, but it doesn't seem to be firing.
Just with alert("hello") it works
Well that's good on your end. I'm downloading the trial of PanoTour now so I can hopefully troubleshoot easier here.
Thanks
2017-05-25 18:08 GMT+02:00 E-Learning Heroes :
> [image: E-Learning Heroes]
> ------------------------------
> Reply to Challenge - 360° video including hotspots in Storyline
>
>
> *Michael Anderson replied:*
>
> Well that's good on your end. I'm downloading the trial of PanoTour now so
> I can hopefully troubleshoot easier here.
> Reply
>
> View
>
> ------------------------------
>
> To post a response, simply reply to this email.
>
> You received this email because you subscribed to this discussion.
> Unsubscribe
>
>
> © 2017 Articulate Global, Inc. All rights reserved.
>
Quentin, I'm sorry, but the PanoTour Pro program keeps crashing. Are you using version 2.5? That's the trial that I downloaded, and I can't figure out how to add javascript to a hotspot at all. Can you share your demo PanoTour project file with me?
I'm working with panotour pro 2.5. To add javascript in hotspot, go to
style tab and modify an hotspot style by clicking on "advanced options".
The last one is javascript code I think. Then you can chose this style for
the hotspot on the scene. I will try to send you panotour file tomorrow
(I'm in France)
There is the panotour file with the sample project
I get errors about missing jpg files when I open your project. I did manage to create my own project file yesterday, and did insert javascript into it, but I was unable to get any of the javascript to run. I'll work on it more over the weekend.
Yes, using A-Frame and importing as a web object, we got a prototype to work,
Success to you,
Hi, everyone!
I have exciting news to share!
We just released another update for Storyline 360. In Update 54, we’ve included important fixes and new features.
One of the features we’ve included is:
Create immersive learning experiences with 360° images. Add interactive elements, such as hotspots and markers to engage learners as they explore.
360° images are currently in public beta for Storyline 360, which means you can use them for production as we continue to enhance them.
To take advantage of this feature, launch the Articulate 360 desktop app on your computer and click the Update button next to Storyline 360. You'll find our step-by-step instructions here.
Please let us know if you have any questions by posting here or directly reaching out to our Support Engineers.