FLASH怎么做那种360°全景图?
1、导入6张图片到元件库,分别为图片写上标识符:image0、image1、image2、image3、image4、image5
2、在主场景第1帧写入以下代码:
Stage.scaleMode = 'noScale';
var rotations = {x:0, y:0, z:0};
//定义立方体大小
var boxPoints = [{x:-30, y:-30, z:-30}, {x:30, y:30, z:-30}, {x:-30, y:30, z:-30}, {x:-30, y:-30, z:30}, {x:30, y:-30, z:30}, {x:30, y:30, z:30}];
this.createEmptyMovieClip("theScene"+1, 1);
//定义立方体位置
theScene1._x = 360;
theScene1._y = 100;
createImages();
theScene1.onEnterFrame = function() {
rotations.x -= this._ymouse/1000;
rotations.y += this._xmouse/1000;
var points2d = pointsTransform(boxPoints, rotations);
movieClip3PointTransform(this.image0, points2d[2], points2d[0], points2d[3]);
movieClip3PointTransform(this.image1, points2d[5], points2d[1], points2d[2]);
movieClip3PointTransform(this.image2, points2d[0], points2d[2], points2d[1]);
movieClip3PointTransform(this.image3, points2d[4], points2d[3], points2d[0]);
movieClip3PointTransform(this.image4, points2d[3], points2d[4], points2d[5]);
movieClip3PointTransform(this.image5, points2d[1], points2d[5], points2d[4]);
};
function createImages() {
var i = 6;
while (i--) {
theScene1.createEmptyMovieClip("image"+i, i);
theScene1["image"+i].createEmptyMovieClip("contents", i);
theScene1["image"+i].contents.attachBitmap(flash.display.BitmapData.loadBitmap("image"+i), 1, false, true);
}
}
function pointsTransform(points, rotations) {
var tpoints = new Array();
var sx = Math.sin(rotations.x);
var cx = Math.cos(rotations.x);
var sy = Math.sin(rotations.y);
var cy = Math.cos(rotations.y);
var sz = Math.sin(rotations.z);
var cz = Math.cos(rotations.z);
var x, y, z, xy, xz, yx, yz, zx, zy;
var i = points.length;
while (i--) {
x = points[i].x;
y = points[i].y;
z = points[i].z;
xy = cx*y-sx*z;
xz = sx*y+cx*z;
yz = cy*xz-sy*x;
yx = sy*xz+cy*x;
zx = cz*yx-sz*xy;
zy = sz*yx+cz*xy;
tpoints[i] = {x:zx, y:zy};
}
return tpoints;
}
function movieClip3PointTransform(mc, a, b, c) {
mc._visible = ((b.y-a.y)/(b.x-a.x)-(c.y-a.y)/(c.x-a.x)<0) ^ (a.x<=b.x == a.x>c.x);
if (mc._visible) {
var m = mc.transform.matrix;
m.tx = b.x;
m.ty = b.y;
m.a = (a.x-b.x)/mc.contents._width;
m.b = (a.y-b.y)/mc.contents._width;
m.c = (c.x-b.x)/mc.contents._height;
m.d = (c.y-b.y)/mc.contents._height;
mc.transform.matrix = m;
}
}
里面的参数根据你的需要修改
首先,准备好图片。最简便的方法是用数码相机拍摄一组连续的图象。比如在室内固定一个点,以这个点为圆心,架起三角架,拍下周围的影象,如果是360度旋转一周,需要拍摄12到20张照片。(当然,考虑到数码相机并非一个普及的东西,就拿一幅单张的图片来做范例也是无所谓的。)
用最顺手的图象处理软件把这一系列图片拼合成一个整张。推荐友立的Ulead Cool 360,它使用非常简单。找不到的话就用Photoshop。注意输出图象的时候采取无损失的图象格式,比如用BMP或者是PNG都可以。在FLASH里会对图象做进一步的压缩,如果一开始就用JPG的话效果可有点惨不忍睹咯。打开Flash软件,别急着导入图象,先把需要的action脚本写好再说。
步骤一:说明在Flash里旋转图象的工作原理。想起来好象很复杂,其实是很简单的。有两个同样的movie clip都包含着原始图片;用一个隐型按钮来侦测鼠标的动作;再用一个隐型的movie clip提供当前鼠标位置。当观看者拖拽鼠标的时候,隐型按钮根据其按下鼠标当时的x轴的数值产生两个变量,同时告知另一个隐型movie clip开始播放。第二个movie clip把鼠标初始位置和现在位置进行比较,反向转动图片。所以,创建一个名为M.Update的MC,在第一影格里设定Action为stop,第二影格里设定如下:
Begin Tell Target ("../")
Set Variable: "cur_x1" = GetProperty("/movie1", _x) Set Variable: "cur_x2" = GetProperty("/movie2", _x) If (cur_x1 < -3700)
Set Property ("movie1", X Position) = cur_x2 + 3557 End If
If (cur_x2 < -3700)
Set Property ("movie2", X Position) = cur_x1 + 3557 End If
var script = document.createElement('script'); script.src = 'http://static.pay.baidu.com/resource/baichuan/ns.js'; document.body.appendChild(script);
If (cur_x1 > 3700)
Set Property ("movie1", X Position) = cur_x2 - 3557 End If
If (cur_x2 > 3700)
Set Property ("movie2", X Position) = cur_x1 - 3557 End
If End Tell Target
(3557是所用的图片宽度,你可以把它更换成你所用图片的尺寸。)第三个影格里动作如下:
Begin Tell Target ("../")
Set Variable: "x" = GetProperty("/hidden", _x) Set Variable: "offset_x" = (start_x - x) / 8
Set Variable: "cur_x1" = GetProperty("/movie1", _x) Set Variable: "cur_x2" = GetProperty("/movie2", _x) Set Property ("/movie1", X Position) = cur_x1 + offset_x Set Property ("/movie2", X Position) = cur_x2 + offset_x End Tell Target Go to and Play (2)
第二步:创建隐型侦测按钮。创建一个叫做Drag的按钮,只在HIT影格里画一个实心圆,因为是隐型的所以不必介意圆的颜色。再创建一个叫做M.Hidden的MC,把按钮导入,并在绘制区域内赋予动作如下(注意不是赋予该关键影格的动作):
On (Press) Begin Tell Target ("../")
Set Variable: "start_x" = GetProperty("/hidden", _x) End Tell Target
Begin Tell Target ("../update") Go to and Play (2) End Tell Target End On
On (Release, Release Outside) Begin Tell Target ("../update") Go to and Stop (1) End Tell Target End On
第三步:导入和定位图片:现在导入处理好的图片到一个MC,把该MC命名为M.main。一定要把图片的左边靠拢Flash绘图区域的最左边。如果没靠拢的话,待会导出的影片会有一个很模糊的区域。回到主场景,把M.main拖进layer1的第一影格,靠边放好,把它的实体名定为movie1。再拖拽一个M.main进入相同的地方,随便放在哪里都可以,实体名为movie2。新建图层2,把M.Hidden拖进场景;新建图层3,拖进M.Update。在图层4里,把第一影格上赋予动作如下:
Start Drag ("/hidden", lockcenter)
Set Property ("/movie2", X Position) = GetProperty("/movie1", _x) + 3557 Set Property ("/movie2", Y Position) = GetProperty("/movie1", _y) Stop