Complete beginner - falling at the first hurdle!

newbie-question
#1

Hi,

I’m just about to begin my journey learning Axure and my first port of call has been to watch a YouTube series ‘Noob to master’. I’ve got 3 videos in and already I’m struggling to get my first interaction to work…

I’m starting very simple. All I want is a green underline to animate in when I hover over some text.

I’ve tried a number of approaches, that logically to me, should work.

  1. I have my text layer ‘Coffee’ and my ‘Green shape/underline’. I select ‘Coffee’ and apply a new interaction / mouse hover / show/hide / target: shape layer / animate: slide left

In my head that translates to, when mouse hovers over coffee, green shape will slide in left. I don’t understand why this approach isn’t working.

  1. Create a dynamic panel. State 1: Coffee / State 2: Coffee with green shape underline. New interaction / mouse hover / set panel state / select state 2

When I go to view the prototype the first option does nothing and the second option has some effect, but it’s a really delayed slide in and isn’t the result I’m going for.

Any help is much appreciated! Just trying to get my head the basics first before going any further.

Cheers,
Jason

#2

Welcome to Axure!

It’s tough to know exactly what might be the problem without seeing your .rp file. You can upload it here by clicking the little “up arrow” icon in the Reply toolbar, or just dragging the file into the Reply text entry area. The steps you describe for 1 and 2 should work though.

Here is a quick demo I made to show you how I would create this, with both of your methods demonstrated. show on hover.rp (52.8 KB)

Your steps to create this are correct. Some common mistakes to check for:

  • Are you targeting the correct shape (the underline) to show? Naming your widgets helps avoid this.

  • Is the target shape already shown? If so, showing it again will have no effect. So your underline must be hidden before it can be “shown with animation.”

    • It should be hidden by default, and a Mouse Exit event on ‘Coffee’ should hide the underline.
    • You can either hide it by default in the RP editor (look for the eyeball icon next to Width and Height in the style toolbar or at upper right of the STYLE pane.)
    • Or, you can keep it shown in the editor and apply a Loaded event on it to “Hide This”. I prefer this most of the time so I can more easily see all my widgets, especially when I come back to it months later.

  • Is the target shape placed behind another shape, thus obscured from view even when it is shown?

  • Is the "text layer ‘Coffee’ behind another shape (like a rectangle with no fill or a hotspot?), thus blocked from interactions with the mouse?

  • You can use the Console and its Trace feature to help debug prototypes in Preview mode. This will show all the interactions as they happen. For example, if you see the action, “Show/Hide Show (shape)…” then that actually happened (but your shape is perhaps already shown or is obscured.) If you don’t even see the Mouse Hover event then it just didn’t happen (so likely some other widget is obscuring your ‘Coffee’ widget.
    Here is the Axure documentation for the Console:
    https://docs.axure.com/axure-rp/reference/prototype-player/#console

Realize that the Mouse Hover event only fires 1500 ms after the mouse cursor is in front of the widget*. That is most likely the cause of the “delayed slide in”. Try cutting the Mouse Hover event and pasting to the Mouse Enter event.

*You can see this delay in the Console Trace when you move the cursor over your dynamic panel. There is a pause then the Mouse Hover event fires. Compare this with Mouse Enter.