如何利用flash制作图片切换效果

用Flash制作图片切换特效

图片切换是网页中最为常见的效果，一般的广告牌都是通过图片切换制作的。在这里向大家介绍常见的图片切换方式：百叶窗的图片切换效果。

在本文中主要学习到的内容有：两层上不同图片的导入和精细的控制；遮罩和形状变化组合的应用。

*** 作步骤：

1、按Ctrl N新建一个flash文件，执行“File/Import”命令（快捷键为：Ctrl R），然后从d出的对话框中选择你要引用的图片文件，单击OK按钮确认，按Ctrl Alt I键调出Info面板，将宽（W）设为：285，高（H）设为：220。

2、按Ctrl B将导入的图片打碎，选择工具栏中的椭圆形工具，设置好Stroke面板的参数后，按住Shift键，在工作区中拖动鼠标，画一个图形，选中该图形，按Ctrl Alt I键在Info面板中将宽（W）设为：240，高（H）设为：216，将圆形移动图片中央，选中图形及图形外边的图片，按delete键，将其删除。

3、单击时间线窗口左下解的“ ”按钮，新建一个层：Layer2，用一面的方法制作另一个图形，使得Layer2上的图片刚好遮掩在Layer1上。

4、再新建一个层Layer3，选择工具栏中的矩形工具，将其属性区中的线框设置成“无线框”，填充颜色设置为“黑色”，在工作区中拖动鼠标画一个长方形。

5、用箭头工具选中该长方形，然后然后执行“Insert/converttosymbol”命令（快捷键为F8键）把它转换为：Graphics符号，命名为：百叶；按Ctrl F8键再新建一个符号，符号类型为：Graphics，命名为：百叶2，进入其编辑环境，按Ctrl L键打开符号库，将符号百叶拖入工作区，并适当调整其位置，分别在第15、25、40帧处按F6插入一关键帧，分别选择第15帧和第25帧，在Info面板中将高度设置为1，按照建立路径。

时间轴上窗口左上角上的Scene1回到主场景，并删除长方形图片，按Ctrl L打开符号库，将符号百叶1拖入场景中，将其移动到图片最下方，调整其位置，用鼠标右键单击Layer3层的名称，从d出的菜单中选择Mask项，这时Layer3层变成了遮罩层，遮罩区域之外的Layer2层中的图片将显示不出来。

7、新增8个层，按住Shift键，选中Layer2和Layer3，用鼠标右键单击被选中的任意一帧，从d菜单中选择CopyFrames，用鼠标右键单击Layer4层的第1帧，从d出的菜单中选择PasteFrames，这时Layer4将变成了复制后的Layer2和Layer3遮罩层，

8、单击复制后的遮罩层，按键盘上的向上箭头键，移动选区，移动后的位置

9、用同样的方法，依次在Layer5至Layer11中分别复制Layer2和Layer3图层，将各个遮罩层中的百叶1向上移动，并顺次向上连接，按住Shift键，选中所的层中的第42帧，并用鼠标右键单击它在d出的菜单中选择InsertFrame项（快捷键为：F5），使所有层的帧都增加42帧，然后单击时间轴窗口层名称上方的按钮，锁住所有的层，这时所有的 *** 作都完成了，你可以按Ctrl Enter键测试一下成果，对了，不要忘了保存。

//需要自己更改的数据

var _xmlReq:URLRequest = new URLRequest("conf.xml") //conf.xml为xml文件的路径

var _picNumber:int = 18 //图片总数

var _transTime:Number = 3 //切换图片的时间，单位是秒

var _alphaTime:Number = 1.2         //每张图片淡入淡出所用的时间，单位是秒

import flash.display.Sprite

import flash.net.URLLoader

import flash.net.URLRequest

import flash.events.Event

import flash.display.Loader

import flash.utils.Timer

import flash.events.TimerEvent

import fl.transitions.Tween

import fl.transitions.easing.*

var _transTimer:Timer = new Timer(_transTime*1000)

var _picturesArr:Array = new Array()

var _picContainer:Sprite = new Sprite()

var _curPic:int

var _xmlFile:XML

var _xmlLoader:URLLoader

var _tweenIn:Tween

var _tweenOut:Tween

function init() {

addChild(_picContainer)

//_picContainer.mask = picMasker    //如果需要遮罩，请自己在舞台上放置一个名称为picMasker的影片剪辑作为遮罩层

importXML()

}

function importXML():void{

_xmlLoader = new URLLoader(_xmlReq)

_xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded)

}

function xmlLoaded(evt:Event):void{

_xmlFile = XML(evt.target.data)

loadPictures()

}

function loadPictures():void{

var s:int = 0

//遍历XML文件，item是存放图片路径的标签，图片路径以“jpg”作为item的属性存放，如果XML文件有变动，则需要在这更改相应的标签和属性。

for each(var pic:XML in _xmlFile.item){

var eachPicContainer:Sprite = new Sprite()

var picLoader:Loader = new Loader()

eachPicContainer.addChild(picLoader)

eachPicContainer.x = eachPicContainer.y = 0

eachPicContainer.alpha = 0

_picturesArr.push(eachPicContainer)

_picContainer.addChild(eachPicContainer)

picLoader.load(new URLRequest(pic.@jpg))

s++

if(s>=_picNumber){

picLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,picLoaded)

}

}

}

function picLoaded(evt:Event):void{

_curPic = 0

_picturesArr[_curPic].alpha = 1

_transTimer.addEventListener(TimerEvent.TIMER,startTrans)

_transTimer.start()

}

function startTrans(evt:TimerEvent):void{

_tweenOut = new Tween(_picturesArr[_curPic],"alpha",None.easeNone,1,0,_alphaTime,true)

if(_curPic>=_picturesArr.length-1){

_curPic=0

}else{

_curPic++

}

_tweenIn = new Tween(_picturesArr[_curPic],"alpha",None.easeNone,0,1,_alphaTime,true)

}

init()

/*—————————————————————————————————————————

说明：

一、直接复制到时间轴第一帧即可，如果需要文档类请补充。

二、没有考虑到图片大小，所有的图片以左上角为原点显示在舞台的（0,0）位置，小于舞台的图片会在右下角留出空白，大于舞台的图片会超出舞台显示。建议裁剪好每张图片的大小，和舞台大小一致。如果图片大小不一需要缩放，请补充。

三、XML文件的内容，这个很好看懂了，图片放在images文件夹下，直接以数字序号做文件名。

<?xml version="1.0" encoding="utf-8"?>

<data>

<item jpg="images/1.jpg" />

<item jpg="images/2.jpg" />

<item jpg="images/3.jpg" />

<item jpg="images/4.jpg" />

<item jpg="images/5.jpg" />

<item jpg="images/6.jpg" />

<item jpg="images/7.jpg" />

<item jpg="images/8.jpg" />

<item jpg="images/9.jpg" />

<item jpg="images/10.jpg" />

<item jpg="images/11.jpg" />

<item jpg="images/12.jpg" />

<item jpg="images/13.jpg" />

<item jpg="images/14.jpg" />

<item jpg="images/15.jpg" />

<item jpg="images/16.jpg" />

<item jpg="images/17.jpg" />

<item jpg="images/18.jpg" />

</data>

*/

---