图片轮换效果跟新浪那种不太
样
整个代码都是笔者自己写而且后来下了源码发现里头做法跟笔者也不尽相同它那里基本上是用
Interval控制
转换特效很多是用纯AS写出来而笔者做那个基本上是时间轴控制特效也不是纯AS从
规范标准和运行效率来说新浪那个更接近规范标准语言运行效率更高从制作方便性和直观性来说笔者那个制作起来更为方便更为直观对于不是员出身Flasher来说笔者这个更好理解考虑到AS也趋向于规范标准性
笔者前段时间也用纯AS2.0类把这个轮换效果写成了组件但是笔者多类编程思想还不很了解导致贻笑大方故本篇文章就先介绍笔者这个时间轴版轮换效果制作过程整个
流程:1、 该
图像列表是读XML故第步先读取并分析XML把相关信息存于
里头该分析是时间轴第部分2、 分析到XML以后
根据图像源把所有图片先载入到swf在图片切换过程中不允许有图像消失现象或者延迟现象出现图片是通过用遮罩效果把新张覆盖掉旧张来实现切换
因此需要有 3个图层:个放旧图片个放新图片其中新图片被遮罩为了不让切换时图像有不可见现象或者出现延迟加载时放旧图片和放新图片MC里头都要先载入所有图像然后通过设置可见性来显示相应图像
这是时间轴
第 2部分3、 然后
将有比较长段时间轴这个其实就是图片轮换延迟时间4、 此时
就要进入下轮切换了这里可以通过attachMovie或者duplicateMovieClip放入个载入所有图MC但可惜是这么做需要重新loadMovie故不可取或者通过交换深度来实现不过每次交换深度也很麻烦要重新设置遮罩在这里笔者将利用人眼睛错觉来方便实现这过程具体做法如下:
这
切换过程完成了个周期结束5 、接下来讲述随机效果
实现:如果在mask里就
个单效果切换时间轴动画那么每次轮换效果将都是样这里笔者提供两种随机效果实现思路方法:A 把遮罩做成
个MC时间轴如下:
点击放大
其中无标签
空白关键帧均输入代码:stop
_parent.play; 在
遮罩效果时候用个随机数来控制使用何种特效:mask.gotoAndPlay("效果"+(random(3)+1)) 笔者不推荐使用该法把所有效果放在同时间轴里容易乱而且不知道是不是Flash有BUGMCgotoAndPlay
如果使用帧标签容易出错使用帧号话将很麻烦要手动把关键帧标签所在帧号(26,47,65)放在个里面旦效果增加或者改变很大又要手动修改笔者推荐使用
办法是:
每个效果都放在
个MC里头单独控制在效果结束后运行stop;
_parent._parent.play; 6、 按钮切换实现:切换过程中
显示哪个图片可以在主时间轴通过个变量来控制有两个图片所以就需要两个变量笔者定义为lastIndex和thisIndex如果没有按钮控制
图片轮换是以图片顺序为根据根据上述错觉显示法在将要切换时候运行lastIndex=thisIndex
thisIndex
1对于thisIndex
如果超过了图片信息下标则需要进行判断这将在介绍具体做法时候提到如果换作了按钮
则thisIndex不是加1而是换成按钮所传过去变量而lastIndex=thisIndex这个把新图片放到旧图片操作不变具体做法:
0.1、准备好外部
文件:在你硬盘里新建个文件夹里头放入个图像列表文件list.xml使用如下格式<?xml version="1.0" encoding="GB2312"?><images><i s="images/v82008.jpg" a="images_abbr/v82008.jpg">未被直播超女复活赛</i><i s="images/060820110116v82009.jpg" a="images_abbr/060820110116v82009.jpg">吃“最便宜盒饭”</i><i s="images/060820110131v82010.jpg" a="images_abbr/060820110131v82010.jpg">本报记者亲历长沙“超级女声”台前幕后</i></images> 根据这里路径放置图像文件PS:这样
写法其实名称不好看明白但当初笔者考虑传输时间就在变量这里对xml文件做了压缩0.2 、新建
个Flash文档大小定为300*225(参考)保存为picsExchange.fla位置跟list.xml在同目录1.1、 开始进入读取分析XML
工作并把所有信息存放于里头这里笔者创建了 3个:descriptionsimgabbrsimgs1.2 、在第
帧里加上代码:stop; //是时间轴版所以需要先停止播放等xml读取和分析完成以后才可以进入时间轴第 2段
.useCodepage=true //防止中文乱码
var imgList:XML=
XML //创建读取xml对象
imgList.load("list.xml") //读取list.xml文件
var descriptions:Array
var imgabbrs:Array
var imgs:Array //定义 3个用于存放图像信息
var imgsNum:Number=0; //放置图片数目变量
imgList.onLoad=function(success){
imgList.ignoreWhite=true
(success){
descriptions= Array
imgabbrs= Array
imgs= Array //该步用于
化在重新读取时候把里内容清空
imgsNum=imgList.childNodes[0].childNodes.length
for(var i in imgList.childNodes[0].childNodes){
var imgNode:XMLNode=imgList.childNodes[0].childNodes[i]
descriptions[i]=imgNode.childNodes[0].nodeValue //这是图片文字描述
trace("description:"+descriptions[i])
imgabbrs[i]=imgNode.attributes.a //这是缩略图路径
trace("imgabbr:"+imgabbrs[i])
imgs[i]=imgNode.attributes.s //这是源图路径
trace("img:"+imgs[i])
}
play; //分析完毕可以让时间轴播放
}
{
trace("loading error!")
}
} 1.3、 确定所有内容正确输出以后就可以进入加载图片操作2.1、 按照下图创建 3个图层
其中动作脚本层就是1.2中输入代码
图层2.2 、在旧图片
图层里新建个MC命名为loadPic例子名为lastPic并让该MC注册点放在主场景左上方然后双击进入该MC在里头再创建个MC元件名称和例子名均为graph
2.3 这里我们将通过复制graph载入列表中
所有图像名称将按graph0graph1规则来命名因此在这里帧先定义个设置图像可见性function Image(imgIndex){
for(var i in _parent.imgabbrs){
this["graph"+i]._visible=false
}//先把所有图片隐藏
this["graph"+imgIndex]._visible=true //把需要显示图像重新显示出来
} 然后把loadPic这MC复制个到新图片所在图层例子名为thisPic并让两个loadPic重合3.1、 到显示图片了
先在第 3帧里化下thisIndex和lastIndex值这两个值分别控制两个图片容器显示哪个图片第 3帧代码:
var thisIndex:Number=0
var lastIndex:Number=-1 其实是开始没有旧图片所以lastPic里头实际上是不显示任何图片正如此这代码只运行次就把它单独放到第 3帧了第 4帧就正式显示图片了
而且每次切换都要重新次:thisPic._visible=true;
lastPic._visible=true;
thisPic.Image(thisIndex);
lastPic.Image(lastIndex);// Image刚在是loadPic里头写好控制里第几张图片显示 3.2 、进入图片停止状态加段比较长时间轴笔者加到第42帧并在42帧里加入代码:lastIndex=thisIndex //让下次新图片放到旧图片位置
thisIndex=(thisIndex+1)%imgabbrs.length //显示下张图片%运算让图片显示最后张后可以回到第张 3.3、 在44帧里添加帧代码:gotoAndPlay(4); 个切换周期完成此时
运行影片如果图像列表和图片都没有
话图像就会轮着显示但是现在效果很生硬是还没有遮罩动画做过渡4.1、要添加遮罩了
在遮罩图层第帧里创建个mc元件名和例子名均为mask接着在里头添加这么段形状补间动画:
其中
时间轴上首尾两帧均加上:stop; 主时间轴第 4帧追加:mask.gotoAndPlay(2); 此时运行效果就不再生硬了是个简单遮罩动画切换效果但是
为了更方便地实现随机效果这种刚才笔者不推荐做法就不再用了刚才只是为了方便大家测试效果而已5.1、 把时间轴改成下图
设置:
动作脚本中每
帧都是写:stop;
mask.gotoAndPlay(2); 而遮罩mc这图层区别帧都放置些跟刚才形状补间类似MC动画例子名均为mask最好动画开头都不跟图片容器有接触结尾则把整个图片容器覆盖达到遮罩显示新图片效果然后
主场景第 4帧控制mask代码也要跟着改变把mask.gotoAndPlay(2);改为mask.gotoAndStop(1+random(mask._totalframes-1))于是每次切换mask就会跳转到区别帧5.2 、修复
个Bug:笔者以为已经成功
时候测试才发现有些时候还是不能自然过渡直以为是动画效果问题调来调去还是不行好不容易地笔者通过输出每次跳转帧才知道原来当两次跳转位置样时候遮罩动画动不起来没有发生帧跳转为此笔者想到了用如下思路方法调整:把随机跳转代码转移到mask里头
在mask里添加最后帧其中在遮罩MC图层里随便放入些图形但是不要跟图片容器重叠该帧动作脚本图层添加代码:gotoAndStop(random(_totalframes-1)+1)跳转到除最后帧任帧里头运行遮罩动画效果然后主时间轴第 4帧中最后句也相应地改为mask.gotoAndStop(mask._totalframes)让mask先跳转到最后帧再随机播放效果这样哪怕两次随机值样帧也会发生跳转过渡动画定可以播放成功这里需要介绍说明
点是如果你在2.2步创建graph元件不是矩形或者Alpha不等于100话那么当图形比例问题而不占满整个graph时候旧图片将有可能新图片面积小而不会被完全覆盖在下次轮换时候就会看到很生硬图片消失效果所以笔者建议大家graph元件最好是个全不透明矩形至此
自动过渡播放效果已经实现了下面就是按钮控制实现6.1 按钮功能
实现:如果要添加按钮功能
首先就得添加按钮这个道理连小学生都明白然而it's easier said than done具体如何创建按钮就不是那么简单了图像数目是不确定因此需要动态创建创建按钮其实只需要在载入全部图像进入第
轮显示时候创建次就可以了因此可以把该段创建按钮代码放在第 3帧为了让美工高手能有发挥自己才华机会笔者在这里就不用代码写按钮了而是先在库里手动创建个接着通过attachMovie载入为了让按钮
深度更好管理笔者建议大家把所有按钮载入到个mc里头于是在遮罩层上面新建个图层命名为按钮然后放置个空mc元件名和例子名均为button_Field位置根据你个人喜好而定接着
在第 3帧追加代码:for (var i in imgabbrs) {
var btn:MovieClip = button_Field.attachMovie("button", "button"+i, i);//从库里载入button元件创建思路方法在后面介绍
btn._x = i*btn._width;
btn._y = 0;//这两句让按钮横向排列
btn.index=Number(i)+1;//给按钮定义个属性这个属性表示第几张图片将在个动态文本里显示
} 6.2 按钮到现在还没创建所以大家可能不明白上面代码有些到底是用来干啥现在笔者就给大家讲述如何先创建
个按钮在库里右键—新建元件
命名为button类型为mc打开“高级”对话框点中“为动作脚本导出”和“在第帧导出”在该元件里
创建两个图层
其中
按钮图层放个按钮添加代码:on(release){
_parent._parent.lastIndex=_parent._parent.thisIndex //让新图片放到旧图片所在地方
_parent._parent.thisIndex=(index-1) //获得新图片索引
_parent._parent.gotoAndPlay(43) //跳转到43帧从而跳过42帧自动切换代码
} 文字图层放动态文本变量名为index现在
测试下基本效果就出来了但是还有个小Bug就是当图片切换效果动画还没完成时候马上切换下个图动画效果过渡就不自然解决办法有两个第个很简单就是把44帧代码拖后点但是不能从根本上解决问题第 2个办法相对复杂将在下帖再作介绍6.3 从根本上解决上述
小Bug:新浪
新闻图片轮换里如果遮罩效果运行时候点了别图片话Flash会等效果运行结束就马上切换到所点到图像因此在这里我们应该让控制主时间轴帧跳转代码gotoAndPlay(43)放在效果运行结束以后那么
效果运行结束的后如何知道的前点了按钮呢？这个很好处理只要设个布尔变量havePressed=true就可以了动画效果结束以后检查havePressed值就可以了因此我们还需要在开始切换图片时候要让havePressed变回false否则即使下次不点按钮也会在遮罩效果结束后马上切换到下图但是
这样又会有新问题如果在遮罩效果运行结束后已经检查了havePressed再点切换按钮话检查havePressed操作就不能再在点击按钮时进行导致立即切换图片操作失败由此可见
效果运行时和效果运行结束两种状态需要分别处理故还需要定义个布尔变量存放当前效果运行状态是运行时还是运行结束在遮罩效果开始时设置running=true运行结束让running=false于是
要修改代码地方就比较多了首先
按钮代码需要改为:on (release) {
_parent._parent.lastIndex = _parent._parent.thisIndex;
//让新图片放到旧图片所在地方
_parent._parent.thisIndex = (index-1);
//获得新图片索引
(_parent._parent.running) {
//如果遮罩效果正在运行
_parent._parent.havePressed = true;
//主时间轴不能直接跳转而要等到效果运行结束后检查到havePressed=true时才可以
} {
_parent._parent.gotoAndPlay(43);
//跳转到43帧从而跳过42帧自动切换代码
}
} 主时间轴第 3帧声明两个布尔变量:var running:Boolean;
var havePressed:Boolean; 主时间轴第 4帧为切换周期开始遮罩效果处于运行时状态而还没点击过按钮故追加:running=true;
havePressed=false; 的后在每个遮罩动画效果运行结束后要让running=false运行已经结束并且检测是否在效果运行这段时间内点过按钮因此都追加代码:_parent._parent.running=false;//running是在主场景里声明故需要指向于主场景
(_parent._parent.havePressed){//假如在效果运行时点了按钮根据按钮代码该值定为true否则就是false
_parent._parent.gotoAndPlay(43);//检查到点过话就在效果运行结束这刻马上切换图片
} 至此整个图片轮换效果完成了但是大家也许会提问为什么那些很眩百叶窗效果丰富多彩形状变化还没做出来啊？其实那些都是在遮罩mc里做笔者在这里只拿了个最简单效果作为例子大家完全可以根据自己需要把那里效果换成自己想要效果
最新评论