Let’s animate the scale and position of the Engine Speed gauge we created previously (ref. section 4.2) so that when we navigate to the System Overview Page the Engine Speed gauge will animate out of the way. This will allow the user to still see critical engine information even when in a Menu / Overview page.
Animate the Scale and Position of the TG RPM Gauge
Click on the Programming Tab
In the Programming Items pane, click the +
Select New State Machine
Change the State Machine Name to: Animate RPM
Change the Group Name to: _Animations
Select the box Initial State
To the right of the State Machine Diagram, change the Name from Initial State to: RPM Large
In the State Machine Diagram pane, click and drag a blue rectangle onto the diagram canvas (this creates another state)
Change the name of this New State to: RPM Small
Select the RPM Large state
To the right, in the On entering state execute these actions, click the +
Select Screen Application (Screen) > AnimatePosition
Change the Data to:
Click OK
Click the + again
Select Screen Application (Screen) > AnimateScale
Change the Data to:
Click OK
Click the + again
Select Screen Application (Screen) > Process > (Empty)
Click OK
Now select the RPM Small state
To the right, in the On entering state execute these actions, click the +
Select Screen Application (Screen) > AnimatePosition
Change the Data to:
Click OK
Click the + again
Select Screen Application (Screen) > AnimateScale
Change the Data to:
Click OK
Click the + again
Select Screen Application (Screen) > Process > (Empty)
Click OK
Now we need to create transitions from one state to the other.
Click on the transition icon 
Hover your mouse over the RPM Large state
Click and drag your mouse to the RPM Small state (this creates a transition from the RPM Large state to the RPM Small state)
Click on this new transition:
Make sure the Auto Create box is checked
It should have automatically created a name: RPM Large to RPM Small
Follow that same process to create a transition from the RPM Small state to the RPM Large state
Click on this new transition:
Make sure the Auto Create box is checked
It should have automatically created a name: RPM Small to RPM Large
Now we need to fire the two Events that we created in order to animate the RPM Gauge.
Click on the Page Designer Tab
Select the I/O Animations Page
Open the CW PopOut Menu container
The Edit CW PopOut Menu window will appear
Click on the I/O Image in the design area
In the Image Widget Properties pane, under Touch Actions:
Select Touch Action
Clear Transition
Select Touch Action - Start
Select Go To View…
Select (This Layer).Default I/O Animations View
Click OK
Select Touch Action - Release
Select Fire an Event…
Select RPM Small to RPM Large
Click OK
Keep the CW PopOut Menu container open
Click on the System Overview Image in the design area
In the Image Widget Properties pane, under Touch Actions:
Select Touch Action
Clear Transition
Select Touch Action - Start
Select Fire an Event…
Select RPM Large to RPM Small
Click OK
Select Touch Action - Release
Select Go To View…
Select (This Layer).System Overview Page
Click OK
Click the X in the upper right corner to close the Edit CW PopOut Menu window
Select Key 10 and the Edit Key Behavior - Key 10 window will appear
For Key Down, Select Fire Event and choose CE Toggle SimData
Create and Load your configuration to test.
When accessing the I/O Animations Page:
- The bottom left key will toggle the PopOut Menu
- When the PopOut Menu is shown, it will automatically hide after 6 seconds
- When you navigate to the System Overview Page, the RPM Gauge should animate its scale and position
- When you navigate to the I/O Animations Page, the RPM Gauge should animate to its original scale and position
- Key 10 will turn Simulation Mode on and off