Blurred Backgrounds Effects in E-Learning #366: Challenge | Recap
Design Visually Rich Backgrounds Using This Simple Effect
Background images are one of the best ways to add visual intere...
Published 3 years ago
Version 1.0
Blog Post
Basic, but I wanted to see we could do some dynamic blurring. It worked, so I am sharing it as an example.
Note: I know very little about optometry, so please forgive my gross misrepresentation of the process.
Try it; https://360.articulate.com/review/content/1d93fc2c-d430-41d9-88c2-2c97784d8c6d/review
Story file: https://paedagogus.org/elh/BG.story .
Note: I know very little about optometry, so please forgive my gross misrepresentation of the process.
Try it; https://360.articulate.com/review/content/1d93fc2c-d430-41d9-88c2-2c97784d8c6d/review
Story file: https://paedagogus.org/elh/BG.story .
- This too, is some next-level tinkering! Thanks for sharing your source file. I will be taking a closer look at this 🤓
- With inspiration from Math's post, I updated the splash dialog to blur just the background behind the shape. The only thing required was to add a script to apply the backdrop-filter:blur to the object's styling, for example:
object.setAttribute("style", "backdrop-filter:blur(3px);");
If you use the original story file, the object number is 10 (bottom timeline object = 0, and the dial has two objects, so the shape = 10).
The styling did not seem to apply if the script was run using timeline starting on the shape, so I used a delayed cue point.
FYI- Works in Chrome, but the backdrop-filter:blur does not seem to work in Firefox.- Nice Nathanial... in some previous project i added numbered images to the layers in Storyline by script...so a user can see what number he needs to use to act on a specific Storyline timeline layer.
Here is a sample of that i just uploaded to Review.
https://360.articulate.com/review/content/4b791629-02fd-424c-8e6c-6c818c738c3c/review
Basically creating a new div with specific styles showing what Storyline layer it is...
Sharing the file in a post in a sec...
PS. the images added to the stage.. are NOT on the Storyline timeline. They are only in the external files folder and are put dynamically ( as Movieclips in Flash years ago ) on the Storyline stage...
Here you can find the sample.
https://community.articulate.com/discussions/articulate-storyline/creating-storyline-elements-dynamically- Alas, this is well over my head. Thanks for sharing though. It is good to have reference sources for potential future projects. I will explore it more when I have some time.
- I really love the way you use the 'timeline' ordering in Storyline and the classNames to get your elements selected instead of the 'acc-name' option i use mostly.
var object1 = document.getElementsByClassName("slideobject-maskable")[0];
I did it before too in some projects, but forgot about its use. Especially for shapes and other default Storyline elements this for sure has benefits on 'acc-name' selection. Eg. i added a shape in between your elements and it gets nicely blurred too. - Super clever! This is awesome (regardless of optometric accuracy). Love it.
- What a great idea! The dynamic blurring works beautifully. I can almost hear the optometrist saying "Which is better, 1 or 2?"
