Answers to Exercises, Chapter 12
These are answers to the exercises in the 3rd edition of Digital Multimedia (published February 2009) only. Do not try to use them in conjunction with the 2nd edition.
There is scope for disagreement about which controls should be provided. Play and Stop are essential, as is a Volume control for sound. A Mute control is also often provided, but is redundant, because the same effect can be achieved by turning the volume right down. Rewind (i.e. Go To Beginning) would also be normal. Pause could be supplied, as a separate control from Stop, with the meaning that after pressing Stop, pressing Play would cause the movie to start again from the beginning, but after pressing Pause, pressing Play would make the movie resume playing from the point where it paused. In that case, Stop is strictly redundant, because its effect can be achieved by pressing Pause then Rewind. However, in this case and the case of the Mute control, adding the redundant controls would make the device more convenient to use.
A control for turning captions on and off should be supplied for media that support captioning.
A slider for scrubbing through a movie is considered useful. It would not be redundant, since the other controls provide no way of going to an arbitrary point, but you might argue that it is not strictly necessary.
These controls would be adequate for ordinary use. Other controls you might see on media players, such as Go To End, Step Forward and Step Back buttons are not actually required for simple playback of normal video and would not be used by most people.
- Underlining is performed with a rule for
a:link, if you use
aelements as destination anchors) . The two methods that can be used in such a rule are to set the
underlineor to apply a bottom border, using the
border-bottomproperty. The main advantage of using the
text-decorationproperty is that the underline will be correctly positioned below the text, whereas a bottom border will be too low. The advantage of using the
border-bottomproperty is that it gives you much more control over the appearance of the underline, which can be any colour or thickness you choose, and may use any of the available border styles, such as dotted or dashed lines.
If the font size of the link text changes when the cursor rolls over it, other text will usually have to move to accommodate the change. If links are arranged horizontally in a typical navbar, for instance, all the links to the right of the one rolled over will move right (or left if the rollover makes the text smaller) and the whole navbar and anything below it in normal flow will move down as the line height increases to accommodate the larger type. Since the point of rollovers is to attract attention to the link being rolled over, having other things move at the same time will interfere with this function, as well as looking odd, because movement always attracts the attention.
The only obvious way you can get round this is by arranging the links vertically in fixed-height boxes, large enough to accommodate the text at either size. Mark the navbar up as a list, and set the height and width of
lielements, then add a rule for the rollover to
aelements inside the
lielements. (You can use
There are many more than three different uses of dragging to interact with images. Some of them are listed here, but this list is not exhaustive.
Much interaction with images occurs in image processing software, such as Photoshop. Here you use dragging for a range of quite different purposes – for example, to make a selection, to paint with a brush tool, to apply free transforms, to move a selected element across the document, and so on. (See the Photoshop chapter in Digital Media Tools for descriptions of the operations.)
Dragging is also frequently used when images are too large to display conveniently, for example, when part of a landscape panorama is shown on a Web page (and again, when working on very large images in image processing software). In this case dragging is used to reveal parts of a large image hidden by the edge of a window which is smaller than the image.
Dragging is often used in conjunction with a zoom feature, for example, in Web shopping sites displaying clothes. In this case it may be possible to zoom into the image to reveal greater detail, and then to drag across it to see the same level of detail in other areas of the image.
To summarize, some of the more important uses of dragging across an image are: to reveal parts of a large image which cannot all be seen at once, to make a selection, to make marks on the image (painting, drawing, cloning, erasing, etc.), to apply transforms, to move a selected element of an image.
- In the XHTML form:
(a) A text field, in the form of an
type="text". There is no way to limit the possible set of values so that none of the restricted input controls can be used – though email addresses should always be validated. In principle you could use two text fields, one for name, the other for the domain, separated by an
@sign, but this is not conventional and so might confuse users.
(b) It is customary to use a pop-up menu for choosing countries. The possible choices belong to a finite set and using a menu prevents users making typing mistakes and enforces uniformity, so the program that processes the input does not need to normalize case and look for possible synonyms (UK, U.K. and United Kingdom, for instance) and different languages (Germany or Deutschland, and so on). In XHTML, you would use a
selectelement, with the
multipleattribute omitted to ensure only one value could be chosen, and a set of
optionelements inside it, one for each country. You could use
optgroupelements to group countries by region, but people have become used to an alphabetical list, so this would probably be confusing. The list of countries in the world is a long one, though, as you probably know from experience, but the extra work you would have to do in your program if you used a text field is considerable, and hard to get entirely right. (Do you know what the inhabitants of every country in the world call their country in their own language?)
(c) Again, this has to be a text field (an
type="text") if you want to allow for absolutely any conceivable answer. (How many people live at Buckingham Palace?) If you were content to accept "More than 6" or something of the sort as an answer, you could use a pop-up menu.
(d) A pair of radio buttons: two
type="radio", both having the same value for the
nameattribute. One of them should be selected initially, otherwise the behaviour is undefined if a user does not select either.
(e) The answer here depends on where you live and how much research you are prepared to do. If you live in a country where candidates must belong to one of a few recognized political parties, you could use a pop-up menu, implemented as in (b). (Don't forget to add an entry for "Mind your own business".) In countries which allow candidates belonging to fringe parties, such as the UK's Monster Raving Loony Party, you could only use a pop-up menu if you could include all the parties that had put up candidates in any constituency, which would require extensive background checking, but it would be invidious and lead to misleading results if you left any out. Otherwise, you would have to use a text field and allow any value to be entered, with all the attendant pitfalls and difficulties.For Flash, you would mostly use the equivalent UI components (check the Using ActionScript 3.0 Components manual for further details about the available components):
TextInputcomponent is Flash's way of creating text fields.
(b) A non-editable
ComboBoxcomponent would be used to create the pop-up menu.
NumericSteppercomponent is available for convenient entering of numbers.
RadioButtoncomponents are used to make the appropriate control.
(e) This might be a good case for using an editable
ComboBoxcomponent. Provide entries for the mainstream parties and allow users to write in the name of a fringe party in the text box.
(i) Using Flash UI components saves you effort, including the effort of testing and debugging.
(ii) The people who made the UI components took the necessary steps to make them accessible, within the limits of Flash.
(iii) Using standard components provides users with familiar controls, so they do not have to learn a new interface. This contributes to making the application more usable.You might prefer to implement your own components because you don't like the look of the standard ones. In particular, you might prefer to use controls that more closely resemble the native controls of one of the main operating systems. In that case, though, you would be better off customizing the UI components by editing their "skins", which would still leave you with the benefits. You would probably only be justified in creating new components from scratch if you wanted to implement some new type of control or wanted to change some detail of the UI components' behaviour that you did not feel was correct.
Discussion Topics: Hints and Tips
- This is a question that has caused fairly heated controversy in the context of Adobe's Creative Suite applications. You may be able to find "discussions" of the matter on Adobe's forums. It's worth noting that – in contrast to Adobe – Microsoft go to great lengths to make their Office applications look like native Mac programs on the Macintosh platform. You should also consider the implications of Web-based applications, whose "platform" is the Web browser.
- Fitts's Law is usually considered to be one of the few solid experimentally verified results that are applicable to user interfaces, although Fitts's original work only dealt with one-dimensional movement. At first sight, the Windows Media Player's design seems to go against the obvious application of the Law. When you use the player, do you find it inconvenient in the way the theory would lead you to expect, or is there something more behind Microsoft's design?
- Non-linear jog and shuttle controls are common on video editing equipment and software. Does this provide a good example? Is the case unique?
- This inadvertant duplication of Test Question 7 should be seen as an invitation to explore the issues in greater depth, especially in the light of your answers to Discussion Topic 1. Take a look at the collection of components that are provided with Flash and the possibilities for skinning them and compare these with the collection of controls available through the standard APIs of the major platforms, including the controls available in XHTML.
Practical Tasks: Hints and Tips
- You will need to learn how to use Flash to do this exercise. Skip it if you have no other reason for doing so.
- Don't forget that some people cannot distinguish between certain colours, so be very careful if you want to make colour your signifier for links. (See Chapter 13 for more on this topic.) Also, you need to ensure that any convention you adopt for indicating the presence of a link should not conflict with established conventions used for other purposes. Italicizing links could be problematical, for instance. You should bear in mind the answer to Test Question 3: don't use rollover effects that cause other elements to move.
- Just to make this more difficult, try to do it without relying on people being able to understand any text that you use.
- This is an exercise you actually need to do if you want to gain any benefit from it.
- Here is a direct link to Kuler. At the time of writing, Kuler requires Flash Player 10.0.12 or higher.