Responsive Flash Movies

It is not obvious how to make Flash movies compatible with responsive web design. This is a short tutorial on how to accomplish that. An example of a responsive Flash movie created by KoolMoves is shown at:

www.koolmoves.com/responsive/responsive-flash.html.

The full example can be downloaded at:

www.koolmoves.com/responsive/responsive-flash.zip.

To view the responsive nature of the Flash animation, slowly decrease the width of the browser window. Below 600 pixels (the width of the starting Flash movie), the Flash movie scales horizontally reflecting the width of the web page. Below 350 pixels, the content switches from the Flash movie to non-Flash content.

The responsive html and css code is exported in KoolMoves using File > Export/Publish Movie > Add Flash Movie to Web Page (Expert Mode) - Copy and paste to existing web page.

In the header part of the web page code, the swfobject.embedSWF call is given different parameters than usual. Scale attribute is set to "exactFit" so the movie will scale horizontally and the width of the Flash movie is set to 100%. The Flash content is shown in the div element that has the id specified by the second argument, in this case "flashbanner". If Flash can't be displayed (javascript turned off, mobile device running iOS, etc.), the alternative content in the div is displayed.

		
<script src="swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var params = {
   loop: "false",
   scale: "exactFit",
   bgcolor: "#ffffff"
};
swfobject.embedSWF("flashbanner.swf", "flashbanner", "100%", "300", "10.0.0", false, false, params, false);
</script>

The Html page contains four divs:
1) A div with id "container"
2) A div with id "flashcontainer"
3) A div with id "flashbanner", the second argument in the swfobject.embedSWF function
4) A div with id "nonflashcontainer"

		
<div id="container">
   <div id="flashcontainer">
      <div id="flashbanner"> <p>Alternative content -- To debug missing content: has swfobject.js been uploaded to the server?</p> </div>
   </div>
   <div id="nonflashcontainer">
      <p style="font-family:verdana; font-size:40px; text-align:center; color:white">Non-Flash content</p>
   </div>
</div>

Only one of the flashcontainer and nonflashcontainer divs is displayed at any given time. The div is displayed or not displayed depending on the value of the css 'display' attribute. Display:block makes the div display and display:none makes the div not display and not take any space on the web page. The switching which determines which div will display is controlled by a media query. More about that later.

Credit is given to youtube.com/watch?v=3nVWSh5pxZU for some of these design ideas. I did not use the z-index approach since display:none or display:block seemed sufficient to switch Flash content to non-Flash content.

In the css file or the style section of the web page, the nonflashcontainer div width is set to 100% and the height is set to the height of the swf movie. The height can be set to anything. The width of this div is controlled by the width of its parent, the container div. Display is set to 'none' initially.

The flashcontainer div width is set to 100% and the height is set to 100%. The width and height of this div are controlled by its parent, the container div. Display is set to 'block' initially.

		
#nonflashcontainer {
   background-color:blue;
   display:none;
   width:100%;
   height:300px;
   margin:0;
   padding:0;
   margin-left:auto;
   margin-right:auto;
   position:absolute; 
   left:0;
}

#flashcontainer {
   display:block;
   width:100%;
   height:100%;
   margin:0;
   padding:0;
   margin-left:auto;
   margin-right:auto;
   position:absolute; 
   left:0;
}

A media query switches off display of the flashcontainer and switches on the display of the nonflashcontainer at the arbitrary browser width of 350 pixels.

		
@media only screen and (max-width:350px) {
   #flashcontainer {
      display:none;
   }

   #nonflashcontainer {
      display:block;
   }
}

Another media query controls the width of the container. At a browser width less than 600px (determined by the web page layout and the original width of the Flash movie), the container scales horizontally to the width of its parent element. Otherwise, the width and height of the container are the width and height of the Flash movie.

		
#container {
   position:relative;
   width:600px;
   height:300px;
}

@media only screen and (max-width:600px) {
   #container {
      width:100%;
   }
}

That is a brief explanation of the miniumum code required to achieve a responsive Flash movie that reverts to a non-Flash display for mobile devices.