Vidéo et chapitres

1:20 · Vidéo sans voix

À l’écran

Partez d’un canvas vide

Choisissez un canvas vide, nommez le projet et conservez une copie du projet précédent avant de le remplacer.

Transcription descriptive et fichiers

Cette vidéo est muette. La transcription décrit les actions et les résultats visuels ; les sous-titres reprennent les instructions à l’écran.

0:00
Partez d’un canvas vide — Choisissez Empty canvas, puis nommez votre projet.
0:03
Nommez le projet — Dans Project name, saisissez Outpost Welcome.
0:07
Si un projet est déjà ouvert — Conservez son export avant de le remplacer, puis cliquez sur Continue.
0:10
Ajoutez une carte — Ouvrez + Add pour choisir un composant.
0:12
Choisissez Card — Cliquez sur Card dans Component kits.
0:14
Personnalisez le titre — Sélectionnez Title dans les propriétés de Card.
0:16
Remplacez Card title — Saisissez Welcome to Outpost dans Title.
0:18
Validez le titre — Appuyez sur Tab : le canvas reprend la nouvelle valeur.
0:20
Le titre est visible sur la carte — Modifiez maintenant Body, le texte sous le titre.
0:22
Renseignez le texte d’accueil — Remplacez le texte dans Body, puis validez avec Tab.
0:27
Nommez le bouton — Action label change le texte affiché sur le bouton.
0:29
Open → Server rules — Saisissez Server rules, puis appuyez sur Tab.
0:33
Agrandissez la carte : W — W est la largeur. Remplacez 360 par 720 pixels.
0:37
Réglez la hauteur : H — H est la hauteur. Remplacez 260 par 400 pixels.
0:41
Positionnez la carte : X — X règle la position horizontale. Saisissez 280.
0:45
Positionnez la carte : Y — Y règle la position verticale. Saisissez 160.
0:49
La carte a la taille et la position choisies — 720 × 400 pixels, position X 280 et Y 160.
0:52
Donnez une action au bouton — Cliquez sur Server rules, puis ouvrez Interaction.
0:54
Choisissez le comportement — Dans Behavior, choisissez Show message.
0:58
Créez l’action Show message — Vérifiez Show message, puis cliquez sur Create action.
1:00
Renseignez le message du bouton — Le bouton affichera ce texte pendant le test.
1:10
Testez le bouton — Cliquez sur Test, puis sur Server rules dans votre interface.
1:12
Le message s’affiche — Votre bouton fonctionne. Exit preview permet de reprendre l’édition.
1:16
Votre première interface est prête — La prochaine leçon ajoute une image et une barre de progression.

Télécharger la vidéo MP4 Sous-titres VTT Chapitres VTT

À vous de jouer

Partez d’un canvas vide et ajoutez le composant Carte (Card dans la vidéo).
Dans Propriétés, personnalisez le titre, le texte, le bouton et la disposition.
Sélectionnez le bouton sur le canvas, créez son action Afficher un message, puis essayez-le avec Tester.

Télécharger le projet d’exemple JSON ↓

Fenêtre, page, écran et composants : quelle différence ?

Fenêtre et pages: Une fenêtre possède un cadre commun et ses pages de contenu, par exemple Règles ou Actualités. Fenêtre règle le cadre ; sélectionner une page règle seulement cette page.
Écran: Une unité du projet CUI avancé. Les exemples vidéo relient deux écrans autonomes ; plusieurs pages d’une fenêtre peuvent partager un même écran technique.
Élément: Un panneau, texte, bouton, champ ou image. Sélectionnez-le sur le canvas ou dans Calques pour le modifier dans Propriétés.
Kit de composants: Un groupe prêt à personnaliser, comme Carte ou Progression. Sélectionnez le groupe pour ses options. Une page vide permet aussi de placer vos propres éléments dans l’éditeur CUI.

Sur mobile, utilisez Calques ou Propriétés, puis Canvas pour revenir à la surface de travail.

Comment modifier l’interface d’un plugin ?

Dans la configuration du plugin, ouvrez Apparence, puis son éditeur CUI s’il est proposé.
Personnalisez les couleurs, textes et positions. Les actions du plugin sont conservées.
Utilisez Appliquer à la configuration pour revenir au configurateur, puis exportez le résultat ou préparez son envoi. Depuis une fenêtre, Revenir à la fenêtre conserve aussi les retouches dans cette fenêtre.

Cette édition est disponible pour les interfaces prises en charge par le configurateur du plugin. Le projet d’exemple s’ouvre directement dans l’éditeur CUI.

Les quatre vidéos et leurs projets illustrent le parcours autonome enregistré en octobre 2026 ; leurs images et anciens libellés sont conservés. Pour les réglages actuels Fenêtre/Page, le format et l’export ZIP, suivez le guide Fenêtres de serveur.