Second Class: Drag and Drop

After Parallax, we start the lesson of Drag and Drop by using Adobe Edge instead of Adobe Flash.

First, we import the picture into Adobe Illustrator and adjust the art board of each part of the face and clothing. Then save it as SVG file because if I save it as JPG or PNG, when I enlarge the images, it will be pixelated.

After saving the file as SVG, I import it in Adobe Edge.

Then I mark the place that I wanted to place the hat on it by create a rectangle on the place that I want to drop the hat, and adjust the opacity to make it invisible.

Before going to the final, we have to add in some code to make the item draggable and droppable.

After the coding, play the final.

 To make it more interesting, I add in some short animation to make the hat move after drop on the head.

As well as the glasses.

Below is the video of the final.