成人直播视频,日本午夜精品视频在线观看,国内成人在线

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

@每日一動劉嘉偉 (錘子科技動效設計師)：終于要說 GSAP 了,GSAP 是綠襪子(greensock)家出的動畫引擎,功能強大,簡單易用,方便你實現各種動畫效果,可以進行位置、大小、透明度、顏色等變化,再復雜的動畫也都是由簡單的動畫組合而成,這次要講的東西依然很簡單,希望練習的同學不會在中間步驟被卡住。

上期教程：《動起來的代碼！為設計師打造的AS3+GSAP新手入門教程》

舉個 GSAP 使用的例子：

TweenMax.to(ball, 0.3, {x:100, y:100});

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

意思就是：叫做【ball】的物體，用【0.3】秒，移動到坐標【x:100, y:100】

如何使用呢？

先去下載：http://greensock.com/forums/files/file/8-as3-gsap/

下載解壓后，文件夾里有 4 樣東西

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

第一個文件是說明文檔，語法什么的可以在里面查，是需要聯網調用官網數據的。
第二個【com】文件夾是今天需要用的東西。
第三個【demo_swfs】顧名思義，里面是 Demo，可以隨便看看。
第四個【greensock.swc】文件相當于【com】文件夾的文件版，需要添加到 Flash 配置里使用。

好，開始吧~

（【PC 快捷鍵】/【Mac 快捷鍵】）

打開 Flash，【Ctrl + N】/ 【? + N】新建文檔

然后【F9】/【option + F9】打開代碼面板

把下面的代碼貼進去 = =

import com.greensock.TweenLite; //加載 GSAP 這個工具

stage.color = 0x000000; //把背景顏色設置成黑色

var ball = new Shape(); //創建一個名字叫做【ball】的形狀
 addChild(ball); //把【ball】添加到場景上
 ball.graphics.beginFill(0xFFFFFF, 1); //用【100%】透明度的【白色】繪制【ball】
 ball.graphics.drawCircle(0, 0, 16); //繪制一個中心點在坐標【x:0, y:0】半徑為【16】像素的圓

TweenLite.to(ball, 1, {x:200, y:200}); //【ball】用【1】秒鐘移動到坐標【x:0, y:0】

【//】符號后面的文字都是注釋，對前面的代碼說明，可以根據注釋修改前面代碼里的數字。

然后【Ctrl + Enter】/ 【? + Enter】發布

不出意外的話應該會報錯，因為找不到 GSAP 的 com 文件夾啊

【Ctrl + S】/ 【? + S】

先把把文件保存為【ballGSAP.fla】

然后把【com】文件夾復制到【ballGSAP.fla】目錄下

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

就像這樣。

然后再【Ctrl + Enter】/ 【? + Enter】發布，就能看到一個白色的小球在黑色的背景上移動。

移動到【x:200, y:200】就停了……

如果想再看一遍，再【Ctrl + Enter】/ 【? + Enter】發布，就能看到一個白色的小球在黑色的背景上移動。

小球移動到【x:200, y:200】就停了……

x N
...
..
.
然后這節課的目的達到了，用 GSAP 做了小球移動的動畫，可以下課了。

是不是很坑人？

好吧，不往下看也不會影響后面的課程，如果有不想下課的同學可以繼續往下看：

========= 拖堂的分割線 =========

打開【ballGSAP.fla】，在剛才的代碼下面繼續粘貼代碼：

stage.addEventListener(MouseEvent.MOUSE_DOWN, down); //場景在等待鼠標按下
 function down(e:MouseEvent)//鼠標按下執行的函數
 {
 TweenLite.to(ball, 0.5, {x:mouseX, y:mouseY}); //【ball】用【0.5】秒移動到【鼠標位置】
 }

【Ctrl + Enter】/ 【? + Enter】發布

這樣，你點一下鼠標，小球就會跑到鼠標的位置。

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

恭喜！可能是你第一個交互動畫就這樣做出來了!

這次只是用 GSAP 控制物體的坐標，就像一開始說的，還可以進行大小、透明度、顏色等變化。

比如：

TweenLite.to(ball, 1, {alpha:0.5, scaleX:1.4, rotation:45});

可以課下去試驗。

謝謝觀看~

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

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

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

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

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

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

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