Axure RP: Image over button - Where do I put the interaction?

Tool: Axure RP 7 Beta. It's a software to create high-fidelity interactive prototypes.

The problem: to create a button with custom image over it. On mouse hover over the button or over the image we want to display button's different style. In Axure 7 you can select image and button and convert them to Dynamic Panel, then you can apply any mouse/keyboard events interactions to it, for example OnMouseEnter and OnMouseOut. However, in this case, you will loose interaction styles on the button when your mouse is over the image instead of the button: button will not be highlighted.


Solution: First, create the Button Shape, and place the Image over it. Style it in the way it appeals to you. Now, select the both, the button and the image, and convert them into dynamic panel:

Give the new dynamic panel a name. It's a good practice: Double-click on the dynamic panel. It will bring Panel States dialog:  
Rename the default "State 1" to "Normal". It's optional, but more informative than just a "State 1" name, and will make better sense for you down the road: 
Duplicate "Normal" state to new state. Name it "Over". Or you can add a new state, and copy-paste the content from state 1 to state 2:
Double-click on the new state name to enter it. You should see the tab title saying panel name/state. Here is "MyDynamicPanel/Over":
Edit the content as you want it to appear on mouse hover. I edited the button background and text color:
Go back to you page. In the Interactions area on the right click "More Events" and choose OnMouseEnter:
In the Case Editor dialog, in "Click to add actions" area, click on "Set Panel State" :
Select "Set This Widget state to", at the bottom right of the dialog select the state "Over":
Submit the dialog. Now you should have "OnMouseEnter" interaction set "this to Over":
Repeat the interaction setup for "OnMouseOut" interaction. This time "set this widget" to "Normal" state:
Now you have both interactions set, and your button is ready! :
Now it's possible to go further, add OnMouseDown interaction, and "Set this widget to Down". UPDATE: I rebuilt this example, and added a third, "Red" state. To achieve proper interactions, I added OnMouseDown and OnMouseUp custom actions.Look at this self explanatory screenshot:
  The web page now looks like this (I added some explanations):
 You can see the result of these steps in live action here: http://kardash.net/portfolio/Calypso/Axure_button_example/home.html

BONUS: Axure 8 source: http://kardash.net/portfolio/Calypso/Axure_button_example.rp

Comments

Post a Comment

Popular posts from this blog

Using Trello and Confluence to manage UX design project. Part 2

Image
This is part Two. Part One can be found here . Term definitions. Brainstorming board. Activity board. Let me give you an overview of the items we refer to, deal with, and vetting all days long. Below are my simple definitions. UX Brief – a living document, a single and comprehensive point of reference of the design project. User Story – a short requirement or request from the end user. Later will be converted into task flow performed by this user to reach the goal. Acceptance Criteria – a set of conditions/statements, or a checklist, which defines the user story’s Pass/Fail . Feature – a functional part of the application, which combines several user stories. User stories are written to provide a complete support to this feature in terms of tasks performed by the user, while keeping in mind the user’s goal. Epic – a large logical group of multiple features in complex application. Brainstorm – a collaborative session involving product owners (PMs) and UX designers...
Read more

How do I use InVision

Image
Team lead asked me to write what InVision products do I use, how I use them, what are pros and cons. I wrote it today, and really think it will be helpful to share my thoughts with wider audience. So, below is the adaptation of what I provided to the engineering management in one fintech company.  I use InVision to share my hi-fi designs and specs, which I create in Sketch desktop application. This is my primary and every day usage of InVision, and about 90% of all usecases of all InVision products combined.  I sync designs via the plugin in Sketch made by Invision, called Craft .  When they are in InVision, we call those designs prototypes .  It works, but I often experience slowness. Sometimes sync process is failing, and I have to try it again. In Sketch I select one or more artboards, then initiate sync, which sends the artboard to InVision cloud. I have to be logged in Craft plugin with my InVision credentials. Almost every day, especially when I design intens...
Read more

Using Trello and Confluence to manage UX design project. Part 1

Image
This is part One. Part Two is here . Introduction. “ Describe your design process ”. It’s a typical interview question for UX designer position. User-centered design process indeed has defined set of steps. In theory. On the practice though, the adherence to these steps depends on many factors, such as communication and execution skills, practical experience, ability to influence people, being leader and influencer, and at what level your organization is a design driven org. So many businesses are not ready to adopt the design practice, and to place the design before the development. Or simply there is not time or budget to go through all steps. Here in Herbalife the UX Design team accepted Norman Nielsen group philosophy:   Empathize – Define –Ideate – Prototype – Test – Implement .  However the   interpretation of the practical tasks can differ dramatically in different organizations. Here what we currently do: Design Thinking and Agile Any project...
Read more