如果常的在上網的朋友們,
應該不難看到這種像寫字特效吧!
這種特效看起來真的很炫,
就像真有一枝筆在螢幕上慢慢的把字寫出來一般,
但這樣的特效又要如何做出來呢?
想必一定不少人想要知道吧!
以下是就我個人可理解的範圍,
用我所知道的方式所完成的一個作法,
但可能需要先對於Flash及CorelDRAW的操作已經有一點了解的人才可以理解的。

01.gif

去年聖誕節的時侯幫朋友的公司做了一張聖誕電子賀卡,
當時他們老闆要求這字一定要用「寫字特效」,
因為是老闆的要求,
也就只好接受了,
不過也因此才有機會整理出這個教學。

02.gif

首先,
Flash可以接受像量的檔案,
所以我們先用CorelDRAW或是「以啦」等向量軟體打出我們需要的文字,
並將原本的文字「打散成曲線」,
打散成曲線之後才能方便編輯,
將打散後的文字以你想要的筆畫進行分段,
每一個段落以不同的顏色的區分,
這樣做是為了讓自己可以辨識出不同的筆畫段落,
以上圖的M為例,
1~6則是我心中預想的筆順。

03.jpg

文字的部份初步處理好後,
接著我們開啟Flash軟體。

04.jpg

點選上方的「插入」-->「新增元件」

05.jpg

由於我們接下來要做的是一段影片,
所以這此選擇插入的是「影片片段」,
然後在上方輸入你想要的名稱,
在此我取的名稱為「Merry」。

06.jpg

接下來我們要先回到CorelDRAW或是「以啦」,
把我們剛剛分段成很多片段的文字給復製起來,
在此我們先復製「Marry」的部份,
然後選擇「編輯」-->「在中央貼上」。

07.jpg

貼上後的效果就像上圖一樣,
由向量軟體貼過來的時侯,
每個段落會自成一個群組,
一個藍框就代表一個群組。

08.jpg

接著我們按下「新增圖層」的按鈕,
為了方便操作,
我們要先將不同的「段落」放到不同的「圖層」。

09.jpg

所以在新增圖層後,
在第二個筆畫上點一下,
使其變成選取狀態的藍框,
然後將其「剪下」。

10.jpg

剪下後,
我們點一下「圖層2」,
使「圖層2」反白,
這代表我們來到了「圖層2」,
然後為了使貼上的段落可以在原始的位製上,
所以點選上方的「編輯」-->「在原地貼上」,
這樣「剪下」來的部份就會「貼上」在相同的坐標點上。

11.jpg

依照上方相同的步驟,
因為我把「Merry」分成了18個段落,
所以最終我把它分成了18個圖層。

12.jpg

為了辨識,
我也把原本的圖層名稱改變成01~18。

13.jpg

接下來我們需要做一個用來當「筆頭」的圓點作為「遮色片」

14.jpg

為了接下來方便重覆取用,
所以我們新增一個「圖像元件」。

15.jpg

新增圖像元件後,
我們即直接進入名為「遮色片」的圖像元件中,
因為是要用來當筆頭用的,
本人試過後,
還是圓形比較適合。

16.jpg

此時我們在「遮色片」圖像元件中畫一個圓,
至於是什麼顏色並沒有關係。

17.jpg

但因為我原本的文字是白為,
為了與文字作出區別,
所以我決定換個顏色。

18.jpg

我把「遮色片」圖像元件裡的圖點變成了黑色

20.jpg

接下來在右方「元件庫」中的「Merry」影片片段上點兩下,
這樣成讓我們進到「Merry」的影片片段中,
進入影片片段後將所有圖層隱藏。

21.jpg

隱藏所有圖層後,
先把第一筆順的「01」圖層打開,
這時我們可以看到第一個筆順出現在畫面上。

22.jpg

此時我們在「01」圖層上再新增一個圖層

24.jpg

我這時新增出來的為「圖層22」,
把先前做好的「遮色片」圖像元件接進「圖層22」中,
並放在筆畫開始的那個點上。

25.jpg

我預設要讓我個筆畫有個格的時間來運行,
然然要用幾格來完成,
全由我們自己來決定,
所以我在「01」的圖層上用「插入影格」的方式將其延長至第三格。

