31 12
发新话题
打印

[分享] [2.22更新]丢个自己写的SWF+XML的图片展示效果!

[2.22更新]丢个自己写的SWF+XML的图片展示效果!

N久没用过FLASH和来过闪吧了,最近终于有点空闲!
无聊写了个图片展示效果,希望对大家有用!
AS代码很简单,如果有什么不明白,请提出来,我会尽量解决!
[photo.rar 2008.2.20](下面的包)!更新了几句代码,增加了个图片弹出的效果!
预览地址:http://www.anmeijt.com/robinlee/try/photo.html




2.22更新:
多谢这么多朋友支持!
因为我是用FLASH CS3写的所以FLASH8应该打不开!现在传上FLASH8的版本!

另外关于教程方面,因为我是随手写的,代码并不系统,以后有时间整理一下再放出来!
先给大家介绍一下这种效果的原理。
控制图片初始位置和图片间隔的主要代码是:
var vx=30,vy=20,va=.9,vs=.96;
var vxs=50,vys=100,vas=100,vss=100;

vx表示第二张与第一张图片的X距离;
vxs+=vx;既后一张_x在前一张的_x上增加vx;
vx*=1;这里设以后vx*=1没意义,就是图片间隔为vx的初始值
vy同上一样,不过用了vy*=0.65;vys-=vy;来实现图片_y值的递减
vss=100;是设置图片的原始比例,vs是设置图片比例的递减量。
vss*=vs;配合vxs和vys来实现图片由近到远排列的效果。
注意:由于我当时只是想试试,所以用的是小图,就设成100,所以在弹出来后比例就只能是200或300,导致图片不清晰,
所以如果是要应用大图,原始比例应该设成<100,弹出后才到100!
另外有vavas变量同上vs等变量的意义差不多,是设置图片透明度递减,但效果不太好,所以我有注消这一句//setProperty("MC_photo"+i,_alpha,vas);
其它的都是加载XML文件、图片移动缓冲和鼠标响应代码!
以上的几个关键变量设置可以调整图片的排列方向和间距等
改变值会有很多不同的效果,大家可以自己去试试!
如果还有不明白可直接Q我:25498559



[ 本帖最后由 robinlee_lx 于 2008-2-22 23:26 编辑 ]

附件

Photo.rar (170.76 KB)

2008-2-19 19:59, 下载次数: 668

photo.rar (171.96 KB)

2008-2-20 16:01, 下载次数: 939

[2008.2.22]更新

PhotoFlash8.fla (68.5 KB)

2008-2-22 23:22, 下载次数: 359

TOP

不错!很有空间感!
但得柔情消侠气,此生长愿伴妆台

TOP

看看先  希望效果不错!

TOP

很好很强大。

TOP

效果真好,支持!

TOP

效果很不错

TOP

朋友,用flash 8打不开源文件,显示格式错误

TOP

呵呵。。能否多一些花样。。! 这样更强大点!!
我没有天份。。但有后天的自信、顽固、拼搏、坚持。。。。。。FLASH技术交流群:56785596

TOP

动作看不懂,能出个教程或加个注释吗?

TOP

flash cs3的版本
很不错的创意,感谢分享

TOP

楼主的效果很不错哦

研究研究一下

TOP

支持!

TOP

引用:
原帖由 温柔一$ 于 2008-2-20 17:41 发表
很好很强大。

TOP

加油
ckhxlt.blog.163.com

TOP

位置可以改的吗

TOP

回复 1# 的帖子

为什么我用flash8打不开你的源文件呢!请赐教!

TOP

谢谢!下来看看。

TOP

很好

TOP

建议增加打开连接
和导航差不多了呵呵

TOP

恩, 替楼主完善一点代码, 顺便发现了flash cs3脚本解释器的一个bug

flash 效果不错, 但编码上有点漏洞, 导致如果因为rollover使mc移动而触发rollout事件, 同时因为rollout而又引起相邻的mc的rollover事件, 从而这两个mc开始疯狂跳动。 以下代码增加了一点逻辑处理这种情况, 效果看上去好些了; 同时发现cs3脚本引擎一个bug, 多半是player 线程同步没有做好, 脚本设置 enable = false后, 在极短时间内, mc仍然可接收到事件通知, 从而导致无法预见的后果, 因此代码内增加了额外判断以修补这个bug.
4年多没有玩flash了, 今天玩得还算尽兴, 呵呵。

var myXML = new XML();
var onIndex = -1;

