FlashActionScript编程制作物理课件实例教程.docx
- 文档编号:11297408
- 上传时间:2023-02-26
- 格式:DOCX
- 页数:33
- 大小:320.32KB
FlashActionScript编程制作物理课件实例教程.docx
《FlashActionScript编程制作物理课件实例教程.docx》由会员分享,可在线阅读,更多相关《FlashActionScript编程制作物理课件实例教程.docx(33页珍藏版)》请在冰豆网上搜索。
FlashActionScript编程制作物理课件实例教程
FlashActionScript编程
制作物理课件实例教程
(内部资料)
山东大学宋洪晓
2007年4月
写给自己的话……………………………………………………………………………………3
第一课细节决定品质——Flash动画制作中的绘图技巧拾遗………………………………4
第二课ActionScript基础………………………………………………………………………10
第三课第一个ActionScript编程动画…………………………………………………………18
第四课数值计算与编程动画实例………………………………………………………………24
第五课变量的调整与动态复制…………………………………………………………………32
第六课流程控制——分支语句…………………………………………………………………38
第七课流程控制——循环………………………………………………………………………44
第八课ActionScript语法概述…………………………………………………………………50
第九课常用函数及对象实例……………………………………………………………………62
第十课从构思到制作——完整课件制作实例…………………………………………………71
附录1:
参考书目…………………………………………………………………………………74
附录2:
常见字体变化形式………………………………………………………………………75
附录3:
关于字体符号的规定……………………………………………………………………76
附录4:
有关物理量和符号的国家标准…………………………………………………………79
【写给自己的话】
(利用FlashActionScript制作物理课件第一版前言)
很久以来就想把在张老师的网络课程《物理学》项目中积累起来的经验和做的一些有益的探索整理成文字,以纪念那一段逝去的时光和告慰那一番付出的心血。
但是却因为各种各样的原因,始终未曾动笔。
这个寒假,在女友的催促和鼓励下,终于坐在电脑前面开始了挤牙膏的过程。
回想起自己学习Flash和跟随何希庆老师、张承琚老师一步步摸索如何利用Flash制作物理课件以及与王宁、汤茂建等同学一起学习、探讨Flash技术的过程,真的是感慨万千。
99年初的那个寒假第一次看关于Flash的入门书;99年暑假开始在物理学院网站里使用Flash制作网站徽标;2000年9月去北京参加《新世纪网络课程》的立项申请;2001年暑假在四楼多媒体教室加班制作;2002年底网络课程项目基本完成……
直到现在,还能记得第一次见到国外使用AttachMovie复制元件的动画,兴奋地探索源文件的情景;还能记得为了三维坐标转换,四处搜索数学公式,抓住张旭逼他计算结果的情景;还能记得用asv拆解了台湾王建忍先生的“颜色的叠加”课件,在火车上抱着打印的代码凝思苦想的情景;还能记得绘制曲线时为了解决旋转线段的长度和粗细,在实验室通宵苦苦调试的情景;还能记得暑假里项目组的同学们加班制作课件时,一手拿着盒饭,一手拿着鼠标的情景……
现在,网络课程《物理学》、《物理学(第二版)电子教案》已经被高教出版社出版,原来项目组的同学、朋友们也陆续毕业,各奔东西。
突然想起罗大佑的歌了:
春天的花开秋天的风以及冬天的落阳,忧郁的青春年少的我曾经无知的这么想,风车在四季轮回的歌里它天天地流转,风花雪月的诗句里我在年年的成长……
谨以本文献给我的老师、同学、朋友们。
宋洪晓
2005.1
第一课细节决定品质
——Flash动画制作中的绘图技巧拾遗
我们在制作Flash动画,尤其是Flash课件中,需要注意到画面的细节。
我们下面通过几个例子,来回顾一下这些我们当初可能一略而过的内容。
注意这些细节性的东西,对于提高我们课件制作的水准,还是有非常巨大的意义的。
【例1-1:
游标卡尺的刻度绘制】
1、新建Flash文档,大小设为550*400,背景设为白色,帧速12fps。
2、点“插入”菜单,“新建元件”。
名称处填“ruler”,类型选“影片剪辑”。
3、在影片剪辑ruler内,找到代表中心的“十”字。
4、使用铅笔工具
在十字附近绘制一条竖线。
使用选择工具
选取这条竖线。
点“窗口”菜单,选择“信息”面板。
将元件位置
处修改为如下面的右图。
5、点“窗口”菜单,“属性”小菜单,选择“属性”面板。
如果属性面板是这样没有展开,点击右下角展开按钮
,将属性面板展开。
6、依次将所选线段的属性设为,宽:
0.0;高:
40.0;X:
0.0;Y:
20.0。
7、继续使用线条工具添加第二根、第三根刻度线……使用属性面板准确定位,使他们间距为10象素,顶端对齐,高度分别为20、20、20、20、30、20、20、20、20、40……
8、可以用这样的方法绘图效率比较低,我们需要借助一些绘图技巧。
点“视图”菜单,“网格”小菜单,“编辑网格”。
选中“显示网格”和“贴紧至网格”,水平和竖直间距都填“10px”。
保存默认值,确定。
此后我们显示网格作为默认的编辑环境。
9、显示网格后,我们绘制线段时只需要贴近网格按下鼠标,Flash就会自动显示一个靠近提示的圆圈,绘制长度和位置整十的线段就变得非常简单了。
10、除了一根一根绘制之外,绘制好几根之后,批量复制、粘贴出来的线段使用选择工具整体移动也很方便。
11、绘制相当于6cm的主尺即可,然后延0高度绘制一条水平线。
用文本工具添加上刻度。
12、新建影片剪辑元件:
vernier。
在ruler中复制一组线段,粘贴到vernier中。
点窗口菜单,变形。
打开变形面板,宽度改为90%,高度50%,旋转,180度,敲回车。
13、使用选择工具把变形后的线段左下角移动到影片剪辑0点。
14、回到主场景,把图层1层标签改为main。
点‘窗口“菜单,库。
打开库面板,将ruler和vernier两个元件分别拖入主场景,使两个实例的注册点在同一直线上。
15、保存,发布。
同学们课后可自行将游标卡尺的外形线条绘制完成。
【例1-1说明】
本例中使用不同的方法绘制(调整)线段的位置,方法繁简程度差别巨大。
使用合适的方法进行绘制,可以提高绘图的效率和精度。
进行下一个例子之前,我们来重温一下Flash中的割断属性。
当使用铅笔、钢笔、线条、椭圆、矩形或刷子工具来绘制一条与另一条直线或已涂色形状交叉的直线时,重叠直线会在交叉点处分成线段。
可以使用"选取"工具来分别选择、移动每条线段并改变其形状。
上图分别是一个填充;一条直线穿过的填充;分割形成的两个填充和三条线段。
【例1-2:
电表表盘的绘制】
1、新建Flash文档,大小设为550*400,背景设为白色,帧速12fps。
(以后不特别声明,本讲义中所有的实例均使用此设置。
)
2、新建影片剪辑元件:
dial。
在dial中绘制一根长150象素,底部在中心十字的竖直线。
3、选择任意变形工具
,点击选择线段,将中心点的标志
从中间拖到线段最下角(影片剪辑的中心十字处),如右图。
4、点“窗口”菜单,变形。
打开变形面板,选旋转,10度。
点击右下角的复制并应用变形按钮(图中光标处)。
5、不停点击复制并应用变形按钮,就可依次复制出旋转10度、20度、30度……的线段。
6、进行类似3到5步的操作,复制出向左放旋转的线段。
7、选椭圆工具
,线条颜色选黑色,填充颜色选无(如下左图),绘制一个空心圆。
注意圆不要与刚刚绘制的线条相交,如下中图。
8、选选择工具
,确保选中了刚才绘制的圆,并检查一下信息面板的元件位置选择中心(如上右图)。
打开属性面板,分别填入宽:
280;高:
280;X:
0;Y:
0。
9、进行类似7到8步的操作,绘制宽高分别为250和265的两个圆。
10、使用选择工具
,分别选取被不需要的部分,一一删除。
只保留电表刻度需要的部分。
这个操作中如果画面太小不易操作,可使用缩放工具
放大画面。
10、使用文本工具
,给表盘添加刻度和电表标志。
下图为放大200%以便鼠标操作。
11、保存。
这个例子中制作的表盘我们将在后面的例子中用到。
【例1-2说明】
这个例子制作比较繁琐,为了减少工作量,我们制作的刻度比较稀疏,利用类似的方法完全可以制作出刻度稠密的表盘或者欧姆表这样刻度不均匀的表盘来。
使用变形面板“复制并应用变形”的方法和图像的割断属性相结合的方法,是用来制作旋钮、表盘等旋转部件的绝佳方法,希望同学们认真体会、掌握。
【关于字体和字符】
Flash中的字体和字符单独拿出来说明一下,这是因为制作物理课件时,公式、符号是不可缺少的,有的老师、同学制作课件时对公式、字符的标准化注意不够。
对于科学符号,国家标准GB3102-1993专门作出了详细的规定。
如果你的课件想参加评比或者到出版社出版,那么就必须严格遵守国家标准。
我们在制作《物理学网络课程》和《大学物理教学资源库》过程中,对此印象特别深刻。
也领略了出版社审阅编辑的严格、细致和眼光锐利。
简单来说,出版物的汉字正文使用宋体,汉字标题可使用黑体或宋体加粗,注释或附录性文字使用楷体或仿宋,其他字体在正文中较少出现。
英文正文和阿拉伯数字使用TimesNewRoman字体。
公式中的希腊字符,使用Symbol字体。
为了表示不同的信息,比如人名、专用名次、矢量等,字符可以使用白体、斜体、粗体、粗斜体等不同的变化。
为了增加对字体字型的感性认识,附录2是字体各种形式的变化。
附录3是字体变化的规则,和查阅相应的国家标准,附录4是关于量和符号的国家标准清单。
科技出版社和高教出版社最近几年出版的教材里的字体符号都是经严格审查的,权威性较高,在制作Flash动画时如果不能确定字符变化形式,可作为标准参考。
另外,word自带的公式编辑器输入公式和特殊字符也是很规范的,可在公式编辑器编辑公式的状态下全选、复制、粘贴到Flash中,这样能够保持矢量字体的可编辑特性。
打开公式编辑器的方法是在word中点插入菜单,对象,在新建对象类型的列表中找到“Microsoft公式3.0”,点确定。
第二课ActionScript基础
追溯FlashActionScript的历史要从Flash2开始,经过Flash3、Flash4的不断发展,Flash5开始支持面向对象编程;FlashMX(Flash的第6个版本)就已经发展为比较成熟的面向对象编程语言;FlashMX2004(Flash的第7个版本)引入了ActionScript2.0的概念,使习惯于在C++或者java下编程的程序员可以在自己熟悉的编程习惯下工作;Flash8进一步加强了安全方面的限制;在Flash将要发布的下一个版本Flash9中,将引入ActionScript3.0。
FlashActionScript版本频繁的升级,在带给我们越来越强大的功能的同时,保持了不错的向下兼容特性,但是或多或少使我们的学习ActionScript编程的难度增大了。
Flash中的最基本的ActionScript是按钮事件和对影片时间轴进行控制的语句,最初的一些语句从Flash2版本起就存在了,因此在Flash中有很深远的影响,很多Flash的入门书至今也只有这一部分的内容,这当然是远远不够的。
Flash中使用动作面板来输入ActionScript程序,如果动作面板没有打开,我们可以选择“窗口”菜单,“动作”;或者在需要添加ActionScript的帧或实例上点右键菜单,选“动作”;动作面板的快捷键是F9。
打开的动作面板如图。
我们直接在“脚本”窗格输入ActionScript代码即可。
动作面板为我们提供了代码提示、检查语法和标点、自动套用格式、语法加亮显示、脚本助手等很多强大的功能。
【例2-1:
为时间轴添加简单的ActionScript】
1、新建Flash文档,在时间轴上随意制作一个Flash动画。
2、新建一个层,层标签改为“action”。
3、在action层,时间轴动画运行的某一帧处新建关键帧(右键菜单——插入关键帧,或者按快捷键F6)。
4、打开动作面板,在“教本”窗格输入ActionScript代码:
stop();
5、保存,发布。
【例2-1说明】
我们可以看到,发布的动画时间轴运行到我们添加stop();语句的地方就停在那里了,这就是这一句ActionScript代码的作用。
如果我们吧stop();改成gotoAndPlay
(1);,Flash就在第一帧和这一帧之间循环播放,余下的帧就运行不到了。
这样添加在时间轴上的ActionScript代码可以实现对flash播放时间轴的控制,但是距离真正的交互性还是有一定差距的,因为我们并不能参与到控制中来。
要实现这样的交互性,需要使用按钮。
增加按钮可以使用“插入”菜单——“新建元件”,在类型中选择按钮。
按钮里的时间轴和我们在主场景或者影片剪辑中习惯的时间轴不太一样,只有四帧,分别是“弹起”、“指针经过”、“按下”、“点击”。
望名知意,这几帧分别是按钮在不同的状态时显示的形态。
按钮的ActionScript有两种写法,一种是直接写在按钮上,这是flash中比较传统的做法,从Flash2就开始支持这种写法了,不过这种写法如果需要给多个按钮添加动作,就需要分别给每个按钮添加动作,ActionScript程序的管理不是很方便。
另外一种是给按钮的实例起名之后,在时间轴上通过按钮的实例名定义匿名函数实现功能定义,这是FlashMX才开始正式支持的写法,我们在本讲义中一般使用这种写法。
Flash中的按钮事件有:
事件
说明
onDragOut=function(){}
当在按钮上单击鼠标按钮,然后将鼠标指针拖动到按钮之外时调用。
onDragOver=function(){}
当用户在按钮外部按下鼠标按钮,然后将鼠标指针拖动到按钮之上时调用。
onKeyDown=function(){}
当按钮具有键盘焦点而且按下某按键时调用。
onKeyUp=function(){}
当按钮具有输入焦点而且释放某按键时调用。
onKillFocus=function(newFocus:
Object){}
当按钮失去键盘焦点时调用。
onPress=function(){}
当按下按钮时调用。
onRelease=function(){}
当释放按钮时调用。
onReleaseOutside=function(){}
在这样的情况下调用:
在鼠标指针位于按钮内部的情况下按下按钮,然后将鼠标指针移到该按钮外部并释放鼠标按钮。
onRollOut=function(){}
当鼠标指针移至按钮区域之外时调用。
onRollOver=function(){}
当鼠标指针移过按钮区域时调用。
onSetFocus=function(oldFocus:
Object){}
当按钮接收键盘焦点时调用。
【例2-2:
给按钮添加ActionScript】
1、在例2-1的基础上继续修改。
2、“插入”菜单——“新建元件”,名称填“play”,类型选择按钮。
3、在按钮的“弹起”帧的中心处写入黑色的“播放”两个字。
在“指针经过”帧插入关键帧,将“播放”两个字的颜色修改为红色。
在“按下”帧插入关键帧,将“播放”两个字的颜色修改为绿色。
在“点击”帧插入关键帧,绘制一个和“播放”两个字差不多大小的矩形。
4、回到主场景,新建“btn”层。
打开“库”面板,将按钮“play”拖入主场景。
5、打开属性面板,在实例名称处填入“play_btn”
6、在Action层的第一帧添加ActionScript代码:
play_btn.onRelease=function(){
play();
};
7、保存,发布。
【例2-2说明】
本例是一个最简单的按钮应用,在时间轴停止后,点击按钮,时间轴继续向前播放。
【例2-3:
按钮热区小游戏】
1、新建按钮元件:
yes,在前三帧写入“满意”,“点击”帧绘制一个和满意差不多大小的矩形。
2、新建按钮元件:
no,在前三帧写入“不满意”,“点击”帧绘制一个比较大的的矩形,各个边都要要超过不满意三个字。
3、回到主场景,将第一层层标签改为main。
使用文本工具写入“山东大学食堂满意度调查”、“你对山大大学的食堂满意吗?
”等字样。
4、在第三帧处建立空白关键帧,使用文本工具写入“谢谢你参与我们的调查,到目前为止,同学们对食堂的满意率为100%。
从明天开始,所有食品每份价格提高20%,每份数量减少20%。
”。
4、新建btn层,将yes、no元件分别拖入,实例名分别设为:
yes_btn、no_btn。
在btn第二帧建立空白关键帧,将yes、no元件分别拖入,实例名分别设为:
yes_btn、no_btn。
第二帧和第一帧的两个按钮交换所在位置,使用信息或属性面板,保证前后两帧按钮位置没有移动。
在btn层第三帧处插入空白关键帧。
5、新建action层,在第一帧写入ActionScript:
stop();
yes_btn.onRelease=function(){
gotoAndStop(3);
};
no_btn.onRollOver=function(){
gotoAndStop
(2);
};
6、在action层第二帧写入ActionScript:
yes_btn.onRelease=function(){
gotoAndStop(3);
};
no_btn.onRollOver=function(){
gotoAndStop
(1);
};
7、保存,发布。
【例2-3说明】
本例中巧妙利用了了Flash按钮的鼠标经过事件,制作了一个“永远点击不到”的按钮:
不满意。
达到了非常幽默的效果。
【例2-4:
改变影片剪辑的位置】
1、新建Flash文档,我们统一设置文档大小为550*400。
在文档中“修改”菜单——“新建元件”,建立一个名为“ball”的影片剪辑。
2、在影片剪辑“ball”的中心“十字”处绘制一个直径20象素的小球。
3、回到主场景,把层标签改为main。
打开库面板,将小球从库中拖入主场景。
将小球的实例命名为:
“ball_mc”。
4、新建一个按钮元件,在按钮的中心处写“改变位置”几个字。
将按钮拖入主场景,实例名称填入:
“change_btn”。
5、添加新的一层,层名称设为“action”。
6、在action层第一帧添加ActionScript代码:
change_btn.onRelease=function(){
ball_mc._x=100;
ball_mc._y=100;
};
7、保存,发布。
【例2-4说明】
本例中我们通过影片剪辑的实例名称直接访问了实例的位置属性(_x、_y),修改了小球的位置。
我们常见的影片剪辑属性还有:
_alpha
设置或获取由MovieClip指定的影片剪辑的Alpha透明度(value)。
有效值为0(完全透明)到100(完全不透明)。
如果影片剪辑的_alpha设置为0,虽然其中的对象不可见,但也是活动的。
例如,依然可以点击一个_alpha属性设置为0的影片剪辑中的按钮。
_currentframe
(只读);返回由MovieClip指定的时间轴中播放头所处的帧的编号。
_height
以像素为单位设置和获取影片剪辑的高度。
_name
返回由MovieClip指定的影片剪辑的实例名称。
_rotation
以度为单位指定影片剪辑的旋转。
_totalframes
(只读);返回MovieClip参数中指定的影片剪辑实例中的总帧数。
_url
(只读);获取从中下载影片剪辑的SWF文件的URL。
_visible
一个布尔值,指示由MovieClip参数指定的影片是否可见。
不可见的影片剪辑(_visible属性设置为false)处于禁用状态。
例如,不能点击_visible属性设置为false的影片剪辑中的按钮。
_width
以像素为单位设置和获取影片剪辑的宽度。
_xmouse
(只读);返回鼠标位置的x坐标。
_xscale
设置从影片剪辑注册点开始应用的该影片剪辑的水平缩放比例(百分比)。
默认注册点为(0,0)。
缩放本地坐标系将影响_x和_y属性的设置,这两个设置是以像素为单位定义的。
例如,如果父影片剪辑缩小到50%,则设置_x属性时将移动该影片剪辑中的对象,移动距离为在影片设置为100%时其像素数的一半。
_ymouse
(只读);指示鼠标位置的y坐标。
_yscale
设置从影片剪辑注册点开始应用的影片剪辑垂直缩放比例。
默认注册点为(0,0)。
【例2-5:
电表指针的转动】
1、我们在例1-2的基础上继续修改。
2、新建影片剪辑元件hand,在元件hand中心处绘制一个直径10象素的圆,分别其上方和下方绘制长140和10的竖直线。
如右图。
3、回到主场景,将图层1层标签改为main。
将元件dial和元件hand分别拖入主场景,实例名分别设为dial_mc和hand_mc。
使用任意变形工具将分别将表示中心的圆圈移动到影片的注册点(十字处)。
借助属性面板,使两个元件注册点位置重合。
4、新建按钮元件rotate。
在按钮中心处用文本工具写:
“旋转表针”。
5、新建btn层,将按钮拖入主场景,命名为rotate_btn。
6、新建action层,在action层第一帧添加ActionScript代码:
rotate_btn.onRelease=function(){
hand_mc._rotation=15;
};
7、保存,发布。
【例2-5说明】
本例中我们通过点击按钮修改指针的旋转角度。
需要注意_rotation旋转属性是以影片的注册点(中心十字处)为中心旋转的,我们使用任意变形工具移动中心点只是为了方便属性面板精确移动指针和表盘的位置。
第三课第一个ActionScript编程动画
我们前一课介绍了FlashActionScript的基础知识,我们这节课使用ActionScript制作第一个编程动画。
编程动画,顾名思义,就是动画的运动是使用程序控制的。
在制作编程动画之前,我们需要先补充一点ActionScript编程的基本知识。
变量是Flash中保存信息的容器,有了变量,ActionScript程序才有了记忆。
Flash中的变量都需要事先声明,比如:
varmyVariable:
Number;这句语句表示声明一个变量:
myVariable,该变量保存一个数字值。
在以上代码中,var是定义变量的格式,使用:
Number指定该变量保存的值的类型,这称为数据类型指定。
容器(用变量名表示)在ActionScript中始终不变,但内容(值)可以更改。
变量的赋值使用赋值运算符,最常见的赋值运算符就是“=”。
比如:
v=5;表示将变量v赋值为5。
声明变量的时候可以同时赋值,比如:
varmyVariable:
Number=10;我们在上一课就已经使用过赋值运算符给元件的属性赋值了。
ActionScrip
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FlashActionScript 编程 制作 物理 课件 实例教程