Part 4: Animation settings
This section describes the animation settings. Here, the position and size of the thumbnail image of the music is changed by the animation settings.
Right-click on the "Cover" below "Music" in the SceneTree panel and select "Add Animated Property..." to open the "Property Animation Configuration" dialog.
In the "Property Animation Configuration" dialog make the following settings and press OK.
- Add to : Create new animation and enter any name (eg. MyAnimation)
- Location : /Animations
- Property: Position
- Interpolation: Spline
- Select Radio button of "Create new key frame sequence"
- and check both axes: "X" and "Y".
The screen will switch to Animation Design screen. Press "Scene Design" button in the upper left toolbar to return the screen to the Scene Design screen.
After returning to "Scene Design" screen, again right-click "Cover" below "Music" in SceneTree and select "Add Animated Property..." again. This time, configure following the below list.
- Add to : Selected Animation (Select Animation you just created)
- Property: Scale
- Interpolation: Spline
- Select Radio button of "Create new key frame sequence"
- Check both axes: "X" and "Y".
Select "Animation Design" button to show the Animation Values Panel. Select the Position Animation Values and enter the values from below table.
| Time | X | Y |
| 0 | 138.00 | 240.00 |
| 1000 | 104.00 | 207.00 |
Next, select the Scale Animation Values and enter the values from below table.
| Time | X | Y |
|---|---|---|
| 0 | 0.5 | 0.5 |
| 1000 | 1.00 | 1.00 |
Save your solution and click the Play button in the menu bar to run CGI Player.
- In the Music section: Click onto the progress bar below the Song title or drag it around. You can see that the progress time is changed according to your operation.
- In the Comfort section: Press either +/- buttons in Seat heater section and watch the value and progress bar being updated according to your operation.
In CGI Panel below the menu select your animation from the drop-down list. Then press the "run animation" button right next to the drop-down list in order to play the configured animation. You can now watch the Cover image animation in CGI Player.
