Blurring backgrounds on Trigger or Button click
Feb 17, 2024
In the attached example, the background changes quickly to blurred using a state change when the user clicks a label below. I really want the background to blur over one half or 1 second like a real camera would pull focus, as the panel slides up over it, so that it doesn't just pop on, which is a distraction (to me anyway).
I thought using a state change would do it, but I don't see a way to control how quickly an image changes from one state to the next, unless you run it through several 'states' as an animation. That seems a bit memory intensive when done with a full background, but someone can correct me there?
I've tried different layering show/hide calls , but that is not working out either, since a 'shown' layer is always on top of the current layer and this has to happen behind everything. I saw a thread from 8 years ago about blurring programatically but it stopped 4 years ago. If anyone has this solved already, appreciate your pointing me to the answer.
I did this as an idea for the Tab challenge so if anyone wants the source PS files to use it, let me know. The two slides are just two MidJourney background ideas/choices. Thanks!
2 Replies
Alan, is the attached what you're looking for? (I only did the first slide.)
Storyline doesn't allow us to apply an animation to an object in a state if that object does not already have an animation. However, you can copy an object with an animation and paste it into a state and the animation will be retained.
So, to repeat this for Slide 2, open the States tab for your background image, select the blurred state and copy that image and select Done to let Storyline know you're done editing the state for the moment.
Paste the blurred image onto the slide as if it's a new object. Apply an animation (0.75 seconds looked okay to me). Copy (or cut) the animated blurred image, go back to your background image, edit states and paste it into the blurred state. Send it to the back, Select the front blurred image (the one without any animation) and delete it. All that will remain in the blurred state is the animated version of the blurred image
While still in the Edit States mode, copy the Normal (unblurred) image and paste into over the blurred state. Send the unblurred image to the back. Then select Done.
When you preview this, you should see a smooth transition to the blurred state when you select a tab. To make the effect more noticeable, you might consider slowing down the motion path animation that brings up the panel. You can change the timing of the fade-in of the blurred image by editing the blurred state and selecting the Animation tab (that is, you don't need to repeat the steps above to change 0.75 to 1.0 or whatever; once applied, you can edit the animation of an already-animated object in a state).
Hope that helps.
It's true that you can't apply an animation to different states of an object. So, for example, if you have a picture, create a new state, and edit the image with the "change picture" function (or with other formatting options), you won't be able to animate the picture in that state.
However, you can apply an animation to an object that is inserted or pasted into another object's state(s). So, using that same picture, if you create a new state, delete the picture from that state, and then insert/paste another picture into that state, you will be able to animate the picture in that state.
In the attached file, I cut the blurred photo from the custom state, pasted it back into the state, and then added animations. The end result is the same as Steve's. (Like him, I only edited the background photo on the first slide.)