第五章 設計創作論述
5.4 作品呈現與執行
本創作選定 100 個常用手語單字基本用語作為本次設計，除了動態圖像的手語 圖形記憶學習外，作品也透過行動裝置應用程式(APP)設計的呈現，讓動態圖像 更加完整的應用在學習上，增加學習的互動，透過交互的設計提升使用者學習的 興趣，並帶來學習上的成效。以下作品為手語詞彙與 app 設計：
（一）動態圖像設計應用於手語作品 1. 100 個常用詞彙之動作設定
經過了研究方法的角色設計並實驗研究完成後，原有的角色設計臉部呈現縮下 巴，這有可能誤導觀看者觀看臉部表情，而本次創作已在臉部表情上經過了修正，
以及在手勢上的優化（圖 36），以下為 100 個手語動態辭彙之作品圖表（表 7）。
每個詞彙正面與側面之呈現
49
圖 36 左圖為實驗研究的原本設計，右圖為修正後的創作
表 7 100 個手語辭彙動態截圖作品圖表
fat 胖 thin 瘦
know 知道 dontknow 不知道
go 去 come 來
50
thick 厚 light 薄
night 晚上 noon 下午
want 要 motorcycle 摩托車
thanks 謝謝 sorry 對不起
51
feel 感覺 happy 快樂
afraid 害怕 short 矮
mrt 捷運 misunderstand 誤會
job 工作 no 不
52
not 不是 think 心想
disappointed 失望 dream 作夢
forget 忘記 man 男
expensive 昂貴 cheap 便宜
53
yes 是 home 家
remember 記得 high 高
subway 捷運 2 buy 買
hungry 餓 worry 擔心
54
doctor 醫師 medicine 藥
people 人 female 女生
daughter 女兒 bus 巴士
sport 比賽 train 火車
55
father 父親 they 他們
brother 兄弟 taipei 台北
taiwan 台灣 mother 母親
name 名字 old 老
56
teacher 老師 self 自己
son 兒子 child 兒童
sister 姊妹 friend 朋友
brave 勇敢 see 看
57
ask 問 teach 教
love 愛 talk 說
write 寫 help 幫忙
hearing 聽人 deaf 聾人
58
dislike 不喜歡 outside 外
angry 生氣 young 年輕
you 你們 hope 希望
us 我們 that 那
59
why 為甚麼 what 甚麼
taxi 計程車 heavy 重
time 時間 store 商店
this 這 like 喜歡
60
toilet 廁所 thirsty 渴
wait 等 give 給
open 開 hotel 飯店
bike 腳踏車 inside 裡
61
slow 慢 light 輕
bank 銀行 school 學校
close 關 nurse 護士
本創作整理。
62
2. 執行製作
依據 100 個手語詞彙手勢，在實際製作階段中，首先角色人物設定必須在製作 動態前確定，國際手語部分透過專業的手語老師吳牧師協助拍攝影片，之後進行 手勢的描繪，描圖也必須考慮到側邊，工作狀況如下（圖 37）所示。
圖 37 執行的前置作業-國際手語「姊妹」。
開始進入軟體的動態設計，軟體版本為 Adobe After Effect CC 2015.3，無使用外 掛插件，物件的命名上，R 表示在右半邊的物件（也就是人物的左半），L 反之。
首先將人物 AI 設計稿拆層並匯入 After Effect （以下簡稱 AE），再將 AI 檔全部 轉換成 AE 的形狀。為了能較靈活地彎曲，決定直接在 AE 裡重新以 path 線條繪 製手臂。（正、側面同） 如下（圖 38）所示。
圖 38 AI 檔全部轉換成 AE 的形狀。
63
之後選取頭部物件，點及滑鼠右鍵選擇 pre-compose，將頭部先包在一個合成裡，
以利製作。（正、側面同）如下（圖 39）所示。
圖 39 點及滑鼠右鍵選擇 pre-compose。
製作袖子方面，因希望袖子可以跟著手臂做相同的變形，這邊使用到子母屬性
（Expression pick whip）的功能，製作共有四階段，以下進行解說。
(1) 首先複製貼上一個 armL，命名為 sleeveL，並將此線段圖層的屬性欄展開找到 Path 屬性，按住鍵盤 Alt 鍵滑鼠點擊 以新增表達式，點擊後會看到 Expression 欄位被呼叫出來（圖 40）
圖 40 複製貼上一個 armL 命名為 sleeveL。
64
(2) 將 armL 圖層的屬性欄展開，找到 Path 屬性，滑鼠點擊所叫出的 Expression 欄位裡的螺旋圖示（Expression pick whip） 不放，拖曳至 armL 的 Path 屬性層，
意即新增表達式 thisComp.layer("armL").content("Shape 1").content("Path 1").path。此 作法可使 sleeveL 的 Path 屬性等同 armL 的 Path 屬性，做到變形連動的效果
（圖 41）。
圖 41 找到 Path 屬性叫出的 Expression 欄位裡的螺旋圖示。
(3) 袖子過長，這裡使用 Trim Paths 的功能將線段截短：點擊 Add 旁邊的小箭頭，
選擇 Trim Paths（圖 42），並打開 Trim Paths 屬性將 End 調整為 96%。
圖 42 打開 Trim Paths 屬性將 End 調整為 96%。
65
(4) 接著由於剛剛將 Line Cap 的模式切換為 Butt Cap，肩膀缺了一個半圓，所以 在不選取任何圖層的狀態下，快點兩下圓形形狀工具新增一個圓形命名為 shoulder cup L，Fill 選擇袖子顏色，Stroke 調整為無，找到 size 屬性，調整為 40,40，
並將其移動到肩膀的位置（圖 43）。另一邊重複同樣的步驟做出 sleeveR。
圖 43 調整為 40,40 並將其移動到肩膀的位置。
綁定手掌方面，為了讓手掌跟著手臂的前端移動，這裡使用到 Expression pick whip、Trim Paths、sourceRectAtTime() ，三種功能配合。前兩者在製作袖子的步 驟中經解釋過，而 sourceRectAtTime()是一個可以抓出圖層邊界的表達式。利用 Expression pick whip 做到變形連動後，再利用 Trim Paths 將線段截短到只剩下一 個極小的點，最後利用 sourceRectAtTime()抓到小點的邊界，而因為是極小的點，
所以點的邊界近乎為點的位置，如此就能指定任何物件的位置為此位置；製作方 面分四階段，以下進行解說。
66
(1) 首先直接複製貼上一個 sleeveL，如此就可以得到一個已經做好變形連動並設 有 Trim Paths 的圖層，重新命名為 armL_bottom，並將 Trim Paths 屬性中 Start 的表 達式欄位呼叫出來，輸入 99.999；End 調整為 100%，如此就會得到極小點
（圖 44）。
圖 44 輸入 99.999；End 調整為 100%。
(2) 任意新增一個形狀或空物件(null object)，命名為 hand follow L，在此物件的 Position 屬性新增以下表達式：
target = thisComp.layer("armL_bottom");
sRect = target.sourceRectAtTime(time,false);
target.toComp([sRect.left,sRect.top])
這段表達式大致上的意思是：指令 target 為 armL_bottom 的屬性，又令 sRect 為 target 的邊界，此位置為 target 的 sRect 中的（右邊界值, 上邊界值），而“ . ”在表達 式中是「的」的意思，為方便替換，這裡是用另外的物件做跟隨而不是直接用手 掌。完成表達式後就會發現該物件已經移動到手臂的前端了（圖 45）。
圖 45 這裡是用另外的物件做跟隨而不是直接用手掌。
(3) 接著使用中心點工具將手掌的中心點調整到適合的位置後，按住鍵盤 Shift 鍵滑鼠點擊手掌圖層的螺旋圖示不放並拖曳到 hand follow L 圖層，使手掌成為
67
hand follow L 的子圖層，並把 hand follow L 圖層眼睛圖示關閉。子母圖層概念：
子圖層會跟隨母圖層的動作，但母圖層不受子圖層的動作影響（圖 46）。僅點擊 螺旋圖示拖曳是在不改變現狀下，子圖層的其他時間點將跟隨母圖層；若拖曳同 時按住 Shift 鍵不放則可以讓子圖層的位置、旋轉、大小對齊至母圖層。
圖 46 子圖層的其他時間點將跟隨母圖層。
(4) 最後回到 armL_bottom 的 Trim Paths 屬性，調整一下 Offet（偏移），使手掌（極 小點）移動到適當的位置（圖 47）。
圖 47 調整一下 Offet（偏移）。
正面頭部設定方面各有三階段，以下進行解說。
(1) 轉頭時頭髮的中間部分會稍微偏移，故在匯入前有先將頭髮分為兩部分，分 別為（圖 48）中間部分 hair_center 左 1 及基底 hair 左 2，影子部分也依照頭髮分 為 hair_shadow_center 左 3 及 hair_shadow 左 4。
68
圖 48 轉頭時頭髮的中間部分會稍微偏移。
(2) 轉頭時會露出後半圈的頭髮，所以需要將基底的 hair 往左右即上方延伸，再 複製一個 face 圖層做 Alpha Matte （遮罩/蒙版）（圖 49）。
圖 49 轉頭時會露出後半圈的頭髮。本研究整理。
69
(3) hair_center 和 hair_shadow 在轉頭時兩邊會超出去所以也各複製一個 face 圖層 做 Alpha Matte。另外，將 hair_shadow _center 圖層 Parent 到 hair_center；hair_shadow 圖層 Parent 到 hair 圖層，使影子跟隨頭髮移動（圖 50）。
圖 50 在轉頭時兩邊會超出去所以也各複製一個 face 圖層。
耳朵方面，轉頭時耳朵一隻在臉前一隻在臉後，所以複製一組耳朵，重新命名 為 Rear_F 及 Lear_F，並 Parent 到 Rear 及 Lear，再在將兩組耳朵圖層分別移至最 上層與最下層（圖 51）。
圖 51 將兩組耳朵圖層分別移至最上層與最下層。
嘴巴方面，有需要張開嘴巴的動作時，再 mouthLINE 圖層的 Content 中複製一 個相同 Shape 來做嘴巴開合（圖 52）。
圖 52 再 mouthLINE 圖層的 Content 中複製一個相同 Shape 來做嘴巴開合。
70
轉向控制方面各有三階段，以下進行解說。
(1) Layer > New > Null Object 新增一個空物件，命名 Turn，將該物件中心點移至 物件中央，並將物件移到臉的中間（圖 53）。
圖 53 將物件移到臉的中間。
(2) 除了耳朵、臉，以及已經有母圖層的圖層外，其餘圖層都 Parent 到 Turn 圖層 上，如此就能透過空物件一次移動所有物件（圖 54）。以單字 “Not” 為例，要 將臉往右轉，就在 Turn 的 Position 上新增 keyframe 並按 F9 使動作出入點緩和化 (Easy ease)，往後新增第二個 keyframe，並將物件往右移動。而 hair_center 會更往 右偏一點，所以在同樣的兩個時間點也在 hair_center 的 Position 上設 keyframe 做 微調（圖 55）。
71
圖 54 其餘圖層都 Parent 到 Turn 圖層上。
圖 55 Position 上設 keyframe 做微調。
(3) 耳朵的部分，同樣以單字 “Not” 為例，臉往右轉時 Rear 應向左移動；Laer 向右移動，因為 Rear 在臉之後，所以把 Rear_F 圖層這段的透明度設為 0，或者 截掉（圖 56）。
圖 56 把 Rear_F 圖層這段的透明度設為 0。
72
側面頭部設定方面各有三階段，以下進行解說。
(1) 頭髮：同正面，頭髮分為兩部分（圖 57）左 1、左 2，並做延伸及 Alpha Matte。
與正面不同的是，因為側面頭髮有超出臉的輪廓線，做 Alpha Matte 的形狀是取 臉加上頭髮的輪廓（圖 58）。
圖 57 同正面，頭髮分為兩部分。 圖 58 取臉加上頭髮的輪廓。
(2) 臉：眉、眼、嘴：複製一組眉毛、眼睛往左移至以鼻子為中心對稱的位置，
再從正面頭部的合成中複製嘴巴到這個合成裡，對齊到原本嘴巴的位置，並分別 複製 face 做 Alpha Matte（圖 59）。
圖 59 分別複製 face 做 Alpha Matte。
(3) 鼻子：由於側面鼻子跟臉的顏色一樣，頭向右轉時進到臉輪廓線以內的範圍就會無法辨識，
因此要做一個可調整的陰影。先新增一個深色色塊緊鄰鼻子右側，然後複製一個鼻子，將複製出
來的鼻子，做為深色色塊的 Alpha Matte，並連同深色色塊一起 Parent 到原本的鼻子（圖 60）。
73
圖 60 將複製出來的鼻子，做為深色色塊的 Alpha Matte
轉向控制方面：和正面一樣新增空物件，中心點調整至中央，位置移至鼻子，
將頭髮、眉、眼、嘴、耳都 Parent 到空物件，需要轉頭的時候即可以此空物件控 制，各部位再做微調。鼻子因為不論轉左轉右都是往右移動，所以需要單一調整，
往作轉時就直接往右移即可，往右轉時則須讓前一步驟所設置的深色色塊相對於 鼻子往左移動，使陰影出現（圖 61）。
圖 61 和正面一樣新增空物件，中心點調整至中央。
圖 61 和正面一樣新增空物件，中心點調整至中央。