flash与javacript：图片交互
2011-04-14 15:18
363 查看
最近几天有点懒，其实有时候很想突破自己思维去写一点新的事物，例如最近看另一个水墨模拟，水面模拟，这些都让我感受震惊，有时候老外创造的思维和我们真有所不一样，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 的效果。效果还是挺有趣的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- flash与javacript：图片交互
- 实现flash与javacript通信。
- javacript 点击图片移动
- FLASH图片效果与XML交互
- flash和java交互？
- 交互第三方Flash+Asp.net(C#)保存图片到服务器
- flash与javacript通信(1)
- flash与javacript通信(1)
- JAVAWEB开发之SpringMVC详解(二)——高级开发、数据回显、参数绑定集合、图片上传、json交互、validation校验、异常处理、RESTful支持、拦截器
- Java接收Flash请求的二进制流图片
- 3、在Ajax于Java的交互过程中,加入加载图片
- java做服务端，FLASH做客户端交互总结
- Flash 二进制传图片到后台Java服务器接收
- 一个非常不错的纯源码“PDF转换swf”完全脱离安装第三方插件，直接使用java调用Flash api将PDF转换成图片，在将图片转换成swf。
- openflashchart保存图片(For JAVA)
- Java实现Flash请求的二进制流图片保存并返回XML信息包含图片访问地址
- javacript 实现瀑布流原理和效果, 滚动加载图片【图文解析 附源码】
- flash与javacript通信(1)
- flash与java交互数据
- 7、jQuery的Ajax与Java交互带加载图片