Créer l'interface
Nous allons construire la page d'interface qui va finir par ressembler à ceci:
Cela formera le passe-partout pour la prochaine série de tutoriels que je vais faire. Plus tard dans le tutoriel, nous allons ajouter l'objet AJAX et l'objet souris.
Etape par étape
1. Créez un nouveau projet Construct 2 en allant dans le menu Fichier ou en faisant Ctrl-N.
2. La fenêtre ci-dessus apparaît (ou une fenêtre différente si vous utilisez une version +/- évoluée). Gardez-le tel quel et cliquez sur le bouton Créer un projet.
3. Il créera automatiquement l'espace de travail pour vous qui devrait ressembler à quelque chose semblable à cela.
4. Dans le panneau Propriétés, cliquez sur la propriété Taille de la fenêtre. Nous voulons changer la largeur à 320 et la hauteur à 480.
5. Changez la propriété Nom à ajaxexample1.
6.Dans le panneau des projets situés sur la droite, cliquez sur l'icône Layout 1. Le panneau Propriétés va afficher les propriétés de la page (layout1).
7. Nous voulons régler la taille de la page et les marges. Réglez les propriétés de sorte qu'il ressemble à l'exemple.
8. Nous pouvons maintenant commencer à ajouter les objets. Commençons par les objets texte.
Faites un double clic n'importe où sur la page et la fenêtre Insérer un nouvel objet devrait apparaître. Sélectionner l'élément texte et cliquez sur le bouton Insérer.
9. Il apparaîtra dans le panneau de propriétés lorsqu'il est sélectionné dans le panneau des projets. Modifiez le nom de la propriété à txtTitle.
Créez un autre objet texte et nommez-le txtReturnedData en utilisant la même méthode décrite ci-dessus.
10. Ajoutez l'image qui sera cliquée en suivant la même méthode que nous avons appris avant: Double-cliquez sur la page, mais cette fois, choisissez Sprite, puis cliquez sur le bouton Insérer.
11. Vous remarquerez que la boîte englobante et un ensemble de fenêtres flottantes apparaissent lorsque le sprite est sélectionné. C'est ainsi que nous obtiendrons notre image dans Construct 2. Il doit ressembler à l'échantillon ci-dessus.
12. Dans la fenêtre Modifier l'image, cliquez sur l'icône du dossier et une boîte de dialogue va apparaitre où vous pouvez choisir l'image que vous voulez utiliser.
13. Dans cet exemple, nous allons utiliser le fichier logo.png qui est fourni avec Construct 2. Fermez la fenêtre modifier l'image.
14. Notre interface ou la page doit ressembler à quelque chose comme dans l'exemple ci-dessus. Pour la garder bien rangée, nommons l'image, logo.
15. Maintenant que nous avons toutes les pièces pour l'interface, disposons-les comme dans l'exemple ci-dessous. Vous pouvez glisser et déposer des objets dans la page.
Pour la prochaine série d'images, prenez note des positions de propriété, la taille et le texte. Par exemple, le titre.
Faites la même chose pour les deux autres objets.
L'image ou le logo.
Le texte txtReturnedData.
Maintenant que nous avons obtenu notre interface passe-partout, let's hook it all up (impossible de trouver la traduction...).