您的位置:寻梦网首页编程乐园Flashflash教程
Flash 教程

入门篇:LOADING的制作



西洋摇滚乐团Michael Learns To Rock. 完成作品 ( 93.3 KB )


1. 假设主要的 Flash 动画片段,时间轴分布如下图,我们想为此 Flash 动画片段加上 loading 的功能...


2. 我们建立一个图层,专门用来标记「欲检查 Loading」的影格位置标签,假如你不想增加此图层,直接在某个影格位置加上标签也是可以的,只不过这样比较乱,不方便 Modify 就是了!

插入图层 : 在图层按鼠标右键,选择「插入图层」选项。


3. 并为该图层 命名为「loading」,名称自己看得懂即可!知道那个图层是做什么就好了!中文、英文都可以啦...


4. 接着在第 1 个欲检查 Loading」的影格位置,按鼠标右键「內容」。


5. 给予这个影格一个标签名称「01」,方便待会儿的 loading 检查!


6. 注意看一下时间轴,影格 1 的位置已经加上标签01」了!依样画葫芦,在第 2 个欲检查 Loading」的影格位置 ,按鼠标右键「內容」。

( PS. 红色小旗子就是「标签」喔! )


7. 给予这个影格一个标签名称「02」,方便待会儿的 loading 检查!


8. 下图是完成标记全部欲检查 Loading」的影格位置标签,不是每个影格都需标记,大文件才需要做「Loading 检查」,小符号一下子就载入完成,不会拖慢动画的流畅!

( PS. 想知道哪些类型的大文件会拖慢动画吗?最后面附带一提有说明。)


9. 接着我们要建立一个专门用来0做 loading 的场景,让大家看得更清楚,场景与场景之间的互动!你也可以 loading 套用到主要 Flash 动画片段的最前面也可!

建立场景:主菜单「插入」,选择「场景」选项。


10. 你可以看到最右边场景标签,新增一个「场景 2」的场景标签。


11. 我们在「场景 2」的场景标签按鼠标右键选择「內容」选项。

( PS. 此范例「场景 1」为主要 Flash 动画场景。)


12. 命名场景名称为「Loading」。


13. 最右边的场景标签,由「场景 2」变更为「Loading」。


14. 接着我们将鼠标移至「Loading」场景标签,按住鼠标左键拖曳到「场景 1」的上面,这样播放 Flash 动画时,才会先播放 Loading 场景...


15. 进入 Loading 场景,首先在第 1 影格处,按鼠标键「內容」,给予一个标签名称「a」,待会 Loading 的 loop 循环圈要使用到!


16. 依样画葫芦,间隔数个影格,建立一个标签,假设你「场景 1」建立了 25 个「欲检查 Loading」的标签,那你「Loading 场景」也就要建立 25标签


17. 接着在第一个标签a」影格位置,按鼠标右键「內容」。


18. 在「动作」页面,按「+」新增「画面已载入」动作。


19. 在这里,我们先说明一下动作原理,这个影格的 Action 目的,是要检查「场景 1」的「标签 01」影格位置画面是否 load 载入完成 , 如果载入完成就跳到另一个影格检查下一个标签影格画面是否載入,依序下去:此影格的 Action 只做一次 ! 就像播放影格一样,注意这个要點喔 !

Action : 右边页面场景下拉选择「场景 1」.


20. 点取「标签」下拉选择「01」。


21. 在 Action「如果画面已載入」,按「+」新增「前往」动作。


22. 右边页面场景为「目前场景」不变,点取标签「b」。


23. 记得勾选「前往和播放」喔!


24. 标签a」影格完成 loading 的 Action 了!记得上面提到,此 Action 影格只做一次若影格画面无法一次载入完成的话,那 loading 根本就没有作用了,此做一次 Action 就往下播放,所以我们要在 loading 的 Action 影格后面, 加一个 loop 循环圈,跑到标签a再做一次 loading 检查!


25. 标签a」影格后面,按「F 7」插入「空白影格」,按鼠标右键「內容」。


26. 在 Action 页面,按「+」新增「前往」动作。


27. 右边页面场景为「目前场景」不变,点取标签「a」。


