Flex学习笔记[1]:AS与JS的相互通信
环境:Flex Builder 3(AS3.0)
测试:点击客户端button,底层背景左下移动200px,flex绘制的三角的填充色由0x000000(黑)变0x00ffff(淡蓝)色
注意事项:1.IIS必须部署 2.通信前需检测是否ExternalInterface.available
一 MXML文件:FlexTest3.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="Init()" backgroundColor="red" backgroundAlpha="0">
3 <mx:Script>
4 <![CDATA[
5 import mx.core.UIComponent;
6 import flash.external.ExternalInterface;
7
8 protected var itvAnim:Number;
9 protected var itvTime:Number=1000;
10 protected var ucAngle:UIComponent=new UIComponent();
11 protected var spAngle:Sprite=new Sprite();
12 protected var RGB:Number=0x000000;
13
14
15 protected function Init():void
16 {
17 cvsAngleContainer.addChild(ucAngle);
18 ucAngle.addChild(spAngle);
19 //AStoJS
20 if(ExternalInterface.available)
21 ExternalInterface.addCallback("myTestAStoJS",AStoJS);
22 InitTimer();
23 }
24
25 protected function InitTimer():void
26 {
27 itvAnim=setInterval(Anim,itvTime);
28 }
29
30 protected function Anim():void
31 {
32 if(ExternalInterface.available)
33 {
34 //JStoAS
35 var fillColor:String=ExternalInterface.call("getColor");
36 if(fillColor!=null&&fillColor!="")
37 RGB=parseInt(fillColor,16);
38 }
39 spAngle.graphics.clear();
40
41 spAngle.graphics.lineStyle(1,0,100);
42
43 for(var i:int=0;i<3000;i++)
44 {
45 var newX:int=500-Math.round(Math.random()*1000);
46 var newY:int=500-Math.round(Math.random()*1000);
47
48 spAngle.graphics.beginFill(RGB);
49 spAngle.graphics.moveTo(500+newX,500+newY);
50 spAngle.graphics.lineTo(510+newX,500+newY);
51 spAngle.graphics.lineTo(505+newX,520+newY);
52 spAngle.graphics.lineTo(500+newX,500+newY);
53 spAngle.graphics.endFill();
54 }
55 }
56
57 public function AStoJS():int
58 {
59 return 99;
60 }
61 ]]>
62 </mx:Script>
63 <mx:Canvas id="cvsAngleContainer" verticalCenter="0"
64 horizontalCenter="0" width="1000" height="1000"
65 backgroundColor="red" backgroundAlpha="0" >
66
67 </mx:Canvas>
68 </mx:Application>
二 Html静态页面
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="history/history.css" /> <title></title> <script src="js/jquery-1.4.2.min.js" language="javascript"></script> <script src="js/jquery.easydrag.handler.js" language="javascript"></script> <script src="AC_OETags.js" language="javascript"></script> <script src="history/history.js" language="javascript"></script> <style> body { margin: 0px; overflow:hidden } </style> <script language="JavaScript" type="text/javascript"> var direction="left"; var angleColor="0x00ffff"; //蓝色三角 var isChange=false; $(document).ready(function () { //实现拖动 $('#container').easydrag(); $('#container').css("overflow","hidden"); //绘制底图 for(var r=0;r<5;r++) { for(var c=0;c<5;c++) { var divTmp=document.createElement("div"); divTmp.style.width="200px"; divTmp.style.height="200px"; divTmp.style.position="absolute"; divTmp.style.zIndex="-100"; divTmp.style.background="url(map/2560000/0_0/2560000__0_0_"+r+"_"+c+".png) no-repeat"; divTmp.style.top=c*200+"px"; divTmp.style.left=r*200+"px"; divTmp.id="map_"+r+"_"+c; $('#container').append(divTmp); } } var btnTest=document.createElement("input"); btnTest.type="button"; btnTest.id="btnTest"; btnTest.style.width="80px"; btnTest.style.height="20px"; btnTest.style.position="absolute"; btnTest.style.top=490; btnTest.style.left=460; btnTest.value="我要交互!"; $(btnTest).click(btnJS).click(callFlexAS).click(function(){isChange=true;}); $('#container').append(btnTest); //var str=document.getElementsByTagName('object'); //alert(str[0].id); }); function btnJS() { var arrayDiv=document.getElementsByTagName('div'); if(direction=="left") { for(var i=1;i<arrayDiv.length;i++) { var oldTop=arrayDiv[i].style.top; var oldLeft=arrayDiv[i].style.left; $(arrayDiv[i]).css("top",parseInt((parseInt(oldTop)+200)+"px")).css("left",parseInt((parseInt(oldLeft)-200)+"px")); direction="right"; } } else { for(var i=1;i<arrayDiv.length;i++) { var oldTop=arrayDiv[i].style.top; var oldLeft=arrayDiv[i].style.left; $(arrayDiv[i]).css("top",parseInt((parseInt(oldTop)-200)+"px")).css("left",parseInt((parseInt(oldLeft)+200)+"px")); direction="left"; } } } function getColor() //as调用js { if(isChange==true) { angleColor="0x00ffff"; return angleColor; } else { return "0x000000"; } } function callFlexAS() //js调用as { var x=FlexTest3.myTestAStoJS(); alert(x); return; } <!-- // ----------------------------------------------------------------------------- // Globals // Major version of Flash required var requiredMajorVersion = 9; // Minor version of Flash required var requiredMinorVersion = 0; // Minor version of Flash required var requiredRevision = 124; // ----------------------------------------------------------------------------- // --> </script> </head> <body> <div style="width:1000px;height:1000px;position:relative;" id="container"> <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; document.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", "1000px", "height", "1000px", "align", "middle", "id", "FlexTest3", "quality", "high", "bgcolor", "#ff0000", "wmode","transparent", "name", "FlexTest3", "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", "FlexTest3", "width", "1000px", "height", "1000px", "align", "middle", "id", "FlexTest3", "quality", "high", "bgcolor", "#ff0000", "wmode","transparent", "name", "FlexTest3", "allowScriptAccess","sameDomain", "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/>Get Flash</a>'; document.write(alternateContent); // insert non-flash content } // --> </script> </div> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="FlexTest3" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="FlexTest3.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ff0000" /> <param name="wmode" value="transparent"/> <param name="allowScriptAccess" value="sameDomain" /> <embed src="FlexTest3.swf" quality="high" bgcolor="#ff0000" width="100%" height="100%" name="FlexTest3" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" wmode="transparent"> </embed> </object> </noscript> </body> </html>