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