云荷-个人作品展示

标题: 【音画教程】最简单的荷叶摇动 [打印本页]

作者: 寒江雪润 时间: 2019-4-15 11:12
标题: 【音画教程】最简单的荷叶摇动
一，flash界面简单介绍
打开flash软件可以看到以下界面

[attach]15472[/attach]
（图1）

点击菜单栏上的文件---新建选项，可以看到一个下拉式菜单
[attach]15473[/attach]
（图2）

在左边有个类型选项，一般选择AS3.0，因为AS3.0是最新的。
右边选择舞台大小，即是播放时屏幕显示画面的大小。速率24表示每秒钟播放24帧图像。

作者: 寒江雪润 时间: 2019-4-15 11:13
建好后可以看到以下界面：
[attach]15474[/attach]
（图3）
上面一排是菜单栏，中间是舞台，底下是图层与时间轴。右边是库与属性，右边的边上是工具栏。

作者: 寒江雪润 时间: 2019-4-15 11:16
接下来就可以开始制作动画了：
找一张背景图（此例是随便找的，）
1，打开文件菜单----选导入----选导入到库，可以得到以下界面
[attach]15475[/attach]
（图4）
可以看到库里有了一张图，同时在库窗口可以看到这张图的缩略图。
2，选择菜单栏：插入---新建元件---（类型中选）图形，得到元件1，时间轴选第一帧位置，然后按住鼠标将库窗口中的缩略图拖到元件1的舞台
如下图
[attach]15476[/attach]
（图5）
选择右边的属性面板，在x、y选0，即横向、纵向对齐。宽550，高400，与舞台一样大。
选择菜单栏：修改---分离（俗称打散）
[attach]15477[/attach]
（图6）

作者: 寒江雪润 时间: 2019-4-15 11:19
3，重复1步骤，导入一张荷叶，荷叶为png透明背景素材。直接网上找，找不到透明背景需要抠图或者自己画，原则是省力与效果两者平衡。
[attach]15478[/attach]
[attach]15479[/attach]
4，重复2步骤，得到元件2.
5，选择菜单，插入---新建元件---（类型中选）影片剪辑，得到元件3，选中库里元件2，把库窗口的元件2拖到元件3舞台上，。x、y选0，
在第一帧位置上选择工具栏中的任意变形工具，点舞台上的荷叶，会出现一个边上带点的框，中间有一个圆点，这个圆点是旋转中心，把这个旋转中心点拖到
荷叶根部，因为荷叶摇动是以根部为旋转中心的。
然后在时间轴30帧的位置上点右键，在弹出菜单中选插入关键帧，在60帧位置张重复一次。在15帧重复一次，并把鼠标放在舞台荷叶图像边角上，会出现
旋转标志，按住鼠标逆时针旋转一定角度。再在45帧重复一次，旋转方向改为顺时针旋转。
然后选择第一帧点右键，选择创建传统补间，并分别在15帧、30帧、45帧中重复。
可得以下情景：
[attach]15480[/attach]
（图7）
改变旋转角度可以改变摇动的幅度，改变关键帧的位置可以改变摇动速度。

作者: 寒江雪润 时间: 2019-4-15 11:21
6，点击上边的场景，从元件3舞台，回到场景舞台。选择图层1第一帧，库面板中选择元件1，将元件1拖入舞台，并对齐。
7，在图层下边有几个图标，把鼠标放上去会出现文字说明，选择新建图层，点一下会出现图层2，然后选中图层2的第一帧，将元件3拖入舞台，
放在合适位置。就完成啦。
[attach]15481[/attach]
（图8）

作者: 寒江雪润 时间: 2019-4-15 11:22
8，点，文件---另存为---取个文件名，就可以得到做好的源文件，因为源文件是红色的又称为红文件。
9，点菜单中，控制---测试影片，系统就会播放影片，同时会自动生成swf文件，我们称swf文件为白文件，白文件上传到网上作为播放用，
红文件作为修改用，类似ps生成的psd文件与jpg文件。

作者: 寒江雪润 时间: 2019-4-15 11:23

