`
ch0431
  • 浏览: 43758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

flex实现组件全屏化

FlexFlashAdobeJavaScriptActionScript
阅读更多

 

最近开发使用到了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行业需要不断学习，不断进步，希望与大家多多交流。大家多多留言

分享到：
| Spring AOP进行日志记录，管理 （使用Spri ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics