資料數位化原理與多媒體應用
電腦如何看懂資料運作?(二進制代碼究竟是如何工作？)
1.位元(Binary Digit;bit)概念
位元(bit ,二進位數字):是電腦儲存或傳遞的最小單位.其值為0或1
電腦是邏輯機器，是靠電路來運轉的，利用電路上電流的通過與否來表示0與1， 也就是通電代表1， 不通電代表0， 與其說是數字，不如稱作兩個相對(反)的狀態，比如「ON」、「OFF」的電燈開關或者電壓高於基準的...........H為準...邏輯1.電壓低於基準的...........L為準....邏輯0
圖片來源:隱藏在計算機軟硬件背後的語言電子工業出版社
2.十進位系統
(1)十進制數字系統是我們最熟悉的系統，我們每天都使用它
3.二進位系統
在電腦的世界裡，只能表示0~1的數值，超過1的數字就得進位，這稱為二進位。
二進位圖解入門教學(自我學習)
4.其他進位系統
圖片引用:http://s6555.blogspot.com/2015/12/blog-post.html?m=1(
我們以紅色框框()中的數字代表十進位的數值，可看出八進位的10 = 十進位的8。
5.進位系統比較表
思考問題:
在日常生活中除了十進位系統.還有哪些進位系統?
教學活動2-小藝術家-二進制(Binary)
活動說明:
電腦螢幕被分割成許許多多的小格子，稱為像素(pixel)。在黑色的畫面下，每個像素不是黑色就是白色。當電腦儲存圖片時，它要儲存的就是哪些像素是黑的，哪些像素是白的。黑的像素可以用”1”記錄，白的像素可以用”0”記錄，這就是一種圖像資料的二進制資料表示法。
1.教師請學生連線開啟Code.org「藝術家中的二進制」頁面，說明闖關任務。
2.教師提問並引導學生思考第2關網格裡需要塗色的格子有何規律，掌握完成關卡任務的方法，並動手實作。
3.教師提問並引導學生思考第3關網格裡需要塗色的格子有何規律，掌握完成關卡任務的方法，並動手實作。
資料引用:蘆洲國中陳東義老師
小結:
1.位元(bit ,二進位數字).是電腦儲存或傳遞的最小單位.其值為0或1 2.0與1是相對(反)的狀態 |
3.電腦系統是採用2進位.逢二進位 4.電腦系統採用2進位設計其理由:"簡單"，電腦是邏輯機器，是靠電路來運轉的，利用電路上電流的通過與否來表示0與1， 也就是通電代表1， 不通電代表0， |
二進位與十進位轉換概念
教學活動1-二進位轉換遊戲
老師說明:
1.數學小知識-指數法則
10的冪次方
圖片引用:程序員的數學
2的冪次方
2.數學小知識-規律性
3.十進位計算
範例:2503這個數是由2個1000.5個100.0個10.3個1累加的結果
圖片引用:程序員的數學
4.二進位計算
範例:二進位的1100.若使用十進位來表示則為12
圖片引用:程序員的數學
5.二進位與十進位之轉換
活動設計2-小算盤軟體計算二進位與十進位
活動設計3-2048遊戲
位元及位元組在日常生活之應用
1.64位元的電腦
由於一個位元(bit)只能表示1或0，根本不敷使用，於是以八個位元組成一個位元組（Byte）。一般我們使用Byte 位元組用來表示檔案的大小，所以兩者間的關係為：
1Byte = 8 bits |
記憶口訣
3C儲存設備單位
小結
任何資料都可以採用0與1來進行符號編碼(一種在資料傳遞過程中用來表示字符或數字的訊號系統).這就是資料符號化或數字化表示方法
|
評量
文字數位化(編碼)在生活中的應用
文字數位化(編碼)歷史及原理
小結:
摩斯密碼(Morse Code)
實作1-摩斯密碼翻譯器
範例1
... --- ... |
範例2
.. / .-.. --- ...- . / -.-- --- ..- |
範例3
-.. . .- .-. / .--- --- .... -. / .-.. --- -. --. / .-- . .-. . / - .... . / -. .. --. .... - ... / .-- .... . -. / -- -.-- / -.. .- -.-- ... / --- -. -.-. . / .-. . ...- --- .-.. ...- . -.. / .- .-. --- ..- -. -.. / -.-- --- ..- / -.-. --- ..- -. - .. -. --. / -- -.-- / ..-. --- --- - ... - . .--. ... / .--. .-. .- -.-- .. -. --. / - .... . / ..-. .-.. --- --- .-. / .-- --- -. .----. - / ..-. .- .-.. .-.. / - .... .-. --- ..- --. .... --..-- / .- --. .- .. -. / -- -.-- / -- --- - .... . .-. / .- -.-. -.-. ..- ... . -.. / -- . / --- ..-. / .-.. --- ... .. -. --. / -- -.-- / -- .. -. -.. / -... ..- - / .. / ... .-- --- .-. . / .. / .-- .- ... / ..-. .. -. . |
練習
請輸入自己的英文摩斯密碼
參考資料:https://codepen.io/twkwcheng/full/EOYbvM
文字的編碼(資料來源：維基百科)
內碼
指的是「將資訊編碼後，透過某種方式儲存在特定記憶裝置時，裝置內部的編碼形式」。
在不同的系統中，會有不同的內碼。
外碼
1.指的是「外在的『經過學習之後，可直接了解的編碼形式（例如：文字或語音符號）』」。
2.中文輸入法對漢字的編碼即屬外碼。常見的中文外碼有倉頡碼、行列碼、大易碼、嘸蝦米碼、注音碼、拼音碼。
3.國際漢字主流內碼
(1)Big5大五碼(台港澳專用)
(2)GB 18030國標碼(中國大陸專用)
(3)Unihan(漢字國際碼/漢字總碼)
交換碼
ASCII(American Standard Code for Information Interchange，美國資訊交換標準代碼)
實作2-ASCII藝術
範例圖檔
實作3-解碼遊戲
請問這件衣服的密語(中文)是什麼意思?
提示:
1.將上述的衣服上的二進位碼輸入到線上二進位轉ASCII網的二進位輸入區域.點Convert(轉換).得到ASCII碼(英文字母)
2.利用Google查詢這個英文單字是甚麼意義?
3.建立一個記事本的檔案.將你的解密的答案貼在記事本檔案.如下圖
參考網站
http://csenet.ice.ntnu.edu.tw/
http://web2.fg.tp.edu.tw/~anny/moodle/course/view.php?id=46
作業上傳
聲音(音訊)數位化原理
解說:
(1)原理
(2)Analog to Digital Converter (ADC) and Digital to Analog Converter (DAC)
類比轉數位和數位轉類比
數位音訊壓縮
1.目的
2.格式
3.壓縮技術
是將數位的聲音訊號以更少的0與1表示，使檔案變小，節省儲存檔案時所需要的時間與傳送資料時所需要的通訊頻寬
A:無損(非破壞)壓縮演算法
無損壓縮是非破壞性資料壓縮，指資料經過壓縮後資訊不受損失，還能完全恢復到壓縮前的原樣。目前
比較常見的無損壓縮音訊檔案格式大多以 FLAC、APE、WAVE 為主
B.有損(破壞)壓縮演算法
指資料經過壓縮後資訊會受損失，為破壞性資料壓縮.目前比較常見的有損壓縮音訊檔案為 MP3、AAC、M4a、Windows Media Audio（WMA）、Ogg Vorbis（OGG）
數位音樂平台
實作5-判斷以下的數位音訊品質
解說:
類比與數位音訊演進
資料引用:https://everylittled.com/feature/Vinyl/63184
數位音訊與版權
數位音訊的分類.格式.用途
音樂數位介面（Musical Instrument Digital Interface，簡稱MIDI）
一個為電子樂器等演奏裝置（如合成器）定義各種音符或彈奏碼，容許電子樂器、電腦、手機或其它的舞台演出配備彼此連接，調整和同步，得以即時交換演奏資料。
教學活動設計1-體驗MIDI音訊
教學活動設計2-MIDI音訊下載
參考資料
https://www.ymsc.chc.edu.tw/modules/tad_book3/pda.php?tbdsn=189
教學活動設計3-免費數位音訊素材(背景)下載
教學活動設計4-洛雪音樂助手開源軟體.手機安卓版)
使用說明
1.下載後.解壓縮(免安裝版)
2.軟體介面
搜尋想要聽的歌即可線上聆聽及外掛歌詞(Lyrics)
3.若想要離線收聽(下載到你的電腦).點設定
參考網站
https://www.youtube.com/watch?v=AIu7QRRs0xc
數位音訊處理實作
音訊工具說明
教學活動設計1-線上版(次數限制)
教學活動設計2-手機鈴聲組曲製作
1.數位音訊素材
MP3下載(提供上星期沒有下載成功同學練習使用)
2.範例
3.實作步驟
示範-Wham!
(1)音訊剪輯(至少3段各15秒左右)
線上版
離線版
(2)音訊合併(將3段以上剪輯好的音訊合併為一個音訊)
圖像在生活中的應用
資訊科技圖像處理軟體魔力
影像(圖像)數位化(編碼)原理
認識數位圖像
(1)點陣圖(Bitmap Image)
小結:
(1)像素(Pixel)是點陣圖像最小單位 (2)點陣圖是以二進位0與1來表示圖像 (3)彩色圖像編碼bit愈高解析度越高 |
教學活動設計1-彩色圖像資料表示
(2)向量圖(Vector Image)
(3)圖像格式(壓縮)
點陣圖
向量圖
(3)點陣圖與向量圖之比較表
教學活動設計2-向量圖與點矩陣圖之比較
影像(圖像)繪圖軟體簡介
(1)點陣圖軟體
商業
它是處理點陣圖的天王軟體.是Adobe公司的產品免費
雲端(跨平台.跨載具PC.手機.平版)
(2)向量繪圖軟體
商業
它是處理向量圖的天王.是Adobe公司的產品免費
雲端(跨平台.跨載具PC.手機.平版)
範例
一. 常見應用
影像的處理可以很有創意
1、 移花接木
2、 畫龍點睛凸顯圖片主題
3、 數位藝術創作
4、 Kuso搞笑
二. 基本步驟
1. 決定主題
例如作成紀念照、友情卡片、宣傳海報、電影海報、電腦桌布等等…你想表達什麼故事？這個作品可以應用在什麼地方？
就像編劇本一樣，多思考一下，再決定合成的主題
2. 尋找素材：主角與場景
一旦決定好主題，接下來就要找故事的場景各種角色囉！你的合成作品背景是什麼？一張海報或一處風景？故事主角是你和誰？你的偶像或妳的好朋友？或是某個卡通人物？
3. 其他配角
為了避免作品太過單調，或為了更加突顯主題，妳可以加上其他配角，也許是一段文字、也許是其他的人或物品照片，或者只是某種影像處理的效果(例如霧化、黑白處理等等)
提醒同學，作品的配角不要太多太花俏，以免喧賓奪主喔！
教學影片
動漫遊ACG
ACG:動漫遊文化.指由Animation（動畫）、Comic（漫畫）和Game（遊戲）組成的文化。
一.電腦繪圖（Computer Graphic;簡稱CG）
學習目標:
參考資料:https://sites.google.com/site/tangbenben51244/home
(1)電腦繪圖在生活的應用
(2)電腦繪圖硬體
(3)電腦繪圖軟體
商業
免費
參考資料:https://www.clipstudio.net/painting/archives/155588
(4)電腦繪圖流程
http://10.231.114.1/luti/109-2/cg.mp4
作者:北大高中三年級.國北教藝術與造型設計系大一學生
思考問題:看完上述影片你覺得電腦繪圖的流程步驟為?
範例
(5)作品賞析(SAI軟體)
1041133
1041135
(6)SAI學習資源
文字教學
影片教學
youtube影片輸入SAI
【醬油】SAI簡易工具教學
https://www.youtube.com/watch?v=WlfNoGo1JxU
https://www.youtube.com/watch?v=e-Det8Z1hWo
【魔力優格-神戶實況台】sai不專業教學
[魔力優格-神戶實況台]sai不專業教學EP.1-工具及線稿介紹
https://www.youtube.com/watch?v=ToSrfrYM2og&list=PLlessUTYPjIZTcdCxuF8OdhV8Its1aPXT
[魔力優格-神戶實況台]sai不專業教學EP.2皮膚上色
https://www.youtube.com/watch?v=zwVK7GpSv0w
[魔力優格-神戶實況台]sai不專業教學EP.3-頭髮
https://www.youtube.com/watch?v=z16hlJQnB30
[魔力優格-神戶實況台]sai不專業教學EP.4-眼睛
https://www.youtube.com/watch?v=w4BpI0q_nRY
【半半教學-SAI超基礎教學拉】
半半教學-SAI超基礎教學拉 PART1
https://www.youtube.com/watch?v=uEzjZ46I3CA
半半教學-SAI超基礎教學拉 PART2
https://www.youtube.com/watch?v=I1J8mXWpr7o
實作1-動漫人物線稿描繪
電腦繪圖-SAI軟體(免安裝版)下載
1.下載數位鉛筆稿
2.開啟數位鉛筆稿
(1)開啟SAI軟體
(2)檔案/開啟
(3)開啟剛下載鉛筆稿的資料夾.桌面/110-sai-draft/base.開啟
3.畫線稿(鼠繪)
教學影片(詳細研究)
圖層（Layer）
畫畫之前要先了解圖層的概念，上色才不會混洧。
圖層就好像一張一張的透明投影片堆疊起來，每個圖層可以有自己獨立的影像，在上面圖層的影像會覆蓋下面圖層的影像，如果上面圖層沒有影像的部份，則可以看穿到下面圖層的影像。調整圖層堆疊的順序，會影響影像上下的順序。
過去我們畫圖都畫到一張紙上，了不起描個線後再畫，錯了就會很麻煩。電腦繪圖最大的好處就是，你可以在一個作品中，分層很多層畫面施工，然後一層一層疊上去，對於那個部份不滿意，就去那部份的圖層修改就好
圖層種類
a.抖動調整(SAI特有)
b.畫線稿重要的事
(1)選在圖層1(草稿)降低透明度
(2)新增鋼筆圖層
(3)選在鋼筆圖層.描草稿.利用曲線(顏色用色輪選色).點一下設定中繼點.點兩下結束
4.存檔
檔案/輸出指定格式為/sai
路徑:桌面/108****cg.sai
將上星期108****.sai下載
下載後出現白白的圖打不開
檔案關聯
鋼筆圖層工具
https://kknews.cc/zh-tw/news/o8xn596.html
錨點(按Shift或Ctrl)
筆壓(畫出線稿的層次感)
-點住線裡面的錨點，按住滑鼠........向左拉是變細，向右拉則是變粗
修改線(線稿粗細大小)
選擇筆和選區擦(修正線稿)
上色前準備
1.線稿要畫好.才能表現想要的圖
2.線稿細部.例如髮尾閉合(封閉曲線).形成一體
3.找參考已完成CG動漫(已上色)圖-配色
基礎上色(賽璐璐上色法)
教學影片1
教學影片2
1.建立一個上色圖層組(資料夾)或一般圖層
2.用魔術棒或選取筆.選取上色範圍
3.用色環.色票選取固有色
如何調成皮膚色?(紅+黃+白)
4.選油漆桶工具填充(CTRL+F)
5.取消選擇(CTRL+D)
檔案/輸出為指定格式SAI
檔名109****sai02.sai
賽璐璐上色法教學網站
進階上色
光源方向(陰暗面)
圖層蒙版
檔案/輸出為指定格式SAI
檔名109****sai02.sai
賽璐璐上色法教學網站
1.動畫原理-Optical Illusions(視覺暫留)
2.動畫歷史
3.動畫基本概念-影格(Frame)
fps(frame per second):每秒幾個畫(影)格
圖1 |
圖2 |
電影版本
2D/4K/24 fps
3D/2K/60 fps
3D/4K/120 fps
4.動畫分類
2D:數學上的二維.是平面
3D:數學上的三維(Three-Dimension)是立體
二.GIF動畫概念
1.GIF動畫原理
GIF動畫顧名思義，是將圖存成GIF檔來執行的動畫，在預設的時間下結合多張GIF圖檔輪播呈現
https://www.google.com/doodles#archive
2.GIF應用(APP遊戲.網頁廣告.Line貼圖......)
3.GIF動畫相關軟體
1.Ulead GiF Animator
2.Microsoft GIF Animator
3.UnFREEz
4.photoscape
5.Gif movie Gear
6.Easy GIF Animator
7.Animate Gif
8.Pivot Stickfigure Animator
參考資料
https://sites.google.com/site/lohos2nchu/1-8/amimation-pictures
2D動畫實作-(逐格動畫)
實作-Pivot Animator初體驗
下載(5.1版)
■軟體下載
■範例
■軟體介紹及教學
新版功能介紹
補間動畫
實作1-補間動畫練習
檔案名稱:108****-1.piv
檔案名稱:108****-2.gif
實作2 -完成有故事性的GIF動畫
作業要求:
素材下載(背景及角色物件)
1.匯入背景
2.匯入角色檔
素材下載(背景及角色物件)
