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

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

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

 

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


留言列表 (8)

發表留言
  • 小寶
  • 謝謝你~

    謝謝你的教學, 很詳細呢~
    我以前也有想過到底要怎麼做~

    不過想請問一下, 第一步要怎樣才能分割字母的線條呢?
    這步驟用fireworks可以嗎?
    謝謝~
  • Firework我沒有用過,
    因為不清楚Firework的功能,
    所以也無法告訴你可不可以,
    我都是用CorelDRAW來處理的,
    或是你如果會用Illustrator也可以,
    先把文字轉曲線或外框之;後,
    就可以對曲線進行編輯的動作。

    Soujiro.宗次郎 於 2009/12/17 09:18 回覆

  • 和
  • 轉換成曲線之後,要怎麼才能編輯
  • CorelDRAW左邊的工具列上有一個「造形工具」,
    用這個工具可以對曲線進行編輯,
    除此之外,
    也可以與「修剪」工具來搭配運用,
    以M為例,
    先復製一個M,
    這是為了對準原本的位置,
    其中1、2原本與3、4、5、6是連在一樣的,
    此時可以先用「造形工具」把3、4、5、6上的結點去除,
    這樣就會只剩下1、2的部份,
    接下來要是要將1與2分離,
    在此先畫一個矩形,
    把這個矩形轉45度,
    把矩形與1的部份重疊,
    在此用時選取1、2與矩形,
    然後用「交叉」的修剪工具,
    使用之後,矩形與1、2重疊的部分就會被分離出來,
    這也就是1的部份,
    那2的部份呢?
    先選取1、2,
    按住Shift再選矩形,
    然後用「修剪」工具,
    此時1、2與矩形重疊的部份就會被修剪掉,
    剩下的部份也就是2了。

    另外,
    一個要注意的地方就是,
    為了對準原本文字的位置,
    所以編輯前記得先複製一個物件出來再進行編輯。

    就如我在文章一開頭所說的,
    要看懂這個教學還是需要先對於Flash及CorelDRAW的操作已經有一點了解的人才可以理解的。

    Soujiro.宗次郎 於 2010/01/23 16:13 回覆

  • 和
  • 轉換曲線之後,要如何進行編輯
  • 因為用文字來說明的確不太容易,
    希望上面的說明你可以看的懂,
    如果還有什麼問題的話,
    也可以再提出來討論。

    Soujiro.宗次郎 於 2010/01/23 16:15 回覆

  • maizizi
  • 不可以用筆畫,寫出來呀!?
    我寫出來都這樣...分圖層也一樣
    主要的底圖是一張圖片無法轉為向量呀!?
    http://www.youtube.com/watch?v=7j75NYs-w6A
  • 基本上若是圖片大多無法轉成向量,
    文字一定要用向量軟體打出來,
    並將其一筆一畫分開才行。

    不然就是在Flash裡打出文字,
    然後將文字打散成色塊,
    再用修剪的方式將一筆一畫分開。

    重點在於文字的一筆一畫是要分開的,
    但若像是國字的「一」或「二」還是「三」之類的,
    當然就不用這麼麻煩了。

    Soujiro.宗次郎 於 2010/05/06 20:49 回覆

  • maizizi
  • 那若沒有那字型卻必須要做這樣樣的效果
    檔是企畫給的,但沒有原檔這就無法做出這樣效果了嗎?
  • 正所謂條條大路通羅馬,
    所以方法也不是只有一種,
    若沒有這樣的字型,
    可以用向量繪圖軟體描出那些字,
    只是會花比較多的時間,
    有一點誤差,
    眼睛應該看不太出來,
    然後用這些自己描出來的字來做效果,
    原本的字應該是可以用Photoshop把他給修掉。

    Soujiro.宗次郎 於 2010/05/07 22:58 回覆

  • maizizi
  • 不好意思,再尋問一個問題!
    為何我用flash移動補間畫面會抖是圖片太大張嗎?還是移動的範圍太多?
    我有把圖片轉為元件了!請問要怎麼解決這問題?

  • 由於沒有看到實際的情況,
    所以很難斷定,
    一般來說,
    移動補間動畫是由電腦自己判斷該怎麼動,
    所以動作不能太複雜,
    當然也有可能是時間太短但移動的距離太大,
    這樣看起來會像是用跳的。

    Soujiro.宗次郎 於 2010/05/10 12:14 回覆

  • 訪客
  • 我也遇到這問題~公司有請人做好AI檔和jpg檔的賀卡~但是也是要有寫字效果...
    原本是說要用jpg檔來做成有寫字效果的gif檔...但是問很多人好像都不太可能= =
    想請問如果用以拉做的話要怎麼做?或是還有什麼方式可以做??
    或是可以付你1千請你代做嗎 = =?
  • 做gif應該是可行的吧!
    只是要花時間。

    先用以拉把每個筆畫分開,
    如"王"字,
    就是把三橫一豎都分開成四個筆畫,
    然後再用遮罩的方式,
    讓筆畫慢慢的順著筆順的方向出現,
    可能光一個筆畫就要分好幾個畫面的圖片,
    這樣串成動畫後才會順。

    不知道您的成品是做成怎樣,
    有圖片可以看,
    讓我了解一下嗎?
    可以的話,
    說不定真的可以代做。

    聯絡方式:ljy22006@ms5.hinet.net

    Soujiro.宗次郎 於 2011/11/08 13:08 回覆

  • 訪客
  • 可以解釋一下 「CoreDraw的打散成曲線」是怎麼做的嗎??

    是要如果做才可以把文字分段呢???
  • 不好意思,
    很久沒有上部落格,
    現在才看到留言。

    打散成曲線的做用在於例如要將「二」拆成兩個「一」的時侯才有用,
    而無法直接將比文字分段。

    若要分段的話,
    可能就要用到「裁切」或是「修剪」的工具,
    以此案例第一個英文字母M 的1、2筆劃為例,
    首先先在原地復製貼上,
    等於兩個物件會重疊在一起,
    再畫一個方型,
    將方型轉45度,
    然後移至此筆劃的左半部,
    用此方型去修剪這個筆劃,
    修剪後,
    此筆劃就會剩下右半部,
    因為之前有原地復製貼上,
    所以原地點還有同一個筆劃在,
    此時再用修剪下來的右半部去修剪這個筆劃,
    就會得到左半部,
    如此一來,
    這個筆劃就被分成兩半了。

    Soujiro.宗次郎 於 2014/09/03 18:40 回覆

【 X 關閉 】

【PIXNET 痞客邦】國外旅遊調查
您是我們挑選到的讀者!

填完問卷將有機會獲得心動好禮哦(注意:關閉此視窗將不再出現)

立即填寫取消