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 all of the dialogue and action in your animation can be described in a paragraph, then your animation should have a hidden text alternative. This text alternative should be written like alt text. Text alternatives serve the same function as alt text and are only visible to visitors using screen readers.
For an example of a hidden text alternative, see the K-12 Lesson Plans Web site. This animation uses this text alterative:
Animation showing a community with schools, houses, roads, grass, trees, and a river. Clouds are moving in the sky and the sun is peeking out from the corner of the image. Yellow circles are moving rapidly through power lines to convey electricity, wind turbine blades are spinning, and the water in the river is moving. A yellow school bus labeled 'Biodiesel' drives into the picture while a child rides a bike down the street. A small red plane flies in the sky carrying the message, 'Get Smart About Energy!' As the plane flies to the center of the picture, it leaves the sign in the middle of the sky, turns upside down once, and flies out of the picture. Three schools are shown in the picture and labeled: <a href="/education/lessonplans/grades.cfm/grade=1">For Grades K-4</a>, <a href="/education/lessonplans/grades.cfm/grade=3">For Grades 9-12</a>, and <a href="/education/lessonplans/grades.cfm/grade=2">For Grades 5-8</a>. These link to lesson plans and activities for each specific grade.
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.
