HW2

HW 2-1

這是我做的GIF小動畫!

看到這張圖不用說也知道我是個標準海賊王迷

會想把海賊王裡面所有主角的懸賞單在一起也是因為看到漫畫中,他們又再度相聚給我的靈感

那...我就把他們聚在一起吧!!!

好這是題外話XD

之前就有做過類似動畫的作品

像利用FLASH , 3D'S MAX等軟體

其中3D'S MAX還要做3D的建模加上一堆參數的設定...非常複雜

然而這次老師介紹的軟體...

真的是輕輕鬆鬆做動畫呀!!

雖然本來想自己畫連續動作來玩...可是我的繪畫天份實在...

製作過程中我想最麻煩的應該只有找圖片跟圖形轉檔吧(笑)!!!

然後圖因為是從網路上找到的,所以補一下原始圖檔來源

http://stu96.nknu.edu.tw/~d9631232/new_page_4.htm

http://farm3.static.flickr.com/2433/3623374777_78a326b10f_o.jpg

http://tomopop.com/ul/4512-TomopopWeek1OnePiece.gif (這張我有做簡單的修圖，並且配合後面的圖片改原始圖檔大小)

另外 我圖檔存放的空間是利用一個免費的網站http://www.badongo.com/

他非常的好用也滿強大的...雖然我們有WebHD還有FTP空間

不過有免費1G的空間還是加減用吧!介紹給大家!

HW 2-2

這是上面那張圖檔在PSpad中分析後所擷取的檔案

剛開始上課的時候

看到這一脫拉庫的數字符號整個都傻眼了

不過經過老師講解，自己翻書外加google找資料了解其中涵義以後

才知道原來一張看似簡單的圖背後有這麼深奧的學問呀!!!

然後稍微找了一下關於PSpad這個軟體的資料

驚!!!!也太強大了吧

這根本就是我們這些未來工程師(?)的得力助手工具阿

看來我要好好研究一下這個軟體其中的奧義了!

最後感謝老師提供這兩套程式讓我們使用！

HW 2-3

這是我用BCB寫出來的程式執行畫面

然後將上面那張GIF圖畫利用我的程式去讀取色盤的結果

老師在上課的時候說

可能是Microsoft GIF Animator做動畫時限制就是這個色盤

於是回家我將其他的圖再放到"小畫家"去轉檔(轉gif) 發現一件奇妙的事情

原來一切都是小畫家惹的禍!!!

因為只要用小畫家轉gif不管你原始檔案是什麼格式

他輸出就是標準調色盤 就像上面那張圖!

所以 我再把圖到放到Photoshop去轉gif

這張是在Photoshop轉檔的gif圖檔

然後再把它放到程式去執行

執行後將執行結果儲存如下圖

恩 果然利用不同的程式轉檔 他使用的色盤就會有出入

心得總結

這個作業我想最難的地方就是這支程式了

因為自己的程式底子沒有很好

利用最後一堂課問了同學

加上回去自己研究一整個晚上

終於把這支程式寫了出來

當compiler下去成功的那剎那眼淚都要噴出來了!!!

當然 也藉由堂課讓我了解

一張圖檔背後的結構...色盤...

還有各種程式對於圖片轉檔的細膩程度 他們怎樣去分析一張圖片...等等

這個作業真的是我覺得最好玩的一項

也希望自己能夠多增加寫程式的程度

能夠分析更多不同的圖檔內容!!

HW2

Part_1

製作GIF好有趣的

我採取的做法是步驟化的方式呈現

依照不同的圖片完成度去存取

再利用GIF應用程式載入多張圖片

最後設定圖片速度和連接方式

就完成了成品

製作圖案過程中

多年使用的小畫家

我發現

粉刷可以選擇不同的款式

每個款式會讓字體呈現不同的視覺效果

上傳過程中

遇到圖案不會動困難

多虧喬立的幫忙
但我家IE雖然已經利用網址新增圖片
卻還是無法正常運作
在"修改Html"有出現網址

可是預覽時 卻沒看到圖案的位置
幾天後和穎榛一起研究

發現圖片不會的的原因

也許是因為圖片顯示的選項為原始大小

造成無法改變長寬

穎榛建議我另外建立一個BLOG

