Give brief overview (using diagram tool, sketching diagrams on paper, interview questions). Give explanatory statement and consent form. Start recording. Then give overview of the 5 parts.
Give them part 1 earth structure diagram.
In this part, I will be giving you a couple of different diagrams on paper. For each one, I want you to identify any adaptations that you think could be made to the diagram for the situation that is given. That is, think of ways you can modify the diagram so that it is better suited to the being presented in the given situation. For example, with the first diagram, you will need to think about how you would adapt the large diagram on paper to a small, mobile device. For every adaptation that you can think of for the diagram, I'd like you to write down what it is -- that is how the diagram changes, just in a sentence or two -- and also sketch out how the diagram would look when it is adapted in that way.
You can use as much paper as you need to, and you can have up to 10 minutes for each diagram, so don't feel like you are under pressure to get them done quickly. If you have finished drawing your diagram adaptations before the 10 minutes is up and you can't think of any more, then just tell me when you are done.
The tool that I will be getting you to use today is designed to make it easier to construct multiple versions of a single diagram that are appropriate for different situations. In this part of the experiment, I will be guiding you through the construction of an extended version of the earth structure diagram that you've just seen.
Give them the diagram requirements, explain the three configurations, summarise the colour & language adaptations. Then let them read through the requirements and ask any questions. Once they have finished, I start the tool.
The screen is divided into two main areas. This left pane is where you will construct the diagram. It shows you a list of the configurations in the diagram at the bottom, and allows you to edit the configurations in the main canvas area above. We will create one configuration for each of the three configurations shown in the diagram requirements sheet.
The right pane allows you to preview how the diagram will look and behave under specific viewing conditions. You can have any number of previews, each showing the diagram at a given page size, for a particular language, and a particular default font size. You can create different previews to represent different viewing devices -- for example, you could have a large page size using colour to represent a computer monitor, and a small page size using greyscale to represent an e-book reader. As you edit the diagram in the left pane, you will see the previews change.
Let's begin constructing the first diagram configuration by placing an image object on the page, by dragging the image from the panel on the left into somewhere in the middle of the page. Try resizing the image object by dragging the green handles. You might notice those squiggles in the middle of the object: they are springs within the object, and will control the objects placement and size when connected up to other springs in the diagram. Clicking on the horizontal or vertical spring allows you to change the properties of the spring. For the moment, we'll leave them alone; don't worry if you accidentally click on them. We'll use the springs a bit later to define how slight adjustments are made to the layout within the configuration.
Now, try moving the image object around the page by dragging it with the mouse. If you move it close to the right edge of the page, without releasing the mouse button, you'll see a hint pop up offering to attach the image to the right of the page. You can see the red line indicates where it's going to attach to. Release the mouse button while that hint and the red line is showing and the attachment will be made. If you try to move the object around now you'll find that it won't move from the right edge, but you can still move it up and down. Attaching objects is one way of controlling their placement.
In the diagram preview, in the right pane, you can see that the image is aligned to the right edge of the page, just as it is in the editor in the left pane. Try dragging the light blue handle in the preview to resize the page and see how the image remains attached to the right edge. But see also that the vertical position of the object doesn't change. This is because nothing is controlling the vertical position of the object, so it is just placed the same distance from the top edge of the page as it is in the editor.
A simple way to detach an object from everything it is connected to is to hold down shift while dragging the object. Try it. Now, undo that action by clicking on the yellow undo toolbar button. The object has been reattached to the page edge. Every change that you make to a diagram can be undone and redone, just as in other editing programs, using the undo and redo buttons. Now that the object is attached to the page edge again, right click on it. Various operations are available in the right-click menu of an object, including detachment. In the "Detach" menu, there's a single item for the one attachment the object has. Click it to remove that one attachment. If there were any other attachments this object had, they would remain. Now the object has been detached, it's free to be dragged around the page again.
Let's change the image to the earth cutaway that we need for this diagram. Right click the image, select "Choose image", and now select the image that we need.
Now we will create one of the three labels. Drag a rectangle on to the page somewhere to the right of the image. Rectangles, ellipses and diamonds can have text placed in them. When one of these shapes is selected, you can press Enter to type in some text, or you can get to it from the right click menu. Do one of these now, and a box will pop up letting you edit the text in the shape. Type in the English text of the one of the labels that we need, "Inner core", and press Enter. We'll add German language text strings later.
Notice how the height of the rectangle shrunk. That's because, by default, shapes with text in them will be just tall enough to fit their text at their current width. Try changing the width of the rectangle. If you make it narrow enough, it needs two lines to fit the text, so it grows taller. In this mode you can't set the height of the text because it is automatically chosen. You can see that the top and bottom handles on the shape are greyed out, indicating that you can't set the height. What we want in the diagram is for this text box to be sized so that it can definitely fit all of the text on a single line. We can change how the rectangle determines its size based on its text by right clicking on it and choosing from the "Text shape sizing" menu. The last option is the one we want -- "Require shape width and height shrink to fit text on one line". So choose that one, and notice that the rectangle has been resized to just fit the text.
Next, we will add an arrow connecting the label to the relevant position on the image. You can add an arrow by clicking the arrow toolbar button. Now you are in a mode where you can click to add a point to the new arrow. Move the mouse to the middle of the left edge of the rectangle and the handle turns red -- this indicates that if you click here, the arrow will be attached to the object at this point. So click there, and then click somewhere within the very middle of the image, where the inner core is. Since we just want this arrow to have a single line segment, we can press Enter or click the "Done" button at the top. Try dragging around the image or the rectangle, and notice that the arrow is attached.
In the diagram we want two more of these arrow-labels. Because these three objects differ only a little, by the text in the rectangles and where the end of their arrows are attached to, they make a good candidate for using a master object. Master objects are user-defined reusable objects that you can create and then use in configurations. Master objects are useful for two main reasons: one, they support re-use, so that you an avoid creating and modifying multiple copies of the same, basic object. And two, they let you provide different alternative presentations of the one object that can be selected at display time with user interaction. The advantage here, for these arrow labels, is the former -- we have three copies of essentially the same object, so we turn it into a master object and then have three instances of it in the configuration. Then later, if we need to edit the objects, we can just do it once in the master object definition, instead of needing to edit all three copies.
You can create a new, blank master object by clicking the little "plus" button in the bottom left corner of the window, but we have already created the objects that we want to now be a master object. So we have another option: to promote these objects, the rectangle and the arrow, to a master object. Do this by selecting the two objects by drawing a selection rectangle round both of them, or by control-clicking one then the other, then right click on one of them and choose "Promote to new master object". You're prompted for a name for the new master object, so enter something appropriate like "Label".
See that a new tab in the editing pane has been opened for the new master object, and that it also appears on the left as an object that can be dragged into the diagram. There is a restriction, though: you can only create instances of master objects in diagram configurations; you can't create them in other master objects. Notice how the icon for the new "Label" master object on the left is dull, indicating that you can't drag it into the editor.
If you switch back to the Diagram Configurations tab, you can see that the rectangle and arrow have become an instance of the new master object. Now, we need to create two more of these label objects. Instead of just dragging two new label objects from the panel on the left, let's use the clipboard. The label object is already selected (it's green) so click on the Copy toolbar button, then click Paste twice. Select the rectangle from one of the new instances and press Enter to start editing its text. What we're doing now is overriding the text that would otherwise be inherited from the master object. Because we're editing the text of a shape that is part of a master object instance, we can explicitly choose whether to inherit the text from the master or to override it with some specific text. So type in "Outer core" and press Enter.
Now do the same for the third rectangle and give it the text "Mantle".
Attach the endpoint of the two new arrows to the earth image by first selecting the arrow object and then dragging the handle to the appropriate position. Then, move the rectangles so that they are in the right order and rougly in the right position.
Let's look at styling the rectangles now. The requirements state that they should be yellow, and their text should be at 120% of the default font size. Since these properties are common to all instances of the label, it makes sense to change them on the master object itself, so click on the Label tab and then select the rectangle. To change its fill style, click on the Object Fill toolbar button, which will show the palette. If we wanted a pattern instead of just a solid colour, we can add that pattern to the palette by clicking Edit. But we just want solid yellow, so select it by clicking that colour. Then click on OK. Notice how all three of the rectangles in the preview window became yellow. Like with the text, it's possible to override styling properties on master object instances, but since we didn't change the fill style on those instances, they just inherit the newly selected colour from the master object.
Next, we want to change the text size. Click the Font Size toolbar button and hit the up arrow next to the "100" a couple of times, then click OK. Because the font size is set as a percentage of the default font size, in the preview we can use the font size up and down buttons to see how the diagram layout will change. Try changing the preview default font size. If we'd chosen a specific pixel size, then the text would not have changed font size in the preview.
Switch back to the Diagram Configurations tab now. Another of the requirements for the label rectangles is that they are all the same width. But because they are set to fit text on a single line, and they all have different text, they currently come out at different widths. One of the layout tools we can use to control widths is the Column. Placing objects in a column will make them all have the same width -- the maximum width of those child objects -- if it is possible. They will also all be aligned horizontally. This is exactly what we want, so select the three rectangles and then click the "Place objects in column" toolbar button. Now all of the rectangles are just wide enough to fit the longest text.
Objects in a column don't have their vertical position or size constrained at all. It is just their horizontal position and size that is affected. So at the moment the rectangles can be moved freely up and down the column. We'll fix their vertical positioning a bit later.
Now let's work on the hint that is shown at the bottom of the page. It consists of an image for the mouse pointer and a rectangle for the text, so create a new image and rectangle object in the configuration. Change the image to be of a mouse cursor instead of the default picture (mouse-cursor.png). Put the appropriate text in the rectangle.
We want the mouse pointer image to be in the bottom left corner and for the rectangle with the text to be right to the right of it. First, let's define the horizontal sizing behaviour of these two objects together. To control the widths of the two objects, and position them from left to right, we can use a horizontal spring distribution. Spring distributions are layout objects that control the positions and sizes of their children according to the sizes and strengths of the springs within those objects. This is just like how springs are used in user interface widget toolkits to specify how widgets are sized when resizing a window.
So, to place these two objects in a spring distribution, first make sure the rectangle is to the right of the image. Then select both, and click on the "Distribute objects" toolbar button. In this menu, there are eight choices. The six on the left are position distributions, and the two on the right are spring distributions. Position distributions just control the position of objects without taking into account how big they are. Spring distributions will place objects one after another but will also resize the objects according to how much space is available in which to lay them out. Since we want the rectangle to resize according to the page width, so that the text can wrap if necessary, we want to use the spring distribution. So click on the horizontal spring distribution button, and the two objects will be placed in a spring distribution with newly created spring objects between them.
Try making the spring distribution wider and narrower by dragging one of the thick pink ends. Notice how the extra space is distributed to all of the objects, and also notice how you can't make it narrower than the minimum width of the rectangle, as determined by its longest word. How that extra space is distributed to the objects is determined by the properties of the three explicit spring objects (the pink ones) and the springs within the two objects (the black ones shown when an object is selected). Each of these springs has a minimum, preferred and maximum size. The preferred size is determined by the green handles that you normally use to resize an object. Click on one of the pink springs now. The red handles are used to set the minimum size, the yellow handles are for the maximum size. By default the minimum size is 0 and the maximum is infinity.
Extra space is distributed proportionally to each of the objects in the spring distribution. When you resized the spring distribution just now, the extra space was allocated equally to each of the five objects. You can change the proportions by setting the stretchiness of the springs. The stretchiness is shown in the small black box when you select a spring. Try changing the stretchiness of the image's horizontal spring to 3 by clicking on the current stretchiness number. Now resize the spring distribution: see that the image gets allocated three times the amount of extra space that the rectangle and the spring objects do. Now change the stretchiness to 0, and notice that the image stays at a fixed width; it gets none of the extra space.
The sizing behaviour that we want is that the image stays at a fixed width, the rectangle takes up the remaining space up to what it needs to lay out its text on a single line, and if there is any space remaining after that, it should be empty. We will be attaching the left and right edges of the spring distribution to the page left and right edges. So we only need one of the three spring objects: the rightmost one. Remove the other two by right clicking on each one in turn and then selecting Delete.
Next, we need to ensure that the rectangle prefers to be at a width so that the text will fit on one line. Remember that we can change the text shape sizing for that in the rectangle's right click menu, just like we did with the yellow label rectangles. This time though we want to choose the option that makes the shape prefer to be small enough to fit on one line. This will allow the shape to become narrower if there is insufficient page width. Because we do want the rectangle to shrink if there is not enough space for it, we can't make it have a stretchiness of zero. We need to prefer to allocate extra space to or remove space from the spring on the right, instead. We can do this by leaving the rectangle's stretchiness at 1 and giving the spring a very high stretchiness. Set it to 100,000 and we get the right behaviour. Finally, we can drag the left handle of the spring distribution to the page left to attach it, and similarly for the right handle. Try resizing the page in the configuration or in the preview window and see how the available page width influences the sizing and positions of the objects.
Now we come to controlling the vertical sizing behaviour of the two objects. As a first attempt, let's try attaching the image object to the bottom of the page and then aligning the two objects together along their vertical midpoint. Drag the image and attach it to the bottom page edge. To align the two objects together, select them both and then click on the "Align objects" toolbar button. The alignment we want is the second one on the bottom row. Select it, and a new horizontal guideline will be created and the middle of the two objects will be attached to it. If the page is wide enough, then this looks fine, but try narrowing the page in the preview so that multiple lines of text are needed. You can see that the text will fall off the bottom of the page, since the image stayed in a fixed position. Even if you increase the page width back to a single line, try increasing the default font size, and you'll get the same problem.
So we can't just use alignment here if we want the image and text to be centred around the same vertical point while ensuring that the rectangle doesn't fall off the page. So, first, delete the guideline that is attaching the two objects. Instead, we can use a Row object to control the heights of the image and rectangle and to ensure they are aligned, too. Select the two objects, then click on the "Place objects in row" toolbar button. This ensures that the image object is made tall enough to match the height of the rectangle, and when this happens the image is centred in the region it has been allocated. Play around with the page size and the default font size in the preview to see how the two objects behave now.
The final thing we need to do with the hint is to make the rectangle have a white fill and no stroke around its edge. To remove the stroke, we use the "Object stroke width" toolbar button, where we can just set it to zero pixels.
The size and placement of the earth image and the three yellow labels need to be controlled too, and just as with the hint, we can use spring distributions to acheive this. Horizontally, we want to distribute the earth image and the column of labels. For that we select the image object and the column object then choose to add these to a horizontal spring distribution. Springs have been inserted around them, and these will be used to define the padding as marked in blue on the diagram on the requirements sheet. Attach the left and right sides of the spring distribution to the page edges. If you play with the page size in the preview, the objects resize horizontally in a reasonable fashion. However our requirements are that the yellow labels stay at a fixed width, and that the gaps between the page edges, the earth image and the column of yellow rectangles stay fixed too. Remember that we can set the stretchiness of the three spring objects to zero in order to fix their size. The column object will take its stretchiness from the yellow rectangles inside it. Because these three rectangles were set to require the text to fit on one line, it means that they are horizontally inflexible -- they automatically have zero stretchiness.
Now play with the page size in the configuration, and see how the yellow boxes and the three springs stay at a fixed width.
The final layout that needs to be done is to control the vertical layout of the earth image and the yellow rectangles. Place the three rectangles in a vertical spring distribution, and then place the image object in one of its own. We need to attach the ends of the spring distributions to the page edges now, but first I will get you to do the trickiest one: start dragging the bottom end of the image's vertical spring distribution towards the bottom of the page. Notice how it is offering to both attach the it to the page bottom, the red line, and also place the spring distribution object inside the row object, represented by the blue rectangle. We only want to do the attachment, so before releasing the mouse button press the tilde key. A window pops up allowing control over which of the attachments and placements are made. Uncheck the blue option and then click OK. The attachment is made and the placement within the row isn't.
Before moving on I want to show you another couple of ways of doing the attachment, so click Undo. Right click on either end of the spring distribution, and in the menu you can choose to make an attachment. In the Attach menu, choose "bottom edge to existing guideline". Now you are in a mode where you can simply click on the guideline that you want to attach the bottom of the spring distribution to. In this case, it is the bottom edge of the page -- move the mouse to the page bottom and then click once. This makes the attachment.
Undo the attachment again, and we'll try a third way. A problem with dragging the bottom end of the spring distribution is that the row object is in the way of the page bottom. We can hide that object, and other objects too, so that we have clear access to the page bottom. Click on the View button, which is the one with the magnifying glass. In here you can uncheck some options to hide objects in the canvas. Uncheck "rows and columns", and "shapes" as well. Now you can drag the end of the spring distribution to attach it easily.
As a shortcut, you can press Tab to change which objects are hidden from view. Press it once and the objects will be restored. If you keep pressing it, various objects will be hidden.
Now hook up the remaining edges of the spring distributiosn to the page edges. Finally, set the stretchiness of the two vertical springs around the earth image to zero.
That concludes the layout for the first diagram configuration. We've successfully made the diagram adapt to available space and default font size by having its layout adjust accordingly.
The diagram requirements also specify that the diagram needs to adapt to the device supporting interactivity, where moving the mouse over one of the yellow label rectangles will show an appropriate hint in the bottom corner about the corresponding part of the earth. That means that when the mouse is moved over one of the rectangles, the objects at the bottom of the page that comprise the hint about moving the mouse have to be replaced with other objects that make up the hint for the mantle, the inner core or the outer core. The way we can have different objects being swapped in and out is to make each set of them an alternative presentation of the one master object. Before, for the labels, we used master objects to help with object reuse. Alternative presentations is another use for master objects. If you go back over to the Label master object, at the bottom you see there's one thumbnail listed in the "Master object alternatives" list. That means that there's only one possible form that instances of this master object can take. For our hint, we can create a new master object that has four alternatives: one will be made up of the cursor image, rectangle, row and springs that are currently in the diagram configuration, while the other three will be made up of objects that represent the three hints that can be shown when hover over the yellow labels. Interaction handlers are specified on the yellow labels that control which alternative of the Hint master object will be shown.
Just as when we were creating a master object for the labels, we can promote the objects along the bottom of the configuration to be a new master object. Switch back to the diagram configuration. Select the image, rectangle, row, spring and the spring distribution. Be careful not to select any other objects. You might find it helpful to press Tab to hide other objects when doing the selections and control+click to select each object in turn. Then promote them, calling the new master object "Hint". The new master object is shown, with its single alternative. The other three alternatives that we want are actually similar to this one, except without the image object. The row object also won't be needed, since we've only got the rectangle to worry about. So instead of creating the new alternatives from scratch, we can just duplicate this current one. Right click on the canvas somewhere and choose "Duplicate". For the new alternative's name enter "Mantle Hint". Remove the image object and the row. Then give the rectangle the appropriate text.
If you switch back to the diagram configuration, you can see that the first alternative of the Hint master object is still shown. To see what the new Mantle Hint alternative looks like in context, right click on the green shape that surrounds the master object instance. In the "Show alternative" menu, select "Mantle Hint". You can see that it has switched to showing the new alternative, but it's not hooked up exactly right. The left and right sides of the spring distribution are attached to the left and right edges of the page, but the object isn't vertically positioned properly. This is because when we duplicated the original alternative, the one with the mouse cursor image, we also duplicated all of the attachment information, but it was the image that was attached to the bottom of the page, not the text rectangle. And because we deleted the image from the new alternative, there is nothing that keeps the master object instance as a whole from being attached to the page bottom. The solution here is just to attach the rectangle to the bottom of the page.
The final two alternatives we need to add to the Hint master object are very similar to the one we just added. All that differs is the text in the rectangle. So, create these two alternatives by duplicating the "Mantle Hint" alternative and then changing the rectangle's text.
If you now go back to the configuration and switch the master object instance to show either of the two new alternatives, you will see that they are already hooked up correctly to the configuration's page edges.
So now we have four alternative presentations of the hint at the bottom of the diagram, but without any explicit instructions, only the first will ever be shown. To change which one is shown at display time, we add interaction handlers to objects in the diagram. Specifically, as the diagram requirements state, when the mouse cursor is moved over one of the three yellow rectangles, the appropriate hint must be shown at the bottom of the page. Interaction handlers can be added to any visual object in the diagram. In our case, we need to add handlers to each of the three yellow rectangles.
We will start with the "mantle" label. Right click on the yellow rectangle from the mantle label and select "Edit interactions". Here you are presented with an initially empty list of actions that will be performed when some interaction happens on this object. Click the plus button to add an action. Currently you can choose from only two actions -- revealing a hidden object when you hover with the mouse on this one, and selecting a particular alternative of a master object instance to show. This second one is what we want, since we want to control which alternative of the Hint master object is currently shown, so from the Type drop down, choose "Select an alternative". Now we can choose when this action is performed. The diagram requirements state that when the mouse is moved over one of the yellow labels, then the relevant hint is shown at the bottom, and when the mouse moves away from the label, the original hint with the mouse cursor image is restored. That leads us to need two actions here: the first is to select the Mantle Hint alternative when the mouse is moved over the object, and the second is to select the original Hint alternative when the mouse is moved out from the object.
So for this first action, from the "On" drop down, choose "Mouse over". Next, we need to choose which master object instance is the target of this action. Choose the option "A particular master object instance", and then click on the "dot dot dot" button. We want to target the Hint master object instance, so click on it. Finally, we need to specify which alternative to switch to. Click on "A particular alternative", then from the drop down choose the Mantle Hint alternative.
Create the second action now, which will be the same except that it will be performed on "Mouse out" instead of "Mouse over", and it will select the first alternative of the master object. Click OK to save these actions. Now let's see if they work. In the preview, move the mouse over the yellow "Mantle" label, and the alternative shown should change.
Add the interactions for the other two yellow labels now.
So now the diagram's first configuration adapts to available space and default font size using springs for layout changes, and also supports interaction to provide additional information at display time. Next, we'll make it adapt to different colour modes. Currently, the diagram is designed with the assumption that it is presented on a device that supports colour, such as using a computer monitor or a colour printer. The tool supports a default adaptation to a greyscale device. If you click on the "Colour" drop down in the preview and choose "Greyscale", you can see how the diagram will adapt. The default is just like when you print a colour document on a black and white laser printer -- colours are rendered as shades of grey. Our diagram requirements though are for the yellow labels to be white rather than a shade of grey.
We can achieve this by editing the diagram palette, which allows you to fine tune the adaptation for the different colour modes. Click on the "Object fill" toolbar button, then choose "Edit". You can see here all of the palette entries, and you can see how they are mapped to different fill styles in the greyscale and monochrome versions of the diagram. All of them by default are simply mapped to a shade of grey corresponding to the colour in the original palette entry. But we can override this entry to be white by changing it from "Compute automatically" to "Solid colour". So click that, then select white from the drop down. Then click OK. Notice that in the preview, which is currently showing how the diagram appears in greyscale mode, the label rectangles have become white now.
The final aspect of adaptation that we need for this diagram configuration is to have it be able to adapt to preferred user language. In this case, we just need to support German in addition to English. To do this, we simply add German text strings to each shape that has some text in it, and the springs in the diagram will automatically adjust the layout to the new text. Let's start with the "Mantle" label. In the diagram configuration, right click on the yellow "Mantle" rectangle and choose "Edit text". In the drop down box, choose "German". Now we can type the German language text string to be used in this shape. Consult the diagram requirements sheet for the exact text to use here. Then press Enter when done. If you change the preview to show the German language version using the drop down box just above the preview page, you'll see the German text used in that label. Add the German text for the other two yellow labels. See how the layout of the diagram in the preview window has adapted to the longer German text strings.
Now we need to add the German text for the hints that appear at the bottom of the diagram. Unlike the Label objects, where different text strings were used for each of the three instances of the master object, for the Hint master object instance, the text strings are inherited unchanged from the rectangles in the master object alternatives themselves. So that means when we edit the text in these objects, we should do so in the master object rather than on the instance in the configuration. Switch to the "Hint" master object and then for each of the four alternatives, add the relevant German text strings to the rectangles.
This is all that is needed for the first configuration of the diagram. Try changing the preview window to different languages, colour modes and sizes and check that the diagram is shown appropriately.
Let's move on to the second diagram configuration now. In this configuration, the diagram is reoriented so that the yellow labels run along the top of the page rather than the right side. We'll start by duplicating the first configuration. You can do that by clicking the Duplicate button at the bottom of the screen. Give the new configuration an appropriate name, such as "Rotated". Basically we want to rotate all of the objects in the configuration except for the hint at the bottom. The tool has built in functionality for reorienting objects like this. First, select all of the objects in the configuration by drawing a selection box around them. Then, deselect the hint master object instance by control+clicking the green shape around the hint.
Now click on the "Reorient objects anti-clockwise" toolbar button. All of the selected objects have been reoriented -- mostly this rotated objects, although text shapes still show their text horizontaly. You will have to fix up the line attachments to appropriate places on the earth image. For each line, select it, then shift+drag the arrow end point to detach it, release the shift key, and then drop the end point at an appropriate place on the image.
Now you will also need to re-attach the spring distribution ends to the page edges.
Now that the diagram has two configurations, how is one chosen for display in the preview window? Basically, the configurations are taken in order, as displayed in their thumbnails at the bottom of the configuration editor tab, and the one shown is the first in that list that is valid for the current page size, colour mode and language. To be valid for the current page size, none of the objects in the configuration must have their constraints violated. For example, in the first diagram, the page effectively has a minimum height that is the sum of the yellow boxes' heights, because that vertical spring distribution, which is attached to the page, can only shrink the three springs there. Because the yellow boxes are inflexible, once the three springs have shrunk down to zero height, then the page cannot get any shorter. Try resizing the preview page to reduce the page height until you reach the limit. See how when you reach the limit, the preview switches to the next configuration, which is the rotated view. Now in this case, that view also can't be shown at that height, and there are no more configurations that can be shown. The bar at the top of the preview goes red to indicate that the currently showing configuration is invalid.
While it is still red, hold down the shift key while making the page taller. See that the second configuration is still showing. Holding down shift will temporarily pause the automatic configuration switching. Once you release it, the preview will switch back to the first configuration again. You can also pause automatic configuration switching, and manually switch between configurations, using the three buttons at the top right of the preview. The middle button will pause and unpause automatic configuration switching, and the two arrows will manually switch between configurations.
Make sure that automatic switching is not paused now.
We saw that the preview only switches to the second configuration when the page is very short. To specify a more useful switching point, we can assign the image object in the first configuration a minimum height. In the configuration editor, switch to the first configuration and then select the image object. Then click on its vertical spring and drag the red handle to give it a minimum height of a few inches on the screen. Also give it a minimum width. Now try resizing the page in the preview -- it switches to the second configuration earlier.
OK, let's move on to the third and final diagram configuration, which is a smaller version that shows only the earth image and three "hotspot" circles. When moving the mouse over one of the circles, a label pops up indicating what part of the earth structure is at that position. The more detailed hints describing the earth structure are not present in this configuration.
Since the earth image object and the three yellow label rectangles are present in this final configuration, we will copy and paste them. First, select the image and the three yellow rectangles, but not the arrows. Then click on the "Copy" toolbar button. Create a new configuration and call it "Small". Then click on the "Paste" toolbar button.
Now make the text size of the yellow rectangles a bit smaller.
First, position the earth image by placing it in a horizontal and a vertical spring distribution then attaching the distributions to the page edges. The diagram requirements state that the springs between the image and the page edges are fixed size, so change each of them to have zero stretchiness.
Next, create the three small green circles and position them on top of the earth image at the right places. Be careful not to accidentally drop them into the spring distributions. We need the circles to stay at the same point relative to the earth image even if the page is resized. For this, we can use the anchoring feature. Two shapes can be anchored together by selecting them and clicking the "Anchor objects" toolbar button. Do that with the image object and the first circle. Now try resizing the page in the configuration and see that anchored circle follows the image, while the other circles remain in their original position. Undo the page resize, and then anchor each of the other two circles to the image.
Now we need to keep the labels next to their corresponding hotspot circles. Move them to the right positions, and then anchor each pair of circle and rectangle together. The blue line between circles and rectangles indicates that a fixed distance is kept between the two corners of the objects. If you resize the page, notice that the labels now are kept in the right position.
The final task in editing this configuration is to add the interaction so that the labels appear only when the mouse is hovered over one of the hotspot circles. Open up the Interactions window for the Mantle hotspot circle, and then add a new action. For the action type, choose "Reveal an object on hover". This action will cause an object to be hidden normally, but to be shown when the mouse is hovered over this object. Click the "Choose" button, and then choose the target for this action: the yellow "Mantle" rectangle. Then click OK. In the preview window, switch to this configuration and then try hovering the mouse over the circle to see if the interaction works. Finally, add the interaction to the other two hotspot circles.
That completes the construction of each of the three configurations in the earth structure diagram, and the end of this part of the study.
Show guidelines within spring distributions, and how line objects can have points attached to guideline intersections.
In this part, you will be constructing a diagram by yourself. I will give you the requirements for the diagram on paper. You should try to do as much of the work as you can yourself, but if you get stuck or confused you can ask me for help. While you are doing this exercise, you should talk out loud about what you're thinking while working with the tool.