Are you a Creative Experience User?
Today, we are going to walk you through the relatively new Timeline feature in our Creative Experience application for creating animations with key frame techniques.
Preparing the model
Insert your product into the experience and expose the parts that you wish to animate.
more data about exposing: HERE
Creating an animation
Animations can be created using the context menu or via action bar commands. Right click on your Product Actor and select Create Local Animation.
Alternatively, you can always find the Animation Editor under Panels section of the action bar or right-click the newly created animation and select Edit.
For ease of use, let's rename the animation into "ShowcaseAnimation" with the F2 keyboard shortcut or via right-click.
The animation will consist of Tracks representing each of the Actors and their animated properties. To create these tracks and add a keyframe, you can use the properties panel shortcut.
- By keeping open the Animation Editor panel and selecting the Actor in the project view, you will see new red dots in the Properties panel.
- Click on the dot next to transform values.
- It will create a new track for this property if one doesn't exist. (note: right-click on the dot for additional options)
Editing an animation
Move the time scrubber to the end time of your animation. (click & drag the left-right icon)
Record Mode
The Editor is capable of recording the modifications you do in the scene automatically.
To do this, toggle into Record mode via Record button.
Once you are done positioning your actors do not forget to leave Record mode with the same toggle button.
Manual mode
To do further tweaks without entering Record mode, you can use the Update key command. Its reachable by right-clicking on keyframe or the dot in the Properties.
Hint for usage
During Record mode, other authoring commands work and can be combined. For example, you can use the Distribute command in combination to create more than one key frame at once.
Reverse direction
Usually, we would like to be able to play backwards the animation.
You can use the standard "Ctrl+C" + "Ctrl+V" commands to create a duplicate of the Explode animation.
*note: when pasting an animation, you have to select the actor and paste, not select the Animations node.
Let's rename this to "ReverseShowcase" and toggle on the Reverse option in the properties of our new Animation.
Controlling Animations
Now, its just a matter of triggering the right animations. Here is an example of using 2 buttons with Natural Language.
For java script developers check out the STU.Animation class.
