Switching pictures with forward/back buttons

[ilandv]

Hi everyone,
Would like some advice, like the subject says.
I have a mainscreen on which I want to display 8 different pictures (in one frame) left and right of the frame are 2 buttons. left button jumps 1 pic back, right button jumps 1 pic forward. I'm totally new on this and have not really any programming background. Can some kind soul give me some pointers on how to establish this.

Many thanks in advance
ilan

[Lorne]

Re: Switching pictures with forward/back buttons

Easiest way is to just put all 8 buttons on the page, with all of them hidden at any given time, except for the one you want to show.

Then just make forward/back buttons hide the currently visible button and show the next/previous one.

[ilandv]

Re: Switching pictures with forward/back buttons

Thx for the fast reply Lorne,

Yes I have put all 8 pictures on the screen overlapping each other. But i can't find how to switch focus between them with the 2 (backward/forward) buttons. I understand that I can hide the front (first) picture, (so the one behind shows). But how to repeat that action with the next click???? For your information the picture are all named pic1, pic2, pic3, pic4

thanks for your help
ilan

[Lorne]

Re: Switching pictures with forward/back buttons

This is a pretty advanced thing to do, and it takes a bit of programming. You need to use actions to do this. On the page's On Initialize event, add some Page - Hide Object actions to hide Pic2, Pic3, Pic4, Pic5, etc. -- all of the images EXCEPT for Pic1, which you want shown first. Assign the number 1 to a variable called %i%. (Short for "index.")

On the On Mouse Click event for the forward button, add 1 to the value in %i%, which you can do by assigning %i% + 1 to the variable named %i%.

There are a few different ways to go from there, but here are two of them:

- use a bunch of IF actions to test what the value in %i% is, and insert actions to show and hide the appropriate objects. Something like this:

<pre>
IF(%i% = 2)
// hide 1, 3, 4, 5, 6, 7, 8
Page.HideObject("Pic1")
Page.HideObject("Pic2")
Page.HideObject("Pic4")
Page.HideObject("Pic5")
Page.HideObject("Pic6")
Page.HideObject("Pic7")
Page.HideObject("Pic8")
// show 2
Page.ShowObject("Pic2")
END IF
IF(%i% = 3)
// hide 1, 2, 4, 5, 6, 7, 8
Page.HideObject("Pic1")
Page.HideObject("Pic2")
Page.HideObject("Pic4")
Page.HideObject("Pic5")
Page.HideObject("Pic6")
Page.HideObject("Pic7")
Page.HideObject("Pic8")
// show 3
Page.ShowObject("Pic3")
END IF
</pre>

etc.

- or, get fancy and use a loop, like this:

<pre>
%loop% = 1 // assign 1 to a variable called %loop%
WHILE(%loop% <= 8)
IF(%loop% = %i%)
Page.ShowObject("Pic%i%")
ELSE
Page.HideObject("Pic%i%")
END IF
END WHILE
</pre>

[Corey]

Re: Switching pictures with forward/back buttons

You could streamline that by using a master set of pics and then just removing the shown pic dynamically.

i.e.

%piclist% = "1;;2;;3;;4;;5;;6;;7;;8":

and then simply remove %i% from that at runtime and, treating it like a tab delimited list, step through and show the remmaining pics.

Corey Milner
Creative Director, Indigo Rose Software

[ilandv]

Re: Switching pictures with forward/back buttons

Wow very impressed with the support.
Trying to implement this now.

Will post the feedback if I manage to do this.
Wonderfull product that you guys make, my compliments

maybe later
thx so much to both of you

ilan

[ilandv]

Re: Switching pictures with forward/back buttons

Thanks to you guys, I got it working [img]/ubbthreads/images/icons/smile.gif[/img]
ilan

[Corey]

Re: Switching pictures with forward/back buttons

Cool.

Corey Milner
Creative Director, Indigo Rose Software

[eric_darling]

Re: Switching pictures with forward/back buttons

Here's a little handler I wrote to handle this a bit more elegantly. You'll need to make sure all the images except the first one you want to display are hidden on page initialize. You need to name your images in a series from 1 to whatever, making sure that you change the final image number to match the total number of your images in the slideshow.

Make sure that when you are hiding all of your images in the on page initialize action area, you also set your image counter up:
%CurrentImage% = "1"

When implemented properly, these scripts allow for seamless looping of slideshows on the same page of an AMS 4 project.

