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

cshaopin

HI～！ 大家好～小弟第一次在这里 post  Flash 教学。希望可以跟大家分享一下。。。

第一个教学：Frame by Frame 动画片。
难度：初级

这是一个很经典的动画技术。。。有许多卡通片都有用过的。。。
在这里偶画的是自己的名字。



以上这是一个很简单的 DEMO。

（一）
开 Macromedia Flash（什么 Version 都可以）。把 Movie Dimension 放 200x100 pixel。FPS（Frame rate）放 １２就可以了。

（二）
在 Layer １ 里头， Insert 60 个 Keyframe。（选第一个 Keyframe 然后按 F6 不放）



（三）
选择 Brush Tool。



选择 最小号的 Brush size。



（四）
在第一个 KeyFrame 先画一个点。



在第二个 Keyframe 在画比较长的笔划。



第三 Keyframe



第四 Keyframe



第五 Keyframe



依此慢慢画（很考心机的）

第十 Keyframe



第二十 Keyframe



第三十 Keyframe



第四十 Keyframe



第五十 Keyframe



当画的时候不一定要跟着前一个 Keyframe 一摸一样。。。但是你可以按 Onion Skin 来做一个 Reference。以便不会变化太大。



(五）

画完了后。。。就可以 RUN ANIMATION 了。。。按 Ctrl+Enter 来试看。。。

这是偶做出来的效果：

>>我的名字<<

还有一些小弟做出来的 Example：

>>fighting<<

[ 本帖最后由 cshaopin 于 5-4-2007 07:06 PM 编辑 ]

cshaopin

Frame By Frame 也可以做很多不同的效果。。。例如＂电流＂。。。

如果 Frame Rate 多，而且画得细腻的话。。看起来很不错的效果喔～

（一）
Dimension: 200 x 200 pixels
Background color : black
FPS: 24

先画火箭的骨架。。。



（二）
加多一个 Layer。放全部 Keyframe。。。



（三）
在每一个 Keyframe 都画电流的通过。。。用 Brush tool 最小号来画。。。用比较亮的颜色。。。

Frame 1


Frame 2


Frame 3


Frame 4


。
。
。

玩成之后就可以了。。。再加小星星当背景

>>完成品<<

是不是很简单？

更多例子

>>红龙<<

[ 本帖最后由 cshaopin 于 7-3-2007 07:23 AM 编辑 ]

cshaopin

可爱的 Robot仔按钮



在这里想教大家弄一个可爱的 Robot仔按钮。眼睛会 Random 的动。 Mouse Over 时会有表情。

难度：Beginner-Intermediate

(一）

Dimension: 100 x 100 pixels
Background: white
FPS: 48

先画 Robot仔的身体。


（二）

选 Insert -> New Symbol 或 Ctrl+F8


在 Create New Symbol Dialogue Box 里面，打 robot_off。在 Behaviour Type 选 Graphics。按 OK。
这是给 Mouse Off (滑鼠没有在 Button 上面）时的 Robot仔表情。


跟着就会去到 robot_off 的 working environment 里面。在这里贴上 Robot仔的身体。（可以回到 Main scene copy 再 paste Robot仔的身体）。


（三）
现在我们要弄一个会自己转的眼睛。
再 Insert New Symbol，打 robot_eye，behaviour 选 Movie。

现在我们会在 robot_eye 的 working environment里面。
在这里，画一个圆圈。这是眼睛的外线。Rename this layer as "outer"
Insert new layer。Rename as "inner"
在 layer "inner" 里面画一个黑珠子。这是眼黑。先把它画在左边（看左）


现在我们把两个 Layer 都加 frame 加到 180 个 frame。
在 layer "inner" 的第 ２４个 frame，我们 Insert Keyframe，在把黑珠子改成一条直线。（眨眼）


在 layer "inner" 的第 ２４个 frame，我们 Insert Keyframe，再画同样的黑珠子。这次我们把它 Move 到比较右边（看右）。


现在 Right Click on frame 24-> Copy Frame。然后 paste 在 frame 49。

在 Frame 50 insert blank keyframe,画眼珠在中间。（看直）


跟着读者可以随便在一个 Frame 里面在加 Keyframe。然后在画眼珠看上，看下，看斜，眨眼 等等。。。

现在再 Create New Layer, Rename as "Action"。
在 Layer "Action" 的最后一个 Frame，也是 Frame 180 ,加入 Actionscript。输入：

gotoAndPlay (random ( 180 ));


这个 scripts 的功能就是 randomly play any part of the frames。

OK！ 现在我们 create 了眼睛。我们回到 Robot_off 的 working environment 里面，然后 drag robot_eye 进去。


这样一来， Robot_off 完成了。

（四）
现在要作 Robot_on 的表情了。
Create new symbol -> type in robot_on
Behaviour:  Movie

第一个 Layer 我们 paste 上 robot 的身体。加 frame 到 65。
Create new layer,这时候我们就用 Frame-by-frame 的技术来画 robot 的眼睛会闭着，然后转动。


参考如下：
>>转动的眼睛<<

这样一来，我们就完成 robot_on 了。

（五）
现在我们要作 Robot_down，也就当我们按滑鼠键的时候的表情。
Insert new symbol-> Type in "robot_down"
Behavior : Graphics

在 Robot_down working environment 里面我们画上一个被按的表情。


就大功告成！

（六）
现在开始作 Button。
Insert new symbol-> Type in "robot_button".
Behaviour : Button。

在 Robot_button 的 working environment 的 frame "UP" 里面，放入 Robot_off 的 graphic。


在 Frame "On"(Over) 里面放 Robot_on 的 movie clip。稍微 rotate 一点（＋５ degree）。


在 Frame "Down" 放 Robot_down 的 graphic。


在 Frame "Hit" 将 Robot 的范围涂黑它。。。


（七）
现在回到 main scene，把 Robot_button drag 进来。再写上 ＂Click me" 的字眼。就大功告成了～！！！


完成品：
>>Robot<<

FLA file:
>>Click here to download<<

[ 本帖最后由 cshaopin 于 30-3-2006 02:04 PM 编辑 ]

BoredSince1990

哥哥,小弟是一個笨蛋.
請問你現在教的software叫什么?
叫什么名字?
在那裡可以donwnload到呢?

cshaopin

原帖由 BoredSince1990 于 30-3-2006 01:07 PM 发表
哥哥,小弟是一個笨蛋.
請問你現在教的software叫什么?
叫什么名字?
在那裡可以donwnload到呢?

偶用的软件是 Macromedia Flash MX 2004。

可以去 www.macromedia.com 或软件下载网站 www.download.com 找到。

[ 本帖最后由 cshaopin 于 30-3-2006 01:52 PM 编辑 ]

cshaopin

感谢 hahabin 版主精华小弟的贴子。

会再上传更多教学分享。

BoredSince1990

我以經download完斃了.
像你說的,再第一個frame畫一點,
但在第二個frame時,第一個frame畫的畫將會不見了.
很難接下去畫

BoredSince1990

有shortkey接下去第二個frame的嗎?

BoredSince1990

依此慢慢画（很考心机的）

OMG!!!!!!真的很花心机!!!!

cshaopin

原帖由 BoredSince1990 于 30-3-2006 02:12 PM 发表
我以經download完斃了.
像你說的,再第一個frame畫一點,
但在第二個frame時,第一個frame畫的畫將會不見了.
很難接下去畫

我想你应该是没有在每一个 Frame 都 set 去 keyframe 吧？

如果第二个 Frame 不是 Keyframe，那么就代表你是在 edit 着 第一个 Frame  的东西。



你必须 insert keyframe。才不会弄不见之前的东西。

cshaopin

噢。。。明白你的意思了。。。你是说第二个 frame 的是后因为 refer 不到第一个 frame 所画的东西。。。所以很难对不对？

当画的时候不一定要跟着前一个 Keyframe 一摸一样。。。但是你可以按 Onion Skin 来做一个 Reference。以便不会变化太大。

BoredSince1990

我發現如果加上图片做animation的話,picture 的素質会壞掉.....
可教我把picture的素質保持着嗎?
以下是ｐｉｃｔｕｒｅ的原樣．



而這是ａｎｉｍａｔｉｏｎ　後的ｐｉｃｔｕｒｅ

我用的是macromedia flash MX
是昨天臨時download 下來的....
明天我將會去買..請問什麼version的會比較好?
給我它"flash"的名字和version吧....
謝謝,師父!!

BoredSince1990

噢。。。明白你的意思了。。。你是说第二个 frame 的是后因为 refer 不到第一个 frame 所画的东西。。。所以很难对不对？

完全正確！！！！！

BoredSince1990

唉呀，無法把ａｎｉｍａｔｉｏｎ放大．．．．．
總之ｐｉｃｔｕｒｅ的素質彙變壞啦．．．
是不是和ｐｕｂｌｉｓｈ　ｓｅｔｔｉｎｇｓ有關呢？



醬要ｔｉｃｋ那一個呢？

新的ｖｅｒｓｉｏｎ的ｆｌａｓｈ　ｍｅｄｉａ會醬嗎？

問太多問題了，對嗎？
ｈｅｈｅ！！︿︿

yawchoong

对于BoredSince1990 网友的问题，我有一点疑问，
首先，请问你是不是去publish 那边 export movie?我不是这样做的，我直接ctrl+Enter ,test movie，就可以了，
至于照片的品质会差，之前你有没有把照片trace bitnamp?我不trace bitnamp的，我只是break apart,
然后如果要publish gif 或jpg，品质难免会差的，不知道我说得对不对，请各位网友纠正
最新的flash programme 是Flash Professional 8 ，

cshaopin

图画普遍来讲有两种格式。。。Bitmap graphic 和 vector graphic。Bitmap 是有很多个小 pixel 组成的。这种图画是 fixed size 的不能随性 dynamically 换它的 size。。。不然就会像你说的图画素质会降低。。。

如果要用 Bitmap 图画来做 flash 的话，通常都是决定了它的 size 之后才用 Graphics Editor (photoshop, paint, paint shop pro) 来 resize 它。Resize 了之后就不会再换了。

cshaopin

原帖由 yawchoong 于 31-3-2006 07:07 PM 发表
对于BoredSince1990 网友的问题，我有一点疑问，
首先，请问你是不是去publish 那边 export movie?我不是这样做的，我直接ctrl+Enter ,test movie，就可以了，
至于照片的品质会差，之前你有没有把照片trace bi ...

就如 yawchoong 所说的。。。 Trace Bitmap 是把 bitmap graphics 换去 vector graphis。。。换了之后难免有一点差。。。

BoredSince1990

謝謝兩位大哥的指教!

yawchoong

cshaopin 网友，看来我还要多多向你学习，
请问好像我所发表的，
把图片break apart 会好一点？
export movie 需要到publish setting?test movie 可以吗？？

cshaopin 网友，如果我有空，想开一个masking 教学，不知道会不会班门弄斧？

cshaopin

原帖由 yawchoong 于 1-4-2006 01:16 AM 发表
cshaopin 网友，看来我还要多多向你学习，
请问好像我所发表的，
把图片break apart 会好一点？
export movie 需要到publish setting?test movie 可以吗？？

cshaopin 网友，如果我有空，想开一个masking 教 ...

Paiseh 啦。。。你的 break apart 方法恐怕就是唯一能把图画能自由放大缩小，有不怎么会影响图画素质的最好方法了。。。偶也是不知道有这样简单的方法。。。hehe。。。互相学习嘛。。。偶会的一定分享的。。。因为偶很少会有用 bitmap 图画来做 flash 的。。。通常有用也是用在做背景罢了。。。偶很喜欢完全用 vector graphics 来做 flash 的。。。

偶也是把 .fla save 在一个地方，然后用 Ctrl+Enter 来 test movie，自然就有那个 flash file 了。。。

如果你要开一个 Masking 教学，当然无任欢迎啦～！好东西就是要来分享的。。。

偶正在学着做用键盘控制人物打架的 flash 。。。好难呢～

[ 本帖最后由 cshaopin 于 1-4-2006 01:59 AM 编辑 ]