flash与javacript：图片交互

   

 

 

   

        最近几天有点懒，其实有时候很想突破自己思维去写一点新的事物，例如最近看另一个水墨模拟，水面模拟，这些都让我感受震惊，有时候老外创造的思维和我们真有所不一样，flash 可以模拟力学，可以模拟软体，也可以模拟自然系列，如水，电，火等一些常见的例子。最近我发现这些程序很有意思，在外国的网站看过相关的应用。这些应用可以给予人很多灵感。 好闲话小说，今天原本很想写一下比较的东西，鉴于水平有限，只能尝试做了一个小实验。基于flash与js 的交互。

 

   有一种很平常做法就是通过外部加载xml 的方式获取图片的路径，然后去操作加载回来 的位图，而有一些做法是基于web的，把一些路径和信息描绘放在web的浏览器的，通过和web进行交互，从而从浏览器页面获取到一些数据信息。其中百度里面有一些经常自动生成的数据，这些数据多少有点儿意思。懂js 的人很容易看懂，而对于flash 开发者而已，js交互是一件家常便饭的事情。也是web前端开发里面需要做的一件事情。

  

   下面是制作的过程：

   flash 与js的交互，例如js记录的数据进行输送给flash里面当中，当中最常见就是图片链接和图片信息。今天，拼凑了百度一些图片组成了一个js，js 返回一个数组，这个数组记录一些图片信息和数据。如标题，描述，图片地址，还有打开的网页地址。这次的制作我们尽量简单化，只是需要一部分数据既可以提供我们所需要。

function readInitData() { var obj_=[ {id:1757059,title1:"男欢女爱之歌",title2:"暧昧情愫在春天悄然萌动",desc:"春天来了，蝴蝶双飞、鸳鸯戏水，男人女人也该开始各自的生活。只是人类，不会像动物那般爱的纯粹，在酒精灯光之下，物欲横流。百度MP3在春天里打造男欢女爱之歌，听听那些充满情愫的歌曲吧。",imgUrl:"http://list.mp3.baidu.com/zt/2011/onenight/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/onenight/index.html"}, {id:1753073,title1:"怀念 曾经的华语金曲",title2:"那年的歌坛最流行",desc:"以为已经忘记的，当旋律响起时才发现竟然那么轻易就能拾起，原来都是深埋在心底的记忆，那么亲切，那么温暖。来吧，一起聆听那些永恒的经典，回味我们最爱的华语金曲，追忆青涩年纪的自己。",imgUrl:"http://list.mp3.baidu.com/zt/2011/huainian/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/huainian/index.html"}, {id:1748958,title1:"雌雄难辨好声音",title2:"另类嗓音惊叹你的耳朵",desc:"造化弄人的个性声音，如夜荷般幽幽地萌生出一种刚柔并济，悄然绽放那既不造作却又盎然淡放的触动之美，男女界限似已模糊于冥冥中，让听者不禁感叹造物主的神奇。",imgUrl:"http://list.mp3.baidu.com/zt/2011/cixiong/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/cixiong/index.html"}, {id:1745787,title1:"千古绝唱千古情",title2:"吟唱最美的爱情传说",desc:"千年时光匆匆过，世事湮没，情缘不了，凄美传说讲述着往日的悲欢眷恋，人间多少感天动地的情爱，谱成千古绝唱的传奇。百度MP3和你一起回味那些耳熟能详、流传千古的爱情故事。",imgUrl:"http://list.mp3.baidu.com/zt/2011/qianguqing/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/qianguqing/index.html"} , {id:1745785,title1:"最心动的初恋情歌",title2:"吟唱最美的爱情传说",desc:"千年时光匆匆过，世事湮没，情缘不了，凄美传说讲述着往日的悲欢眷恋，人间多少感天动地的情爱，谱成千古绝唱的传奇。百度MP3和你一起回味那些耳熟能详、流传千古的爱情故事。",imgUrl:"http://list.mp3.baidu.com/zt/2011/firstlove/165-123.jpgjpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/firstlove/index.html"}, {id:1745786,title1:"话题女星的爱情组曲",title2:"吟唱最美的爱情传说",desc:"妇女节特别企划，听听那些生活在镁光灯下姐妹们的爱情。。",imgUrl:"http://list.mp3.baidu.com/zt/2011/women/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/women/index.html"}, {id:1745789,title1:"相信2011",title2:"吟唱最美的爱情传说",desc:"励志歌曲照进现实，让相信的力量，伴你直达梦想彼岸。",imgUrl:"http://list.mp3.baidu.com/zt/2011/faith/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/faith/index.html"}, {id:1745760,title1:"难忘今宵",title2:"吟唱最美的爱情传说",desc:"春晚歌曲大联唱，重温一代人的经典记忆。",imgUrl:"http://list.mp3.baidu.com/zt/2011/chunwan/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/chunwan/index.html"}, {id:1745761,title1:"十年一代",title2:"吟唱最美的爱情传说",desc:"用音乐和文字记录下公元2000-公元2010华语歌坛。",imgUrl:"http://list.mp3.baidu.com/zt/2011/10years/images/165-123.jpg",ztUrl:"http://list.mp3.baidu.com/zt/2011/chunwan/index.html"} ] ; return obj_; }

 

 js的结构很简单，它返回的是一个数组，数组里面保存了一些Object的对象，这些对象有标签，方便我们去读取。

 

 利用这个返回的数组，我们进行对远程加载位图。加载之后位图 作相应的拖放交互，如添加startDrag 和stopDrag 的组合。同时在进行交互的时候可以恰当的进行放大和缩小 的变化，让图片显得没那么枯燥

 

