Magnetic Drop

Magnetic Drop

this tutorial describes how to create a “magnetic” drop area like, creating a paper doll, a puzzle and any other that requires an object to “stick” to a certain position, when dragged above the per-determined area.

https://youtu.be/IBeS-MKrQWQ

You can download the project files here.

The psd size is for 1024x768 so let's create a kwik project with iPad Mini.

page1.psd

Preparing the stage

We want all the draggable layers to show up in different positions when users refresh the screen. Select the 3 layers (ear_left, ear_right and head) then click Layer Properties (under the Layer and Replacements toolset). Set the Randomize positions of X to 200 and 550, and Y to 350 and 600. This will set the random position to all 3 selected layers:

Making the objects draggable

Select the ear_left layer and go to Interactions toolset. When the window opens, enter the following

Note: act_dropped action should be created in advance. act_dropped calls to play Pulse widget of animation. So you firstly create the animation, next create the action and finally you can set the act_dropped to dragaable objects.

In the new Drop area (optional) panel, select the layer you want as the droppable area (in this case, earl_shadow). Set the Active boundaries to 50 (or any other value you want). If you want to lock the dragged layer when it hits the droppable area, enable the Lock when positioned checkbox.

We are not using the other options but, they may be interesting if you a creating a puzzle, for example. You can create special actions for every object being dragged – for example, you can set a variable to be updated when the object is lock (this is the way to control if, for example, a 3 piece puzzle is completed).

Repeat the process to the other layers, using the appropriate actions.

When 3 pieces are completed, let’s play an animation.

Animation

The animation for instance, a pulse widget. When creating an animation for action or button, it must be set with Wait request.

Variable

First create a variable from Project and Pages > Create Variable. The value is zero.

Action - act_dropped

Second create an action. ( This action is set for Trigger action on lock in each Drag setting later. )

Now you attach the action to each Drag. Trigger action on lock is now act_dropped

Preview your project and enjoy!