最近几天有点懒,其实有时候很想突破自己思维去写一点新的事物,例如最近看另一个水墨模拟,水面模拟,这些都让我感受震惊,有时候老外创造的思维和我们真有所不一样,flash 可以模拟力学,可以模拟软体,也可以模拟自然系列,如水,电,火等一些常见的例子。最近我发现这些程序很有意思,在外国的网站看过相关的应用。这些应用可以给予人很多灵感。 好闲话小说,今天原本很想写一下比较的东西,鉴于水平有限,只能尝试做了一个小实验。基于flash与js 的交互。
有一种很平常做法就是通过外部加载xml 的方式获取图片的路径,然后去操作加载回来 的位图,而有一些做法是基于web的,把一些路径和信息描绘放在web的浏览器的,通过和web进行交互,从而从浏览器页面获取到一些数据信息。其中百度里面有一些经常自动生成的数据,这些数据多少有点儿意思。懂js 的人很容易看懂,而对于flash 开发者而已,js交互是一件家常便饭的事情。也是web前端开发里面需要做的一件事情。
下面是制作的过程:
flash 与js的交互,例如js记录的数据进行输送给flash里面当中,当中最常见就是图片链接和图片信息。今天,拼凑了百度一些图片组成了一个js,js 返回一个数组,这个数组记录一些图片信息和数据。如标题,描述,图片地址,还有打开的网页地址。这次的制作我们尽量简单化,只是需要一部分数据既可以提供我们所需要。
js的结构很简单,它返回的是一个数组,数组里面保存了一些Object的对象,这些对象有标签,方便我们去读取。
利用这个返回的数组,我们进行对远程加载位图。加载之后位图 作相应的拖放交互,如添加startDrag 和stopDrag 的组合。同时在进行交互的时候可以恰当的进行放大和缩小 的变化,让图片显得没那么枯燥
(Image 用于保存相关的图片类)
主类:
在获取js 后,由于js返回的是一个数组内容,为了确保数组返回,我们添加EnterFrame 事件去让其执行检索是否数据已经装载了。获取到数据之后,后面的事情进行对js的数据分析,并将我们所需要的链接都进行加载进去。
图片可以顺利显示出来了。
若果我们加以变化,其实这种组合方式可以是很多,最常见flash+xml 配搭组合,到现在flash+js组合,这种方式都很方便,针对web 应用更加常用的。
若果这种交互是这样简单,显然制作出来是不好玩,交互性不强,但是在这个基础上,添加更多玩法 是一种比较好玩的。如增加图片的描述,正好在js里面数据里面保存了这一项。
我们增加一个一些方法:让显示的图片 加入提示功能。这里只是需要一个文本就行了。
改造Image.as
在main.as 里面改造一下:
image.descText=data[i].desc;
安全问题:
在制作这种交互的时候,原本很顺利进行,但是会发现多少报安全沙箱问题。而这个问题是一件非常烦人的事情。而在设置的时候 多少会存在问题。不同版本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的效果,实现起来十分有意思。
改造后的效果:
当中使用了flash cs5进行编辑。
下面还可以改成coverFlow 的效果。效果还是挺有趣的。