Flash Animation 教学 （<<KERORO 军曹摇头帮>> 更新 5-4-2007）

lpsiew

绣妹正找着这类的flash教学，
原来叫做frame-by-frame animation

尤其是[Robot仔按钮]类似的flash，
每次我在一些网站看到时，觉得他们弄得很美。
很喜欢这种看起来较high-tech的flash，很有立体感
期待更多这类似的教学，先说声谢谢


交上我的功课

>>绣のFlash<<
p/s 弄到一半时，开始嘲笑自己写那么长干嘛，自己辛苦而已

>>宝剑<<
p/s 这个电流效果我很喜欢，既好看又容易弄

p/s的p/s [Robot仔按钮]的教学很吸引我，稍后再学

[ 本帖最后由 lpsiew 于 26-9-2006 07:06 PM 编辑 ]

lpsiew

今天终于能够抽空来学习了

>>笃我<<

这个教学蛮好玩，虽然弄眼睛旋转的部分很花时间。
不过弄flash毕竟是很消耗时间(讲着废话)。
期待更多这类的教学

SolBadguy2

我也来交功课了^_^
http://img.photobucket.com/albums/v493/Cyclone1/crab_button.swf

yawchoong

你这个螃蟹的idea不错，只是我个人人为，那个button的范围太大

SolBadguy2

@yawchoong
我也这样觉得..所以我的version2就出来勒..
也加了个短短的对白
XD
http://img.photobucket.com/albums/v493/Cyclone1/Untitled-1.swf

[ 本帖最后由 SolBadguy2 于 3-10-2006 10:17 PM 编辑 ]

holy_virgin

原帖由 lpsiew 于 30-9-2006 12:18 AM 发表
今天终于能够抽空来学习了

>>笃我<<

这个教学蛮好玩，虽然弄眼睛旋转的部分很花时间。
不过弄flash毕竟是很消耗时间(讲着废话)。
期待更多这类的教学

哈罗~你好！
你好帮哟，你在学习flash很用心。。。继续努力！ganbatei
你说话也很cute^

yawchoong

不错，还是我觉得那个button的范围太大，mouse一经过附近，就不同了，好像很烦，
然后那个对白可以弄地更好，好像有个循环就比较好看

lpsiew

原帖由 holy_virgin 于 4-10-2006 05:38 PM 发表

哈罗~你好！
你好帮哟，你在学习flash很用心。。。继续努力！ganbatei
你说话也很cute^

你好你好...nice to meet u
嘻嘻，谢谢谢谢

之前我通过flash所提供的教学来自修，学习到很慢。
反而佳礼的flash论坛找到自己要的教学，还更容易上手

P/S 我讲话习惯带点废废成分，望君见谅

[ 本帖最后由 lpsiew 于 5-10-2006 01:49 AM 编辑 ]

lpsiew

原帖由 SolBadguy2 于 3-10-2006 10:07 PM 发表
@yawchoong
我也这样觉得..所以我的version2就出来勒..
也加了个短短的对白
XD
http://img.photobucket.com/albums/v493/Cyclone1/Untitled-1.swf

你的螃蟹的idea蛮不错哦
不过尺寸方面就不大适合拿来当button，太大个了

p/s 你那对白的[浮上沉下的效果]很有3D感，是怎样弄的

fAnz

请问哪个robot要怎样画啊？？
用什么工具来画。。？？

SolBadguy2

@yawchoong
要怎样循环我就不会做了 >_<

@lpsiew  
lolz...我只是用motion tween，让后在不同的key frame里，用free transform放大一点，斜一点LOh//

yawchoong

http://www.netcolony.com/yawchoong/crabd-1.swf

樂18

pls帮我解答~我frame by frame 之后我写完了。。。 我run> enter
我只是看到的是。。。一个贴〉去一个贴〉之后我的意识就是。
第一个贴我写了一点〉当他取道第2个贴。就没有了第一个贴得字~去第3个贴的时候〉就没有了第2个贴的东西~ 怎么解决哦！ 教教我~谢谢你们哦！ pls

cshaopin

很感谢各位。这贴已经沉底 N 年了。。。我还忘了这贴的存在。。。直到＂樂18＂ 网友短讯我的时候才发觉。。。很不好意思。

lpsiew ： 你是我见到最有耐心的一个人了。。。我本来也要写我的华语名的。。。才开始写几个 frame 就 "Oh My Heavenly Jesus !" 。。。就马上 open new file，写了 ＂SP＂来取代全名。

你的宝剑效果很美，很像 thundercat 的剑。 如果照着华人漫画的宝剑来画应该更美！！

小小 ideas：

坏人的剑就用＂黑＂，＂红＂色的电，好人的就用＂白＂，＂蓝＂色的电，感觉很不错！

以 dragon ball 人物来取材，就能作＂超越超级赛亚人＂效果了。也能作出 dragon ball 坏人"飞力沙＂(freeza) 的气功球。



＂笃我＂ 可以不用跟着我的 robot 仔，尝试用 flash 来画大头狗，眼睛会不停的看来看去的。Mouse on 的时候会汪忘叫。

小小 ideas: 一个小男孩在一个很多美女的地方，眼睛笑得像弯月，眼睛会不停的看来看去。Mouse over 的时候还会流口水。

Robot 仔按钮目的是要教怎样弄一个 interactive 的反应。不一定要做按钮。只要发挥一下想象力，就可以做出各种 game, interactive flash website。

小小 ideas: 做得精细点，可以做成 flash menu 的全部 buttons。

About me : 就画一个公仔代表自己。Mouse over 会摆鬼脸。
News : 画一个小报纸，mouse on 就会自己翻。
Downloads : 画一个向下的箭头，有眼睛的。
Contact me : 画一个可爱的电话， mouse on 就会提起电话筒。



SolBadguy2: 会加对白，很有创意呢～！ 多练画工，能精细点就更好了。 你的 button 范围太大，原因很简单。

拿我的 Robot 仔按钮来解释。在 Robot_button 的 working environment 的 frame "HIT" 里面，我是涂黑一个长方格，其实那就是我的点击范围。

不一定要长方格的，你需要的地方才涂黑都可以。那么就能做到跟你的工仔一样形状的点击范围了。




fAnz: 用 flash 里面的 round shape, rectangle shape, brushtool，配合 transform function，co-ordinate function 来做的。

如果会 macromedia freehand 更好玩。但是我懒惰学。




樂18:比如说我要写一个英文单字＂P＂，首先我要画一个直线，再画半个圆圈，对吗？你一定是在 1st frame 的时候画一个直线，在 2nd frame 的时候只画半个圆圈，忘了画直线。

如果不明白的话，说得正确点，就是我们现在用的是 keyframes。
1st keyframe 的东西是不会出现在 2nd keyframe 的。你要从新画过。每一个 keyframe 都照着前一个 keyframe 来画，然后再加一点新东西。这样一来才能有效果。

慢慢画，可以培养耐心。。。我可不能。。。甘愿去睡觉。

SolBadguy2

@yawchoong :
哦哦哦哦~~。。。 可是我还是不懂>_<
等我考试过后，我再研究了~
那时就要你教我了。。。

@cshaopin :
谢谢~ 我对画画可是一窍不通阿。。。
可要你教我怎样画才会漂亮了^_^

cshaopin

酷酷按钮

之前教了一些基本按钮，用 movieclip 放在 button 的 "Up","Over","Down" 里面。现在是时候分享一些比较 intermediate 的按钮教学了。论完成度，细腻度，连贯性，美感，互动性，都大大提升。但也需要更多的心机，技巧及时间。因此我不会在这里一步一步地指导。因为实在是太麻烦了。

这里我做了一个例子。灵感是从 www.derbauer.de 旧 version 那里得来的。（现在的 version 更酷！）。希望大家可以下载。我是用 Macromedia MX 2004 来做的。这个例子有三个按钮。但是没有 LINK 的，只是用来当教学。



www.geocities.com/cshaopin/cool.zip (fla)

www.geocities.com/cshaopin/cool.swf

我用了 on (mouseOver) , on (mouseOut) 来控制按钮的 animation。将每一个 frame 都给 label。（可以在 Label layer 那边看到）。然后放一个 invisible button 在最上面，每一个 keyframe 的 button 都有 actionscript，控制每一个 keyframe。

如果有问题可以提出来。我有空一定会在这里讨论。或短讯都可以。

[ 本帖最后由 cshaopin 于 9-3-2007 07:20 PM 编辑 ]

wcchyau

然后 drag robot_eye 进去....
这句话什么意思？该怎么样drag进去呢？

cshaopin

就是先打开 Robot_off 的 working environment, create a new layer，打开你的 library (ctrl+L),选 robot_eye movie clip，用 mouse 按着它不放，拉进 Robot_off movie clip 里头。

这样一来你的 robot_off movie clip 里就有两个 layer。一个是 robot 的身体，一个是 robot_eye movie clip。

wcchyau

原帖由 cshaopin 于 8-3-2007 07:01 PM 发表
就是先打开 Robot_off 的 working environment, create a new layer，打开你的 library (ctrl+L),选 robot_eye movie clip，用 mouse 按着它不放，拉进 Robot_off movie clip 里头。

这样一来你的 robot_off ...

原来如此，谢谢！

cshaopin

卡通主持人

记得在四年前曾经帮华文学会创作坊歌曲发表会制作了一个卡通主持人。放上荧光屏，再用一个人现场通过麦可风说话，效果不错。现在放在这里当教材分享。



http://www.geocities.com/cshaopin/digitalMC.zip （fla）

这个 flash 有一个卡通公仔，会跟着不同的 key press，表现不同的动作。我设计了 10 个不同的表情。

键盘＆表情：

Q ＝ 正常
A ＝ 正常说话
U ＝ 笑
I ＝ 哈哈大笑
O ＝ 仰慕／爱慕
H ＝ 开心
J ＝ 开心地说话
B ＝ 生气
N ＝ 打冷震／流冷汗
M ＝ 唱歌
K ＝ 怀疑／不满意

Flash 的 actionscript 里有 Key.getCode()== 这个 function。大家可以用 flash 的 help 来查每一个键盘的 code。
比如说 ＂Q＂ 的 keycode 是 ８１。

各位可以下载然后自己创作，改进或增加表情。做了之后不妨上载让大家分享一下。

[ 本帖最后由 cshaopin 于 9-3-2007 07:21 PM 编辑 ]