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 .
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.
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.
