Flex学习笔记[1]:AS与JS的相互通信
2024-05-11 19:04:18
环境: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:Applicationxmlns: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():void16 {17 cvsAngleContainer.addChild(ucAngle);18 ucAngle.addChild(spAngle);19 //AStoJS20 if(ExternalInterface.available)21 ExternalInterface.addCallback("myTestAStoJS",AStoJS);22 InitTimer();23 }24 25 protected function InitTimer():void26 {27 itvAnim=setInterval(Anim,itvTime);28 }29 30 protected function Anim():void31 {32 if(ExternalInterface.available)33 {34 //JStoAS35 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():int58 {59 return 99;60 }61 ]]>62 </mx:Script>63 <mx:Canvasid="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 requiredvar 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 passedAC_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 pluginvar 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学习笔记[1]:AS与JS的相互通信相关推荐
- Flex学习笔记（零）
推荐Flex的初学者学习Adobe官方提供的Flex in a Weekvideo series, Flex 4.5.这一系列教程虽然是英文视频,但是Adobe很贴心地给出了pdf格式的视频内容和源代 ...
- Flash/Flex学习笔记(30)：不用startDrag和stopDrag的对象拖动
对于从Sprite类继承来的对象,要实现拖放当然是Flash/Flex学习笔记(13):对象拖动(startDrag/stopDrag) 里讲的方法最方便,但是对于不是从Sprite类继承得来的对象, ...
- Flash/Flex学习笔记(51)：3维旋转与透视变换(PerspectiveProjection)
Flash/Flex学习笔记(49):3D基础 里已经介绍了3D透视的基本原理,不过如果每次都要利用象该文中那样写一堆代码,估计很多人不喜欢,事实上AS3的DisplayObject类已经内置了z坐标 ...
- ESP8266学习笔记：实现ESP8266的局域网内通信
ESP8266学习笔记:实现ESP8266的局域网内通信 现在就以实例入手.工程使用的是IOT_DEMO,据DEMO文档可以知道ESP8266初始工作模式为softAP+station共存的模式.于是 ...
- K210学习笔记(三) K210与STM32进行串口通信，K210发STM收
文章目录 前言 一.以/r/n为结尾 二.K210端代码 三.STM32端 3.1 main函数 四.测试结果 4.1当收到1时 4.2当收到2时 4.3 测试视频 总结 前言 前面我们讲了STM32 ...
- Flex学习笔记（1）——入门，HelloFlex
稍微有些资历的Web程序员想必都还记得Macromedia这个公司吧,想当初网页编程三剑客:Dreamweaver.Flash.Fireworks是多么的红火,可惜现在Macromedia已经是一个过 ...
- fetchxml 汇总_Dynamic CRM 2013学习笔记（十七）JS读写各种类型字段方法及技巧
我们经常要对表单里各种类型的字段进行读取或赋值,下面列出各种类型的读写方法及注意事项: 1. lookup 类型 清空值 var state = Xrm.Page.getAttribute(" ...
- Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值 注意点 子组件给父组件传值 父组件接受子组件的传值 通过函数 组件的自定义事件 事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
- Flex 学习笔记------as 与 js 的通信
AS 中的ExternalInterface类 可以用于和JS的交互 1. AS 调用 JS AS 调用 JS 主要使用 ExternalInterface.call() 方法: var result ...
最新文章
- bos开发时,测试卡在登录界面解决
- python时间重叠_最常见的重叠范围-Python3.x
- [4.9福建四校联考]
- 积性函数与Dirichlet卷积 学习小记
- 升级bigsur_升级 macOS Big Sur 后，程序监听端口报错
- php 5.4.5,PHP 5.4.5 公布
- SVN与TortoiseSVN实战：冲突详解（二）
- c语言确定母亲节思路,C语言有关确定日期的相关问题
- 转载：SpringBoot非官方教程 | 第二十四篇： springboot整合docker
- 表白公式计算机,表白公式数学公式简单的方式
- krpano 小行星开场和自动旋转
- c语言 __at定位编译报错,david
- 李振杰:腾讯入股京东=京东引狼入室
- 生成一个5位随机验证码（包含数字大小写字母)
- 临近新春佳节，如何多快好省地买遍全球年货？
- 豆瓣电台WP7客户端 开发记录1
- 风变科技python课程评价.11_风变科技在线职业教育课程不错，菜鸟也能成python高手...
- 2022还在为怎样去提升自己Android技术而发愁吗？享学课堂是个不错的选择
- Windchill介绍
- 学习前端,需要掌握的单词集汇总