# Operating Form Builder

This section offers detailed step-by-step information on utilizing the Form Builder for beginners. Departing from the information provided in this section, you can drive more complex scenarios independently. 

{% hint style="info" %}
This section uses the **MainLevel** map of the **RealityExamples** template, compatible with **Reality Engine version 5.4 SP1.** It is the default project that comes with a fresh installation.
{% endhint %}

{% hint style="info" %}
Please keep that in mind; to see the results of your template Forms, you must use the [Playout](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/playout) module.
{% endhint %}

### Preparing Action <a href="#operatingformbuilder-preparingaction" id="operatingformbuilder-preparingaction"></a>

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/RBHmCkf9qk9WiZaFUf3y/image.png" alt=""><figcaption><p>Example Node Tree along with the activated APM</p></figcaption></figure></div>

* Create the [node tree](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/nodegraph-actions/nodegraph/node-structure) as shown in the image above.&#x20;
* Activate the [APM](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/nodegraph-actions/nodegraph/advanced-preview-monitor) on <mark style="color:green;">**`RealityCameraScene`**</mark> output pin of the <mark style="color:yellow;">**`UE5`**</mark> processing node.

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/AcQALjF7b2iVt3e7eyB7/image.png" alt=""><figcaption><p>UserTrack Node's Input Property</p></figcaption></figure></div>

* Select the <mark style="color:yellow;">**`UserTrack`**</mark> node, go to [Node Details Panel](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/nodegraph-actions/nodegraph/node-details-panel), find and expand the <mark style="color:blue;">**`Input`**</mark> property group.
* Create a new Action.

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/2obrUYpMoepssoUTftFO/image.png" alt=""><figcaption><p>Adding Properties to Action Timeline</p></figcaption></figure></div>

* Go to <mark style="color:blue;">**`Input`**</mark> property group, click on the [Add Timeline](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/nodegraph/node-details-panel/node-property-toolset#add-timeline) button for the <mark style="color:red;">**`location`**</mark> and <mark style="color:red;">**`rotation`**</mark> properties.&#x20;

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/KGCG2p8mSDAuHdKp1UNg/image.png" alt=""><figcaption><p>Adding Keyframes</p></figcaption></figure></div>

* Go to the first frame in the Action Timeline, right-click on the <mark style="color:red;">**`location`**</mark> property circle, and select the **Add Keyframe**. Repeat the process for the <mark style="color:red;">**`rotation`**</mark> property.
* Go to a different second in the **Timeline**.

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/xmWi9xx4c27pvKjWDOkk/image.png" alt=""><figcaption><p>GamePad</p></figcaption></figure></div>

* Select the <mark style="color:yellow;">**`UserTrack`**</mark> node, activate the [GamePad](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/nodegraph-actions/nodegraph/operating-nodegraph/gamepad).
* Change the tracking <mark style="color:red;">**`location`**</mark> and <mark style="color:red;">**`rotation`**</mark> properties by using [Nodegraph Gamepad](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/nodegraph/operating-nodegraph/gamepad#gamepad-button-in-nodegraph) button with your mouse and `W`, `A`, `S`, `D`, `E`, `Q` keys on your keyboard.

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/1ZoazGWLSYmORuHZY5pp/image.png" alt=""><figcaption><p>APM</p></figcaption></figure></div>

Your last action will change the camera translation, as illustrated above.&#x20;

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/1raLZJWL6KlU5FkTBr79/image.png" alt=""><figcaption></figcaption></figure></div>

* Right-click on the circle of the <mark style="color:red;">**`location`**</mark> property, select the **Get Value** option, then right-click again and this time select the **Add Keyframe**. Repeat the same procedure for the <mark style="color:red;">**`rotation`**</mark> property.
* While the second keyframe is selected, go to the **Animation Interpolation**, and change the interpolation type to **EaseInEaseOut.**
* Go to the **Actions Menu** and **Save** it.

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/Ufss0Cps5D5gM91bu0jz/image.png" alt=""><figcaption><p>Animation Variations</p></figcaption></figure></div>

* Create variations of your animation.

Your setup must look like in the image above.

Now:

* Create a new Form.

<div align="left"><figure><img src="https://content.gitbook.com/content/F00UfwVmrAMlFEsYUV8N/blobs/EzMGiaxyt2pMaGl3poVU/image.png" alt=""><figcaption><p>Form Template</p></figcaption></figure></div>

* Go to the first animation you prepared, click and hold your mouse on the Action Play button, then drag and drop it into the Template Form Area. Repeat the same procedures for second and third animations.&#x20;

You can now go to [Playout](https://zerodensitydocumentation.gitbook.io/docs/reality-5.4-sp1/reality-5.4-sp1/user-guide/playout) and check animations by corresponding buttons.