妙趣横生的动态画图


文字教程

1.运行flash mx 2004软件,按ctrl+n新建一空白文档,在常规面板选择“flash文档”,按确定.

2.按ctrl+j,打开文档属性面板,将宽、高尺寸设为300*300px),背景颜色设为0x000000(黑色),帧频设为20fps(也可在属性面板中直接将其设为20),其他默认即可,单击确定,进入舞台3.在舞台上画一倒树叶形状的图形,笔触设为无,填充颜色设为0x00cc00,大小宽高不要超过10px为佳。按o键选择圆形绘画工具,在舞台倒树叶右上处画一4*4的圆形,笔触设为无,其颜色设为0xffff00                            

此是视图在200%下的图形

4.双击时间轴中“图层一”字样,将其重命名为“pic”。(其实也可不做这一步,但在制作复杂动画时,必须要以不同名称区分不同层,这样才会井然有序的完成制作)单击第一帧选择舞台所有图形,按F8键,弹出“转换为符号”对话框,行为选为影片剪辑,其他默认,单击确定。双击舞台上的影片元件,进入影片剪辑,按F8键在弹出的“转化为符号”对话框中行为选择“图形”,其他默认,按确定,

5.在时间轴图层“pic”第102540帧分别按下F6键插入关键帧。选择第10帧,单击舞台上的图形符号,在属性面板中“颜色”处打开下拉列表框选择高级选项,然后单击右边的“设置”按钮,弹出“高级效果”面板,将红色效果值增加到255,其他默认,单击确定。其效果如下:

选择第25帧,单击舞台上的图形符号,按向左方向键,将图形符号向左移动2px,再按向下方向键,将图形符号向下移动3px。分别在第102540帧处单击右键,选择“创建补间动画”。ctrl+e,回到主场景,选择舞台上的影片元件,在属性面板中将其命名为mc

6.新建一图层,将其重命名为“script”。在“pic”层第三帧处单击右键选择“插入帧”(或按F7键)。在“script”层第二帧处连续按三下F6键,插入空白关键帧。</DIV><DIV>

7.选择“script”图层第一帧,按F9键打开动作-帧面板,在面板内输入如下代码:</DIV><DIV><DIV class=HtmlCode>var i=0,n=0;</DIV></DIV><DIV>选择第二帧,在动作-帧面板输入如下代码:

</DIV><DIV><DIV></DIV><DIV class=HtmlCode>                                 

 mc._x = Math.sin(n)*60+150;
mc._y = Math.cos(n)*60+150;//定位mc位置
mc._rotation = i;//为mc设置旋转角度
mc.duplicateMovieClip("mc"+i, i);//复制mc
if (i>2136) { 
                                                         

 this["mc"+i]._alpha=0;//将最后复制的mci隐藏
                                                          stop();
}
i += 24;//旋转角度增加量,也即形状
n += 0.07;//位置角度增加量。也即位置</DIV>选择第三帧,在动作-帧面板输入如下代码:
</DIV><DIV><DIV class=HtmlCode>                                 

 gotoAndPlay(2);</DIV></DIV><DIV>

8.按ctrl+enter,测试影片,这样一个动态漂亮的图案便出现了。在本动画制作中,其i决定最后图形形状,n决定最后图形位置,但i,n也即形状和位置都会影响最后图形的形状。

例如:将i+=24;改为i+=3;if(i>2136)改为if(i>1080),按ctrl+enter测试影片,就又是另一种漂亮的图形。其中奥妙请各位闪客自己体会。动画效果如下:     </DIV><DIV><DIV class=HtmlCode>i+=24,if(i>2136)            i+=3,if(i>1080)             i+=12,if(i>1044)</DIV></DIV><DIV>要注意的是不同的i+=数值1,这个数值1不同,所需要的i的测定范围if(i>数值2),这个数值2也不同,需要计算或不停的测试来确定。</DIV><DIV>

9.其实,这样的反复帧动画已经不符合as2.0面向对象编程的语法了,也即是一种过时的做法了。下面就将上面制作的动画封装成一随处可用的满足面向]对象编程语法的动画。</DIV><DIV>ctrl+F8

新建一空影片剪辑元件,按ctrl+e回到主场景,按下“pic”层第一帧不要松开向右拖动鼠标至第三帧,然后单击鼠标右键选择剪切帧,双击库面板中影片剪辑元件3,进入后在第一帧单击鼠标右键,选择粘贴帧。同样方法,将主场景中的“script”层粘贴到影片剪辑n的令一图层,并将多于帧删除。按ctrl+e回到主场景,删除一图层,并删除剩下图层的多于帧,只保留第一帧。然后,拖动库面中影片剪辑元件3到舞台上。至此一个可随处拖用具有封装性的动画完成。只是本地位置和全局位置会有所不同,需要将本地位置转换为全局位置。其用到的方法为:

