Technique FLASH33:Using relative values for Flash object dimensions
About this Technique
This technique is not referenced from any Understanding document.
This technique applies to content implemented in Adobe Flash.
Description
The objective of this technique is to specify the width and/or height
of an embedded Flash object using relative units such as em
values.
The size of the Flash object is allowed to expand to fill the size
of its container (a parent element) by setting the movie width and
height to 100%. The container's width and height is set with relative
units. This will allow user agents that support text resizing to resize
the Flash object in line with changes in text size settings. When the
Flash object's dimensions are adjusted its contents will be scaled,
making it easier to read for low vision users.
Note
This technique is not necessary to support users who use zoom functionality in their browsers.
Examples
Example 1: Scaling text while keeping a minimum size
In this example, a Flash object is loaded into an HTML document using SWFObject's
dynamic publishing method. The Flash object's container element
is given a class name of "flashPlaceHolder". This class
name is then targeted using CSS to set its width and height using
relative em values. When the user increases or decreases the browser's
text size, the Flash object will scale accordingly. To ensure that
the object does not become too small when text size is decreased,
the min-width
and min-height
properties are set to the default dimensions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <title>Flash Resize example</title> <script src="swfobject/swfobject.js" type="text/javascript"/> <script type="text/javascript"> swfobject.embedSWF("scale_movie_dimensions_on_text_resize_as3.swf", "flashPlaceHolder", "100%", "100%", "8") </script> <style type="text/css"> #flashPlaceHolder { width: 20em; height: 15em; min-width: 320px; min-height: 240px; } </style> </head> <body id="header"> <h1>Flash Resize Demonstration</h1> <p>When the browser's text size is changed, the Flash movie will be resized accordingly.</p> <p id="flashPlaceHolder">Flash needs to be installed for this example to work</p> </body> </html>
The result of this technique can be viewed in the working version of Scaling text while keeping a minimum size. The source of Scaling text while keeping a minimum size is available.
Tests
Procedure
- Open a web page containing an embedded flash object
- View the HTML to confirm that the width and height dimensions for the object containing the Flash object are specified using relative units such as em or percent (%).
Expected Results
- Check #2 is true.