本著作除另有註明外，採取創用CC「姓名標示－非商業性－相同方式分享」台灣3.0版授權釋出

Presentation on theme: "本著作除另有註明外，採取創用CC「姓名標示－非商業性－相同方式分享」台灣3.0版授權釋出"— Presentation transcript:

1 本著作除另有註明外，採取創用CC「姓名標示－非商業性－相同方式分享」台灣3.0版授權釋出
第 10 講次 (book1:chap19+chap20) 網際網路導論 嘉義大學資訊工程學系李龍盛老師 本著作除另有註明外，採取創用CC「姓名標示－非商業性－相同方式分享」台灣3.0版授權釋出

2 Flash簡介 網頁空間與上傳網站 Content

3 Flash簡介

4 請執行『開始 / 所有程式 / Macromedia / Macromedia Flash 8』命令啟動 Flash, 預設在程式啟 動時會顯示起始頁的開啟檔選案單畫面,
選單內容依類型分為 3 個區域, 分別是開啟最近使用的檔 案、建立新檔案和從樣板建立, 供使用者選擇要執行的檔 案。 按下起始頁中建立新檔案區的 Flash 文件, 即可看到如下 圖的預設版面配置。 Flash 的操作環境主要分成 3 大部分, 分別是：Flash 主 視窗、動畫文件視窗以及散布四處的面板。 主視窗界定出 Flash 程式的工作範圍, 動畫文件視窗是編 輯動畫內容的場所, 而面板則是製作動畫時所使用的各種 工具箱。 認識操作環境

5 開新檔案 進入 Flash 的工作環境後, 我們首先來學習如何 建立新文件、開啟舊檔及儲存檔案。
在起始頁中選擇 Flash 文件項目, 或在 Flash 主 視窗執行『檔案 / 開新檔案』命令皆可建立新檔 案； 兩者的差異是選擇前者的方式開啟, 會立即建立 一個新的空白文件檔, 而執行後者的命令, 則會出 現如下的新增文件交談窗, 讓您選擇要開啟的檔 案類型。 開新檔案

6 開啟舊檔與關閉檔案 要開啟儲存在磁碟中的動畫檔, 可執行『檔案 / 開啟舊檔』命令, 將檔案重新載入 Flash 中編輯,
可以在起始頁中選擇開啟最近使用的檔案項目或 開啟舊檔, 同樣可由開啟舊檔交談窗讓您選擇要 開啟的檔案。 編輯完畢並儲存檔案後, 可執行『檔案 / 關閉舊 檔』命令 (或按下動畫文件視窗標題列右側的 鈕) 關閉。 開啟舊檔與關閉檔案

7 儲存檔案 做好的 Flash 動畫一定要儲存起來, 以後才能再 載入 Flash 中繼續編輯。
要以其他檔案儲存時, 請執行『檔案 / 另存新檔 』命令, 為動畫重新命名再儲存。 儲存檔案

8 Flash 所儲存的檔案格式為 .fla, 這是 Flash 動 畫的原始檔案格式, 只有這個格式的檔案才能在 Flash 中編輯與修改。
儲存檔案

9 時間軸、圖層與影格的作用 接下來要介紹 Flash 動畫製作的核心：「時間軸 」、「圖層」與「影格」。
時間軸的主要功能, 就是安排動畫畫面行進的順 序和效果, 而圖層與影格則像是動畫中安排場景 及演員位置的兩大功臣, 我們必須先了解如何操 作它們, 才能開始著手製作動畫。 時間軸、圖層與影格的作用

10 動畫檔案視窗中的時間軸主要用來顯示出圖層與 影格。
何謂時間軸

11 何謂圖層 專業的卡通動畫製作公司在製作動畫時, 常會將 畫面中的背景與角色分別製作,
例如將人物與背景分別繪製在不同的透明賽璐璐 片上, 當背景與人物重疊時便成為完整的畫面； 若要呈現人物原地跳躍的動作時, 只要更換人物 的賽璐璐片就可以了。 此觀念運用在 Flash 動畫中, 就是「圖層」了！ Flash 動畫可將背景與物件分別放置在不同的圖 層 何謂圖層

12 Flash 時間軸面板上的每個影格, 就如同卡通動 畫影片中的單格畫面一樣, 而影格順序則代表 Flash 動畫行進的程序, 我們必須根據演出順序 製作影格內容, 連續播放 Flash 時間軸上的影格, 即形成 Flash 動畫。 何謂影格

13 新增、刪除圖層 新建立的動畫檔預設只有一個圖層, 因此要新增 圖層就得自己來；而新增的圖層會出現在選取的 圖層之上。
若想刪除不用的圖層, 則按一下圖層名稱以選取 圖層, 再按下時間軸面板上的刪除圖層鈕, 就可以 刪除該圖層了。 新增、刪除圖層

14 改變圖層順序 時間軸面板中圖層的上下位置, 代表了圖層中的 物件在編輯區域的前後次序關係。
在時間軸面板愈上方的圖層內容, 就位於編輯區 域愈上層, 而背景就是放置在最底層的圖層。 想要變動圖層的順序, 只要直接拉曳欲移動的圖 層到想要的位置即可。 改變圖層順序

15 圖層的狀態 在圖層名稱右方有圖層狀態欄, 以圖示來顯示該圖層的圖 層狀態, 一共有 4 種圖層狀態, 其代表的意義如下：
作用中的圖層：表示目前正在進行編輯的圖層, 故不論有幾個圖層 , 都只會有 1 個作用圖層。若要將圖層切換成作用中的圖層, 只要 選取該圖層即可。 隱藏的圖層：表示該圖層的物件不會顯示出來, 當然也就不能進行 編輯的工作。 按一下圖層名稱右方的隱藏圖層狀態欄, 就可以切換圖層的隱藏或 顯示狀態。 鎖定的圖層：表示該圖層無法執行任何選取與編輯的動作, 但圖層 中的物件仍可正常顯示。 所以當你正在編輯某一圖層時, 可將其他圖層設為鎖定的圖層, 以 免動到不該動的圖層內容。再按一下可取消鎖定狀態。 圖層中的物件顯示成外框：表示該圖層的所有物件都以外框線條 來顯示, 既能看見圖層中的內容, 也可以執行編輯工作。 圖層的狀態

16 新增、編輯、移除影格 新增影格的內容為延續前一關鍵影格的內容。 在編輯影格之前, 要了解如何選取影格。
只要選取要移除的影格, 按右鈕執行『移除影格 』命令, 即可移除影格。 新增、編輯、移除影格

17 Flash 的 3 種影格 Flash 一共有 3 種影格類型, 分別為關鍵影格、空白關鍵 影格以及影格。
關鍵影格：關鍵影格多用在動畫過程中產生變化的影格, 我們可在 關鍵影格上編輯圖像、加入物件或特效 (包括聲音檔), 這些影格在 時間軸面板的圖示為 , 堪稱動畫的重心。 空白關鍵影格：空白關鍵影格是一種特殊的關鍵影格, 表示此關鍵 影格中沒有任何物件, 常用來清空前一關鍵影格中的物件, 所以多 伴隨在關鍵影格之後。 影格：關鍵影格和空白關鍵影格之外的影格都屬於一般影格。一 般影格的作用在於延續前一個關鍵影格或空白關鍵影格的內容。 當影格之前有個關鍵影格時, 它呈現灰色, 表示延續前面關鍵影格 的內容；若影格之前有個空白關鍵影格, 它呈現白色, 也表示它延 續著前面的空白關鍵影格的內容, 也就是一片空白。 Flash 的 3 種影格

18 設定關鍵影格 設定關鍵影格並不一定是新增影格, 而是表示該影格在動 畫中具有關鍵性內容。
當我們選取影格按右鈕執行『插入關鍵影格』命令 (或按 F6) 時, 除了可以在未使用的影格上新增 1 格關鍵影格 之外, 也可以將原有的影格設定為關鍵影格。 若在關鍵影格之後新增關鍵影格, 則此新的關鍵影格將會 自動把前一個關鍵影格的內容複製過來 。 選取影格按右鈕執行『插入空白關鍵影格』命令 (或按 F7) 之後, 編輯區會變成空白無內容。 因此當動畫進行到必須將全部的內容更換時, 可設定一格 空白關鍵影格, 將影格內容清空。接著就可以直接安排新 的動畫內容了。 設定關鍵影格

19 執行『清除關鍵影格』命令並不是要刪除影格, 而是將關鍵影格 (或空白關鍵影格) 變成一般影 格, 因此影格的內容也轉變成為前一個關鍵影格 (或空白關鍵影格) 的內容：

20 在 Flash 中, 可以將可能會重複使用的物件製作成元 件, 存放在動畫文件的元件庫中, 當你需要使用該元 件時, 再從元件庫中將元件拉曳出來使用即可, 而不 必再重新製作。
而此時被拉曳到編輯區中進行編輯的便是元件的分身 ：實體。 在編輯區的每個實體都是獨立的個體, 您可以任意編 輯、更改它的屬性而不會影響到相同元件的其他實體 。 但如果是來源的元件做了變更, 則所有的實體也會同 時更新。 元件與實體

21 元件庫的使用 簡單來說, 元件庫就是存放 Flash 動畫元件的地 方。所有元件一經建立, 就會存放在元件庫裡。
執行『檔案 / 匯入 / 匯入至元件庫』命令, 可自 外部檔案匯入點陣圖、聲音、視訊等物件, 這些 物件也會儲存在該動畫檔的元件庫中, 方便你取 用。 Flash 的元件庫分兩種：每個動畫專屬的元件庫 與內建元件庫, 皆可透過視窗功能表來開啟： 元件庫的使用

22 繪製圖形與群組、排列圖形 製作動畫的第 1 步當然就是準備好動畫中的元件 。
Flash 本身即提供相當完備的繪圖工具, 可讓我 們自由繪製各種線條、形狀、幾何圖形…。 繪製圖形與群組、排列圖形

23 群組幾何圖形的線條與填色區 若您以選取工具點選繪製的圖形, 會發現線條和 填色區是可以分別選取的兩個獨立圖形。
為了方便移動與組合, 我們可以把每個幾何圖形 的線條與填色區群組在一起。 群組幾何圖形的線條與填色區

24 按下儲存鈕之後, 會跳出匯出 Flash Player 交談 窗讓你做更細部的影片品質的設定, 您可依需要 做好相關設定再按確定鈕即完成匯出工作。
匯出 Flash 影片檔 (.swf)

25 發佈網頁 使用 Flash 的發佈功能, 您不必再透過其他網頁 編輯軟體, 就能直接把 Flash 影片檔發佈成網頁 (.htm)。
2. 在發佈設定 / 格式頁次勾選匯出的檔案格式後, 發 佈設定交談窗就會顯示各匯出檔案格式的設定頁次, 請 在各頁次中設定相關選項。 3. 按下發佈鈕即可進行發佈！執行發佈功能所建立的 各個檔案, 會存放在該 Flash 動畫檔所在的資料夾中。 發佈網頁

26 網頁空間與上傳網站

27 網頁空間 通常有向 ISP 申請上網服務, 幾乎都有提供免費 的網頁空間及電子郵件信箱等附加服務供您使用 。
若覺得免費網路空間的容量不敷使用, 有些 ISP 也提供付費的網站空間供人申請, 但是申請方式 與收費標準不一, 建議您到各 ISP 網站詢問。 不論申請哪一家的免費網站空間, 只要依照網站 中的指示輸入個人相關資料, 都可以順利完成申 請。 網頁空間

