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

彩票开奖结果查绚 七星彩开奖时间 浙江省体彩十一选五开奖结果 彩票怎么在手机上购买 山西快乐10分前三走势图 河南快3开奖五千期走势图 4399急速赛车 武汉凡谷股票行情 166bet娱乐城百家乐怎么样 股票推荐吧 基金配资是什么意思 正规网购彩票网站 山东11选五计划在线网址 彩票快乐10分开奖 大乐透摇号模拟器 股票指数 计算 七星彩历史开奖号码