使物件功能變多

圖片載網頁就會動了

缺點是太大

且不能調整適當的大小顯示在網誌中

後來老師建議我們可以使用HTML修改大小

果然就可以漂漂亮亮貼在網誌上

Part_2



上課看到這個畫面時以為是亂碼還

因為全部都是看不懂的東西

當老師打開這個文件

開始講解才慢慢釐清

雖然一開始還是很一知半解

不知道從哪裡開始下手

翻翻課本、回想老師上課說的細節

才清楚要怎麼去解讀這些東西

做完這次的作業才發現
多媒體真是個有趣的一件事
電腦可以用圖片呈現
也可以用英文數字碼顯現

Part_3


以下是我測試的GIF檔


(1)

(2)

(3)

(4)

圖(3)是測試老師圖，檢視輸出的調色盤是否正確
圖(1)(2)是我在網路上找的
圖(4)是我自己之前做的GIF



在BCB寫程式的時候
FILE *fopen(const char *filename, const char *mode)
用途是打開檔案，這個之前有使用過
可是再次看到的時候還有點陌生
老師講解時才起來


我發現平常如果不常練習的話
忘記常常比吸收還快


這次調色盤的作業
讓我了解到每個應用程式都有不同的調色盤


所以用Microsoft GIF Animator製作GIF的使用者
輸出的調色盤都會一樣

HW02

HW2-1 GIF簡易動畫製作

這次的作業是要用GIF ANIMATOR製作簡易的小動畫

所以呢，我決定用DOMO君當我的model，找了一些他

的影片，從中截圖並將圖片轉成GIF檔，如下




為了讓動畫看起來較有連貫性，擷取的圖片都盡量和上

一張有關聯，讓別人知道這個動畫是在表達什麼，也比

較有劇情性，而這次我所製作的小動畫，DOMO由畫面

的右邊跑向左邊，之後他和他的好友一起拿著飲料走到

草原，DOMO喝了飲料之後，很享受。

以下就是此次作業的動畫





心得感想:

DOMO真的好可愛，很喜歡DOMO，這次能夠用自己喜

歡的圖案做作業，真棒，然而在製作過程中所遇到的困

難其實也還好，在找影片和截圖花了一點時間，做完之

後就太開心迫不期待執行，之後發現動畫閃的很快，什

麼也看不到，是忘記調整動畫的顯示時間，圖片的變換

速度正常了，卻發現每次動畫只跑一次就停住了，原來

是忘了勾選持續重複播放的選項，還真的是急不得呢，

這樣子就完成囉，非常的簡易，這套軟體真是十分的方

便好操作呢，以後想自製MSN頭像小動畫就可以使用它!

非常的好上手，而且網站上的教學也講得很清楚詳細。

我的收穫:

關於GIF圖片失真問題---

這作業，其美中不足的地方就是大部分的圖片轉為GIF檔

就變得很失真，圖片會模糊並且霧霧的，為何轉成GIF檔

失真呢?因為jpeg的圖片是24位元色彩，可以有將近1667萬

種顏色，而GIF圖片為8位元色彩，最多只有256色，因此

失真是無法避免的。

關於上傳動畫至部落格卻不會動的問題---

似乎有非常多的人遇到這樣的問題，家綺是說圖片原始大小

的問題，而喬立教了我一個好辦法，將動畫上傳至一個空間

在部落格中，修改Html的地方編輯，使用語法將動畫放上去

即可解決這個問題。







HW2-2 分析GIF動畫


首先，先開啟PSPad程式

選擇檔案->以HEX編輯器開啟




就以我的DOMO君動畫當做範例吧

開啟之後，就會看到一大片密密麻麻16進位的數字

如下




真是令人眼花撩亂，讓我們來一個一個解析

就從第一行開始吧




前12個數字(00~05，也就是6個位元組)是GIF檔的簽章(檔案--GIF89a)

06~0C即為電腦螢幕描述

0607是螢幕的寬度，換算方式為0706然後16進位改成10進位

而我的寬度是0280--->640

而後面的兩個位元組代表是螢幕的高度，換算同寬度

0908為16進位轉成10進位，0167--->359

而0A~0C那段F7

F7轉二進位11110111

在此，再將之分為1 111 0 111

m=1->螢幕描述後面接色彩對應圖

cr+1->顏色解析度位元數目

c=111轉十進位之後為7，c+1之後為8，因此顏色解析度位元數目為8

pixel+1->影像的位元/像素的數目

而0B的00為螢幕背景的顏色索引

在0C後面一大串的數字，都為GIF色彩對應圖

直到NETSCAPE之前都是

那麼NETSCAPE在哪裡呢?

如下




在上方工具欄有搜尋文字，點下去





在尋找欄位鍵入NETSCAPE

噹噹，就找到啦!







HW2-3 GIF圖像之調色盤分析


用BCB撰寫一程式，使之能夠讀取一GIF圖檔，


並將其調色盤顯示出來。

下圖即為讀取上述DOMO君之後的調色盤 ↓

真是五彩繽紛~原來我的DOMO君動畫是這些顏色組成的

接下來分析看看其他GIF圖檔試試

可愛的兔子彈吉他! 其調色盤 ↓



很明顯色彩就沒有這麼鮮豔，因為兔子的圖相對之下

就沒有非常色彩繽紛，該圖大致就是以黑、白、灰、

橙、紅、土黃色所構成，於是調色盤所顯示的顏色就

是這些，非常有趣。

之後發現JPEG、BMP檔讀取之後都沒有反應呢!


心得感想:

成功寫出程式後很興奮，雖然都是修改老師的範例，

不過還是有研究一下，因為這一項作業，更加了解其

GIF圖檔的儲存方式，我之前有學到它最多就是儲存

256種顏色，但是這樣還是太少，並沒有辦法把圖像

盡善盡美的呈現出來，因此有時將圖片轉為GIF檔時

會有失真的現象。

在撰寫程式的過程中，有一點小小的領悟，或許微不

足道，但是還是在此發表一下好了~

首先看看下圖



我和我室友有著同樣的困擾，一些文字描述的後段都

會被截掉，之後研究出來改善的方式



如圖，於欲輸出的事物(可以是一個檔名、變數等)後面

加上一串空白，字串被截掉的問題就解決囉!




而且還發現，空白鍵越多、能多顯示的字串就越長呢!!

HW02

完成品↓

這次的作業很有趣,
不過之前本身就有玩過GIF Animator這個軟體~
所以要做動畫時沒有覺得很陌生:)

第一排第一張是我已經用動畫做好的gif檔,
剩下7張是我放在畫格裡的圖,
自己用小畫家畫並且上色~想表現出一個很可愛的表情:)會眨眼~

嘴巴還會笑開開~臉也還會脹紅很可愛唷 哈
很好玩^^
----------------------------------------

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

將上圖的GIF動畫配合PSPad，跑出來的資料，所擷取的畫面↓

因為圖片被縮小了所以我們放大來看↓

　

用顏色標起的地方為GIF簽章檔名 ↑

用顏色標起的地方為電腦螢幕敘述 ↑

用顏色標起的地方為圖片高和寬 ↑

6400 → 0064(16) → 100(10)

方法 ( 16 進位轉 10 進位 )：

4 × 16^0 + 6 × 16^1 = 4 + 96 = 100

所以：高100×寬100

C3→11000011( 粗體為區隔符號 )

11000011( m=1：使用整體色彩對應圖 )

11000011( cr=100：cr+1轉十進位後代表8位元色彩解析度 )

11000011( pixel=011：pixel+1轉十進位後代表8位元的像素資料 )

GIF之色彩對應圖↑

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

這次的作業是運用一套軟體PSPad，

這套軟體可以讓一般使用者作為記事本的取代工具（但是這麼做似乎太大材小用了），

也可以作為程式或網頁開發者的得力助手。

PSPad的功能包括能以分頁的方式顯示不同文字檔案，

讓使用者能夠在多個開發文件之間進行快速的切換，

也可以讓使用者以 FTP 的方式直接修改線上的文件，

並且可以呼叫預設的瀏覽器來開啟編輯中的網頁。

　　那這次的作業我是利用之前用小畫家所畫出來圖再轉成GIF動畫，

雖然一開始看到一堆數字就有莫名的頭痛，不過經過老師的講解也比較容易了解，

在上網搜查後發現這套軟體是對於程式開發者而言的好幫手，

讓開發者能夠藉由它的便利性來更快速地完成手邊的工作，

所以能夠學習到這套軟體而且還是免費的覺得很棒，謝謝老師。

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

接下來是利用老師所分享的程式碼,
寫在bcb程式裡,主要是讀取gif黨裡面所用到的顏色

這是我利用小畫家做的gif檔,所以顏色很少

↓
調色盤

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

因為覺得怎麼顏色這麼少

怕說程式修改有錯誤,所以利用老師分享的圖
跑一次來核對出來的調色盤

↓
調色盤
--------------------------

跟老師跑出來的一樣所以很安心了

多跑1張從網路上抓的gif圖

↓
色盤

其實程式多半是複製老師的在做修改和套用,
但是因為老師都有耳提面命的教學,
讓我學了不少新的程式部份,也更了解了圖片顏色的領域:)

謝謝老師:)

HW02

HW_2-1

這次的作業是將多張圖片作成一個gif檔

所以我用手機將狗狗的連續動作拍成6張照片

再利用Microsoft GIF Animator做成一個動畫

如下圖:

做完後真的覺得好可愛喔~

原來我們平常在網頁上看到的動畫都是這樣做出來的!

利用多張不同的圖片或是連續的圖

就可以做出很多可愛的動畫

也可以放到msn的交談表情上!

這個軟體讓我們做出自己想要的動畫

也很好上手!

是一個很棒的軟體!!!

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

HW_2-2

紅色區塊的地方是gif檔的簽章~

紫色區塊的地方是用來計算長和寬!

計算方式為6400->0064(16)=100(10)

4*16^0+6*16^1)=4+96=100

藉由這些資訊我們可以知道

像素的長和寬為100*100
綠色區塊所要表達的意思是

87(16)=10000111

第一個1為m，m=1的意思是"使用整體色彩對應圖"

第二到第四個0為cr，cr=000的意思是

"cr+1轉十進位後，代表8位元色彩解析度"

第五個0為區隔符號

第六到第八個1為pixel，pixel=111的意思是

"pixel+1轉十進位，代表8位元的像素資料"

橘色區塊的部分為gif檔的色彩對應圖!!

PSPad簡介:

是一款功能十分強悍的免費編輯軟體，

一般使用者可以將它當作記事本的替代品，

而對於程式開發者而言，它絕對是不可或缺的好幫手，

讓開發者能夠藉由它的便利性來更快速地完成手邊的工作。



這次的作業是利用pspad這個軟體來開啟gif檔的資訊，

開啟後出現了很多複雜的數字，一開始看了真的有點怯步呢!!

不過後來經過認真的研究，不懂的地方問別人或者是上網查詢，

終於比較了解這些數字所代表的意思，原來我們平常所看的這些圖片，

在電腦中是利用這些數字來儲存，真的讓人覺得是個很深的領域呢~

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

HW_2-3

這是我的gif檔原圖

下面是利用程式run出來的gif檔色盤

在這之後，還嘗試了很多不同的彩色gif檔

發現了一件很特別的事情!

原來彩色的gif檔色盤都長的一樣耶!!

剛開始還以為可能有一些些地方不一樣

可是仔細地比對了一下後

真的完全一樣!

果然要在實驗中發現一些線索呢~

這是我實驗的第二張gif檔

跑出來的色盤如下圖

恩...色盤中的色彩明顯少了很多

應該是因為這張gif檔所使用的顏色較少!!!

這是實驗的第三張gif檔

是毛毛用小畫家畫出來的連續圖

再利用做動畫的軟體 Microsoft GIF Animator將它做成gif檔

跑出來的色盤如下

哇~!!!!!!

跑出來的色盤顏色好少

害我還以為程式有錯誤

但是跑其他的gif檔時都非常的順利

也可以正確的run出來

所以我們推論可能跟用小畫家畫出來的有關~!!!

這次的作業真的讓我們學習到很多東西，

從一開始的做動畫

再來用pspad去觀察圖片在電腦中儲存的資訊

最後再利用程式跑出他的色盤

讓我們對平常視為理所當然的圖片

有了更深一層的了解

由淺慢慢地到深入

學習了更多的知識!!

才能有一點資工人的樣子~~~