Studio Ghibli
Weekends
Rive App
Year
2023
Methodology
- Articulate Storyline 360
- Adobe Firefly
- Adobe Photoshop 2024
Additional Credits
All artwork in this experience was created using Adobe Firefly.
A moment of calm created using Articulate Storyline 360 and JavaScript
Some weekends are made for relaxing, and this weekend I very much enjoyed having the time to work on this experiment which I have had in mind for a while now.
The entire interaction was created in Articulate Storyline 360 using a combination of sliders (full-scale images used as thumbs) and additional JavaScript and CSS.
The depth of field effect was created using the CSS Blur filter function (https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur) which dynamically updates its value based on the position of the user slider variable. Depending on whether the focus is more on the foreground than the background, the blur values will overlap to ensure that one of the layers always remains in focus.
With regards to the artwork, I am personally a huge fan of Studio Ghibli animated films which was my main source of inspiration for the overall scene. The capabilities of Adobe’s new Firefly AI image generation technology continues to amaze me, and now that it is out of beta and available generally across the standard app I am excited to see what other developers are able to create with it.