（Image 用于保存相关的图片类）

 

package org.summerTree.display { import flash.display.*; import flash.events.*; import flash.net.*; import com.greensock.TweenLite; public class Image extends Sprite { private var loader:Loader; public static const ROLL_OVER:String="roll_over"; public function Image() { loader=new Loader(); loader.mouseEnabled=false; loader.mouseChildren=false; loader.contentLoaderInfo.addEventListener(Event.COMPLETE,this.loaderEventsHandler); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,this.loaderEventsHandler); loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR,this.loaderEventsHandler); addEventListener(MouseEvent.ROLL_OVER,startDragHandler); addEventListener(MouseEvent.ROLL_OUT,startDragHandler); addEventListener(MouseEvent.MOUSE_DOWN,startDragHandler); addEventListener(MouseEvent.MOUSE_UP,startDragHandler); } private function startDragHandler(event:MouseEvent):void { if (event.type == MouseEvent.MOUSE_DOWN) { this.startDrag(); } if (event.type == MouseEvent.ROLL_OVER) { TweenLite.to(this,0.5,{scaleX:1.2,scaleY:1.2,alpha:0.5}); this.dispatchEvent(new Event(Image.ROLL_OVER)); } if (event.type == MouseEvent.ROLL_OUT) { TweenLite.to(this,0.5,{scaleX:1,scaleY:1,alpha:1}); } if (event.type == MouseEvent.MOUSE_UP) { this.stopDrag(); } } private function loaderEventsHandler(event:Event):void { if (event.type == Event.COMPLETE) { var bitmap:Bitmap=Bitmap(event.currentTarget.content); bitmap.x=-bitmap.width/2; bitmap.y=-bitmap.height/2; var bottomrect:Shape=new Shape(); bottomrect.graphics.beginFill(0xffffff); bottomrect.graphics.drawRect(0,0,bitmap.width+10,bitmap.height+10); bottomrect.graphics.endFill(); bottomrect.x=-bitmap.width/2-5; bottomrect.y=-bitmap.height/2-5; addChild(bottomrect); addChild(bitmap); } } //设置图片链接 public function set imageURL(url:String):void { if (url!=null) { loader.load(new URLRequest(url)); } } } }

 

 

主类：

 

在获取js 后，由于js返回的是一个数组内容，为了确保数组返回，我们添加EnterFrame 事件去让其执行检索是否数据已经装载了。获取到数据之后，后面的事情进行对js的数据分析，并将我们所需要的链接都进行加载进去。

图片可以顺利显示出来了。

 

 