28 為了要讓 Dreamweaver 知道檔案要上傳到哪裡, 所以我們得先在 Dreamweaver 中設定要上傳的伺 服器位址, 請如下操作：
2. 為了方便上傳操作, 請按下檔案面板上的擴展 / 收合鈕, 將檔案面板以獨立的視窗顯示 (這樣可視範圍會比較大)。 3. 接下來要指定遠端網站伺服器的位址, 請在開啟交談窗後 切換到進階頁次。 4. 接著會出現提示交談窗告訴您會重新建立快取, 請按下確 定鈕, 即會回到檔案視窗。 設定欲上傳的伺服器位址

29 設定好遠端網站後, 現在要和遠端主機連上線, 才 能進行上傳的動作, 請按下連線至遠端主機鈕, Dreamweaver 就會自動與遠端伺服器連線。
與遠端伺服器連接

30 在 Dreamweaver 中, 上傳的網站伺服器通常稱 為遠端 (Remote), 而自己電腦裡的網站稱為本 地端 (Local)。
不要把「遠端」想得有多遠, 不管網站伺服器是 在台北、美國、你家樓下或是隔壁座位的電腦, 只要是供您上傳的主機, 都可叫做遠端網站 (Remote Site)。 遠端與本地端

31 上傳網頁 經過前面的設定後, 可以開始上傳網頁了, 由於是第 一次上傳, 所以是要將所有的檔案都傳送上去。
請在右邊窗格 (本地端) 點選最上層的根目錄 (或是 選取所有檔案), 再按上傳檔案鈕, 即可整個網站內容 上傳到遠端網站裡。 檔案上傳完畢後, 您就可以開啟瀏覽器, 輸入自己所 申請的網址測試網站是否能正常運作。 以後若要再將網站上傳到同樣的遠端主機, 就不必再 重新設定 FTP 主機位址, 只要按一下 鈕, 就可以 立即與遠端網站連接。 上傳網頁

32 網站上傳後看不到圖片？ 網站上傳後, 若在瀏覽網頁時發現要顯示圖片的 地方出現 圖示, 表示該圖片無法顯示, 其原因 可能有以下幾項：
網站上傳後, 若在瀏覽網頁時發現要顯示圖片的 地方出現 圖示, 表示該圖片無法顯示, 其原因 可能有以下幾項： 本地端的圖片檔案可能沒有上傳。 插入圖片時使用了絕對路徑, 而非相對路徑。 檔案大小寫不同, 或是使用了中文檔名。 圖片的格式不支援 (一般瀏覽器僅支援 JPG、GIF、 PNG 3 種格式)。 網站上傳後看不到圖片？

33 若需要重新上傳無法成功上傳的檔案、或是有新 的檔案需要上傳, 只要直接將檔案拖曳到欲存放 的遠端資料夾中即可。
上傳檔案後可能遇到的問題

34 不論您是申請付費或是免費的網頁空間, 通常只 要在完成申請手續後, 便可取得一個網址。然而 通常網站空間服務提供者給的網址都不太好記。 例如： 轉址服務簡單地說就是：「可以讓您的網址變得 又短又好記」。 讓網址更好記 - 申請轉址服務

35 目前提供轉址服務的網站大多為免費, 不過也有 些較具規模的站台是採取收費的方式來提供服務, 不過既然是採取收費制, 所提供的服務當然就會 比較好。
申請轉址服務

36 申請轉址服務 不論申請哪一家的轉址服務, 只要依照網站中的 指示即可順利完成申請。
若是還有疑問可參考各網站的相關說明與解答, 多半可找到有幫助的答案。 當申請好轉址後, 往後只要輸入轉址後的簡短網 址, 即可連結至您的網站, 不需再擔心網址太長的 問題了。 申請轉址服務

37 當我們在製作網頁時, 可以在網頁中加入一些隱 藏的關鍵字 (不會顯示在網頁上), 使瀏覽者更容 易透過搜尋引擎找到您的網頁。
在網頁中加入關鍵字讓網頁更容易被搜尋

38 Based on 第十九章與第二十章 網路應用Internet導論與實作，第二版，施威銘 研究室著，台北：旗標出版公司，F7060。
reference