作者: 寒江雪润 时间: 2019-4-15 11:24
初学者先试试，然后一点点往前走。碰到问题可以提问。

作者: 绿蔷薇 时间: 2019-4-15 12:39
好详细的教程
寒江辛苦了
薇空了来试试
不知道能学会吗

作者: 绿蔷薇 时间: 2019-4-15 12:41
这个不是在PS软件中做吧
看到是FL，应该是这款软件吧

作者: 绿蔷薇 时间: 2019-4-15 12:41
谢谢寒江的无私分享，敬茶~~~

作者: 小雨的心 时间: 2019-4-15 12:43
现在不会做FLASH了，感谢寒江雪润老师的教程

作者: 寒江雪润 时间: 2019-4-15 14:04

绿蔷薇发表于 2019-4-15 12:39
好详细的教程
寒江辛苦了
薇空了来试试

这么简单的动画我居然写了这么多，太啰嗦了吧。

没办法，要照顾没碰过动画的初学者哈。

简单动画哪有学不会的，蔷薇聪明人那是不在话下。

作者: 寒江雪润 时间: 2019-4-15 14:07

绿蔷薇发表于 2019-4-15 12:41
这个不是在PS软件中做吧
看到是FL，应该是这款软件吧

是的呀，flash软件，我在用的是cs6版本

作者: 寒江雪润 时间: 2019-4-15 14:08

绿蔷薇发表于 2019-4-15 12:41
谢谢寒江的无私分享，敬茶~~~

这么一个东东算什么分享，

作者: 寒江雪润 时间: 2019-4-15 14:08

小雨的心发表于 2019-4-15 12:43
现在不会做FLASH了，感谢寒江雪润老师的教程

以后有空可以试试，简单动画不难。

作者: 紫藤花 时间: 2019-4-15 17:29
现在开始正式拜师，谢谢江师傅

作者: 寒江雪润 时间: 2019-4-15 18:44

紫藤花发表于 2019-4-15 17:29
现在开始正式拜师，谢谢江师傅

有问题尽管提哈，现在论坛帖子模式不算拜师哦，简单动画随便学学。

如果想系统性学才需要拜师，到时看情况再说哈。

作者: 紫藤花 时间: 2019-4-15 19:00

寒江雪润发表于 2019-4-15 18:44
有问题尽管提哈，现在论坛帖子模式不算拜师哦，简单动画随便学学。

如果想系统性学才需要拜师，到时看情 ...

回家边吃饭边看了会，刚打开软件操作，还是弄糊涂，一不注意舞台上的元件就消失，更别说一帧二帧，位置旋转都混乱，看来还要仔细一步步来。谢过江师傅

作者: 紫藤花 时间: 2019-4-15 19:13
重复1步骤时，插入---新建元件，得到元件2，时间轴还是选第一帧位置吗？

作者: 寒江雪润 时间: 2019-4-15 19:42

紫藤花发表于 2019-4-15 19:00
回家边吃饭边看了会，刚打开软件操作，还是弄糊涂，一不注意舞台上的元件就消失，更别说一帧二帧，位置旋 ...

按教程叙述的一步步慢慢来，做一步回头看看教程，再看看软件界面的情况。开始不熟悉，出现差错都是正常，做过几次就会熟悉。

作者: 寒江雪润 时间: 2019-4-15 19:43

紫藤花发表于 2019-4-15 19:13
重复1步骤时，插入---新建元件，得到元件2，时间轴还是选第一帧位置吗？

是的，按教程一步步做。最好是做一步三回头。开始慢，以后就会快。

作者: 紫藤花 时间: 2019-4-15 19:45

寒江雪润发表于 2019-4-15 19:42
按教程叙述的一步步慢慢来，做一步回头看看教程，再看看软件界面的情况。开始不熟悉，出现差错都是正常， ...

好的，刚刚试第三次有了效果，不过摆动太大，我再重做第四次

作者: 寒江雪润 时间: 2019-4-15 19:46

紫藤花发表于 2019-4-15 19:45
好的，刚刚试第三次有了效果，不过摆动太大，我再重做第四次

嗯，大大小小可以都试试，以便进一步了解其中原理。

作者: 紫藤花 时间: 2019-4-15 20:00

寒江雪润发表于 2019-4-15 19:46
嗯，大大小小可以都试试，以便进一步了解其中原理。

又试了一次，荷叶在跳动

作者: 醉雪胡杨 时间: 2019-4-15 20:13
荷叶摇动教程真是太棒了，感谢雪润无私奉献！

作者: 寒江雪润 时间: 2019-4-15 21:12

醉雪胡杨发表于 2019-4-15 20:13
荷叶摇动教程真是太棒了，感谢雪润无私奉献！

问好胡杨！谢谢点赞！

作者: 寒江雪润 时间: 2019-4-15 21:19

紫藤花发表于 2019-4-15 20:00
又试了一次，荷叶在跳动

应该是移动旋转中心出问题了。
在把元件拖入舞台并对齐后，先要在第一帧位置移动图像上的旋转中心，然后再创建时间轴上的其他关键帧，
在旋转图片时绕着中心点旋转，仅仅旋转不能有移动。播放时就不会有跳动。再试试。

作者: 绿蔷薇 时间: 2019-4-16 14:47

寒江雪润发表于 2019-4-15 14:04
这么简单的动画我居然写了这么多，太啰嗦了吧。

没办法，要照顾没碰过动画的初学者哈。

寒江写的棒
一点儿不啰嗦
薇从没涉足过动画
这方面薇是小白菜
这样详细的教程适合薇

作者: 绿蔷薇 时间: 2019-4-16 14:48

寒江雪润发表于 2019-4-15 14:07
是的呀，flash软件，我在用的是cs6版本

哦，薇还木有flash软件，薇去下载一个~~

作者: 绿蔷薇 时间: 2019-4-16 14:50

寒江雪润发表于 2019-4-15 14:08
这么一个东东算什么分享，

这个动画教程好棒的

作者: 紫藤花 时间: 2019-4-16 18:29

寒江雪润发表于 2019-4-15 21:19
应该是移动旋转中心出问题了。
在把元件拖入舞台并对齐后，先要在第一帧位置移动图像上的旋转中心，然后 ...

昨晚已经成功，但不知道怎么传图上来

作者: 寒江雪润 时间: 2019-4-16 21:28

绿蔷薇发表于 2019-4-16 14:47
寒江写的棒
一点儿不啰嗦
薇从没涉足过动画

其实简单动画非常容易，补间动画、导入视频、代码动画上手很快。

深入略有难度，如果掌握技巧也不太难。难点在于加工素材，特费劲。

作者: 寒江雪润 时间: 2019-4-16 21:28

绿蔷薇发表于 2019-4-16 14:48
哦，薇还木有flash软件，薇去下载一个~~

下载cs6版本哈。

作者: 寒江雪润 时间: 2019-4-16 21:29

绿蔷薇发表于 2019-4-16 14:50
这个动画教程好棒的

谢谢点赞！

作者: 寒江雪润 时间: 2019-4-16 21:31

紫藤花发表于 2019-4-16 18:29
昨晚已经成功，但不知道怎么传图上来

这是swf动画文件，需要传到网上空间，得到地址后，才能上传到论坛帖子里。

作者: 绿蔷薇 时间: 2019-4-16 22:19

寒江雪润发表于 2019-4-16 21:28
其实简单动画非常容易，补间动画、导入视频、代码动画上手很快。

深入略有难度，如果掌握技巧也不太难。 ...

还是感觉很难，空了我来试试哈~~

作者: 绿蔷薇 时间: 2019-4-16 22:20

寒江雪润发表于 2019-4-16 21:28
下载cs6版本哈。

好的~~

作者: 寒江雪润 时间: 2019-4-17 00:20

绿蔷薇发表于 2019-4-16 22:19
还是感觉很难，空了我来试试哈~~

初学者主要问题是生疏，做起来需要慢一点，根据教程一步步做，按照教程走一步看一看，先后顺序不要搞错。遇到问题随时提。
做过几次后就会熟练。

作者: 紫藤花 时间: 2019-4-17 12:33

寒江雪润发表于 2019-4-16 21:31
这是swf动画文件，需要传到网上空间，得到地址后，才能上传到论坛帖子里。 ...

是否需要代码发贴

作者: 紫藤花 时间: 2019-4-17 12:35
http://qc.yhyhlt.com/mmqc/z/h001.swf

作者: 紫藤花 时间: 2019-4-17 12:38
作业交上来了，但不知道为什么只能看到几秒，然后是立即修复的页面

作者: 绿蔷薇 时间: 2019-4-17 12:59

寒江雪润发表于 2019-4-17 00:20
初学者主要问题是生疏，做起来需要慢一点，根据教程一步步做，按照教程走一步看一看，先后顺序不要搞错。 ...

初学肯定会遇到这样那样的难题
慢慢来，熟能生巧，况且有你这位好老师

作者: 绿蔷薇 时间: 2019-4-17 13:02

紫藤花发表于 2019-4-17 12:38
作业交上来了，但不知道为什么只能看到几秒，然后是立即修复的页面

花花制作的很棒

我这里一直能看，没有修复页面的提示
可能是花花的浏览器问题，换一款试试看

作者: 紫藤花 时间: 2019-4-17 14:15

绿蔷薇发表于 2019-4-17 13:02
花花制作的很棒

我这里一直能看，没有修复页面的提示

好的，有空再试

作者: 浅唱 时间: 2019-4-18 18:03
http://qc.yhyhlt.com/mmqc/he.swf

作者: 寒江雪润 时间: 2019-4-18 20:24

紫藤花发表于 2019-4-17 14:15
好的，有空再试

http://www.yhyhlt.com/thread-14240-1-1.html

作者: 寒江雪润 时间: 2019-4-18 20:25

浅唱发表于 2019-4-18 18:03

做得不错！摆动幅度与速度可以任意修改调节，关键是掌握制作方法。

作者: 浅唱 时间: 2019-4-19 08:02

寒江雪润发表于 2019-4-18 20:25
做得不错！摆动幅度与速度可以任意修改调节，关键是掌握制作方法。

怎么样控制好速度

作者: 寒江雪润 时间: 2019-4-19 08:14
本帖最后由寒江雪润于 2019-4-19 08:33 编辑

浅唱发表于 2019-4-19 08:02
怎么样控制好速度

速度可以调节的，我给出的60帧为一个周期。1--15帧逆时针转动，15--30帧还原；30帧---45帧顺时针转动，45---60帧还原。由此60帧为运动的一个周期。

转动幅度由旋转角度决定，旋转角度越大，荷叶摆动幅度越大。

由此可知：当幅度不变，则帧数越少，速度越快；帧数越多速度越慢。
当帧数不变，转动角度越大，速度越快；转动角度越小，速度越慢。
你可以变化一下运行帧数和转动角度试试就知道了。

帧数在时间轴上，相当于运动所需时间，帧数越多，所用时间越长。
转动角度相当于运动经过的距离，角度越大，所经过距离越长。
速度等于距离除以时间，即速度与时间成反比，与距离成正比。当时间不变，距离越大，速度越快。当距离不变，时间越长，速度越慢。

作者: 浅唱 时间: 2019-4-19 17:42

寒江雪润发表于 2019-4-19 08:14
速度可以调节的，我给出的60帧为一个周期。1--15帧逆时针转动，15--30帧还原；30帧---45帧顺时针转动，45 ...

这样讲解明白一些
原来还有周期
我完全没按照这样来操作
谢谢你无私的分享

作者: 寒江雪润 时间: 2019-4-19 21:41

浅唱发表于 2019-4-19 17:42
这样讲解明白一些
原来还有周期
我完全没按照这样来操作

如果提问也像我解答一样详细，那就便于交流。

作者: 浅唱 时间: 2019-4-21 14:02

寒江雪润发表于 2019-4-19 21:41
如果提问也像我解答一样详细，那就便于交流。

好的
今天有空先来试一试
不懂的在这里提问

欢迎光临云荷-个人作品展示 (http://www.yhyhlt.com/)