justinmind-logo
 
Upvote 1

is there a timer to change image every 2 seconds automatically?

Answered Victor Conesa 10 years ago

I want to change the banner on the bottom of the page every 2 seconds. Similar to what many websites do, changing the add every few seconds. For example, if you go to http://share.axure.com/5OE9KM/iPhone_... and click on Ryanair, you can see it.


can someone guide me in how to do it in Justinmind?

Best Answer
photo

Check out the attached prototype to see how to create an automatic slideshow using a timer.

Replies (9)
photo
1

I'm sorry but I can't see any 'Ryanair' icon in that prototype. If you want to change a banner every two seconds, you can use an 'on page load' event that triggers a sequence of actions with 'pause' actions. Something like what is described here:


Justinmind Prototyper can simulate many kind of animations using the 'Pause' action. Let's say you want to prototype a progress bar. That progress bar is just a rectangle that keeps growing for a while. This could be a way to prototype that animation:


Drag a rectangle and make it as long as the progress bar is when the animation starts


Select the rectangle and create an on page load event


Select the 'Pause' action and click ok


Select the arrow icon next to the word 'do' and add a resize action to make the rectangle grow


Repeat the last two steps until the rectangle reach the desired lenght


Your progress bar is ready!


As you saw the 'Pause' action combined with other actions can be a powerful tool to prototype animations.

photo
1

Is there a way to make this process loop? As in, is there a command that can repeat the actions of that rectangle, allowing the progress bar to reset back to its original size and then regrow indefinitely?

photo
1

You can make this animation loop (kind of) by copying/pasting the same actions again or you can import a .swf file.

photo
1

We need loop... swf it's not on my study list!

photo
1

Solved - I think ...


Here's my loop scenario - screen has a set of circles that need to flash (like an alert). I tried the hide-pause-show-pause-reload trick but it seemed very bad. I also want to play an alarm beeping sound and dont want it to play over and over - so linking to same screen again wasn't a way for me.


Alright, I broke my head over this and solved it this way -


I added two input fields, made them completely transparent (no lines etc). Upon page load, I set focus on first text field. In the On-Focus-In event of textfield1, i hide the circles, pause and set focus on textfield2. In the On-Focus-In event of textfield2, I show the circles , pause and set focus on textfield1. And now I have a loop and my flashing circles forever without reloading the screen ! :)

photo
1

I also need loops but at the same time i can't mess up the focus. So Arun's solution wont work. There are several inputs that need to be abled to be in focus and I dont know which one was previously in focus, before doing a loop iteration.

photo
1

Hi everyone, what worked for me was to set the Object as Selected onPageLoad, build the logic for the animation, then at the end of the animation logic set "This" widget as Unselected, then set "This" widget as Selected. Perfect loop.

photo
1

So here is how I created a loop only using one variable and one object. It also doesn't need focus in and out.


Create variable: VarLoop1


Create text object (keep it hidden): TextLoop1


Place VarLoop1 into TextLoop1. This will create event:


- onPageLoad Set Value of TextLoop1 calculated to ['VarLoop1']


Then input these events in TextLoop1:


- onPageLoad Set Value of TextLoop1 calculated to ['VarLoop' + 1]


- onVariableChange for VarLoop1 Set Value of TextLoop1 calculated to ['VarLoop1']


- onVariableChange for VarLoop1 Pause for X milliseconds


- onVariableChange for VarLoop1 Set Value of VarLoop1 calculated to ['VarLoop1' + 1]


What this does; when the page loads it makes that text object equal the variable then immediately adds 1 so the variable changes. Which triggers the On Variable Change events that first updates the text object to equal the variable (which is now 1), then wait for how ever long you want, then change adds 1 to the variable, which again triggers the On Variable Change event causing a loop for this to incrementally move forward. You can add an extra pause and set value event to go back down to 0 then up to 1 then back to 0 if you need to create a toggle on a loop.


With additional rules you can have it count up to a number then loop back.

photo
1

Check out the attached prototype to see how to create an automatic slideshow using a timer.

Leave a Comment
 
Attach a file