國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
31
第三章、 壞牙齒查理腳本與概念
第一節 執行軟體介紹
在第一階段草稿的部分，考量畫面修改方便性，筆者選擇向量繪圖軟體 Illustrator，畫面主架構確認之後才進入像素繪圖軟體 Painter 進行主要的創作，並 以 Photoshop 輔佐調性的修改，最後動態呈現的方式因為網頁工作背景，也考量 網路作品呈現的方便性，使用 Flash 做編輯，完成檔案配合主流瀏覽器使用習慣，
以及瀏覽器呈現設計，將以 Html 鑲嵌 swf 檔案方式呈現，畫面大小為 1000 X 585 畫素，300dpi，畫面大小不可依螢幕尺寸縮放，但背景可延伸，無邊框限制（如 下圖所示），另外雖然網頁格式對畫面解析度要求較小，但考量後續發行的可能性，
在畫面執行的部分，將以 300 dpi 執行，在動態編寫階段再進行檔案降階。
圖 3-1 不同尺寸螢幕的畫面延伸設計
表 3-1 軟體列表
草稿設計 Adobe Illustrator CS4
畫面執行 Corel Painter11、Adobe Photoshop CS4 動態執行 Adobe Flash CS4
網頁呈現 Dreamweaver
1000X585
‧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
33
第三節 壞牙齒查理畫面設計 表 3-2 風格嘗試
風格嘗試 1
風格嘗試 2
風格確定
經過不同風格的線條和顏色測試，確定第三版為最後呈現方式，刪除線條主 要原因為，動態編輯上元件拆解需要較多時間，另外為吸引兒童目光，人物顏色 飽和度調高，並利用深色背景映襯主角，營造背景空間，並將其設定為太空村落
「史邁爾村」，整體氛圍營造將以此概念做延伸，顏色也以此做為標準。畫面執行 主要分為三個階段，第一階段草稿部份，主要進行畫面構圖設計，與圖文比例的 配置思考，所以進入第二線稿階段，畫面結構已大致確定，但部分地方進行二次 構圖檢討，第三階段為上色與細節調整，除了色彩需要考慮，豐富畫面的細節處 理也在此階段一併完成。
‧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
35
遊戲小幫手 點選此功能，畫面彈出視窗，解釋各畫面中互動遊戲的使用方式
音樂 開啟或關閉背景音樂。開啟音樂的時候背景音樂將持續播放，不 會因換頁中斷。
導讀 開啟或關閉導讀
笑臉統計 活動介紹：
在各畫面中設計互動遊戲，蒐集滿 32 個微笑符號始能打開隱藏的 單元，提供使用者回饋獎勵，以提高參與度。
「微笑蒐集」活動文案：
你知道每個人一生中最多可以有 32 個牙齒嗎? 每一顆牙齒對我們 的微笑都十分重要，找出每一頁畫面中隱藏的微笑符號，蒐集滿 32 個你就可以打開隱藏的單元!!
滑鼠識別 為清楚區別畫面上有無互動，設計圖示取代傳統小手，滑鼠滑入 無互動的區塊滑鼠為一般綠色牙齒，滑入有互動設計的區塊時，
滑鼠變成黑色的蛀牙。