# Using relative values for Flash object dimensions

ID: FLASH33

Technology: flash

Type: Technique

## When to Use

- Adobe Flash Professional version MX and higher
- Adobe Flex

## 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.

This technique is not necessary to support users who use zoom functionality in their browsers.

## Examples

### 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

1. Open a web page containing an embedded flash object
2. 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.

## Related Techniques

- C24