26.jpg

而在「圖層22」的部份,
因為這個圓點需要有形態上的改變,
所以在第三格的地方「插入關鍵影格」。

28.jpg

接下來我們來到「圖層22」的第三影格,
對圓點使用「變形」工具。

29.jpg

使用變形工具後,
我們可以隨意的將物件放大或縮小,
因為這個黑點是要用來當遮色片用的,
遮色片的原理就是被「遮色片」遮到的件件才看的到,
因為在第一影格時「黑點」跟「第一筆順」是沒有重疊的,
所以會看不見「第一筆順」,
然後在第三格的時侯,
我們要讓「第一筆順」完全出現,
因此「黑點」需要整個將「第一筆順」遮住才行。

30.jpg

拉大之後,
接下來就是要在黑點的第一至第三影格間「建立移種補間動畫」,
這個步驗可以讓黑點由第一格的「小黑點」,
慢慢的變成第三格的「大黑點」。

31.jpg

變大的動畫作好後,
接下來在「圖層22」上按一下右鍵,
選取「遮色片」。

32.jpg

這樣「圖層22」就會變成一個真正的遮色片了,
而被遮色片包覆的正是下方的圖層「01」。

33.jpg

這時進入時間的第一影格,
在畫面上是完全看到不東西的。

34.jpg

接著進入第二影格時,
可以看到第一筆順出現了一點點。

35.jpg

在第三個影格的時侯,
第一筆順就完全出現了。

36.jpg

第一筆順完成後,
我們先把圖層「01」及「圖層22」隱藏。

37.jpg

因為「第二筆順」是接在「第一筆順」之後,
而「第一筆順」是結束於第三影格,
因此「筆二筆順」就接著由第三影格開始。

38.jpg 39.jpg

我們在圖層「02」上按著影格

40.jpg

將圖層「02」的影格拖拉到第三影格

41.jpg

如同在作「第一筆順」時一樣,
在圖層「02」上新增一個圖層來作為「遮色片」之用。

42.jpg

將新增出來的「圖層24」的第三影片變成一個「空白關鍵影格」

44.jpg

將「遮色片」的圖像元件拉至「圖層24」中的第三影格

45.jpg

第二筆順後預設也是希望用三個影片的時間來完成,
所以在圖片「02」的第五影格上「插入影格」。

46.jpg

而作為圖層「02」遮色片的「圖層24」也有三格的時間來做變化

47.jpg

也是由「第三影格」慢慢漸漸變大至「第五影格」

48.jpg

使用「建立移動補間動畫」使其產生變化效果

49.jpg

最後再將「圖層24」變成圖層「02」的遮色片。

50.jpg

完成「第二筆順」的步驟後,
也是先將「圖層24」及圖層「02」隱藏。

51.jpg

就這樣,
每個筆順的做法皆相同。

52.jpg

53.jpg

接由上一個筆順的結束點開始

54.jpg

55.jpg

56.jpg

57.jpg

58.jpg

59.jpg

60.jpg

61.jpg

62.jpg

63.jpg

只是最後完成的時侯,
別忘了把每個筆順的影格都延申到最後一個影格,
不然每個筆順可是寫完就會因為影格沒有延申而消失的。

64.jpg

在此先以到「第三筆順」為例,
由於「第三筆順」最後是到影格7結束,
所以我們將圖層「01」在影格7上「插入影格」,
使其可以使其延申續存至影格7

65.jpg

接著解除每個圖層的「隱藏」

66.jpg

接著看看每個影格所出現的效果,
首先是第一影格。

67.jpg

第二影格

68.jpg

第三影格

69.jpg

第四影格

70.jpg

第五影格

71.jpg

第六影格

72.jpg

第七影格

 

依著上方的步驟,
一步一步來,
相信最後就可以完成像上方一樣的寫字特效,
不過…後來發現我M的第順好像有點搞錯了。

-----------------------------------------------

我的努力也需要您的鼓勵喔~
若覺得喜歡此篇文章的話,
別忘了點選下方的「推薦」,
這樣將有機會讓更多人看到此篇文章喔~

 

arrow
arrow
    全站熱搜

    Soujiro.宗次郎 發表在 痞客邦 留言(8) 人氣()