</DIV><DIV class=HtmlCode>localToGlobal()</DIV><DIV>。

再次拖动影片剪辑元件3到舞台上便可有两个制作动画了,很方便。由于水平有限,也是第一次写教程,疏漏和不妥之处必不可免,希望各位大虾见谅。不足之处必定改正。</DIV>相关附件

FLASH MX 实例---蝴蝶运动  (作者:绿窗晓梦
愿此教程能为新来学习 flash 的朋友有个帮助。感谢北呢老师对此教程的指点。。

点击开新窗口欣赏该FLASH动画![全屏欣赏]
http://bbs.flasher123.com/UploadFile/2004-4/200441814411394919.swf

素材(含源文件)下载:

点击浏览该文件

Flash MX 实例教程 蝴蝶运动残影

效果:1.制作一只运动的蝴蝶,蝴蝶的左下方有它的残影在闪烁的效果。
重点:1.引导线的运用。2.as的运用

一.设置影片氖粜?BR>新建一个动画文件,设置场景大小为 400X300,背景色为白色,桢频12 fpx。如图:

此主题相关图片如下:




二、创建影片剪辑:
1、单击插入----新建元件 名称取为 “运动”,类型为“影片剪辑”。如图:

此主题相关图片如下:


2、打开 文件----导入到库,将素材包中的名为“1.GIF”动画拖到库中,点击 窗口---库 将库中的“1.GIF"拖到画面中。
3、选中该图层的 第20帧,按F6插入关键帧,将画面中的 蝴蝶 移动到适当位置。
4、选中 第1帧,在属性面板中选 补间---动作 创建1-20帧的补间动画。在“调整到路径”上打勾。
5、单击时间轴窗口上的“添加引导图层”按钮,或执行“插入/运动引导层”为第一图层增加一个引导图层。在绘图工具箱中选择铅笔工具,并选择铅笔工具的附属选项“平滑”。然后用铅笔工具在场景中画一个平滑曲线。
6、选择第一层的第1帧。拖动第1帧上的蝴蝶到曲线起点上,注意一定要“+”与线一端对准。
7、选择第一层的第20帧。用同样的方法将蝴蝶拖动到曲线的终点上。
8、添加动作语句。 在第一层,选中第1帧,打开动作面板,在动作面板中输入: stop():
在第一层选中第20帧,打开动作面板,在动作面板中输入: stop():

如图:

此主题相关图片如下:


三、制作重看效果按钮:
1、单击 插入----新建元件 名称取为 “按钮”,类型为“按钮”。如图:

此主题相关图片如下:


2、在按钮的编辑区中,第1帧 弹起 处 按 F6插入关键帧,点文本工具 A 输入静态文本 重看效果 四个字,颜色为 红色。在第2帧、第3帧 都按上F6插入关键帧,可以改变字体颜色。第4帧按F6插入关键帧,在此处画个方框为热区。如图:

此主题相关图片如下:
按此在新窗口浏览图片

四.编辑场景:
1、点击回主场景,添加三个图层。把图层1改名为“背景”,把图层2改名为“蝴蝶”,把图层3改名为“按钮”,把图层4改名为“脚本”。如图:

此主题相关图片如下:
按此在新窗口浏览图片

2、单击背景层的 第1帧,选择 文件----导入 ,导入名为“背景”的图片。调整大小,让它与场景大小相同,在第4帧按F5添加普通帧。
3、单击“蝴蝶”图层的第一帧,打开 窗口---库,选中影片剪辑“运动”拖到场景中,调整位置,让它处在场景中的左下角。单击场景中的图片在属性面板中设置 实例名称为“hd”。选中第4帧按F5插入一帧。如图:

此主题相关图片如下:
按此在新窗口浏览图片
4、单击“按钮”层,在第4帧处 插入空白关键帧,打开 窗口---库,将按钮元件拖到场景中右下角。点击左下角的“重看效果”按钮,添加动作脚本,打开动作面板,输入
on (press, release) {
gotoAndPlay(1);
}
如图:

此主题相关图片如下:
按此在新窗口浏览图片

4、为“脚本”层添加动作语句:
单击“脚本”层的第1帧 打开动作面板,输入动作语句:
m="10";
n=m;
while(Number(m)>0){
duplicateMovieClip("/hd","hd" add m,m);
setProperty("hd" add m,_alpha,10*m);
m=m-1;
}
setProperty("/hd",_visible,"0");
如图:

此主题相关图片如下:
按此在新窗口浏览图片

单击“脚本”层的第2帧 ,按F6添加关键帧, 打开动作面板,输入动作语句:
if(Number(n)>0){
tellTarget("hd" add n) {
play();
}
}
n=n-1;
如图:

此主题相关图片如下:
按此在新窗口浏览图片

单击“脚本”层的第4帧,按F6添加关键帧, 打开动作面板,输入动作语句:
if(Number(n)>0) {
gotoAndplay(2)
}
else{
stop();
}

如图:

此主题相关图片如下:


六.测试(Ctrl+Enter),完成。

 

作者:梦雨

FLASH MX 鼠绘实例5:游动的小鱼
[全屏欣赏]
http://bbs.flasher123.com/UploadFile/2004-3/20043816201318475.swf
因为时间紧迫,仿做了一个实例,主要学习鼠绘基本方法及引导线使用。

步骤1:新建文档,大小640*200
步骤2:鱼的制作
1:新建电影元件,取名为鱼身。共3帧,每帧形状如图所示:


此主题相关图片如下:
按此在新窗口浏览图片

此主题相关图片如下:
按此在新窗口浏览图片

此主题相关图片如下:
按此在新窗口浏览图片
2:建立电影元件,取名鱼尾,共两帧,每帧形状如图所示:


此主题相关图片如下:


此主题相关图片如下:

3:新建电影元件,取名为鱼,将鱼身与鱼尾组合起来


步骤2:画花朵
1。新建元件,取名花瓣,画出一片花瓣,如图所示

此主题相关图片如下:

2。新建电影元件,取名花,将花瓣拖入,单击右键,面板-变形-旋转角度72度,点击拷贝并应用变形按钮,开成花朵,如图


此主题相关图片如下:
按此在新窗口浏览图片
步骤3:画树叶,新建元件,取名树叶,如图

此主题相关图片如下:
按此在新窗口浏览图片
步骤4:画水草,共2帧,如图所示

此主题相关图片如下:
按此在新窗口浏览图片

此主题相关图片如下:


步骤5:做各个游动的元件
1。新建电影元件,取名为鱼游,为鱼添加一条起伏的波浪引导线
2。新建电影元件,取名为鱼游2,分别为两条鱼加上引导线,特别注意第2条鱼的引导线有意绕向第1条,以形成鱼的追逐。如图所示:


此主题相关图片如下:

第2条鱼的运动渐变上另加关键帧。当它向第一条鱼靠近的时候加一关键帧,隔几帧再加一关键帧,然后打开绘图纸外观轮廓按钮,将后面关键帧处的鱼拖向前一关键帧处,让鱼在这里形成停顿。
如图所示:此处后面关键帧处的鱼比前一帧还要靠后


此主题相关图片如下:
按此在新窗口浏览图片

此主题相关图片如下:
按此在新窗口浏览图片
步骤6:回到场景,将底图拖入,将底图转换为元件,选属性中颜色-色彩,选湖蓝色,27%。在适当位置放入水草
建立新层,分别将做好鱼、花、叶的游动元件拖入,每拖入一个元件,皆复制出一个做阴影。将做阴影的元件点击属性中颜色,选色彩,选深灰色,90%左右。


所需图片


此主题相关图片如下:

源文件:
点击浏览该文件

点击开新窗口欣赏该FLASH动画![全屏欣赏]
http://bbs.flasher123.com/UploadFile/2004-3/20043821152377719.swf



----------------------------------------------

历届师范生照片总汇   蓉与学生的照片系列    蓉的学生的作品    校园美   学生作品

书画展览作品系列    2003级中文1班    2003级中文2班     2004级中文1班

2004级英语班    2004级数学班    2003级美术习作展览    师范学生习作展览

老年大学生与作品等    蓉美术辅导班的学生

蓉的工艺作品系列

蓉的工艺作品系列

蓉的照片制作系列

蓉的各类绘画系列

故乡--蓉的摄影

蓉 的相册

蓉的相册(2)

蓉的视频空间

    

    

  

注:朋友这里进入,

可以在艺苑小屋注册发表您的作品,并欢迎您友情链接

凡希望交换链接的朋友,请首先做好与本站几个站点的链接,

本人自会做好与您的链接的,谢谢合作!

[图]艺苑小屋logo

艺苑小屋(1)

艺苑小屋(2)

艺苑小屋(3)

艺苑小屋(4)

留言

  QQ:172695020