I have a banner with 4 images in a dynamic panel. Each image is in a different state of the panel.

banner_1
banner_2
banner_3
banner_4

I placed the dynamic panel banner in a master and set the onPageLoad case to wait 1200ms then change to the next state. I don't want to have to add the 1200ms wait time and change state to x in the case 100 times to ensure that the banner continues to change. Also, there are two button set up to also change the state of the banner onClick ("next" and "prev").

Is there a way to set up a loop that when interrupted by the onClick will then continue to change the images?

---

Thank you,

William

Hi wgrandon,

There isn't a "simple" way to do loops in Axure RP.

Jeff posted a sample of a clever way to do loops here:
http://axure.com/cs/forums/thread/5127.aspx

Stopping and restarting the loop could require some creativity too.

Here's something, though I think we're heading back into "entertainment purposes" territory. I offer it as a fun exploration of the kinds of things that are possible.

The key to interrupting the loop is to design the loop to be interrupted. In other words, instead of building an animation in the editor (which can't be beat for things that need to happen only once), create a set of widgets to step through the animation, and include a way for other actions to stop it.

This works pretty well, though there's enough JavaScript going on that it's not hard to trip it up. In particular, switching from IE to another window (in XP, at least), then back to IE seems to result in two loops that make the animation trip along jerkily at double speed. If you really wanted to do something like this, I would be tempted to set up the page so that a variety of triggers were starting/stopping the loop.

Jeff

I just thought of an easier solution that involves no loops.

Create an animated GIF that contains four frames, each of which shows all four banners in a row, but in different orders:

Frame 1: 1-2-3-4

Frame 2: 2-3-4-1

Frame 3: 3-4-1-2

Frame 4: 4-1-2-3

Create a panel or inline frame that's sized to the size of one banner, put your GIF in a dynamic panel, and arrange it so you can see only one of the images through this window. The animation will run on its own; clicking "previous" or "next" moves the whole thing right or left.

Ok, so here goes nothing. I've created a bannerLoop using onFocus and a 3000ms waiting period. The thing I haven't figure out is how to interrupt it without creating a second loop. I'll attach what I've done and see what you all think.

Let me know if there is something I can do to improve the loop.

---

Thank you,

William

Cool. The three-second wait is a much better pace; it gives you enough time between transitions to be able to tell that the previous and next buttons actually do something.

To add an interrupt here, I would consider creating a widget to act as an on/off switch for the whole system. (This was the function of the LOOP checkbox in my example.) Otherwise, in order to stop the loop, I think you'd have to set the text on all four calculator fields to "stop," because you don't know where the loop is going to be when the stop is triggered. Then the Prev and Next buttons could just change the panel state (as they do now) and turn off the loop, and the calculator widgets would check the state of the switch, not the state of themselves, before continuing the loop. You'd still need to define what's going to start the animation up again.

A final note: From where I sit, you've done a great job of communicating the intent, just with what you have. The way Axure builds pages imposes some quirks and limitations on Axure prototypes. It's easy (and kinda fun) to go overboard trying to get around these, but before you know it you're spending more time simulating something than a developer is going to take to build it.

Jeff

I would love to spend very little time on this model, but the company I work for already has a working site and needs the model I'm working on to, as near as perfectly as possible, mimic the current site before any major changes are incorporated.

So I'll probably end up spend WAY too much time on the model. Oh well. 

---

Thank you,

William

Here's something i did awhile ago, a quick and easy way to do looping using the onpageload action and open reload in current window. I showed this to my buddy Loren Baxter and he had a good idea...putting the looping images page (home) into an iframe on Page1 so that other things can happen on the page even with the looping going on. 

We posted this awhile back but i think it fell into a dark hole. 

Enjoy looping pictures of my dog. Also the images loop pretty quickly, so you could always change the time on that. This was done in axure 5 not 5.5, so you will see the "old" of doing animation.

 let me know if you have questions

Hi,

I am trying to do the same thing, though I can't figure out how to stop the loop when I click on another button.

I set mine to 12 dynamic panels to represent words that move across the page, but found that when i click on another button and then come back, the dynamica panel is still going.

 Any help on how to stop the loop would be appreciated, thanks...

 Brett

Hi Brett,

Can you post a sample file with what you have so far? Or could you tell me which method you are using to create loop.

We are building an application that is similiar to this: http://www.nytimes.com/interactive/2009/01/15/us/politics/20090115_HOPE.html?hp

So to represent the random display of words and popular display of words i have two panels. To similate the movement of words around the screen on the random panel i have 12 states (the attached jpg shows how the OnPageLoad is set up and the second file shows what happens when i clicked on the Popular button to change the display view).

 There are two problems I am having. One when I click on a Popular button (this button is to change the view to organize the words based upon popularity. Onclick i hide the random panel and bring the popular panel to the front) When happens is the random panel disappears for a second and then reappears behind the popular display while it's still changing the random panel states.

So what can be done to solve this problem. Once the onpageload starts how do you interupt it and reset it back to the beginning so you can click away and come back.

 Question two: Is there a better way to do loops than setting up multiple states like this and the problem is that once it hits the end it stops.

thanks for your help. 

One last thing. I've noticed that some of the examples that get uploaded are .rppkg file types, I haven't figured out how to view these. thanks

Hi Brett,

The .rppkg files are the files inside a .rp file which is essentially a zip file. I think when you're downloading the files, they are being saved as .zip. If you rename to .rp that should let you open them.

There isn't a "built-in" way to create the loop and make it interruptable but Jeff's example in this thread "interruptible loop.rp" shows a clever way to do loops with OnFocus events and make them interruptible.

However, in your example, without making the loop repeat, you may be able to just show the Popular panel and bring that to the front, but in the popular panel states put a background rectangle to basically cover up the random panel that may still be animating beneath it.

Then, on the click of the Random button, you can show the random panel again. At that point, you could also include the actions that animate through (the same as in the OnPageLoad). But if you've set that up to be a perpetual loop using the OnFocus method that Jeff uses, I believe you can just set the panel state to the first state and put the focus on the "Next" textbox and it will continue to loop from that panel state.