# Overview

This tutorial describes how to configure a simple IVI solution using the file IVI\_sample.psd. This file can be found in the following location:

**...\\2D\\PSD\\IVI\_Sample.psd**

<div class="contents" id="bkmrk-this-sample-uses-the"><div class="contents"><div class="textblock">- This sample uses the Smart Importer to import necessary images and create pre-configured Controls.
- RadioButtons will be organized inside a GroupBox so that only one RadioButton can be selected at a time.
- Behaviors will be configured using Fusion to create simple interactions.
- An animation will be created configuring key frames in Scene Composer's Animation Design.
- State Machine Editor is used to create transitions, and switching between Music and Navigation context. Necessary behaviors will be configured in Fusion.

</div></div></div>Through this tutorial, users will learn the following:

<table border="1" id="bkmrk-page-theme-main-work" style="border-collapse: collapse; width: 800px; height: 148.403px; border-width: 0px;"><colgroup><col style="width: 7.98464%;"></col><col style="width: 31.9668%;"></col><col style="width: 60.0353%;"></col></colgroup><tbody><tr><td class="align-center" style="border-width: 0px; background-color: rgb(35, 111, 161);">**<span style="color: rgb(255, 255, 255);">Page</span>**</td><td class="align-center" style="border-width: 0px; background-color: rgb(35, 111, 161);">**<span style="color: rgb(255, 255, 255);">Theme</span>**</td><td class="align-center" style="border-width: 0px; background-color: rgb(35, 111, 161);">**<span style="color: rgb(255, 255, 255);">Main work content</span>**

</td></tr><tr style="height: 29.6806px;"><td style="height: 29.6806px; border-width: 0px;">Part 1</td><td style="height: 29.6806px; border-width: 0px;">Basics of using Smart Importer to import a PSD file  
</td><td style="height: 29.6806px; border-width: 0px;">Understanding how to use the Smart Importer to import a PSD file that was especially designed to be imported into Scene Composer.

- Identify various Controls and apply them in Smart Importer.
- Configure Control's properties like values, texts, alternative graphics for e.g. Slider, RadioButtons
- Finally import the scene and prepare it for use in Scene Composer.

</td></tr><tr><td style="border-width: 0px;">Part 2  
</td><td style="border-width: 0px;">Realization of a working RadioButtonGroup  
</td><td style="border-width: 0px;">Implementing a RadioButtonGroup where only one RadioButton can be selected at a time.

- Configuring a GroupBox with a group of RadioButtons
- Defining one of the RadioButtons will be defined to be the default selected object.

</td></tr><tr><td style="border-width: 0px;">Part 3  
</td><td style="border-width: 0px;">Interaction using Slider, Progressbars and Buttons  
</td><td style="border-width: 0px;">Learning how to use Fusion to react on value changes and forward values using Scene Composer's predefined behaviors.

- Creating interactivity between a Slider and a DigitalClock using the Forward Value behavior.
- More interactivity between IconButtons sending a value to a ProgressBar which forwards the value to a TextValue Control.
- Verify the correct functionality of the configured interactions in the Player.

</td></tr><tr><td style="border-width: 0px;">Part 4  
</td><td style="border-width: 0px;">Creating an Animation  
</td><td style="border-width: 0px;">Exploring the creation of an animation in Scene Composer.

- Introduction of Scene Composer's Animation Design and its panels.
- Configuring animated properties for position and size.
- Editing key frames.
- Verify the animation in the Player.

</td></tr><tr><td style="border-width: 0px;">Part 5  
</td><td style="border-width: 0px;">Basics of State Machine and Transition Control</td><td style="border-width: 0px;">Learning how to control state transitions using a state machine.

- Configuring a global state machine and setting up transitions.
- Controlling group nodes' visibility using OnEntry/OnExit actions.
- Configuring the transitions to be triggered by button presses.
- Verifying transitions and behaviors in the Player.

</td></tr></tbody></table>