Adobe Edge Animate --使用JQuery制作的美女拼图

Adobe Edge Animate --使用JQuery制作的美女拼图

版权声明:

本文版权属于 北京联友天下科技发展有限公司。

转载的时候请注明版权和原文地址。

效果图:

一、图形元素制作

1.首先我们找到一张图片,如百度图片中找一位美女之类,在Photoshop中用标尺画一个九宫格,然后裁剪成九张大小一致的图片,另存为图片即可。

2.打开Edge,新建工程,我们命名为Edge_demo_puzzle,导入图片,拉到舞台中,打乱顺序之后,为每一张图片添加类名,如下图:

我们在此依次添加drag1drag2……drag8drag9

3.创建九宫格背景,在Edge中创建rectangle,为每个添加类名,我们在此依次添加drop1drop2……drop8drop9

4.在每个九宫格部分上方添加数字,这个可加可不加。

二、添加cssjs文件,我们从网上下载jquery-ui-1.9.2.custom.min.jsjquery.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改为drag2drag3……即可,同理将drop1的相关函数复制,将drop1改为drop2drop3,并且将accept对象改为drag2drag3……,附函数:

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

作者:北京联友天下科技发展有限公司  肖伟民

posted @ 2012-12-28 18:01 Adobe Edge 阅读(...) 评论(...) 编辑 收藏