Function/Functions in Interactions (Triggering 'Custom Events' on Widgets, Trigger, Triggers, Actions Macro/Action Macros)

advanced-prototyping

#1

I’m sure most of us are familiar with the trick of adding a Show action to a button widget onClick event, and rather than applying the Bring to Front to that event, applying it to the onShow event of the widget being shown.
This reduces duplication and an all round maintenance nightmare when dealing with more complex interactions.

Now, I’ve run into a problem with this technique when animating a move action of a menu panel.

It works fine when we show the menu panel - we can add the Show Widget action to the onClick of any number of widgets, and then create the Move action on the menu widget.

The issue arises when trying to hide the menu. If I set up a Hide Widget action, it does just that - hides the widget, but I don’t want to hide it straight away - I want to animate the move first. As a result I’m repeating a number of actions in 5 or 6 locations, creating said maintenance nightmare…

Does anyone have any clever tricks for getting round this one?? I’d be much appreciative of any ideas…

What would be really useful is being able to set up a custom event - much like a raised event… but no luck so far with using masters to achieve this. Perhaps this is a feature request!

Cheers,
Stu


#2

Functions is something that is definitely on the list. For now a lot of the advanced Prototypes use Dynamic Panels OnMove as triggers to call a function.

Just add the Interaction to the OnMove an empty Dynamic Panel and then call Move by 0,0 of that Dynamic Panel from multiple points. Now your complex Interaction is all in one spot and you can update it once and everybody triggering it will also be updated.

See It Live: Functions
RP File: Functions.rp (86.7 KB)

Dynamic Panel with a Complex Function that might be changed often or used from multiple sources:

Button OnClick calls Dynamic Panel "move by (0,0), this causes the function to run:


#3

OK Ian, you’re suggesting I create a dummy dynamic panel offscreen somewhere, and use this to trigger the interaction from this unique widget…
that’s a great tip, thanks for that…
Stu


#4

It doesn’t even have to be off screen. I just added Widgets to those to make them more visible. Everybody, has there own preference, but I usually just use empty 50 by 50 DPs somewhere in the top left corner or anywhere they are out of the way of the rest of the Prototype.


#5

Is it possible to create a sort of function that could be executed ?

For example, let say that i have a page with 10 different buttons, and I want them to execute on click the same set of actions.
I have to set them one by one (fortunately there is copy/paste for actions). But If I had 100 of these buttons ? and If I had to add/correct one action in the set , again i have to do it one by one.

This would be much easier to set like a function and attach it to the page.

PS: unless I’m wrong, the raised event interaction, which could be an alternative is only for masters (and it has to be create before the master is dragged to the stage, but i had some issues with that too, but that’s an other problem).


#6

There’s a couple ways this effect can be achieved. One way that I’ve used in the past is this:

Place a dynamic panel on your page. Name it something descriptive. You can leave it empty and move it off the side, you won’t actually be doing anything visual with it. Now what you can do is use the OnShow event to put in the actions you want. Then on your other widgets, the only action you need to put is to Show that dynamic panel which will then trigger the OnShow event which executes your actions.

This has the obvious benefit, as you’ve mentioned, of consolidating similar actions into one place that you only need to update once.


#7

that’s a nice hack ! like the crazy flicker one :slight_smile:
Will work for me.
Still, would be nice to be featured in the future.


#8

Hi guys

I used onShow/onHide for ages before switching to onMove a while back after seeing other people using it.

You can trigger events by moving a widget by 0,0 - so it doesn’t actually move.

This technique doesn’t require the triggering widget to be reset - or to be a dynamic panel. Just hide them on pageload.

Cheers

MG


#9

Thanks Mike. Same principle, even better.


#10

I recommend to use Hot Spots for this and Dynamic Panels more for Looping Functions or for OnLoad features (very great for custom widgets for example). So you have two different function-like widgets which have also different colors :slight_smile:


#11

move by 0,0 is a brilliant workaround - thank you!


#12

Hello,

what a crazy trick ! ^^
By the way there is something new since the creation of this topic ?


#13

Instead of using Move(0,0) and the OnMove event, you can use Fire Event to trigger any event you choose.


#14

You again ! ^^ Thanks a lot.
I was expecting something more “native” but if it runs well like that.


closed #15

unlisted #16