运用代码轻松实现图片的多种切换效果.docx
- 文档编号:17756687
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:11
- 大小:82.22KB
运用代码轻松实现图片的多种切换效果.docx
《运用代码轻松实现图片的多种切换效果.docx》由会员分享,可在线阅读,更多相关《运用代码轻松实现图片的多种切换效果.docx(11页珍藏版)》请在冰点文库上搜索。
运用代码轻松实现图片的多种切换效果
运用代码,轻松实现图片的多种切换效果
俗话说:
“百闻不如一见”,图片在教学中的作用是不言而喻的,特别是在历史教学中,我们常常用相关图片导入新课、点明主题、说明道理。
图片突兀地切换,会使课件显得没有生机,特别是作为课件封面并负有引入新课重任的图片,更要有较“眩”的切换效果。
如何运用代码,在Flash中轻松实现图片的多种切换效果(切换效果可以扩展,通用性强!
)。
本文举例说明如下:
新建Flash文件。
启动Flash8.0,点选修改菜单,选中文档…选项(或按Ctrl+J),弹出文档属性对话框;将影片大小设置为宽为1024px(像素),高为768px。
背景色为白色;其它参数尊重Flash的默认设置,不用改变。
1制作元件
1.1制作一个空的影片剪辑,用于载入图片
按Ctrl+F8,新建一个影片剪辑元件,命名为“载入”,单击确定,不做任何操作,返回主场景。
1.2制作一个空的影片剪辑,用于放置代码
按Ctrl+F8,新建一个影片剪辑,命名为“自动播放”,单击确定,不做任何操作,返回主场景。
1.3各种切换效果影片剪辑的制作
1.3.1圆形扩展
①在场景中,按Ctrl+F8,新建一个影片剪辑元件,命名为“圆形”,单击确定,进入元件编辑窗口;选中圆形绘图工具,按下Shift键的同时,在舞台上绘制一任意大小的没有边框的正圆,在属性面板中将其宽高均设为5px(像素);单击工具箱中的选择工具
,在舞台中的圆上单击,使其处于选中状态,按Ctrl+K打开对齐面板,点选“水平中齐
”和“垂直中齐
”标签,使该圆位于舞台的中心。
②选中时间轴上的第12帧,按F6插入关键帧;然后单击舞台中的圆,使其处于选中状态;在属性面板中将其宽高均设为1500px(像素)。
③在时间轴第1帧和第12帧之间的任意一帧单击,然后在帧属性面板补间选项区,选择“形状”选项,创建形状动画。
1.3.2矩形扩展
①在场景中,按Ctrl+F8,新建一个影片剪辑元件,命名为“矩形”,单击确定,进入元件编辑窗口;选中矩形绘图工具,在舞台上绘制一任意大小的没有边框的矩形,单击工具箱中的选择工具
,在矩形上单击选中该矩形,然后在属性面板中将其宽设为640px(像素),高设为480px(像素),然后按F8,将其转换为图形元件,命名为“遮片”;按Ctrl+K打开对齐面板,点选“水平中齐
”和“垂直中齐
”标签,使该矩形位于舞台的中心。
②选中时间轴上的第12帧,按F6插入关键帧,然后右键单击,在弹出的快捷菜单中选择“动作”,打开帧动作面板,在代码窗口输入:
“stop();”;选中时间轴上的第1帧,单击舞台中的矩形,使其处于选中状态;按Ctrl+T打开变形面板,将该矩形大小设为原大小的10%。
③在时间轴第1帧和第12帧之间的任意一帧右键单击,然后在弹出的快捷菜单中选择“创建补间动画”,创建运动动画。
1.3.3左入
①在场景中,按Ctrl+F8,新建一个影片剪辑元件,命名为“左入”,单击确定,进入元件编辑窗口;按Ctrl+L打开元件库面板,将“遮片”元件拖入舞台,然后按Ctrl+K打开对齐面板,点选“水平中齐
”和“垂直中齐
”标签,使该元件位于舞台的中心。
②选中时间轴上的第12帧,按F6插入关键帧,然后右键单击,在弹出的快捷菜单中选择“动作”,打开帧动作面板,在代码窗口输入:
“stop();”;然后选中时间轴上的第1帧,单击舞台中的矩形,使其处于选中状态,在属性面板中将该矩形的X轴坐标设为:
-960px(像素)。
③在时间轴第1帧和第12帧之间的任意一帧右键单击,然后在弹出的快捷菜单中选择“创建补间动画”,选择“动画”选项,创建运动动画。
1.3.4右入
①按Ctrl+L打开元件库面板,选中“左入”元件,右键单击在弹出的快捷菜单中选择“直接复制”,名称为“右入”,然后双击该元件图标,进入元件编辑窗口;
②选中时间轴上的第1帧,单击舞台中的矩形,使其处于选中状态,将该矩形的X轴坐标设为:
320px(像素)。
这样一个从右边逐渐展示图片的切换效果就做成了。
采用类似“右入”元件的制作方法,制作其他切换效果,依次命名为:
上入、下入、左下、左上、右上、右下。
读者可以发挥自己的创意,制作各种“酷炫”的切换效果,本文重点讲述,如何运用代码实现对各种切换效果的调用。
1.4制作影片剪辑,放置各种切换效果
①在场景中,按Ctrl+F8,新建一个影片剪辑元件,命名为“遮罩”,单击确定,进入元件编辑窗口;在时间轴上第1帧连续按下F7,在第1帧至第10帧插入空白关键帧(本例中制作了10个效果,读者自行可以增加)。
②按Ctrl+L打开元件库面板,将上述各种切换效果拖入每个空白关键帧下的舞台中,每一帧放置一种切换效果;使各影片剪辑在舞台中的坐标与该影片剪辑中第1帧中的“遮片”元件的坐标相同。
③选中时间轴上的第1帧,右键单击,在弹出的快捷菜单中选择“动作”,打开帧动作面板,在代码窗口输入:
“stop();”。
1.5制作一个影片剪辑,用于放置控制播放的按钮
①在场景中,按Ctrl+F8,新建一个影片剪辑元件,命名为“按钮播放”,单击确定,进入元件编辑窗口;单击插入图层按钮,建立2个图层自上而下分别命名为:
文字、按钮。
②锁定文字层,单击按钮层第1帧,右键单击,在弹出的快捷菜单中选择“动作”,打开帧动作面板,在代码窗口输入:
“stop();”。
然后打开窗口菜单下公用库中的按钮库面板,选择一种按钮将其拖入舞台中,重复拖动一次,放置2个同样形式的按钮,放置在合适的位置。
③锁定按钮层,单击文字层第1帧,然后选择工具箱中的文本工具
,在按钮上放置2个静态文本,并分别输入:
“上一张、下一张”。
1.6制作一个影片剪辑,用于放置跳转播放方式的按钮
①在场景中,按Ctrl+F8,新建一个影片剪辑元件,命名为“播放方式”,单击确定,进入元件编辑窗口;单击插入图层按钮,建立2个图层自上而下分别命名为:
文字、按钮。
②锁定文字层,单击按钮层第1帧,然后打开窗口菜单下公用库中的按钮库面板,选择一种按钮将其拖入舞台中,放置在合适的位置,然后按F6插入关键帧。
③锁定按钮层,单击文字层第1帧,然后选择工具箱中的文本工具
,在按钮上方放置静态文本,并输入:
“播放方式”,然后选中第2帧,按F5插入普通帧。
2布置场景
①在主场景中创建7个图层,自上而下依次命名为:
播放方式、自动播放、按钮播放、图片边框、遮罩、载入、背景。
②选中图片边框层,用矩形绘图工具在场景中绘制一任意大小的无填充的矩形;选中该矩形,在属性面板中将其宽设为640px(像素),高设为480px(像素),利用对齐面板将其放置在场景中心。
③选中背景层,用文本工具在场景中的适当位置放置静态文本,并输入:
课件标题、作者信息、制作时间等。
3放置元件,添加代码
按Ctrl+L打开元件库面板:
3.1选中载入层,将库中的“载入”影片剪辑拖入场景,并在属性面板中设置:
实例名称为“zairu”;坐标为(x:
192.0px,y轴:
144.0px),即将其放置在图片边框的左上角,目的是为了使载入的图片和遮罩层重合,使图片完全展示在图片边框中。
3.2选中遮罩层,将库中的“遮罩”影片剪辑拖入场景,并在属性面板中设置:
实例名称为“zhezhao”;坐标为(x:
509.5px,y轴:
318.5px),即将其放置在场景的中心。
3.3选中按钮播放层,打开帧动作面,在代码编辑窗口输入如下代码:
_root.anniubf._visible=0;
//使进入影片时,anniubf影片剪辑不显示;
3.3.1将库中的“按钮播放”影片剪辑拖入场景,并在属性面板中设置:
实例名称为“anniubf”;坐标为(x:
344.4px,y轴:
739.6px),即将其放置在场景的最下边中心处,接下来双击场景中的anniubf影片剪辑,打开其编辑窗口。
3.3.2选中按钮层第1帧,加入如下帧代码:
k="1";
jl="0";
sj="0";
//给变量k、jl、sj赋初始值;
3.3.3选中“上一张”按钮,添加如下代码:
on(release){
k--;
//变量k自减;
if(k<1){
k=1;
}
//判断是否展示到第一张,若是则只展示第一张;
loadMovie(k+".jpg",_root.zairu);
//将图片"k.jpg"载入到影片剪辑“zairu”中;
if(jl==sj){
if(sj>=0&sj<10){
sj++;
}elseif(sj==10){
sj--;
}
}
/*上述代码用于判断变量sj的值是否和上次相同,若相同则改变其数值并确保其数值在1至10之间,以免下一张图片的展示无切换效果*/
with(_root.zhezhao){
gotoAndStop(sj);
jl=sj;
//变量jl用于记录本次调用的是哪一个切换效果;
}
sj=1+random(10);
/*random(10)是一个随机函数,它能返回0到9中的任意一个整数,影片剪辑zhezhao中的切换效果共有10个,故其参数为10,由于帧号最小是1,所以加1*/
}
//随机调用影片剪辑zhezhao中的切换效果;
3.3.4选中“下一张”按钮,添加如下代码:
on(release){
k++;
//变量k自加;
if(k>10){
k=10;
}
//判断是否展示到最后一张,若是则只展示最后一张;
loadMovie(k+".jpg",_root.zairu);
//将图片"k.jpg"载入到影片剪辑“zairu”中;
if(jl==sj){
if(sj>=0&sj<10){
sj++;
}elseif(sj==10){
sj--;
}
}
/*上述代码用于判断变量sj的值是否和上次相同,若相同则改变其数值并确保其数值在1至10之间,以免下一张图片的展示无切换效果*/
with(_root.zhezhao){
gotoAndStop(sj);
jl=sj;
//变量jl用于记录本次调用的是哪一个切换效果;
}
sj=1+random(10);
}
//随机调用影片剪辑zhezhao中的切换效果;
3.4选中自动播放层,将库中的“自动播放”影片剪辑拖入场景,并在属性面板中设置其实例名称为“zidongbf”;坐标任意。
双击该影片剪辑进入元件编辑窗口。
3.4.1选中第1帧,添加如下代码:
n="1";
//图片序号;
sj="0";
//切换效果随机值;
jl="0";
//记录切换效果,用来避免切换前后切换效果一样;
//给变量n、sj、jl赋一个初始值;
3.4.2选中第2帧,F7插入空白关键帧,添加如下代码:
loadMovie(n+".jpg",_root.zairu);
//将图片"n.jpg"载入到影片剪辑“zairu”中;
with(_root.zhezhao){
gotoAndStop(sj);
jl=sj;
//变量jl用于记录本次调用的是哪一个切换效果;
}
//随机调用影片剪辑zhezhao中的切换效果;
3.4.3选中第72帧,按F7插入空白关键帧(切换效果动画为12帧,在72帧处添加代码,能使图片展示60帧,若想延长图片展示时间,可增加第2和最后一帧之间的帧数),添加如下代码:
if(n==10){
n=1;
}else{
n++;
}
//判断图片是否展示到最后一张,若是则转到第一张,否则变量n自加;
sj=1+random(10);
/*random(10)是一个随机函数,它能返回0到9中的任意一个整数,影片剪辑zhezhao中的切换效果共有10个,故其参数为10,由于帧号最小是1,所以加1*/
if(jl==sj){
if(sj>=0&sj<10){
sj++;
}elseif(sj==10){
sj--;
}
}
/*上述代码用于判断变量sj的值是否和上次相同,若相同则改变其数值并确保其数值在1至10之间,以免下一张图片的展示无切换效果*/
gotoAndPlay
(2);
//返回第二帧,再次执行代码,展示下一张图片;
3.5选中播放方式层,将库中的“播放方式”影片剪辑拖入场景,并在属性面板中设置其坐标为(x轴:
0.0px,y轴:
728.3px),即把其放置在场景的左下角。
双击该影片剪辑进入元件编辑窗口。
3.5.1选中按钮层第1帧中的按钮,添加如下代码:
on(release){
with(_root.zidongbf){
stop();
}
//使影片剪辑zidongbf停止播放;
setProperty(_root.anniubf,_visible,1);
//使影片剪辑anniubf显示;
gotoAndStop
(2);
//跳转到第2帧并停止;
}
//切换到按钮播放状态;
3.5.2选中按钮层第2帧中的按钮,添加如下代码:
on(release){
with(_root.zidongbf){
play();
}
//使影片剪辑zidongbf开始播放;
setProperty(_root.anniubf,_visible,0);
//使影片剪辑anniubf隐藏;
gotoAndStop
(1);
//跳转到第1帧并停止;
}
//切换到自动播放状态;
说明:
课件所用图片格式为“.jpg”,大小为:
640×480(若所用图片不是这个尺寸,可以导入Flash中修改为640×480),按先后出场顺序依次重命名为:
1、2、3、4、5、6、…,并和课件放在同一文件夹中。
最终效果图如下:
欲求源文件请发邮件至sunbaojian1973@。
作者:
孙保健
地址:
山东省定陶县陈集镇中学
邮编:
274108
邮箱:
sunbaojian1973@
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 运用 代码 轻松 实现 图片 多种 切换 效果