as3-gsap-introduction-tutorials-2-1

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

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

舉個 GSAP 使用的例子:

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

6630057314514092720

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

如何使用呢?

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

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

2435321498519000983

第一個文件是說明文檔,語法什么的可以在里面查,是需要聯網調用官網數據的。
第二個【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】目錄下

6630758802933134680

就像這樣。

然后再【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】發布

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

endShow

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

這次只是用 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】優設哥的全拼
您也可以通過掃描下方二維碼快速添加:

sdcweixin

點贊
收藏

發表評論 快來秀出你的觀點

還可以輸入 800 個字
 
 
載入中....
相關推薦
評論 收藏