為設(shè)計師打造的As3+GSAP新手入門教程

2018-01-09 1957 0
5月的時候,開始堅持每天做一個小動畫,發(fā)到我的微博,到現(xiàn)在也快三個月。有人問是用什么做的,我回答 as3 + GASP,然后就沒有然后了。今天這枚教程想告訴你的是,動畫木有你想象中那么難,而且它還很有趣。體驗下你就知道咯
動畫基本都是純代碼寫成的,其實代碼寫動畫并沒有想象的復(fù)雜,給每樣?xùn)|西起好名字,然后指揮它們誰誰,什么時間做什么事情就好了。
以前看過很多教程,一步步跟著做,但總會在中間某一步驟卡住,沒法完成,就像《HOW TO DRAW A HORSE》一樣坑! 我在看一些代碼“入門級”書的時候,書里還是會默認你已經(jīng)掌握一些“常識”,可我并不知道??!總是無法做出最終效果,嚴重影響積極性。 我想,如果把步驟反過來,直接給出最終效果的代碼,復(fù)制粘貼進去,一發(fā)布就是華麗的效果。然后就想玩玩具一樣,改一下代碼里的數(shù)字,看看有什么變化,在這個基出上改一個獨一無二的版本出來,這樣會開心很多 :)先下載軟件:
官網(wǎng)地址,注冊一下就可以下載,30 天免費試用,最新版是 CC2015,但之前 CS3 —— CS6 版本也沒問題可以使用:https://creative.adobe.com 因為我用的是 Mac 英文版 Flash,防止菜單名稱對不上,我就直接用快捷鍵表示。如果我也犯了“默認大家都知道的常識”這個毛病,請告訴我,我再詳解。 (Flash 安裝中…)
(安裝完畢! ╮( ̄▽ ̄)╭ ) 準備運行第一個動畫代碼吧~ 1、新建文檔: Windows 快捷鍵 【Ctrl + N】 Mac 快捷鍵 【? + N】 這時會彈出一個面板: 左邊默認就是 AS3 語言,不用改。 右邊按照標示,把場景寬高設(shè)置成 400 像素,當然其他大小也可以,你高興就好。 Flash 的默認幀率好像是 12,改成 60,然后點【OK】,新建這個文檔。 文檔新建以后,各種面板可能不熟悉,也沒關(guān)系,不用理會,用快捷鍵把我們需要的代碼面板調(diào)出來就好。 2、打開代碼面板 Windows 快捷鍵 【Alt + F9】 Mac 快捷鍵 【option + F9】 會出現(xiàn)下面這樣的面板 為了保護眼睛,我把面板背景色設(shè)置成了黑色,大家代碼面板應(yīng)該是白色的。 3、復(fù)制粘貼代碼 復(fù)制下面的代碼,粘貼到 Flash 代碼面板里 var box:Shape = new Shape(); var i:int; var count:int;addChild(box); box.y = stage.stageHeight/2;//可以把 "=" 后面的值換成 0 ~ 400 之間的數(shù)字,發(fā)布看有什么效果addEventListener(Event.ENTER_frame, wave);function wave(e:Event) { count += 1.5;//可以把 "1.5" 替換成其他數(shù)字,發(fā)布看有什么效果 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(); } 粘貼進代碼面板
字體顏色我也設(shè)置過,所以看起來和大家會有些不同,但不影響效果 4、運行動畫: Windows 快捷鍵【Ctrl + Enter】 Mac 快捷鍵【? + Enter】 如果一切正常,應(yīng)該能看到下面的波浪動畫
代碼里有些數(shù)值可以改一下,試試效果有什么不同, 下節(jié)課,我要介紹一個動畫好幫手:GASP 堪稱業(yè)界良心的動畫引擎,別擔(dān)心,依然是復(fù)制粘貼代碼就可以看到動畫效果。.
19
評論區(qū)(0)
正在加載評論...