Dear everyone, I would like to know how to change the loading spinner in the output. I've gone through some code and the story_html5.html contains an interesting line:
<span id="loadingSpinner" class="loading"></span>
I can't, however, find "loadingSpinner" or "loading" anywhere else, not in the story_html5.html or anywhere else. Changing the spinner.png in the /mobile directory didn't bear any fruits either. I assumed that the story_html5.html would use the /mobile directory but I'm wrong somewhere. Any help is greatly appreciated!
I apparently missed the player.css file. It contains no lines with loadingSpinner, but it contains 4 lines with loading. I'll keep this thread updated if I find anything interesting.
EDIT: Alright! While digging through the player.css file, I stumbled upon this little piece of styling:
.loading
{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:-100px;
z-index:1201;
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.55s;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Altering it did affect the little spinner! I changed "width: 100px;" to 500px, saved it and then opened the story_html5.html. The spinner started flying all over the place!
Hans, you're a genius. I'm going to try and play around with this, too. Please let us know if you're able to find more ways to alter the loading icon. It would be great to use a company logo or something specific to the course.
Chris, it does indeed look like spinner.png is what is supposed to be loaded. HOWEVER! I edited the spinner.png to my company logo and it didn't change! icon_loading.gif didn't bear any fruits either!
It definitely should be possible. The mystery here is how it is still capable to load the original spinner.png while it has been edited.
On a side note, I noticed that player_compiled.js has 15 lines containing loadingSpinner. It seems like a whole lot to me, plus I have pretty much zero experience with javascript, so I'll investigate that at a later time.
To make this permanent, go into your C:Program Files(x86)/Articulate Storyline/content/mobile and edit the player.css file that and copy your image into that folder, too, and it shouldn't automatically do this on everything you publish going forward. Might want to make a backup copy of the player.css file to keep the original, though.
Looks brilliant Chris however the image remained constant even when the module loaded. I had the cute dog background with the head logo merrily spinning away.
Looks brilliant Chris however the image remained constant even when the module loaded. I had the cute dog background with the head logo merrily spinning away.
It only spun for me in Chrome browser. The settings for the spinning interval, etc. is right below the same code in the player.css, so you might find some other ways to animate it. I didn't play with that.
That appears to be the player.swf file. You'd have to create a new one, I think, but it looks like it might be trying to embed another file within it, so that may not be possible without the source .fla file.
Hopefully your still subscribed to this Chris, just messing around with this, managed to get it working after a lot of trial and error, took me a while to figure out that I had to force it load in html5 (duh). I get something weird happen when I use this method, I was using a gif to load as you did but I was also using a gif as a test file within the course, but loading in html 5 using your method to change the spinner, the gif in the course gets distorted, but I can't see why it should or would?
I guess I wasn't subscribed to this, sorry. I'd have to revisit what i did to get it to work to look into it more. I spent an hour or two trying to figure out, so I'd have to dig into it again to re-familiarize myself with it. I looked at the link above and didn't see anything distorted, so I might not understand what issue(s) you might still be having.
Thanks for getting back to this one, I uploaded to dropbox, (that link works!) to see if it was an issue with the way I forced googledrive to use the html 5 but to no avail. I still get distortion on both IE and Chrome (although I haven't actually checked any other machines). Distorting wise gif in the dropbox link basically has some white pixelation and every now and then flashes a big patch of white pixels, the flash version displays smoothly, no pixelation.
I can't see any reason for this, literally just changed the player.css for the spinner.png and that bit works fine unless there is a html5/gif issue, but a quick google search didn't reveal anything.
If you don't have time no worries, it was more a point of interest than an essential.
41 Replies
Staying tuned to this should it be possible. Very interesting.
Alright, so my research wasn't thorough enough!
I apparently missed the player.css file. It contains no lines with loadingSpinner, but it contains 4 lines with loading. I'll keep this thread updated if I find anything interesting.
EDIT: Alright! While digging through the player.css file, I stumbled upon this little piece of styling:
.loading
{
width: 100px;
height: 100px;
position: absolute;
top:50%;
left:-100px;
z-index:1201;
-webkit-animation-name: rotate;
-webkit-animation-duration: 0.55s;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
Altering it did affect the little spinner! I changed "width: 100px;" to 500px, saved it and then opened the story_html5.html. The spinner started flying all over the place!
Hans, you're a genius. I'm going to try and play around with this, too. Please let us know if you're able to find more ways to alter the loading icon. It would be great to use a company logo or something specific to the course.
Taking a look.....
Aw gee, Walter! You're making me blush!
Chris, it does indeed look like spinner.png is what is supposed to be loaded. HOWEVER! I edited the spinner.png to my company logo and it didn't change! icon_loading.gif didn't bear any fruits either!
This has to be possible eventually...
It definitely should be possible. The mystery here is how it is still capable to load the original spinner.png while it has been edited.
On a side note, I noticed that player_compiled.js has 15 lines containing loadingSpinner. It seems like a whole lot to me, plus I have pretty much zero experience with javascript, so I'll investigate that at a later time.
Try this:
In player.css, change that entire "background: transparent url(.....................) no-repeat 0 0;"
with everything inside the quotes below, but change the image name to what you want to use and place that image in the mobile folder.
"background: transparent url('IMAGE-NAME.gif') no-repeat 0 0;"
AND IT WORKS!!!!!!!!!
This is a really interesting thread, real Sherlock stuff going on here!
Edited my previous post - but I got it to work!
To make this permanent, go into your C:Program Files(x86)/Articulate Storyline/content/mobile and edit the player.css file that and copy your image into that folder, too, and it shouldn't automatically do this on everything you publish going forward. Might want to make a backup copy of the player.css file to keep the original, though.
Can you upload a .story so we can see it in action both? Great work on both accounts by the way, fantastic Friday frolicking!
Holy teets! You've done it! Awesome work!
Josh - the editing is in the published output, not the .story file.
Here's a sample of the loading icon changing. (It happens right at the beginning before the first slide really loads.) It only seems to spin in Chrome (but not in Firefox).
Looks brilliant Chris however the image remained constant even when the module loaded. I had the cute dog background with the head logo merrily spinning away.
Awesome work Chris. Added this to my favorites.
What about non HTML 5 files?
Hopefully your still subscribed to this Chris, just messing around with this, managed to get it working after a lot of trial and error, took me a while to figure out that I had to force it load in html5 (duh). I get something weird happen when I use this method, I was using a gif to load as you did but I was also using a gif as a test file within the course, but loading in html 5 using your method to change the spinner, the gif in the course gets distorted, but I can't see why it should or would?
Example of html5 distortion
Non distortion flash
Any ideas?
Thanks,
Alex
Alex, interested in this, but your first link to HTML distortion 404s.
Ah thanks Joshua https://www.googledrive.com/host/0B8q4AG7hJ9KJYzZSRGNSZXBBNVU/
Hmm weird the link doesn't work, but copy and paste it and it does, looks like I'm causing bigger issues still lol!
I guess I wasn't subscribed to this, sorry. I'd have to revisit what i did to get it to work to look into it more. I spent an hour or two trying to figure out, so I'd have to dig into it again to re-familiarize myself with it. I looked at the link above and didn't see anything distorted, so I might not understand what issue(s) you might still be having.
Thanks for getting back to this one, I uploaded to dropbox, (that link works!) to see if it was an issue with the way I forced googledrive to use the html 5 but to no avail. I still get distortion on both IE and Chrome (although I haven't actually checked any other machines). Distorting wise gif in the dropbox link basically has some white pixelation and every now and then flashes a big patch of white pixels, the flash version displays smoothly, no pixelation.
I can't see any reason for this, literally just changed the player.css for the spinner.png and that bit works fine unless there is a html5/gif issue, but a quick google search didn't reveal anything.
If you don't have time no worries, it was more a point of interest than an essential.
Thanks again for the response.
This discussion is closed. You can start a new discussion or contact Articulate Support.