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