Flash AS3打造鼠标跟随炫舞线条动画效果

 

  本教程是Flash创作的基础教程,主要是工具的运用、颜色的运用和补间形状的制作,代码部分不作讲解。

  打开Flash,设置文档属性尺寸:宽1024 高768 背景:黑色,其它默认,取名存盘。

  1、新建图形元件1,选椭圆工具,笔触禁止,填充色白色,画一个5*5的圆(拖动鼠标的同时按住Shift键可画出正圆)。按Ctrl+K组合键,打开对齐面板,选水平中齐,垂直中齐。


  图1:对齐面板

  2、新建图形元件2,选椭圆工具,笔触禁止,填充放射渐变,左ffcc00,右fffae6,画一个5*5的圆。水平中齐,垂直中齐。

  3、新建图形元件3,选直线工具,在属性面板中设置笔触高度为1.5 ,笔触线性渐变,左f70000,右ffffff,填充色禁止,长度任意。用选择工具和部分选取工具,把直线调整成~形。左对齐,上对齐。


  图2:图形元件曲线


  图3:设置颜色

  4、新建图形元件4,选直线工具,在属性面板中设置笔触高度为1.5 ,笔触线性渐变,左ffffff,中0033ff,右ff0000,填充色禁止,画一条长度100的直线。水平中齐,垂直中齐。


  图4:设置直线渐变

  5、新建图形元件5,选矩形工具,笔触禁止,填充色白色,画一个3*3的正方形。水平中齐,垂直中齐。 准备工作完成,开始制作。

  6、新建影片剪辑元件,名遮片,选矩形工具,笔触禁止,颜色任意,画一个长方形,在属性面板中设置宽为1044,高为570, X,Y坐标为0。

  7、新建影片剪辑元件,名MouseEff,选中图层1的第一帧,按Ctrl+L组合键,打开库面板,把图形元件1拖入舞台,选中元件,按Ctrl+B组合键把图形打散,成麻点状。按Ctrl+K组合键,打开对齐面板,水平中齐、垂直中齐。选中时间轴34帧,插入关键帧,在属性面板中设置宽高为59,选中圆打开颜色面板,设置透明度为0。返回第一帧,设置宽、高为1,右键点击1—34的任意帧在下拉菜单中选创建补间形状(拖动一下播放头,看一下,一个从小到大的渐隐效果已经做好了)。选中35帧插入空白关键帧,选55帧插入关键帧,打开库面板把图形元件5拖入舞台,打散图形,设置宽高为3.0 ,x:294 y:109 ,选73帧插入关键帧,设置宽高为1.0 ,x, y为0, 右键点击任意帧,选创建补间形状。选中73帧按F9键打开动作面板输入代码:

  this.parent.removeChild(this);

  stop();

  图层1上锁,防止误操作。

  8、插入图层2, 选中第一帧,打开库面板把图形元件3拖入舞台,打散,选中图形在属性面板中点宽高左边的锁,锁定宽高,设置宽为463按Tab键自动设置高。x:0 , y:0 ,打开颜色面板,选中红色滑块,设置透明度为20 。


  图5:设置透明度

  选中13帧插入关键帧,在属性面板中锁定宽高,设置宽为100 ,设置红色为100,在21帧插入关键帧,选任意变形工具,把中心点拖到注册点位置,向左旋转110度左右。


  图6:旋转角度

  22帧插入关键帧打开库面板,拖入图形元件2打散, 设置宽高为23 ,x:-80, y:0.5 。24帧插入关键帧,设置宽高为20。25帧插入关键帧,打开库面板,拖入图形元件4打散,水平中齐、垂直中齐。26帧插入关键帧,向下作10度左右的旋转,54帧插入关键帧,做垂直旋转。设置宽为0 ,高为5 ,x:295.5 , y:112.5。选1—13、13—21、21—24、24—26、26—54, 创建补间形状。图层上锁,打开库面板右键点击MouseEff影片剪辑,下拉菜单中选链接,在链接属性面板中,选中为ActionScript导出。


  图 7:属性链接


  图8:影片剪辑时间轴

  9、返回场景1,打开库面板把影片剪辑遮片拖入舞台,设置宽1024 ,高768 ,水平中齐,垂直中齐。在颜色的下拉菜单中选色调,设置成黑色。在文档类:输入框中输入 Test。


  图9

  至此,动画部分已全部完成,保存。附件包括fla文件和Test类文件,解压后把Test文件复制到保存动画文件的同一目录下,进行测试。

 

时间: 2024-09-28 10:23:29

Flash AS3打造鼠标跟随炫舞线条动画效果的相关文章

JS实现超炫网页烟花动画效果的方法

 这篇文章主要介绍了JS实现超炫网页烟花动画效果的方法,实例分析了javascript实现烟花动画效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht

JS实现超炫网页烟花动画效果的方法_javascript技巧

本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

flash实例-打造鼠标触发火焰特效

本教程为大家介绍使用Flash CS5制作鼠标触发的焰火飘落互动特效,主要是用计算鼠标跟随对象来产生具有一定规律的星火特效. 思路:导入背景素材,然后制作出焰火飘落特效.创建文档类,产生鼠标跟随的多角星形特效;创建元件类的扩展类,产生随机大小的火花效果. 用鼠标在画面上划过,即可看到绚丽的互动特效 一. 制作焰火飘落特效 (1)新建一个大小为500×300像素,帧频为30fps的空白文档.按Ctrl+R组合键导入西湖夜景.jpg"文件,然后设置其坐标为(0,0),如图1所示,再采用前面的方法在&

Flash制作文字鼠标跟随

跟随|鼠标 如何制作文字鼠标跟随?其实只需要几句AS就可以完成. 在第1帧中加入如下代码: aiyi_text = "闪吧 WWW.FLASH8.CN "; //定义文字变量,也就是要跟着鼠标走的字 i_len = i_text.length;//计算文字的总长度 n = 0;//下面的as做用是:把i_text用substr字符串截取函数,分别放入到新建的mc中. while (n<i_len) { _root.createemptymovieclip("it&quo

flash简单制作鼠标跟随文字教程

 1.首先新建一个Flash文档: 2.在背景上写好显示的字,属性颜色自己调好. 3.连续按两下CTRL+B,把文字分离成一个图形.(以免有字体丢失) 4.选好移动工具后指着文字右键将文字转换为:影片剪辑转换为元件 5.在属性面版把实例名称改为: mc 6.从库里把元件拖到背景外的地方 7.新建一个图层2 8.选定图层2,点动作 9.再在动作里面写脚本如下: _root.onLoad = function() {  for (var i = 1; i<=20; i++) {  _root.mc.

Flash AS3实例教程:快速制作烟雾动画

本例利用flash快速制作烟雾动画,主要利用AS3的类来实现.   首先我们在Photoshop中制作一个烟雾的照片,这里主要使用Photoshop的画笔来实现. 图1 图2 图3 之后我们导进到FLASH中来,然后转变为影片剪辑原件,命名为smokepuff.之后我们打开库,然后右击该元件,设置链接. 图4 然后编辑种别,代码如下. package com.asgamer.graphics { import flash.display.BlendMode; import flash.displ

Flash实例教程:图片不间断滚动动画效果

  1. 首先准备要滚动的图片,将几张图片导入到flash库中,分别在库中右击它们,选择属性,将"使用导入的JPEG品质"前的钩去掉,这样文档的体积会小很多. 点击 插入>新建元件,新建一图形元件,将库的图片拖到舞台上,首尾相接拼好. 2. 回到主场景,将图片元件拖到舞台上,打开对齐面板,选择相对舞台,左对齐,垂直居中对齐. 3. 在第101帧插入关键帧,将图片水平移到左面刚好舞台之外,使图片元件的右边与舞台的左边对齐. 4. 创建补间动画.选择第一帧,在图片元件上点右键>

PS教你绘制3个效果酷炫的GIF动画效果

  类似Loading 的 动画 Step 1 -- 画圆环 新建一个500px(以下出现的所有数值可以自定义不用完全照搬)的默认画布,并用椭圆工具(填充无,描边30,色值#f2f2f2)画一个正圆环,然后调出时间轴并且创建时间轴动画. Step 2 -- 圆环渐变 给圆环上色,技巧也就在这里.首先我们分析颜色的变化是从无到有,再从有到无.利用图层样式的渐变,可以实现这个效果(事实上利用图层样式实现的动画实在是太多了并且太好用了).在时间轴的第一帧位置打开样式动画的关键帧开关,调出图层样式勾上渐

鼠标响应显示图片的动画效果

在三联教程这个学习网里,将和大家分享一下,如何应用一些简单的方法,就可以做出一个非常酷的鼠标响应显示图片的动画效果. 1.在这里我们只要新建一个actionscript 2.0文档就行了.接下来我们新建一个300*360象素大小的文档,帧频为12fps. 2.使用矩形工具画出一个带有白色边框的矩形,大小为300*300px;接下来,我们选择右击鼠标,在弹出的菜单选择"转换为元件"转换成"影片剪辑",名字可以随意命名.但是要注意一点,其属性的命名:"view