iH5高级教程：H5交互菜单，3D时间轴特效
在时间轴上的素材呈现3D的效果，手指在屏幕上滑动的过程中，图片以3D翻转的形式运动，超过屏幕或没有运动到屏幕中间的图片都是折叠的形式。下面我们讲述一下在案例中的3D时间轴动画。
第一步：
1、选中舞台，点击工具栏下的页面工具，添加一个页面。
2、选中页面，点击工具栏下的滑动时间轴工具，在舞台上画一个框，添加一个与舞台一样大的滑动时间轴。滑动时间轴的总时长设置为10秒，滑动方向为上
3、选中滑动时间轴，点击工具栏的下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为容器。
4、选中容器透明按钮，点击工具栏下的图片工具，在舞台里画出一个矩形，添加一张高度为3425的时间线图片，右击图片对象，命名为背景一线。
5、选中容器透明按钮，点击工具栏下的轨迹工具，添加一个轨迹，右击轨迹对象，命名为辅助轨迹。
6、选中背景一线图片对象，点击工具栏下的轨迹工具，添加一个轨迹。
7、选中背景一线图片对象，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张八月的图片。
8、选中八月的图片，点击工具栏下的文本工具，在舞台中画出一个矩形，添加两个文本对象。
第二步：
1、选中八月的图片，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一
个透明按钮，右击透明按钮对象，命名为3D旋转父对象。
2、选中八月的图片，点击工具栏下的轨迹工具，添加一个轨迹。
3、选中3D旋转父对象透明按钮，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D对象。设置的X轴旋转角度为-45
4、选中3D对象透明按钮，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张图片。
5、选中3D对象透明按钮，点击工具栏下的轨迹工具，添加一个轨迹。
6、选中图1，点击工具栏下的事件工具，添加一个事件。事件的属性是通过点击相应的图片跳转到相应的介绍页面。
第三步：
1、在滑动时间轴的轨迹里，背景一线的轨迹在0秒和10秒的时候各设置一个关键帧。0秒的关键帧坐标为（0,0）
2、第10秒的关键帧坐标为（0，-2390）
3、可以以相同的步骤设置其他十一个月份的图片属性
第四步：
在案例里，以六月的图片对象作为例子进行说明。
1、六月的图片对象在滑动时间轴里有两个轨迹，分别是Jun图片轨迹和3D对象透明按钮轨迹。
2、在0秒的时候，Jun图片对象处于舞台的坐标（20,730）处，点击Add按钮，在这里设置一个关键帧。
3、在0.8秒的时候，Jun图片对象往上移动，处于舞台坐标为（20,640）的位置，点击Add
按钮，在这里设置一个关键帧。
轨迹的自动播完属性设置为NO
4、对于3D对象透明按钮的轨迹，在0秒的时候，3D对象透明按钮在舞台（36，-125）的
位置，点击Add按钮，在这里设置一个关键帧。
5、在0.8秒的时候，3D对象透明按钮，处于舞台（36，-125）的位置，点击Add按钮，在这里再设置一个关键帧。
6、在1.95秒的时候，3D对象透明按钮需要在X轴上旋转-45度，所以在X轴旋转中设置-45
7、在“容器”透明按钮中，有一个辅助轨迹，它的自动播完属性设置为NO上面有11个关键帧
8、它是用来固定每张图片的状态，可以方便其他轨迹可以完成一些相对复杂的状态。案例里用11个关键帧作为每张图片翻转前的一个参照点。就是说关键帧上的每个张图都是X轴旋转为0的，例如第一个关键帧和第二个关键帧，
9、第一个关键帧七月图的X轴旋转为0
10、第二个关键帧六月图的X轴旋转为0。
在编辑其他月份的图片时，需要按照合适的距离排布在“容器”透明按钮里，在所对应的轨迹上设置关键帧，使得每张图片划过屏幕中间的时候，以X轴为中心旋转-45度角。
第五步：
给每张图添加一个二级页面，在点击每张图片的时候，都会跳转到相应的页面介绍。
1、选中舞台，点击工具栏下的页面工具，添加一个页面。
2、选中页面2，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张背景图片，右击图片对象，命名为大图1。
3、选中大图1对象，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一个图片对象，右击图片对象，重命名为返回按钮。
4、选中返回按钮图片对象，点击工具栏下的事件工具，添加一个事件。事件的属性设置为点击触发页面的跳转。
5、在案例中的页面3到页面13都是以页面2同样的方式和步骤进行设置，在每个返回按钮图片上所设置的跳转事件都是跳转到页面1的界面上。在每张图片的点击事件中，要注意点击跳转的页面是否跟跳转后的页面介绍内容相符合。
先行知识：
1、滑动时间轴的应用
2、初级教学篇中的技巧1-辅助轨迹案例
重点工具：
滑动时间轴、轨迹、辅助轨迹、透明按钮、视距、X轴旋转
知识点：
1.滑动时间轴的“自动跳转控制点”属性设为是，轨迹的“自动播完”属性也设为是，那么滑动时间轴自动跳转时，将忽略此轨迹上的所有控制点；换一句话说，当滑动时间轴下的运动轨迹设为自动播完时，滑动时间轴播放过程中，不会在该运动轨迹的任何一个控制点上暂停，此运动轨迹可以仅做设定对象运动轨迹使用，不影响滑动时间轴的跳转；自动播完选项仅对滑动时间轴有效，对时间轴无效。
2、轻触：用法与点击、手指按下相同，但是轻触动作可以与“手指按下”或“点击”的动作同时触发。当你使用滑动时间轴和面板的时候，对对象有点击的效果时，务必选择轻触，否则会引起冲突或功能失效。
相关事件：
触发对象：图片
触发条件：轻触手机
目标对象：舞台
目标动作：跳转页面
页面：舞台·页面2
触发对象：返回按钮，
触发条件：手指按下
按下时间：0
目标对象：舞台
目标动作：跳转页面页面：舞台·页面1
iH5高级教程：H5交互菜单，3D时间轴特效 在时间轴上的素材呈现3D的效果，手指在屏幕上滑动的过程中，图片以3D翻转的形式运动，超过屏幕或没有运动到屏幕中间的图片都是折叠的形式。下面我们讲述一下在案例中的3D时间轴动画。 第一步： 1、选中舞台，点击工具栏下的页面工具，添加一个页面。 2、选中页面，点击工具栏下的滑动时间轴工具，在舞台上画一个框，添加一个与舞台一样大的滑动时间轴。滑动时间轴的总时长设置为10秒，滑动方向为上 3、选中滑动时间轴，点击工具栏的下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为容器。 4、选中容器透明按钮，点击工具栏下的图片工具，在舞台里画出一个矩形，添加一张高度为3425的时间线图片，右击图片对象，命名为背景一线。
5、选中容器透明按钮，点击工具栏下的轨迹工具，添加一个轨迹，右击轨迹对象，命名为辅助轨迹。 6、选中背景一线图片对象，点击工具栏下的轨迹工具，添加一个轨迹。 7、选中背景一线图片对象，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张八月的图片。 8、选中八月的图片，点击工具栏下的文本工具，在舞台中画出一个矩形，添加两个文本对象。 第二步： 1、选中八月的图片，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一
个透明按钮，右击透明按钮对象，命名为3D旋转父对象。 2、选中八月的图片，点击工具栏下的轨迹工具，添加一个轨迹。 3、选中3D旋转父对象透明按钮，点击工具栏下的透明按钮工具，在舞台上画出一个矩形，添加一个透明按钮，右击透明按钮对象，命名为3D对象。设置的X轴旋转角度为-45 4、选中3D对象透明按钮，点击工具栏下的图片工具，在舞台上画出一个矩形，添加一张图片。 5、选中3D对象透明按钮，点击工具栏下的轨迹工具，添加一个轨迹。 6、选中图1，点击工具栏下的事件工具，添加一个事件。事件的属性是通过点击相应的图片跳转到相应的介绍页面。
时间轴特效的应用――漫天花雨 一、制作花朵元件 1.新建一个名称为“花朵”的影片剪辑元件。 插入—新建元件--影片剪辑，名称改为“花朵”。 2.绘制花朵。 第一步：选多角星形工具。 在元件编辑场景中，选择多角星形工具。单击“属性”面板中的“选项”，打开“工具设置”对话框。将“样式”设为“星形”，“边数”设为5，“星形顶点大小”设0.5。 单击“确定”按钮。 第二步：画五角星。 将笔触颜色改为无色，填充色改为任意颜色，在舞台上画一个无边框的星形。 第三步：将星改为花朵。 使用选择工具，鼠标移至星形的边沿，当指针变形为将星形的各边拉成弧形，使星形成为花朵状。 第四步：复制花朵。 按住ALT键不放开并拖动鼠标，将该花朵复制多个，并填充不同颜色。 第五步：进行多次复制。使用任意变形工具，框选这些花朵，并复制。在复制时使用【任意变形工具】改变大小和角度，还可以单独选中每一朵花重新填充你喜欢的颜色， 直到满意为止。 二、制作分离特效 1.返回到“场景1”。将“花朵”元件从“库”面板中拖放到舞台上。 2.执行“插入--时间轴特效--效果--分离”命令，在“分离”面板中，设置“效果持续
时间”为30帧，“分离方向”向下，“弧线大小”X为100象素，Y为300象素，“碎片旋转量”180度，其它数值不变，单击“确定”按钮。 3.单击右上角的“更新预览”，可以看到数值修改后的效果。如果对这个效果不满意，还可以修改数值，并再次更新预览。 4.最后单击“确定”按钮。稍等一会，分离效果出现了，在“库”里多了一个“分离1”元件和一个“特效文件夹”，图层名也自动改为了“分离1”。 三、组装动画 1.执行”文件--导入--导入到库”命令，将外部的图片（任选自己电脑中的图片）导入到“库”中。 2.在“场景1”中插入图层，改名为“图片”。删除“分离1”图层，将图片拖放到舞台上。在时间轴上删除第1帧以外的其它帧，这些帧是在刚刚制作“分离”效果时自动插入的。 （3）插入图层，改名为“分离1”。将“分离1”元件拖放到舞台下方。为了让花朵从不同方向出来，再放一个“分离1”元件在舞台上方，并执行【修改】|【变形】|【垂直翻转】命令，使两个元件相对而立。另外再拖入一个“分离1”元件斜放在舞台下方，并适当缩小，略加旋转。
案例1 用时间轴特效制作旋转的树叶。 【步骤1】在菜单栏中选择【文件】|【新建】命令，此时会打开【新建文档】对话框，选择一种要创建的文档类型，即可新建一个Flash文档。 【步骤2】如图13-2-2所示的为文档的【属性】面板，可以在该面板中设定文档的大小、背景色和播放的速度等。此时，采取默认的设置。 【步骤3】在菜单栏中选择【文件】|【导入】|【导入到舞台】，选择要导入的图像文件，点击【确定】后，图像显示在工作界面中，如图13-2-3所示。 图13-2-1 【新建文档】对话框 图13-2-2 文档的【属性】面板
【步骤4】在菜单栏中选择【插入】|【时间轴特效】|【变形/转换】|【变形】，打开如图13-2-4所示的变形对话框，输入旋转“360”度，点击【更新预览】预览动画效果。点击【确定】按钮。 【步骤5】返回工作界面，选择【控制】|【测试影片】命令，或者按Ctrl+Enter键，测试动画效果。如图13-2-5所示，导入的图片会旋转360度。 案例2 用时间轴特效制作鲜花的旋晕效果。 【步骤1】在菜单栏中选择【文件】|【导入】|【导入到舞台】，选择要导入的图像文件【案例】，点击【确定】后，图像显示在工作界面中。 【步骤2】在菜单栏中选择【插入】|【时间轴特效】|【效果】|【模糊】，打开对话框，保持默认设置，点击【更新预览】预览动画效果。点击【确定】按钮。 案例3 用时间轴特效制作爆炸的球。 【步骤1】在菜单栏中选择【文件】|【导入】|【导入到舞台】，选择要导入的图像文件【案例】，点击【确定】后，图像显示在工作界面中。 图13-2-4 【变形】对话框
【步骤2】在菜单栏中选择【插入】|【时间轴特效】|【效果】|【分离】，打开对话框，保持默认设置，点击【更新预览】预览动画效果。点击【确定】按钮。 案例4 创建跑步动画。 【步骤1】新建一个FLASH文档，选择“文件-导入-导入到舞台”命令，从外部文件夹导入跑步文件夹。 【步骤2】因为图片名称结尾以相邻数字命名的，所以系统会自动弹出对话框，提示是否导入所有序列文件。 【步骤3】关键帧被自动生成，按Ctrl+Enter键，测试动画效果。 案例6 创建贺卡。 【步骤1】新建一个FLASH文档，从外部文件夹导入案例，选择“文件-导入-导入到舞台”命令。 【步骤2】选中第1到第12帧，按F6键在第1到第12帧都插入关键帧。 【步骤3】在第一帧中使用文本工具输入文字“祝你永远开心舒心一切顺心”。 【步骤4】在第一帧中保留一个字，第二帧中保留两个字，顺序执行。 【步骤5】按Ctrl+Enter键，测试动画效果。 案例7 把gif动画文件转变为flash逐帧动画。 【步骤1】新建一个FLASH文档，在场景中右键单击，在弹出菜单中选择“文档属性”，设置帧速为25，文档大小设置为200X300背景颜色白色。 【步骤2】从外部文件夹导入，选择“文件-导入-导入到舞台”命令。 【步骤3】GIF文件作为连续帧被导入到舞台。 案例8 创建小车行驶的动画。 【步骤1】新建一个FLASH文档，选择“文件-导入-导入到舞台”命令，从外部文件夹
时间轴特效 时间轴特效（Timeline effects）是Flash MX 2004增加的一个新功能，这个功能有点类似Swish（一个功能强大的Flash特效字制作软件）。如果你经常要制作一些复杂而重复的动画，那么使用Flash内建的时间轴特效，可以为自己平淡的动画添加一些闪光的动感。 1．认识时间轴特效 在Flash MX 2004中，执行【插入】|【时间轴特效】命令可以看到Flash 内建的时间轴特效，共3种类型：变形/转换、帮助、效果。其中效果类型下包括4种具体时间轴特效，如图9-1-1所示。 图9-1-1 时间轴特效 在Flash影片中添加时间轴特效时，必须先在舞台上选中要添加时间轴特效的对象，然后执行【插入】|【时间轴特效】命令，将具体的某一种类型时间轴特效添加到这个对象上。如果你不选中对象，具体的时间轴特效命令将成灰色显示，处在不可用状态。 下面先制作一个阴影文字效果实例，通过这个实例让你初步掌握添加时间轴特效的方法。实例效果如图9-1-2所示。
图9-1-2 阴影字特效 制作步骤： （1）创建文字对象 步骤1 创建影片文档 在Flash MX 2004中新建一个影片文档，设置这个文档的舞台尺寸为320×200像素，其他都按照默认值设置。 步骤2 输入文字 使用【文本工具】在舞台中间位置输入“巧夺天工”4个文字（当然你可以随意输入文字内容）。在【属性】面板中设置一下文字的属性，完成后将文字调整到舞台的中间。 （2）添加时间轴特效 步骤1 添加投影特效 选择舞台上的文字对象，执行【插入】|【时间轴特效】|【效果】|【投影】命令，出现【投影】对话框。在这个对话框中我们可以设置阴影的颜色、透明度以及阴影于元件的距离，在右侧的窗口中可以看到设置后的效果，如图9-1-3所示。
第7章Flash 8基础与实例（2）—— 常见动画的制作 知识点： 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 学时分配：2学时 教学容： 1、逐帧动画的制作。 2、形状补间动画的制作。 3、动作补间动画的制作。 4、遮罩动画的制作。 5、引导路径动画的制作。 教学重点： 1、形状补间动画的制作。 2、动作补间动画的制作。 3、遮罩动画的制作。 4、引导路径动画的制作。 教学难点： 形状补间动画与动作补间动画的区别。 教学方法与手段：讲授法，多媒体展示 教学过程： （一）创设意境，导入新课（设疑法、提问法） 导入： 教师展示几个Flash实例，然后引导学生一个一个亲自动手制作。引入新课程： （二）新课教学（讲解法、提问法、示法、实验法）
本次课开始学习用Flash制作动画效果，在Flash中共有5种动画形式：逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导路径动画。 逐帧动画的制作 逐帧动画是一种常见的动画手法，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的容不同，连续播放而成的一种动画。 优点：与电影播放模式相似，适合于表演很细腻的动画，如3D动画、人物或动物急剧转身等效果。 缺点：每一帧的序列容都不一样，增加制作负担，文件存储容量过大。 一、逐帧动画的概念和在时间帧上的表现形式 在时间帧上逐帧绘制帧容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的容。 逐帧动画在时间帧上表现为连续出现的关键帧，如图7-3-1所示。 图7-3-1 逐帧动画 二、创建逐帧动画的几种方法 1．用导入的静态图片建立逐帧动画 用jpg、png等格式的静态图片连续导入Flash中，就会建立一段逐帧动画。 2．绘制矢量逐帧动画 用鼠标或压感笔在场景中一帧一帧地画出每一帧容。 3. 文字逐帧动画 用文字作帧中的元件，实现文字跳跃、旋转等特效。 4. 导入序列图像 可以导入gif序列图像、swf动画文件或者利用第三方软件（如swish、swift 3D等）产生的动画序列。 三、绘图纸功能 1．绘图纸的功能
第四、第五章创建动画 一、逐帧动画 迪士尼动画，每一帧都由设计者自己确定。 导入一张GIF动画(天使)，在FLASH里就变成逐帧动画，ENTER键，播放。 CTRL+ ENTER键，测试影片，并自动导出SWF播放文件 1、关键帧 黑色点叫关键帧(F6)， 白色点叫空白关键帧(F7)， 白色方格叫：帧(F5) 它是延续看见上一帧的内容。 例：比较：1、第一帧，画一红球，第10帧F5（插入帧），把红球油成绿球。 结果：第1—10帧都是绿球。(1~10帧只有一个球) 2、第一帧，画一红球，第10帧F6（插入关键帧），把红球油成绿球 结果：第一帧是红球，第10帧是绿球。(分别有两个球) 3、第一帧，画一红球，第10帧，F7（插入空白关键帧），没有球， 自己再画一个球（不能保证在原来的位置） 右键：可删除关键帧，也可以把帧转化成关键帧 2、时间轴的操作 移动动播放头，时间轴的选项：最右边按钮，调时间轴显示比例 复制帧、粘贴帧，洋葱皮（绘图纸）按钮、编辑多帧按钮例4-1：聚光灯 1、第1帧小老鼠A；第2帧小老鼠B 2、SHIFT键，选择第1帧和第2帧；复制帧 3、选择第3帧，粘贴帧 4、时间轴上灯箱的运用：“编辑多帧”按钮（不用一帧一帧地改）， SHIFT键选中第3、4帧一齐改向前移位置，再取消编辑多帧按钮，选“绘图纸外观”按钮：可看到1—4帧的模糊外观，调整老鼠的位置。重复 例4-2：打字 例4-3：画圆(最后一帧，整个圆，中间帧，擦掉一点，第一帧，一小段) 二、形状动画(绿色显示) 需要一个起始图象和一个终结图像。 注意：只能是用绘图工具画出来的，或打散的对象。要在同一层上。 1、操作：例：小球往下越掉越快
第七讲场景与时间轴特效动画 一、场景 1．增加场景与切换场景 在 Flash 影片中，演出的舞台只有一个，但在演出过程中，可以更换不同的场景。 (1)增加场景 (2)切换场景 2．“场景”面板的使用 单击“窗口”→“其他面板”→“场景”菜单命令，可以调出“场景”面板，利用该面板，可显示、新建、复制、删除场景，以及给场景更名和改变场景的顺序等。 (1)改变场景播放顺序 (2)新建场景 (3)重制场景 (4)删除场景 (5)更改场景名称 二、帧的基本操作 1．选择帧 编辑帧以前应先选中要编辑的帧。在时间轴中选中若干帧，然后单击右键，即可调出帧快捷菜单，常常需要使用帧快捷菜单中的菜单命令来编辑帧。选择帧的方法如下。 (1)选中一个帧 (2)选中连续的多个帧 (3)选中一个图层的所有帧 (4)选中多个连续图层的所有帧 (5)选中多个图层的所有帧 (6)选择所有帧 2．移动帧、复制帧和调整关键帧的位置 (1)调整关键帧的位置 (2)鼠标移动帧 (3)复制帧和移动帧 3．插入帧、删除帧和转换为关键帧 (1)插入普通帧：单击选中要插入普通帧的帧单元格，然后按 F5 键。这时就会在选中的帧单元格中新添加一个普通帧，该帧单元格中原来的帧以及它右面的帧都会向右移动一帧。 (2)删除帧：选中要删除的一个或多个帧，单击帧快捷菜单中的“删除帧”菜单命令。
(3)插入关键帧：选中要插入关键帧的帧，按 F6 键或单击帧快捷菜单中的“插入关键帧”菜单命令。 (4)插入空白关键帧：选中要插入空白关键帧的帧，按 F7 键或单击帧快捷菜单中的“插入空白关键帧”菜单命令。 (5)清除关键帧：选中要删除的关键帧，单击帧快捷菜单中的“删除关键帧”菜单命令。此时，原关键帧中的内容会被前面的关键帧内容取代。 (6)清除帧：选中要清除的帧，单击帧快捷菜单中的“清除帧”菜单命令，可将选中的帧中的内容清除，使该帧成为空白关键帧。 (7)转换为关键帧：选中要转换的普通帧，然后单击帧快捷菜单中的“转换为关键帧” (或“转换为空白关键帧” )菜单命令，即可将普通帧转换为关键帧(或空白关键帧) 。 三、时间轴特效动画 1．时间轴特效动画简介 时间轴特效是Flash 8 中内置的一组动画效果，可以通过执行时间轴特效来快速创建复杂的动画。时间轴特效有“变形”、“转换”、“分离”、“展开”、“投影”和“模糊”等特效。它们的操作步骤很简单。可以对文本、图形、图像和元件实例等对象应用时间轴特效。 当将时间轴特效应用于舞台工作区中的对象，创建完一个时间轴特效后，“库“面板中会自动添加一个与该时间轴特效同名的文件夹，它包含有该时间轴特效所用到的所有元素。当一个对象创建了时间轴特效后，Flash 将为这个时间轴特效创建一个图层，并将对象放置在该图层中，动画所用到的所有补间、变形等都在该图层中。 2．编辑时间轴特效 （1）选中有时间轴特效动画的图层，单击“修改”→“时间轴特效”→“编辑特效”菜单命令，即可调出相应的对话框。 （2）在调出的对话框内进行参数修改后，单击该对话框内的“确定”按钮，即可完成时间轴特效的编辑。 四、案例 案例1图像切换 “图像切换”动画的显示效果是先显示第1 幅图像，接着第 1 幅图像从左向右淡出涂抹，同时由不透明变为透明，逐渐将第 2 幅图像显示出来；然后第2 幅图像逐渐旋转、缩小、移出左上角，逐渐将第 3 幅图像显示出来。动画播放后的2 幅画面如图4-4-1 所示。通过本实例的学习，掌握使用“转换”时间轴特效功能制作动画的方法。该动画的制作方法如下。
一、时间轴特效 timeline.js 算法思路： 1、点击某个时间点，将该时间点上的li元素添加active类 2、去除上一个li上已添加的active类 语法步骤： step1：定义一个变量，记录当前已经添加active类的li的索引号step2：查找所有被点击的元素对象 step3：查找所有li元素对象 step4：为每个被点击的对象绑定单击事件 step5：为被点击的时间点li添加active类 step6：根据索引号变量的值，去除上一个li的active类 step7：将索引号变量的值更新为被点击的li的索引号timeline.js源码： window.onload = function(){ var //step1 curIndex = 0, //step2 timeLine = document.getElementById("timeline"), clickArea = timeLine.getElementsByTagName("s"), //step3 timePoint = timeLine.getElementsByTagName("li"); //step4 for(var i = 0,len = clickArea.length;i < len;i++){ (function( i ){ clickArea[i].onclick = function(){ //console.log( i );//测试 //step5 timePoint[i].className = "active"; //step6 timePoint[curIndex].className = ""; //step7 curIndex = i; }; })( i ); } };
上午突然有点灵感，做了一个火焰效果。看看，大家喜欢不？如果感兴趣。请认真看完此篇文章，这样你就能做出这种效果了。演示地址：https://www.doczj.com/doc/213379003.html,/taoshaw/study/fire_text 噢，如果你感兴趣。就搬个板凳坐起，慢慢看吧。很复杂的。呵呵。 1、新建影片，设置背景为黑色。帧频为50。这里不一定的。大小也不一定，根据你自己的TEXT的大小来。 2、新建一个元件。用于做字体。这里面的字体的制作过程比较复杂。大家要认真看哦。
3、选择静态文本框。设置字体、颜色等属性。当然这里也不固定。大家喜欢即可。而且以后我们还要设置 字的色相等。 4、然后在场景中，打上文本。如果你感觉文本不够大。可以使用自定义缩放工具来进行调节。 5、选择墨水瓶工具，然后设置属性。这里的线条粗细可以适当调大点。只要不过份就行了。呵呵。
6、然后给文本描上边框。 7、选择选择工具。把场景中的东东选中吧。。。 8、将线条转化为填充。这一步很关键的。只有这样，我们才能继续加边框。我们现的想法是让文本先出现 空心字的效果。如果有不懂的朋友这里要注意了哦。这样可以做空心字的效果哦。。。
9、继续选择墨水瓶工具，设置线条的颜色为红色了。只要跟刚才的线条颜色不一样即可。这样是为了好区 分。但建议选择跟文字的颜色一样。不是文字的边框哈。 10、描上边框。。 11、使用选择工具，将里面的黄色线条轻轻的删掉吧。
12、使用任意变形工具，调节一下大小吧。 13、我们这个时候，就可以使用填充桶工具对他们进行任意填充了。 14、假设我们现在的填充样式如下。 15、新建一个元件。把文本图形化。
flash学习的经典实例 Flash中关于圆的设计的探讨 实例详解flash中实例的属性 有趣！用Flash制作互动的小人 韩国导航条解析 黑客帝国数字流特效制作揭密 在Flash中制作漂亮的动感水珠 模仿物体高速运动的实例 模拟时空隧道的特效制作 流行手法--水纹banner的制作 Flash 3d效果精彩实例--方块扭曲 Flash 3d效果精彩实例--水晶球 Flash 3d效果精彩实例--动感球体 Flash 3d效果精彩实例--鼠标3D感应 Flash MX制作留言本 用Flash模拟"穿越时空" Flash中超酷的菜单的制作 光线特效文字的制作 全Flash网站制作剖析-3 全Flash网站制作剖析-2 全Flash网站制作剖析-1 Flash MX实战精选：汽车广告-2 Flash MX实战精选：汽车广告-1 Flash MX实战精选：放大镜效果
使用用Flash制作写意画-竹 音乐ON和OFF的制作 Flash loading精确百分比下载 制作齿轮旋转的动画 钢笔字的简单制作 马赛克效果的制作 图片组的连续滚动效果 打字效果的制作 流动的水面效果 Flash中的文字绕排效果 复杂字母变换效果 钟表的制作 Flash二级菜单的制作 用AS来实现飘雪效果动画 Flash视觉特效的制作 用Flash制作夜色雨景 鼠标悬停信息提示的制作 Flash动画的"遮丑"研究 灵动嘻哈势力街道部分制作教程 灵动嘻哈势力我的音乐间关键部分制作《灵动传说》源文件公开下载 《小和尚》系列制作全过程解析
Loading预载动画程序设计 用PhotoShop与FLASH做飘动的云 FLASH中实现眨眼睛的动画效果 精彩动态导航菜单制作详解 动态MC按钮的制作教程 用FLASH制作变幻的曲线 用FLASH AS实现鼠标画圆的效果 利用三角函数实现精彩效果 较酷的导航按钮的制作 FLASHMX2004制作缓冲滚动条效果 Flash枪战游戏基础制作 判断数字大小(小游戏)制作过程 flash游戏杀狗大赛制作 经典Flash源文件集锦-导航篇_韩式导航 Flash游戏制作：打砖块 经典Flash源文件集锦-导航篇 FLASH MX 2004制作缓冲断层效果 FLASH MX 2004制作放大镜效果 flash结合asp制作出的显ip,版本,登陆时间,访问次数自动滚动的文本框的制作 Flash制作马赛克效果 鼠标跟随的小球的制作
FLASH 界面及功能介绍 Flash 是Macromedia 公司专门为网络设计的一个交互性动画设计软件。Flash 自问世以来，在网页动画创作领域独领风骚，现在形成了一个特别的创作群体----闪客。Flash 不仅成为专业动画制作人员的主要工具，也深为广大业余爱好者喜爱。本书就是为业余Flash 爱好者所写的。 业余爱好者不同于专业人员，是一种休闲的学习，是工作之余生活的补充。所以本教材不象专业教材那样，让你先掌握Flash 动画理论和各种操作方法再去学习动画制作，而是以简洁的叙述和简单的动画开始，一步一步教你学些制作实例，根据实例讲解理论知识。这样将使你免除学习理论的枯燥无味感觉，学习起来轻松愉快。 虽然本教材前后章节都有联系，学习应先从前到后按顺序进行，但每节中都安排有独立的动画制作程序，有很少的时间就可以学一点、作一点，时间多了就多学习点，多试验一些，非常灵活。当然基础的东西掌握了以后，也领你进行一些专业知识的学习、脚本语言编程的学习等。就是说"业余"者也不只停留在业余水平上，以后也可登上专业的殿堂。 第一节第一次亲密接触FLASH 如果你还没有安装Flash，下面跟我一步一步学安装。 安装程序只有一个文件“Flash5.exe”，把它放到你的任何一个目录里都行(你也可放到桌面)，双击Flash5.exe，稍停一会，就出现“Welcome……(欢迎)”版面，点击“Next”继续，然后是让你接受他的“协议”——当然你要回答“Yes”啦，你要点击“No”就马上退出安装(有本事你自己试)，点击“Yes”后，出现的是安装路径，默认的是“C:\Program Files\Macromedia\Flash5”如果你不想安装这里(层次太深不好找啊)，可以点击右边的“Browse”(浏览)，自己选择个目录，再点击“Next”下一步，让你选择安装方式，照默认值吧，还点击“Next”下一步，他又问你怎么创建快捷方式，随他便吧，只管点“Next”，他又提示你是否安装Flash浏览器(当然要了)，只管还点“Next”，他又把你的选择重新显示一遍，你说看不懂就不看他吧，还点“Next”，啊——可算到安装文件的时候了，看着屏幕中间的黑条，在告诉你现在安装了百分之几，等到黑条跑到头，就完了，然后出现一个版面，问你是否读他的说明书，都是英文啊，如果你英语不好不读也罢。点击“Finish”完成了。把屏幕上的窗口都关闭吧。 拉开“开始”菜单，在“程序”里找到“Macromedia Flash5”的下级菜单“Flash5”，点击就开始第一次运行。 第一次运行出现个登记表，第一项“First/Initial/Last”就是要你填“姓、名、字”，第二项“Organization”你的单位，你随便填吧，没人去核实真假，第三项“Serial Number”序列数字要填准确，否则就不能运行。 运行FLASH.exe, 运行完后你就可以看到界面如下图：
模块四企业网站动画的制作 4.1 模块功能分析 根据网站建设方案，在与企业沟通、协调下分析设计网站宣传动画。 【能力目标】 ●能够根据网站布局要求选择合适的动画尺寸，分析设计网站宣传动画 ●能够根据不同的动画选择不同的元件 ●能够创建补间动画、引导层动画和遮罩效果 【知识目标】 ●认识帧（Frame）、时间轴、图层 ●熟悉图形元件、按钮元件和影片剪辑元件的不同用法 ●理解补间动画、引导层动画和遮罩效果的制作方法 【素质目标】 ●挖掘学生的创造力、激发学生的艺术设计能力 ●培养学生的沟通、合作能力 ●培养学生自我学习、解决问题的能力 4.2 模块任务实施 任务1 企业宣传动画的制作 一任务分析 根据需求方提出的设计要求和沟通，确定了网站的Banner条采用Flash设计制作，以达到增加页面动态效果和美化页面的效果。 二任务实施 步骤1新建一个Flash文档，命名为“banner.fla”，设置【属性】面板中的文档大小属性为宽900像素、高260像素，如图所示 图文档属性 步骤2选择【文件】|【导入】|【导入到库】菜单选项，在打开的对话框中选择需要导入的素材文件“banner-1.jpg”和“xiaotu.gif”两个图片，单击【确定】按钮，此时素材导入
到库中，如图所示。 图库面板 步骤3 将“banner-1.jpg”拖动到舞台中，调整其大小使其覆盖整个舞台。 步骤4 单击【时间轴】面板下方的添加新图层按钮，添加【图层2】。 步骤5 鼠标单击【图层2】的第一帧，然后选择工具箱中的【文本】按钮，在打开的【属性】面板中，设置【字体】为“华文楷体”，【字体大小】为“53”，【字体颜色】为“#003300”。步骤6 在舞台中输入“选择森兴选择品质”这8个文字。 步骤7 选中文字，选择【修改】|【分离】命令，文字被打散。效果如图所示。 图分离文字 步骤8 选择【图层1】的第40帧，插入一个普通帧。按住【CTL】键，选中【图层2】的第1帧、第5帧、第10帧、第15帧、第20帧、第25帧、第30帧、第35帧、第40帧，插入一个关键帧。 步骤9 选择【图层2】的第1帧，按下【Delete】键删除所有的文字。 步骤10 选择【图层2】的第5帧，删除“择森兴选择品质”这7个字。 步骤11选择【图层2】的第10帧，删除“森兴选择品质”这6个字。 步骤12 同理设置【图层2】的第15帧、第20帧、第25帧、第30帧、第35帧、第40帧上的文字。 步骤13单击【时间轴】面板下方的添加新图层按钮，添加【图层3】。单击【图层3】的第一帧，从【库】面板中拖入“xiaotu.gif”,选中图片，按下【F8】将其转换成图形元件。步骤14 单击【图层3】的第40帧添加关键帧；在【变形】面板中设置第1帧图形为“10%”，在属性面板中设置【颜色】为“alpha”值为“20%”，如图所示；在【变形】面板中设置第40帧图形为“100%”，在属性面板中设置【颜色】为“alpha”值为“70%”；在第1帧和第40帧之间添加【补间动画】；至此动画设置如图所示。
01】新建一个电影文件，在电影属性面板中设置尺寸为350*70，背景颜色为蓝色，帧频率为4FPS。 02】在时间轴上双击“图层1”,将其命名为”文字背景“层。 03】在工具箱中选择“文本工具“，在其属性面板中设置字体为”隶书“、字号”18“、颜色为”白色“，最后在场景中输入”制作文字打印效果！“ 04】在时间轴上单击“插入图层“按钮，新建一个图层，命名为”遮罩“。单击工具箱中的” 矩形工具“按钮，在场景中绘制一个不同于背景颜色的矩形，尺寸略大于一个文字，然后将其移动到文本起始去。 05】单击“文本背景“层第15帧，按”F5“键插入相同帧。单击”遮罩“层第15帧按” F6“键插入关键帧，在舞台中选择矩形，再单击右键选择”任意变形“命令，此时矩形四周出现控制手柄，拖动右侧的控制手柄将其放大一直到覆盖上所以文本。 06】单击第1帧，在帧属性面板中的“补间“选框中选择”形状“。 07】在时间轴窗口上选择“遮罩“层，单击右键选择”遮罩层“命令，将此层设置为遮罩层，” 文字背景“层即将被设置为”被遮层“。 08】为使“打印效果“更加逼真，可以再添加一层制作一个”光标“。在时间轴上单击”插入图层“按钮，新建一个图层并重命名为”光标“层。 09】按“CTRL+F8“快捷键执行”新建元件“命令，创建一个名称为”光标“的”图形“元件。 10】在元件编辑模式，使用工具箱中的“直线工具”绘制一条白色的，长度相当于一个文字的细线。 11】单击时间轴下方的“场景1“图标，进入场景编辑模式。 12】在时间轴上的“文字背景”层与“遮罩”层上分别单击“解除锁定图层”按钮。 13】单击“光标“图层第1帧，按”CTRL+L“快捷键打开库面板，将”光标“元件拖到场景中文本开始处的下方。 14】在“光标“层第15帧插入关键帧，然后将”光标“移动至文本末尾。 15】在“光标“层第1~15帧中的任意帧上单击右键，选择”创建补间动画“命令。 16】按“CTRL+S“键保存文件，按：CTRL+ENTER”键测试动画效果。
photoshop中的时间轴制作动画效果 翼狐网：https://www.doczj.com/doc/213379003.html,/ photoshop通常被我们用来修图抠图，处理照片，其实，它也可以被用来制作动画效果，photoshop中的时间轴就是制作动画效果的关键工具，今天从时间轴面板的基础知识开始做一个详解。 5种类型的图层 从零开始带你认识PS的时间轴工具，附超简单的动画实例，十分钟就可以学会，来收！ 我们首先要了解的是PS有5种类型的图层按顺序依次为像素图层、调整图层、文字图层、形状图层以及智能对象。而对应的时间轴里面，各种类型的图层都有对应时间轴的动作属性，如图所示：
可以得知所有的动作属性有：位置、不透明度、样式、图层蒙版位置、图层蒙版启用、变换、文字变形、矢量蒙版位置、矢量蒙版启用。 时间轴的基本面板参数
位置：单纯控制图层对象在画布的移动。（该参数动画对位图图层有效，矢量图层则需要启动矢量蒙版位置才会产生移动动画效果）。像素图层中元素移动的位置，也可以理解成位移，它不包含旋转和缩放，并且对形状图层无效。 演示动画： 不透明度：是控制图层对象的整体透明度。图层的透明度，而调整填充则无效。 演示动画：
样式：图层样式，产生动画的是各种样式参数变化（即颜色、角度、大小、不透明度等参数）。控制图层对象样式效果。图层样式是可以产生很丰富的动画效果，除了简单的外发光、内发光、投影等基本动画效果，里面的图案样式更可以应付重复的背景场景，如飘雪，流星等效果。 演示动画： 图层蒙版位置：使用蒙版的时候蒙版位置与蒙版启用一起使用。图层蒙板位置具有控制动画效果范围的作用。矢量蒙板位置则控制矢量图层对象的移动。 矢量蒙版位置：形状图层中元素移动的位置。 演示动画：
4.2. 5.3 FLASH 动画制作 Flash 是一个矢量图形和交互式动画的制作软件。其强大的图形和动画功能可以制作开发出多种适用于教学课件中使用的形象生动的动画效果；内嵌的ActionScript 语言可以在 Flash 动画中实现交互、数据处理以及其他多种程序功能，可以让高级开发人员编制复杂的flash 应用程序。Flash 不仅可以直接应用于交互式教学课件开发，而且也可设计成教学积件在专业多媒体课件制作软件Authorware 和Directory 以及Frangpage 中被导入。 Flash 的编辑对象主要是矢量图形，Flash 只需用少量的矢量数据便可描述相当复杂的对象，如此大大减少了文件的数据量，使其在网络上的传输速度大大提高，也是网络型课件编写有用的工具。 1、Flash 基础 一）Flash 8.0界面介绍 Flash 8.0的默认界面包括：菜单栏、工具栏、舞台、时间轴窗口、属性面板、颜色面板、库面板以及动作面板等，如图4-155 所示。 图4-155 Flash 8.0程序界面 （1）舞台 舞台是Flash 动画中各个元素的表演平台，用于显示当前选择的帧的内容。 （2）场景 就像戏剧可以有几幕一样，舞台上也可以放下几个场景。舞台场景可以通过位于舞台右上部的场景切换按钮切换。通过不同的场景之间的交互性，来创作出结构较为复杂的课件。 （3）时间轴窗口 时间轴窗口用于对Flash 的两个基本元素“层”和“帧”进行操作。最重要的成分是帧、层和播放头。时间轴控制窗口分为左右两个区域，它们分别是和时间轴控制区与层控制区域。 （4）动作面板 动作面板可以创建和编辑对象或帧的 ActionScript 代码。 （5）库面板 在Flash 里，素材库窗口起着存放、组织管理动画基本元素的作用。使得更容易对这些元素进行查找工具面板 菜单栏 属性面板 时间轴窗口 舞台 颜色面板 库面板 动作面板
第五届全国ITAT教育工程就业技能大赛预赛试题 Flash动画设计 一、单选题（共计60题） （1）下列关于矢量图形的描述，错误的是（）。C A、在编辑矢量图形时，可以修改描述图形形状的线条和曲线的属性 B、可以对矢量图形进行移动、调整大小、重定形状以及更改颜色的操作而不更改其外观品质 C、矢量图形特别适合于表现形状复杂、细节繁多、色彩丰富的内容，例如照片 D、矢量图形与分辨率无关，这意味着它们可以显示在各种分辨率的输出设备上，而丝毫不影响品质 （2）使用如下的Actionscript语句， function Mid（x, y）{ return （x+y）/2; } var x1 = 100; var y1 = 200; var x2 = 300; var y2 = 400; _root.lineStyle（2,0）; _root.moveTo（Mid（x1, x2）,Mid（y1, y2））; _root.lineTo（Mid（y1, y2）,Mid（x1, x2））;产生的效果是（）。B A、 B、
C、 D、 （3）让影片在播放过程中自动停止，可以（）。A A、将Actionscript语句stop（）;绑定到关键帧 B、将Actionscript语句gotoAndStop（）;绑定到图形 C、将Actionscript语句gotoAndPlay（）;绑定到按钮 D、将Actionscript语句play（）;绑定到影片剪辑 （4）在Flash中，如果要选取所有层中的所有对象，那么可以（）。A A、在按住“Shift”键的同时进行选取 B、选择菜单栏中的“编辑→时间轴→选择所有帧”命令 C、选择菜单栏中的“视图→选择所有帧”命令 D、在时间轴上点击帧 （5）假设有如下Actionscript语句： var N:Array = new Array（21, 30, 15, 26）; var M = N[0]; for （var i = 1; i
flash图片切换效果:Flash 图片轮换效果 疯狂代码 https://www.doczj.com/doc/213379003.html,/ ?:http:/https://www.doczj.com/doc/213379003.html,/Flash/Article59249.html 这里图片轮换效果跟新浪那种不太样整个代码都是笔者自己写而且后来下了源码发现里头做法跟笔者也不尽相同它那里基本上是用Interval控制转换特效很多是用纯AS写出来而笔者做那个基本上是时间轴控制特效也不是纯AS从规范标准和运行效率来说新浪那个更接近规范标准语言运行效率更高从制作方便性和直观性来说笔者那个制作起来更为方便更为直观对于不是员出身Flasher来说笔者这个更好理解 考虑到AS也趋向于规范标准性笔者前段时间也用纯AS2.0类把这个轮换效果写成了组件但是笔者多类编程思想还不很了解导致贻笑大方故本篇文章就先介绍笔者这个时间轴版轮换效果制作过程 整个流程: 1、 该图像列表是读XML故第步先读取并分析XML把相关信息存于里头该分析是时间轴第部分 2、 分析到XML以后根据图像源把所有图片先载入到swf在图片切换过程中不允许有图像消失现象或者延迟现象出现图片是通过用遮罩效果把新张覆盖掉旧张来 实现切换因此需要有 3个图层:个放旧图片个放新图片其中新图片被遮罩为了不让切换时图像有不可见现象或者出现延迟加载时放旧图片和放新图片MC里头都要先载入所有图像然后通过设置可见性来显示相应图像 这是时间轴第 2部分 3、 然后将有比较长段时间轴这个其实就是图片轮换延迟时间 4、 此时就要进入下轮切换了这里可以通过attachMovie或者duplicateMovieClip放入个载入所有图MC但可惜是这么做需要重新loadMovie故不可取或者通过交换深度来实现不过每次交换深度也很麻烦要重新设置遮罩在这里笔者将利用人眼睛错觉来方便实现这过程 具体做法如下: 这切换过程完成了个周期结束