- 浏览: 13640340 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (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打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
引导路径动画(1)
在前面几节里,我们已经给大家介绍了一些动画效果,如飞机从山峰上飞过、辉光掠过文字等等,不知你注意到没有,这些动画的运动轨迹都是直线的,可是在生活中,有很多运动是弧线或不规则的,如月亮围绕地球旋转、鱼儿在大海里遨游等,在 Flash 中能不能做出这种效果呢?
答案是肯定的,这就是“引导路径动画”。
将一个或多个层链接到一个运动引导层,使一个或多个对象沿同一条路径运动的动画形式被称为“引导路径 动画”。这种动画可以使一个或多个元件完成曲线或不规则运动。
1.创建引导路径动画的 方法
( 1 )创建引导层和被引导层
一个最基本“引导路径动画”由两个图层组成,上面一层是“引导层”,它的图层图标为 ,下面一层是“被引导 层”,图标为 ,同普通图层一样。
在普通图层上单击时间轴面板中的【添加运动引导层】按钮 ,该层的上面就会添加 一个引导层 ,同时该普通层缩进成 为“被引导层”,如图 3-6-1 所示。
图 3-6-1 引导路径动画
( 2 )引导层和被引导层中的对象
引导层是用来指示元件运行路径的,所以“引导层”中的内容可以是 用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。
而“被引导层”中的对象是跟着引导线走的,可以使用影片剪辑、图形元件、按钮、文字等,但不能应用形 状。
由于引导线是一种运动轨迹,不难想象,“被引导”层中最常用的动画形式是动作补间动画,当播放动画 时,一个或数个元件将沿着运动路径移动。
( 3 )向被引导层中添加元件
“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导 线”的两端,被引导的对象起始、终点的 2 个“中心点”一定要对准“引导线”的 2 个端头,如图 3-6-2 所示。
图 3-6-2 元件中心十字星对准引导线
在图 3-6-2 中,我们特地把“元件”的透明度设为 50% ,使你可以透过元件看到下面的引导线,“元件”中心的十字星正好对着线段的端头,这一点非常重要, 是引导线动画顺利运行的前提。
2.应用引导 路径动画的技巧
( 1 )“被引导层”中的对象在被引导运动时,还 可作更细致的设置,比如运动方向,在 【 属性 】 面板上,选中 【路 径调整】复选框,对象 的基线就会调整到运动路径。而如果选中 【对齐】复选框,元件 的注册点就会与运动路径对齐,如图 3-6-3 所示。
图 3-6-3 路径调整和对齐
( 2 )引导层中的内容在播放时是看不见的,利用 这一特点,可以单独定义一个不含“被引导层”的“引导层”,该引导层中可以放置一些文字说明、元件位置参考等,此时,引导层的图标为 。
( 3 )在做引导路径动画时,按下工具箱中的【对 齐对象】按钮 ,可以使“对象附着于 引导线”的操作更容易成功,拖动对象时,对象的中心会自动吸附到路径端点上。
( 4 )过于陡峭的引导线可能使引导动画失败,而 平滑圆润的线段有利于引导动画成功制作。
( 5 )向被引导层中放入元件时,在动画开始和结 束的关键帧上,一定要让元件的注册点对准线段的开始和结束的端点,否则无法引导,如果元件为不规则形,可以点击工具箱中的【任意变形工具】 ,调整注册点。
( 6 )如果想解除引导,可以把被引导层拖离“引 导层”,或在图层区的引导层上单击右键,在弹出的菜单上选择 【属性】 ,在对话框中选择“正常”,作为正常图层类型,如图 3-6-4 所示。
图 3-6-4 图层【属性】面板
( 7 )如果想让对象作圆周运动,可以在“引导 层”画一根圆形线条,再用【橡皮擦工具】擦去一小段,使圆形线段出现 2 个端点,再把对象的起始、终点分别对准端点即可。
( 9 )引导线允许重叠,比如螺旋状引导线,但在 重叠处的线段必需保持圆润,让 Flash 能辨认出线段走向,否则会使引导失败。
接下来,我们来制作二个实例,以巩固学到的知识。
引导路径动画(2)
3.实例1——星星字
实例简介
下面来研究一下网站上“老康蓝屋”这几个字的动画效果,它是一个多图层路径引导动画,其运行效果如图 3-6-5 所示。
图 3-6-5 本例运行效果
知识提要
l 创建多层引导路径动画
l 用文字做路径
l 创建光芒四射的星星
制作步骤
( 1 )创建影片文档
步骤1 设置影片文档属性
执行 【文件】|【新建】命令,新建一个影片文档,设置舞台尺寸为515×152像素,背景色为黑色(在教程中,我们为了更好地显示场景中 的内容,背景色设为了深蓝色),如图3-6-6所示。
图3-6-6 文档属性
步骤2 创建背景图层
执行【文件】 | 【导入】 | 【导入到舞台】命令,背景 的图片导入到场景中 。
(2)创建元件
步骤 1 创建“老康蓝屋 ” 元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为 “老康蓝屋”,如图3-6-7所示。
图3-6-7 创建“老康蓝屋”元件
选择【文本工具】 ,在场景中输入“老康蓝屋”四个字,在【属性】面板中,设置文本类型【静态文 本】,字体【华文彩云】,字体大小为80,颜色为白色,如图3-6-8所示。
图3-6-8 “老康蓝屋”文字【 属性 】面板
步骤 2 创建“星星”元件
执行【插入】|【新建元件】命令,新建一个图形元件,名称为 “星星”,如图3-6-9所示。
图3-6-9 创建“星星”元件
在这个新元件中,我们将用一个圆形构成星星的主体,另用三条直线构成星星四射的光芒。
引导路径动画(3)
将【图层1】名称重新命名为“中心”,选择【椭圆工具】 ,设置【笔触颜色】为无,在场景中画一个圆形,大小为“13×13”像素。在 【混色器】面板中,选择【填充样式】为【放射状】,将两个色标的颜色均设置为白色,其中左边的【Alpha】值为100%,右边的为0%,用【颜料桶工 具】填充圆形,设置颜料桶属性和填充后的效果如图3-6-10所示。
图3-6-10 画星星的中心
新建一个图层,重新命名为“光芒”,选择工具栏上的【矩形工具】,设置【笔触颜色】为无,在场景中绘 制一个细长的矩形。在【混色器】面板中,选择【填充样式】为【线性】,将四个色标的颜色均设置为白色。其中,中间两个色标【Alpha】值为100%,左右两边的两个色标【Alpha】值为0%,用【颜料桶工具】填充矩形,设置颜料桶属性如图 3-6-11所示。
图3-6-11 【混色器】面板
接着,我们复制几条光芒,执行【窗口】|【设计面板】|【变 形】命令,打开【变形】面板,设置【旋转】为45度,连续单击三次【复制并应用变形】按钮,星星的光芒就画好了,变形面板及星星效果分别如图 3-6-12(a)和3-6-12(b)所示。
3-6-12(a) 制作完成的星星效果 图3-6-12(b) 变形面板
注意,画好的星星中心要对准场景中的十字星(为了显示清楚, 图3-6-12中星星放大300%)。
步骤 3 创建“旋转的星星”元件
执行【插入】|【新建元件】命令,新建一个影片剪辑,名称为 “旋转的星星”。从库中将名为“星星”的元件拖到第1帧中,在第20帧添加关键帧,再在第1帧建立动作补间动画,在【属性】面板上设置顺时针旋转一周,如 图3-6-13所示。
图3-6-13 设置动作补间动画的旋转
步骤 4 创建“填充颜色”元件
执行【插入】|【新建元件】命令,新建一个影片剪辑,名称为 “填充颜色”。先从库里把图形元件“老康蓝层”拖到场景中,然后执行【修改】|【分离】命令三次,把文字打散为图形,其中第一次是将图形元件实例分离成文 字,第二次是将文字分离成单个的字块,第三次是将文字块分离成图形。选择【选择工具】,在场景的空白处单击,取消对文字的选择,再选择【颜料桶工具】 ,把每个字中间的空隙都填充上蓝色,如图3-6-14所示。
图3-6-14 填充好的文字
(3)创建动画
单击时间轴右上方的【编辑场景】按钮,选择【场景1】切换到 主场景中。
本实例场景中共有八个图层,最下面的图层是图片背景,在前面已经先建好了,现在我们从最后第二层开始 向上一层一层地叙述,在叙述过程中,请随时参考图3-6-16。
步骤1创建 【填充蓝色的文字】层
根据需要,我们先将背景图层的帧延伸到第60帧,再插入一个 新图层并命名为“填充蓝色的文字”。现在我们在【填充蓝色的文字】图层中,把库里的名为“填充颜色”的元件拖到场景中间,在【属面】板中设置【X】为9, 【Y】为65。
注意,以后的操作中,上面各图层中的文字都要和本图层中的文字对齐。
在第30、60帧插入关键帧,在第1、30帧间建立动作补间 动画,接着编辑第1、第60帧中的元件实例。
分别选择第1帧与第60帧中的“填充颜色”元件实例,在【 属性 】面板上设置 【Alpha】值为0%,如图3-6-15所示。如此设置的作用是让文字的底色有明暗渐变的效果,让画面更生动一 些。
图3-6-15 在【 属性 】面板中设置 元件实例透明度
引导路径动画(3)
将【图层1】名称重新命名为“中心”,选择【椭圆工具】 ,设置【笔触颜色】为无,在场景中画一个圆形,大小为“13×13”像素。在 【混色器】面板中,选择【填充样式】为【放射状】,将两个色标的颜色均设置为白色,其中左边的【Alpha】值为100%,右边的为0%,用【颜料桶工 具】填充圆形,设置颜料桶属性和填充后的效果如图3-6-10所示。
图3-6-10 画星星的中心
新建一个图层,重新命名为“光芒”,选择工具栏上的【矩形工具】,设置【笔触颜色】为无,在场景中绘 制一个细长的矩形。在【混色器】面板中,选择【填充样式】为【线性】,将四个色标的颜色均设置为白色。其中,中间两个色标【Alpha】值为100%,左右两边的两个色标【Alpha】值为0%,用【颜料桶工具】填充矩形,设置颜料桶属性如图 3-6-11所示。
图3-6-11 【混色器】面板
接着,我们复制几条光芒,执行【窗口】|【设计面板】|【变 形】命令,打开【变形】面板,设置【旋转】为45度,连续单击三次【复制并应用变形】按钮,星星的光芒就画好了,变形面板及星星效果分别如图 3-6-12(a)和3-6-12(b)所示。
3-6-12(a) 制作完成的星星效果 图3-6-12(b) 变形面板
注意,画好的星星中心要对准场景中的十字星(为了显示清楚, 图3-6-12中星星放大300%)。
步骤 3 创建“旋转的星星”元件
执行【插入】|【新建元件】命令,新建一个影片剪辑,名称为 “旋转的星星”。从库中将名为“星星”的元件拖到第1帧中,在第20帧添加关键帧,再在第1帧建立动作补间动画,在【属性】面板上设置顺时针旋转一周,如 图3-6-13所示。
图3-6-13 设置动作补间动画的旋转
步骤 4 创建“填充颜色”元件
执行【插入】|【新建元件】命令,新建一个影片剪辑,名称为 “填充颜色”。先从库里把图形元件“老康蓝层”拖到场景中,然后执行【修改】|【分离】命令三次,把文字打散为图形,其中第一次是将图形元件实例分离成文 字,第二次是将文字分离成单个的字块,第三次是将文字块分离成图形。选择【选择工具】,在场景的空白处单击,取消对文字的选择,再选择【颜料桶工具】 ,把每个字中间的空隙都填充上蓝色,如图3-6-14所示。
图3-6-14 填充好的文字
(3)创建动画
单击时间轴右上方的【编辑场景】按钮,选择【场景1】切换到 主场景中。
本实例场景中共有八个图层,最下面的图层是图片背景,在前面已经先建好了,现在我们从最后第二层开始 向上一层一层地叙述,在叙述过程中,请随时参考图3-6-16。
步骤1创建 【填充蓝色的文字】层
根据需要,我们先将背景图层的帧延伸到第60帧,再插入一个 新图层并命名为“填充蓝色的文字”。现在我们在【填充蓝色的文字】图层中,把库里的名为“填充颜色”的元件拖到场景中间,在【属面】板中设置【X】为9, 【Y】为65。
注意,以后的操作中,上面各图层中的文字都要和本图层中的文字对齐。
在第30、60帧插入关键帧,在第1、30帧间建立动作补间 动画,接着编辑第1、第60帧中的元件实例。
分别选择第1帧与第60帧中的“填充颜色”元件实例,在【 属性 】面板上设置 【Alpha】值为0%,如图3-6-15所示。如此设置的作用是让文字的底色有明暗渐变的效果,让画面更生动一 些。
图3-6-15 在【 属性 】面板中设置 元件实例透明度
引导路径动画(4)
步骤2 创建【文字】层
新建名为“文字”的图层,把库里名为“老康蓝屋”的元件拖到场景中,文字的边缘要和下面的“填充蓝色
的文字”图层文字边缘对齐,必要时可把对象放大。
步骤3 创建引导层和被引导层
新建一图层并命名为“星星一”,再单击时间轴上的【添加引导层】按钮
,创建引导层,此时刚刚新建的图层会自动缩进到引导层下面,单击缩进了的这一
层,在时间轴上连续单击【添加图层】按钮
,共三次,就会在引导层下面创建好四个缩进的被引导层,其它三个图层分别命名为
“星星二”、“星星三”和“星星四”,在这些被引导图层中,用来放置旋转的星星。
完成后的时间轴如图3-6-16所示。
图3-6-16 时间轴面板
步骤4 设置引导层
选中引导图层,从库里把名为“老康蓝屋”的元件拖出来,其边缘要和下面的“文字”图层中的对象边缘对
齐,执行【修改】|【分离】命令三次,把文字打散成形状,注意,这时“老康蓝屋”元件已经被“打散”,原文字的边
缘已经成为“线段”,它将被我们用作“引导线”。
这时候的场景效果如图3-6-17所示。
图3-6-17 打散文字,作为引导线
步骤5 设置被引导层
在步骤3里面,我们已经创建了四个“被引导层”,现在我们来
设置这四个“被引导层”里的内容,每个图层里放一个“星星”元件,并分别沿着“老康蓝屋”4字的边缘运动。
首先设置第一个“老”字:
为了防止对引导层进行误操作,我们先锁住该层,图层结构如图3-6-18
所示。
图3-6-18 锁定引导层
选中【星星一】图层,单击工具箱上的【对齐对象】按钮,从库里把名为“旋转的星星”的元件拖出来,放
在“老”字边缘的某一点,这是星星运动的起始点,在第60帧添加关键帧,移动星星到文字边缘的另一处,这是星星运
动的结束点。在第1帧建立动作补间动画。
切记:元件的中心点一定要位于文字边缘的线上,如图3-6-19
所示。
图3-6-19 星星在第1、60帧中的位置
从左向右拉动播放头
,观察星星是否沿文字的边缘运动,如果从起始点直接运动到结束点,表示引导失
败,检查元件的中心是不是位于文字边缘的线上,或者改变运动的起始点和结束点,二者之间的路径不能太远,太复杂。
另外3个被引导层的设置同上述一样,只是分别对准“康”、
“蓝”、“屋”3个文字对象,这里不再赘述。效果如下:
发表评论
-
iPhone、iPad 如何播放网页调用优酷视频?
2013-09-26 14:30 17682在线视频一般都是基 ... -
Scrolling Dynamically Loaded Text (as2)
2010-07-02 05:04 1927One quest ... -
flashAndPHP 简单交互
2010-06-17 01:53 1930第一章: flash,php 和 mysql ... -
交互动画按钮
2010-06-16 23:44 3670交互动画按钮 按钮元件是 Flash 的基本 ... -
引导路径动画 (2)
2010-06-16 23:41 17574.实例2——海底世界 ... -
动画基础
2010-06-16 23:22 1578动画的舞台结构及道具组合(1) 动画是一种动态 ... -
逐帧动画与夸张表情动画
2010-06-16 23:18 6438夸张表情动画的制作(1) (转之ET动画学堂) ... -
形状补间动画
2010-06-16 23:15 5436形状补间动画(1) ... -
逐帧动画与人运动动画制作
2010-06-16 23:11 5000人走路动画制作 ... -
动作补间动画
2010-06-16 23:07 4625动作补间动画(1) ... -
遮罩动画
2010-06-16 22:55 3541遮罩动画(1) ... -
Popup window ActionScript3 VS ActionScript2
2010-06-09 04:17 2634A common ... -
加载loader (How to Load External Images in Actionscript 3.0)
2010-05-28 02:18 1812Using the flash.display.Lo ... -
元件变色 change movieclip's color
2010-05-28 01:34 1873// This line defines a varia ... -
Flash AS3获取PHP数据(ActionScript3 + php + email)送ActionScript2
2010-04-23 21:11 5789一,AS3部分[下载 ] package { ... -
flex与flash元件交互
2010-01-30 04:31 1892前一段时间发了flex与JavaScript的数据交互 ,现 ... -
FLEX里的CSS样式设置教材
2010-01-29 00:38 2355FLEX3中应用 CSS完全详解 ... -
flex 扇形菜单
2010-01-29 00:27 9184在继 auzn经典Flex教程–KingnareStyle ... -
flex 画线
2010-01-29 00:23 3495实例1: <?xml version=" ... -
Flex 中 12 个简单实用的小技巧
2010-01-26 06:32 16421. 复制内容到剪贴板 System.setCli ...
相关推荐
引导路径动画信息化教学设计.doc
《引导路径动画》信息化教学设计.docx
《引导路径动画》信息化教学设计.doc
Flash--引导路径动画详解及实例.doc
《引导路径动画》信息化教学设计汇编.pdf
Flash8引导路径动画详解及实例[整理].pdf
地球绕着太阳转_引导路径动画_简版.swf
地球绕着太阳转_引导路径动画_简版.fla
flash路径引导动画.ppt
(完整版)flash路径引导动画.ppt
(3)在做引导路径动画时,按下工具箱中的【对齐对象】按钮,可以使" 对象附着于 引导线"的操作更容易成功,拖动对象时,对象的中心会自动吸附到路径端点上。 (4)过于陡峭的引导线可能使引导动画失败,而平滑圆润的...
第9课 引导路径动画 第10课 交互动画的灵魂——按钮 第11课 MC应用范例――仿三维空间效果 第12课 声音 第13课 时间轴特效 第14课 行为 第15课 对象类型及绘画、动画技巧(一) 第16课 元件、实例、公用库 第17课...
第9课 引导路径动画 第10课 交互动画的灵魂——按钮 第11课 MC应用范例――仿三维空间效果 第12课 声音 第13课 时间轴特效 第14课 行为 第15课 对象类型及绘画、动画技巧(一) 第16课 元件、实例、公用库 第17课...
(3)在做引导路径动画时,按下工具箱中的【对齐对象】按钮,可以使"对象 附着于引导线"的操作更容易成功,拖动对象时,对象的中心会自动吸附到路径端点上。 (4)过于陡峭的引导线可能使引导动画失败,而平滑圆润的线段有利...
(3)在做引导路径动画时,按下工具箱中的【对齐对象】按钮,可以使"对象 附着于引导线"的操作更容易成功,拖动对象时,对象的中心会自动吸附到路径端点上。 (4)过于陡峭的引导线可能使引导动画失败,而平滑圆润...
路径动画(引导线动画); 实验课时:4课时(两次上机) 实验内容(包括复习知识点): 1、认识Flash 8基本界面并掌握设置工作界面的方法。 2、设置动画制作环境,练习绘制与填充矢量图形 设置背景颜色、设置...
第1章Flash基础知识和动画原理 1.1FlashMX2004基础知识 初始界面与新建文档 界面布局和自定义界面 首选参数与快捷键 时间轴 层 库面板和库的操作 1.2动画原理和Flash动画制作实例讲解 动画原理与图形的创建 元件的...