Tuesday, August 11, 2009

Flex : Making flex application full screen

Context:
While performing unit testing of a new module I was transition a couple months back, I figured out a problem. The button that read "Toggle Full Screen" did not work how it should have i.e. it didn't switch between browser and full screen mode.

Why full screen doesn't work?
RTFM still holds true. None really read the manual to make it work. Merely copy pasting the code from Adobe example / sample code doesn't work!!

One needs to make changes in the java script / html templates as they are the ones which will initialize flash player and allow it to run or not run in full screen mode.

How to make it work?
You may want to walk thru following steps to verify all the elements to make flex application full screen are in place

  1. You must have version 9,0,28,0 or later of Flash Player installed to use full-screen mode and 9,0,115,0 or later for hardware-scaled full-screen mode (You can check it here - http://kb2.adobe.com/cps/155/tn_15507.html)
  2. Check if index.template.html contains reference to AC_FL_RunContent function.
  3. If yes, update the function to also include following pair of parameters
    AC_FL_RunContent(
    "src", "${swf}",
    "width", "${width}",
    "height", "${height}",
    "align", "middle",
    "id", "${application}",
    "quality", "high",
    "bgcolor", "${bgcolor}",
    "name", "${application}",
    "allowScriptAccess","sameDomain",
    "type", "application/x-shockwave-flash",
    "pluginspage", href="http://www.adobe.com/go/getflashplayer">http://www.adobe.com/go/getflashplayer, "allowFullScreen", "true"
  4. Update <object> tag in index.template.html to include parameter allowFullScreen and set its value to "true" <param name="allowFullScreen" value="true" >
  5. If you are using <embed> tag - you need to update it to set value of allowFullScreen attribute to true e.g. <embed
    src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer"
    allowFullScreen="true" />
  6. The flex code is in place to toggle the mode from normal to fullscreen and vice versa

Conclusion:

Its easy to miss on trivial things and reading the manual and doing implementation will save clients from going baffled! :-)

No comments:

Post a Comment