How to simulate frames like the Google Now Cards

geraldine satis shared this question 5 years ago
Answered

Hi! I'm a newbie with Prototyper Pro and I'm trying to make cards like in Google Now. There are multiple frames but once you click on one, then if it's in the back, it shows it on top of the other cards. I hope it is clear enough. A picture would be easier.


I have no clue how to do it!


Any tip?


Thanks!

Comments (11)

photo
1

Hi,


I would like to know for which device you want to create this prototype? Just to help you in the best way.


Thanks.

photo
1

Hi Albert,


My prototype is for the Iphone, portrait only for now.


I want to simulate the following behaviors:


1- When there are a lot of frames, they are stacked on top of each others, but you can still see the top of it. And, the size of the part that you see changes depending on the numbers of items. When there are a lot of them (pic 1), you only see a small part, when there are less frames, like on pictures 1, you see the frame more


2- When you tap on the top of one frame F1 that is hidden by the top one F2, the frame F1 shows on top of the others and the frame F2 goes behind it


3 - You can swipe them to make them disappear and they slowly move with a rotation towards the left of the screen following your finger movement, see pic 6


4 - The frames flip horizontally and resize too, see pic 2 and 5 and the weather example. I used a DP with two panels and I do a set active panel on the second panel with flip horizontal transition, but it doesn't always work. Any other idea? Maybe because the second panel is taller than the first one? Should I make a resize first?


How should I do it? With a main vertical DP in which I create another DP for each frame with 2 panels?


Many thanks!


1bbfdf5ab255c0fd2bdcf67b1184be03

photo
1

Hi again,


Addind the pic 2 and 5 here since I can't see them on the other thread.


Additional question: when you look at the "kitchen" picture, the "frame" has a phone, a text, and the buttons. Are those separate panels? thanks


c9d931a658038d39d7a18dfaa85dfa32

photo
1

Hi Geraldine,


well, it's not an easy example to reproduce and I will need some more time to finish the tutorial, but you have to do a carrousel with drag and drop actions.


Here you will find how to do a carrousel: http://www.justinmind.com/usernote/te...


A tutorial for drag and drop actions:


http://www.justinmind.com/prototyper/...


If you want to test the prototype that I'm working for your example, click on this link:


https://www.justinmind.com/usernote/t...

photo
1

Hi Albert,


Thank you for your reply.


Thank you for the hints on the carrousel and drag and drops.


I did the carousel part but still don't know how to stack them so you only see a part of it. I started to play with your tutorial and can't wait to see more!


Any idea when you'll be done?


Géraldine

photo
1

Hi Geraldine,


This effect it's very hard to simulate. Maybe it's possible to do it with some transparency.


1b775800d3187f7f1a810705ff7f8079


give me a couple of days to finish it but try to create a carrousel (group of weather cards) inside the big carrousel (all the cards).


TIP: add a transparent rectangle at the end of each minicarrousel to give some distance between each group of cards.

photo
1

Hi Albert,


Thank you for the tip.


So If I understand correctly, I need to create a Dynamic Panel Widget (DPW) to create the main Area with all the cards. For example:


* 4 'draggable' panels, representing the 4 states


- 1 with the weather card open


- one for the restaurants cards


- one for the driving estimation cards


- one for the calendar.


* and 3 empty transparent panels to visually separate the 4 panels


Then, in each panel, I create a DPW in which I create the different states of my card, for example:


* with the driving ones:


- P1: the cards are stacked


- P2: the card behind shows on top


* With the weather:


P1: The card is displayed


P2: You see the "back" of the card


Etc..


Is it how you'd do it? I can't wait for the tutorial!


Thanks a lot!


Géraldine

photo
1

Hi Geraldine,


What I have done:


1. One big DP to include all the cards with vertical layout.


2. One DPW that includes one DP with two panels, one for each state. Each panel has a tap event to activate the other panel.


7c191ff3624a55e71e05de12f0dd82e7


3. For each panel, I add one dynamic panel and one transparent rectangle. I use the dynamic panel to put all the content like you want.


This three steps is to reproduce the easy example, just for the accordion effect:


For the drag and drop:


1. Add two image maps next to the big DP, one on the left and one on the right side. They have to be as tall as height of the big DP, but the width can be small (5px is enought)


2. Select one of the card's panel and add "on drag" event. Select the move action, select the card's dynamic panel and choose move the cursor option. For this example, I also select Axis X. Then click ok.


3. Now, in this step we are going to define what happens when you end the drag move. So, add "on drag stop" event, click on the pencil next to "when drop on:" and select the big DP. Then, select the action "move", select the card's DP that you are editing and choose the "to drag start position".


4. Add a new "drag stop" event but this time select one of the image map that we have added instead of the big DP. Select the show/hide action, click on the hide button and select the card's DP. You can add an effect like 'fade' to make it more realistic.


5. This is an extra step if you want to show the "done for now / undo" dialog. Inside the events tab from the same DP that we're working with, go to the "drag stop" event that has the image map inside the "drop on" field, click on the arrow next to 'do' and add a new action. In this case, select the show/hide action, select the show button and choose the dialog.


6. Repeat the step 4 selecting the other image map. After doing this steps, you will have finished for one card. To create the other cards, go to the outline, select the card's dynamic panel click with the right button and click "duplicate" (be careful not to click on "duplicate panel"). Now you only need to change the content of each card.


If you have two cards for the same kind of card, for example traffic, it's more difficult and I will need more time to write it. I hope tomorrow I have finished.

photo
1

Hi Albert,


Thank you for explaining, and I can see you made progress on it, great!


1. One big DP to include all the cards with vertical layout.


2. One DPW that includes one DP with two panels, one for each state. Each panel has a tap event to activate the other panel.


> So here is what I understand:


- you create a DP1 for all the cards.


- in the DP1, Panel 1, you create a DP2 for the first set of cards with two panels for the two states the cards have. And then a DP3 for the second set of cards, etc. Correct?


Would I be able to download your example as a file when you're done?


It would be easier for me to actually see the DPs and check each event on them.


Tomorrow is Thanksgiving here, so it's Turkey day. Happy Thanksgiving if you celebrate it.


Thank you


Géraldine

photo
1

Here you can find the vp file. It's done with the new version 5.6. You need it to open it.


https://www.dropbox.com/sh/dmg5vs7pfv...

photo
1

Hi Albert,


Thank you for sending the file.


I successfully opened it after upgrading.


Géraldine