Scaleform Panel Content Tutorial

Overview

This tutorial outlines the process for creating a heading gauge in Adobe Animate. This process can be generalized to creating other Scaleform content for use in Panels.


For those unfamiliar with Scaleform or its capabilities, please review the Scaleform Overview before continuing.


Gauge Design

In Adobe Animate CC, open the HeadingGauge.fla file located in the SDK at the following location:

Lockheed Martin/SDK/Panels Gauges User Interface/Scaleform/Samples/HeadingGauge.fla

The Heading Gauge consists of a single frame and layer. In the Scene Window, a compass is already visually added to the stage. This compass is a MovieClip and named Compass. The Compass MovieClip is composed of the following elements, which can be found in the Library Window:



Gauge Integration Using The Prepar3D Interface

The type of heading gauge that this example is based on is a heading indicator that uses a gyroscope to operate. Native Prepar3D aircrafts have a queryable simulation variable (i.e. A-var) for what gyroscopic heading indicators should show which is called:

A:Plane heading degrees gyro

To query for this, import the Prepar3D Interface in the code behind for the stage. The code behind for the first frame and layer's stage is found in Actions Window. Once the interface is imported, the desired gyro heading can be applied as a rotation to the compass's directional characters which will make it behave like a heading indicator like so:

compass.NSEW.rotation = -Prepar3D.VarGet("A:Plane heading degrees gyro","degrees");

This rotation can be applied every frame by adding an event listener to the stage which will continuously update the heading indicator using Prepar3D's current variable value.


Lastly, although not shown in the code sample, the entire contents of the stage is scaled according to the stage scale mode. Depending on the Scaleform content, a different scale mode besides the default StageScaleMode.SHOW_ALL may be desired. Read more about the scale mode here. An example of using a different scale mode, is shown below:

import flash.display.StageScaleMode;
stage.scaleMode = StageScaleMode.NO_SCALE; // no scaling is desired

Adding Panel Content to SimObject

The general procedure for adding panel content to SimObjects can be found in the Panel Configuration Files. In addition to this, here are the specific steps for editing the panel.cfg relevant to add the Heading Gauge in one of several different configurations.

Instrument Panel Heading Gauge

For the Heading Gauge to be an available window to open and close in a SimObject, a WindowDefinition will need to be added to panel.cfg. To do this, first define the window number and the text the menu item in Prepar3D will display:
[Window Titles]
...
WindowNN=Scaleform Heading Sample
Next, define the window with its own identifier and specify the path to compiled Heading Gauge:
[WindowNN]
Background_color=0,0,0
visible=0
ident=HEADING_GAUGE
alpha_blend=0.85
window_size=0.25,0.25
position = 1 // upper-middle
SCALEFORM_FILE=HeadingGauge.swf

where:


Virtual Cockpit Heading Gauge

[VcockpitNN]
Background_color=0,0,0
size_mm=1024,1024
visible=1
pixel_size=1024,1024
texture=$YOUR_RTT_TEXTURE_NAME
SCALEFORM_FILE=HeadingGauge.swf

where:


- top -