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 的效果。效果还是挺有趣的。

 

           

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.youkuaiyun.com/jiangjunshow