案例1:用Flash CS工具制作进度条

大多学习AS的人都是从使用Flash CS工具开始的,那么在熟悉了CS工具的方法之后我们来看以下一个非常基础的例子——进度条。
   先一起看看最终的结果吧:http://www.iamsevent.com/upload/LoadingProcessBarH.swf
   首先新建一个元件(我们就叫他yuan吧),在此元件第一帧上画一个圆(圆心尽量对准中心注册点哦),然后将此帧复制在第40帧上,并在此帧上把刚才画的圆选中,调整其Alpha值为0(在CS工具的PROPERTIES窗口的COLOR EFFECT中将Style下拉框选到Alpha即可)。右击第一帧和第40帧间任意一帧,选择Create Classic Tween(创建经典补间),此时我们可以看到在第一帧和第40帧间出现了个箭头,将鼠标选中第一帧后按回车间进行播放就可以看到我们创建的小球渐渐变暗直至消失了。
    <ignore_js_op>1jpg.jpg 
   好了,第一步创建组件的任务完工,之后,我们需要为库中刚刚创建的yuan这个元件设置属性,让它导出为ActionScript类,为什么必须导出为ActionScript类呢?因为我们在接下来需要在舞台上放置许多这个圆形的元件。那么在FLash CS工具中创建元件的方法有两种:
1,手动拖拽库中的某个元件到舞台上,需要创建几个就拖动几次
2,使用ActionScript代码来创建元件,可以使用循环语句来“自动”创建任意多的元件,且可以显式地指定其属性
那么为了凸显我们程序员的优越性,凸显我们比那些设计人员更加牛逼的地方何在,我们需要选择使用第二种方式来创建元件。右键点选我们刚才创建的位于库中的名为yuan的元件,在弹出菜单中选择“属性”,勾选“导出为ActionScript”单选框并为其指定类名为yuan,如下图所示:
<ignore_js_op>1.jpg 
   这样就为我们这个yuan元件设置了一个“标示符”:yuan,让它在ActionScript动作代码中可以通过这个“标示符”来进行元件的创建。回到主舞台,不需要手动摆放元件(因为我们需要创建的元件比较多,而且手动摆放不容易对齐),若是你执意要手动摆放,就休怪我……我……我也没办法……在第一帧处按右键在弹出窗口中选择Actions或者直接按快捷键F9插入脚本代码,在脚本编辑栏中输入如下代码

  1. const START_X:int=200;        //常量,用以设置第一个球起始的X坐标位置,也可做为总圆心的横坐标
  2. const START_Y:int=200;        //常量,用以设置球的y坐标位置,也可做为总圆心的纵坐标
  3. const GAP:int=40;                //常量,用以设置球与球直线的间距
  4. const BALL_NUM:int = 10 //球的数量
  5. const R:int = 150; //全部元件构成的总圆半径
  6. //循环10次创建10个球,若是你想创建多我也没法阻止你
  7.         for(var i:int=0;i<BALL_NUM;i++){                        
  8. //创建一个圆组件,类型为MovieClip,在flash中带时间轴,带有帧的一般都为此类型
  9.                 var test:MovieClip=new yuan();        
  10.         //设置每个球的坐标,下两行为直线摆放算法
  11.                 test.x=START_X+i*GAP;
  12.                 test.y=START_Y;
  13.         //下两行为圆形摆放算法
  14. //                var angle:Number=2 * Math.PI / BALL_NUM; //圆的一圈被分割成BALL_NUM份后每一份的弧度
  15. //                test.x=START_X + R * Math.cos( angle * i );
  16. //                test.y=START_Y + R * Math.sin( angle * i );
  17.         //由于i值每次循环的值都在变,所以由下句可以设置每个球开始的透明度不一样
  18.                 test.gotoAndPlay(4 * i);
  19.                 addChild(test);
  20.                 
  21.         }
复制代码

写完后测试一下影片,会发现我们在舞台上已创建BALL_NUM这个常量值所对应数值(10)个yuan元件了。如果你此时设置yuan这个元件的属性,将其导出为ActionScript的类名更改为fuckingYuan,那么上述代码中的var test:MovieClip=new yuan();这句话就得改成var test:MovieClip=new fuckingYuan();
       一个元件若是其内部有设置过动画,则在它被添加到舞台的那一刻其就会自动反复播放其内部的动画,由第一帧播放到最后一帧,再从头开始播放。我们在第一步中设置的叫yuan的元件中设置过动画,是由不透明慢慢变成透明,再变回不透明,如此反复。那么我们在脚本代码中将它们每个球的的起始播放帧设置成不同就可以实现一整排的球之间透明度各不相同且逐个递减,则在动画播放过程中它们每个球的透明度就会永远和前一个球相差一定值,达到水波式的渐隐效果,许多不确定进度条原理基本都是如此,只不过形状不同罢了,你大可在脚本中改写元件布局的代码将它们排成圆形,在原代码中我已给出,就是注释掉的那部分哈,至于为什么这么算,画个图研究下吧。
    圆形排列效果预览:http://www.iamsevent.com/upload/LoadingProcessBarC.swf
    附上源文件提供下载,FLASH CS4以上版本    <ignore_js_op> LoadingProcessBar.rar (42.65 KB, 下载次数: 1616) 
      FLASH CS3版本 <ignore_js_op> (CS3)LoadingProcessBar.rar (39.31 KB, 下载次数: 589) 

你可能感兴趣的:(Flash)