快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

Flash AS编写代码实现三维环视效果

  前段时间在韩国风景网站上看到这种三维环视效果,前景和背景分离的效果,感觉很不错。自己就试着做了一个,今天把原文件和做法共享出来。

  大家先看看我做的这个效果:(鼠标放到图片上即可看到效果) 

http://bbs.flash8.net/bbs/UploadFile/2005-7/2005725155213247.swf

« Full Screen »

点击这里下载源文件

  1、首先找一张云层的图片,要大一点的,可以拼接为环视图片的最好。
  2、找一张风景的环视图片,然后将云层或者天空部分去掉,变成透明的,存为png透明格式。
  3、在主场景第一层第一帧中建立影片剪辑,实例名称为:bg_mc,在bg_mc下创建影片剪辑实例:bg,进入bg编辑,导入刚刚找到的云层图片。对齐坐标为0,0;
  4、在主场景第二层第一帧中建立影片剪辑,实例名称为:img_mc,在img_mc下创建影片剪辑实例:img,进入img编辑,导入刚刚处理过的风景图片。对齐坐标为0,0;
  5、在主场景第三层第一帧中加入以下AS代码:

//as----------------------------------------------------
stop();
Stage.showMenu = false;
Stage.scaleMode = "noScale";
fscommand(allowscale, true);
img_mc.img.duplicateMovieClip("img1", 2);//复制前景;
bg_mc.bg.duplicateMovieClip("bg1", 2);//复制云层北京;
page_width = Stage.width;//设置鼠标感应范围宽度
page_height = Stage.height;//设置鼠标感应范围高度;
step = 40;//设置间隔时间;
img_mc.img._x = 0;//初始前景坐标位置;
img_mc.img1._x = -img_mc.img._width;//初始前景被拼合为环视图
bg_mc.bg._x = 0;//初始背景坐标位置;
bg_mc.bg1._x = -bg_mc.bg._width;//初始背景被拼和为环视图;
img_mc._y = 0;//初始前景和背景y轴位置;
bg_mc._y = 0;//
_root.onEnterFrame = function() {//根据帧频持续调用函数;
img_width = img_mc._width/2;//设置前景鼠标检测范围;
bg_width = bg_mc._width/2;//设置背景鼠标检测范围;
if (_root._xmouse>0 && _root._xmouse<page_width && _root._ymouse>0 && _root._ymouse<page_height) {
//判定鼠标是否在场景范围内;
img_mc._x = img_mc._x-(_root._xmouse-page_width/2)/step;//控制前景循环;
bg_mc._x = bg_mc._x-(_root._xmouse-page_width/2)/step*1.3;//控制背景循环,速度比前景快1.3倍;
if (img_mc._x<-(img_width-page_width)) {//以下几个if循环为检测是否超出范围;
img_mc._x = page_width;
}
if (img_mc._x>page_width) {
img_mc._x = page_width-img_width;
}
if (bg_mc._x<-(bg_width-page_width)) {
bg_mc._x = page_width;
}
if (bg_mc._x>page_width) {
bg_mc._x = page_width-bg_width;
}
}
};

现在直接Ctrl+enter就可以看到效果啦。现在共享我做这个效果时用到的两张图片;

  云层图片:

  风景图片:


返回类别: Flash教程
上一教程: 在电子邮件中插入FLASH动画
下一教程: Flash视频教程:缩放工具

您可以阅读与"Flash AS编写代码实现三维环视效果"相关的教程:
· Flash实现在花间自由地翱翔小鸟的效果
· 在Flash中实现Winamp均衡器频谱效果
· FLASH中实现眨眼睛的动画效果
· FLASH中制作静态三维效果图
· Flash中残影效果的简朴实现
    微笑服务 优质保证 索取样品