Dreamweaver怎么設計一款拼圖游戲?

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

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教程搜索

顶呱刮西游记