myXML.ignoreWhite = true;
myXML.load("Photos.xml");
myXML.onLoad = function(success) {//装载xml文件
        if (success) {
                var myList = myXML.firstChild.childNodes;
                var PhotoNum=myList.length-1;
                var vx=30,vy=20,va=.9,vs=.96;
                var vxs=50,vys=100,vas=100,vss=100;
                for(i=0;i<=PhotoNum;i++)
                {
                        _root.attachMovie("MC_photo","MC_photo"+i, 100-i);
                        setProperty("MC_photo"+i,_x,vxs);
                        setProperty("MC_photo"+i,_y,vys);
                        //setProperty("MC_photo"+i,_alpha,vas);
                        setProperty("MC_photo"+i,_xscale,vss);
                        setProperty("MC_photo"+i,_yscale,vss);
                        _root["MC_photo"+i].LoadName=myXML.childNodes[0].childNodes.attributes.imgURL;
                        _root["MC_photo"+i].gotoAndStop(2);
                        _root["MC_photo"+i].tx=_root["MC_photo"+i]._x;
                        _root["MC_photo"+i].ty=_root["MC_photo"+i]._y;
                        _root["MC_photo"+i].ts=_root["MC_photo"+i]._xscale;
                        _root["MC_photo"+i].td=100-i;

                        _root["MC_photo"+i].onRollOver=function()
                        {
                                // cs 3 bug, 设置enable = false后极短时间内仍然可接收到事件通知, 因此会进入到这里, 把   onEnterFrame 指针给改掉, 因此必须加以判断进行保护
                                if(!this.enabled){
                                        return;
                                }
                               
                                this.onEnterFrame=function()
                                {
                                       
                                        if(onIndex != -1 && onIndex != this){
                                                onIndex.onRollOut();
                                        }
                                       
                                        onIndex = this;
                                       
                                        d=this.tx+100*(this._xscale/100)-this._x;
                                        if(d<=0.1){
                                                delete this.onEnterFrame;
                                                if(onIndex == this){
                                                        onIndex = -1;
                                                }
                                        }                                       
                                        this._x+=d/4;                                               
                                }
                        }
                        _root["MC_photo"+i].onRollOut=function()
                        {
                                if(!this.enabled){
                                        return;
                                }
                               
                                this.onEnterFrame=function()
                                {
                                        d=this.tx-this._x;
                                        if(Math.abs(d)<=0.1){delete this.onEnterFrame; }
                                        this._x+=d/30;
                                }
                        }
                        _root["MC_photo"+i].onPress=function()
                        {
                                this.enabled=false;
                                trace(this + "1");
                                this.swapDepths(101)
                                this.onEnterFrame=function()
                                {
                                        dx=300-this._x;
                                        dy=120-this._y
                                        if(Math.abs(dx)<=0.1 and Math.abs(dy)<=0.1)
                                        {                                               
                                                if(Math.abs(200-this._xscale)<1)
                                                {
                                                        delete this.onEnterFrame;
                                                        this._xscale=200;
                                                        this._yscale=200;
                                                        this.onMouseDown=function()
                                                        {
                                                                delete this.onMouseDown;
                                                                this.onEnterFrame=function()
                                                                {
                                                                        if(Math.abs(this._x-this.tx)<.1 and Math.abs(this._y-this.ty)<.1)
                                                                        {
                                                                                delete this.onEnterFrame;
                                                                                this.swapDepths(this.td);
                                                                                this.enabled=true;
                                                                        }
                                                                        this._x+=(this.tx-this._x)/2
                                                                        this._y+=(this.ty-this._y)/2
                                                                        this._xscale+=(this.ts-this._xscale)/2;
                                                                        this._yscale+=(this.ts-this._yscale)/2;
                                                                }
                                                        }                                                               
                                                }
                                                this._xscale+=(200-this._xscale)/2;
                                                this._yscale+=(200-this._yscale)/2;                                               
                                        }
                                        this._x+=dx/2
                                        this._y+=dy/2
                                }
                        }
                        vx*=1;
                        vy*=0.65;
                        vxs+=vx;
                        vys-=vy;
                        vas*=va;
                        vss*=vs;
                }
        }
        else
        {
                trace("Error!!!");
        }
}

TOP

不错

TOP

if(!this.enabled){ return;  }
收下了.呵呵.

TOP

俺错了, 不是cs3 bug, enable = false 后产生的是RollOut事件是我自己调的:
if(onIndex != -1 && onIndex != this){
         onIndex.onRollOut();
}
糗了

TOP

支持,呵呵

TOP

好。。。。。。。。。。。。。。。。。。。

TOP

顶一下

TOP

不错  不是我想要的那种感觉

TOP

强贴留名!

TOP

楼主,能不能帮我搞一个象  http://wenzhou.dianpu.com/3dflash/index_211301046051.html   这样的FLASH

TOP