- 浏览: 13730742 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
动画是一种动态生成一系列相关画面的处理方法。利用人眼视觉上的“残 留”特性,依一定的速率播放静止的图形或图片就会产生运动的视觉效果,实验证明,如果动画或电影的画面刷新率为每秒 24 帧左右,也即每秒放映 24 幅画面,则人眼看到的是连续的画面效 果。
计算机动 画原理与传统动画基本相同,只是在传统动画的基础上把计算机技术用于动画的处理和应用,并可以达到传统动画所达不到的效果。由于采用数字处理方式,动画的 运动效果、画面色调、纹理、光影效果等可以不断改变,输出方式也多种多样。
计算机动画的应用小到多媒体软件中某个组件、物体或字幕的运动,大到一段动画演示、光盘出版物片头片尾的设计制作,甚至到电视片的片头 片尾、电视广告,乃至计算机动画片如“狮子王”等。
动画的舞台结构及道具组合
本节知识提要点
● 认识时间轴面板。 ● 了解时间轴各分区的功能。 ● 复制、添加、删除场景。 ● 创建图形、影片剪辑、按钮等。 ● 导入声音素材。
1. 时间轴
一部 Flash 动画就像一部小电影,时间轴就是用来组织和控制影片内容在一定时间内如何播放的地方。我们先来认识 时间轴面板,如图 3-1-1 所示。
图3-1-1 时间轴面板
时间轴面板分成四个部分:顶区、图层区、时间帧区、状态区。下面分别叙述各区的功能。
(1)顶区
由二行组成,如图3-1-2所示。
图3-1-2 时间轴顶区
第一行是切换行,只要单击相应的文件名就可以在几个 fla 或 swf 文件之间进行切换。
第二行从左向右是当前场景的名称,编辑场景和编辑元件间的切换,场景显示比例。
(2)图层区
每个图层都包含一些舞台中的动画元素(包括声音或 action 指令语句),上面图层中的元素 遮盖下面图层中的元素。
图层区的最上面有三个图标。 用来控制图层中的元件 是否可视; 像一把小锁,单击后 该图层被锁定,图层的所有的元件不能被编辑; 是轮廓线,单击后图层 中的元件只显示轮廓线,填充将被隐藏,这样能方便编辑图层中的元件。
图层有以下几种:
● 层文件夹,图标是 ,组织动画序列的组件 和分离动画对象,有二种状态, 是打开时的状态, 是关闭时的状态。
● 引导层,图标是 ,使“被引导层”中 的元件沿引导线运动,该层下的图层为“被引导层”。
● 遮罩层,图标是 , 使被遮罩层中的动画元素只能透过遮罩层被看到,该层下的图层就是“被遮罩层”,层图标是 。
● 普通层,图标是 ,放置各种动画元素。
(3)时间帧区
Flash 影 片将播放时间分解为帧,用来设置动画运动的方式、播放的顺序及时间等。默认时是每秒播放 12 帧,如图 3-1-3 所示。
图 3-1-3 时间轴图层区和时间帧区
在时间帧面板上,每 5 帧有个“帧序号”标识,常见“帧符号”意义 如下:
● 关键帧:关键帧定义了动画 的变化环节,逐帧动画的每一帧都是关键帧。而补间动画在动画的重要点上创建关键帧,再由 Flash 自己创建关键帧之间的内容。实心圆点 是有内容的关键帧,即实 关键帧。而无内容的关键帧(即空白关键帧)则用空心圆 表示。
● 普通帧:普通帧显示为一个 个的单元格。无内容的帧是空白的单元格,有内容的帧显示出一定的颜色。不同的颜色代表不同类型的动画,如动作补间动画的帧显示为浅蓝色,形状补间动画的帧 显示为浅绿色。而静止关键帧后的帧显示为灰色。关键帧后面的普通帧将继承该关键帧的内容。
● 帧标签:帧标签用于标识时 间轴中的关键帧,用红色小旗加标签名表示,如 。
● 帧注释:用于为你自己或处 理同一文件的其他人员提供提示。用绿色的双斜线加注释文字表示,如 。
● 播放头:指示当前显示在舞 台中的帧,将播放头沿着时间轴移动,可以轻易地定位当前帧。用红色矩形表示 ,红色矩形下面的红色细 线所经过的帧表示该帧目前正处于“播放帧”。
( 4 )状态栏
位于时间轴的最下方,指示所选的帧编号、当前帧频以及到当前帧为止的 运行时间,如图 3-1-4 所示。
最左边的是一组“帧显示模式”按钮,也就是所谓的“描图纸”或者“洋葱皮”功能,它能某个动画过程以一定透明度完整显示出来,而且还可 以进行“多帧编辑”。
图 3-1-4 时间轴状态栏
2
.场景
(1)打开场景面板
时间轴面板下面,占据界面最大的区域就是“场景”,如图 3-1-5 所示。
时间轴面板好比是个“导演工作台”,那么,场景就是受“工作台”控制的“舞台”了,随着“工作台”上的变化,“舞台”上的内容也将同步 变化。
你可以在“舞台”中编辑当前“关键帧”中的内容,包括设置对象的大小、透明度、变形的方式和方向等等。
在图 3-1-6 场景中表示的是几种常见的动画元素。
图3-1-6 常见的几种动画元素
根据需要,你可 以增、删“场景”,“多场景”动画适合较复杂的作品或者舞台上的动画元素差别较明显的情况。 Flash 将按照它们的先后顺序播放,此 外,你还可以利用指令交互地实现不同场景间的跳转。
增、删“场景”以及为“场景”命名是在【场景】面板中进行的,下面,介绍一下【场景】面板的功能和使用方法:
执行 【窗口】|【设计面板】| 【场景】 命令,打 开场景面板,如图3-1-7所示。
图3-1-7 打开场景面板
打开后的【场景】面板如图3-1-8所示,【场景1】下的3个场景都是新增的几个场景。
图3-1-8 【场景】面板
(2)操作场景面板
在场景面板中可以进行下列操作:
● 复制场景,先选中要复制的场景,再单击 按钮,就可以复制出 一个和原场景一模一样的场景,复制出的场景还可以进行再复制,如图 3-1-8 中的“场景 1 复制 复制”所示。
● 增加场景,单击 增加场景按钮,可以 添加一个新的场景,如图 3-1-8 中的“场景 2 ”。
● 删除场景,选中要删除的场景,单击 ,就可以删除该场 景。
● 更改场景名称,在【场景】面板中双击场景名称,然后输入新名称,按回车键确认。
● 更改场景顺序,在【场景】面板中按住场景名称并拖动到不同的位置,松开鼠标即可。
● 转换场景,可在【视图】 | 【转到】菜单中选择场景名称,可以选择相应的场景,也可以在时间轴面板上单击场景切换按钮 ,打开场景切换菜单, 选择相应的场景,如图 3-1-9 所示。
图 3-1-9 场景切换菜单
3
.帧内容
有了“导演工作台”和“舞台”,还要有演员才能演出一幕有声有色“舞台剧”,在场景中的动画元素就是演员,一般常用的有以下几种:
(1)矢量图形
在场景中用鼠标或压感笔画出的图形。 由一个个单独的“节点”构成一个“矢量路径”,每一个“矢量路径”都有其各自的属性,如位置、颜色、 透明度、形状等。对矢量图进行缩放时,图形对象仍保持原有的清晰度和光滑度,不会发生任何偏差,是Flash中最 基本的动画元素。
(2)位图图像
在Flash中导入的*.gif,*.jpg,*.png等格式的图片。图片由像素构成。像素点的多少将决定位图图像的显示质量 和文件大小,位图图像的分辨率越高,其显示越清晰,文件所占的空间也就越大。对位图图像进行缩放时,图像质量出现明显变化,如常见的“锯齿状”等,位图在 Flash中多用做背景。
(3)文字对象
单击工具箱中的【文本 工具】 ,在【属性】面板上选好要输入的文本类型、字体大小、颜色、排版方式等,就可以在场景中输入文字了。
Flash的文本对象 有三种类型:
静态文本字段:显示不 会动态更改字符的文本。
动态文本字段:显示动 态更新的文本,如体育得分、天气报告。
输入文本字段:使用户 可以将文本输入到表单或调查表中。
(4)声音对象
在动画中添加声音,可以使你的作品更有吸引力。 Flash 支持的声音文件有 WAV (仅限 Windows )、 AIFF (仅限 Macintosh )、 MP3 ( Windows 或 Macintosh )。如果你的机器上装有 QuickTime 4 或更高的版本,还可以支持更多的格式。
(5) 按钮对象
按钮在实现Flash 交互性方面有非常重要的作用,通过按钮,你可以实现场景之间的跳转、指定实例的动作、定义与各种按钮状态关联的图形等等。 按钮要实现交互性 功能,必须在创建好的按钮实例上添加动作脚本语句。
(6)影片剪辑
影片剪辑是Flash 中的小型影片,它有自己的时间轴和属性,可以用动作脚本控制播放、跳转等等。 它可以包含交互式控件、声音甚至其它影片剪辑实例。也可以将影片剪辑实例放在按钮元件的时间轴上,以 创建动画按钮。
(7)动作脚本语句
动作脚本是 Flash 的脚本撰写语言,通过它你就可以随心所欲地创建影片、实现场景之间的跳转、指定和定义实例的各种动 作等。 动作脚本语句可以添加在时间帧、实例、按钮上。如果添加在时间帧 上,在时间帧面板的相应帧上,会出现一个“ a ”字,如图 3-1-10 所示。
图 3-1-10 添加动作脚本语句后时间帧上的标记
在影片剪辑、按钮上添 加动作脚本语句的方法要先选择要添加的对象,然后在【动作】面板中进行定义。
发表评论
-
iPhone、iPad 如何播放网页调用优酷视频?
2013-09-26 14:30 17736在线视频一般都是基 ... -
Scrolling Dynamically Loaded Text (as2)
2010-07-02 05:04 1961One quest ... -
flashAndPHP 简单交互
2010-06-17 01:53 1962第一章: flash,php 和 mysql ... -
交互动画按钮
2010-06-16 23:44 3724交互动画按钮 按钮元件是 Flash 的基本 ... -
引导路径动画 (2)
2010-06-16 23:41 18004.实例2——海底世界 ... -
引导路径动画 (1)
2010-06-16 23:31 3561引导路径动画(1) 在前面几节里,我们已经给大家介 ... -
逐帧动画与夸张表情动画
2010-06-16 23:18 6478夸张表情动画的制作(1) (转之ET动画学堂) ... -
形状补间动画
2010-06-16 23:15 5480形状补间动画(1) ... -
逐帧动画与人运动动画制作
2010-06-16 23:11 5040人走路动画制作 ... -
动作补间动画
2010-06-16 23:07 4666动作补间动画(1) ... -
遮罩动画
2010-06-16 22:55 3575遮罩动画(1) ... -
Popup window ActionScript3 VS ActionScript2
2010-06-09 04:17 2665A common ... -
加载loader (How to Load External Images in Actionscript 3.0)
2010-05-28 02:18 1850Using the flash.display.Lo ... -
元件变色 change movieclip's color
2010-05-28 01:34 1905// This line defines a varia ... -
Flash AS3获取PHP数据(ActionScript3 + php + email)送ActionScript2
2010-04-23 21:11 5834一,AS3部分[下载 ] package { ... -
flex与flash元件交互
2010-01-30 04:31 1923前一段时间发了flex与JavaScript的数据交互 ,现 ... -
FLEX里的CSS样式设置教材
2010-01-29 00:38 2402FLEX3中应用 CSS完全详解 ... -
flex 扇形菜单
2010-01-29 00:27 9224在继 auzn经典Flex教程–KingnareStyle ... -
flex 画线
2010-01-29 00:23 3538实例1: <?xml version=" ... -
Flex 中 12 个简单实用的小技巧
2010-01-26 06:32 16741. 复制内容到剪贴板 System.setCli ...
相关推荐
【动画基础知识教学设计】 在信息技术教育中,"动画基础知识教学设计"是一门旨在培养学生动画制作能力和理解动画原理的重要课程。本课程主要针对初二学生,基于苏科版教材下册第8章第一节的内容,与《纲要》基础...
在“HTML5+JavaScript动画基础”这个主题中,我们深入探讨如何利用这两者构建引人入胜的动画效果。 首先,HTML5新增了许多元素和API,如canvas标签,它提供了一个画布,允许开发者通过JavaScript绘制图形并实现动态...
在《HTML5+JavaScript动画基础》一书中,作者深入浅出地讲解了如何利用这两者来构建吸引人的动画和游戏。下面,我们将探讨这个主题中涉及的一些关键知识点。 1. **HTML5新特性**: HTML5是HTML的最新版本,引入了...
《原动画基础教程》(The Animator's Survival Kit) ——动画人的生存手册 理查德·威廉姆斯著 中青新世纪动画教材系列
### Android Animation动画基础知识点 #### 一、Android动画类型 Android平台支持多种动画效果,主要分为两类:**基于XML的动画**与**基于Java代码的动画**。 1. **基于XML的动画**主要包括: - **alpha(渐变...
在“HTML5+JavaScript动画基础 源码”这个主题中,我们将深入探讨如何利用这两种技术来实现丰富的网页动画效果。 HTML5是超文本标记语言的最新版本,它引入了许多新的元素和API,旨在提升网页的语义化和功能。在...
在"HTML5 JavaScript动画基础"这本书中,作者兰贝塔(Billy Lamberta)和彼得(Keith Peters)深入浅出地讲解了如何利用这两门技术构建引人入胜的网页动画。 HTML5是超文本标记语言的最新版本,它引入了许多新的...
《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分,分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户...
HTML5+JavaScript动画基础(中文完整版)
**WebKit CSS3 动画基础** WebKit 是一个开源的网页渲染引擎,被广泛应用于苹果的 Safari 和谷歌的 Chrome 浏览器中。CSS3 动画是 Web 开发中的一个重要组成部分,它允许开发者通过时间序列控制元素的视觉变化,...
由于提供的文件信息中并没有包含具体的HTML5和JavaScript动画基础的知识点,我只能根据标题和描述中提及的内容,结合HTML5和JavaScript的相关技术,为您详细解释在创建HTML5和JavaScript动画时所需掌握的基础知识点...
由曾获奥斯卡奖的迪斯尼著名动画导演理查德•威廉姆斯编著,是一本深入解析动画绘制技巧的权威动画教材。全书深入讲解了以迪斯尼为代表的西方经典动画的创作原则、制作规律及表现技巧,是迪斯尼动画几十年制作经验和...
这个“绚丽的计时效果Canvas绘图与动画基础”项目,旨在帮助学习者掌握基于Canvas的计时动画基础知识,通过实践加深对Canvas的理解。 在HTML5中,`<canvas>`元素是一个可绘制图形的画布,通过JavaScript来控制其...
jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础
《原动画基础教程》是2006年由中国青年出版社出版的图书,作者是理查德·威廉姆斯,译者是邓晓娥。 该书书曾获奥斯卡奖的迪斯尼著名动画导演理查德·威廉姆斯编著,是一本深入解析动画绘制技巧的权威动画教材。全书...
动画简史 是画画的时候了 一切都在于时间点(Timing)和空间幅度(Spacing) 第一课 回到1940年 标尺(Chart)和中间画(Inbetween)的演变 原画和小原画(Breakdown) 关键张 三种动画方式 测试测试再测试 摄影表(X-sheet) 你...
《原动画基础教程》是2006年由中国青年出版社出版的图书,作者是理查德·威廉姆斯,译者是邓晓娥。 该书书曾获奥斯卡奖的迪斯尼著名动画导演理查德·威廉姆斯编著,是一本深入解析动画绘制技巧的权威动画教材。全书...
An动画基础之元件的图形动画与按钮动画 An动画基础之元件的图形动画与按钮动画是An动画的基础知识点,本篇文章将详细介绍图形动画和按钮动画的相关知识点。 一、图形动画 图形动画是An动画中的一种基本动画方式,...