網站設計之Flash簡單動畫入門介紹(一)字型閃爍及漸顯
在製作網站過程中,增加些動畫效果是非常美妙的一件事。由於最近在當Flash和PS課程的助教,也輔導學生完成PS、Flash、HTML等操作,所以這篇文章主要是對Flash動畫的入門介紹,希望對你有所幫助,因為是非常基礎甚至沒有涉及到程式碼的文章,如果文章中存在錯誤或不足之處,還請海涵~
一. 軟體介紹
該軟體主要使用Macromedia Flash Professional 8實習,而最常用的軟體是Adobe Flash CS5,原理和操作基本類似。
首先建立一個Flash文件,Adobe Flash常建立ActionScript 3.0來新建Flash文件。
![](https://i.iter01.com/images/987b60a1600369685671c4744db0df2c2cb88098110ea2891c8280e60f56e517.jpg)
建立的Flash文件主介面如下所示,包括:工作區間、時間軸、工具皮膚、庫、屬性等介面。
![](https://i.iter01.com/images/9c3e437b44b01303e327e1b88c1b2be3ea3c69f3db43bad3d2d5dfada7403e02.jpg)
通常需要開啟三個皮膚:時間軸、屬性和庫(元件放入倉庫)。
![](https://i.iter01.com/images/2388dd4fb372fd431ff62497b7ffdb1cb233530c33e305acd2c00e9584957655.jpg)
Flash儲存檔案,通常包括兩種格式:
1) .fla原始檔案,可以修改;
2) .swf動畫播放格式,可以播放。
二. 閃爍和漸顯字型效果
下面介紹兩個簡單的案例。
1.閃爍字型
首先在工具欄中插入文字,可以通過屬性欄中設定字型顏色、大小等。
![](https://i.iter01.com/images/716d0f77af6dcf5b414cb6e57eaeba3d0ff74960a66e416a7f0a45731d7d6b51.jpg)
然後需要在時間軸中插入關鍵幀(起到關鍵作用的幀,實心小黑點,裡面實際存在內容),設定一定距離插入關鍵幀,並設定不同的顏色。
![](https://i.iter01.com/images/727c2bdb25f6ba8c0ff62939080f073cac9ddffcedb45e739834aaa1357925f2.jpg)
最後“檔案”->“匯出”->“匯出影片”,swf格式。
![](https://i.iter01.com/images/87cb24931ddb26d172c2b271447e8808984c53a07b1b6386e640bdaf9f9562aa.jpg)
播放如下所示:
![](https://i.iter01.com/images/6151b2c353ebea9f58df80647816ae81f7ba394f815a70eb583e842fbf784e2c.jpg)
2.漸顯字型
首先在工具欄中插入文字,可以通過屬性欄中設定字型顏色、大小等。然後選中文字,點選“修改”->“分離”按鈕。
![](https://i.iter01.com/images/504e4ba541e6495150e06dceefd7c4f154945a79f20ce6ba07d297df37802e4f.jpg)
注意:需要點選兩次,兩次後會顯示網狀效果。然後在時間軸中“插入關鍵幀”。
![](https://i.iter01.com/images/dfada73e5dae7411bdca14ef7225171a9f29d449713ec6cb2b411a46d51f8c39.jpg)
在新插入幀中,使用橡皮工具從最後一個字進行擦除。
![](https://i.iter01.com/images/e2afa5d3a5894ec1d08fada5c1b83726071be5d8f265cb2166571632cccabd5c.jpg)
依次插入關鍵幀,然後使用橡皮工具擦除相關漢字,直到所有漢字擦除乾淨。
![](https://i.iter01.com/images/e0af4c05305e691247a256d54e834046a4fe8122b8dcfe19f3b2af4d61f30cbe.jpg)
此時,可以點選“控制”->“播放”,檢視預定義的效果。但是此時的效果是從右往左漸漸消失,希望的效果是從左望右漸漸顯示。
需要按住Shift鍵,單擊最後一幀,將所有幀選中,然後點選“修改”->“時間軸”->“翻轉幀”命令,此時所有幀將翻轉過來。
此時可以預覽效果,同時可以到處swf檔案。
希望這篇文章對你有所幫助,嚴格意義上,它不能屬於程式設計相關的,但常用於各種網站中,所以對制止網站還是非常有幫助的,後面還會分享補間動畫,籃球運動、蝴蝶穿花等知識。
今天是雙十一,但自己內心還是非常複雜的,太忙太忙,而且有些事情又不能說出來。哎!週四下午助教,晚上趕過來,週五上課,週五回去寫材料,4點自願輔助信管學生程式設計,6點半上課,9點半趕回北院監考。期間還有各種雜事,雖然無數次的知道,抱怨不好,但是還是想記錄下,唯一慶幸的是學生對我的關心和朋友兄弟之間的關懷,堅持五年試試看,從未如此擔心自己堅持不了一個誓言~
(By:Eastmount 2016-11-11 深夜2點40 http://blog.csdn.net/eastmount/ )
![](https://i.iter01.com/images/7d594182f0661b31202d46d1b3088d5ef56fc2de2026cfb48fa9dd399097d945.gif)
相關文章
- canvas簡單動畫案例(圓圈閃爍漸變動畫)Canvas動畫
- 簡單CSS實現閃爍動畫(+1白話講解)CSS動畫
- ARouter簡單入門和介紹
- 01 . Shell詳細入門介紹及簡單應用
- EVE-NG簡單入門介紹
- 趣解計算機網路(一)之入門概念介紹計算機網路
- 營銷型網站設計方案介紹及說明網站
- 網路流量預測入門(一)之RNN 介紹RNN
- 簡單介紹python程式設計之檔案讀寫Python程式設計
- 自動化測試工具Cucumber的簡單介紹,入門篇!
- css3實現動畫閃爍效果CSSS3動畫
- Flownet 介紹 及光流的簡單介紹
- 1(5)led燈閃爍、常見ip核介紹
- UI自動化測試介紹及入門UI
- Python - pydantic 入門介紹與 Models 的簡單使用Python
- 前端入門——day1(簡介及推薦書籍和網站)前端網站
- spark簡單介紹(一)Spark
- CSRF簡單介紹及利用方法
- Lucene介紹及簡單應用
- MapStruct的介紹及入門使用Struct
- 簡單介紹架構設計的原則!架構
- 網路安全入門之BurpSuite是什麼?定義及模組介紹!UI
- 網路流量預測入門(零)之教程介紹
- Docker(3):Dockerfile介紹及簡單示例Docker
- 簡單介紹nginx反向代理及使用Nginx
- 簡單的區塊鏈開發入門:Hyperledger Iroha介紹區塊鏈
- 從《閃爍之光》看遊戲設計的統一性遊戲設計
- Flash動畫綜合設計併發布、嵌入到網頁動畫網頁
- Oracle認證介紹及入門心得Oracle
- 網路 IO 模型簡單介紹模型
- .net持續整合cake篇之cake介紹及簡單示例
- 教你如何用WPF實現文字粒子閃爍動畫效果動畫
- vuejs在解析時出現閃爍的原因及防止閃爍的方法VueJS
- webstorm 底部一直在閃爍顯示indexingWebORMIndex
- 介紹1個簡單好用的隨機動物網站,關鍵還免費隨機網站
- 設計模式入門-簡單工廠模式設計模式
- 分散式鎖簡單入門以及三種實現方式介紹分散式
- 短視訊平臺原始碼,單條目重新整理notifyItem 去除閃爍動畫原始碼動畫
- 簡單介紹一下 JSONJSON