Create the Interface
We'll build out the interface page that will initially end up looking like this:
This will form the boilerplate for the next set of tutorials I'll be doing. Later in the tutorial, we'll add the AJAX object and a Mouse object.
Step-by-Step
1. Create a new Construct 2 project by going to the File menu or Ctrl-N.
2. The window above will appear. Keep it as-is and click the Create project button.
3. It will automatically create the workspace for you and it should look something similar to this.
4. In the properties panel, click on the Window Size property. We want to change the width to 320 and the height to 480.
5. Change the Name property to ajaxexample1.
6.In the Projects panel located on the right, click on the Layout 1 icon. It will change the Properties panel to show the layout properties.
7. We want to adjust the Layout size and the Margins. Adjust the properties so that it looks like the example.
8. We can now start adding our objects. Let's start with the text objects.
Click anywhere on the canvas page and the Insert New Object window should appear. Select Text and click the Insert button.
9. It will show up in the Projects and Properties panel and when selected. Change the Name of the property to txtTitle.
Create another Text object and name it txtReturnedData using the same method described above.
10. Add the image we will be clicking on by following the same method we've learned before. Double click the page, but this time, choose Sprite, then click the Insert button.
11. You'll notice that a bounding box and a set of floating windows will appear when the sprite is selected. This is how we will get our image into Construct 2. It should look similar to sample above.
12. In the Edit image window, click on the folder icon and it will pull up a dialog box where you can choose the image we can use.
13. In this example, we can use the logo.png file that comes with Construct 2. Close the Edit image windows.
14. Our interface or page should look something as per the example above. To keep it tidy, let's name the image, logo.
15. Now that we have all the parts for the interface, we should arrange them as per the example below. You can drag and drop the objects into the layout.
For the next set of screens, take note of the property positions, size and the text. For example, the title.
Do the same for the other two objects.
The image or logo.
The txtReturnedData text box.
Now that we've gotten our boilerplate interface and layout, let's hook it all up.