| 有什么好辦法讓每一個(gè)進(jìn)入自己網(wǎng)站的球迷朋友也一起激動(dòng)一下呢？本文將告訴你怎樣使用Dreamweaver和幾個(gè)簡(jiǎn)單的步驟完成漂亮而富有創(chuàng)意的動(dòng)畫(huà)效果。 效果描述： 當(dāng)瀏覽者進(jìn)入你的網(wǎng)站后，會(huì)看到屏幕左側(cè)有一個(gè)足球，右側(cè)是一個(gè)球門(mén)，足球?qū)⒁云恋幕【€直掛球門(mén)死角，并如此循環(huán)。
聽(tīng)起來(lái)好象很復(fù)雜，別擔(dān)心，有Macromedia 的網(wǎng)頁(yè)魔法師Dreamweaver MX在此，一切將迎刃而解。制作中主要應(yīng)用了表格、層以及時(shí)間線控制。 步驟1： 首先你應(yīng)當(dāng)擁有兩張圖片，一個(gè)是足球，一個(gè)是球門(mén)，在世界杯期間，我實(shí)在不知道還有什么比這兩樣?xùn)|西更容易找到了，你可以在Fireworks中對(duì)找到的圖片素材做進(jìn)一步處理，當(dāng)然也可以自己直接在Fireworks中繪制。值得注意的是兩張圖片都請(qǐng)制作為GIF格式的透明圖像。好，現(xiàn)在我們擁有了一張足球圖片Ball.gif，寬為30 ，高也是30（如圖1）；另外還有一張球門(mén)的圖片Door.gif，寬為60 ，高為80（如圖2）。  
圖1 圖2
步驟2： 打開(kāi)Dreamweaver MX，新建一個(gè)頁(yè)面并以你喜歡的名字保存，點(diǎn)擊工具欄上的Insert Table圖標(biāo)按鈕插入表格（如圖3），  圖3
在彈出的對(duì)話框中設(shè)置Rows為1(一行)，Columns為1（一列），Width為778px（如圖4）。  圖4
點(diǎn)擊OK按鈕完成表格的插入。使用鼠標(biāo)選擇剛剛插入的表格（鼠標(biāo)在表格框線上單擊），在下方Properties面板中設(shè)置表格位于頁(yè)面正中（如圖5），即Align屬性為Center。 
圖5
步驟3： 在表格中任意位置單擊鼠標(biāo)，在下面的Properties面板中設(shè)置Align為Right（如圖6），  圖6
這是設(shè)置表格中單元格的對(duì)齊屬性。在工具欄上選擇Insert Image按鈕，在彈出的對(duì)話框中選擇圖片Door.gif，效果如圖所示（如圖7）。 
圖7
步驟4： 在工具欄上選擇Draw Layer按鈕（如圖8），  圖8
拖曳鼠標(biāo)繪制一個(gè)層，在層中任意位置單擊鼠標(biāo)后在工具欄上選擇Insert Image按鈕，在彈出的對(duì)話框中選擇圖片Ball.gif，點(diǎn)擊ok按鈕。 步驟5： 鼠標(biāo)右鍵單擊繪制的層，在彈出菜單中選擇Add Timelines（如圖9），  圖9
這樣就添加了一根時(shí)間線。我們可以在下方的Timelines面板中看到（如圖10）。  圖10
步驟6： 我們?cè)赥imeline上的最后一幀（第15幀）按下鼠標(biāo)并拖拽，將最后一幀拖拽到第35幀（如圖11）。  圖11
確認(rèn)你現(xiàn)在選擇了第35幀（如果沒(méi)有，請(qǐng)用鼠標(biāo)單擊第35幀），然后鼠標(biāo)拖曳繪制好的層向球門(mén)方向運(yùn)動(dòng)，并放置在球門(mén)上（如圖12）。 
圖12
你可以看到一條線段將Ball.gif的起始位置（第1幀的位置）與終點(diǎn)位置（第35幀）連接起來(lái)，這就是它的運(yùn)動(dòng)軌跡。 步驟7： 下面來(lái)為運(yùn)動(dòng)軌跡增加弧度，鼠標(biāo)右鍵單擊第10幀，在彈出菜單中選擇Add Keyframe即可在這一幀添加關(guān)鍵幀（如圖13）。  圖13
確認(rèn)你現(xiàn)在選擇了第10幀，然后鼠標(biāo)拖曳繪制好的層向球門(mén)防線運(yùn)動(dòng)，我們可以看到運(yùn)動(dòng)的軌跡將按照我們拖曳的位置不同而改變。將圖片并放置在合適位置，放置的時(shí)候適當(dāng)考慮球的速度與軌跡。（如圖14）。 
圖14
如果想更夸張或者更精確的控制運(yùn)動(dòng)，可以使用同樣的方法添加關(guān)鍵幀并拖曳移動(dòng)位置即可。 步驟8： 將Timeline面板的AutoPlay選項(xiàng)與Loop選項(xiàng)后的選擇框選中，啟動(dòng)Autopaly選項(xiàng)可以使瀏覽者一進(jìn)入頁(yè)面就看到動(dòng)畫(huà)效果（如圖15），不需要其他事件激活，Loop選項(xiàng)可以使動(dòng)畫(huà)循環(huán)播放。  圖15
好了，我們完成了動(dòng)畫(huà)效果的制作，你可以按下鍵盤(pán)的F12鍵來(lái)檢測(cè)動(dòng)畫(huà)效果，做進(jìn)一步的修改。看，漂亮的弧線，球進(jìn)了！ |
