Flash制作粉嫩的花瓣随风舞动

  知识点:

  a、渐变色,形变动画应用

  b、元件as标识符

  c、attachMovie应用

  d、movieClip各项属性使用

  e、滤镜应用



  应用分析:

  本题最初是帮助朋友做个视觉效果,做朵花开放效果出来分析花是由片片花瓣组成做完每片花瓣伸展动画然后复制若干个这个动画让其环绕圈播放那么就可以形成层花瓣绽放效果然后做多层这种效果最终就可以形成朵花效果注意必须使用flash8.0以上播放器

  那么问题很简单首先要做花瓣

  建立个空MC命名为"huanban01"用钢笔工具画个花瓣注意花瓣轮廓要使用绿线而花瓣内要使用中心渐变色填充花瓣大小控制在长度100象素左右注意该花瓣元件定义点中心应该在花瓣根部(这是为了将来复制时候花瓣可以根部为中心进行环绕)参见图pic01.jpg:

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动

  在1-30帧的间个花瓣伸展动画其实就是在第1帧把花瓣缩小然后用形变动画让其放大参见图pic02.jpg:

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动

  在30-160帧的间个花瓣轻微舞动效果也很简单只是让花瓣外形稍微有点变化即可你也可以做比如30-400帧的间多做几个关键帧在最后帧上加上as:

  gotoAndPlay(30);

  这样花瓣在轻微舞动的后会跳回到30帧继续舞动这样个花瓣便完成了你可以把这个元件拖到场景中观看下播放效果

  每个花瓣形状不可能因此我们有必要多做几个花瓣你可以重复上述步骤做出"huanban02""huanban03"让它们外形和"huanban01"有所区别轻微舞动频率也有所区别

  接下来我们需要把元件库里这几个花瓣加上标识符以便将来元件库里鼠标右键点元件"huanban01"在菜单里选择"链接...”弹出对话框勾选“为actionscript导出”“在第帧导出”然后在标识符栏里写上"huanban01"点确定参见图pic03.jpg:

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动

  "huanban02""huanban03"样加上标识符注意元件标识符是唯不可重复个元件加上标识符的后运行时就可以将他们随时出来使用了

  下面需要做层花瓣新建个MC命名为“花瓣层1”帧上大概参见图pic05.jpg:

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动

  在第1帧里写上:

  quan=random(3)+10;
  n=1;
  quan这个变量是用来计算该层花瓣共有多少个如果写quan=10那么该层花瓣就共有10片random(3)是个随机作用是随机生成0-2随机整数那么quan实际值应该为10-12随机整数n=1是计数器不赘述在第2帧里写上:
  for (i=1;i<=quan;i) {
   temp=random(3)+1;
   this.attachMovie("huaban0"+temp,"huaban"+n,n)
   lik=this["huaban"+n]
   lik._rotation=360/quan*i+random(10)-5;
   lik._alpha=random(10)+60;
   lik._xscale=random(20)+100;
   lik._yscale=random(20)+100;
   temp=random(2);
   (temp0) {
   lik._yscale=-lik._yscale;
   }
   n
  
  }
  this.attachMovie("huaban0"+temp,"huaban"+n,n) 作用就是随机从库里抽出"huaban01","huaban02","huaban03"元件命名为,"huaban"+n例子复制到本元件内
  
  lik=this["huaban"+n]是用lik变量锁定该复制例子方便后面操作
  lik._rotation=360/quan*i+random(10)-5; 作用就是把花瓣环绕分布+random(10)-5是为了让花瓣旋转角度有定偏差不至于太平均
  lik._alpha=random(10)+60;作用是让花瓣透明度在60-70的间取随机值
  lik._xscale=random(20)+100;作用是让花瓣长度在100%到120%的间取取随机值
  lik._yscale=random(20)+100;作用是让花瓣宽度在100%到120%的间取取随机值
  temp=random(2);
   (temp0) {
  lik._yscale=-lik._yscale;
  }


  以上语句作用是随机让花瓣以中轴进行翻转n;计数器+1在第90帧写上:

  stop;

  如此该层花瓣已经完成可以把该MC拖入场景观察效果

  花是由多层花瓣组成因此有必要多做几个可以把上面“花瓣层1”元件复制若干个修改其中参数让其生成花瓣数目长短透明等等有定区别分别拉入场景

  源文件下载: test05.rar

  此时基本已经完工下面需要做是组装花朵新建个MC命名为“花”按下图所示分别将几个花瓣层组件分配到区别层中将他们叠放在最后在最上层放个中心点(你也可以放个花蕊什么)参见图pic04.jpg:

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动

  将本元件拖入场景总播放效果大致如test06.swf所示:

  源文件下载: test06.rar

  这时花看起来还比较平面化缺少细节因此我们需要给花增加效果让其看起来更丰富首先进入“花”组件中给每层花瓣都增加两种滤镜分别是投影和发光大致设置如下参见图pic06.jpgpic07.jpg:

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动

  然后进入场景中给“花”组件也增加种滤镜“调整”颜色大致设置如下参见图pic08.jpg:

Flash制作粉嫩<img src='/icons/65740de.gif' />花瓣随风舞动



  经过这样花朵效果就丰富很多了大致效果如test07.swf所示:

  源文件下载: test07.rar

  教程后研究题:

  1、为什么非要在每个“花瓣层”上增加投影和发光如果只在“花“组件上增加这两种滤镜效果会如何?

  2、有没可能再做花瓣凋零效果?

  3、如果想做花蕊可不可以用类似思路方法来做?



Tags: 

延伸阅读

最新评论

发表评论