flex实现组件全屏化
?
最近开发使用到了flex 开始学习，发现flex真的很强大，一直想发点东西可是又总结不出重点的知识点，今天公司要实现一个效果，查询了一些网站后完成了，感觉不错，发上来分享一下。
1、要实现flex内部的全屏效果，也就是在点击一个按钮的时候全屏化然后点击ESC可以退出全屏，首先需要修改flex内部的系统html文件（html-template包下的 index.template.html文件），修改方式如下（只是添加两行代码，添加的地方我已经加了注释并修改了颜色）：
<html lang="en">??
<!--???
Smart developers always View Source.???
?
This application was built using Adobe Flex, an open source framework??
for building rich Internet applications that get delivered via the??
Flash Player or to desktops via Adobe AIR.???
?
Learn more about Flex at http://flex.org???
// -->?
?
<head>?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />?
?
<!--? BEGIN Browser History required section -->?
<link rel="stylesheet" type="text/css" href="history/history.css" mce_href="history/history.css" />?
<!--? END Browser History required section -->?
?
<title>${title}</title>?
<mce:script src="AC_OETags.js" mce_src="AC_OETags.js" language="javascript"></mce:script>?
?
<!--? BEGIN Browser History required section -->?
<mce:script src="history/history.js" mce_src="history/history.js" language="javascript"></mce:script>?
<!--? END Browser History required section -->?
?
<mce:style><!--?
body { margin: 0px; overflow:hidden }?
--></mce:style><style mce_bogus="1">body { margin: 0px; overflow:hidden }</style>?
<mce:script language="JavaScript" type="text/javascript"><!--??
// -----------------------------------------??
// Globals??
// Major version of Flash required??
var requiredMajorVersion = ${version_major};??
// Minor version of Flash required??
var requiredMinorVersion = ${version_minor};??
// Minor version of Flash required??
var requiredRevision = ${version_revision};??
// -----------------------------------------??
// --></mce:script>?
</head>?
?
<body scroll="no">?
<mce:script language="JavaScript" type="text/javascript"><!--??
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)??
var hasProductInstall = DetectFlashVer(6, 0, 65);??
?
// Version check based upon the values defined in globals??
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);??
?
if ( hasProductInstall && !hasRequestedVersion ) {??
??? // DO NOT MODIFY THE FOLLOWING FOUR LINES??
??? // Location visited after installation is complete if installation is required??
??? var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";??
??? var MMredirectURL = window.location;??
??? documentdocument.title = document.title.slice(0, 47) + " - Flash Player Installation";??
??? var MMdoctitle = document.title;??
?
??? AC_FL_RunContent(??
??????? "src", "playerProductInstall",??
??????? "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",??
??????? "width", "${width}",??
??????? "height", "${height}",??
??????? "align", "middle",??
??????? "id", "${application}",??
??????? "quality", "high",??
??????? "bgcolor", "${bgcolor}",??
??????? "name", "${application}",??
??????? "allowScriptAccess","sameDomain",??
??????? "type", "application/x-shockwave-flash",??
??????? "pluginspage", "http://www.adobe.com/go/getflashplayer"??
??? );??
} else if (hasRequestedVersion) {??
??? // if we've detected an acceptable version??
??? // embed the Flash Content SWF when all tests are passed??
??? AC_FL_RunContent(??
??????????? "src", "${swf}",??
??????????? "width", "${width}",??
??????????? "height", "${height}",??
??????????? "align", "middle",??
??????????? "id", "${application}",??
??????????? "quality", "high",??
??????????? "bgcolor", "${bgcolor}",??
??????????? "name", "${application}",??
??????????? "allowScriptAccess","sameDomain",??
??????????? "allowFullScreen","true",????? //此处为全屏需要添加的代码
??????????? "type", "application/x-shockwave-flash",??
??????????? "pluginspage", "http://www.adobe.com/go/getflashplayer"??
??? );??
? } else {? // flash is too old or we can't detect the plugin??
??? var alternateContent = 'Alternate HTML content should be placed here. '?
??? + 'This content requires the Adobe Flash Player. '??
??? + '<a href="http://www.adobe.com/go/getflash" mce_href="http://www.adobe.com/go/getflash"></a>Get Flash</a>';??
??? document.write(alternateContent);? // insert non-flash content??
? }??
// --></mce:script>?
<noscript>?
??? <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"?
??????????? id="${application}" width="${width}" height="${height}"?
??????????? codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">?
??????????? <param name="movie" value="${swf}.swf" />?
??????????? <param name="quality" value="high" />?
??????????? <param name="bgcolor" value="${bgcolor}" />?
??????????? <param name="allowScriptAccess" value="sameDomain" />?
??????????? <embed src="${swf}.swf" mce_src="${swf}.swf" quality="high" bgcolor="${bgcolor}"?
??????????????? width="${width}" height="${height}" name="${application}" align="middle"?
??????????????? play="true"?
??????????????? loop="false"?
??????????????? quality="high"?
??????????????? allowScriptAccess="sameDomain"?
??????????????? allowFullScreen="true"? //?此处为为实现全屏添加的代码???
??????????????? type="application/x-shockwave-flash"?
??????????????? pluginspage="http://www.adobe.com/go/getflashplayer">?
??????????? </embed>?
??? </object>?
</noscript>?
</body>?
</html>
?
修改完成上面的文件后，需要在mxml中添加actionScript代码，添加一个方法
public function quanping():void??{//在mxml中的actionScript中添加的方法内容。
????????????? stage.displayState = (stage.displayState ==??
????????????? StageDisplayState.NORMAL?StageDisplayState.FULL_SCREEN:StageDisplayState.NORMAL);??
????????????? if(this.stage.displayState==StageDisplayState.FULL_SCREEN){??
???????????????? this.fullscreenbtn.label="返回";??
????????????? }else{??
??????????????? this.fullscreenbtn.label="全屏";??
????????????? }??
???????????????
??????? }?
?
之后可以在mxml中添加一个按钮，通过此按钮实现全屏效果：
<mx:Button? id="fullscreenbtn"? label="全屏"? click="this.fullScreen()"/>
以上代码可以直接复制后就可以实现全屏效果了。
IT行业需要不断学习，不断进步，希望与大家多多交流。大家多多留言