This first script is for the "back" button, the second script is for the "forward" button. (put these in each button's On Mouse Click event handler)

<IR_ACTIONS_LIST>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Skip the final image handler bit at first</Comment>
</Action>
<Action name="GOTO">
<Type>209</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Normal</Label>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Navigate to final image if the current image is the first image</Comment>
</Action>
<Action name="LABEL">
<Type>208</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Handle First Image Separately</Label>
</Action>
<Action name="Hide Object">
<Type>16</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="Set Value">
<Type>6</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Variable>%CurrentImage%</Variable>
<Value>25</Value>
<Evaluate>0</Evaluate>
</Action>
<Action name="Show Object">
<Type>17</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="END IF">
<Type>201</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Skip the other image processing commands, and finish</Comment>
</Action>
<Action name="GOTO">
<Type>209</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>END</Label>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Check to see if the current image is the first image, if it is, do the handler</Comment>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>REMEMBER TO SET TO PROPER NUMBER (FIRST IN SERIES)</Comment>
</Action>
<Action name="LABEL">
<Type>208</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Normal</Label>
</Action>
<Action name="IF">
<Type>200</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Condition>%CurrentImage% = 1</Condition>
</Action>
<Action name="GOTO">
<Type>209</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Handle First Image Separately</Label>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>If the image is not the first image, proceed to previous image in series</Comment>
</Action>
<Action name="ELSE">
<Type>206</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
</Action>
<Action name="Hide Object">
<Type>16</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="Set Value">
<Type>6</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Variable>%CurrentImage%</Variable>
<Value>%CurrentImage% - 1</Value>
<Evaluate>1</Evaluate>
</Action>
<Action name="Show Object">
<Type>17</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="LABEL">
<Type>208</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>END</Label>
</Action>
</IR_ACTIONS_LIST>


Here's the script for the "forward" button:

<IR_ACTIONS_LIST>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Skip the final image handler bit at first</Comment>
</Action>
<Action name="GOTO">
<Type>209</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Normal</Label>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Navigate to first image if the current image is the final image</Comment>
</Action>
<Action name="LABEL">
<Type>208</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Handle Final Image Separately</Label>
</Action>
<Action name="Hide Object">
<Type>16</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="Set Value">
<Type>6</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Variable>%CurrentImage%</Variable>
<Value>1</Value>
<Evaluate>0</Evaluate>
</Action>
<Action name="Show Object">
<Type>17</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="END IF">
<Type>201</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Skip the other image processing commands, and finish</Comment>
</Action>
<Action name="GOTO">
<Type>209</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>END</Label>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>Check to see if the current image is the final image, if it is, do the handler</Comment>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>REMEMBER TO SET TO PROPER NUMBER (LAST IN SERIES)</Comment>
</Action>
<Action name="LABEL">
<Type>208</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Normal</Label>
</Action>
<Action name="IF">
<Type>200</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Condition>%CurrentImage% = 25</Condition>
</Action>
<Action name="GOTO">
<Type>209</Type>
<Function>1</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>Handle Final Image Separately</Label>
</Action>
<Action name="Comment">
<Type>202</Type>
<Function>2</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Comment>If the image is not the final image, proceed to next image in series</Comment>
</Action>
<Action name="ELSE">
<Type>206</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
</Action>
<Action name="Hide Object">
<Type>16</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="Set Value">
<Type>6</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Variable>%CurrentImage%</Variable>
<Value>%CurrentImage%+1</Value>
<Evaluate>1</Evaluate>
</Action>
<Action name="Show Object">
<Type>17</Type>
<Function>0</Function>
<DTIndentLevel>1</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<ObjectName>%CurrentImage%</ObjectName>
</Action>
<Action name="LABEL">
<Type>208</Type>
<Function>1</Function>
<DTIndentLevel>0</DTIndentLevel>
<Enabled>1</Enabled>
<ErrorHandling>
<UserNotificationMode>2</UserNotificationMode>
<CustomErrorMessage/>
<OnErrorAction>0</OnErrorAction>
<JumpToLabel/>
</ErrorHandling>
<Label>END</Label>
</Action>
</IR_ACTIONS_LIST>

The pages with a lot of images tend to load somewhat slowly from a CD. It's a problem I haven't found a way around.

[Lorne]

Re: Switching pictures with forward/back buttons

Corey: a list-based approach only makes more sense if the names don't follow a strict "sequentially numbered" naming convention. That's what you would use if the objects were named things like "Summer Foliage" and "Kids Playing in Treehouse," or if there were gaps in the numbers.

Also, removing individual items from a delimited list is a fairly involved procedure in AutoPlay (as is inserting an item into the middle of one). I would personally use a Global List over a delimited list for that sort of thing, though, so you could take advantage of the Remove action, not to mention the list-traversing actions and the built-in position index.

Even then, removing items from the list would not produce the same effect -- you wouldn't be able to view each image more than once that way. That can be a useful technique, especially when randomization is added, but it isn't a traditional slide show.

The code example I posted was just a loose example. I wouldn't personally hide everything at each step through the loop; I would hide all but one of the objects once, on the page initialize, and then show and hide just one object at a time. Like so:
<pre>Page.HideObject("Pic%i%")
%i% = %i% + 1
IF(%i% > 8)
%i% = 8 // could also change this to %i% = 1 for a wraparound effect
END IF
Page.ShowObject("Pic%i%")</pre><pre></pre>Much more streamlined.

[niceness]

Card Game?

In apms4, I am trying to create an app that would include a concentration style card game.

i would like to make the first to cards (images) hide (to reveal the card behind it) when clicked and if they don't match refresh the two chosen cards.

that's one part of the equation, the other challenge is to have the top images of the two matching cards stay hidden; until all are matched

is this even possiblein apms...if not are there any other softwares that i should try

thanx