用flash实现360毒效果的方法
用Flash实现360度效果的新法说到360度显示,大家一定会想到Cool360,的确,这款软件使用方便,生成的效果也很好。在当前互联网大行其道的今天,许多企业需要在自己网站上实现360度环绕效果,比如房地产公司、装潢设计公司,虽然Cool360提供了互联网的插件,但要求用户在浏览网页时下载插件再安装再重新启动电脑再登录网站,我想,大多数用户是没有兴趣这样做的,因此,需要找另一条道路来解决这个问题,Macromedia 的FLASH为此指出了方向!
在FLASH里可以控制一个对象的大小、位置和透明度等属性,有了这些可控制的属性,实现360环绕效果可谓易如反掌。
我们先来想一下,假设图1是一张由5幅图片组成的360度照片(一般都是用相机将四周的环境依次摄下,扫描后联接在一起,成为一幅不间断的图片),如果把它两头接起来,形成一个圆环,人站在这个圆的中心,他所看到的就是一个360度的实景了。
在FLASH里我们需要解决的问题就是如何把这分开的两头接起来,而且不露痕迹。
假设在FLASH中设置一个仅能容纳三幅图片的窗口,制作两个按钮让这幅照片能向左或向右移动(俗称“拉镜头”),可以设置一个判断语句,当1号图片的左边界与窗口的左边界重合时,即X值相等,判断出照片到了最左边,再向右移动的话,应该出现5号图片。这是照片向左移动的判断,照片向右移动的判断也是一样,这里就不再赘述。
基于此,我们可以把5号图片复制到1号图片的左边,把1号图片复制到5号图片的右边,见图2。再设置一个判断,当左边5号图片的左边界与窗口的左边界重合时,就把整张照片的X值改为右边1号图片与窗口右边界重合时的X值,说起来很拗口,但仔细想想,就是这个道理。
这里还有一个问题,因为我们设置窗口可显示3张图片,当1号图片左边界与窗口左边界重合并跳转到复制后的1号图片时,显示的图片并不联贯(跳转后复制的1号在最左边,而其右边没有图片),所以,要再将2号图片复制到它的右边(见图3)。
这样,就可以设左边的5号图片和右边的2号图片为整张照片的边界,以此为进行跳转判断的依据。
下面我结合自己几次尝试的经验说说自己在FLASH中实现360度环绕效果方法。
一、 设置整个电影的高和宽为310和150。
二、 制作一个需要展示的图片,因为手中没有现成的360度照片,所以用五个不同色彩的色来代替每个色块设置宽、高都为100(见图1)。
三、 按图三进行复制,按F8定义为gra(见图3)
四、 制作显示的外框及一个名为Mask1的遮罩。外框只要宽大于300,高大于100就可以了,Mask1的宽为300,高为100。另外从Windows—common libraries 中选择两个指向左面和右面的键头。
五、 制作一个Movie Clip,命名为left,定义left的第一帧为空格,插入Actions,键入stop。定义第二帧的Actions为setProperty ( /:gra, _x, /:g )。定义第三帧的Actions:
/:g = /:g + 1
if (int(/:g)==405) {
/:g = -95
}
gotoAndPlay (2);
解释:第二帧设置gra的X值为变量g。第三帧每一次运行g就加1,判断,如果取g的整为405,则g等于-95。
六、 再制作一个Movie Clip,命名为right,定义right的第一帧为空格,插入Actions,键入stop。定义第二帧的Actions为setProperty ( /:gra, _x, /:g )。定义第三帧的Actions:
/:g = /:g - 1
if (int(/:g)==-95) {
/:g = 405
}
gotoAndPlay (2);
七、 把Layer 1的名字改为“底部”,在第2帧把left和right放置进去,分别定义名字为“left”和“right”。
八、 新增“Layer 2”并改名为“按钮”,在第1帧把两个按钮放置进去。
九、 设置键头向左按钮的Actions为:
on (rollOver) {
tellTarget ("left") {
gotoAndPlay (2);
}
}
on (rollOut) {
tellTarget ("left") {
gotoAndStop (1);
}
}
十、设置键头向左按钮的Actions为:
on (rollOver) {
tellTarget ("right") {
gotoAndPlay (2);
}
}
on (rollOut) {
tellTarget ("right") {
gotoAndStop (1);
}
}
十一、 设置按钮层第一帧的Actions为:g=getProperty (/:gra, _x ),这样可以取得gra的X。
十二、 新增“Layer 3”并改名为“画面”,在第1帧把gra放置进去。按Ctrl+K调出Align面板,将gra设置为整页居中
十三、 新增“Layer4”并改名为“遮罩”,在第1帧把Mask1遮罩放置进去,设置Mask1整页居中并与gra等高,再将其设置为Mask。
十四、 图4是设置后的效果。
十五、 gra的位置可以随意放,不一定要像图中1号图片在最左边。
十六、 按Ctrl + Enter试试效果,应该没有问题了。
再说一下为什么在判断语句里设置405和-95,因为整个主画面宽度为310,Mask宽度为300,Mask居中后距主画面边界为5,gra宽度为800,制作时设置gra居中,放入主画面后gra的X值为400,加上Mask的距离就是405。另一个值-95也可以用相同的方法推算出来。
需要注意的是,如果你使用较大的图片制作此效果需要考虑浏览者机器的配置是否能够承载,在跳转时需要进行些运算,因此用较小的窗口可以保证浏览的流畅。