Adobe Edge Animate --使用JQuery制作的美女拼图
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
作者：北京联友天下科技发展有限公司 肖伟民
