• 23

SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

今天跟他拼了...工作先放一邊,分享分享分享啦......
主要的動態部分我是用FLASH製作的

首先畫好向量的圖形,這時一邊畫也要一邊分元件...不然到時要串動態時就麻煩囉...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

再來最先製作的就是惡魔的尾巴,這花了我好多時間呀...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

扭上去...又扭下來
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

共畫了24張圖檔...哈哈,記得第24張完後會接回第1張,所以24格不可以與第1格重複,不然動作就會卡一下...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

雖然不見得看得到...翅膀還是做一下動態吧...拍拍拍...其實動起來還蠻可愛的
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

惡魔要放魔法囉...手舉起來...整隻手臂要拆成3個元件,中心點要設在支點,譬如上臂中心點設在肩膀,下臂設在手軸關節處,手掌設在手腕處...下臂上升時動作會比上臂上升幅度大,上舉後上臂的上升幅度就大於下臂囉...手掌也要注意動作...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

手放下時也要注意自然性,放下的動作並不會跟上舉時一樣喔...要優雅
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

接下來球要出現囉...先把元件設好...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

球本身也要坎入動態...先設遮罩...再用色塊滑動
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

看...會閃囉
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

球出現也要做些效果...先匯出球到Photoshop...然後用濾鏡的扭轉效果...分批製作幾個強度不同的點陣圖...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

匯入Flash後調整透明值...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

讓透明值低一點
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

將...將...出現
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

接下來製作球炸裂光芒,用Photoshop製作一連串的閃光圖形
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

匯入FLASH...閃
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享


SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

哇...My eyes...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

魔法放出後...當然要有效果囉...先將想要動的地方製作成元件...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

在往後的影格中製作變形動態,植物部分向斜上扭一下上葉子也向上搖動,惡魔部分因為所站位置改變了,所以也要製作移動影片...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

再來要回歸原位囉,風向上吹時動作較慢...所以影格要多一點...而且要設加速100,回來時要設減速80...這樣會更自然...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

這樣還感覺不出真的有風...所以我們再加點東西...風吹當然就葉子飄囉...所以來設葉子的元件...要求自然當然葉子必須要所有面都畫出來囉...共14張讓葉子轉一圈
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

接下來設導引線...讓葉子的由下而上被風吹起
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

然後不同時間點,不同位置,不同大小的葉子必須一一就定位...這是大部分葉子的飄動軌跡...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

當然我最喜歡的小惡魔出現囉...他代表新生...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

軌跡也要設好...因為是重點所以出現的軌道也刻意讓他高調點...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

葉子與小惡魔的動態軌跡
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

放完魔法後所有物件的動態軌跡
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

因為Flash轉的Gif檔品質極差...所以還要加點工,先匯出成AVI檔
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

其實這裡寫的很簡略,因為中間有太多的細節如果一一寫出來可能花個3天都寫不完...(不是我要暗坎喔)...過程其實最要注意的是所有動態物件的影格分配,因為動畫撥完之後會從頭撥映...所以整段動畫影格數必須是每個動畫元件的影格數的公倍數...這個很重要,舉例說尾巴24格、翅膀12格、葉子10格,那整段動畫一定得120格、240格或360格結束,一格也不能多,也不能少。


匯出的檔案
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

接下來要用Ulead GIF Animator 5轉檔
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

設完畫布大小後直接將AVI檔拉進來...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

另存為Gif檔...用他預設值就蠻漂亮囉...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

然後就要用Themes Creator製作主題檔案囉...需要的檔案大小Themes Creator裡均會清楚標明的...我的習慣會先分類好我要製作的項目分類
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

接下來就用Photoshop製作相對應圖檔囉...記得透明色要存PNG檔
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

再來就是一一匯入囉...
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享


順便附上檔案囉...有想要的朋友們可以直接從這邊下載

SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

01版本-176X220與240X320都有喔
附加壓縮檔: 200802/mobile01-e153634805cd48896929a4bb2e277260.zip

小綠球版本-176X220與240X320都有喔
附加壓縮檔: 200802/mobile01-b00bd7dc8fb277c0301a55f4ad91de2e.zip


再附上系列動態圖檔

待機桌布
320X240
01版本
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

Flash-SWF Lite
附加壓縮檔: 200712/mobile01-e8d37e01ad253e924d2420e9f0d63274.zip

小綠球版本
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

Flash-SWF Lite
附加壓縮檔: 200712/mobile01-899aaa269593a58f8a162df71fa2bb8d.zip

220X176
01版本
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享
小綠球版本
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

開機畫面
320X240
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享
220X176
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

螢幕保護
320X240
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享
220X176
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享

選單背景
SE主題比賽 - 潘朵拉系列-森與風 - 製作分享


喔喔喔...我終於寫完囉.......我慘囉...

我要去趕稿囉...今天不用睡覺了...呵呵...好久沒有熬夜了...


2007-12-06 0:05 發佈
真的很漂亮,可惜我沒se的手機>"<
筆者尤其羨幕會用 PHOTOSHOP 的人,似乎任何圖他都做的出來,真是高竿!

感激大大圖文並茂的辛苦分享!

痛哭流涕的感激!
太強啦~~~

好厲害喔!!!!
太強啦~這種東西只能用跪的來答謝了...
moomoos wrote:
主要的動態部分我是用FLASH製作的


真是堅強的動畫實力啊.....

有一點不解...既然花這麼多工夫做細膩的FLASH動畫,不是直接給SWF檔做桌布就好了....
是為了那些不能用SWF的機型才花那麼多功夫去轉成GIF嗎?
還是說, ADOBE FLASH剛好只是你做動畫時的慣用工具而已?
亦或是原來的SWF在手機上會有執行效率的問題呢?

真是非常期待你這系列的另兩個作品呢~





~ 臨.兵.鬥.者.皆.陣.列.前.行 ~
雖然小弟的手機是N95,無法使用,但是看到這個主題,還是不得不對你束起大姆指,這帖真的太屌了~~

lyou wrote:

是為了那些不能用SWF的機型才花那麼多功夫去轉成GIF嗎?
還是說, ADOBE FLASH剛好只是你做動畫時的慣用工具而已?
亦或是原來的SWF在手機上會有執行效率的問題呢?...(恕刪)




我猜可能是為了流通性吧?

只用SWF的話本來就應該會較吃資源, 而動態GIF對很多機種來說都能用,
作者真是太用心太厲害了 = =||||


大喊Bravo!!!
大~家~好~
+5分~~~感謝~五分奉上囉~~

光是看教學就受益良多了
Jacketchou
我回來了...真的沒睡覺...難得又看到日出了...而且還陰天看不到太陽...
其實我並不是不用SWF檔做桌布...因為這段動態有太多圖形以及節點...以手機的處理器而言似乎是無法負荷
所以只好轉成GIF了...
  • 23
內文搜尋
X
評分
評分
複製連結
請輸入您要前往的頁數(1 ~ 23)
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?