当前计算机应用的Flash动画设计
1 绪论
1.1 flash概叙
Flash 由macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇异的效果。
flash涉及到的领域摘要:动画游戏制作,网络构件,学习课件,网站广告设计及全flash网站,工控界面等等。主要特征是制作简单,通用性比较大,涉及的领域多,制作出的东西效果都可以做到非常精致。缺点在于有些效果需要别的软件辅助制作等等,不是所有效果都能制作出来。(比如些3d效果,flash就很难制作,只能通过导入的方式或者针并针的方式)
FLASH有三重意义摘要:1) FLASH英文本意为“闪光”;2)它是全球流行的电脑动画设计软件;3)它代表用上述软件制作的流行于网络的动画作品。Flash是一种交互式矢量多媒体技术,他的前身是Futureplash,早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2,到现在最新的flashcs3。现在网上已经有成千上万个Flash站点,闻名的如Macromedia专门ShockRave站点,全部采用了Shockwave Flash 和Director。可以说Flash已经渐渐成为交互式知量的标准,未来网页的一大主流。
Flash 最早期的版本称为Future Splash Animator,当时Future Splash Animator最大的两个用户是微软(Microsoft)和迪斯尼(Disney)。1996年11月,Future Splash Animator卖给了MM(Macromedia.com),同时改名为Flash1.0 。 Macromedia 公司在1997年6月推出了 Flash 2.0 ,1998年5月推出了Flash3.0。但是这些早期版本的Flash所使用的都是Shockwave 播放器。自 Flash 进入4.0 版以后,原来所使用的 Shockwave 播放器便仅供 Director 使用。Flash 4.0开始有了自己专用的播放器,称为“Flash Player”,但是为了保持向下相容性,Flash仍然沿用了原有的扩展名摘要:.SWF(Shockwave Flash)。 2000年8月Macromedia 推出了Flash5.0 ,它所支持的播放器为 Flash Player 5。Flash 5.0中的Actionscript已有了长足的进步,并且开始了对XML和Smart Clip(智能影片剪辑)的支持。Actionscript的语法已经开始定位为发展成为一种完整的面向对象的语言,并且遵循ECMAscript的标准,就像javascript那样。 2002年3月 Macromedia 推出了Flash MX支持的播放器为 Flash Player 6。Flash 6开始了对外部jpg和MP3调入的支持,同时也增加了更多的内建对象,提供了对HTML文本更精确的控制,并引如SetInterval 超频帧的概念。同时也改进了swf文件的压缩技术。之后Macromedia有相继推出了Flash 8,Flash 9及现在的Flash CS3。相信Flash的软件以后还会在不断的更新,使其更加完美。
2 flash相关概念阐述
2.1 什么是flash动画
动画是将静止的画面变为动态的艺术.实现由静止到动态,主要是靠人眼的视觉残留效应.利用人的这种视觉生理特性可制作出具有高度想象力和表现力的动画影片。动画以人类视觉的原理为基础。 假如快速查看一系列相关的静态图像,那么我们会感觉到这是一个连续的运动。 每一个单独图像称之为帧。帧是动画电影中的单个图像。
3 flash在当今社会中的应用
3.1 flash在动态网页中的功能
Flash是MacroMedia公司专为网络应用设计的一个交互性矢量动画设计软件。网站设计者可以使用Flash为网站设计各种动态Logo动画、导航条以及全屏动画,还可以加入动感音乐,完全具备多媒体的各项功能。Flash以其体积短小,流体播放的特征迅速打开市场,将WWW上的站点页面设计带上了一个全新的高度。实现Web数据库的应用一般有两种方法摘要:一种是Web服务器端提供中间件,连接Web服务器和数据库服务器;另一种是把应用程序下载到客户端直接访问数据库。最常用的中间件技术有通用网关接口(CGI)和应用程序编程接口(API)两种。CGI程序存在效率低、速度慢等缺点;而API很大程度上克服了CGI的缺点,但其兼容性差,开发难度大也让许多开发人员望而却步。客户端访问数据库主要包括Javascript和数据库连接器(IDC)等。用Javascript和IDC开发Web数据库虽然简单,但也存在功能有限、不能完全控制其过程等缺点,所以它们也无法胜任较复杂的Web数据库的开发。微软推出的ASP方案很好地解决了这些难题。ASP(Active Server Page)是Microsoft公司推出的一种基于服务器端的脚本编程语言,它很轻易和数据库连接。Flash和ASP的组合使网页功能更加强大,可以通过它们和数据库连接,能使我们的网站不仅具有强大的数据支持而且具有完美的交互界面。
3.2 flash中实现和数据库连接
为了实现Flash和数据库的连接,需要把Flash和ASP联系起来。变量可以通过URL传递给Flash,这是一种GET方法,把变量传递给一个swf %26lt;PARAMNAME=movie UE="myMovie.swf?myVariable=Text+of+my+variable"%26gt;接着文本"Text of my variable"将会出现在Flash的动画中指定的位置,我们只要把Flash所需要的数据预备好就可以实现和数据库的连接,然后利用Flash中的动画功能就可以做出既具有强大的数据处理能力又具有强大的交互能力的美观网页。ASP和数据库的连接可用如下语句实现。 Set Connection = Server.CreateObject("ADODB.Connection")
Set Recordset = Server.CreateObject("ADODB.Recordset")
Connection.Open "people"
这样数据库就和ASP连接上,从而 Flash和数据库连接上去了。在Flash中使用ASP必须满足以下条件摘要:服务器端server必须支持Active Server Pages并且支持数据库;客户端必须安装Flash插件。3.3 如何在flash中使用数据库
第一步要做的是建立数据库。我们使用Access数据库为例,表名为Staff,有三个字段摘要:ID (自动编号), Known(Text) ,name (Text) 。这是一个用来示范用户名的数据库。
第二步就是建立一个Flash 5的动画。步骤如下摘要:
(1)建立三个text field.它们是用来显示数据用的。
(2)把第一个text field的name设置为Input,它是用来接收输入数据的。
(3)另外两个text field分别命名为KnownAs和Surname。
(4)其它设置先为默认。
(5)最后,从Flash的library中选择增加一个按钮 (应该是一个可重用的组件 ScrollBarButton ) 。这是很重要的一步,按钮将把输入的变量传递给ASP页面。到按钮的属性(Properties)上单击Action页,单击"+"号和On MouseEvent.勾上Release框。
(6)再次单击"+"号和Load/Unload Movie.选择"Load Variables Into Location"在URL输入框内输入你的ASP文件名(例如flash.asp). 选择Target。
(7) 最后,选择Variables中的Send using POST, 单击"+"号来设置变量在Variable输入框内输入 "Input"(就是第一个text field的name) 。当上面的工作都完成后,可以在action box内看到如下内容摘要:
On (Release)
Load Variables ("flash.asp", "", vars=POST)
Set Variable摘要: "Input" = ""
End On
这样当在动画过程中这个按钮被点击并释放后,Input输入框中的内容将被传递给flash.asp文件。注重Form是使用的post方式传递变量的。
(8) 建立一个HTML页面,在其中包含这个Flash动画文件。
第三步摘要:ASP文件的代码
%26lt;%
Set Connection = Server.CreateObject("ADODB.Connection")
Set Recordset = Server.CreateObject("ADODB.Recordset")
Connection.Open "people"
SQL = "SELECT * FROM Staff WHERE ID=" %26amp; Request.Form("Input") %26amp; ";"
Recordset.Open SQL,Connection,1,2
If Recordset.EOF Then
KnownAs = "Not"
Surname = "Found"
Else
KnownAs = Recordset ("Known")
Surname = Recordset ("name")
End If
Recordset.Close
Connection.Close
response.write("KnownAs="+Server.URLEncode(KnownAs))
response.write("%26amp;Surname="+Server.URLEncode(Surname)
%%26gt;
需要注重的是在把KnownAs和Surname传递回去的写法,将是这样的Known=Data1%26amp;Surname=Data2
使用Server.URLEncode(VariableName)来保证传递过去变量的是按照 URL格式编码的。
4 flash动画的概念
4.1 什么是动画和动画设计
动画和动画设计(即原画)是不同的概念,原画设计是动画影片的基础工作.原画设计的每一镜头的角色、动作、表情,相当於影片中的演员.所不同的是设计者不是将演员的形体动作直接拍摄到胶片上,而是通过设计者的画笔来塑造各类角色的形象并赋予他们生命、性格和感情。
4.2 什么是动画片中的动画
动画片中的动画一般也称为"中间画".这是指两张原画的中间过程而言的.动画片动作的流畅、生动,关键要靠"中间画"的完善.一般先由原画设计者绘制出原画,然后动画设计者根据原画规定的动作要求以及帧数绘制中间画.原画设计者和动画设计者必须有良好的配合才能顺利完成动画片的制作。
4.3 动画绘制时需要的一些工具
动画绘制需要的工具一般有摘要:拷贝箱工作台、定位器、铅笔、橡皮、颜料、曲线尺等.方法是摘要:按原画顺序将前后两张画面套在定位器上,然后再覆盖一张同样规格的动画纸,通过台下拷贝箱的灯光,在两张原画动作之间先画出第一张中间画(称为第一动画),然后再将第一动画和第一张原画叠起来套在定位器上,覆盖另一张空白动画纸画出第二动画.依此方法,绘制出两张原画之间的全部动作。
4.4 flash动画影片制作的步骤
1、由编导(可以是你自己)确定动画剧本及分镜头脚本;
2、美术动画设计人员设计出动画人物形象;
3、美术动画设计人员绘制、编排出分镜头画面脚本;
4、动画绘制人员进行绘制;
5、导入到flash进行制作;
6、剪辑配音。
在分镜头画面脚本绘制过程中,应养成填表的好习惯,在表格中注明画面的景别,画面景别使用的专业术语有摘要:大特写、特写、近景、中景、全景、远景、全远景、纵深景等。画面 镜头号 景别 秒数 内容摘要 对白 效果 音乐
5.1 时间和帧数
对动画时间的基本考虑是放映速度摘要:电影和电视的放映速度是24帧/秒,而动画片一般有12帧就可以了,然后录制或拍摄时进行双格处理。假如绘制动作较快的动画最好进行单格处理,即每秒要绘制24个画面。对於快速奔跑的动作,一般采用8帧单格画面。对於物体发生震动用单格处理两端的动作就可以了。
5.2动画的间格距离表现
物体的静止到移动到静止都有类似的规律摘要:静止开始时速度慢、运动中的速度快、运动停止时的速度慢.表现在帧数上则是摘要:从静止到运动帧数逐渐减少,从运动到静止帧数逐渐增加,中间运动过程的速度最快,帧数也最少。
5.3 flash动画中循环动作的时间
动画中经常会有循环动作,但不同的情况需要的帧数也是不同的。如摘要:快速飘扬的旗需要6帧画面循环;又如火焰的循环,大火的动作循环从底部烧到顶部可能需要几秒,而小火的循环只需要几帧;下雨的循环动作最好设置两层,前层雨水穿过屏幕,一般需6帧画面,后层雨水穿过屏幕的时间慢於前层,循环的帧数也相应多於前层;下雪的动画则至少需要有3种大小不同的雪花,循序的时间约需要2秒;一个急速跑步动作需4帧画面,快跑动作需8帧画面,慢跑动作则需12帧,超过16 帧,画面就失去冲刺感觉;大象需要1~1.5秒完成一个完整的步子;小动物如猫的一个动作只需0.5 秒或更少;鹰的翅膀一个循环需要8帧;小麻雀的翅膀循环动作有2帧画面就可以了。
5.4 flash 背景透明和层次新问题
%26lt;PARAM NAME=wmode value=transparent%26gt;
#flash背景透明,在flash语句中加入这句或者摘要:
选中刚才已插入的flash动画,右击鼠标选择参数,在弹出的对话框中点击+加号图标,在左侧的参数中键入wmode在右侧的值框内键入transparent点击ok,按f12进行预览,ok!我们所要的透明效果就出现了!
在Mozilla,Firefox浏览器中起功能的是这个标签 %26lt;embed%26gt;%26lt;/embed%26gt; 那这样,在%26lt;embed%26gt;标签内加入属性 wmode="transparent" 就可以实现flash背景透明,如%26lt;embed src="your.swf" wmode="transparent" quality="high"%26gt;%26lt;/embed%26gt;
embed似乎不提倡使用(网景发明的),w3c推荐用object代替。
也可以尝试加到object中让flash不要漂到最高层摘要:
%26lt;param name="wmode" value="Opaque
6 flash动画的相关概念和制作过程
6.1 外形补间动画的概念
在Flash的时间帧面板上,在一个时间点(关键帧)绘制一个外形,然后在另一个时间点(关键帧)更改该外形或绘制另一个外形,Flash 根据二者之间的帧的值或外形来创建的动画被称为“外形补间动画”。
6.2构成外形补间动画的元素
外形补间动画可以实现两个图形之间颜色、外形、大小、位置的相互变化,其变形的灵活性介于逐帧动画和动作补间动画二者之间,使用的元素多为用鼠标或压感笔绘制出的外形,假如使用图形元件、按钮、文字,则必先“打散”再变形。
6.3 外形补间动画在时间帧面板上的表现
外形补间动画建好后,时间帧面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的箭头,如图所示
6.4 创建外形补间动画的方法
在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的外形,一般一帧中以一个对象为好,在动画结束处创建或选择一个关键帧并设置要变成的外形,再单击开始帧,在【属性面板上单击【补间旁边的小三角,在弹出的菜单中选择【外形,此时,时间轴上的变化如图3-3-1所示,一个外形补间动画就创建完毕。Flash的【属性面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个外形补间动画后,点击时间帧,【属性面板如图所示。
6.5 歌词的制作
6.5.1 文字的遮罩效果
6.5.2 文字的淡入淡出效果
6.6 元件的制作和素材的引用
6.7 flash音乐导入和播放控制
7 flash中声音和声道平衡的控制
7.1 音乐的播放和停止
(1)首先从外部导入一个音乐,也就是用File%26gt;Import导入。或直接从Window%26gt;Common Libraie%26gt;Sounds中拖一个到舞台上。
(2)然后选择Window%26gt;Library。从中选中你刚导入的音乐,并按鼠标右键,选中其中的Linkage,如下图摘要:
(3)在跳出的Symbol Linkage Properties对话框中,在Linkage中选Export this symbol,在identifier中输入你想要取的音乐名字,如"likesound"。假如你用的是flash mx,则选择Export for Actionscript。如下图摘要:
(4)接着从库中选择两个按钮,并放在舞台上,如下图摘要:
(5)在第一个开始按钮上捆绑如下代码摘要:
on (release) {
s=new Sound();
s.attachSound("likesound");
s.start(0,6);
}
(6)在第二个停止按钮上捆绑如下代码摘要:
on (release) {
s.stop()
}
7.2 音量的控制
(1)从库中选一个按钮放在舞台上,把这个按钮转换成MovieClip。这样做的目的是能把这个按钮既可以接受电影事件也能接受按钮事件,如下图摘要:
(2)在这个按钮的电影剪辑上加入以下代码摘要:
onClipEvent (load) {
top = _y;
left = _x;
right = _x;
bottom = _y+100;
}
onClipEvent (enterFrame) {
if (dragging=true) {
_root.s.setVolume(100-(_y-top));
}
}
(1)从库中选一个按钮放在舞台上,把这个按钮转换成MovieClip。这样做的目的是能把这个按钮既可以接受电影事件也能接受按钮事件。(此例是最下的那个按钮,既横向的那个)做好后如下图摘要:
(10)在这个按钮的电影剪辑上加入以下代码
onClipEvent (load) {
top = _y;
bottom = _y;
left = _x-50;
right = _x+50;
center = _x;
}
onClipEvent (enterFrame) {
if (dragging=true) {
_root.s.setPan((_x-center)*2);
}
}
(11)通过双击这个电影剪辑,或通过选中这个电影后再选Edit%26gt;Edit Symbol,进入该电影剪辑地编辑状态,选中按钮本身,在这个按钮上捆绑以下代码(和上次的操作完全相同)。
on (press) {
startDrag ("", false, left, top, right, bottom);
dragging = true;
}
on (release) {
stopDrag ();
dragging = false;
}
8 总结flash动画的根本
Flash动画说到底就是“遮罩+补间动画+逐帧动画”和元件(主要是影片剪辑)的混合物,通过这些元素的不同组合,从而可以创建千变万化的效果。
三大基本功能之外的延伸Flash动画的三大基本功能是一切Flash动画应用的基础。但现在Flash已经是一个非常强大的平台,他是一个富媒体环境。在Flash 4时他加入了MP3声音的支持,Flash 3及以前的版本对音频支持是很匮乏的,从那个时候起你可以设计多媒体的Flash动画了。在Flash 6时他加入了视频的支持,Flash 5及以前的版本不支持视频(不包括链接的Quicktime),这时,你可以嵌入视频,也可以播放外部的Flv格式的视频。甚至,你还可以捕做到来自麦克风和摄像头的实时音频和视频。虽然Flash 4以前的版本中也有简洁的脚本代码,但应该不算有严格意义上的Actionscript,充其量只能算是Action,因为他仅有简单的几条语句,连加减乘除运算符都没有。增强的图形处理功能目前Flash对位图的处理功能还比较弱,因为它最初是从矢量处理起始的,加之矢量图形是Flash GUI设计之基石,所以估计还会沿着矢量处理的道路继续前进。
不过最近的滤镜和图像混合模式也向位图处理领域迈出一大步。相信未来会有更多更好的这方面的功能加进来。
Flash的功能可能越来越复杂,如何系统地把握这项技术就显得非常重要。系统地把握一门技术有两个好处摘要:一个是对目前的功能有清楚的熟悉;第二,就是能够从容应对更复杂的知识。
了解这些对于一个初入门的动画设计者是非常有意义的,正是将这些功能逻辑的整理出来,有利于用户建立正确的、逻辑的知识体系,而不是再在黑夜里徘徊了。