软件开发培训班 >> 创意设计 >> Flash


Flash模拟360度互动环景的简单方法

　　熟悉Director多媒体制作的朋友都知道，在Director里实现360度环景效果是非常简单的，那么在Flash中能否实现这样的效果呢？如果可以的话，怎么去实现呢？答案是用Flash完全可以实现这样的效果，以前我们在杂志上也看过这种效果的实现方法，但是过程显得比较繁琐，而且其中使用了大量的Action动作指令，新手们学起来不是很容易。

　　下面我就使用一种相对简单的方法，只需要使用到很简单的Action，来实现完全一样的效果。

　　制作思路其实很简单，关键是用Mask（遮罩）去配合Tell Target指令的方式来完成的。下面我们就来看看具体如何在Flash中来实现。

　　一、素材的准备

　　在制做360度全景之前，我们需要先准备好连续的一些照片，也就是我们所要展示场所中环绕一周的照片，您可以事先拍好，然后将不同角度的照片处理成一整张连续的照片，这里大家可以打开为您准备的素材源文件，里面已经准备好了本实例需要的环景照片和按钮。

　　二、正式制作

　　1.制作"照片"Graphic组件

　　启动Flash后（本例中我们使用的是Flash的最新版Flash mx），首先选取Insert(插入)→New Symbol(新建组件)菜单命令，新建一个Graphic组件，并命名为"照片"，"照片"组件的编辑区中，将图库中已经准备好的位图vr拖到编辑区中，如图1所示：



图1

　　2.制作"环场照片"Movie Clip组件

　　再次选择Insert→New Symbol指令，新建立一个Movie Clip（电影剪辑）组件，并命名为"环场照片"，在"环场照片"组件的编辑状态下，选择图层Layer1的第一帧，调出Actions面板，添加as指令:gotoandstop(50),如图2所示：


图2

　　在"环场照片"组件的编辑区中，给图层Layer1的第二帧上插入Blank Keyframe(空白关键帧)，再打开Library图库，把"照片"组件拖到编辑区中，并且把"照片"组件的位置移至编辑区的偏右方，如图3所示：


图3

　　在第50帧插入Keyframe(关键帧)，在第50帧将"照片"的位置移至舞台的偏左方，在第2帧与第50帧之间，执行Create Motion Tween指令，做成一段移动过渡动画，如图4所示：


图4

　　在第51帧处插入一个Blank Keyframe，在第51帧上加Gotoandplay(2)指令，主要的目的是让照片可以头尾接起来，且可以向前或向后播放，不会有尽头，一直循环下去。

　　3.布置主场景

　　回到主场景中，将默认的图层Layer1重命名为"环场照片"，再打开Library，把"环场照片" Movie Clip组件拖曳到舞台上，并且在此图层的第三帧插入一个Keyframe(关键帧)，将时间轴延长至第三帧，并且将"环场照片"组件在Properties面板中命名为"pp"，以便我们在后面的Action中对此组件进行控制，因为我们在制作"环场照片"组件的时候，其第一帧是空白的，所以"环场照片"组件在主场景中显示为一个白色的圆点，如图5所示：



图5

　　在主场景中再新增一个图层，将此图层重命名为"mask"，这一层要作为Mask层来使用。然后在舞台上画一个无外边框线的矩型，并将其填充上合适的填色，同样将此图层的时间线延长至第三帧，最后在图层"mask"上点鼠标右键，执行Mask命令，将本层设置为遮罩层，如图6所示：


图6

　　4.添加Action

　　在主场景中新增一个图层，将此图层命名为"right",用来放置向右的按钮，将此图层的前三帧全部设置为关键帧，如图7所示：


图7

　　接下来 给"right"图层的第一帧添加如下所示的Action:

　　tellTarget ("pp") {
　　　　gotoAndStop(2);
　　}
　　//一开始播放影片的时候，就跳转到电影剪辑pp（"环场照片"组件）的第2帧，但是并不//立即播放，而是停下来，这样就可以通过方向按钮来对pp的播放进行控制。

　　给"right"图层的第二帧添加如下所示的action:
　　Stop();
　　并且在第2帧建立一个Lebel标签"ld".

　　给"right"图层的第三帧添加如下所示的Action:
　　Stop();

　　并且在Frame3建立一个Lebel标签。Frame3的标签名称命名为"2d"

　　然后点选Frame2，再点选舞台上的"向右按钮"，设定其Actions为：

　　on (rollOver) {
　　　　tellTarget ("pp") {
　　　　　　nextFrame();
　　　　}
　　　　gotoAndPlay("2d");
　　}

　　//当鼠标放到向右的方向按钮上的时候，便跳到电影剪辑pp的下一帧，然后跳到主场景//中标签为2d的关键帧，因为在后面我们要在2d处设置Action,而2d处的action会控制//影片再跳到1d,所这样就形成了一个循环，虽然每一步只播放一帧，但是这样连接起来后//就是连续播放的效果了。

　　点选Frame3，再点选舞台上的"向右按钮"，设定其Actions为：

　　on (rollOver) {
　　　　tellTarget ("pp") {
　　　　　　nextFrame();
　　　　}
　　　　gotoAndPlay("1d");
　　}
　　
　　//这步和设置2d处的用意是一样的，结合上面的action就构成了一个循环

　　在主场景中再新增一个图层，将此图层命名为"left"，在舞台上设计一个"向左按钮"的Button，时间延长至第三帧， 在"向左按钮"图层的Frame2及Frame3都插入Keyframe，如图8所示：


图8

　　点选Frame2，再点选舞台上的"向左按钮"，设定其Actions：

　　on (rollOver) {
　　　　tellTarget ("pp") {
　　　　　　prevFrame();
　　　　}
　　　　gotoAndPlay("2d");
　　}
　　//此处的Action的作用和"向右按钮"的Frame2中的Action的作用是一样的，鼠标放到向左按钮上的时候，便播放pp组件的前一帧。

　　点选Frame3，再点选舞台上的"向左按钮"，设定其Actions：

　　on (rollOver) {
　　　　tellTarget ("pp") {
　　　　　　prevFrame();
　　　　}
　　　　gotoAndPlay("1d");
　　}
　　
　　//此处的Action的作用和"向右按钮"的Frame3中的Action的作用是一样的当鼠标放到//方向按钮上的时候，跳到电影剪辑pp的前一帧

　　三、优化处理

　　在发布前，我们在做一些必要的设置，把影片的播放速率调慢一点，默认的播放速度是12帧/秒，这里我们调整为6帧/秒，这样就不至于在播放的时候照片一闪而过，最后您只要发布一下，看看是不是很有趣的效果啊！

　　到此为止，一个精彩的360度全景效果就做好了，大家也看到了，我们在制作过程中并没有用到太多太复杂的as,只是用到了例如Telltarget()和GotoAndPlay()这样最最基本的as,而且制作步骤也比较清晰，相信新手很快就可以学会的。 .fla源文件下载