WEBVTT

1
00:00:00.000 --> 00:00:02.999
Start with Empty canvas
Choose Empty canvas, then name your project.

2
00:00:03.000 --> 00:00:04.999
Name the project
Enter Outpost Welcome in Project name.

3
00:00:05.000 --> 00:00:06.999
Name the project
Enter Outpost Welcome in Project name.

4
00:00:07.000 --> 00:00:09.999
If a project is already open
Keep an export before replacing it, then choose Continue.

5
00:00:10.000 --> 00:00:11.999
Add a Card
Open + Add to choose a component.

6
00:00:12.000 --> 00:00:13.999
Choose Card
Click Card under Component kits.

7
00:00:14.000 --> 00:00:15.999
Customize the title
Choose Title in the Card properties.

8
00:00:16.000 --> 00:00:17.999
Replace Card title
Enter Welcome to Outpost in Title.

9
00:00:18.000 --> 00:00:18.699
Replace Card title
Enter Welcome to Outpost in Title.

10
00:00:18.700 --> 00:00:20.699
Confirm the title
Press Tab: the canvas updates to the new value.

11
00:00:20.700 --> 00:00:22.699
The title is visible on the Card
Now edit Body, the text below the title.

12
00:00:22.700 --> 00:00:24.699
Enter the welcome text
Replace the Body text, then confirm with Tab.

13
00:00:24.700 --> 00:00:25.499
Enter the welcome text
Replace the Body text, then confirm with Tab.

14
00:00:25.500 --> 00:00:27.499
Enter the welcome text
Replace the Body text, then confirm with Tab.

15
00:00:27.500 --> 00:00:29.499
Name the button
Action label changes the button’s visible text.

16
00:00:29.500 --> 00:00:31.499
Open → Server rules
Type Server rules, then press Tab.

17
00:00:31.500 --> 00:00:33.499
Open → Server rules
Type Server rules, then press Tab.

18
00:00:33.500 --> 00:00:35.499
Make the Card wider: W
W is width. Replace 360 with 720 pixels.

19
00:00:35.500 --> 00:00:37.499
Make the Card wider: W
W is width. Replace 360 with 720 pixels.

20
00:00:37.500 --> 00:00:39.499
Set the height: H
H is height. Replace 260 with 400 pixels.

21
00:00:39.500 --> 00:00:41.499
Set the height: H
H is height. Replace 260 with 400 pixels.

22
00:00:41.500 --> 00:00:43.499
Position the Card: X
X controls horizontal position. Enter 280.

23
00:00:43.500 --> 00:00:45.499
Position the Card: X
X controls horizontal position. Enter 280.

24
00:00:45.500 --> 00:00:47.499
Position the Card: Y
Y controls vertical position. Enter 160.

25
00:00:47.500 --> 00:00:49.499
Position the Card: Y
Y controls vertical position. Enter 160.

26
00:00:49.500 --> 00:00:52.499
The Card has the chosen size and position
720 × 400 pixels, positioned at X 280 and Y 160.

27
00:00:52.500 --> 00:00:54.499
Give the button an action
Click Server rules, then open Interaction.

28
00:00:54.500 --> 00:00:56.499
Choose the behavior
In Behavior, choose Show message.

29
00:00:56.500 --> 00:00:58.499
Choose the behavior
In Behavior, choose Show message.

30
00:00:58.500 --> 00:01:00.499
Create the Show message action
Check Show message, then click Create action.

31
00:01:00.500 --> 00:01:02.999
Enter the button message
The button will display this text in Test mode.

32
00:01:03.000 --> 00:01:05.499
Enter the button message
The button will display this text in Test mode.

33
00:01:05.500 --> 00:01:06.999
Enter the button message
The button will display this text in Test mode.

34
00:01:07.000 --> 00:01:09.999
Enter the button message
The button will display this text in Test mode.

35
00:01:10.000 --> 00:01:12.499
Test the button
Click Test, then Server rules in your interface.

36
00:01:12.500 --> 00:01:16.499
The message appears
Your button works. Use Exit preview to continue editing.

37
00:01:16.500 --> 00:01:19.500
Your first interface is ready
The next lesson adds an image and a progress bar.