To learn more, read through below:
- Examples of Interactions and Scripting in Thunder
Prefer to watch a video instead? Check out our video walkthrough here.
Simple Hover Effect:
Scripting Click to Play Effect:
Add a hover interaction to a widget easily in Creative Studio.
- Select the plus sign under Action
- Select Add Mouse Hover
- Select Play Effect
- Select Add Widget to Animate > Select widget from the dropdown
- Click No Animation to open the preset animation effects panel
- Select the desired preset effect
- Optional: Reverse on Leave (when the mouse hovers off, the effect will play)
- SAVE (if this is missed steps 1- 8 must be repeated)
Use the Play All button in the upper right hand corner, to preview the effect.
Scripting is in reference to animating objects using a coding language on the back-end of the ad. In Thunder, a click-to-play animation can be applied without the need for complicated programming languages.
Use this feature for any click-to-play animations within Studio. The following instructions show how to create a click-to-play ISI or legal text using preset animations.
Create a click to play ISI or legal text box:
1. Create all of the widgets to be used in the click to play legal text effect:
Name each asset to easily identify later on:
- CTA text "terms and conditions apply see more"
- CTA shape
- Legal text
- Background of legal text
- X button to hide legal text
2. Add them to the canvas and position each widget:
3. Add animations to the widgets:
We want the "background legal text", "x button", and "legal text" to slide up upon clicking the see more text. To do this, add a slide up effect to those three widgets.
Tip: Hold CMD on keyboard to multi-select widgets and apply a preset animation to affect all selected.
4. Program the click to play effects associated to each widget:
Select the “see more” text widget to program the click interaction.
5. Program the "legal text", "legal text background", and "x button" to slide down (this is the same step as step 3 only adding a slide down):
6. Program the "x button" widget to slide the legal text down upon click:
- Select the "x button” widget to program the click interaction
- De-Select the Slide Up effect, and instead select Slide Down
7. Use the eyeball on the layers panel to hide the "x button", "legal text", and "legal text background" layers, so it will only appear when called upon.