Dreamweaver怎麽設計一款拚圖遊戲?

時間:2019-04-06來源/作者:靚女人品牌街8 編輯:源碼庫 文章熱度:0

Dreamweaver中想要將一幅畫分割成幾份在框內進行拚圖遊戲;當靠近真確的拚圖時自動吸附,該怎麽製作這個動畫效果呢?下麵我們就來看看詳細的教程。

 

軟件名稱:
Adobe Dreamweaver CS6 簡體中文破解補丁(附官方主程序)
軟件大小:
1.2MB
更新時間:
2013-03-24

 

1、在軟件中新建一個頁麵點擊創建

Dreamweaver,拚圖遊戲

Dreamweaver,拚圖遊戲

2、點擊-頁麵設置選擇一張背景圖片

Dreamweaver,拚圖遊戲

3、點擊工具欄繪製邊框

Dreamweaver,拚圖遊戲

4、選中邊框-點擊代碼-重命名為bj-找到背景代碼

Dreamweaver,拚圖遊戲

5、找到邊框代碼-刪除默認樣式顏色的邊框代碼

Dreamweaver,拚圖遊戲

6、選擇輸入邊框樣式和顏色代碼

Dreamweaver,拚圖遊戲

Dreamweaver,拚圖遊戲

7、在繪製四個邊框設置為透明色

Dreamweaver,拚圖遊戲

8、按下shift鍵一次點擊選中4個邊框點擊-修改選項-排列順序-設置寬度相同-在進行一次設置高度相同

Dreamweaver,拚圖遊戲

 

9、一次打開分割好的四張圖片拖拽隻邊框1、2、3、4

Dreamweaver,拚圖遊戲

10、拉兩條 輔助線豎線對齊250。橫線對齊標尺150處然後拖動圖片拚成一副完整的圖片

Dreamweaver,拚圖遊戲

11、點擊邊框1開始設置-拖動AP元素-自動獲取當前位置-距離20個像素自動吸附,一次用相同的方法設置完4個邊框

Dreamweaver,拚圖遊戲

Dreamweaver,拚圖遊戲

Dreamweaver,拚圖遊戲

12、打亂圖片保存你就可以在瀏覽器中玩拚圖了

Dreamweaver,拚圖遊戲

Dreamweaver,拚圖遊戲

以上就是Dreamweaver製作拚圖遊戲的教程,希望大家喜歡,請繼續關注ASPKU源碼庫。


注:相關教程知識閱讀請移步到Dreamweaver教程頻道。
相關Dreamweaver教程
熱門標簽

Dreamweaver教程Rss訂閱Dreamweaver教程搜索