Today’s is mainly about working with Conditions. We will create passcode validation as you can see below.

WRONG PASSCODE ENTERED

Wrong passcode will move from side to side and vibrate.

1. TAP TRIGGER FOR WRONG PIN

At first make the Keyboard to tap.

  1. Click Trigger/Tap:

2. Choose Wrong from combobox:

Wrong Container includes all the numbers except 1.

2. CONDITIONAL RESPONSE FOR WRONG PASSCODE

Next we need to:

  1. Fill the circles when the user taps the keyboard,
  2. move the circles two times left and right and then back to its original position,
  3. unfill the circles,
  4. vibrate.
  5. Set Opacity of Circle Filled 1 to 100%:

2. Create Condition.

If Opacity of Circle Filled 1 is 100% change Opacity of Circle Filled 2 to 100% :

3. Repeat the same steps for second and third Condition:

If Opacity of Circle Filled 2 is 100% change Opacity of Circle Filled 3 to 100% .

If Opacity of Circle Filled 3 is 100% change Opacity of Circle Filled 4 to 100% .

4. Make the Passcode move from side to side when all the circles are filled:

Move the Passcode to the left Move To X = 104 with Duration = 0.1 and Start Delay = 0.
Move the Passcode to the right Move To X = 144 with Duration = 0.1 and Start Delay = 0.1.
Move the Passcode to the left Move To X = 104 with Duration = 0.1 and Start Delay = 0.2.
Move the Passcode to the right Move To X = 144 with Duration = 0.1 and Start Delay = 0.3.
Move the Passcode back to it’s original position Move To X = 124 with Duration = 0.1 and Start Delay = 0.4.

5. Set Opacity of Circle Filled 1,2,3 and 4 back to 0%, Duration to 0.2 and Start Delay to 0.5:

6. Vibrate:

RIGHT PASSCODE ENTERED

Right passcode will move each circle up and down and then open up the home screen.

1. TAP TRIGGER FOR RIGHT PIN

Again I make the Keyboard response to tap.

  1. Click Trigger/Tap:

2. Choose Right from combobox:

Right Container includes only number 1.

2. CONDITIONAL RESPONSE FOR RIGHT PASSCODE

Next we need to:

  1. Fill the circles when the user taps the keyboard,
  2. move the circles up and down and then back to its original position,
  3. to home screen.
  4. Set Opacity of Circle Filled 1 to 100%:

2. Create Condition.

If Opacity of Circle Filled 1 is 100% change Opacity of Circle Filled 2 to 100% :

3. Repeat the same steps for second and third Condition:

If Opacity of Circle Filled 2 is 100% change Opacity of Circle Filled 3 to 100% .

If Opacity of Circle Filled 3 is 100% change Opacity of Circle Filled 4 to 100% .

4. Make the Passcode move up and back to it’s original position:

Move the Circle Filled 1 up Move To Y = -10 with Duration = 0.1 and Start Delay = 0.
Move the Circle Filled 2 up Move To Y = -10 with Duration = 0.1 and Start Delay = 0.05.
Move the Circle Filled 3 up Move To Y = -10 with Duration = 0.1 and Start Delay = 0.1.
Move the Circle Filled 4 up Move To Y = -10 with Duration = 0.1 and Start Delay = 0.15.
Move the Circle Filled 1 down Move To Y = 0 with Duration = 0.1 and Start Delay = 0.2.
Move the Circle Filled 2 down Move To Y = 0 with Duration = 0.1 and Start Delay = 0.25.
Move the Circle Filled 3 down Move To Y = 0 with Duration = 0.1 and Start Delay = 0.3.
Move the Circle Filled 4 down Move To Y = 0 with Duration = 0.1 and Start Delay = 0.35.

5. Jump to home screen:

RESOURCES

Animation Start

Animation Complete



Source link https://blog.prototypr.io/protopie-tutorial-3-conditions--and-jump-response-9b396587b31?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here