Magnetic Drop

あるレイヤーを決まった場所にドラッグするとその場に固定される マグネットドロップ(magnetic drop)の作り方について説明します.

https://youtu.be/IBeS-MKrQWQ

下記のリンクからプロジェクトファイルをダウンロードできます.

psdファイルのサイズが 1024×768なので,iPadMiniに対応したkwikプロジェクトを作りましょう.

page1.psd

  • 色のついたレイヤー(2つの耳と1つの頭)はドラッグできるオブジェクトです

  • 灰色のレイヤー(これらは独立したレイヤーですーshadowsと呼びます)はドロップできるエリアです.

  • それぞれのオブジェクトの周りに境界線を設定します。ユーザーは境界線に付近にドラッグすると、磁石に引き良さられたように、レイヤーがshadowに固定されます。

ステージの準備

ドラッグできるレイヤーをそれぞれ異なった場所に出現させて、ステージを開始します。

3つのレイヤー(左耳,右耳,頭)を選択し,Layer and Replacementsツールセットから、Layer Properties をクリックしてください。 Randomize positionsのXを200から550,Yを350から600に設定してください.これによって選択した3つのレイヤーがランダムな場所に出現します。.

  • レイヤー
    • ear_left
    • ear_right
    • head
  • x between 200 and 550
  • y between 350 and 600

レイヤー(オブジェクト)をドラッグできるようにする

ear_leftレイヤーを選択して Interactionsツールセットから、Dragをクリックします。ウィンドウが開いたら,以下の設定を有効にしてください

  • 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

注意:act_dropped アクションは事前に作られている必要があります.act_droppedは、Pulse widgetのアニメーション再生です.最初にアニメーションを作り,次にact_drapped アクションを作成、最終的にact_droppedをドラッグできるオブジェクトに設定してください。

Drop area(optional) > Layer/groupにドロップする先のレイヤーを選択します。この場合は earl_shadowです。

Active boundariesを50に設定します(他の変数は自由に設定してください)。

ドラッグしたレイヤーが earl_shadowに収まったときに、そのまあ固定したい時は,位置の固定(Lock when positioned)のチェックボックスを有効にしてください.

補足:Trigger action on releaseは,例えばパズルのようなものを作りたい時に有効なオプションになるかもしれません.オブジェクトが固定された時に変数に値を入れるアクションを設定し、3つのピースで構成されるパズルが完成したかを判断するといった用途のときに便利です。

これを他のレイヤーでも繰り返し設定してください.

3つのピースが揃った時に,アニメーションを流しましょう

Animation

まずアニメーションを作成します。ここではpulse widgetを使いましょう.アクションもしくはボタンに設定可能なアニメーションは,必ず Wait requestが設定されている必要があります。head, ear_left, ear_rightの各レイヤーにアニメーションを付与します。

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

Variable

Project and Pages > Create Variableから変数 countを作成します.値は0です.

  • Name: count
  • Value: 0

Action - act_dropped

次にactionを作成します。このactionはTrigger action on lockに設定されるものです。

  • Edit Variable from Code. Set count = count + 1
  • IF count equals to 3 then

    頭と右耳、左耳の3パーツあります。countが 3になったときに、アニメーションを再生します。

  • Add Play animation

  • End If

これをそれぞれのドラッグに関連づけします、Trigger action on lockに act_droppedを設定します。

それではパブリッシュして楽しんでください!

results matching ""

    No results matching ""