Adobe Edge Animate --使用JQuery制作的美女拼圖
版權聲明:
本文版權屬於 北京聯友天下科技發展有限公司。
轉載的時候請注明版權和原文地址。
效果圖：
一、圖形元素制作
1.首先我們找到一張圖片，如百度圖片中找一位美女之類，在Photoshop中用標尺畫一個九宮格，然后裁剪成九張大小一致的圖片，另存為圖片即可。
2.打開Edge，新建工程，我們命名為Edge_demo_puzzle，導入圖片，拉到舞台中，打亂順序之后，為每一張圖片添加類名，如下圖：
我們在此依次添加drag1、drag2……drag8、drag9
3.創建九宮格背景，在Edge中創建rectangle，為每個添加類名，我們在此依次添加drop1、drop2……drop8、drop9
4.在每個九宮格部分上方添加數字，這個可加可不加。
二、添加css和js文件，我們從網上下載jquery-ui-1.9.2.custom.min.js、jquery.ui.touch-punch.min.js放置在工程文件目錄下的js文件夾中，下載jquery-ui-1.9.2.custom.min.css放置在css文件夾中，如下圖：
三、添加函數
在時間線面板中，點擊Stage左側的Open Action按鈕，添加compositionReady函數，先添加drop1類和drag1類的圖片和方框函數：
yepnope(
{
nope:[
'js/jquery-ui-1.9.2.custom.min.js',
'js/jquery.ui.touch-punch.min.js',
'css/jquery-ui-1.9.2.custom.min.css'
],
complete: init
}
);
function init() {
foo();
$('.drag1').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
function foo() {
$('.drop1').droppable({
greedy: true,
accept: ".drag1",
drop: function(ev, ui) {
}
});
}
}
添加完之后，我們按Ctrl+Enter鍵，在瀏覽器中預覽，可以看到我們能拖動drag1的圖片，而且只當它停留在drop1類的方框范圍內時才可以放置下來。
好了，接下來的事情就好辦了，只要將drag1的相關函數復制，將drag1改為drag2，drag3……即可，同理將drop1的相關函數復制，將drop1改為drop2，drop3，並且將accept對象改為drag2，drag3……，附函數：
yepnope(
{
nope:[
'js/jquery-ui-1.9.2.custom.min.js',
'js/jquery.ui.touch-punch.min.js',
'css/jquery-ui-1.9.2.custom.min.css'
],
complete: init
}
);
function init() {
foo();
$('.drag1').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag2').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag3').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag4').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag5').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag6').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag7').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag8').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
$('.drag9').draggable({
revert: "invalid",
stop: function() { $(this).draggable('option', 'revert', 'invalid'); }
});
function foo() {
$('.drop1').droppable({
greedy: true,
accept: ".drag1",
drop: function(ev, ui) {
}
});
$('.drop2').droppable({
greedy: true,
accept: ".drag2",
drop: function(ev, ui) {
}
});
$('.drop3').droppable({
greedy: true,
accept: ".drag3",
drop: function(ev, ui) {
}
});
$('.drop4').droppable({
greedy: true,
accept: ".drag4",
drop: function(ev, ui) {
}
});
$('.drop5').droppable({
greedy: true,
accept: ".drag5",
drop: function(ev, ui) {
}
});
$('.drop6').droppable({
greedy: true,
accept: ".drag6",
drop: function(ev, ui) {
}
});
$('.drop7').droppable({
greedy: true,
accept: ".drag7",
drop: function(ev, ui) {
}
});
$('.drop8').droppable({
greedy: true,
accept: ".drag8",
drop: function(ev, ui) {
}
});
$('.drop9').droppable({
greedy: true,
accept: ".drag9",
drop: function(ev, ui) {
}
});
}
}
四、將每個圖片的鼠標手勢修改為移動手勢，如下圖：
在瀏覽器中預覽效果，可以看到我們已經可以享受實現一個美女拼圖的樂趣了！
本文地址：
http://www.cnblogs.com/adobeedge/archive/2012/12/28/Adobe_Edge_Animate_Puzzle.html
作者：北京聯友天下科技發展有限公司 肖偉民