制作360度动态全景图
如何在Final Cut Pro中剪辑360度全景视频

如何在Final Cut Pro中剪辑360度全景视频Final Cut Pro是一款功能强大的专业视频编辑软件,它为用户提供了一系列先进的工具和特效,能够满足各种剪辑需求。
本教程将教你如何在Final Cut Pro中剪辑360度全景视频,让你能够在编辑过程中充分发挥创造力,打造出令人惊叹的全景作品。
首先,在导入360度全景视频之前,你需要确保已将插件安装至Final Cut Pro中。
你可以在网络上搜索并下载支持360度全景视频编辑的插件,根据你的需求进行选择。
导入视频后,你需要调整序列设置,以便适应全景视频的特殊格式。
选择“文件”菜单中的“新建”,然后选择“序列”。
在弹出的对话框中,选择与你的全景视频分辨率和帧率相匹配的预设。
确保勾选“自定义序列设置”,以适应全景视角。
在编辑页面上,你将看到一个球形标记,代表你的全景视频。
你可以通过点击并拖动标记,调整视角,观察不同的角度。
使用鼠标滚轮或触控板,你可以进行缩放操作,以拍摄不同的全景景象。
在剪辑过程中,你可以使用Final Cut Pro的剪辑工具和特效来增强全景视频的效果。
你可以在时间轴上选择所需的部分,并使用修剪工具将其裁剪或扩展。
使用过渡效果和颜色校正工具,你可以调整视频的平滑度和颜色饱和度,以获得更生动和逼真的全景效果。
在处理音频时,你可以使用Final Cut Pro的音频特效工具来增强全景视频的听觉体验。
在时间轴上选择音频轨道,然后应用增益、降噪等音效,以改善音频质量。
你还可以添加背景音乐和音频转场,以增加视频的氛围。
一旦你完成了全景视频的剪辑和编辑,你可以导出成最终的视频文件。
选择“文件”菜单中的“导出”选项,并选择你想要的输出格式和参数。
点击“导出”,等待剪辑完成。
最后,你可以在Final Cut Pro中预览你的剪辑视频。
通过模拟器或VR头盔,你可以全方位地欣赏和体验你的360度全景视频作品。
总结:在Final Cut Pro中剪辑360度全景视频可以让你充分发挥创造力,制作出精美的全景作品。
利用QTVR技术实现低成本的室内设计360°全景展示

利⽤QTVR技术实现低成本的室内设计360°全景展⽰利⽤QTVR技术实现低成本的室内设计360°全景展⽰摘要:在室内设计中,⽤户不具备查看专业图纸的能⼒,他们希望看到的是效果图。
但普通的效果图是⼀个或⼏个单⽅向的渲染效果,不能保证⽤户看到想要的效果。
因此引⼊虚拟现实技术,做全景展⽰是⾮常有必要的。
但普通的虚拟现实技术需要⽤户设置虚拟现实⼯作环境,同时需要安装专⽤的虚拟现实浏览插件,⼀般⽤户⽆法完成这⼀操作。
因此笔者引⼊全新的基于静态图像处理的虚现实技——QTVR技术,在⽤户拥有QuickTime播放器的情况下就可以实现360°低成本全景展⽰。
关键词:室内设计虚拟现实 QTVR 低成本⽅案 360°全景展⽰1.前⾔在室内设计的过程中,装修房屋之前,⾸先要做的事是对房屋的结构、外形做细致的构思。
为了使⽤户看到室内设计的效果,并使施⼯得以正常开展,还需设计许多图纸。
其中包括⼤量的AUTOCAD软件制作的⼯程图纸和3DS MAX制作的效果图。
其中AUTOCAD的⼯程图纸只能内⾏⼈读懂,⽤户是看不懂的。
业主看的效果图是从3DS MAX软件中渲染出来的某个特定⽅向效果的图像。
如此⼀来业主看不到室内设计的整体效果,只能通过⼀个或⼏个特定⽅向的效果想象整体设计效果,显得⾮常不直观、不真实。
虚拟现实(Virtual Reality,⼜译作灵境、幻真)是近年来开始逐渐推⼴的⾼新技术,也称灵境技术或⼈⼯环境。
利⽤虚拟现实技术就可以解决单⼀的效果图不能真实直观地展现设计效果这⼀问题。
⽬前在室内设计⽅⾯运动的各种虚拟现实表现⼿段层出不穷。
其中包括传统的VRML编程语⾔,也有通过3DS MAX的VRML 插件实现虚拟现实效果的⽅案,这⼀点笔者曾在“利⽤VRML97组件快捷创建虚拟现实世界中的三维场景”论⽂中有论述。
但在实际操作中还是遇到了⼀些问题:由于普通的业主对计算机的操作和虚拟现实技术基本不了解,往外会出现需要进⾏虚拟现实浏览的插件不会安装。
HTML5Canvas实现360度全景图的示例代码

