flash图片切换效果:Flash 图片轮换效果
疯狂代码 CrazyCoder/ ĵ:http:/CrazyCoder/Flash/Article59249.html
这里图片轮换效果跟新浪那种不太样整个代码都是笔者自己写而且后来下了源码发现里头做法跟笔者也不尽相同它那里基本上是用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; 在遮罩效果时候用个随机数来控制使用何种特效:
笔者推荐使用办法是:
每个效果都放在个MC里头单独控制在效果结束后运行
stop;
_parent._parent.play; 6、 按钮切换实现:
切换过程中显示哪个图片可以在主时间轴通过个变量来控制有两个图片所以就需要两个变量笔者定
义为lastIndex和thisIndex
如果没有按钮控制图片轮换是以图片顺序为根据根据上述错觉显示法在将要切换时候运行
lastIndex=thisIndex
thisIndex1
对于thisIndex如果超过了图片信息下标则需要进行判断这将在介绍具体做法时候提到
如果换作了按钮则thisIndex不是加1而是换成按钮所传过去变量而lastIndex=thisIndex这个把新图片放到旧图片操作不变
具体做法:
0.1、准备好外部文件:在你硬盘里新建个文件夹里头放入个图像列表文件l使用如下格式
<?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 、新建个Flas档大小定为300*225(参考)保存为picsExchange.fla位置跟l在同目录
1.1、 开始进入读取分析XML工作并把所有信息存放于里头这里笔者创建了 3个
:descriptionsimgabbrsimgs
1.2 、在第帧里加上代码:
stop; //是时间轴版所以需要先停止播放等xml读取和分析完成以后才可以进入时间轴第 2段
.useCodepage=true //防止中文乱码
var imgList:XML= XML //创建读取xml对象鸡年贺词
imgList.load("l") //读取l文件
var descriptions:Array
var imgabbrs:Array
var imgs:Array //定义 3个用于存放图像信息
var imgsNum:Number=0; //放置图片数目变量
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帧里加入代码:
qq飞车精灵怎么得lastIndex=thisIndex //让下次新图片放到旧图片位置
thisIndex=(thisIndex+1)%imgabbrs.length //显示下张图片%运算让图片显示最后张后可以回到第张 3.3、 在44帧里添加帧代码:
gotoAndPlay(4); 个切换周期完成
此时运行影片如果图像列表和图片都没有话图像就会轮着显示但是现在效果很生硬是还没有遮罩动画做过渡
4.1、要添加遮罩了在遮罩图层第帧里创建个mc元件名和例子名均为mask接着在里头添加这么段形状补间动画:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论