GIF89a的動畫

在 homepage 裡放一個會動的圖是不是很有趣,但我們一想到要會動,就覺得很困難,是不是要寫個程式讓它動呢!?以前似乎是這樣的,但現在有了GIF89a這種圖形格式,不只有背景透明和漸漸顯現的功能,連動畫的功能都有了!!不過做起來要費一點工夫倒是真的。

首先我們要有做GIF89a動畫的程式,可以到這邊去抓這個微軟公司出的免費程式 GIF Animator ftp://ftp.nsysu.edu.tw/Win95/winsock-l/Graphics/gifsetup.exe,抓回來後直接執行就可以安裝了。有了工具還不夠,我們還必須準備動畫的圖片。既然是動畫,就要有好幾張連續的圖片,最簡單的就是用幾張連續的圖讓它變來變去。

製作GIF89a動畫我們有以下幾個步驟:

  1. 準備圖形檔
  2. 啟動程式,開啟檔案
  3. 插入其他的圖片
  4. 調整每張圖片顯示的時間
  5. 設定重複次數
  6. 預覽成果
  7. 大功告成,存檔吧!!
  8. 更詳細的設定

1.準備圖形檔

我們用一個實際的例子來說明。首先,我準備好了這幾張 GIF 的圖形檔,要拿來做動畫用。我想要上面的風景圖片一張一張變換,下面的字『世界風光 盡收眼底』則保持不變。

    


2.啟動程式,開啟檔案

先啟動 Microsoft Gif Animator 這個程式,按下開啟第一張圖。

這個時候整個視窗的畫面會如右圖所示。


3.插入其他的圖片

我們重複按下來插入其他的圖片,一直到圖片都放進來為止。並且可以選取一張插入的圖,按下來調整其前後的次序。最上面是第一張圖,再來是第二、第三 …。如果想要刪除插入的圖片,先選取該張圖,再按 Delete 即可。

以這個例子來說,將其餘四張圖片都插入了,並將其順序都排好。


4.調整每張圖片顯示的時間

每張圖片秀出來後要暫停一段時間,才能讓觀看的人看清楚圖片的內容,所以要調整每張圖片顯示的時間。

在視窗的右半邊的地方,選擇到 Image 選項的部份。先選取第一張圖,在 Image 中的 Duration(1/100 s) 的地方把第一張圖顯示的時間設定成 100。因為它的單位是一百分之一秒,所以設定成 100 實際上只有一秒而已。

再繼續選取第二張圖,把顯示的時間也設定成 100。以此類推,把五張圖的顯示時間 [Duration(1/100 s)] 都設成 100。


5.設定重複次數

這個重複次數呢...就是說這個動畫要重複播放幾遍。通常我們都把它設定成無限多次,也就是一直重複播放不停啦!!

在右邊選到 Animation 的選單,Looping 的地方打勾,再把 Repeat Forever 的地方也打勾,就可以無限次的重複播放了。


6.預覽成果

終於接近最後的步驟了,可以先預覽一下目前的成果,看看滿不滿意。只要按下就會出現一個視窗播放我們所做的動畫。

我們先看看效果如何,通常有問題的地方都是每張圖顯示的時間,是否太快或太慢,我們關掉預覽的視窗,再回到第四個步驟那邊調整。不然就是每張圖顯示的前後次序不好,可以用來調整。調整過後再按一次,看看調整後的效果。


7.大功告成,存檔吧!!

如果預覽過後都沒有問題了,或者你做到一半想先存檔,就按下另存新檔將它存成另一個檔案。

已經另存新檔過,第二次以後存檔,可以直接按下來存檔。(如果第一次不用另存新檔就直接存檔的話,會把第一張原始圖的檔案覆蓋過去。)

存完檔後,就可以在你的 homepage 中直接以插入圖形來使用了!!而我們這個例子所做的動畫,來欣賞一下吧!!

不過得再次提醒你,別一高興就做了一個檔案很大很大的動畫,讓別人傳不下來。要注意到網路的速度哦!!


8.更詳細的設定

 

最後修改日期: