I have a problem, I need to use a webobject with my project, but my webobject needs some informations. So, I put them in variables in Storyline and now my problem is how I can give them in the query string like this :
I'm not sure how this will behave but you may have some luck hijacking the same function the Storyline player uses to show a web object. Execute this within a JavaScript trigger and you should be able to control the loaded URL. Here's an example:
Here's the function from story.js. This describes the parameters:
function OpenWebObject(strId, strUrl, nXPos, nYPos, nWidth, nHeight, nSlideXOffset, nSlideYOffset)
The values above provide an offset for a sidebar display at the default width and height. You may need to play with these values to get it to work.
You'll have problems with Web Objects in some browsers if your object target is cross browser. In your example above, you'd be able to employ storyline variables in your web object call something like this:
It works perfectly with the 'normal' HTML file, but with the HTML 5 it doesn't work at all... I think, the problem is in the 'storyline_compiled.js' file in the 'mobile' folder. But, I can't see why...
That's a tough one. The HTML5 method is different than the Flash method. I dug through the frame.js file this morning and there's a reference to open_webobject() but it's going to take some sorting to see how to invoke it. Will let you know how I get on. If you unravel the puzzle before I do, please let me know
You talk about the frame.js, but I don't find the 'open_webobject()' you talked about. Is it the the frame.js in the "story_content" folder ? Or do you speak about the "storyline_compiled.js" in the mobile folder ?
I'm not sure how this will behave but you may have some luck hijacking the same function the Storyline player uses to show a web object. Execute this within a JavaScript trigger and you should be able to control the loaded URL. Here's an example:
Here's the function from story.js. This describes the parameters:
function OpenWebObject(strId, strUrl, nXPos, nYPos, nWidth, nHeight, nSlideXOffset, nSlideYOffset)
The values above provide an offset for a sidebar display at the default width and height. You may need to play with these values to get it to work.
You'll have problems with Web Objects in some browsers if your object target is cross browser. In your example above, you'd be able to employ storyline variables in your web object call something like this:
I'm trying to go the other direction. I want to manipulate some Storyline variables from my web object. Is this possible? Have you had any success? I've been experimenting with it and haven't had much luck yet. Any insight would be appreciated.
Maybe this wil help. I had some kind of issue when embedding Construct 2 created HTML5 games inside Storyline as Webobject. I wanted two way communications. When the game loads, it receives variables from Storyline. When the game ends, it sends variables to Storyline. This is what ended up working for me (warning, it needs some knowledge of scripting):
1. Create your own xxx.js file. This way you can keep stuff in one location. No mess. You can name it myfunctions.js or whatever.
2. In that xxx.js file create a function that will do the Storyline -> Webobject communcation.
function getVariable(vName)
{
var player=GetPlayer();
var myVar = player.GetVar(vName);
return myVar;
}
Then add another function that will do the Webobject -> Storyline communication:
function setVariable(vName,vValue)
{
var player=GetPlayer();
var myVar = player.SetVar(vName,vValue);
return myVar;
}
3. In order to use these functions you need to include the xxx.js in the story.html and story_html5.html files:
4. So far you have the functions in the xxx.js file saved in the same folder as the modified story.html and story_html5.html. Now, you can call these functions from your embedded webobject.
From your webobject (for me it's an HTML5 game) you can include a javascript call:
vJSVar = parent.getVariable("myStorylineVar");
This, for example will call the function you added in the xxx.js file, which in returns provides the value of the myStorylineVar variable that you set up in Storyline. This could be any variable.
To set a variable in Storyline from the webobject use:
parent.setVariable("myStorylineVar",100);
This would again, call the function above and set the myStorylineVar variable in Storyline to 100.
5. You can also set up conditional triggers in Storyline to watch variables changing and act on it. For example, in mine, I use a variable called "action'. When "action" changes Storyline does a conditional jump to various places, depending on the value of the variable. (For example, I set the "action" to "complete" and set "score" to the game score. Storyline monitors the change of "action" and jumps to a page where it shows my score.)
I know it looks like a (speed) train of thought here but for those who are in the weeds with scripting, I hope it helps. If you don't know what all this means I can give you a simple example and you can play with that.
Note: keep in mind a couple of things. This is more around iframes than Storyline iself but there are some restrictions around calling the "parent" javascript function from inside an iframe. If they are on the same domain and same protocol (http vs. https), you should be good.
One way to avoid having to edit external files is to add a JS trigger to the master slide. You can either write an include to the header or write window level functions that can be called later. I don't mind doing surgery after publish but it gets to be a bummer doing it every time.
Hey Steve, I'm very interested to see a working sample of that. Do you happen to have one you could share? Nothing too elaborate just something in working order. Thx!
For future reference for others, you can do to it like this for html5. In the slide where the webobject exists, create a new Javascript that starts at the beginning of the timeline. The script below is my interpretation of how to solve the OP's problem:
// Find and change the src part of the iframe (this will take the first webobject in the storyline, therefore [0]. If you want the second one, use [1], etc.. var iFrameElem = document.getElementsByClassName('item webobject')[0];
@Zsolt Olah: Thank you for the approach you provided.
I can get the variables out of Storyline which is great but when I try to set variables in storyline the function seems to breakdown ie it is not being fired.
Off course this is the functionality I need the most. I'm in the process of troubleshooting the issue.
Any suggestions as to why this isn't working going into Storyline? is there something in Storyline that I need to set to allow the variables to be written to?
Is your webobject code in the body or the head? I placed mine in the body. it's been a few months ago, but I recall I was getting no communication when I had the code in the Head of the webobject. I also added an eventlistener to ensure that the vars updated in the webobject before executing setVariable.
I just saw this chain, not sure why I wasn't getting notifications when someone replied... And it's been there for a while but if someone is still interested, I just had two sessions on using a game engine (Construct 2) with Storyline at the ATD TechKnowledge conference.
I put together an interactive guide book how to build a game with source files.
You may not work with a game engine but the output of the game engine is HTML5. Check out the section on Integration with Storyline. There's an example you can download with explanation how it works under: Playbook 4 Integration with Storyline 2 -> Integration package
Thanks for sharing here. As for the notifications perhaps they were disabled within your profile? If you're set to auto-subscribe that'll include you on threads on which you've replied and then you can control each individual thread using the "subscribe" button at the top or access the subscriptions from your profile.
Hi Richard! The last response from Zsolt on this thread was a while back and I'm not sure that he's still subscribed here. If you do not hear back soon, feel free to reach out to the user directly via the 'Contact Me' option on the user profile.
35 Replies
I'm not sure how this will behave but you may have some luck hijacking the same function the Storyline player uses to show a web object. Execute this within a JavaScript trigger and you should be able to control the loaded URL. Here's an example:
OpenWebObject(1,"../../yourcontent.html",0,0,720,540,245,52);
Here's the function from story.js. This describes the parameters:
function OpenWebObject(strId, strUrl, nXPos, nYPos, nWidth, nHeight, nSlideXOffset, nSlideYOffset)
The values above provide an offset for a sidebar display at the default width and height. You may need to play with these values to get it to work.
You'll have problems with Web Objects in some browsers if your object target is cross browser. In your example above, you'd be able to employ storyline variables in your web object call something like this:
var player=GetPlayer();
var VariableSL1=player.GetVar("SLVariable1");
var VariableSL2=player.GetVar("SLVariable2");
var customURL="http://mywebobject.com/mysite.php?info1="+VariableSL1+"&info2="+VariableSL2;
OpenWebObject(1,customURL,0,0,720,540,245,52);
Hi,
and thank you for your answer!
It works perfectly with the 'normal' HTML file, but with the HTML 5 it doesn't work at all... I think, the problem is in the 'storyline_compiled.js' file in the 'mobile' folder. But, I can't see why...
Do you have any idea?
Hi, Sebastian -
That's a tough one. The HTML5 method is different than the Flash method. I dug through the frame.js file this morning and there's a reference to open_webobject() but it's going to take some sorting to see how to invoke it. Will let you know how I get on. If you unravel the puzzle before I do, please let me know
Hi !
Thank you for your answer !
You talk about the frame.js, but I don't find the 'open_webobject()' you talked about. Is it the the frame.js in the "story_content" folder ? Or do you speak about the "storyline_compiled.js" in the mobile folder ?
And I promise, if I do I let you know !
Hi Sebastien
Did you resolve your problem? I'm trying to do the same thing ...
Hello!
I have the same problem... Did you solve the problem?
I'm trying to go the other direction. I want to manipulate some Storyline variables from my web object. Is this possible? Have you had any success? I've been experimenting with it and haven't had much luck yet. Any insight would be appreciated.
Hi,
Maybe this wil help. I had some kind of issue when embedding Construct 2 created HTML5 games inside Storyline as Webobject. I wanted two way communications. When the game loads, it receives variables from Storyline. When the game ends, it sends variables to Storyline. This is what ended up working for me (warning, it needs some knowledge of scripting):
1. Create your own xxx.js file. This way you can keep stuff in one location. No mess. You can name it myfunctions.js or whatever.
2. In that xxx.js file create a function that will do the Storyline -> Webobject communcation.
function getVariable(vName)
{
var player=GetPlayer();
var myVar = player.GetVar(vName);
return myVar;
}
Then add another function that will do the Webobject -> Storyline communication:
function setVariable(vName,vValue)
{
var player=GetPlayer();
var myVar = player.SetVar(vName,vValue);
return myVar;
}
3. In order to use these functions you need to include the xxx.js in the story.html and story_html5.html files:
4. So far you have the functions in the xxx.js file saved in the same folder as the modified story.html and story_html5.html. Now, you can call these functions from your embedded webobject.
From your webobject (for me it's an HTML5 game) you can include a javascript call:
vJSVar = parent.getVariable("myStorylineVar");
This, for example will call the function you added in the xxx.js file, which in returns provides the value of the myStorylineVar variable that you set up in Storyline. This could be any variable.
To set a variable in Storyline from the webobject use:
parent.setVariable("myStorylineVar",100);
This would again, call the function above and set the myStorylineVar variable in Storyline to 100.
5. You can also set up conditional triggers in Storyline to watch variables changing and act on it. For example, in mine, I use a variable called "action'. When "action" changes Storyline does a conditional jump to various places, depending on the value of the variable. (For example, I set the "action" to "complete" and set "score" to the game score. Storyline monitors the change of "action" and jumps to a page where it shows my score.)
I know it looks like a (speed) train of thought here but for those who are in the weeds with scripting, I hope it helps. If you don't know what all this means I can give you a simple example and you can play with that.
Note: keep in mind a couple of things. This is more around iframes than Storyline iself but there are some restrictions around calling the "parent" javascript function from inside an iframe. If they are on the same domain and same protocol (http vs. https), you should be good.
I would love to see your example, Zsolt!
One way to avoid having to edit external files is to add a JS trigger to the master slide. You can either write an include to the header or write window level functions that can be called later. I don't mind doing surgery after publish but it gets to be a bummer doing it every time.
window.getVariable=function(vName)
{
var player=GetPlayer();
var myVar = player.GetVar(vName);
return myVar;
}
window.setVariable=function(vName,vValue)
{
var player=GetPlayer();
var myVar = player.setVar(vName,vValue);
return myVar;
}
Hey Steve, I'm very interested to see a working sample of that. Do you happen to have one you could share? Nothing too elaborate just something in working order. Thx!
Hey Jason -
Can take a look tonight or this weekend!
For future reference for others, you can do to it like this for html5. In the slide where the webobject exists, create a new Javascript that starts at the beginning of the timeline. The script below is my interpretation of how to solve the OP's problem:
// Find and change the src part of the iframe (this will take the first webobject in the storyline, therefore [0]. If you want the second one, use [1], etc..
var iFrameElem = document.getElementsByClassName('item webobject')[0];
var src = "http://mywebobject.com/mysite.php"
var player = GetPlayer();
var var1 = player.GetVar("info1");
var var2 = player.GetVar("info2");
// Add together the finished url with querystrings
var finishSrc = src + "?info1=" + var1 + "&info2=" + var2;
iFrameElem.setAttribute('src', finishSrc);
This post was removed by the author
@Zsolt Olah: Thank you for the approach you provided.
I can get the variables out of Storyline which is great but when I try to set variables in storyline the function seems to breakdown ie it is not being fired.
Off course this is the functionality I need the most. I'm in the process of troubleshooting the issue.
Any suggestions as to why this isn't working going into Storyline? is there something in Storyline that I need to set to allow the variables to be written to?
deleted comment ... irrelevant
Hope it helps.
edit: I should point out, that I setup the setVariable in the story.html after the story.js loads.
function setVariable(vName,vValue)
{
var player=GetPlayer();
var myVar = player.SetVar(vName,vValue);
return myVar;
}
Hi Jean-Guy,
Thanks for the reply. I will give it a try and report back here.
Changing 'Window' to 'Parent' in the Web object breaks the Web Object and there would be a high development overhead to re-develop in my case.
The strange thing is 'parent.getVariable' works ie it gets the variable from Storyline.
I might try getting the variable from within Storyline.
Is your webobject code in the body or the head? I placed mine in the body. it's been a few months ago, but I recall I was getting no communication when I had the code in the Head of the webobject. I also added an eventlistener to ensure that the vars updated in the webobject before executing setVariable.
Hi Jean,
Thanks again for coming back I appreciate your help.
I have found my issue with the help of a fresh set of eyes.
It was a Case issue in the function I was using for setting.
The 's' in 'SetVar' is lower case in Zsolts original post where I copied the function from.
Everything works as it should now.
Moral of the story, Always verify syntax and case in all code. :-)
Thanks again and hopefully this helps others.
Happy Friday! :->
Correct working syntax functions copied directly from my working JS file below:
function getVariable(vName){
var player=GetPlayer();
var myVar = player.GetVar(vName);
return myVar;
}
function setVariable(vName,vValue)
{
var player=GetPlayer();
var myVar = player.SetVar(vName,vValue);
return myVar;
}
I just saw this chain, not sure why I wasn't getting notifications when someone replied... And it's been there for a while but if someone is still interested, I just had two sessions on using a game engine (Construct 2) with Storyline at the ATD TechKnowledge conference.
I put together an interactive guide book how to build a game with source files.
You may not work with a game engine but the output of the game engine is HTML5. Check out the section on Integration with Storyline. There's an example you can download with explanation how it works under: Playbook 4 Integration with Storyline 2 -> Integration package
http://rabbitoreg.com/atd-tk-integration-package/
My original blog example: http://rabbitoreg.com/2015/03/23/c2s2/
And here's one implementation to see it in action: http://rabbitoreg.com/2015/06/11/when-i-ruled-the-world/
Hi Zsolt,
Thanks for sharing here. As for the notifications perhaps they were disabled within your profile? If you're set to auto-subscribe that'll include you on threads on which you've replied and then you can control each individual thread using the "subscribe" button at the top or access the subscriptions from your profile.
Hey Zsolt, could you relink the integration package if you still have it? The link seems dead. : (
This post was removed by a moderator
Hi Richard! The last response from Zsolt on this thread was a while back and I'm not sure that he's still subscribed here. If you do not hear back soon, feel free to reach out to the user directly via the 'Contact Me' option on the user profile.