Forum Discussion
Changing/Tweaking Loading Animation
Hello,
quite old topic but I always try to share when I find a solution.
So, yes, it is possible to change loading animation. However, as I'm only developing for HTML5 now, I only know the way for HTML5, and not for flash. Generally editing swf's is ... you know what ;)
And the answer for HTML5 is quite simple.
1. Open you story_html5 file, then inspect it (ctrl+shift+i) to find following code line (right on the beginning)<span id="loadingSpinner" ...>
2. Select it and in Styles tab, there is .loading, .blocked
class where you have line
background: transparent url(data:base64...longcharacterset)
- just click right on the link and click open in new tab - your browser will generate proper loader image for you, save it to your local drive.
3. When you have loader image, you can freely change (with for example photoshop) its color. Or even shape, Go for it! But for further editing you need some knowledge in CSS.
4. Save your modified loader.png and paste it to your_lesson/mobile/loader.png
5. Now, edit file your_lesson/mobile/player.css
and then find a line .loading, .blocked
{background: transparent url(data:base64...longcharacterset)
inside it. Replace url(base64 code, all of it)
to url(loader.png)
6. If you changed only color - save and enjoy your new loader. If you changed something else, you need more adjustments in CSS file, but if you want to this you, you probably know what to edit.
You can also upload your revised png to a Base64 encoder, and replace that code in the player.css stylesheet, without having to add the image itself. I used this website: https://www.base64-image.de/
Related Content
- 8 months ago
- 10 months ago