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.

• https://www.kwiksher.com/tutorials/Kwik4/magnetic.zip

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

page1.psd

• The colored layers (2 ears and 1 head) are the draggable objects.

• The grayed layers (they are individual objects – I am calling them shadows) are the droppable areas.

• As you can see, we are going to set a boundary around each object (this way, users don’t need to position the draggable layers exactly on top of its shadow.

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:

• ear_left
• ear_right
• heard
• x between 200 and 550
• y between 350 and 600

Making the objects draggable

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

• Bring to front while dragging
• Drop area
  • Layer/group: earl_shadow
  • Acive boundaries: 50 px
  • Lock when positioned
  • Trigger action on lock: act_dropped
  • Return to original position if not locked

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.

• Layer: head
• Scale: 150%
• Duration: 0.5 sec
• Loop times: 3
• Reverse at ending
• Starts: Wait request

Variable

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

• Name: count
• Value: 0

Action - act_dropped

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

• Edit Variable from Code. Set count = count + 1

• IF count equals to 3 then

  Because there are 3 pieces. We count it up for each drop till it equals 3. If count == 3 then PlayAnimation end.

• Add Play animation

• End If

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

Preview your project and enjoy!