Example

SMcNicol's avatar
SMcNicol
Community Member
6 months ago

How I Built a Rock Band Website Simulation in Storyline 360 Using AI-Generated HTML

The Pixel Modulators: 2026 World Tour The Concept What if your Storyline 360 portfolio piece didn't look like a course at all — but instead felt like a fully immersive band website? That was the ...
JonMichael's avatar
JonMichael
Community Member
10 hours ago

Great breakdown, thanks for sharing the whole process! The layering approach on the Slide Master is a smart way to get a real website feel inside Storyline.

I’ve been working on a web project with a clear header, navigation bar and sectioned pages, which is why your layering approach caught my attention. You can see it here.

I have a couple of questions about your build:

  • With the transparent hotspots over the Web Object buttons, did you run into any alignment issues when the course scales to different screen sizes or in the mobile player?
  • Have you noticed any performance impact from running the animated canvas background on the Slide Master, especially on older devices or in LMS environments?
  • Did you find a reliable way to avoid Storyline caching Web Object files while updating them, other than deleting and re-importing?

Thanks again for sharing the color palette and file structure too. That makes it easy to follow along.

SMcNicol's avatar
SMcNicol
Community Member
1 hour ago

Thanks so much, and great questions! 😊

  1. Hotspots and scaling: The hotspots are native Storyline objects layered right over the Web Object, so they scale together with the slide. Alignment should hold at any size. Mobile is the one I'd test on a real phone, since hover effects won't show on touch.
  2. Canvas performance: The animation is light (a grid, a few text fragments, two waves), but it runs constantly, so older devices could feel it. It also lives on the Slide Master, so it reloads on each slide. If I took it further, I'd cap the frame rate and pause it when the tab is hidden. Definitely test in your LMS.
  3. Caching: Delete and reimport is the only thing that worked for me. Two things that help: test the HTML in a browser first with a hard refresh so you only import once it's final, and put a version in the file name (v2, v3) so you know which copy Storyline is using.
  4.  

Thanks for the kind words about the palette and file structure! 🎸

Getting Started with the E-Learning Challenges

Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.