HTML5Canvas实现360度全景图的⽰例代码⾃⼰玩了玩这个Demo以后,照着它的思路,⽤HTML5 Canvas也实现了类似的功能。
所以先说⼀下它的360度全景图的原理1. ⾸先需要对实物拍照,间隔是每张照⽚旋转15度,所以需要23张照⽚。
2.照⽚准备好了以后,尽量选择JPG格式,裁剪到适当⼤⼩。
3.JavaScript中预加载所有照⽚,可以配合进度条显⽰加载精度4.创建/获取Canvas对象,加上⿏标监听事件,当⿏标左右移动时候,适度的绘制不同帧。
⼤致的原理就是这样,简单吧!实现代码:<!DOCTYPE html><html><head><meta charset=utf-8"><title>Full 360 degree View</title><script>var ctx = null; // global variable 2d contextvar frame = 1; // 23var width = 0;var height = 0;var started = false;var images = new Array();var startedX = -1;window.onload = function() {var canvas = document.getElementById("fullview_canvas");canvas.width = 440;// window.innerWidth;canvas.height = 691;//window.innerHeight;width = canvas.width;height = canvas.height;var bar = document.getElementById('loadProgressBar');for(var i=1; i<24; i++){bar.value = i;if(i<10){images[i] = new Image();images[i].src = "0" + i + ".jpg";}else{images[i] = new Image();images[i].src = i + ".jpg";}}ctx = canvas.getContext("2d");// mouse eventcanvas.addEventListener("mousedown", doMouseDown, false);canvas.addEventListener('mousemove', doMouseMove, false);canvas.addEventListener('mouseup', doMouseUp, false);// loaded();// frame = 1frame = 1;images[frame].onload = function() {redraw();bar.style.display = 'none';}}function doMouseDown(event) {var x = event.pageX;var y = event.pageY;var canvas = event.target;var loc = getPointOnCanvas(canvas, x, y);console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");startedX = loc.x;started = true;}function doMouseMove(event) {var x = event.pageX;var y = event.pageY;var canvas = event.target;var loc = getPointOnCanvas(canvas, x, y);if (started) {var count = Math.floor(Math.abs((startedX - loc.x)/30));var frameIndex = Math.floor((startedX - loc.x)/30);while(count > 0){console.log("frameIndex = " + frameIndex);count--;if(frameIndex > 0){frameIndex--;frame++;} else if(frameIndex < 0){frameIndex++;frame--;}else if(frameIndex == 0){break;}if(frame >= 24){frame = 1;}if(frame <= 0){frame = 23;}redraw();}}}function doMouseUp(event) {console.log("mouse up now");if (started) {doMouseMove(event);startedX = -1;started = false;}}function getPointOnCanvas(canvas, x, y) {var bbox = canvas.getBoundingClientRect();return { x: x - bbox.left * (canvas.width / bbox.width),y: y - bbox.top * (canvas.height / bbox.height)};}function loaded() {setTimeout( update, 1000/8);}function redraw(){// var imageObj = document.createElement("img");// var imageObj = new Image();var imageObj = images[frame];ctx.clearRect(0, 0, width, height)ctx.drawImage(imageObj, 0, 0, width, height);}function update() {redraw();frame++;if (frame >= 23) frame = 1;setTimeout( update, 1000/8);}</script></head><body><progress id="loadProgressBar" value="0" max="23"></progress> <canvas id="fullview_canvas"></canvas><button onclick="loaded()">Auto Play</button></body></html>Demo演⽰⽂件下载地址->以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
360全景拼接方案

360全景拼接方案简介360全景拼接是一种将多张图片拼接为一个全景图的技术。
全景图能够提供用户全方位的视角,使得用户能够沉浸在虚拟现实的环境中。
本文将介绍一种基于计算机视觉的360全景拼接方案,通过使用特征匹配和图像融合算法,实现高质量的全景拼接效果。
基本原理特征匹配全景拼接的第一步是特征匹配。
特征匹配是指找到多张图片中的相同特征点,以便后续的图像对齐和拼接。
常用的特征点提取算法有SIFT(尺度不变特征变换)和SURF(加速稳健特征)。
这些算法可以提取出图像中的关键点,并计算出每个关键点的描述子。
在特征点提取完成后,可以通过计算特征点之间的距离和相似度,使用一些匹配算法(如k-最近邻算法)来找到相同特征点。
匹配算法会根据两幅图像中特征点的相似程度,将它们匹配成对。
图像对齐在特征匹配完成后,下一步是图像对齐。
图像对齐是指将所有图像对准到同一个坐标系中,以便进行后续的拼接处理。
图像对齐可以通过估计图像的变换矩阵来实现,常见的变换矩阵包括平移、旋转和缩放。
常用的图像对齐算法有RANSAC(随机抽样一致性)和LMS(最小均方误差),这些算法可以根据匹配的特征点,计算出变换矩阵,并将图像对齐到同一个坐标系中。
图像融合图像对齐完成后,下一步是图像融合。
图像融合是指将所有对齐后的图像拼接在一起,生成最终的全景图。
常用的图像融合算法有平均融合、线性融合和多重分辨率融合。
在图像融合过程中,需要考虑图像之间的重叠区域的处理,以及消除不同图像之间的亮度差异。
这可以通过调整图像的透明度、亮度和对比度来实现。
实施步骤下面是基于上述原理的360全景拼接方案的实施步骤:1.选择合适的特征提取算法,如SIFT或SURF。
根据实际需求,确定特征点的数量和质量。
2.对每张图片进行特征提取,并计算每个特征点的描述子。
3.使用匹配算法(如k-最近邻算法),找到特征点之间的对应关系。
4.根据匹配结果,计算变换矩阵,将所有图像对齐到同一个坐标系中。
如何剪辑和处理360度全景视频

如何剪辑和处理360度全景视频在现代技术的发展下,360度全景视频越来越受到人们的关注和喜爱。
Adobe Premiere Pro软件为我们提供了强大的工具和功能,方便我们剪辑和处理360度全景视频。
首先,我们需要将360度全景视频导入到Adobe Premiere Pro软件中。
在软件界面中,选择“文件”菜单,然后点击“导入”选项,选择你想要处理的360度全景视频,然后点击“打开”按钮。
一旦导入了全景视频,我们需要根据需要进行剪辑和处理。
以下是几个实用的技巧:1. 制定剧情:在剪辑360度全景视频时,我们可以通过设置多个关键点来制定剧情。
这些关键点可以是不同角度的景观或动作,通过在关键点之间切换,可以让观众在观看视频时有更好的体验。
2. 添加标记:在Adobe Premiere Pro软件中,我们可以通过添加标记来标识特定的场景或动作。
这对于在剪辑和处理过程中进行参考和定位非常有帮助。
3. 调整视角:360度全景视频可以让观众在视频中自由选择不同的视角。
在Adobe Premiere Pro软件中,我们可以使用“旋转”工具来调整视角。
通过细微的调整和控制,我们可以让观众体验到前所未有的观影感受。
4. 添加特效:除了基本的剪辑和处理,我们还可以通过添加特效来增强全景视频的表现力。
例如,我们可以添加过渡效果,让不同场景之间的切换更加流畅;或者通过调整色彩和光影效果,增强视频的氛围和情感。
5. 输出和分享:一旦完成剪辑和处理,我们可以使用Adobe Premiere Pro软件中的“导出”功能,将处理后的360度全景视频保存为所需的格式。
然后,我们可以将视频上传到各种平台,如YouTube和Facebook,与他人分享我们的作品。
希望以上的技巧能帮助你更好地剪辑和处理360度全景视频。
使用Adobe Premiere Pro软件,你可以发挥创造力,为观众带来震撼和独特的视觉体验。
不断尝试和探索,让你的全景视频更加出色!。
360全景摄影的方法技巧

360全景摄影的方法技巧360全景摄影采用的设备一般有单反相机、鱼眼镜头、云台和三角架。
根据制作者对全景质量和用途的不同要求。
360全景摄影与一般摄影相同,但由于全景摄影必须全视角拍摄,其特点如下:1 :相机必需准确可靠定位由于相机的视角小于360度,因此必须拍摄多张照片才能记录全视角图像信息, 为了使多张照片能无缝地连接成360全景投影图像,相机必需准确可靠定位,旋转中心点要定在所用镜头的中节点上,而且相片重叠位置要准,和以前只有手动定位设备相比,现在己经有专用自动旋转定位拍摄设备可供选购,可以准确定位拍摄。
许多爱好者仅仅使用三角架只能拍出远景的平面全景照片,而对于例如室内这些近景拍摄,拼接会变得很困难,可见上下天地的三维全景拍摄,必须要使用有节点的转动云台。
2 :最好选用超广角镜头为了拍摄全360度的全景照片,相机镜头的焦距越长视角越小,拍摄的照片就越多,后期处理就越复杂。
广角镜头的另一好处是景深长,面对360全景的各种不同距离物景都可以兼顾,因此最好选用小于18MM的鱼眼镜头.比如选用18MM的镜头需要拍8—10张(照片之间应有适当的重叠),而选用8MM的鱼眼镜头只需拍3-5张。
当然,现在也能买到按一次快门就可以拍下全360度的数码转机,但价格十分昂贵。
3:取景与用光取景不仅要兼顾水平四面八方,而且要兼顾顶天和立地,球形和立方体全景顶天和立地的巧妙取景可以产生融入三维环境的效果。
用光则是全景拍摄的难点,由于是360度的拍摄,您无法回避逆光和直射的阳光,反差之大难以控制,这是与普通摄影的差别。
但是因为全景摄影还就是摄影,因此摄影师的用光和拍摄的基本功和技巧,全部可以用在全景的拍摄中并体现出来。
4:相机基本设置关闭自动聚焦,关闭自动白平衡,关闭闪光灯,测光后手动固定曝光值,保证全组相片曝光一致,设置相同质量和分辨率。
每张相邻的相片重叠区域不少于30%,还要在尽量短的时间内完成拍摄,这样才能符合自动拼接软件识别要求。
360全景标定方法

360全景标定方法通常包括以下步骤:
1. 准备标定板:选择一个适当的标定板,其上应具有固定的几何形状和图案,如格子、圆圈等。
2. 拍摄标定图像:将标定板放置在场景中,并从多个角度拍摄包含标定板的图像。
3. 提取角点:在拍摄的图像中提取出标定板的角点。
这些角点用于计算相机的内部和外部参数。
4. 计算相机内部参数:使用提取的角点和标定算法计算相机的内部参数,如焦距、光心位置等。
5. 计算相机外部参数:通过在多个不同角度拍摄的图像中提取的角点,使用标定算法计算相机的外部参数,如旋转和平移矩阵。
6. 校准相机:根据计算得到的内部和外部参数,对相机进行校准,以消除畸变和误差。
7. 确定物理尺寸和像素间的换算关系:通过标定过程,可以确定物理尺寸和像素间的换算关系,从而能够准确测量和重建场景中的物体。
8. 应用标定结果:将标定结果应用于全景图像的拼接和处理中,以获得更准确和高质量的全景图像。
需要注意的是,具体的360全景标定方法可能因使用的相机类型和拍摄场景的不同而有所差异。
因此,在实际操作中,需要根据具体情况
选择适合的标定方法和步骤。
360度全景影像 原理

360度全景影像原理360度全景影像是一种能够提供全方位视角的影像技术,可以呈现出观察者所在位置周围的全景景象。
它的原理是通过将多个相机或者图像传感器组合在一起,同时捕捉同一时间和不同视角的图像,并将它们拼接在一起,形成一个连续并展开的全景图。
360度全景影像的主要原理包括图像采集、图像融合和图像展示。
首先是图像采集。
为了能够捕捉到全方位的景象,通常需要使用多个相机或者图像传感器。
这些相机或传感器需要放置在不同的位置和角度上,以确保能够捕捉到全景图像的各个方向。
每个相机或传感器都会同时拍摄同一时间的图像,这些图像会用来后续的图像融合。
接下来是图像融合。
在将多个图像拼接成一个连续并展开的全景图之前,需要对这些图像进行融合处理。
这个过程可以通过多种方法来实现,最常用的方法之一是使用图像拼接算法。
这个算法会将不同视角的图像根据它们的相同特征点进行匹配,并将它们无缝地拼接在一起。
在融合过程中,还需要进行图像校正、去除重影和补全图像等处理,以提高全景图的质量和逼真度。
最后是图像展示。
在图像融合完成后,就可以将全景图像展示给观察者。
这可以通过多种方式来实现,其中最常见的方式之一是使用全景投影技术。
全景投影技术利用了人类视觉系统的特性,通过将全景图像投影到一个球体上,使观察者能够从所有方向上观看到全景图。
此外,也可以通过虚拟现实技术、交互式网页或移动应用程序等方式来呈现全景影像。
除了上述基本原理外,还有一些其他的技术可以进一步提高全景影像的质量和体验。
例如,在图像融合过程中可以使用HDR(高动态范围)技术来扩展图像的动态范围,使得全景图更加真实和明亮。
此外,还可以利用深度信息和运动跟踪技术来增强全景影像的交互性,使观察者能够更加自由地浏览全景景象。
总结起来,360度全景影像技术通过多个相机或传感器的协同工作,将不同视角的图像融合在一起,以提供观察者全方位的视角。
通过图像采集、图像融合和图像展示等步骤,能够实现全景图像的拼接、校正和展示。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
无限风光收眼底制作360度动态全景图当置身于如诗如画的美景中,你是否想过将四周的一切美好事物都留下来?当新房装修完毕,你是否想过全方位向好友展示你的爱巢呢?当一个Party结束合影时却发现相机无法将所有人摄入镜头中,你是否有一个好的解决方法呢?……此时制作一幅360度全景图无疑是最好的解决方案。
拍摄全景图:注意保持水平在专业摄影中,拍摄全景图会使用专业且价格昂贵的设备,如:摇头机、360度转机。
随着数码技术的日益平民化,我们只需要一台普通的数码相机,就能拍摄制作全景图所需要的图片、再通过图像处理软件就能完美地拼接成全景图片。
在全景图的制作中,拍摄的单张照片十分重要,它直接决定到全景图的合成效果。
全景图英文名为Panorama,是指大于双眼正常有效视角(大约水平90度,垂直70度)或双眼余光视角(大约水平180度,垂直90度),乃至360度完整场景范围的照片。
传统的光学摄影全景照片是把90度至360度的场景全部展现在一个二维平面上,把一个场景的前后左右一览无余地推到观者的眼前。
简单地说是将多幅相连图片依次拼接组成的图片链,如同站在某个固定的点转了一圈,四周的景色连起来就是一幅全景图。
狭义上的全景图一定是360度,广义上的全景图就是超越了视野极限的图片。
第一步:准备好相机,选择好景点,然后在景点的中心位置确定一个中心点,再将相机放置在中心点处。
如果有三脚架,最好将三角架(如图1),然后将相机固定在三脚架上,这样通过旋转三脚架上的云台,相机在不改变位置的情况下就可以拍摄不同方位的图片。
即使没有三脚架,也要想法设法将相机固定在一个零时平台上,让相机平行转动且不能改变位置。
如果一定要手持相机进行拍摄,脚一定要在同一圆心上旋转,身体保持平衡。
●图1摄影专用三脚架第二步:在开始拍摄前,最好关闭相机的自动曝光功能,所以尽量使用手动曝光模式,这样可以保证每张照片的曝光参数相同,拍摄出来的图片色调会比较统一,便于使用软件进行无缝拼接。
拍摄焦距设定后,直到照片全部拍完才能更改,焦距越大,视角就会越小,拍摄的单个图片也会增加,这样在拼接时拼接的缝隙会增多,所以焦距一般设置成50毫米比较合适,这个焦距的变形也比较小。
第三步:在拍摄的过程中,第一张照片拍摄完成后,用一只手扶住三角架,确保其稳定,另一只手轻轻转动云台,转动一定的角度,继续拍摄,直至转完一周。
拍摄每张照片(如图2)的左右要留出一定的重叠部分,便于后面使用软件进行自动拼接。
一般情况下,空出的重叠部分约占照片的20%-30%。
照片的上下部分也要多空出一些,这样便于后面拼接完成后进行裁减。
●图2用来拼接全景图的单张图片静态处理:用Photoshop拼接全景图在拍摄完成后,将单张图片保存成图1、图2、图3……我们就可以借助Photoshop CS2的“图片拼接”(Photomerge)功能,将拍摄的单张图片拼接成一副完整的全景图。
第一步:启动Photoshop CS2中文版,选择菜单“文件→自动→Photomerge…”出现对话框(如图3),选择“打开”后面的“文件”选项,然后单击“浏览”按钮打开照片的保存文件夹,按住Ctrl键选择要添加的图片,选择下方的“尝试自动排列源图像”选项,最后单击“确定”按钮。
●图3 添加制作全景图的照片第二步:此时Photoshop会自动打开所有的图像,然后关闭,再弹出Photomerge对话框,如果单张照片拍摄得比较好(也就是相邻两幅图像的重叠部分比较明显),在这里基本上就能自动拼出来,单击“确定”按钮然后保存全景图即可(如图4)。
●图4 自动拼接出的全景图第三步:如果没有选择“尝试自动排列源图像”选项,则会打开Photomerge对话框(如图5),在上方的“源图片区”显示着添加的单张图片,下方是“拼图区”,可将图片从“源图片区”拖到“拼图区”排列。
拖动右侧“导航器”下的“滑块”可以调节“拼图区”的显示比例。
●图5 手动拼接全景图第四步:在“拼图区”排列图片时,当两幅图片重叠时,Photomerge会自动将图片之间的重叠部分设为透明,这样可以方便我们观察图像的重叠效果是否真实合理。
如果选择了“对齐图像”选项,可以在检测到共同之处时自动将重叠图像固定到位(如图6)。
●图6 自动透明并重合当拍摄的图片角度出现偏差或图片有些扭曲,可切换到“透视”选项,然后选择“圆柱映射”,它可以在一定程度上降低应用透视校正时可能会出现的扭曲;如果图片的色调不够统一,可选择“高级混合”选项,它可以降低因混合不同曝光度的图像而造成的颜色不一致。
当选中该选项以后,在大区域上会混合大范围的颜色和色调,在较小区域上则混合细节颜色和色调。
第五步:如果要旋转某张图片以适合与其它图片的合成,可以使用旋转工具。
选择左侧工具箱中第一个“选择图像”工具,选中要旋转的图像。
然后单击左侧工具箱中第二个“旋转”工具,在图片的边缘附近单击,就可以让图片围绕中心做圆形旋转(如图7)。
设置完成后单击“确定”按钮完成图像拼接,最后选择菜单“文件→存储为…”命令保存全景图片。
●图7 旋转图片如果不想为了制作一张全景图就安装Photoshop这种“庞然大物”,我们也可以使用PanaVue ImageAssembler来制作(下载网址:),操作很简单:启动工具单击“Try First”按钮,按Ctrl+N新建一个项目,选择Panorama Stitching(全景拼贴),单击OK按钮出现对话框,选择拼贴方式(Single row 是水平,single column是垂直),单击OK再次出现对话框,切换到“2-Add Image”项,单击Add按钮可添加制作全景图的图片,“3-Set Options”和“Selecte a Lens Definition”可设置属性,切换到“5-Run&Finalize”项,单击Full Run按钮可以生成全景图。
由于是共享软件,直接保存的全景图会变成黑白图像且会打上软件标记,所以可使用抓图软件将预览的完整全景图保存下来。
制作动态全景图方法1:Flash脚本实现用Photoshop可以制作出静态的全景图,那么我们能否将静态的全景图变成动态的呢?也就是制作出带有交互效果的全景图,当光标移动时全景图也会跟随着移动,形成动态的环视效果,使用Flash就可以轻松制作出这种动态全景图。
第一步:启动Flash 8.0,选择菜单“修改→文档”命令打开文档属性框,将文档的宽度设置为450px,高度设置为250px,背景色为黑色;选择菜单“文件→导入→导入到库…”命令出现对话框,选择静态全景图,再单击“打开”按钮导入图片;选择菜单“插入→时间轴→图层”命令插入三个新层,双击图层名称可重新命名,从上至下分别取名为:、控制脚本、控制按钮、显示区、全景图。
第二步:选择菜单“插入→新建元件…”出现对话框,选择类型为“按钮”,名称为“放大”,这样创建一个放大按钮,然后使用这种方法再制作一个“缩小”按钮;创建一个名为“响应”的按钮,该按钮是一个矩形,尺寸大约是360×200;选择菜单“插入→新建元件…”出现对话框,选择类型为“影片剪辑”,名称为“拼接全景图”;选择菜单“窗口→库”打开“库”,将其中的图片(全景图.jpg)拖放到舞台上,并且复制一份,将他们拼接起来(如图8)。
●图8 动态全景图中所用元件第三步:打开“库”,将三个按钮拖放到“控制按钮”层第1帧的舞台上,其中“响应”按钮的位置在全景图显示区域(大概在场景的中心位置),并且单击舞台下方的“属性”按钮,将其透明度(Alpha)设置为“0”,宽度为360,高度为200,X为50,Y为25;“放大”和“缩小”按钮在“响应按钮”的右下侧,再在该层的第25帧按F5键插入帧;在“显示区域”层第1帧的舞台上绘制一个与“响应按钮”等大的矩形,要正好覆盖在“响应”按钮上,将“库”中的“拼接全景图”影片拖放到层“全景图”的第1帧(如图9),最后在这两个层的第25帧按F5键。
●图9 舞台上各个原件的位置第四步:选中“拼接全景图”影片,然后单击下方的“属性”按钮,将其实例名设置为“tupian”;在“控制脚本”层的第1帧按F6键插入关键帧,单击舞台下方的“动作”面板,然后加上如下脚本:l = 459;// l是场景宽度h = 250;//h是场景高度t = 50;//t是显示区域顶部坐标b = 250;//b是显示区域底部坐标v = 250;//v是水平线坐标m = (t+b)/2;//m是显示区域的中心坐标si = 100*(b-t)/(tupian._height);//si是最小缩放倍数注意:“//”后面的是语句说明,这里的部分数据要根据制作时的实际大小来设置(如图10)。
●图10 脚本输入面板第五步:在“控制脚本”层的第5帧按F6键,然后打开“动作面板”,输入:“stop();”脚本(注:引号不要输入);再在第10帧按F6键,然后打开“动作”面板输入脚本(具体内容参阅源程序),这段脚本主要是获取光标的位置,根据光标的移动方向和速度,控制全景图的移动方向和速度。
在第11帧按F6键,打开“动作”面板,输入:“gotoAndPlay(10);”,它主要是实现重复执行两帧代码,从而保证在移动鼠标后,全景图一直保持运动。
第六步:在“控制脚本”层的第15帧按F6键,然后打开“动作”面板输入脚本(具体内容参阅源程序),这段脚本主要是按比例改变全景图的高度和宽度,从而实现放大效果。
在第16帧按F6键,打开“动作面板”,输入:“gotoAndPlay(15);”,作用是重复执行第15帧脚本。
第七步:在“控制脚本”层的第20帧按F6键,然后加上脚本(具体内容参阅源程序),这段脚本作用是让图片在放大后可缩小,并且设定缩小后不能小于原图的尺寸。
最后在第21帧按F6键,加上脚本:“gotoAndPlay(20);”,作用是重复执行第20帧脚本。
第八步:单击层“显示区”,然后右击选择“遮罩层”(如图11),这样全景图就只能出现在显示区;选中“放大”按钮,打开“动作”面板输入脚本(具体内容参阅源程序),这段脚本是当按下鼠标左键时,执行第15帧代码,即放大全景图,松开左键时执行第5帧代码,停止执行代码。
选中“缩小”按钮,加上语句(具体内容参阅源程序),这段脚本也是按下鼠标执行第20帧代码,松开后执行第5帧代码。
选中“响应”按钮,加上语句(具体内容参阅源程序),这段脚本的作用是当光标在响应按钮上,执行第10帧脚本,当光标离开响应按钮时停止执行脚本。
★源程序下载地址:★动态全景图下载地址:●图11 图层示意图第九步:按Ctrl+Enter键观看动态全景图效果(如图12),当光标向左移动时图片就会向左播放,光标向右移动时图片向右播放,单击“放大”按钮可以放到全景图,此时图片可以上下移动;最后选择菜单“文件→发布设置”命令弹出对话框,勾选“格式”选项下的“Flash(.swf)”选项,然后单击“发布”按钮将全景图输出成Flash动画。