package { import flash.display.Sprite; import flash.events.*; import flash.ui.*; import flash.text.*; import flash.external.ExternalInterface; import org.summerTree.display.Image; public class Main extends Sprite { public function Main() { addEventListener(Event.ENTER_FRAME,onCheckDataLoadAll); } private function onCheckDataLoadAll(event:Event):void { var data:*; if (ExternalInterface.available) { data=ExternalInterface.call("readInitData"); if (data) { analyseData(data); removeEventListener(Event.ENTER_FRAME,onCheckDataLoadAll); } } else { //alertMsg.text="数据没装载"; removeEventListener(Event.ENTER_FRAME,onCheckDataLoadAll); } } //分析数据 private function analyseData(data:*):void { var length:int=data.length; var perAngle:Number=2*Math.PI/length; for (var i:int=0; i<length; i++) { var image:Image=new Image(); image.imageURL=data[i].imgUrl; addChild(image); image.x=stage.stageWidth/2+Math.cos(i*perAngle)*100; image.y=stage.stageHeight/2+Math.sin(i*perAngle)*90;; image.addEventListener(Image.ROLL_OVER,onImageRollOver); } } private function onImageRollOver(event:Event):void { this.setChildIndex(event.currentTarget as Image,this.numChildren-1); } } }

 

   

  若果我们加以变化，其实这种组合方式可以是很多，最常见flash+xml 配搭组合，到现在flash+js组合，这种方式都很方便，针对web 应用更加常用的。

 

    若果这种交互是这样简单，显然制作出来是不好玩，交互性不强，但是在这个基础上，添加更多玩法 是一种比较好玩的。如增加图片的描述，正好在js里面数据里面保存了这一项。

 

我们增加一个一些方法：让显示的图片 加入提示功能。这里只是需要一个文本就行了。

 

   

 改造Image.as

 

 package org.summerTree.display { import flash.display.*; import flash.events.*; import flash.net.*; import flash.text.*; import com.greensock.TweenLite; public class Image extends Sprite { private var loader:Loader; private var toolTip:TextField; public static const ROLL_OVER:String="roll_over"; public function Image() { loader=new Loader(); loader.mouseEnabled=false; loader.mouseChildren=false; loader.contentLoaderInfo.addEventListener(Event.COMPLETE,this.loaderEventsHandler); loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,this.loaderEventsHandler); loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR,this.loaderEventsHandler); addEventListener(MouseEvent.ROLL_OVER,startDragHandler); addEventListener(MouseEvent.ROLL_OUT,startDragHandler); addEventListener(MouseEvent.MOUSE_DOWN,startDragHandler); addEventListener(MouseEvent.MOUSE_UP,startDragHandler); addEventListener(MouseEvent.MOUSE_MOVE,startDragHandler); toolTip=new TextField(); toolTip.autoSize=TextFieldAutoSize.LEFT; toolTip.multiline=true; toolTip.background=true; toolTip.backgroundColor=0xFDEDBD; toolTip.mouseEnabled=false; //toolTip.mouseChildren=false; } private function startDragHandler(event:MouseEvent):void { if (event.type == MouseEvent.MOUSE_DOWN) { this.startDrag(); } if (event.type == MouseEvent.ROLL_OVER) { TweenLite.to(this,0.5,{scaleX:1.2,scaleY:1.2,alpha:0.5}); this.dispatchEvent(new Event(Image.ROLL_OVER)); if(!this.contains(toolTip)) { addChild(toolTip); toolTip.x=mouseX; toolTip.y=mouseY; } } if (event.type == MouseEvent.ROLL_OUT) { TweenLite.to(this,0.5,{scaleX:1,scaleY:1,alpha:1}); if(this.contains(toolTip)) { removeChild(toolTip); } } if (event.type == MouseEvent.MOUSE_UP) { this.stopDrag(); } if (event.type == MouseEvent.MOUSE_MOVE) { if(this.contains(toolTip)) { toolTip.x=mouseX+5; toolTip.y=mouseY+5; } } } private function loaderEventsHandler(event:Event):void { if (event.type == Event.COMPLETE) { var bitmap:Bitmap=Bitmap(event.currentTarget.content); bitmap.x=-bitmap.width/2; bitmap.y=-bitmap.height/2; var bottomrect:Shape=new Shape(); bottomrect.graphics.beginFill(0xffffff); bottomrect.graphics.drawRect(0,0,bitmap.width+10,bitmap.height+10); bottomrect.graphics.endFill(); bottomrect.x=-bitmap.width/2-5; bottomrect.y=-bitmap.height/2-5; addChild(bottomrect); addChild(bitmap); } } //设置图片链接 public function set imageURL(url:String):void { if (url!=null) { loader.load(new URLRequest(url)); } } //设置文本提示 public function set descText(content:String):void { toolTip.htmlText=content; } } }

 

 在main.as 里面改造一下：

 

 image.descText=data[i].desc;

 

 private function analyseData(data:*):void { var length:int=data.length; var perAngle:Number=2*Math.PI/length; for (var i:int=0; i<length; i++) { var image:Image=new Image(); image.imageURL=data[i].imgUrl; image.descText=data[i].desc; addChild(image); image.x=stage.stageWidth/2+Math.cos(i*perAngle)*100; image.y=stage.stageHeight/2+Math.sin(i*perAngle)*90;; image.addEventListener(Image.ROLL_OVER,onImageRollOver); //nodeList.appendNode(image); } }

 

 

安全问题：

 

    在制作这种交互的时候，原本很顺利进行，但是会发现多少报安全沙箱问题。而这个问题是一件非常烦人的事情。而在设置的时候 多少会存在问题。不同版本flash 这个问题有所不一样，解决方式和自己遇到的会有所不一样。

 

   由于是远程加载图片，也就是跨域越进行数据获取。这样在加载图片的时候，设置一下，检索一下服务器有无安全策略文件。

  

 context= new LoaderContext(true);

 

 //设置图片链接
  public function set imageURL(url:String):void
  {
   if (url!=null)
   {
    loader.load(new URLRequest(url),context);
   }
  }

 

  结果会发现：火狐不报安全沙箱问题，测试成功了，而在360浏览器测试不行了。反而获取不到js返回的数据，而且在火狐下文本 显示不正常。十分奇怪。

  在交互的时候，js和flash 会遇到安全沙箱问题，由于涉及到远程跨域访问数据，这些安全限制少不了。可以对本地文件设置全局的安全设置。

 

  其次要注意保存js文件编码，假设外部 引用js文件，需要 注意编码，将其保存utf-8编码，产生中文乱码是编码不一致。故此在编码方面多注意一下。

 

 

倘若对平面墙交互无意思，可以尝试使用10.0的3d功能，制作这些环形的图片交互。我想这些老掉牙的图片交互虽然燃起不到什么激情，至少看起来不会单调。再者可以讲其改成coverflow的效果，实现起来十分有意思。

 

 

 

//3d 容器类，用于z轴处理 package org.summerTree.display { import flash.display.*; import flash.geom.*; public class DisplayContainer3D extends Sprite { private var list:Array=[]; public function DisplayContainer3D () { } public function addList(obj:*):void { list.push(obj); addChild(obj); } public function sortZ():void { list.sort(depthSort) for (var i:int=0; i<list.length; i++) { var myimage:* = list[i]; this.setChildIndex(myimage,i); } } private function depthSort(objA:DisplayObject,objB:DisplayObject):int { var posA:Vector3D = objA.transform.matrix3D.position; posA = this.transform.matrix3D.deltaTransformVector(posA); var posB:Vector3D = objB.transform.matrix3D.position; posB = this.transform.matrix3D.deltaTransformVector(posB); return posB.z-posA.z; } } }

 

改造后的效果：

 当中使用了flash cs5进行编辑。

 package { import flash.display.Sprite; import flash.events.*; import flash.ui.*; import flash.text.*; import flash.external.ExternalInterface; import flash.system.Security; import flash.geom.PerspectiveProjection; import org.summerTree.display.Image; import org.summerTree.display.DisplayContainer3D; public class Main extends Sprite { private var contain:DisplayContainer3D=new DisplayContainer3D(); public function Main() { addChild(contain); contain.x=stage.stageWidth / 2 ; contain.y=stage.stageHeight / 2 ; contain.z=200; contain.rotationX=80; root.transform.perspectiveProjection.fieldOfView=80; addEventListener(Event.ENTER_FRAME,onCheckDataLoadAll); } private function onCheckDataLoadAll(event:Event):void { //检测数据是否已经装载 var data:*; if (ExternalInterface.available) { data = ExternalInterface.call("readInitData"); if (data) { analyseData(data); removeEventListener(Event.ENTER_FRAME,onCheckDataLoadAll); } } else { removeEventListener(Event.ENTER_FRAME,onCheckDataLoadAll); } } //分析数据 private function analyseData(data:*):void { var length:int = data.length; var perAngle:Number = 2 * Math.PI / length; for (var i:int=0; i<length; i++) { var image:Image=new Image(); image.imageURL = data[i].imgUrl; image.descText = data[i].desc; contain.addList(image); image.x = Math.cos(i * perAngle) * 250; image.z = Math.sin(i * perAngle) * 250; image.rotationY =-getCircle_K(i * perAngle);//偏移角度 image.addEventListener(Image.ROLL_OVER,onImageRollOver); } addEventListener(Event.ENTER_FRAME,render); } private function render(event:Event):void { contain.sortZ();//排序 contain.rotationY+=0.5; } private function onImageRollOver(event:Event):void { this.setChildIndex(event.currentTarget as Image,this.numChildren-1); } //获取切线角度 private function getCircle_K(angle:Number):Number { var px:Number =Math.cos(angle); var py:Number =Math.sin(angle); var k:Number = - px / py; return Math.atan(k) * 180 / Math.PI; } } }

 

 

下面还可以改成coverFlow 的效果。效果还是挺有趣的。