Hello, I am very new to using Axure and need to create semi-complex interactions. Do you have any recommendations for tutorials for the following 4 scenarios:
I want to create a slider with pictures inside the slider. These pictures go from focused state to a non-selected state, depending on where I drag the slider. The focused state looks very different from the non-focused state.
Based on the above slider, the bottom portion of the page changes based on whatever is selected in that slider. Would this simply mean I would need to create an alternative design on another page with the bottom portion changes?
Having text animate - for example, I have a sentence and one word in that sentence changes to different words.
Having a circle animate - expand in and out, based on custom timing.
Welcome to Axure! You can certainly do all of this and there are many methods and approaches for each of your desired behaviors. I would recommend adding some more detailed explanation and sketches (or links to existing sites with these visuals and behaviors) to get very specific help on each. You might want to separate these four things into four separate posts if you’re having trouble grasping how to do them. Also, it is a good idea to try things on your own and when you hit a problem, ask a specific question in the forum here and include your source .rp file (using the Upload button with the “up arrow” in the post/reply menu.)
I think this Axure Tutorial is a good place to start for building your “slider” or carousel component:
You also might be able to learn from and leverage the methods in this Axure Blog post:
Realize that “focused/unfocused” and “selected/unselected” are two similar but different things and you’ll want to use one or the other but likely not both. I would recommend using Selected and Unselected states for your pictures. You can even load different image files for normal (Unselected) and Selected states. So, depending on how different and complex your differences are it might be best to create these visuals in your favorite graphics program and export the two views to PNG or SVG files using the same dimensions for both (pad one with transparency if needed.) There are plenty of attributes and visual styling options in Axure as well. Here is a start on explaining Axure’s Selected/Unselected states and using Selection Groups, which might be handy for the pictures in your carousel to ensure than only one can be selected at at time:
You could do that, certainly. You could also create a dynamic panel for the bottom portion, with different states for each of your pictures. So, if you have 5 pictures in your carousel, your “bottom dynamic panel” would have at least 5 states, one for each picture. You could use the Selected event of each picture to set the corresponding state in the “bottom dynamic panel”
Here is a basic demonstration for changing text:
Here is thread with examples of how to replace text using the built-in .replace() function:
Really depends on what that custom timing is, but you can use the Set Size action to resize any widget, and it has options for animation effects. The demo in this thread may help:
