新聞動态
時間線通過在不同的時間改變層的位置、大(dà)小(xiǎo)、可見性和疊放(fàng)順序等來創建動畫。時間線不能直接控制頁面中(zhōng)的對象,它控制的是放(fàng)置這些對象的層,如果要使圖像、文本等對象産生(shēng)動畫效果,必須将其置于層中(zhōng)。
下(xià)面我(wǒ)們創建一(yī)個最簡單的時間線動畫,以對時間線有一(yī)個最基本的了解。
1.設計目标
建立一(yī)個做直線運動的時間線動畫。
2.素材準備
網頁中(zhōng)需要用到本地站點image文件夾下(xià)的兩個圖像文件:ing8_1.jpg,img8-2gif.ILLI!說明
爲網頁添加背景圖像的方法如下(xià):按Ctrl+J鍵,在彈出的"Page Properties"對話(huà)框中(zhōng),單擊"Background Image"欄旁的"Browse" 按鈕,從彈出的"Select Irmage Source"對話(huà)框中(zhōng),選擇image 目錄下(xià)的img8-1jpg文件,單擊"Select'按鈕,回到"Page Properties"對話(huà)框後,單擊"OK"按鈕。
3.實現步驟
(1) 在頁面中(zhōng)添加一(yī)個新層,在層中(zhōng)插入圖像 ing8-2,gif,然後将層移動到動畫的起始位置。
(2) 在菜單欄中(zhōng)選擇" Window" → "Timelines"命令打開(kāi)時間線面闆(如果時間線面闆已打開(kāi)這一(yī)步可省略)。
(3) 選擇要創建動畫的層。
(4) 單擊時間線面闆中(zhōng)的彈出菜單按鈕上,在彈出的菜單中(zhōng)選擇"Add Object (添加對象)"或用鼠标拖動圖層到時間線的第一(yī)幀處。
(5) 當第一(yī)次在時間線中(zhōng)添加對象時,會彈出提示框,告訴你可以改變該層 的大(dà)小(xiǎo)、位置、層順序以及可見性。單擊“OK"按鈕,這時在時間 線通道中(zhōng)将出現一(yī)個紫色動畫條,動畫條中(zhōng) 顯示了層的名稱,如圖所示。
(6) 單擊動畫條尾部的關鍵幀位置(注意播放(fàng)頭也跟着移動到該處),将動畫層移動到動畫結束的位置,這時從動畫起始位置到結束位置有一(yī)條線顯示,這就是層的運動軌迹,如圖所示。
(7) 按播放(fàng)按鈕,可直接在網頁中(zhōng)預覽時間線動畫。
(8) 如果想在浏覽器中(zhōng)預覽動畫效果,則應進行以下(xià)設置:
① 選中(zhōng)"Autoplay"複選框,否則浏覽器中(zhōng) 的動畫是不會自動播放(fàng)的;
② 逃選中(zhōng)"Loop"複選框,否則動畫在浏覽器中(zhōng)隻播放(fàng)一(yī)次;
③ 預覽網頁,網頁保存到網站建設本地站點的example文件夾下(xià),文件名爲ex8-1.htm。
上一(yī)篇: 網站設計中(zhōng)的時間線面闆
下(xià)一(yī)篇: 網頁文件的基本操作