flash as3教程:成功实现鼠标尾随炫舞线条动画效果

更新时间:15-11-02 23:11 热度:344
 

  本例为flash as3代码基础实际的例子教程,用flash as3成功实现鼠标尾随炫舞线条动画效果,教程主要绍介工具的使用、颜色的使用以及补间式样的制造,但代码局部未作解释,期望能给朋友们带来帮忙。

  效果演习:

  本教程是flash创编的基础教程,主要是工具的使用、颜色的使用和补间式样的制造,代码局部不作解释。

  敞开flash,设置文档属性尺寸:宽1024 高768 环境:黑色,其他默许,取名保存到磁盘。

  1、新建图形元件1,选鸭子蛋圆工具,笔触严禁,补充色白的颜色,画一个5*5的圆(拖动鼠标的同时按住shift键可绘制正圆)。按ctrl+k组合键,敞开对齐面板,选水准中齐,铅直中齐。

15110223113471811663138 flash as3教程:成功实现鼠标尾随炫舞线条动画效果

图1:对齐面板

  2、新建图形元件2,选鸭子蛋圆工具,笔触严禁,补充放射逐渐变化,左ffcc00,右fffae6,画一个5*5的圆。水准中齐,铅直中齐。

  3、新建图形元件3,选直线工具,在属性面板中设置笔触高度为1.5 ,笔触线性逐渐变化,左f70000,右ffffff,补充色严禁,长度恣意。用挑选工具和局部选取工具,把直线调试成~形。左对齐,上对齐。 

15110223113484341949249 flash as3教程:成功实现鼠标尾随炫舞线条动画效果

图2:图形元件曲线

15110223113490680947160 flash as3教程:成功实现鼠标尾随炫舞线条动画效果

图3:设置颜色

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

151102231135091734315 flash as3教程:成功实现鼠标尾随炫舞线条动画效果

图4:设置直线逐渐变化

  5、新建图形元件5,选长方形工具,笔触严禁,补充色白的颜色,画一个3*3的正方。水准中齐,铅直中齐。 准备办公完成,着手制造。

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

  7、新建影片儿剪接元件,名mouseeff,选中图层1的第1帧,按ctrl+l组合键,敞开库面板,把图形元件1拖入戏台,选中元件,按ctrl+b组合键把图形打散,成麻点状。按ctrl+k组合键,敞开对齐面板,水准中齐、铅直中齐。选中时间轴34帧,插进去关键帧,在属性面板中设置宽高为59,选中圆敞开颜色面板,设置公开度为0。回返第1帧,设置宽、高为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, 选中第1帧,敞开库面板把图形元件3拖入戏台,打散,选中图形在属性面板中点宽高左面的锁,锁定宽高,设置宽为463按tab键半自动设置高。x:0 , y:0 ,敞开颜色面板,选中红色滑块,设置公开度为20 。

1511022311354647177893 flash as3教程:成功实现鼠标尾随炫舞线条动画效果

图5:设置公开度

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

15110223113525052406537 flash as3教程:成功实现鼠标尾随炫舞线条动画效果

图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导出。

15110223113528171905493 flash as3教程:成功实现鼠标尾随炫舞线条动画效果
图 7:属性链接

15110223113545357635181 flash as3教程:成功实现鼠标尾随炫舞线条动画效果
图8:影片儿剪接时间轴

  9、回返场景1,敞开库面板把影片儿剪接遮片拖入戏台,设置宽1024 ,高768 ,水准中齐,铅直中齐。在颜色的下拉点菜单入选色调,设置成黑色。在文档类:输入框中输入 test。

1511022311355624366960 flash as3教程:成功实现鼠标尾随炫舞线条动画效果
图9 

  到此,动画局部已所有完成,保留。附件涵盖fla文件和test类文件,解压后把test文件复制到保留动画文件的同一目次下,施行测试。用flash as3成功实现鼠标尾随炫舞线条动画效果的制造办法是不是很简单,有兴致的朋友也可以自个儿试验做做,期望大家喜欢!