28. 记得勾选「前往和播放」喔!


29. 在标签b」影格位置,按鼠标右键「內容」。


30. 检查「场景 1」的「标签 02」影格位置画面是否 load 载入完成

Action : 右边页面场景下拉选择「场景 1」,点取标签「02」。


31. 在 Action「如果画面已载入」,按「+」新增「前往」动作。


32. 右边页面场景为「目前场景」不变,点取标签「c」。


33. 记得勾选「前往和播放」喔!


34. 标签b」影格完成 loading 的 Action 了 !标签b」影格后面,按「F 7」插入「空白影格」,按鼠标右键「內容」。


35. 在 Action 页面,按「+」新增「前往」动作。


36. 右边页面场景为「目前场景」不变,点取标签「b」。


37. 记得勾选「前往和播放」喔!


38. 在标签c」影格位置,按鼠标右键「內容」。


39. 检查「场景 1」的「标签 03」影格位置画面是否 load 载入完成

Action : 右边页面场景下拉选择「场景 1」,点取标签「03」。


40. 在 Action「如果画面已载入」,按「+」新增「前往」动作。


41. 右边页面场景為「目前场景」不变,点取标签「d」。


42. 记得勾選「前往和播放」喔!


43. 标签c」影格完成 loading 的 Action 了 !标签c」影格后面,按「F 7」插入「空白影格」,按鼠标右键「內容」。


44. 在 Action 页面,按「+」新增「前往」动作。


45. 右边页面场景为「目前场景」不变,点取标签「c」。


46. 记得勾選「前往和播放」喔!


47. 依样画葫芦,依序完成标签d」~「x每个影格的 loading 之 Action

( PS. 此范例共 25 个影格画面「欲 loading 检查」)


48. loading 結束,在标签y」影格位置,按鼠标右键「內容」。


49. 检查「场景 1」的「标签 25」影格位置画面是否 load 载入完成

Action : 右边页面场景下拉选择「场景 1」,点取标签「25」。


50. 在 Action「如果画面已载入」,按「+」新增「前往」动作。


51. 右边页面场景为「场景 1」,编号「1」,动作就是当 loading 全部载入完成后,就开始播放「场景 1」,从第 1 个影格开始播放...


52. 记得勾选「前往和播放」喔!


53. loading 场景完成一的影格状态。


54. 到此,您已经完成 loading 的 99 % 了!最后您会觉得好像缺少什么?!没错,就是 loading 提示画面它可以告诉使用者目前正在载入动画中,不然使用者会以为「死机」了喔!在此我们建立一个简单的 loading 提示画面 Movie Clips,方法很简单:按主菜单「插入」,选择「建立符号」选项。


55. 给予此符号一个名称「Loading」,记得勾选「電影片段」,并並按下「确定」。


56. 符号编辑画面 第 1 影格画面,我们输入简单的「Loading...文字,而第 2 影格按「F 7」插入「空白影格」.


57. 回到主画面,按主菜单「窗口」,选择「图库」选项。


58. 弹出符号小窗口。


59. 在「loadingAction 图层处,建立一个放「LoadingMovie Clips图层,并並选择刚刚建立的「LoadingMovie Clips按住鼠标左键,拖曳符号至主画面,就完成 loading 的提示画面,动作是动画载入时,就会显示「loading...文字閃烁提示画面

( PS. 您也可以自己制作 loading 提示画面,如载入百分比等等,以此范例來就,共建立 25 个影格画面「欲 loading 检查」,100 / 25,刚好每个「欲 loading 检查」影格画面载入进度为 4 %,每完成一个「欲 loading 检查」影格画面就加 4 %,最后就 100 % 载入完成啦!您也依喜好计划载入进度!最好是合乎逻辑 ^_^ )


60. 完工啦!可以输出作品啦!


61. 附带一提,哪些类型的文件会拖慢动画呢?例如:图片音效中文字,以及同一时间单一画面出现很多符号等等 ,使用者浏览动画时,无法即时载入完成,造成动画断断续续,此时就需借助「Loading」,让动画全部载入完成后再播放。

 


上一节 下一节