他是Dani，為他搭配合適場景的服裝，改變顏色、變換配件。你覺得Dani穿什麼好呢？
這個牛刀小試(ThingsToTry)程式設計活動將一步步引導你使用Scratch：熟悉角色的定位操作、變換場景、色彩效果，來一場時尚表演！
選擇一個場景：都市、舞會、或是海邊，選擇衣物和配件，創作特有風格的角色吧！
聲明：內容與圖像版權歸屬於 SCRATCH.MIT.EDU 。
由Scratch-TW進行中文化編輯、翻譯與衍生創作，製作者：方毓賢(YU HSIEN FANG)。
引用來源：https://scratch.mit.edu/go/Fashion Game
使用Scratch，兒童與青少年可以編寫程式來創作專屬的遊戲、故事、動畫以及更多的可能性。透過這個一個小時的Scratch活動，參與者將藉由搭配角色的服裝外觀來獲得寫程式的經驗。完成的作品也可透過網路分享給其他人。
MIT Scratch Team團隊提供了以下的教學素材與建議，可協助老師將這個活動帶入教室、圖書館或其他學習場所：
準備好開始了嗎？我們的建議如下
- 請先閱讀以下的活動指引，留意活動需準備的事項，建議導引者自己完整實作一次。
- 下載教育者指南中文版，導引者可更了解如何籌備教學活動。
- 下載活動卡片中文版，可印發給學員們。
- 前往ThinkinViz協力製作的時尚競賽-教學範例頁面，創作春天的故事。
- 如果遇到困難，可參考由ThinkinViz協力製作的Scratch Project: 時尚競賽 Remix。
第1步
活動前準備
- 確認活動場所是否有「網際網路連線」。這是一個需要電腦設備與網路連線的活動，務必事先確認。
- 建議教師可準備投影設備（例如：投影機）以便讓學生看見操作畫面。
- 學習註冊Scratch帳號，詳細步驟請查閱：Scratch註冊指引。
- 試玩時尚競賽 Remix，來激發靈感。
project: 時尚競賽 Remix (*僅於電腦上操作)，點綠色旗子開始；點紅色圖示停止。
- 點綠色旗子，衣服會回到原位
- 按一下：
- 空白鍵，變換背景
- 按鍵1，T恤會滑動到人物身上
- 按鍵2，褲子會滑動到人物身上
- 按鍵3，鞋子會滑動到人物身上
- 按鍵C，可以換長袖T恤或短袖T恤
- 按鍵V，可以換布鞋或皮鞋
第2步
開始程式設計
1. 註冊並登入Scratch
引導學生前往Scratch網站，註冊或登入Scratch帳號。
2. 看看程式作品成果
引導學生前往：時尚競賽-教學範例，準備開始製作程式。
3. 選擇角色
挑選角色的造型，來改變人物的模樣
現在，短頭髮的Dani站在舞台的左邊。其實Dani有好幾個造型，你可以從當中挑選一個。
首先，滑鼠點一下「角色區」中的Dani
藍色框框表示你目前選取的角色，如下圖：
接著，點一下畫面中間上方的「造型」分頁：
Dani這個角色有擁有三個不同的造型
用滑鼠點一下，舞台上的Dani就會變換造型
選擇一個你喜歡的造型吧！
好了，決定好角色
背景是白色的好單調
下一步，我們來選擇不同的背景吧。
<T> 小技巧
運用以下的功能，你還可以加入額外的角色
但是Dani的衣服可能不適合他們穿哦！
如果要刪除角色，你可以運用「剪刀」工具：
4. 挑選場景
選擇舞台的背景，切換不同的場景
很類似的概念，角色可以換造型，舞台也可以更換不同的背景哦！
首先，滑鼠點一下「舞台」的小圖示，如下圖：
出現藍色框框，表示你目前選擇的對象。
接者，點一下畫面中間的「背景」分頁：
舞台除了空白背景外，還有其他三個背景
用滑鼠點一下，就可以變換舞台的背景
選擇一個你喜歡的背景吧，例如：metro1
<T>小技巧：
運用以下的功能，你還可以加入其他的背景哦！
<C>小挑戰：
你可以從範例庫中，選出一個海邊的背景嗎？
請先嘗試看看，再看下面解答：
最後，你還可以加入一段程式積木，使用按鍵就可以變換舞台背景。
首先，用滑鼠點一下舞台的縮圖，確認藍色框框出現
再點一下「程式」分頁：
加入以下的程式積木：
加入的程式積木如下：
現在，按一下空白鍵試試看：
舞台背景是不是開始變換了呢？
做得好！
<C>小挑戰：
除了加入新背景，要怎麼把空白的背景刪除呢？
請嘗試看看哦！
5. 穿搭衣服
觸發按鍵，讓衣服滑行定位，穿搭不同衣服
現在我們可以幫Dani搭配衣服了，讓我們從上衣開始吧。
在舞台上，用滑鼠左鍵點著T恤，從右邊拉到Dani的身上：
接著，滑鼠點一下角色區的「Shirt」
確認藍色框框出現，如下圖：
接著，再點一下「程式」分頁：
加入以下的程式積木：
加入的程式積木如下：
(注意：每個人的數字可能會不一樣)
現在，你可以用滑鼠把Dani身上的T-Shirt移動到舞台上的任何地方。
接著，點一下「綠色旗子」：T-Shirt是不是又回到Dani身上了呢？
太酷了！
<C>小挑戰：
你能不能把褲子、鞋子也自動穿到Dani身上呢，就像T-shirt一樣。
請先嘗試看看，再看下面的示範：
<T>小技巧：
舞台範圍的座標表示圖
- x: 水平方向，從 -240到 240
- y: 垂直方向，從 -180到 180
都完成了嗎？現在把T-Shirt、褲子、鞋子
都移動到別的地方，再點一次綠色旗子，來看看效果：
很快地，Dani又穿好我們搭配的服裝了。
6. 變換衣服外觀
運用效果積木，改變衣服的顏色
現在，Dani身上有一套衣服了，但是每天穿同一套衣服好單調哦！
我們可以再加入其他的程式積木，讓同一件衣服有不同的顏色變化。
首先，用滑鼠點一下角色區的「Shirt」
確認藍色框框出現，如下圖：
再點一下「程式」分頁：
加入以下的程式積木：
完成的程式積木如下：
現在，試試看用滑鼠在T-Shirt上點一下
咦？衣服的顏色是不是不同了呢？
每點一下顏色都會不同哦，選出一個你喜歡的配色吧！
<C>小挑戰：
你能不能運用這樣的技巧，讓褲子的顏色也發生變化呢？
先嘗試看看，才看下面的示範：
7. 變換衣服樣式
觸發按鍵，變換衣服的造型
除了改變衣服的顏色，我們也可以運用角色不同的造型，讓衣服的樣式產生變化，例如：短袖T-Shirt變成長袖T-Shirt。
首先，我們要確認Shirt這個角色，有許多不同的造型，這樣我們才可以切換不同的造型。
先用滑鼠點一下角色區的「Shirt」
確認藍色框框出現，如下圖：
接著點一下畫面上方中間的「造型」分頁：
衣服除了短袖T-Shirt外還有一件長袖T-Shirt
用滑鼠點一下，就可以變換衣服的造型
現在，我們要換個方式：按下鍵盤的「C鍵」就可以改變短袖、長袖。
滑鼠點一下角色區中的「Shirt」，確認出現了藍色框框。
再點一下「程式」分頁
加入以下的程式積木：
完成的程式積木如下：
現在，按一下鍵盤上的「C鍵」，發生了什麼事情呢？
短袖變成長袖、長袖變成短袖
衣服樣式可以互相交換！
<C>小挑戰：
你注意到了嗎？Dani的鞋子也有兩種不同的樣式，
你能不能運用同樣的技巧：只要按下鍵盤上的「V鍵」，就可以變換不同的鞋子樣式呢？
先嘗試看看，再看下面的示範：
<!> 給引導者：
若有多餘時間，可以提問學習者：
- 如何加入更多的衣服造型：方式與加入新角色、新舞台背景，十分相似哦。
8. 角色歸位
讓角色與衣服回到最初的位置
還記得嗎？Dani身上的衣服、褲子、鞋子，在程式最開始的時候是在舞台的右邊。
我們想要讓程式一開始的時候（點下綠色旗子）
衣服都回到最初的位置：好像把衣服歸位放好。
一樣的，我們先試著把T恤放好。
首先，滑鼠點一下角色區的「Shirt」
確認藍色框框出現，如下圖：
再點一下「程式」分頁：
加入以下的程式積木：
加入的程式積木如下：
(數值可能會不同)
<T>小技巧：
在舞台上移動角色的時候，角色的座標(x, y)會自動跟著變化，
像下面這個樣子，請觀察看看：
好，現在點一下綠色旗子，來看看效果：
咦？效果怪怪的，T-Shirt只閃了一下
那邊可能有問題呢？
<!>給引導者：
可以嘗試引導學習者提出觀察與看法
並給學習者一些時間來想想看怎麼做
參考答案：
因為同時使用了[ 當 ⚑ 被點擊 ]，程式一開始就會同時執行兩個動作，造成效果怪怪的：
<!> 注意：
這個寫法不是錯誤，只是兩種指令重疊。有很多時候，反而應該採用這樣的設計。
可以修改如下：
現在，點一下綠色旗子，觀察看看有沒有以下的效果：
- T-Shirt出現在舞台右邊最初的位置
- T-Shirt滑動到舞台的左邊、Dani的身上
<C>小挑戰：
1. 運用上面的技巧，點一下綠色旗子，讓褲子跟鞋子也回到舞台的右邊。
2. 按下鍵盤的「2鍵」，褲子滑動到舞台的左邊、Dani的腿上
3. 按下鍵盤的「3鍵」，鞋子滑動到舞台的左邊、Dani的腳上
嘗試看看，再看下面的參考答案：
9. 成為服裝設計師
運用繪圖工具，改造人物與衣服
舞台上還有兩副眼鏡、一件襯衫、一件背心，
可以讓你搭配幫Dani搭配出最適合的服裝。
我們還可以運用繪圖工具：發揮自己的創意，改造服裝，成為服裝設計師。
首先，使用滑鼠點一下想要修改的角色，例如：T-Shirt
藍色框框表示目前選取的角色：
接著，點一下「造型」分頁，右方就是繪圖工具：
就好像小畫家一樣的功能，可以使用畫筆、著色、或是打字。
發揮創意改造服裝吧！褲子、鞋子、眼鏡、其他的衣服也都可以大改造哦！
你發現了嗎？其實你也可以改造Dani這個人物。
可以運用油漆桶工具，讓Dani有不同顏色的頭髮、眼鏡、皮膚。
發揮你的想像力吧！
<T>小技巧：
繪圖模式有「向量圖」與「點陣圖」兩種模式：
都可以用來繪圖，然而兩者的圖片組成結構有本質上的差異。
簡單的說：向量圖形是以一群數學與座標標記的方式進行紀錄（本質上是一組資料，而非一張圖），優點之一是將圖形放大或縮小時，電腦會根據數學與座標，重新計算大小來繪製圖形，因此圖形邊緣平滑、不會出現鋸齒狀而失真（更多閱讀）。
<!> 引導者注意：
進一步解釋「向量圖」與「點陣圖」可能會無故增加學習者的負擔，可斟酌。
對於有經驗的學習者：建議可單獨一堂課介紹繪圖工具的兩種差別，不談理論、而以細部實作示範。
對於初學者：建議跳過這一部分的理論，兩種介面都讓學習者操作即可。
10. 儲存並分享你的作品
恭喜！你已經完成了一個程式專案！
為你的程式專案取個名字（輸入標題）。
點一下，畫面右上方的「改編」或是「分享」
將程式作品分享給世界上的所有人！
這個影片會教你，如何進行分享。
(記得打開中文字幕)
<T> 小技巧：
- 你需要註冊Scratch並登入，才可以在線上儲存與分享你的程式專案。
- 你也可以儲存程式專案到你的電腦中：點選「檔案」選單，再選擇「下載到您的電腦」。
第3步
活動結束後
謝謝你的參與！
恭喜！你已經完成了一個牛刀小試(Things To Try)程式設計活動。
協助學生分享
每位學生完成時尚競賽專案後，請點擊畫面右上方的「分享」，這樣便會將學生創作的程式在Scratch平台上公開。學生只需要複製程式專案的網址，再將網址傳送給想要分享的朋友或家人，便可與大家分享「時尚競賽」專案。
學習更多
- 學生們可前往：Scratch-TW/學習者專區，進行另外其他的Scratch活動。
- 老師們可前往：Scratch-TW/教育者專區，下載完整的教學指引手冊，規劃更完整的Scratch程式設計課程。
- 找尋更多Scratch程式教育資源，可前往：ScratchEd查看來自世界各地教育者分享與討論的事項。
參考資源與連結：
https://scratch.mit.edu/go (Scratch 2016 Things to Try)⬀
時尚競賽-教學範例 (Scratch Project by ThinkinViz)⬀
時尚競賽 Remix(Scratch Project by ThinkinViz)⬀
時尚競賽 - 活動卡片中文版⬇︎ (Credits: YU HSIEN FANG)
第4步
分享與討論
留言分享你的Scratch作品網址
歡迎討論、一起學習
訂閱Scratch-TW電子報
取得最新教學課程與活動訊息