其他分享
首页 > 其他分享> > Flex学习笔记[1]:AS与JS的相互通信

Flex学习笔记[1]:AS与JS的相互通信

作者:互联网

原文链接:http://www.cnblogs.com/yaoyaminaco/archive/2011/08/25/2153484.html

环境: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>

转载于:https://www.cnblogs.com/yaoyaminaco/archive/2011/08/25/2153484.html

标签:Flex,ExternalInterface,spAngle,笔记,JS,protected,graphics,var,500
来源: https://blog.csdn.net/weixin_30675247/article/details/99420909