亚洲一区二区三区色,爱看av在线入口,在线看日韩av

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

5月的時候，開始堅持每天做一個小動畫，發到我的微博@每日一動劉嘉偉?上，到現在也快三個月。有人問是用什么做的，我回答 as3 + GASP，然后就沒有然后了。今天這枚教程想告訴你的是，動畫木有你想象中那么難，而且它還很有趣。體驗下你就知道咯

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

動畫基本都是純代碼寫成的，其實代碼寫動畫并沒有想象的復雜，給每樣東西起好名字，然后指揮它們誰誰，什么時間做什么事情就好了。
以前看過很多教程，一步步跟著做，但總會在中間某一步驟卡住，沒法完成，就像《HOW TO DRAW A HORSE》一樣坑！

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

我在看一些代碼“入門級”書的時候，書里還是會默認你已經掌握一些“常識”，可我并不知道啊！總是無法做出最終效果，嚴重影響積極性。

我想，如果把步驟反過來，直接給出最終效果的代碼，復制粘貼進去，一發布就是華麗的效果。然后就想玩玩具一樣，改一下代碼里的數字，看看有什么變化，在這個基出上改一個獨一無二的版本出來，這樣會開心很多：）

= 。= || = 。= || = 。= || = 。= || 嚴肅的分割線 || = 。= || = 。= || = 。= || = 。=

先下載軟件：

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

官網地址，注冊一下就可以下載，30 天免費試用，最新版是 CC2015，但之前 CS3 —— CS6 版本也沒問題可以使用：https://creative.adobe.com

因為我用的是 Mac 英文版 Flash，防止菜單名稱對不上，我就直接用快捷鍵表示。如果我也犯了“默認大家都知道的常識”這個毛病，請告訴我，我再詳解。

（Flash 安裝中...）
（叮~）
（安裝完畢！ ╮(￣▽￣)╭ ）

準備運行第一個動畫代碼吧~

1、新建文檔： Windows 快捷鍵【Ctrl + N】

Mac 快捷鍵【? + N】

這時會彈出一個面板：

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

左邊默認就是 AS3 語言，不用改。

右邊按照標示，把場景寬高設置成 400 像素，當然其他大小也可以，你高興就好。

Flash 的默認幀率好像是 12，改成 60，然后點【OK】，新建這個文檔。

文檔新建以后，各種面板可能不熟悉，也沒關系，不用理會，用快捷鍵把我們需要的代碼面板調出來就好。

2、打開代碼面板 Windows 快捷鍵【Alt + F9】

Mac 快捷鍵【option + F9】

會出現下面這樣的面板

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

為了保護眼睛，我把面板背景色設置成了黑色，大家代碼面板應該是白色的。

3、復制粘貼代碼

復制下面的代碼，粘貼到 Flash 代碼面板里

var box:Shape = new Shape();
 var i:int;
 var count:int;

addChild(box);
 box.y = stage.stageHeight/2;//可以把 "=" 后面的值換成 0 ~ 400 之間的數字，發布看有什么效果

addEventListener(Event.ENTER_FRAME, wave);

function wave(e:Event)
 {
 count += 1.5;//可以把 "1.5" 替換成其他數字，發布看有什么效果
 box.graphics.clear();
 box.graphics.beginFill(0x000000, 1); //"0x000000" 是 16 進制顏色值，替換成 "0xFF0000" 看看效果

for(i = 0; i < stage.stageWidth + 1; i++)
 {
 box.graphics.lineTo(i, Math.sin((i - count)*Math.PI/180) * i / 4);
 }

box.graphics.lineTo(stage.stageWidth, stage.stageHeight);
 box.graphics.lineTo(0, stage.stageHeight/2);
 box.graphics.lineTo(0, 0);
 box.graphics.endFill();
 }

粘貼進代碼面板

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

字體顏色我也設置過，所以看起來和大家會有些不同，但不影響效果

4、運行動畫： Windows 快捷鍵【Ctrl + Enter】

Mac 快捷鍵【? + Enter】

如果一切正常，應該能看到下面的波浪動畫

動起來的代碼！為設計師打造的As3+GSAP新手入門教程

代碼里有些數值可以改一下，試試效果有什么不同，如果哪步卡住了，歡迎在新浪微博 @每日一動劉嘉偉我。

下節課，我要介紹一個動畫好幫手：GASP 堪稱業界良心的動畫引擎，別擔心，依然是復制粘貼代碼就可以看到動畫效果。

謝謝觀看~

?【動效神器Hype零基礎入門教程系列】

先聊一下這個軟件的強大功能，附上簡單教程！
《Sketch神助攻！無代碼做動效神器Hype3入門教程》

中國臺灣設計師叫你用Hype做原型過場！
《無代碼動效神器！教你用HYPE3做APP原型的基礎過場（附神器）》

美丫姐手把手教你用Hype做Path菜單動畫！
《比AE還方便！教你用HYPE無代碼制作PATH扇形菜單動畫》

投稿者：@每日一動劉嘉偉

【優設網原創文章投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量98萬的人氣微博@優秀網頁設計，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加優秀網頁設計微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：