网页设计与制作-13flash.ppt
《网页设计与制作-13flash.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作-13flash.ppt(97页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、网页动画设计-Flash简介Flash是由Macromedia公司开发的网页制作软件利器之一,现在已被Adobe公司收购。它是一种交互式的动画设计工具,用它可以将音乐、声效、动画及富有创意的界面融合到一起,以制作出主品质的网页动态效果。第一课 Flash 8 简介Flash的产生和发展Flash成了引燃互联网无穷创意的导火索。在具备广阔发展前景的无线领域,它同样展现出无穷的魅力。Flash的前身是FutureSplash,被Macromedia公司收购后主要用来完善该公司的拳头产品Director。开发的新一代产品Flash在网页上呈现了精彩的动画,其震惊程度可想而知。1 1 FlashFla
2、sh入门入门 初识Flash Flash CS6的工作环境 文档的基本操作 影片的测试和发布 1.1.1 Flash动画的特点 1.1.2 Flash的应用领域 1.1 初识Flash Flash动画结合了流控制技术和矢量技术,Flash动画纪录的是关键帧和控制动作,生成的动画文件非常小巧。与传统的动画制作软件相比,Flash动画具有图文并茂、流媒体传输和受限制小等特点,同时其还具有强大的交互功能。1使用矢量技术,文件短小精悍使用矢量技术,文件短小精悍2使用流媒体技术,易于网络传播使用流媒体技术,易于网络传播3逼真的动画和媒体支持逼真的动画和媒体支持4强大的交互性强大的交互性1.1.1 Fla
3、sh动画的特点网站片头和网站广告 这是Flash最早出现的目的丰富互联网的表现方式。相对与一些普通的jpg图片来说,这种Flash动画更具有冲击力,可以第一时间抓住浏览者的目光。给浏览者留下好的印象。(如图1-1-4)所示就是国外著名网站Eye4U精彩的片头动画。图1-1-41.1.2 Flash 的应用领域 由于Flash相对于图片或GIF动画能达到更吸引人的效果,传达更多动态信息,所以许多Banner(横幅广告条)或者网站的图题部分,都采用Flash来制作,图1-1-5所示是在门户网站网易首页播放的Flash广告。图1-1-5Flash MV和二维动画 Flash的出现给人们带来了创作激情
4、,尤其是用Flash对一些歌曲进行动画创作。制作简单的MV。在网上几乎可以找到各种流行歌曲的MV版,可见Flash MV深入人心,简单易学,所以受广大网民的喜好。图1-1-6所示是网友为流行歌曲发如雪制作的Flash MV。图1-1-6 更多专业的作者开始进行二维动画的创作,自己编写剧情,设计动画,甚至配音、配乐。目前国内已出现许多专业的Flash动画工作室,开始制作Flash长片和Flash连续剧,图1-1-7所示是由拾荒制作的二维动画小破孩。图1-1-7电子贺卡 以往过年过节,一般都通过邮局寄出贺卡的。或是通过网络传送祝福。但只是一些单纯的图片,出现了Flash之后。各大网站采用Flash
5、来制作完成贺卡。这样制作的贺卡活灵活现。很受人们的喜爱。如图1-1-8第一课 Flash 8 简介图1-1-8网络游戏 经过多年的发展,Flash已具备强大的交互功能,通过Flash可快速开发出精彩的小游戏。有不少知名企业开始在自己的网站上放置和产品相关的小游戏,来增强浏览者对产品的关注度。如图1-1-9所示。图1-1-9 Flash具有强大的二维动画功能,所以许多电视台和广告制作公司开始尝试用Flash来制作电视广告。采用Flash制作电视广告具有成本低、周期短、改动方便的优点,受到不少企业的青睐。如图1-1-10电视广告第一课 Flash 8 简介图1-1-10多媒体客户端 Flash有生
6、动的表现力和强大的互动功能,越来越多的客户端软件开始使用Flash制作,给用户以良好的使用体验。如图1-1-11图1-1-11教学课件 Flash操作界面简单,功能强大,越来越多的老师开始青睐Flash。老师开始用Flash上课。不需要借助其他软件。单独使用Flash就可以完成课件的制作。Flash制作的课件很容易发布到网络上,使课件的应用范围更广。如图1-1-12所示。第一课 Flash 8 简介图1-1-12网络多媒体(播客)第一课 Flash 8 简介 网络多媒体的应用也如火如荼地发展壮大。美国著名的视频播客网站YouTube就是采用Flash 8的流视频作为播出格式。用播客的人越来越多
7、。大家选择用这样的动画视频做播出格式。受广大网民的喜爱。无线通信应用 Flash已进入无线通信领域,采用Flash Lite开发的Flash游戏和Flash应用,已可应用到多种型号的手机上。在PDA上,Flash的应用也非常广泛。Flash已成为在原来移动开发领域中处于领先位置的Java的强有力的挑战者。1.2.1 Flash CS6的开始页的开始页1.2.2 Flash CS6的操作界面的操作界面 1.2 Flash CS6的工作环境 1.2.1 Flash CS6的开始页的开始页 在在Flash CS6启启动动完完成成后后,界界面面中中将将首首先先显显示示开开始始页页。开开始始页页将将启启
8、动动Flash CS6后后常常用用的的操操作作集集中中放放在在一一起起,供供用用户户随随时时调调用用。用用户户可可以以在在页页面面中中选选择择从从哪哪个个项项目目开开始始工工作作,很很容容易易地地实实现现从从模模板板创创建建文文档档、新新建建文文档档和和打打开开文文档档的的操操作作。同同时时通通过过选选择择【学学习习】栏栏中中的的选选项项,用用户户能能够够方方便便地地打打开开相相应应的的帮帮助助文文档,进入具体内容的学习。档,进入具体内容的学习。1.2.2 Flash CS6的操作界面的操作界面 在开始页中选择【新建】栏中的【ActionScript 3.0】命令,Flash会创建一个空白的F
9、lash文档。Flash CS6的操作界面主要包括应用程序栏、菜单栏、工具栏、舞台、时间轴和面板等。下图为 Flash CS6的界面构成。1.2.2 Flash CS6的操作界面的操作界面 1菜单栏2【工具】面板3舞台和场景。下图为舞台上的操作 1.2.2 Flash CS6的操作界面的操作界面 4【时间轴】面板 【时间轴】面板是一个显示图层和帧的面板,其用于控制和组织文档内容在一定时间内播放的帧数,同时可以控制影片的播放和停止。下图为【时间轴】面板 1.2.2 Flash CS6的操作界面的操作界面 5动画编辑器Flash CS6使用动画编辑器来对每个关键帧的参数进行完全控制,这些参数包括旋
10、转角度、大小、缩放、位置和滤镜等。在动画编辑器中,操作者可以借助于曲线,以图形的方式来控制缓动。6面板组面板组 Flash CS6加强了对面板的管理,常用的面板可以嵌入面板组中。使用面板组,可以对面板的布局进行排列,这包括对面板进行折叠、移动和任意组合等操作。在默认情况下,Flash CS6的面板以组的形式停放在操作界面的右侧。1.3.1 新建新建Flash文档文档1.3.2 设置文档属性设置文档属性1.3.3 保存文档保存文档1.3.4 打开和关闭文档打开和关闭文档1.3 文档的基本操作1.3.1 新建Flash文档1创建空白文档创建空白文档选择【文件】|【新建】命令打开【新建文档】对话框,
11、在【常规】选项卡的【类型】列表选择需要创建的新文档类型。单击【确定】按钮即可创建一个新文档。选择需要创建文档类型显示文档描述设置新文档的属性2从模板创建文档从模板创建文档Flash CS6提供了各种类型的应用模板供用户选择使用,打开【新建文档】对话框,在对话框中选择【模板】选项卡,此时对话框变为【从模板新建】对话框。在对话框的【类型】列表中选择需要使用的模板类型,在【模板】列表中选择需要使用模板,单击【确定】按钮即可使用该模板创建新文档了。1.3.1 新建Flash文档选择类别选择模板1.3.2 设置文档属性设置文档属性在默认情况下,新建文档的舞台大小是550400像素,舞台背景色为白色。实际
12、上,用户可以根据需要,对新文档的属性进行设置。选择【修改】|【文档】命令打开【文档设置】对话框。1.3.3 保存文档保存文档 1文档的保存文档的保存用户创建新文档后,如果是第一次保存,在选择【文件】|【保存】命令时,Flash将打开【另存为】对话框。使用该对话框用户可以设置动画文件保存的位置和文件名。完成设置后,单击【保存】按钮文档即被保存。1.3.4 打开和关闭文档打开和关闭文档1打开文档打开文档启动Flash CS6后,选择【文件】|【打开】命令将打开【打开】对话框,在该对话框中选择需要打开的文件后,单击【打开】按钮即可在Flash中打开该文件。1.3.4 打开和关闭文档打开和关闭文档2关
13、闭文档关闭文档在Flash CS6中,文档在程序界面中以选项卡的形式打开,单击文档标签上的【关闭】按钮,可以关闭该文档。1.4.1 预览和测试动画预览和测试动画1.4.2 Flash文件的导出文件的导出1.4 影片的测试和发布影片的测试和发布1.4.1 预览和测试动画预览和测试动画要预览和测试动画,可以选择【控制】|【测试影片】|【测试】命令,或直接按【Ctrl+Enter】键,此时即可在Flash播放器中预览动画效果。选择【窗口】|【工具栏】|【控制器】命令,将打开【控制器】面板,单击其中的【播放】按钮,动画将在舞台上播放。通过面板上的按钮,可以对动画播放进行控制。如,单击【前进一帧】按钮,
14、可以对动画向前进行逐帧播放。单击【后退一帧】按钮,可以使播放头跳到动画的最后一帧。1.4.1 预览和测试动画预览和测试动画单击【播放】按钮播放动画1.4.2 Flash文件的导出文件的导出选择【文件】|【导出】|【导出影片】命令打开【导出影片】对话框,在对话框中选择文件的保存路径并设置导出文件的文件名,将导出文件的类型设置为【SWF影片(*.swf)】,完成设置后,单击【保存】按钮即可将作品导出为Flash影片文件。工具栏 选择工具选择工具(V)任意变形工具任意变形工具(Q)3D 旋转工具旋转工具(W)钢笔工具钢笔工具(P)线条工具线条工具(N)铅笔工具铅笔工具(Y)Deco 工具工具(U)滴
15、管工具滴管工具(I)手形工具手形工具(H)笔触颜色笔触颜色对象绘制对象绘制部分选取工具部分选取工具(A)套索工具套索工具(L)文本工具文本工具(T)矩形工具矩形工具(R)刷子工具刷子工具(B)骨骼工具骨骼工具(K)颜料桶工具颜料桶工具(K)橡皮擦工具橡皮擦工具(E)缩放工具(缩放工具(M、Z)填充色填充色贴紧至对象贴紧至对象绘图工具Flash提供的绘图工具包括线条工具、钢笔工具、文本工具、椭圆工具、矩形工具、铅笔工具和刷子工具1线条工具线条工具用于绘制任意的矢量线段。在“属性”面板中,可设置线条的颜色、粗细、线型等。单击“自定义”按钮,可弹出如图所示的“笔触样式”对话框。在其中可根据需要对线段
16、进行设置。“笔触样式”对话框 返回2铅笔工具铅笔工具用于绘制矢量线和任意形状的图形。在选择铅笔工具后,在“绘图”工具栏下方的“选项”栏中单击鼠标,将出现如图所示的列表。下面分别铅笔的三种绘图模式的含义。伸直:可以绘制直线并将接近三角形、椭圆、矩形和正方形的形状转换为这些常见的几何形状。平滑:可以绘制平滑的曲线。墨水:可以绘制任意而又不用修改的线条,这种模式绘制出的图形与绘制时的笔迹更接近。选项列表 返回3椭圆工具椭圆工具用于绘制实心或空心的椭圆或圆。椭圆的绘制分为两个部分:一是设置笔触颜色。二是设置填充颜色。几种不同的椭圆和圆使用椭圆工具及其属性设置 (椭圆工具)用于绘制椭圆图形,其使用方法与
17、 (矩形工具)基本类似,这里就不再赘述。在工具箱中选择 (椭圆工具)后,在属性面板中将出现椭圆工具的相关属性设置,如图2-24 所示。1)“开始角度”与“结束角度”:用于设置椭圆图形的起始角度与结束角度值。如果这两个参数均为0,则绘制的图形为椭圆或圆形。调整这两项属性的参数值,可以轻松地绘制出扇形、半圆形及其他具有创意的形状。图2-25 所示为“开始角度”与“结束角度”参数变化时的图形效果。图2-24 椭圆工具的“属性”面板 图2-25 “开始角度”与“结束角度”参数变化时的图形效果4矩形工具矩形工具用于绘制实心或空心的矩形或正方形。矩形工具的笔触色和填充色的设置方法与椭圆工具的使用相同。几种
18、不同的矩形和正方形如图所示。“矩形设置”返回填充颜填充颜色色笔触颜笔触颜色色矩形各个边角半矩形各个边角半径的参数设置径的参数设置几种不同的矩形和正方形返回 利用 (刷子工具)可以绘制类似毛笔绘图的效果,应用于绘制对象或者内部填充,其使用方法与 (铅笔工具)类似。但是使用 (铅笔工具)绘制的图形是笔触线段,而使用(刷子工具)绘制的图形是填充颜色。在工具箱中选择 (刷子工具)后,在工具箱下方的“选项区域”中将出现 (刷子工具)的相关选项设置,如图2-30 所示。5 刷子工具图2-30 刷子工具的相关选项 对象绘制刷子模式刷子形状锁定填充刷子大小 对象绘制:以对象模式绘制互不干扰的多个图形。锁定填充
19、:用于设置填充的渐变颜色是独立应用还是连续应用。刷子模式:用于设置刷子工具的各种模式。刷子大小:用于设置刷子工具的笔刷大小。刷子形状:用于设置刷子工具的形状。不同的刷子模式返回6钢笔工具钢笔工具可以绘制出精确的直线或曲线,还可以绘制出多结点的曲线,并能增删曲线上的结点。单击工具栏上的钢笔工具按钮,在“属性”面板中可设置钢笔的属性。(1)画直线单击工具栏上的钢笔工具按钮,鼠标变成为钢笔的形状。在舞台工作区中单击鼠标左键定义直线的起点,然后在需要的位置单击鼠标定义直线的终点,Flash自动将两点连成一条直线。如图所示。(2)画曲线单击工具栏上的钢笔工具按钮,鼠标变成为钢笔的形状。在舞台工作区中单击
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 13 flash
限制150内