Flash Animations

Flash animations can take a variety of forms, including interactive images, animations, and games. This page lists the requirements and best practices for developing Flash animations.

If you are constructing a standalone Web application or Web site in Flash, see our standards for Standalone Flash Applications and Web sites.

Requirements

All Flash animations must meet these requirements.

Directory

All animations should be located in the /media/ directory of their site. This directory will normally be on the top level of the program's site. The SWF file should be located in this folder. If the animation has any ancillary files, these should be placed in an /includes/ folder inside the /media/ folder.

Accessibility

All Flash animations must meet these requirements for Section 508 Accessibility.

Screen Flickering

An animation must not flicker with a frequency of greater than 2 Hz and lower than 55 Hz.

Text Versions

Flash animations require a text alternative in order to be compliant with Section 508 accessibility requirements. These alternatives can take two forms: A hidden text alternative or a text version.

For guidelines for making Flash animations natively more accessible, see WebAim.org or the National Center for Accessible Media.

Hidden Text Alternatives

If your animation can be described in a single, short paragraph of text, you do not need to write a separate HTML page for a text version. Instead, you can code a hidden text alternative—a short description that can only be seen by screen readers. This text alternative should be written like alt text.

The rotating news box at the top of the EERE Home Page uses hidden text alternatives.  The hidden text alternative includes all of the text in the animation for all three stories.  For example, on September 24, 2009, the text alternative read:

<div class="hide">
<p class="date">September 24, 2009</p>
<h2><a href="/news/daily.cfm/hp_news_id=205">DOE Delivers More than $106 Million for Projects in Nine States</a></h2>
<p>Sept. 24, 2009 - Energy Secretary Steven Chu announced that more than $106 million in funding from the Recovery Act is being awarded to nine states for energy efficiency and conservation activities.</p>

<p class="date">September 22, 2009</p>
<h2><a href="/news/daily.cfm/hp_news_id=204">Treasury, Energy Surpass $1 Billion in Awards for Clean Energy Projects</a></h2>
<p>Sept. 22, 2009 - Secretaries Geithner and Chu announced $550 million in new awards through the Recovery Act's 1603 program, bringing the total to more than $1 billion awarded.</p>

<p class="date">September 14, 2009</p>
<h2><a href="/news/daily.cfm/hp_news_id=202">DOE to Fund up to $454 Million for Retrofit Ramp-Ups in Energy Efficiency</a></h2>
<p>Sept. 14 2009 - Secretary Chu today announced a new $450 million program designed to catalyze a nationwide energy upgrade that experts estimate could save $100 million annually.</p>

<p><a href="/news/daily_news_archive.cfm">More News Stories</a> &gt;</p>
</div>

When coding a hidden text alternative, you can use the "hide" class to hide text from normal viewers if your site is in OpenText or you are using the EERE style sheet on a non-OpenText site.

<div class="hide"><h3>Wind Animation</h3>
<p>The wind blows the ….</p>
</div>

If you are not using the EERE style sheet, contact Shauna Fjeld for the style code.

Text Versions

If your animation cannot be described in a single paragraph, then your animation will need a text version. A text version is a separate HTML page that includes a full transcript of all speech, text, and action that occurs in your video. See the page on how to write text versions.

Best Practices

These are the best practices for designing Flash animations for the EERE Web site.

Technical Best Practices

All new Flash animations should be coded to Flash version 9. Presently, Flash version 9 has a 98.6% saturation rate and can be seen by the majority of EERE site visitors.

Coding in earlier versions of Flash is acceptable. We do not recommend coding in Flash 10, due to low market saturation at this time.