Flash Week | Day #2 – Flash Captions

11 Back to the XML

Go back to your XML and in line five and six you’ll notice tags for styling. In between these tags add the code shown in the screenshot above. This creates a style ID that will be used to style captions, you could add multiple IDs for different people speaking, with different colours. After this we changed the typeface to a sans-serif font.

12 The remaining format

Continue to add the code shown above, this time we’ve changed the caption, coloured the text yellow, increased the font size and changed the background colour of the caption to grey. You could add the word transparent instead of the hexadecimal colour for the background. Don’t forget the closing tag.

13 Style the caption

In order to apply the style to the captions, add the code that is highlighted in the screenshot above after the duration of each caption. It is easy to see how you can style a conversation with different colours using this format. Once you have done this to each caption save the XML file and return back to Flash.

14 Publish the file

Once back in Flash, press Ctrl+Return on the keyboard to publish the SWF file. This time you should see your captions formatted with yellow text, a sans-serif typeface and the text larger than previously, making it easier to read. As you can see it is very simple to make video accessible using these components in Flash.

(This tutorial originally appeared in Web Designer issue 162, authored by Mark Shufflebottom)

Pages: 1 2 3