So, i whant a button with a idle state and a pressed state. No problem. I create a component with a touch start and a touch end state. That works fine.
I now place this button component on an art board, add a tap event to it, so it goes to another art board, and run the preview.
When i click/tap the button, nothing happens, it only runs the compnonents touch start/end state, but doesn’t go anywhere. Why?
Even if i place the tap event on the art board it self, it wont go to the next page if i click on the button!
I can only use components as links, if i remove any interactions inside the component!
Can i seriously not make a reusable button, that also functions as a link?
I also don’t understand why this was made in that way, I guess there must be some conflicting with routed events that share the same trigger like a tap, etc…
The workaround is to use the TouchStart trigger to send a message to the parent, and the TouchEnds to send the button to other visual state, then from out of the button you can freely use the Parent Trigger you previously exposed to go to another screen.
Careful, you need to send the message to the parent first, so that’s on the TouchStart, if you send the message to the parent on TouchEnd and have a different transition on TouchStart, the TouchEnd even won’t trigger.
So if i have an onboarding flow with 4 steps, i would ned 4 versions of my next button, for this to work right? one for each step, so it can send me to the next screen?
You can reuse the same button if they all have the same design/states, just link on each screen the button message to next screen and you should be ready to go
In the example I shared I’m using the same button, as it comes with an external message, you can reuse that message to transition to other screens.
I know lots of people struggle with the messages, I also did until I learned the ways of it, the tutorials aren’t very useful for this, I believe @Daniel was working on some updates to explain their functionality a bit better.
To send a message from inside a component to its parent view, you need to drag the interactive arrow to that little + icon you see.
From what I can see on your DreamScenario.prd file is that the button internal triggers are wrong.
As I said before, TouchBegins is the one that sends the message and TouchEnds the one sending the button to the pressed state, if you do the other way around, the message won’t be sent.
Then from the button pressed state, you can simply use an ‘Auto’ trigger to go back to its normal sate.
So just by fixing your button internal triggers I’ve managed to make it work, I just had to re-link the external button message again with the rest of screens.
@shonen@Daniel …anyone!
Thanks for the help. I am really struggling with understanding Messages and how they work.
Where did you read up about them?
I am trying to have a scenerio where:
Person taps on a button [inside a component] and then the button changes state.
Person then taps on the changed state button and that fires a dialog [another component].
From the dialog they can confirm or cancel.
Confirming goes back to the start.
Cancelling does not change the state of the button.
I have everything working except the Cancel button, which should dismiss the dialog and not change the button state, but I can’t get the cancel button to do anything.
I think i got it now!
Sadly, i cant use this method then.
I am trying to hit a look and feel. By building the button this way, the page transition is triggered before the press animation, which makes things look out of sync. This will also require me to explain this to the developer every time.
Once again, thanks for all the help. It’s very much appreciated.
@wtrsld I made the prototype a little differently than how you built it.
I made the Alert it’s own component, with an off state and on state.
The “Yes” option will reset the “check in” component, and the “check in” component has an automatic message on it’s default state to reset the Alert to go back to the invisible state.
The “Cancel” button will reset the Alert to it’s invisible state.
That may seem a little confusing, but it seems to work on my end. I’ve attached a dropbox link for you to check out. Whenever I prototype an alert into a prototype, I typically try to make it it’s own component on top of everything, instead of moving to a new artboard with the alert visible. Let me know if this works for you!
I just noticed, you already had it 99% there how in the way that you built it already. You had a message going from cancel up to the parent, you just didn’t seem to finish linking it back to the first page. I made it that way real quick and put it in this link as well. Check it out
